/* Generated by scripts/build_css.sh — do not edit. Source modules live in static/website/css/marketing/. */

/* ---- 01-tokens-base.css ---- */
/* 01-tokens-base.css - Design tokens, base typography, buttons
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in scripts/build_css.sh and concatenated into
 * static/website/css/marketing.bundle.css.
 */

/* =====================================================
   LayerOne - Marketing Site Styles (Dark Theme)
   Dark neutral base with purple brand and green support accents
   ===================================================== */

/* Tokens are defined in static/css/tokens.css (loaded first). */
/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--l1-font-body);
    background: var(--l1-bg);
    color: var(--l1-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--l1-font-head);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--l1-text);
}

a { color: var(--l1-primary-2); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--l1-primary-dark); }

::selection {
    background: rgba(21, 154, 104, 0.24);
    color: var(--l1-text);
}
::-moz-selection {
    background: rgba(21, 154, 104, 0.24);
    color: var(--l1-text);
}
input,
textarea,
select {
    caret-color: var(--l1-primary-dark);
}

/* ---------- Buttons ---------- */
.l1-btn-primary {
    background: var(--l1-primary);
    color: #fff;
    border: 1px solid var(--l1-primary);
    padding: .75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.l1-btn-primary:hover {
    color: #fff;
    background: var(--l1-primary-dark);
    border-color: var(--l1-primary-dark);
}
.l1-btn-primary:active { background: var(--l1-primary-dark); }

.l1-btn-ghost {
    background: transparent;
    color: var(--l1-text);
    border: 1px solid var(--l1-border-strong);
    padding: .75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    transition: all .2s ease;
}
.l1-btn-ghost:hover {
    color: var(--l1-primary-dark);
    background: var(--l1-primary-soft);
    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;
}


/* ---- 02-navbar-hero.css ---- */
/* 02-navbar-hero.css - Navbar, hero, sections, page hero, cards, features page
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in scripts/build_css.sh (concatenated into
 * static/website/css/marketing.bundle.css).
 *
 * Hero system:
 * - Homepage: contained card hero (.l1-home-hero.l1-hero) with mockup visual
 * - Inner pages: flat map-backed hero (.l1-page-hero, .l1-contact-hero, etc.)
 */

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

/* ---------- Navbar ---------- */
.l1-navbar {
    background: rgba(244, 246, 248, 0.94);
    padding: .475rem 0;
    transition: background .25s ease, padding .25s ease, backdrop-filter .25s ease, border-color .25s ease, box-shadow .25s ease;
    border-bottom: 1px solid var(--l1-border);
}
.l1-navbar > .l1-container {
    position: relative;
}
.l1-navbar.l1-navbar-scrolled {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--l1-border);
    padding: .285rem 0;
}
.l1-navbar.l1-navbar-dashboard {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--l1-border);
    padding: .285rem 0;
}
.l1-brand img {
    display: block;
    height: 64px;
    transition: height .25s ease;
    max-height: 64px;
    width: auto;
}
.l1-navbar.l1-navbar-scrolled .l1-brand img,
.l1-navbar.l1-navbar-dashboard .l1-brand img {
    height: 53px;
}
.l1-navbar .l1-nav-link {
    color: var(--l1-text-muted);
    font-weight: 500;
    padding: .5rem .85rem !important;
    border-radius: 999px;
    transition: background .16s ease, color .16s ease;
}
.l1-navbar .l1-nav-link:hover,
.l1-navbar .l1-nav-link.active {
    background: rgba(120, 131, 146, 0.08);
    color: var(--l1-text);
}
.l1-nav-collapse {
    min-width: 0;
}
.l1-nav-links {
    margin-left: 0;
    margin-right: 0;
}
.l1-account-nav {
    margin-left: auto;
}
.l1-nav-profile {
    align-items: center;
    display: flex;
    margin-right: -.35rem;
}
.l1-profile-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    padding: 3px;
    transition: background .15s ease, opacity .15s ease;
    width: 42px;
}
.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 {
    background: #eff4ff;
    border: 0;
    border-radius: 999px;
    color: var(--l1-text-dim);
    display: block;
    height: 34px;
    object-fit: cover;
    width: 34px;
}
.l1-profile-avatar-blank {
    background: var(--l1-brand-soft);
    color: var(--l1-brand-strong);
    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-toggler {
    border: 1px solid var(--l1-border-strong);
    color: var(--l1-text);
    padding: .45rem .7rem;
    border-radius: 8px;
}
.l1-toggler:focus { box-shadow: 0 0 0 3px var(--l1-primary-soft); }

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

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

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

/* ---------- Hero ---------- */
.l1-hero {
    position: relative;
    min-height: 50vh;
    padding: 7rem 0 3.5rem;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, var(--l1-bg) 48%, #eef3f6 100%);
}
.l1-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(28, 39, 63, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 39, 63, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}
.l1-hero-row { min-height: calc(50vh - 7rem); }

.l1-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--l1-primary-soft);
    border: 1px solid var(--l1-border);
    color: var(--l1-primary-dark);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}
.l1-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--l1-primary);
    box-shadow: 0 0 8px var(--l1-primary);
    animation: l1-dot-pulse 2s ease-in-out infinite;
}

.l1-hero-title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: .75rem;
}
.l1-gradient-text {
    background: linear-gradient(120deg, var(--l1-primary) 0%, var(--l1-primary-dark) 50%, var(--l1-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: l1-gradient-shift 6s ease-in-out infinite;
}
.l1-hero-sub {
    font-size: 1.1rem;
    color: var(--l1-text-muted);
    max-width: 540px;
    margin-bottom: 1rem;
}
.l1-hero-cta {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.l1-hero-stats {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.l1-hero-stats > div:not(.l1-hero-stats-divider) {
    display: flex;
    flex-direction: column;
}
.l1-hero-stats strong {
    font-family: var(--l1-font-head);
    font-size: 1.6rem;
    color: var(--l1-text);
    line-height: 1;
}
.l1-hero-stats span {
    font-size: .82rem;
    color: var(--l1-text-muted);
    margin-top: .25rem;
}
.l1-hero-stats-divider {
    width: 1px;
    height: 32px;
    background: var(--l1-border-strong);
}

.l1-hero-scroll {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.l1-hero-scroll a {
    width: 26px; height: 42px;
    border: 2px solid var(--l1-border-strong);
    border-radius: 8px;
    display: flex; justify-content: center;
    padding-top: 8px;
}
.l1-hero-scroll span {
    width: 3px; height: 8px;
    background: var(--l1-primary);
    border-radius: 2px;
    animation: l1-scroll-dot 2s ease-in-out infinite;
}

/* ---------- Sections ---------- */
.l1-section {
    padding: 4rem 0;
    position: relative;
}
.l1-section-alt {
    background: var(--l1-bg-2);
    border-top: 1px solid var(--l1-border);
    border-bottom: 1px solid var(--l1-border);
}
.l1-section-head {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.l1-section-title {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    margin: .6rem 0 .75rem;
    line-height: 1.2;
}
.l1-section-sub {
    font-size: 1.05rem;
    color: var(--l1-text-muted);
    line-height: 1.6;
}

/* ---------- Page hero (smaller hero for sub-pages) ---------- */
.l1-page-hero {
    position: relative;
    padding: 7rem 0 2.75rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--l1-bg) 64%, #f2f6fa 100%);
    border-bottom: 1px solid var(--l1-border);
    overflow: hidden;
    text-align: center;
}
.l1-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(28, 39, 63, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 39, 63, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}
.l1-page-hero > .l1-container { position: relative; z-index: 1; }
.l1-page-hero h1 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    margin: .5rem 0 .75rem;
    text-wrap: balance;
}
.l1-page-hero p {
    font-size: 1.05rem;
    color: var(--l1-text-muted);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---------- Cards (features) ---------- */
.l1-feature {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    padding: 2rem;
    height: 100%;
    box-shadow: 0 1px 2px rgba(28, 39, 63, 0.04);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
    position: relative;
}
.l1-feature:hover {
    border-color: var(--l1-primary);
    background: var(--l1-surface-2);
    box-shadow: 0 14px 32px rgba(28, 39, 63, 0.08);
    transform: translateY(-2px);
}
.l1-feature-icon {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: var(--l1-primary-soft);
    color: var(--l1-primary-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}
.l1-feature h3 {
    font-size: 1.2rem;
    margin-bottom: .5rem;
}
.l1-feature p {
    color: var(--l1-text-muted);
    margin: 0;
    font-size: .95rem;
}

/* Feature card with clickable title that expands to whole card surface.
   Keeps the anchor text short (just the h3) while preserving "click anywhere" UX. */
.l1-feature-link { position: relative; }
.l1-feature-link h3 a {
    color: inherit;
    text-decoration: none;
}
.l1-feature-link h3 a:hover { color: var(--l1-primary-dark); }
.l1-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.l1-feature-link p { position: relative; z-index: 0; }

/* ---------- Feature row (flat, non-card list style) ---------- */
.l1-feature-row {
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
    padding: 1rem 0;
}
.l1-feature-row-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--l1-primary-soft);
    color: var(--l1-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.l1-feature-row-body { min-width: 0; }
.l1-feature-row-body h3 {
    font-family: var(--l1-font-head);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: var(--l1-text);
    line-height: 1.3;
}
.l1-feature-row-body p {
    color: var(--l1-text-muted);
    font-size: .95rem;
    margin: 0;
    line-height: 1.6;
}

/* ---------- Features page ---------- */
.l1-features-hero .l1-container {
    max-width: 980px;
}
.l1-feature-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.l1-feature-hero-link {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius);
    background: rgba(255, 255, 255, .82);
    color: var(--l1-text);
    text-align: left;
}
.l1-feature-hero-link span,
.l1-plan-fit-label {
    color: var(--l1-primary-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.l1-feature-hero-link strong {
    font-family: var(--l1-font-head);
    font-size: 1.02rem;
    line-height: 1.25;
}
.l1-feature-guide,
.l1-command-panel,
.l1-ops-card,
.l1-plan-fit-card {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
}
.l1-feature-guide {
    position: sticky;
    top: 6rem;
    padding: 1.5rem;
}
.l1-feature-guide h2,
.l1-command-panel h3,
.l1-ops-card h3,
.l1-plan-fit-card h3 {
    font-size: 1.25rem;
    margin: .6rem 0 .75rem;
}
.l1-feature-guide p,
.l1-command-panel p,
.l1-ops-card p,
.l1-plan-fit-card p {
    color: var(--l1-text-muted);
    margin-bottom: 0;
}
.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-workload-list {
    display: grid;
    gap: 1rem;
}
.l1-workload-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 1rem;
    align-items: flex-start;
    padding: 1.2rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
}
.l1-workload-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--l1-radius);
    background: rgba(53, 111, 209, 0.1);
    color: var(--l1-primary-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.l1-workload-row h3 {
    font-size: 1.17rem;
    margin-bottom: .4rem;
}
.l1-workload-row p {
    color: var(--l1-text-muted);
    margin-bottom: .85rem;
}
.l1-feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.l1-feature-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .28rem .65rem;
    border: 1px solid var(--l1-border);
    border-radius: 999px;
    background: var(--l1-surface-2);
    color: var(--l1-text-muted);
    font-size: .8rem;
    font-weight: 700;
}
.l1-feature-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
}
.l1-feature-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}
.l1-feature-table th,
.l1-feature-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--l1-border);
    text-align: left;
    vertical-align: top;
}
.l1-feature-table th {
    color: var(--l1-text);
    background: var(--l1-bg-2);
    font-family: var(--l1-font-head);
}
.l1-feature-table td {
    color: var(--l1-text-muted);
    font-size: .94rem;
}
.l1-feature-table td strong {
    color: var(--l1-text);
}
.l1-feature-table tr:last-child td {
    border-bottom: 0;
}
.l1-command-panel {
    padding: 1.25rem;
    margin-top: 1.5rem;
}
.l1-command-list {
    display: grid;
    gap: .65rem;
    margin: 1rem 0;
}
.l1-command-list code {
    display: block;
    padding: .75rem .85rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius);
    background: var(--l1-portal);
    color: #eaf1ff;
    overflow-wrap: anywhere;
}
.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 > 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;
}
.l1-launch-step h3 {
    font-size: 1.12rem;
    margin-bottom: .35rem;
}
.l1-launch-step p {
    margin-bottom: 0;
    color: var(--l1-text-muted);
}
.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-primary {
    border-color: rgba(120, 131, 146, .38);
    box-shadow: 0 10px 30px rgba(120, 131, 146, .08);
}
.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-feature-action-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.l1-feature-action-row p {
    margin: 0;
    color: var(--l1-text-muted);
}
.l1-ops-card {
    height: 100%;
    padding: 1.5rem;
}
.l1-ops-card .l1-link-arrow {
    display: inline-flex;
    margin-top: 1rem;
    align-items: center;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .l1-feature-guide {
        position: static;
    }
    .l1-plan-fit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .l1-feature-hero-grid,
    .l1-plan-fit-grid {
        grid-template-columns: 1fr;
    }
    .l1-workload-row {
        grid-template-columns: 1fr;
    }
    .l1-feature-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }
    .l1-feature-table,
    .l1-feature-table tbody,
    .l1-feature-table tr,
    .l1-feature-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }
    .l1-feature-table thead {
        display: none;
    }
    .l1-feature-table tr {
        padding: 1rem;
        margin-bottom: 1rem;
        border: 1px solid var(--l1-border);
        border-radius: var(--l1-radius-lg);
        background: var(--l1-surface);
    }
    .l1-feature-table tr:last-child {
        margin-bottom: 0;
    }
    .l1-feature-table td {
        border-bottom: 0;
        padding: .45rem 0;
    }
    .l1-feature-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .18rem;
        color: var(--l1-primary-dark);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    .l1-feature-table td:first-child {
        padding-top: 0;
    }
    .l1-feature-table td:first-child::before {
        display: none;
    }
    .l1-feature-table td:first-child strong {
        display: block;
        font-size: 1.05rem;
    }
}


/* ---- 03-pricing-plans.css ---- */
/* 03-pricing-plans.css - Proof blocks, pricing, locations, stats, CTA, billing, FAQ
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* ---------- Proof blocks ---------- */
.l1-proof-panel,
.l1-proof-card {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    height: 100%;
}
.l1-proof-panel {
    padding: 1.75rem;
    box-shadow: 0 10px 28px rgba(28, 39, 63, 0.06);
}
.l1-proof-panel-top {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--l1-accent);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.l1-proof-panel h3,
.l1-proof-card h3 {
    font-size: 1.15rem;
    margin-bottom: .75rem;
}
.l1-proof-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.l1-proof-toolbar h3 {
    margin-bottom: .25rem;
}
.l1-proof-kicker {
    font-size: .9rem;
}
.l1-proof-panel p,
.l1-proof-card p {
    color: var(--l1-text-muted);
    margin-bottom: 0;
}
.l1-proof-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    gap: .7rem;
}
.l1-proof-list li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    color: var(--l1-text-muted);
}
.l1-proof-list i {
    color: var(--l1-accent);
    margin-top: .2rem;
}
.l1-proof-commands {
    display: grid;
    gap: .65rem;
    margin: 1.25rem 0;
}
.l1-proof-command {
    display: grid;
    grid-template-columns: minmax(110px, .7fr) minmax(0, 1fr);
    gap: .9rem;
    align-items: center;
    padding: .75rem .85rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius);
    background: var(--l1-surface-2);
}
.l1-proof-command span {
    color: var(--l1-text-muted);
    font-size: .82rem;
    font-weight: 700;
}
.l1-proof-command code {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--l1-text);
    background: transparent;
    padding: 0;
    font-size: .84rem;
}
.l1-location-field {
    display: grid;
    gap: .3rem;
    min-width: min(100%, 300px);
}
.l1-location-field span {
    color: var(--l1-text-muted);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.l1-location-field select {
    width: 100%;
    border: 1px solid var(--l1-border-strong);
    border-radius: var(--l1-radius);
    background: var(--l1-surface);
    color: var(--l1-text);
    padding: .58rem 2.25rem .58rem .8rem;
    font-weight: 700;
    line-height: 1.2;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--l1-text-muted) 50%),
        linear-gradient(135deg, var(--l1-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) 50%,
        calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.l1-location-field select:focus {
    outline: 0;
    border-color: var(--l1-primary);
    box-shadow: 0 0 0 3px var(--l1-primary-soft);
}
.l1-proof-table-wrap {
    overflow-x: auto;
}
.l1-proof-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}
.l1-proof-table th,
.l1-proof-table td {
    padding: .85rem .9rem;
    border-bottom: 1px solid var(--l1-border);
    text-align: left;
    font-size: .94rem;
}
.l1-proof-table th {
    color: var(--l1-text);
    background: var(--l1-bg-2);
    font-family: var(--l1-font-head);
}
.l1-proof-table tr:last-child td { border-bottom: 0; }
.l1-proof-note {
    font-size: .88rem;
    margin-top: 1rem;
}
.l1-use-proof {
    background: var(--l1-bg-2);
    border-top: 1px solid var(--l1-border);
}
.l1-proof-card {
    padding: 1.4rem;
}
.l1-proof-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--l1-accent-soft);
    color: var(--l1-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* ---------- Homepage pricing handoff ---------- */
.l1-pricing-handoff {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 2rem;
    align-items: center;
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.l1-pricing-copy .l1-section-title {
    margin-top: .35rem;
}
.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;
    padding: .55rem 0;
    border: 0;
    border-bottom: 1px solid var(--l1-border);
    border-radius: 0;
    background: transparent;
    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;
}

/* ---------- Plans ---------- */
.l1-plan {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    padding: 2.25rem 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color .2s ease;
}
.l1-plan:hover {
    border-color: var(--l1-primary);
}
.l1-plan-featured {
    background: var(--l1-surface);
    border-color: var(--l1-primary);
    border-width: 2px;
}
.l1-plan-featured:hover { border-color: var(--l1-primary-dark); }
.l1-plan-badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--l1-primary);
    color: #fff;
    padding: .25rem 1rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.l1-plan-name {
    font-family: var(--l1-font-head);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--l1-text);
}
.l1-plan-sku {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--l1-accent);
    margin-bottom: .4rem;
}
.l1-plan-tagline {
    color: var(--l1-text-muted);
    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-size: clamp(1.45rem, 2.25vw, 1.95rem);
    font-weight: 700;
    color: var(--l1-text);
    line-height: 1;
}
.l1-plan-period {
    color: var(--l1-text-muted);
    margin-left: .35rem;
    font-size: .78rem;
}
.l1-plan-billed {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    color: var(--l1-text-dim);
}
.l1-plan-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    flex-grow: 1;
}
.l1-plan-specs li {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--l1-text);
    padding: .55rem 0;
    border-bottom: 1px solid var(--l1-border);
    font-size: .95rem;
}
.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 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
.l1-home-plans .l1-plan {
    margin: 0;
}
.l1-home-plans .l1-btn {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}
@media (max-width: 991.98px) {
    .l1-home-plans {
        grid-template-columns: 1fr;
        max-width: 28rem;
        margin-inline: auto;
    }
}

.l1-catalog-cadences {
    display: grid;
    gap: .55rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--l1-border);
    font-size: .82rem;
}
.l1-catalog-cadences span {
    color: var(--l1-text-dim);
    font-weight: 700;
}
.l1-catalog-cadences div {
    display: grid;
    gap: .4rem;
}
.l1-catalog-cadences a {
    color: var(--l1-primary-dark);
    font-weight: 700;
    text-decoration: none;
}
.l1-catalog-cadences a:hover {
    color: var(--l1-primary);
}

.l1-credit-model-grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: -1rem 0 2rem;
}
.l1-credit-model-grid article {
    background:
        linear-gradient(180deg, rgba(165, 172, 182, .045), rgba(165, 172, 182, 0) 48%),
        #ffffff;
    border: 1px solid rgba(80, 88, 100, .13);
    border-radius: 8px;
    box-shadow: 0 16px 44px rgba(44, 48, 54, .08);
}
.l1-credit-model-grid article {
    display: grid;
    gap: .35rem;
    padding: 1rem;
}
.l1-credit-model-grid strong {
    color: var(--l1-text);
    font-weight: 850;
}
.l1-credit-model-grid span {
    color: var(--l1-text-muted);
    font-size: .92rem;
    line-height: 1.55;
}

.l1-buying-confidence {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.l1-confidence-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
}
.l1-confidence-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: var(--l1-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--l1-primary-soft);
    color: var(--l1-primary-dark);
}
.l1-confidence-card h3 {
    font-size: 1rem;
    margin: 0 0 .35rem;
}
.l1-confidence-card p {
    color: var(--l1-text-muted);
    font-size: .92rem;
    margin: 0;
}
.l1-os-card {
    display: block;
}
.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-strip p {
    color: var(--l1-text-muted);
    font-size: .92rem;
    font-weight: 600;
    margin: 0 0 .85rem;
}
.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-link-arrow {
    color: var(--l1-primary-2);
    font-weight: 600;
}
.l1-link-arrow:hover { color: var(--l1-primary-dark); }

/* ---------- Locations ---------- */
.l1-locations-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.l1-locations-section > .l1-container {
    position: relative;
    z-index: 1;
}
.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%);
}
@keyframes l1WorldMapFadeIn {
    to {
        opacity: var(--l1-map-opacity);
        transform: translateY(0) scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .l1-world-map-bg {
        opacity: var(--l1-map-opacity);
        transform: none;
        animation: none;
    }
}
.l1-world-map-land {
    fill: currentColor;
    opacity: .044;
}
.l1-world-map-land path {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.l1-world-map-grid path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    opacity: .024;
}
.l1-world-map-routes path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 7 12;
    opacity: .1;
}
.l1-world-map-points {
    fill: currentColor;
    opacity: .16;
}
.l1-location {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: border-color .2s ease, background .2s ease;
}
.l1-location:hover {
    border-color: var(--l1-primary);
    background: var(--l1-surface-2);
}
.l1-location-flag {
    font-size: 2.4rem;
    margin-bottom: .5rem;
    line-height: 1;
}
.l1-location-name {
    font-family: var(--l1-font-head);
    font-weight: 600;
    color: var(--l1-text);
}
.l1-location-meta {
    font-size: .85rem;
    color: var(--l1-text-muted);
    margin-top: .2rem;
}
.l1-location-coming { opacity: .65; }
.l1-location-coming .l1-location-meta { color: var(--l1-primary); }
.l1-locations-section .l1-location,
.l1-locations-section .l1-plan {
    background-color: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
}

.l1-devops-tools {
    margin-top: 3rem;
    padding: 2rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background:
        linear-gradient(180deg, rgba(120, 131, 146, 0.04) 0%, rgba(120, 131, 146, 0) 100%),
        var(--l1-surface);
}
.l1-locations-section .l1-devops-tools {
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    padding: 2.5rem 0 0;
}
.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-copy p {
    color: var(--l1-text-muted);
    margin: 0;
}
.l1-devops-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.l1-tool-card {
    display: grid;
    align-content: center;
    gap: .85rem;
    justify-items: center;
    text-align: center;
    min-height: 152px;
    padding: 1.35rem 1rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius);
    background: var(--l1-surface-2);
}
.l1-locations-section .l1-tool-card {
    background: transparent;
    backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
    padding: .75rem 1rem;
}
.l1-tool-logo {
    display: block;
    width: min(180px, 82%);
    height: 54px;
    object-fit: contain;
    object-position: center;
}
.l1-tool-logo-kubernetes {
    height: 64px;
}
.l1-tool-card span {
    color: var(--l1-text-muted);
    font-size: .92rem;
    line-height: 1.45;
}

/* ---------- About / Stats ---------- */
.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;
}
.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);
    border-radius: var(--l1-radius);
    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);
}

/* ---------- Section head left-align variant ---------- */
.l1-section-head-left { text-align: left; }
.l1-section-head-left .l1-section-title { text-align: left; }

/* ---------- CTA section ---------- */
.l1-cta-section {
    padding: 4rem 0;
    background: var(--l1-bg);
}
.l1-cta-card {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border-strong);
    border-radius: var(--l1-radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.l1-cta-glow {
    display: none;
}
.l1-cta-card h2 {
    position: relative;
    font-size: clamp(1.65rem, 3vw, 2.2rem);
    margin-bottom: .75rem;
}
.l1-cta-card p {
    position: relative;
    font-size: 1.05rem;
    color: var(--l1-text-muted);
    max-width: 560px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}
.l1-cta-buttons {
    position: relative;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Billing toggle ---------- */
.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-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;
}
.l1-billing-toggle button.active {
    background: var(--l1-primary);
    color: #fff;
}
.l1-savings-badge {
    background: rgba(46, 204, 113, 0.15);
    color: #1f8a4d;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
    letter-spacing: .03em;
}
.l1-billing-toggle button.active .l1-savings-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.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 > span {
    font-size: .82rem;
    font-weight: 850;
    letter-spacing: .02em;
    padding: 0 .55rem;
    text-transform: uppercase;
}
.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;
}
.l1-commitment-strip button {
    cursor: pointer;
}
.l1-commitment-strip button:hover,
.l1-commitment-strip button:focus {
    background: rgba(255, 255, 255, .1);
    box-shadow: none;
    color: #fff;
}

.l1-commitment-strip button.is-active {
    background: rgba(255, 255, 255, .92);
    box-shadow: none;
    color: var(--l1-primary-dark);
}
.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;
}

.l1-commitment-strip button.is-active small {
    display: inline-flex;
}

/* ---------- Comparison table ---------- */
.l1-compare-wrap {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    overflow: hidden;
    overflow-x: auto;
}
.l1-compare {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.l1-compare th,
.l1-compare td {
    padding: 1rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--l1-border);
    font-size: .95rem;
}
.l1-compare th:first-child,
.l1-compare td:first-child {
    text-align: left;
    color: var(--l1-text-muted);
    font-weight: 500;
}
.l1-compare thead th {
    background: var(--l1-bg-2);
    color: var(--l1-text);
    font-family: var(--l1-font-head);
    font-weight: 700;
    font-size: 1rem;
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid var(--l1-border-strong);
}
.l1-compare thead th.l1-compare-featured {
    background: linear-gradient(180deg, #f6f6f7 0%, var(--l1-surface) 100%);
    color: var(--l1-primary-dark);
    position: relative;
}
.l1-compare tbody td { color: var(--l1-text); }
.l1-compare tbody tr:last-child td { border-bottom: 0; }
.l1-compare tbody tr:hover td { background: var(--l1-bg-2); }
.l1-compare .l1-compare-check { color: var(--l1-primary); font-size: 1.1rem; }
.l1-compare .l1-compare-x { color: var(--l1-text-dim); font-size: 1.1rem; }

/* ---------- FAQ accordion ---------- */
.l1-faq .l1-accordion {
    gap: 0;
}
.l1-faq .l1-accordion-item {
    background: transparent;
    border: 0;
    border-radius: 0 !important;
    box-shadow: inset 0 -1px 0 0 var(--l1-border);
    margin: 0;
    overflow: hidden;
}
.l1-faq .l1-accordion-item:last-child {
    box-shadow: none;
}
.l1-faq .l1-accordion-button {
    background: transparent;
    color: var(--l1-text);
    font-family: var(--l1-font-head);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 1.25rem 0;
    box-shadow: none;
}
.l1-faq .l1-accordion-button:not(.is-collapsed) {
    background: transparent;
    color: var(--l1-text);
}
.l1-faq .l1-accordion-button:focus {
    box-shadow: 0 0 0 3px var(--l1-primary-soft);
    border-color: transparent;
}
.l1-faq .l1-accordion-body {
    color: var(--l1-text-muted);
    padding: 0 0 1.5rem;
    font-size: .98rem;
    line-height: 1.65;
}
.l1-faq .l1-accordion-button::after {
    filter: hue-rotate(220deg) saturate(2);
}
.l1-faq-handoff {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: 920px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.l1-faq-handoff .l1-section-title {
    margin-top: .35rem;
}
.l1-faq-handoff .l1-section-sub {
    margin-bottom: 0;
}
.l1-faq-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
}

/* ---- 04-footer-legal.css ---- */
/* 04-footer-legal.css - Footer, legal pages, animations, blog index, docs, status
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* ---------- Footer ---------- */
.l1-footer {
    background: var(--l1-bg-2);
    border-top: 1px solid var(--l1-border);
    padding: 3rem 0 1.25rem;
    color: var(--l1-text-muted);
}
.l1-footer-top {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--l1-border);
}
.l1-footer-brand img { display: block; margin-bottom: 1rem; }
.l1-footer-tagline {
    max-width: 320px;
    font-size: .95rem;
    margin-bottom: 1.5rem;
}
.l1-footer-title {
    color: var(--l1-text);
    font-family: var(--l1-font-head);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    letter-spacing: .02em;
}
.l1-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.l1-footer-list li { margin-bottom: .65rem; }
.l1-footer-list a {
    color: var(--l1-text-muted);
    font-size: .92rem;
}
.l1-footer-list a:hover { color: var(--l1-primary-dark); }

.l1-social {
    display: flex;
    gap: .75rem;
}
.l1-social a {
    width: 38px; height: 38px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    color: var(--l1-text-muted);
    font-size: 1rem;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.l1-social a:hover {
    color: #fff;
    background: var(--l1-primary);
    border-color: var(--l1-primary);
}
.l1-google-reviews {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
    color: var(--l1-text);
    font-size: .9rem;
    font-weight: 600;
}
.l1-google-reviews:hover {
    color: var(--l1-primary-dark);
}
.l1-review-stars {
    display: inline-flex;
    gap: .16rem;
    color: #f2b01e;
    font-size: .9rem;
    line-height: 1;
}

.l1-footer-bottom {
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .88rem;
}
.l1-footer-bottom a {
    color: var(--l1-text-muted);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.l1-footer-bottom a:hover { color: var(--l1-primary-dark); }
.l1-status-dot {
    width: 8px; height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 8px #2ecc71;
    animation: l1-dot-pulse 2s ease-in-out infinite;
}
/* FAQ accordion */
.l1-accordion .l1-accordion-item {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius);
    margin-bottom: .75rem;
    overflow: hidden;
}
.l1-accordion .l1-accordion-button {
    background: var(--l1-surface);
    color: var(--l1-text);
    font-weight: 600;
    padding: 1.05rem 1.25rem;
    border: none;
    box-shadow: none;
}
.l1-accordion .l1-accordion-button:not(.is-collapsed) {
    background: var(--l1-primary-soft);
    color: var(--l1-primary);
    box-shadow: none;
}
.l1-accordion .l1-accordion-button:focus {
    box-shadow: 0 0 0 .15rem var(--l1-primary-glow);
    border-color: transparent;
}
.l1-accordion .l1-accordion-body {
    padding: 0 1.25rem 1.15rem;
    color: var(--l1-text-muted);
    line-height: 1.65;
}
.l1-accordion .l1-accordion-body a { color: var(--l1-primary); }

/* Company dropdown in nav */
.l1-dropdown {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius);
    box-shadow: 0 18px 42px rgba(28, 39, 63, 0.12);
    padding: .4rem;
    margin-top: .5rem;
    min-width: 11rem;
}
.l1-dropdown .l1-menu-link {
    color: var(--l1-text);
    border-radius: 6px;
    padding: .55rem .8rem;
    font-size: .92rem;
    font-weight: 650;
    transition: background .12s, color .12s;
}
.l1-dropdown .l1-menu-link:hover,
.l1-dropdown .l1-menu-link:focus {
    background: var(--l1-primary-soft);
    color: var(--l1-primary);
}
.l1-dropdown .l1-menu-link.active {
    background: var(--l1-primary);
    color: #fff;
}
.l1-profile-dropdown {
    min-width: 15rem;
}
.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-profile-divider {
    border-color: var(--l1-border);
    margin: .35rem .25rem;
}
.l1-navbar .l1-nav-item.l1-menu .l1-menu-trigger::after {
    margin-left: .4rem;
    vertical-align: .12em;
    opacity: .7;
}

.l1-footer-payments {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    font-size: 1.5rem;
    color: var(--l1-text-muted);
}
.l1-footer-payments i { opacity: .7; transition: opacity .15s, color .15s; }
.l1-footer-payments i:hover { opacity: 1; color: var(--l1-primary-dark); }
.l1-footer-legal {
    display: block;
    margin-top: .25rem;
    color: var(--l1-text-muted);
    font-size: .78rem;
}

/* ---------- Legal pages ---------- */
.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-toc {
    position: sticky;
    top: 6rem;
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius);
    padding: 1.5rem;
}
.l1-legal-toc h6 {
    color: var(--l1-text-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1rem;
    font-weight: 700;
    font-family: var(--l1-font-head);
}
.l1-legal-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: legal-toc;
}
.l1-legal-toc li {
    counter-increment: legal-toc;
    margin-bottom: .55rem;
}
.l1-legal-toc a {
    color: var(--l1-text-muted);
    font-size: .92rem;
    display: flex;
    gap: .55rem;
    text-decoration: none;
    line-height: 1.45;
}
.l1-legal-toc a::before {
    content: counter(legal-toc) ".";
    color: var(--l1-primary);
    font-weight: 700;
    flex-shrink: 0;
}
.l1-legal-toc a:hover {
    color: var(--l1-primary-dark);
}
.l1-legal-content h2 {
    font-size: 1.5rem;
    margin: 2.75rem 0 1rem;
    scroll-margin-top: 6rem;
    color: var(--l1-text);
}
.l1-legal-content h2:first-child { margin-top: 0; }
.l1-legal-content h3 {
    font-size: 1.1rem;
    margin: 1.5rem 0 .75rem;
    color: var(--l1-text);
    font-family: var(--l1-font-head);
}
.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 strong { color: var(--l1-text); font-weight: 600; }
.l1-legal-content a { color: var(--l1-primary-2); }
.l1-legal-content a:hover { color: var(--l1-primary-dark); }
.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; }
.l1-legal-contact {
    margin-top: 3rem;
    padding: 1.75rem;
    background: linear-gradient(135deg, var(--l1-surface) 0%, var(--l1-bg-2) 100%);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
}
.l1-legal-contact strong {
    font-family: var(--l1-font-head);
    display: block;
    margin-bottom: .25rem;
}
@media (max-width: 991.98px) {
    .l1-legal-toc { position: static; margin-bottom: 2rem; }
    .l1-legal-content h2 { scroll-margin-top: 5rem; }
}

/* ---------- Animations ---------- */
@keyframes l1-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes l1-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(1.4); }
}
@keyframes l1-scroll-dot {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
}

/* ---------- Blog index cards ---------- */
.l1-blog-card {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.l1-blog-card:hover {
    border-color: var(--l1-primary);
    box-shadow: 0 16px 38px rgba(28, 39, 63, 0.08);
    transform: translateY(-2px);
}
.l1-blog-card-icon {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: var(--l1-bg-3);
}
.l1-blog-card-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.l1-blog-card-icon img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.l1-blog-card-body {
    padding: 1.5rem 1.65rem 1.65rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.l1-blog-card-meta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .78rem;
    color: var(--l1-text-muted);
    margin-bottom: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.l1-blog-card-meta .l1-blog-tag {
    background: var(--l1-primary-soft);
    color: var(--l1-primary-dark);
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    border: 1px solid var(--l1-border);
}
.l1-blog-card-title {
    font-family: var(--l1-font-head);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--l1-text);
    margin: 0 0 .65rem;
}
.l1-blog-card-title a {
    color: inherit;
    text-decoration: none;
}
.l1-blog-card-title a:hover { color: var(--l1-primary-dark); }
.l1-blog-card-excerpt {
    color: var(--l1-text-muted);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
    flex-grow: 1;
}
.l1-blog-card-byline {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--l1-border);
    font-size: .85rem;
    color: var(--l1-text-muted);
}
.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-blog-card-author { color: var(--l1-text); font-weight: 600; }

.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 .l1-feature-icon {
    margin-bottom: 1rem;
}
.l1-empty-public h2 {
    font-size: 1.35rem;
    margin-bottom: .5rem;
}
.l1-empty-public p {
    color: var(--l1-text-muted);
    margin: 0;
}

.l1-blog-cta {
    padding: 1.5rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface-2);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: 1.25rem;
    align-items: center;
}
.l1-blog-cta h2 {
    font-size: 1.55rem;
    margin: .25rem 0 .4rem;
}
.l1-blog-cta p {
    color: var(--l1-text-muted);
    margin: 0;
}
.l1-blog-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .75rem;
}
.l1-blog-cta-list {
    grid-column: 1 / -1;
    list-style: none;
    padding: 1rem 0 0;
    margin: 0;
    border-top: 1px solid var(--l1-border);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    color: var(--l1-text-muted);
    font-size: .95rem;
}
.l1-blog-cta-list li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.l1-blog-cta-list i {
    color: var(--l1-primary-dark);
}

/* ---------- Docs / knowledge base ---------- */
.l1-docs-hero p {
    max-width: 720px;
}
.l1-doc-toc {
    position: sticky;
    top: 6.5rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
    padding: 1.1rem;
}
.l1-doc-toc h2 {
    font-size: .86rem;
    margin: 0 0 .75rem;
    color: var(--l1-text-dim);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.l1-doc-toc a {
    display: block;
    color: var(--l1-text-muted);
    padding: .45rem 0;
    font-size: .94rem;
    line-height: 1.35;
}
.l1-doc-toc a:hover {
    color: var(--l1-primary-dark);
}
.l1-docs-search {
    max-width: 860px;
    margin: 0 auto 1.25rem;
}
.l1-docs-search label {
    display: block;
    color: var(--l1-text);
    font-weight: 700;
    margin-bottom: .45rem;
}
.l1-docs-search-field {
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
    padding: .2rem .9rem;
}
.l1-docs-search-field i {
    color: var(--l1-text-dim);
}
.l1-docs-search-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--l1-text);
    padding: .85rem 0;
}
.l1-docs-list {
    max-width: 860px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}
.l1-doc-card-kicker {
    color: var(--l1-primary-dark);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.l1-doc-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
}
.l1-doc-card h2 {
    font-size: 1.16rem;
    margin: .25rem 0 .4rem;
}
.l1-doc-card h2 a {
    color: var(--l1-text);
}
.l1-doc-card h2 a:hover {
    color: var(--l1-primary-dark);
}
.l1-doc-card p {
    margin: 0;
    color: var(--l1-text-muted);
}
.l1-doc-card-arrow {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--l1-border);
    color: var(--l1-primary-dark);
    background: var(--l1-primary-soft);
}
.l1-docs-empty {
    border: 1px dashed var(--l1-border-strong);
    border-radius: var(--l1-radius-lg);
    color: var(--l1-text-muted);
    background: var(--l1-surface);
    padding: 1.25rem;
    text-align: center;
    margin: 0;
}
.l1-doc-article-wrap {
    padding: 7rem 0 4rem;
    background: var(--l1-bg);
}
.l1-doc-article-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 760px);
    gap: 2.25rem;
    align-items: flex-start;
    justify-content: center;
}
.l1-doc-back {
    margin-bottom: .75rem;
    color: var(--l1-primary-dark) !important;
    font-weight: 700;
}
.l1-doc-article {
    min-width: 0;
}
.l1-doc-header {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--l1-border);
    margin-bottom: 2rem;
}
.l1-doc-header h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    margin: .5rem 0 .9rem;
}
.l1-doc-header p {
    color: var(--l1-text-muted);
    font-size: 1.08rem;
    margin-bottom: 1rem;
}
.l1-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}
.l1-doc-meta span {
    border: 1px solid var(--l1-border);
    border-radius: 999px;
    background: var(--l1-surface);
    color: var(--l1-text-muted);
    padding: .35rem .7rem;
    font-size: .84rem;
}
.l1-doc-article section {
    scroll-margin-top: 6.5rem;
    margin-bottom: 2.4rem;
}
.l1-doc-article h2 {
    font-size: 1.55rem;
    margin: 0 0 .75rem;
}
.l1-doc-article p,
.l1-doc-article li {
    color: var(--l1-text-muted);
    font-size: 1rem;
}
.l1-doc-article ol,
.l1-doc-article ul {
    padding-left: 1.25rem;
}
.l1-doc-article pre {
    border: 1px solid rgba(28, 39, 63, .16);
    border-radius: var(--l1-radius);
    background: #101828;
    color: #eef3f7;
    padding: 1rem;
    overflow-x: auto;
    font-size: .92rem;
    line-height: 1.55;
}
.l1-doc-article code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.l1-doc-cta {
    border: 1px solid rgba(120, 131, 146, .28);
    border-radius: var(--l1-radius-lg);
    background: linear-gradient(180deg, rgba(120, 131, 146, .08), rgba(53, 111, 209, .06));
    padding: 1.5rem;
}
.l1-doc-toc-cta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--l1-border);
}
.l1-doc-toc-cta h3 {
    font-size: 1rem;
    margin: 0 0 .4rem;
}
.l1-doc-toc-cta p {
    color: var(--l1-text-muted);
    font-size: .9rem;
    margin: 0 0 .85rem;
}
.l1-doc-toc-cta .l1-btn {
    width: 100%;
    padding: .6rem 1rem;
}

/* ---------- Status page ---------- */
.l1-status-embed {
    overflow: hidden;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
    box-shadow: var(--l1-shadow-soft);
}
.l1-status-embed iframe {
    display: block;
    width: 100%;
    min-height: 640px;
}
.l1-doc-cta h2 {
    margin-bottom: .45rem;
}
.l1-doc-cta p {
    max-width: 560px;
    margin-bottom: 1rem;
}


/* ---- 05-article.css ---- */
/* 05-article.css - Single article / blog post layout
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* ---------- Article (single post) ---------- */
.l1-article-hero {
    position: relative;
    padding: 8rem 0 2rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--l1-bg) 54%, #eef3f6 100%);
    overflow: hidden;
}
.l1-article-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(28, 39, 63, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 39, 63, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: .45;
    pointer-events: none;
    z-index: 0;
}
.l1-article-hero > .l1-container { position: relative; z-index: 1; }
.l1-article-eyebrow-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.l1-article-title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    max-width: 880px;
    margin: 0 0 1rem;
}
.l1-article-sub {
    font-size: 1.15rem;
    color: var(--l1-text-muted);
    max-width: 760px;
    margin: 0 0 1.5rem;
}
.l1-article-byline {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: var(--l1-text-muted);
    font-size: .95rem;
    margin-bottom: 0;
    flex-wrap: wrap;
}
.l1-article-byline .l1-blog-card-avatar {
    width: 38px;
    height: 38px;
    font-size: .85rem;
}
.l1-article-byline-author { color: var(--l1-text); font-weight: 600; }
.l1-article-byline-dot {
    width: 4px;
    height: 4px;
    background: var(--l1-text-dim);
    border-radius: 50%;
}

.l1-article-cover {
    margin: 2rem auto 0;
    max-width: 980px;
    border-radius: var(--l1-radius-lg);
    overflow: hidden;
    border: 1px solid var(--l1-border);
}
.l1-article-cover svg { display: block; width: 100%; height: auto; }

.l1-article-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 0 4rem;
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--l1-text);
}
.l1-article-body > p:first-of-type::first-letter {
    font-family: var(--l1-font-head);
    font-size: 3.2rem;
    font-weight: 700;
    float: left;
    margin: .15rem .55rem 0 0;
    line-height: 1;
    color: var(--l1-primary-dark);
}
.l1-article-body h2 {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 2.75rem 0 1rem;
    line-height: 1.25;
    color: var(--l1-text);
    scroll-margin-top: 5rem;
}
.l1-article-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 2rem 0 .75rem;
    color: var(--l1-text);
}
.l1-article-body p { margin: 0 0 1.25rem; }
.l1-article-body ul,
.l1-article-body ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}
.l1-article-body li { margin-bottom: .5rem; }
.l1-article-body a {
    color: var(--l1-primary-2);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.l1-article-body a:hover { color: var(--l1-primary-dark); }
.l1-article-body blockquote {
    border-left: 3px solid var(--l1-primary);
    padding: .25rem 0 .25rem 1.25rem;
    margin: 1.5rem 0;
    color: var(--l1-text-muted);
    font-style: italic;
}
.l1-article-body code {
    background: var(--l1-bg-2);
    padding: .15rem .4rem;
    border-radius: 4px;
    font-size: .92em;
    color: var(--l1-primary-dark);
}
.l1-article-body pre {
    background: var(--l1-bg-2);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius);
    padding: 1.15rem 1.35rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-size: .92rem;
    line-height: 1.55;
}
.l1-article-body pre code {
    background: transparent;
    padding: 0;
    color: var(--l1-text);
}
.l1-article-body strong { color: var(--l1-text); font-weight: 700; }
.l1-article-body hr {
    border: 0;
    height: 1px;
    background: var(--l1-border);
    margin: 2.5rem 0;
}
.l1-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius);
    overflow: hidden;
}
.l1-article-body th,
.l1-article-body td {
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--l1-border);
    font-size: .94rem;
}
.l1-article-body th {
    background: var(--l1-bg-2);
    font-family: var(--l1-font-head);
    font-weight: 700;
    color: var(--l1-text);
}
.l1-article-body tr:last-child td { border-bottom: 0; }

.l1-article-share {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--l1-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--l1-text-muted);
    font-size: .92rem;
}
.l1-article-share-links {
    display: flex;
    gap: .55rem;
}
.l1-article-share-links a {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    color: var(--l1-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}
.l1-article-share-links a:hover {
    color: #fff;
    background: var(--l1-primary);
    border-color: var(--l1-primary);
}

@media (max-width: 767.98px) {
    .l1-article-hero { padding: 6.5rem 0 1.5rem; }
    .l1-article-body {
        padding: 2rem 0 3rem;
        font-size: 1rem;
        line-height: 1.7;
    }
    .l1-article-body > p:first-of-type::first-letter {
        font-size: 2.6rem;
    }
    .l1-article-body h2 { font-size: 1.4rem; margin-top: 2rem; }
    .l1-article-body h3 { font-size: 1.1rem; margin-top: 1.5rem; }
    .l1-article-cover { margin-top: 1.5rem; border-radius: var(--l1-radius); }
    .l1-blog-card-title { font-size: 1.15rem; }
}


/* ---- 06-responsive-pages.css ---- */
/* 06-responsive-pages.css - Responsive rules, CMS builder, contact, looking glass
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* ---------- Responsive ---------- */

/* ===== Tablet and smaller (max 991.98px) ===== */
@media (max-width: 991.98px) {
    /* Navbar: solid background when collapsed sheet is open or on mobile */
    .l1-navbar,
    .l1-navbar.l1-navbar-scrolled {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-bottom-color: var(--l1-border);
        padding: .35rem 0;
    }
    .l1-brand img,
    .l1-navbar.l1-navbar-scrolled .l1-brand img,
    .l1-navbar.l1-navbar-dashboard .l1-brand img {
        height: 46px;
    }
    .l1-navbar .l1-nav-collapse {
        padding-top: .65rem;
        padding-bottom: .5rem;
    }
    .l1-navbar .l1-nav-link {
        padding: .6rem .25rem !important;
        font-size: .98rem;
        border-bottom: 1px solid var(--l1-border);
    }
    .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. */
    .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;
        padding: .25rem 0 .25rem .75rem;
        border: 0;
        border-left: 2px solid var(--l1-border);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .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 {
        padding: .65rem .75rem;
        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-nav-links {
        margin-left: 0;
        margin-right: 0;
        transform: none;
    }
    .l1-account-nav {
        margin-left: 0;
        padding-top: .75rem;
    }
    .l1-nav-profile {
        display: block;
        margin-right: 0;
    }
    .l1-profile-toggle {
        height: 44px;
        justify-content: center;
        width: 100%;
    }
    .l1-navbar .l1-nav-profile .l1-menu-panel.l1-profile-dropdown {
        width: 100%;
    }

    /* Hero */
    .l1-hero {
        padding: 5.15rem 0 2.75rem;
        min-height: auto;
    }
    .l1-hero-row { min-height: auto; }
    .l1-hero-scroll { display: none; }
    .l1-hero-sub { max-width: 100%; }

    /* Sections */
    .l1-section { padding: 3.25rem 0; }
    .l1-section-head { margin-bottom: 2rem; }
    .l1-cta-section { padding: 3.25rem 0; }
    .l1-page-hero { padding: 5.25rem 0 1.85rem; }

    /* Plans: keep featured plan in flow on tablet */
    .l1-plan-featured { transform: none; }
    .l1-plan-featured:hover { transform: translateY(-4px); }
    .l1-pricing-handoff {
        grid-template-columns: 1fr;
    }
    .l1-devops-grid {
        grid-template-columns: 1fr;
    }
    .l1-buying-confidence,
    .l1-blog-cta {
        grid-template-columns: 1fr;
    }
    .l1-doc-article-grid {
        grid-template-columns: 1fr;
    }
    .l1-doc-toc {
        position: static;
    }
    .l1-doc-toc {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem .9rem;
    }
    .l1-doc-toc h2,
    .l1-doc-toc .l1-doc-back,
    .l1-doc-toc .l1-doc-toc-cta {
        flex-basis: 100%;
    }
    .l1-doc-toc a {
        padding: .25rem 0;
    }
    .l1-blog-cta-actions {
        justify-content: flex-start;
    }
    .l1-faq-handoff {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Footer */
    .l1-footer { padding: 3rem 0 1.25rem; }
    .l1-footer-top { padding-bottom: 2rem; }
    .l1-footer-brand img { margin-bottom: .75rem; }
    .l1-footer-bottom {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 1rem;
    }
    .l1-footer-payments { justify-content: center; }
}

/* ===== Phones (max 767.98px) ===== */
@media (max-width: 767.98px) {
    html { overflow-x: hidden; }
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    .l1-navbar,
    .l1-navbar > .l1-container {
        max-width: 100%;
    }
    .l1-cta-glow { display: none; }
    .l1-article-body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .l1-toggler {
        padding: .35rem .55rem;
        font-size: .95rem;
        border-radius: 8px;
    }
    .l1-hero-title { font-size: clamp(1.85rem, 7vw, 2.45rem); }
    .l1-hero-sub { font-size: .98rem; }
    .l1-page-hero h1 { font-size: clamp(1.65rem, 6.4vw, 2.25rem); }
    .l1-page-hero p { font-size: .98rem; }
    .l1-section-title { font-size: clamp(1.45rem, 5vw, 1.95rem); }
    .l1-section-sub { font-size: .97rem; }

    .l1-feature { padding: 1.5rem; }
    .l1-feature-icon { width: 46px; height: 46px; font-size: 1.2rem; margin-bottom: 1rem; }
    .l1-feature h3 { font-size: 1.1rem; }

    .l1-plan { padding: 1.75rem 1.5rem; }
    .l1-plan-amount { font-size: 1.9rem; }
    .l1-plan-name { font-size: 1.15rem; }
    .l1-pricing-handoff {
        padding: 0;
        gap: 1.35rem;
    }
    .l1-pricing-actions {
        align-items: flex-start;
        flex-direction: column;
    }
    .l1-devops-tools {
        padding: 1.35rem;
    }
    .l1-faq-handoff {
        padding: 0;
    }
    .l1-confidence-card {
        padding: 1.1rem;
    }
    .l1-blog-cta {
        padding: 1.2rem;
    }
    .l1-blog-cta-actions .l1-btn {
        width: 100%;
    }
    .l1-doc-article-wrap {
        padding: 5.5rem 0 3rem;
    }
    .l1-doc-header h1 {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }
    .l1-doc-header p {
        font-size: 1rem;
    }
    .l1-doc-card {
        align-items: flex-start;
    }
    .l1-doc-card-arrow {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .l1-proof-panel { padding: 1.35rem; }
    .l1-proof-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .l1-location-field {
        min-width: 0;
    }
    .l1-proof-command {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .l1-stat-card { padding: 1.35rem 1rem; }
    .l1-stat-num { font-size: 1.9rem; }

    /* CTA card */
    .l1-cta-card { padding: 2.75rem 1.25rem; }
    .l1-cta-card h2 { font-size: clamp(1.6rem, 5.5vw, 2.1rem); }
    .l1-cta-card p { font-size: 1.02rem; }

    /* FAQ accordion */
    .l1-faq .l1-accordion-button {
        font-size: 1rem;
        padding: 1.1rem 0;
        line-height: 1.4;
    }
    .l1-accordion .l1-accordion-button {
        font-size: 1rem;
        padding: 1.1rem 1.15rem;
        line-height: 1.4;
    }
    .l1-faq .l1-accordion-body {
        padding-left: 0;
        padding-right: 0;
        font-size: .96rem;
    }
    .l1-accordion .l1-accordion-body {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
        font-size: .96rem;
    }

    /* Legal pages */
    .l1-legal-content h2 { font-size: 1.3rem; }
    .l1-legal-content h3 { font-size: 1.05rem; }
}

/* ===== Small phones (max 575.98px) ===== */
@media (max-width: 575.98px) {
    .l1-brand img,
    .l1-navbar.l1-navbar-scrolled .l1-brand img,
    .l1-navbar.l1-navbar-dashboard .l1-brand img {
        height: 42px;
    }
    .l1-hero { padding: 4.85rem 0 2.35rem; }
    .l1-hero-title { font-size: clamp(1.7rem, 8vw, 2.1rem); line-height: 1.1; }

    /* Hero stats: 3-col grid keeps numbers aligned */
    .l1-hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
        text-align: left;
    }
    .l1-hero-stats > div:not(.l1-hero-stats-divider) {
        flex-direction: column;
    }
    .l1-hero-stats strong { font-size: 1.2rem; }
    .l1-hero-stats span { font-size: .72rem; }
    .l1-hero-stats-divider { display: none; }

    /* Hero CTA: primary button takes full width; link stays inline below */
    .l1-hero-cta { gap: .75rem; }
    .l1-hero-cta .l1-btn { width: 100%; }
    .l1-hero-cta .l1-link-arrow {
        width: 100%;
        text-align: center;
        margin: 0 !important;
        padding: .25rem 0;
    }

    /* CTA section buttons stack full-width */
    .l1-cta-buttons { flex-direction: column; gap: .65rem; }
    .l1-cta-buttons .l1-btn { width: 100%; }
    .l1-cta-card { padding: 2.25rem 1rem; }

    /* Section padding tighter */
    .l1-section { padding: 2.75rem 0; }
    .l1-cta-section { padding: 2.75rem 0; }
    .l1-section-head { margin-bottom: 1.75rem; }
    .l1-page-hero { padding: 4.85rem 0 1.75rem; }

    /* Billing toggle: keep on one row but allow shrink */
    .l1-billing-toggle {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .l1-billing-toggle button {
        padding: .45rem .8rem;
        font-size: .82rem;
    }
    .l1-savings-badge { font-size: .65rem; }
    .l1-commitment-strip {
        border-radius: 18px;
        width: 100%;
    }
    .l1-commitment-strip > span,
    .l1-commitment-strip strong {
        justify-content: center;
        width: 100%;
    }

    /* Footer: 2-col link grid, brand block centered */
    .l1-footer-brand,
    .l1-footer-tagline { text-align: left; }
    .l1-footer-tagline { max-width: 100%; }
    .l1-footer-title { margin-bottom: .85rem; font-size: .95rem; }
    .l1-footer-list a { font-size: .9rem; }
    .l1-footer-payments {
        font-size: 1.35rem;
        gap: .7rem;
        flex-wrap: wrap;
    }
    .l1-footer-legal { font-size: .72rem; }

    /* Eyebrow tighter on tiny screens */
    .l1-eyebrow { font-size: .72rem; padding: .3rem .7rem; }

    /* Compare table scroll hint */
    .l1-compare-wrap {
        position: relative;
    }
    .l1-compare th,
    .l1-compare td { padding: .75rem .85rem; font-size: .88rem; }
    .l1-compare thead th { font-size: .9rem; padding: 1rem .85rem; }

    /* Legal meta chip wraps */
    .l1-legal-meta { font-size: .85rem; }
    .l1-legal-content table th,
    .l1-legal-content table td { padding: .6rem .75rem; font-size: .88rem; }

    /* Plan featured no longer needs huge transform shift */
    .l1-plan-featured { transform: none; }
}

/* ===== Tiny phones (max 379.98px): iPhone SE / Galaxy Fold etc. ===== */
@media (max-width: 379.98px) {
    .l1-hero-title { font-size: 1.75rem; }
    .l1-hero-stats strong { font-size: 1.05rem; }
    .l1-hero-stats span { font-size: .68rem; }
    .l1-plan-amount { font-size: 1.75rem; }
    .l1-footer-payments { font-size: 1.2rem; gap: .55rem; }
    .l1-plan { padding: 1.5rem 1.25rem; }
    .l1-feature { padding: 1.25rem; }
    .l1-container { padding-left: 1rem; padding-right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ===== Django page builder output ===== */
.l1-builder-page {
    background: var(--l1-bg);
}

.l1-public-rendered-page {
    background: var(--l1-bg);
}

.l1-public-rendered-page > :first-child {
    margin-top: 0;
}

.l1-public-rendered-page > :last-child {
    margin-bottom: 0;
}

.l1-builder-hero {
    align-items: center;
    display: grid;
    min-height: 520px;
    padding: 8.5rem 0 4.5rem;
    position: relative;
}

.l1-builder-hero h1 {
    color: var(--l1-text);
    font-family: var(--l1-heading-font);
    font-size: clamp(2.4rem, 5vw, 4.9rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: .96;
    margin: 1rem 0 0;
    max-width: 920px;
}

.l1-builder-hero p {
    color: var(--l1-muted);
    font-size: 1.12rem;
    line-height: 1.75;
    margin: 1.35rem 0 0;
    max-width: 700px;
}

.l1-builder-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.l1-builder-actions form {
    margin: 0;
}

.l1-alert {
    border: 1px solid rgba(217, 119, 6, .22);
    border-radius: 8px;
    display: grid;
    gap: .2rem;
    margin: 1rem 0;
    padding: .9rem 1rem;
}

.l1-alert-warning {
    background: rgba(245, 158, 11, .08);
    color: #7c2d12;
}

.l1-alert-success {
    background: rgba(22, 163, 74, .08);
    border-color: rgba(22, 163, 74, .24);
    color: #14532d;
}

.l1-alert strong,
.l1-alert span {
    display: block;
}

.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;
}

.l1-builder-section h2,
.l1-builder-cta h2,
.l1-builder-article h1,
.l1-builder-article h2 {
    color: var(--l1-text);
    font-family: var(--l1-heading-font);
    font-weight: 800;
    letter-spacing: 0;
}

.l1-builder-section h2,
.l1-builder-cta h2 {
    font-size: clamp(2rem, 3vw, 3.2rem);
    margin-bottom: 1rem;
}

.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;
}

.l1-builder-grid-section {
    padding-top: 1rem;
}

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

.l1-builder-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    padding: 1.4rem;
}

.l1-builder-card h3 {
    color: var(--l1-text);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: .65rem;
}

.l1-builder-cta {
    padding: 2rem 0 5rem;
}

.l1-builder-article {
    padding: 8rem 0 5rem;
}

.l1-builder-article .l1-container {
    max-width: 880px;
}

.l1-builder-article h1 {
    font-size: clamp(2.25rem, 4vw, 4rem);
    line-height: 1;
    margin-bottom: 1.4rem;
}

.l1-builder-lead p {
    color: var(--l1-text-soft);
    font-size: 1.18rem;
}

.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 {
    background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(20, 184, 166, .08));
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 8px;
    margin-top: 2.2rem;
    padding: 1.5rem;
}

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

    .l1-builder-hero {
        min-height: auto;
        padding: 7rem 0 3rem;
    }
}

/* ===== Public contact page ===== */
.l1-contact-page {
    background:
        linear-gradient(180deg, #ffffff 0%, var(--l1-bg) 46%, #eef3f6 100%);
    min-height: 100vh;
}

.l1-contact-hero {
    padding: 9rem 0 5rem;
    position: relative;
}

.l1-contact-hero::before {
    background-image:
        linear-gradient(rgba(28, 39, 63, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 39, 63, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    content: "";
    inset: 0;
    opacity: .65;
    pointer-events: none;
    position: absolute;
}

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

.l1-contact-hero h1 {
    color: var(--l1-text);
    font-family: var(--l1-heading-font);
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: .98;
    margin: 1rem 0 1.1rem;
}

.l1-contact-hero p {
    color: var(--l1-text-muted);
    font-size: 1.08rem;
    line-height: 1.75;
    max-width: 620px;
}

.l1-contact-meta {
    display: grid;
    gap: .8rem;
    margin-top: 2rem;
    max-width: 520px;
}

.l1-contact-meta > div {
    align-items: center;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    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 {
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    box-shadow: var(--l1-shadow-soft);
    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 span {
    color: var(--l1-primary-dark);
    display: block;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.l1-contact-card-head h2 {
    font-size: 1.35rem;
    margin: 0;
}

.l1-contact-card-head p {
    color: var(--l1-text-muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: .45rem 0 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 {
    background: #ffffff;
    border: 1px solid var(--l1-border-strong);
    border-radius: 8px;
    color: var(--l1-text);
    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 {
    border-color: var(--l1-primary);
    box-shadow: 0 0 0 4px var(--l1-primary-soft);
    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-success h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 767.98px) {
    .l1-contact-hero {
        padding: 7rem 0 3rem;
    }

    .l1-contact-meta > div {
        align-items: flex-start;
        flex-direction: column;
        gap: .2rem;
    }

    .l1-contact-card,
    .l1-contact-success {
        border-radius: 8px;
        padding: 1.1rem;
    }
}

/* ===== Looking glass ===== */
.l1-looking-glass-grid {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}

.l1-lg-panel,
.l1-lg-output,
.l1-lg-alert {
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    box-shadow: var(--l1-shadow-soft);
}

.l1-lg-panel {
    padding: 1.5rem;
}

.l1-lg-panel-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    margin-bottom: 1.3rem;
}

.l1-lg-panel-head h2,
.l1-lg-test h2,
.l1-lg-output h2 {
    font-family: var(--l1-heading-font);
    font-weight: 800;
    letter-spacing: 0;
    margin: 0;
}

.l1-lg-panel-head p,
.l1-lg-test p,
.l1-lg-help,
.l1-lg-output p {
    color: var(--l1-text-muted);
    margin: .25rem 0 0;
}

.l1-lg-form label {
    color: var(--l1-text);
    display: block;
    font-size: .86rem;
    font-weight: 700;
    margin-bottom: .45rem;
}

.l1-lg-input-row {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.l1-lg-select-row {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: .25rem;
}

.l1-lg-input-row input,
.l1-lg-select-row select {
    background: #fff;
    border: 1px solid var(--l1-border-strong);
    border-radius: 999px;
    color: var(--l1-text);
    min-height: 50px;
    padding: .75rem 1rem;
    width: 100%;
}

.l1-lg-select-row select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--l1-text-muted) 50%),
        linear-gradient(135deg, var(--l1-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50%;
    background-repeat: no-repeat;
    background-size: 6px 6px;
    padding-right: 2.7rem;
}

.l1-lg-input-row input:focus,
.l1-lg-select-row select:focus {
    border-color: var(--l1-primary);
    box-shadow: 0 0 0 4px var(--l1-primary-soft);
    outline: none;
}

.l1-lg-group-pill {
    align-items: center;
    background: var(--l1-primary-soft);
    border: 1px solid rgba(120, 131, 146, .22);
    border-radius: 999px;
    color: var(--l1-primary-dark);
    display: inline-flex;
    font-size: .86rem;
    font-weight: 800;
    min-height: 42px;
    padding: .55rem .9rem;
    white-space: nowrap;
}

.l1-lg-help {
    font-size: .9rem;
}

.l1-lg-form .errorlist {
    color: #b42318;
    font-size: .84rem;
    list-style: none;
    margin: .55rem 0 0;
    padding: 0;
}

.l1-lg-test {
    display: flex;
    flex-direction: column;
}

.l1-doc-card-kicker {
    color: var(--l1-primary-dark);
    display: inline-block;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.l1-lg-kicker-spaced {
    margin-top: 1.25rem;
}

.l1-lg-meta {
    display: grid;
    gap: .6rem;
    margin-top: auto;
    padding-top: 1.2rem;
}

.l1-lg-meta span {
    align-items: center;
    color: var(--l1-text-muted);
    display: inline-flex;
    gap: .55rem;
}

.l1-lg-alert {
    align-items: center;
    color: #b42318;
    display: flex;
    gap: .75rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
}

.l1-lg-output {
    margin-top: 1rem;
    overflow: hidden;
}

.l1-lg-output-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--l1-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.25rem 1.35rem;
}

.l1-lg-status {
    border: 1px solid var(--l1-border);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    padding: .4rem .7rem;
    white-space: nowrap;
}

.l1-lg-status-ok {
    background: var(--l1-accent-soft);
    color: #0f7a52;
}

.l1-lg-status-warn {
    background: #fff7ed;
    color: #b45309;
}

.l1-lg-output pre {
    background: #0f172a;
    color: #f2f3f5;
    font-size: .92rem;
    line-height: 1.65;
    margin: 0;
    max-height: 460px;
    overflow: auto;
    padding: 1.25rem 1.35rem;
    white-space: pre-wrap;
}

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

@media (max-width: 575.98px) {
    .l1-lg-input-row,
    .l1-lg-select-row,
    .l1-lg-output-head {
        grid-template-columns: 1fr;
    }

    .l1-lg-input-row {
        display: grid;
    }

    .l1-lg-input-row .l1-btn {
        width: 100%;
    }

    .l1-lg-output-head {
        display: grid;
    }
}


/* ---- 07-refinement.css ---- */
/* 07-refinement.css - Public design refinement pass
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* ===== Public design refinement pass =====
 * Brand / surface / radius tokens live in static/css/tokens.css (loaded first).
 * This file only styles marketing chrome — do not re-declare :root tokens here. */

body {
    background: var(--l1-bg);
}

.l1-navbar {
    background: rgba(244, 247, 251, 0.94);
}

.l1-navbar.l1-navbar-scrolled,
.l1-navbar.l1-navbar-dashboard {
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.l1-navbar .l1-nav-link {
    font-size: .94rem;
    font-weight: 680;
}

.l1-dropdown {
    border-radius: 8px;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.13);
    min-width: 14rem;
    padding: .45rem;
}

.l1-dropdown .l1-menu-link {
    align-items: center;
    display: flex;
    gap: .65rem;
    min-height: 38px;
}

.l1-dropdown .l1-menu-link i {
    color: var(--l1-text-dim);
    text-align: center;
    width: 1rem;
}

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

.l1-dropdown .l1-menu-divider {
    border-color: var(--l1-border);
    margin: .35rem .25rem;
}

.l1-btn-primary,
.l1-btn-ghost {
    border-radius: 8px;
    min-height: 40px;
    padding: .65rem 1.1rem;
}

.l1-btn-primary {
    box-shadow: 0 2px 6px var(--l1-primary-glow);
}

.l1-btn-primary:hover {
    box-shadow: 0 6px 14px var(--l1-primary-glow);
}

.l1-btn-ghost {
    background: #ffffff;
}

.l1-hero,
.l1-page-hero,
.l1-builder-hero,
.l1-contact-page {
    background: var(--l1-bg);
}

.l1-hero {
    background:
        radial-gradient(circle at 16% 18%, rgba(207, 211, 216, .2), transparent 34%),
        linear-gradient(135deg, rgba(165, 172, 182, .18), rgba(90, 99, 112, .12) 46%, rgba(255, 255, 255, .035) 100%),
        linear-gradient(180deg, #2a2e34 0%, #353b43 58%, #3f454e 100%);
    border-bottom: 0;
    color: #ffffff;
    min-height: 0;
    padding: 8rem 0 5rem;
}

.l1-hero::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    opacity: .62;
}

.l1-page-hero::before,
.l1-contact-hero::before {
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
    opacity: .45;
}

.l1-cta-glow {
    display: none !important;
}

.l1-hero-row {
    display: block;
    min-height: 0;
}

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

.l1-hero .col-lg-6:has(.l1-pulsar),
.l1-hero .col-lg-6:has(.l1-home-console) {
    display: none !important;
}

.l1-hero .l1-pulsar,
.l1-hero .l1-home-console {
    display: none !important;
}

.l1-hero-content {
    max-width: 920px;
}

.l1-eyebrow {
    background: rgba(120, 131, 146, 0.08);
    border-color: rgba(120, 131, 146, 0.18);
    border-radius: 7px;
    color: var(--l1-primary-dark);
    letter-spacing: 0;
}

.l1-eyebrow-dot {
    background: var(--l1-accent);
    box-shadow: none;
    animation: none;
}

.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-hero-title {
    color: #ffffff;
    font-size: clamp(2.45rem, 5vw, 4.45rem);
    line-height: 1.02;
    max-width: 920px;
}

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

.l1-hero-sub {
    color: rgba(255, 255, 255, .78);
    max-width: 820px;
}

.l1-hero-stats {
    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;
}

.l1-hero-stats strong {
    color: #ffffff;
    font-size: 1.45rem;
}

.l1-hero-stats span,
.l1-hero .l1-link-arrow {
    color: rgba(255, 255, 255, .72);
}

.l1-hero .l1-link-arrow:hover {
    color: #ffffff;
}

.l1-hero-stats-divider {
    background: rgba(255, 255, 255, .2);
}

.l1-home-console {
    display: none !important;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--l1-border);
    border-radius: 8px;
    box-shadow: var(--l1-shadow-soft);
    padding: 1rem;
}

.l1-home-console-top,
.l1-home-console-status {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.l1-home-console-top {
    border-bottom: 1px solid var(--l1-border);
    padding-bottom: .9rem;
}

.l1-home-console-top span,
.l1-home-console-grid span {
    color: var(--l1-text-dim);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.l1-home-console-top strong,
.l1-home-console-grid strong {
    color: var(--l1-text);
    display: block;
}

.l1-home-console-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: .95rem 0;
}

.l1-home-console-grid > div {
    background: var(--l1-surface-2);
    border: 1px solid var(--l1-border);
    border-radius: 7px;
    padding: .9rem;
}

.l1-home-console-status {
    border-top: 1px solid var(--l1-border);
    color: var(--l1-text-muted);
    font-size: .9rem;
    padding-top: .9rem;
}

.l1-home-console-status i {
    color: var(--l1-accent);
    font-size: .55rem;
}

.l1-home-console-status a {
    font-weight: 800;
}

.l1-section {
    background: var(--l1-bg);
    padding: 4.5rem 0;
}

.l1-section-alt {
    background: var(--l1-bg);
}

.l1-section-head {
    margin-bottom: 2.35rem;
}

.l1-section-title {
    font-size: clamp(1.8rem, 3vw, 2.55rem);
}

.l1-page-hero {
    padding: 7rem 0 3rem;
}

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

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

.l1-feature,
.l1-feature-guide,
.l1-command-panel,
.l1-ops-card,
.l1-plan-fit-card,
.l1-workload-row,
.l1-confidence-card,
.l1-location,
.l1-tool-card,
.l1-stat-card,
.l1-blog-card,
.l1-contact-card,
.l1-contact-success,
.l1-lg-panel,
.l1-lg-output,
.l1-lg-alert {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.l1-feature:hover,
.l1-blog-card:hover {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.l1-feature-icon,
.l1-feature-row-icon,
.l1-confidence-icon,
.l1-workload-icon,
.l1-proof-icon {
    background: #f6f7f8;
    border: 1px solid rgba(120, 131, 146, 0.16);
    border-radius: 8px;
    color: var(--l1-primary);
}

.l1-feature-row {
    background: rgba(255, 255, 255, .74);
    border: 1px solid var(--l1-border);
    border-radius: 8px;
    padding: 1.05rem;
}

.l1-plan {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 1.65rem 1.45rem;
}

.l1-plan:hover {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.l1-plan-featured {
    background:
        linear-gradient(180deg, rgba(120, 131, 146, 0.06), rgba(120, 131, 146, 0)),
        var(--l1-surface);
    box-shadow: 0 18px 38px rgba(120, 131, 146, .14);
}

.l1-plan-badge {
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(120, 131, 146, .24);
    letter-spacing: 0;
}

.l1-plan-name {
    font-size: 1.18rem;
}

.l1-plan-tagline,
.l1-plan-billed {
    color: var(--l1-text-muted);
}

.l1-plan-amount {
    font-size: clamp(1.45rem, 2.25vw, 1.95rem);
}

.l1-plan-specs li {
    align-items: flex-start;
    color: var(--l1-text-muted);
}

.l1-billing-toggle {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.l1-buying-confidence {
    align-items: stretch;
}

.l1-cta-card {
    background: var(--l1-surface);
    border-color: var(--l1-border);
    border-radius: 8px;
    box-shadow: var(--l1-shadow-soft);
}

.l1-footer {
    background: #111827;
    border-top: 0;
    color: #a7b0c0;
}

.l1-footer-title,
.l1-footer-bottom,
.l1-footer-bottom a {
    color: #d5dbe7;
}

.l1-footer-tagline,
.l1-footer-list a,
.l1-footer-legal {
    color: #a7b0c0;
}

.l1-footer-list a:hover,
.l1-footer-bottom a:hover {
    color: #ffffff;
}

.l1-footer-top,
.l1-footer-bottom {
    border-color: rgba(255, 255, 255, .12);
}

.l1-social a {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    color: #d5dbe7;
}

.l1-builder-hero {
    border-bottom: 1px solid var(--l1-border);
    min-height: 460px;
    padding: 7.5rem 0 3.5rem;
}

.l1-builder-hero h1 {
    font-size: clamp(2.15rem, 4.8vw, 4.25rem);
    line-height: 1.03;
}

.l1-builder-grid {
    gap: 1rem;
}

.l1-builder-card {
    border-color: var(--l1-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 1.35rem;
}

.l1-checkout-hero .l1-container {
    max-width: 980px;
}

.l1-checkout-steps {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.5rem;
}

.l1-checkout-steps span {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: rgba(255, 255, 255, .72);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 800;
    min-height: 34px;
    padding: .45rem .8rem;
}

.l1-checkout-steps span.is-active {
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
}

.l1-checkout-section {
    padding-top: 3rem;
}

.l1-checkout-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
}

.l1-checkout-layout-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.l1-checkout-admin-card {
    grid-column: 1 / -1;
}

.l1-checkout-card {
    background:
        linear-gradient(180deg, rgba(120, 131, 146, .035), rgba(120, 131, 146, 0) 40%),
        #ffffff;
}

.l1-checkout-summary {
    position: sticky;
    top: 5.5rem;
}

.l1-checkout-card-head {
    border-bottom: 1px solid var(--l1-border);
    margin: -.1rem 0 1rem;
    padding-bottom: 1rem;
}

.l1-checkout-card-head span {
    color: var(--l1-primary-dark);
    display: block;
    font-size: .74rem;
    font-weight: 850;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.l1-checkout-card-head h2,
.l1-checkout-card-head h3 {
    font-family: var(--l1-heading-font);
    font-size: 1.25rem;
    font-weight: 850;
    letter-spacing: 0;
    margin: 0;
}

.l1-checkout-card-head p {
    color: var(--l1-text-muted);
    font-size: .94rem;
    line-height: 1.55;
    margin: .45rem 0 0;
}

.l1-checkout-subhead {
    border-bottom: 0;
    margin: 1.2rem 0 .65rem;
    padding-bottom: 0;
}

.l1-checkout-spec-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.l1-checkout-spec-grid div {
    background: #fbfbfc;
    border: 1px solid rgba(120, 131, 146, .13);
    border-radius: 8px;
    padding: .85rem;
}

.l1-checkout-spec-grid strong,
.l1-checkout-spec-grid span {
    display: block;
}

.l1-checkout-spec-grid strong {
    color: var(--l1-text);
    font-size: 1.1rem;
    font-weight: 850;
}

.l1-checkout-spec-grid span {
    color: var(--l1-text-muted);
    font-size: .8rem;
    margin-top: .2rem;
}

.l1-checkout-choice-list {
    margin-top: 0;
}

.l1-checkout-choice {
    background: #ffffff;
}

.l1-checkout-choice:hover,
.l1-checkout-choice.is-selected {
    background: #fbfbfc;
}

.l1-checkout-choice.is-selected {
    box-shadow: inset 3px 0 0 var(--l1-primary);
}

.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%;
}

.l1-builder-callout {
    background: #f6f7f8;
    border-color: rgba(120, 131, 146, .18);
    border-radius: 8px;
}

.l1-public-rendered-page > h1,
.l1-public-rendered-page > header:not([class]) {
    background: var(--l1-bg);
    border-bottom: 1px solid var(--l1-border);
    padding: 7rem max(1.25rem, calc((100vw - 1140px) / 2)) 3rem;
}

.l1-public-rendered-page > h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    margin: 0;
}

.l1-blog-card {
    background: #ffffff;
}

.l1-blog-card-icon::after {
    background: linear-gradient(180deg, transparent 35%, rgba(17, 24, 39, .12));
    content: "";
    inset: 0;
    position: absolute;
}

.l1-blog-card-meta {
    letter-spacing: 0;
}

.l1-contact-page {
    background: var(--l1-bg);
}

.l1-contact-hero {
    padding: 8rem 0 5rem;
}

.l1-contact-meta > div,
.l1-contact-card,
.l1-contact-success {
    background: rgba(255, 255, 255, .9);
}

.l1-contact-card input,
.l1-contact-card textarea,
.l1-lg-input-row input,
.l1-lg-select-row select {
    border-radius: 8px;
}

.l1-lg-panel,
.l1-lg-output,
.l1-lg-alert {
    background: #ffffff;
}

.l1-lg-test {
    background:
        linear-gradient(180deg, rgba(120, 131, 146, .06), rgba(120, 131, 146, 0)),
        #ffffff;
}

.l1-lg-output pre {
    background: #0b1220;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Compact purple hero treatment for public sub-pages. */
.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,
.l1-contact-hero,
.l1-article-hero {
    padding: 6.65rem 0 2.85rem;
}

.l1-builder-hero {
    min-height: 360px;
    padding: 6.85rem 0 3.15rem;
}

.l1-public-rendered-page > h1,
.l1-public-rendered-page > header:not([class]) {
    padding: 6.65rem max(1.25rem, calc((100vw - 1140px) / 2)) 2.85rem;
}

.l1-page-hero::before,
.l1-builder-hero::before,
.l1-contact-hero::before,
.l1-article-hero::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 44px 44px;
    content: "";
    inset: 0;
    opacity: .55;
    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;
}

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

.l1-page-hero p,
.l1-builder-hero p,
.l1-contact-hero p,
.l1-article-sub,
.l1-article-byline,
.l1-public-rendered-page > header:not([class]) p {
    color: rgba(255, 255, 255, .76);
}

.l1-article-hero .l1-article-byline-author {
    color: #ffffff;
}

.l1-article-hero .l1-article-byline-dot {
    background: rgba(255, 255, 255, .42);
}

.l1-page-hero .l1-eyebrow,
.l1-builder-hero .l1-eyebrow,
.l1-contact-hero .l1-eyebrow,
.l1-article-hero .l1-eyebrow {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .86);
}

/* 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 {
    animation: none;
    filter: none;
    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 {
    background: url("/static/website/img/world-map-outline.04b03780e8d0.svg") center 48% / min(1180px, 118vw) auto no-repeat;
    content: "";
    filter: invert(1) grayscale(1);
    inset: 0;
    opacity: .08;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

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

.l1-builder-hero.l1-checkout-hero {
    min-height: 380px;
}

.l1-builder-hero.l1-checkout-hero h1 {
    max-width: 760px;
}

.l1-builder-hero.l1-checkout-hero p {
    max-width: 760px;
}

.l1-builder-section {
    background:
        radial-gradient(circle at 8% 0%, rgba(165, 172, 182, .055), transparent 28%),
        linear-gradient(180deg, #fcfcfd 0%, #f8f9fa 100%);
}

.l1-checkout-section {
    margin-top: -1.75rem;
    padding-top: 0;
    position: relative;
    z-index: 2;
}

.l1-checkout-card,
.l1-builder-section .l1-builder-card {
    background:
        linear-gradient(180deg, rgba(165, 172, 182, .035), rgba(165, 172, 182, 0) 42%),
        rgba(255, 255, 255, .98);
    border: 1px solid rgba(80, 88, 100, .13);
    box-shadow: 0 18px 48px rgba(44, 48, 54, .08);
}

.l1-checkout-summary {
    box-shadow: 0 22px 58px rgba(44, 48, 54, .11);
}

.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 {
    color: var(--l1-text);
    font-family: var(--l1-heading-font);
    font-size: 1.15rem;
    font-weight: 850;
    margin: 0;
}

.panel-heading p {
    color: var(--l1-text-muted);
    font-size: .94rem;
    margin: .25rem 0 0;
}

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

.table-row,
.empty-state {
    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,
.empty-state:first-child {
    border-top: 0;
}

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

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

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

.table-row span,
.empty-state 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;
}

.empty-state {
    align-items: flex-start;
    display: grid;
    justify-content: stretch;
    min-height: 96px;
}

/* 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;
}

.status-pill {
    background: rgba(15, 122, 74, .1);
    border: 1px solid rgba(15, 122, 74, .24);
    color: #0f7a4a;
}

.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;
}

.status-dot {
    background: currentColor;
    border-radius: 999px;
    display: inline-block;
    height: .45rem;
    width: .45rem;
}

.l1-checkout-spec-grid div {
    background: rgba(251, 251, 252, .94);
    border-color: rgba(120, 131, 146, .18);
}

.l1-checkout-choice {
    border-left: 3px solid transparent;
}

.l1-checkout-choice.is-selected {
    border-left-color: var(--l1-primary);
    box-shadow: none;
}

.l1-checkout-card .l1-builder-actions {
    margin-top: 1.25rem;
}

.l1-app-page-head,
.l1-checkout-simple-head {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 0 1rem;
}

.l1-app-page-head h1,
.l1-checkout-simple-head h1 {
    color: var(--l1-text);
    font-family: var(--l1-heading-font);
    font-size: clamp(1.85rem, 3vw, 2.65rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.05;
    margin: .65rem 0 .45rem;
}

.l1-app-page-head p,
.l1-checkout-simple-head p {
    color: var(--l1-muted);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    max-width: 720px;
}

.l1-checkout-simple-section {
    margin-top: 0;
    padding-top: 1.25rem;
}

.l1-checkout-layout-simple {
    align-items: start;
}

.l1-checkout-mini-steps {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.l1-checkout-mini-steps span {
    background: #ffffff;
    border: 1px solid var(--l1-border);
    border-radius: 999px;
    color: var(--l1-muted);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    padding: .55rem .75rem;
}

.l1-checkout-mini-steps span.is-active {
    background: rgba(101, 111, 125, .09);
    border-color: rgba(101, 111, 125, .2);
    color: var(--l1-primary-dark);
}

.l1-client-billing-page .l1-builder-section {
    padding-bottom: 1.25rem;
    padding-top: 1rem;
}

.l1-client-billing-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.l1-payment-method-environment {
    align-items: center;
    background: #fff;
    border: 1px solid #d9deea;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(24, 28, 45, .045);
    display: inline-flex;
    gap: .75rem;
    padding: .75rem;
}

.l1-payment-method-environment label {
    color: #334155;
    font-size: .82rem;
    font-weight: 850;
    margin: 0;
}

.l1-payment-method-environment select {
    appearance: none;
    background: #f8fafc;
    border: 1px solid #cfd6e4;
    border-radius: 8px;
    color: #111827;
    min-height: 40px;
    min-width: 150px;
    padding: .55rem .85rem;
}

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

.l1-payment-method-option {
    display: flex;
    flex-direction: column;
    min-height: 250px;
}

.l1-payment-method-option form {
    margin-top: auto;
}

.l1-payment-method-detail {
    color: #64748b;
    font-size: .9rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}

.l1-stripe-method-card {
    max-width: 760px;
}

.l1-stripe-method-form {
    display: grid;
    gap: 1rem;
}

.l1-stripe-card-element {
    background: #f8fafc;
    border: 1px solid #cfd6e4;
    border-radius: 10px;
    padding: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.l1-stripe-card-element.StripeElement--focus {
    background: #fff;
    border-color: rgba(125, 136, 151, .55);
    box-shadow: 0 0 0 4px rgba(125, 136, 151, .12);
}

.l1-stripe-card-element.StripeElement--invalid {
    border-color: rgba(185, 28, 28, .55);
}

.l1-stripe-error[hidden] {
    display: none;
}

.l1-service-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.l1-service-meta {
    align-items: flex-end;
    display: grid;
    gap: .15rem;
    justify-items: end;
}

.l1-service-meta span {
    color: var(--l1-text-muted);
    font-size: .78rem;
    font-weight: 700;
    margin: 0;
}

.l1-inline-actions {
    border-top: 1px solid rgba(80, 88, 100, .1);
    display: flex;
    justify-content: flex-end;
    padding: .75rem 1rem;
}

.l1-checkout-rate-strip {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.l1-checkout-rate-strip div {
    background: rgba(251, 251, 252, .94);
    border: 1px solid rgba(120, 131, 146, .18);
    border-radius: 8px;
    padding: .9rem;
}

.l1-checkout-rate-strip span,
.l1-checkout-rate-strip strong {
    display: block;
}

.l1-checkout-rate-strip span {
    color: var(--l1-text-muted);
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.l1-checkout-rate-strip strong {
    color: var(--l1-text);
    font-family: var(--l1-heading-font);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0;
    margin-top: .25rem;
}

.l1-checkout-template-select {
    display: grid;
    gap: .4rem;
    margin-bottom: 1rem;
}

.l1-checkout-template-select > span {
    color: var(--l1-text-muted);
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.l1-checkout-template-select select {
    appearance: none;
    background: #ffffff;
    border: 1px solid rgba(120, 131, 146, .22);
    border-radius: 8px;
    color: var(--l1-text);
    font: inherit;
    font-weight: 750;
    min-height: 44px;
    padding: .7rem .85rem;
}

.l1-checkout-template-select select:focus {
    border-color: var(--l1-primary);
    box-shadow: 0 0 0 3px rgba(120, 131, 146, .12);
    outline: 0;
}

.l1-checkout-template-warning {
    margin-bottom: 1rem;
}

.l1-checkout-admin-card {
    grid-column: 1 / -1;
    position: relative;
    z-index: 0;
}

.l1-catalog-cadences a {
    background: rgba(251, 251, 252, .72);
    border: 1px solid rgba(80, 88, 100, .1);
    border-radius: 8px;
    display: grid;
    gap: .15rem;
    padding: .55rem .65rem;
}

.l1-catalog-cadences a strong,
.l1-catalog-cadences a small {
    display: block;
}

.l1-catalog-cadences a small {
    color: var(--l1-text-muted);
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.35;
}

.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;
}

.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-checkout-section,
.public-sidebar-shell .l1-checkout-section {
    margin-top: 0;
}

.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;
}

.dashboard-shell .l1-builder-card,
.public-sidebar-shell .l1-builder-card {
    box-shadow: 0 10px 32px rgba(44, 48, 54, .07);
}

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

@media (max-width: 991.98px) {
    .l1-client-billing-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    }

    .l1-service-row {
        grid-template-columns: 1fr;
    }

    .l1-service-meta {
        align-items: start;
        justify-items: start;
    }

    .l1-checkout-rate-strip {
        grid-template-columns: 1fr;
    }

    .l1-payment-method-grid {
        grid-template-columns: 1fr;
    }

    .l1-payment-method-environment {
        align-items: stretch;
        display: grid;
        width: 100%;
    }

    .l1-checkout-layout,
    .l1-checkout-layout-wide {
        grid-template-columns: 1fr;
    }

    .l1-checkout-summary {
        position: static;
    }

    .l1-hero,
    .l1-page-hero,
    .l1-builder-hero {
        padding-top: 6.25rem;
    }

    .l1-hero-stats {
        display: flex;
        width: 100%;
    }

    .l1-home-console-grid,
    .l1-buying-confidence {
        grid-template-columns: 1fr;
    }

    .l1-credit-model-grid,
    .dashboard-shell .l1-builder-grid,
    .public-sidebar-shell .l1-builder-grid {
        grid-template-columns: 1fr;
    }

    .l1-app-page-head,
    .l1-checkout-simple-head {
        align-items: stretch;
        flex-direction: column;
    }

    .l1-checkout-mini-steps {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .l1-checkout-spec-grid,
    .l1-checkout-payment-card .l1-builder-actions {
        grid-template-columns: 1fr;
    }

    .l1-checkout-steps span {
        flex: 1 1 calc(50% - .55rem);
        justify-content: center;
    }

    .l1-hero,
    .l1-page-hero,
    .l1-builder-hero {
        padding-bottom: 2.5rem;
    }

    .l1-hero-stats {
        align-items: stretch;
        display: grid;
        gap: .75rem;
    }

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

    .l1-home-console-top,
    .l1-home-console-status {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* ---- 09-polish.css ---- */
/* 09-polish.css - Shared polish and commitment strip
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* ============================================================
   Public site shared polish and components
   ============================================================ */

html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(163, 171, 182, .22);
}

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;
}

/* Billing steps strip */
.l1-steps {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.l1-step {
    background: #ffffff;
    border: 1px solid var(--l1-border);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(44, 48, 54, .06);
    padding: 1.5rem;
    position: relative;
    transition: box-shadow .18s ease, transform .18s ease;
}

.l1-step:hover {
    box-shadow: 0 18px 44px rgba(44, 48, 54, .1);
    transform: translateY(-3px);
}

.l1-step-number {
    align-items: center;
    background: var(--l1-primary-soft);
    border-radius: 10px;
    color: var(--l1-primary-dark);
    display: inline-flex;
    font-family: var(--l1-heading-font);
    font-size: 1.1rem;
    font-weight: 900;
    height: 40px;
    justify-content: center;
    margin-bottom: .9rem;
    width: 40px;
}

.l1-step h3 {
    font-size: 1.1rem;
    font-weight: 850;
    margin-bottom: .4rem;
}

.l1-step p {
    color: var(--l1-muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
}

/* Closing call-to-action band */
.l1-cta-band {
    align-items: center;
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(163, 171, 182, .3), rgba(79, 87, 99, 0) 55%),
        linear-gradient(135deg, #363c44 0%, #4f5763 55%, #626c7b 100%);
    border-radius: 18px;
    box-shadow: 0 22px 54px rgba(44, 48, 54, .22);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    padding: 2.25rem 2.5rem;
}

.l1-cta-band h2 {
    color: #ffffff;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    margin-bottom: .35rem;
}

.l1-cta-band p {
    color: rgba(242, 243, 244, .82);
    margin: 0;
}

.l1-cta-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.l1-cta-band .l1-btn-ghost {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .35);
    color: #ffffff;
}

.l1-cta-band .l1-btn-ghost:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .6);
    color: #ffffff;
}

/* Rendered article / CMS prose typography */
.l1-public-rendered-article .l1-container,
.l1-public-rendered-page .l1-container {
    max-width: 1100px;
}

.l1-public-rendered-article p,
.l1-public-rendered-article li {
    font-size: 1.02rem;
    line-height: 1.75;
    max-width: 72ch;
}

.l1-public-rendered-article h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    margin-top: 2.2rem;
}

.l1-public-rendered-article h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    margin-top: 1.6rem;
}

.l1-public-rendered-article code {
    background: rgba(120, 131, 146, .08);
    border-radius: 6px;
    color: var(--l1-primary-dark);
    font-size: .92em;
    padding: .12em .4em;
}

.l1-public-rendered-article pre {
    background: #24282e;
    border-radius: 12px;
    color: #f2f3f4;
    overflow-x: auto;
    padding: 1.1rem 1.25rem;
}

.l1-public-rendered-article pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.l1-public-rendered-article img {
    border-radius: 12px;
    height: auto;
    max-width: 100%;
}

.l1-public-rendered-article blockquote {
    border-left: 3px solid var(--l1-primary);
    color: var(--l1-muted);
    margin: 1.4rem 0;
    padding: .25rem 0 .25rem 1.1rem;
}

/* Footer link polish */
.l1-footer a {
    transition: color .15s ease;
}

@media (max-width: 767.98px) {
    .l1-cta-band {
        padding: 1.6rem 1.5rem;
    }
}

/* Blog card gradient covers (replaces the repeated banner image) */
.l1-blog-card-cover {
    align-items: center;
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(163, 171, 182, .35), rgba(79, 87, 99, 0) 55%),
        linear-gradient(135deg, #363c44 0%, #4f5763 60%, #626c7b 100%);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    justify-content: center;
    min-height: 150px;
}

.l1-blog-cover-mark {
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 12px;
    color: #ffffff;
    display: inline-flex;
    font-family: var(--l1-heading-font);
    font-size: 1.5rem;
    font-weight: 900;
    height: 52px;
    justify-content: center;
    text-transform: uppercase;
    width: 52px;
}

.l1-blog-cover-label {
    color: rgba(242, 243, 244, .85);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* 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 p {
    color: var(--l1-text-muted);
}

.l1-contact-hero .l1-contact-card label {
    color: var(--l1-text);
}

/* Stronger default eyebrow contrast on light heroes */
.l1-eyebrow {
    background: rgba(120, 131, 146, .12);
    border-color: rgba(120, 131, 146, .3);
}

/* Commitment strip buttons (static pricing page) */
.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 {
    color: inherit;
    display: none;
    font-weight: 600;
    opacity: .75;
}

.l1-commitment-strip button:hover {
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.l1-commitment-strip button.is-active {
    background: rgba(255, 255, 255, .92);
    color: var(--l1-primary-dark);
}

.l1-commitment-strip button.is-active small {
    display: inline-flex;
}



/* ---- 10-palette.css ---- */
/* 10-palette.css - Palette balance and CMS body styling
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* ============================================================
   Palette balance - purple is an accent, surfaces stay neutral
   ============================================================ */

.l1-builder-section {
    background: linear-gradient(180deg, #fafbfc 0%, #f5f6f8 100%);
}

.l1-checkout-card,
.l1-builder-section .l1-builder-card {
    background: #ffffff;
    border-color: #e3e6ee;
}

.l1-checkout-mini-steps span.is-active {
    background: rgba(120, 131, 146, .1);
    border-color: rgba(120, 131, 146, .28);
}

.l1-section,
.l1-home-section {
    background: transparent;
}

.l1-feature,
.l1-step {
    border-color: #e3e6ee;
}

.l1-order-cadence.is-selected {
    background: #f6f7f8;
}

/* Checkout receipt: payment section must not be crammed into a 1/3 column.
   The order summary and next-step cards share the top row; the payment card
   spans full width so its provider options lay out properly. */
.l1-checkout-layout-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.l1-checkout-payment-card,
.l1-checkout-layout-wide .l1-checkout-admin-card {
    grid-column: 1 / -1;
}

/* Payment options: responsive, never narrower than a readable card. */
.l1-payment-method-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Checkout payment options - clean, consistent cards */
.l1-payment-method-option {
    overflow: hidden;
    padding: 0;
}

.l1-payment-method-option .panel-heading {
    margin: 0;
    padding: 1rem 1.15rem .85rem;
}

.l1-payment-method-option .panel-heading h2 {
    font-size: 1.05rem;
}

.l1-payment-method-detail {
    margin: 0;
    padding: 0 1.15rem 1.1rem;
}

.l1-payment-method-option form {
    margin-top: auto;
    padding: 0 1.15rem 1.15rem;
}

.l1-payment-method-option .l1-btn {
    width: 100%;
}

/* Pricing plan cards - corporate spacing + clearer featured tier */
.l1-plan {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.4rem;
}

.l1-plan .l1-plan-specs {
    flex: 1 1 auto;
}

.l1-plan .l1-btn {
    margin-top: 1.1rem;
}

.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;
}

/* Verifying-payment state */
.l1-payment-verifying .l1-checkout-card-head h2 {
    align-items: center;
    display: flex;
    gap: .6rem;
}

.l1-verifying-spinner {
    animation: l1Spin .8s linear infinite;
    border: 2px solid rgba(120, 131, 146, .25);
    border-radius: 50%;
    border-top-color: var(--l1-primary);
    display: inline-block;
    height: 18px;
    width: 18px;
}

@keyframes l1Spin {
    to { transform: rotate(360deg); }
}

/* Public surface polish: lighter surfaces, cleaner map-backed sections,
   and less boxed-in utility content. */
.l1-hero {
    background:
        radial-gradient(circle at 14% 12%, rgba(222, 225, 229, .22), transparent 32%),
        linear-gradient(135deg, rgba(141, 150, 163, .24), rgba(79, 87, 99, .16) 46%, rgba(255, 255, 255, .04) 100%),
        linear-gradient(180deg, #353a41 0%, #414851 56%, #555d69 100%);
    padding-bottom: 5.35rem;
}

.l1-hero::after,
.l1-page-hero::after,
.l1-builder-hero::after,
.l1-contact-hero::after,
.l1-article-hero::after {
    opacity: .11;
}

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

.l1-feature,
.l1-feature-row,
.l1-plan,
.l1-command-panel,
.l1-ops-card,
.l1-plan-fit-card,
.l1-confidence-card,
.l1-stat-card,
.l1-lg-panel {
    border-color: rgba(80, 88, 100, .12);
}

.l1-feature {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.l1-feature:hover {
    border-color: rgba(120, 131, 146, .34);
    transform: translateY(-2px);
}

.l1-locations-section .l1-devops-tools {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

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

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

/* 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;
}

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

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

.l1-pulsar-orbits,
.l1-pulsar-beams,
.l1-pulsar-core,
.l1-pulsar-core-inner,
.l1-pulsar-orbit-dot {
    transform-box: fill-box;
    transform-origin: center;
}

.l1-pulsar-orbit-dot {
    animation: l1OrbitSpin 9s linear infinite;
}

@keyframes l1OrbitSpin {
    to {
        transform: rotate(360deg);
    }
}

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

.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;
}

.l1-navbar {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1030;
}

.l1-nav-shell {
    align-items: center;
    display: flex;
    margin: 0 auto;
    max-width: 1140px;
    min-height: 58px;
    padding: 0 1rem;
    position: relative;
    width: 100%;
}

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

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

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

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

.l1-nav-link,
.l1-menu-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--l1-text-muted);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 650;
    gap: .35rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    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);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(23, 32, 51, .14);
    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;
    border-radius: 9px;
    color: var(--l1-text-muted);
    display: flex;
    font: inherit;
    font-size: .94rem;
    gap: .65rem;
    padding: .7rem .85rem;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

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

.l1-menu-link i {
    color: var(--l1-primary);
    width: 1rem;
}

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

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

.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-accordion-collapse[hidden] {
    display: none;
}

@media (max-width: 991.98px) {
    .l1-nav-toggle {
        display: inline-flex;
    }

    .l1-nav-shell {
        min-height: 56px;
    }

    .l1-nav-collapse {
        align-items: stretch;
        background: #ffffff;
        border: 1px solid var(--l1-border);
        border-radius: 14px;
        box-shadow: 0 18px 44px rgba(23, 32, 51, .14);
        display: none;
        flex-direction: column;
        gap: .4rem;
        left: 1rem;
        padding: .75rem;
        position: absolute;
        right: 1rem;
        top: calc(100% + .55rem);
    }

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

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

    .l1-account-nav {
        border-top: 1px solid var(--l1-border);
        margin-left: 0;
        padding-top: .45rem;
    }

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

    .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-profile-toggle {
        justify-content: flex-start;
        width: 100%;
    }
}

.l1-hero {
    padding: 6.3rem 0 3.65rem;
}

.l1-hero-title {
    font-size: clamp(2.1rem, 4.4vw, 3.75rem);
    max-width: 840px;
}

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

.l1-page-hero,
.l1-contact-hero,
.l1-article-hero {
    padding: 5.25rem 0 2.15rem;
}

.l1-builder-hero {
    min-height: 0;
    padding: 5.35rem 0 2.45rem;
}

.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-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-nav-profile .l1-profile-toggle {
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    gap: 0;
    height: 48px;
    justify-content: center;
    min-height: 0;
    padding: 4px;
    width: 48px;
}

.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,
.l1-profile-toggle .l1-profile-avatar-blank {
    height: 40px;
    width: 40px;
}

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

.l1-nav-profile .l1-profile-toggle.show > i,
.l1-nav-profile .l1-profile-toggle[aria-expanded="true"] > i {
    transform: none !important;
}

.l1-faq {
    margin-inline: 0;
    max-width: none;
}

.l1-accordion {
    display: grid;
    gap: .75rem;
}

.l1-faq .l1-accordion {
    gap: 0;
}

.l1-accordion .l1-accordion-item {
    background: #ffffff;
    border: 1px solid rgba(39, 49, 75, .13);
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(44, 48, 54, .055);
    margin: 0;
    overflow: hidden;
}

.l1-faq .l1-accordion-item {
    background: transparent;
    border: 0;
    border-radius: 0 !important;
    box-shadow: inset 0 -1px 0 0 var(--l1-border);
    margin: 0;
    overflow: hidden;
}

.l1-faq .l1-accordion-item:last-child {
    box-shadow: none;
}

.l1-accordion-header {
    margin: 0;
}

.l1-accordion .l1-accordion-button,
.l1-faq .l1-accordion-button {
    align-items: center;
    border: 0;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    text-align: left;
    width: 100%;
}

.l1-accordion .l1-accordion-button::after,
.l1-faq .l1-accordion-button::after {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(39, 49, 75, .22);
    border-radius: 999px;
    box-shadow: none;
    color: #334155;
    content: "+";
    display: inline-flex;
    flex: 0 0 auto;
    filter: none;
    font-family: var(--l1-font-body);
    font-size: 1rem;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    line-height: 1;
    width: 28px;
}

.l1-accordion .l1-accordion-button:not(.is-collapsed)::after,
.l1-faq .l1-accordion-button:not(.is-collapsed)::after {
    background: #f8fafc;
    border-color: rgba(120, 131, 146, .34);
    color: var(--l1-primary);
    content: "-";
}

.l1-faq-more {
    color: var(--l1-text-muted);
    font-size: .98rem;
    margin-top: 1.5rem;
    text-align: center;
}

.l1-faq-more a {
    color: var(--l1-primary);
    font-weight: 700;
    text-decoration: none;
}

.l1-faq-more a:hover {
    color: var(--l1-primary-dark);
}

.l1-accordion-collapse {
    display: none;
}

.l1-accordion-collapse.is-open {
    display: block;
}

.l1-accordion-collapse[hidden] {
    display: none !important;
}

.l1-cms-body {
    background: var(--l1-bg);
}

.l1-cms-body .l1-page-hero + .l1-section {
    padding-top: 3.5rem;
}

.l1-cms-body .l1-section {
    padding: 3.5rem 0;
}

.l1-cms-body .l1-section-alt {
    background: #f8f9fa;
}

.l1-cms-body .row {
    align-items: start;
}

.l1-cms-body .l1-section-title {
    font-size: clamp(1.75rem, 3vw, 2.45rem);
}

.l1-cms-body p {
    color: var(--l1-text-muted);
}

.l1-cms-body .row:has(.l1-pulsar) {
    display: block;
    max-width: 880px;
}

.l1-cms-body .row:has(.l1-pulsar) .col-lg-6 {
    max-width: 860px;
}

.l1-cms-body .l1-pulsar {
    display: none;
}

.l1-cms-body .l1-feature,
.l1-cms-body .l1-builder-card {
    background: #ffffff;
    border: 1px solid rgba(39, 49, 75, .12);
    box-shadow: 0 12px 32px rgba(44, 48, 54, .055);
}

.l1-checkout-card,
.l1-order-card,
.l1-order-summary {
    border-radius: 10px;
}

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

    .l1-profile-toggle .l1-profile-avatar,
    .l1-profile-toggle .l1-profile-avatar-blank {
        height: 36px;
        width: 36px;
    }
}

/* Bootstrap v3 public surface finalization.
   Token values live in static/css/tokens.css; layout rules only below. */

.l1-navbar {
    background: rgba(255, 255, 255, .96);
    box-shadow: none;
    padding: .38rem 0;
}

.l1-navbar .l1-nav-link,
.l1-menu-link,
.l1-profile-toggle,
.l1-btn,
.l1-btn-primary,
.l1-btn-ghost {
    border-radius: 8px;
}

.l1-btn,
.l1-btn-primary,
.l1-btn-ghost {
    box-shadow: none !important;
    padding: .62rem 1rem;
}

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

.l1-section {
    padding: 3rem 0;
}

.l1-section-head {
    margin-bottom: 1.55rem;
}

.l1-section-title {
  font-family: var(--l1-font-head);
  font-size: var(--l1-text-3xl);
  font-weight: var(--l1-fw-bold);
}

.l1-eyebrow {
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.l1-section-sub {
    font-size: 1rem;
    max-width: 760px;
}

.l1-narrow-grid {
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
}

.l1-feature-left {
    text-align: left;
}

.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-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-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-live .l1-eyebrow-dot {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, .75);
}

.l1-code-link {
    color: var(--l1-primary-dark);
}

.l1-location-meta-live {
    color: #1f8a4d;
}

.l1-muted-centered-copy {
    color: var(--l1-text-muted);
    margin: 0 auto 1rem;
    max-width: 560px;
}

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

.l1-home-hero.l1-hero,
body:not(.auth-body) .l1-hero#top {
    padding: clamp(4rem, 5.5vw, 5.5rem) 0 clamp(3.75rem, 4.75vw, 5rem);
}

.l1-home-hero .l1-hero-row,
.l1-hero#top .l1-hero-row {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    min-height: clamp(26rem, 38vw, 36.5rem);
}

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

.l1-home-hero .l1-hero-title,
.l1-hero#top .l1-hero-title {
    font-size: clamp(2.55rem, 5vw, 4.65rem);
    line-height: 1;
    max-width: 900px;
}

.l1-home-hero .l1-hero-sub,
.l1-hero#top .l1-hero-sub {
    font-size: clamp(1.05rem, 1.45vw, 1.22rem);
    max-width: 760px;
}

.l1-page-hero,
.l1-builder-hero:not(.l1-checkout-hero),
.l1-contact-hero,
.l1-article-hero {
    align-items: center;
    display: flex;
    min-height: clamp(21rem, 30vw, 29rem);
    padding: clamp(5.9rem, 7.5vw, 8rem) 0 clamp(3rem, 4.2vw, 4.5rem);
}

.l1-page-hero > .l1-container,
.l1-builder-hero > .l1-container,
.l1-contact-hero > .l1-container,
.l1-article-hero > .l1-container {
    width: 100%;
}

.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;
}

.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;
}

.l1-feature,
.l1-feature-row,
.l1-feature-guide,
.l1-command-panel,
.l1-proof-panel,
.l1-proof-card,
.l1-plan,
.l1-plan-fit-card,
.l1-confidence-card,
.l1-stat-card,
.l1-lg-panel,
.l1-tool-card,
.l1-ops-card,
.l1-home-console,
.l1-cta-band,
.l1-feature-table-wrap,
.l1-compare-wrap,
.l1-proof-table-wrap,
.l1-builder-card,
.l1-client-billing-panel {
    border-radius: 10px;
    box-shadow: none !important;
}

.l1-feature:hover,
.l1-plan:hover,
.l1-plan-featured:hover,
.l1-tool-card:hover,
.l1-client-area-page .l1-client-billing-panel:hover,
.l1-client-area-page .l1-builder-card:hover {
    box-shadow: none !important;
    transform: none;
}

.l1-feature-icon,
.l1-feature-row-icon,
.l1-plan-badge,
.l1-eyebrow,
.l1-feature-tags span,
.l1-hero-chip,
.l1-status-badge,
.l1-price-toggle,
.l1-price-option {
    border-radius: 8px;
}

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

.l1-hero-stats {
    gap: 1rem;
}

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

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

.l1-public-rendered-page .l1-page-hero,
.l1-cms-body .l1-page-hero,
.l1-cms-body .l1-builder-hero {
    background:
        linear-gradient(rgba(66, 73, 82, .88), rgba(84, 92, 104, .84)),
        url("../img/world-map-outline.04b03780e8d0.svg") center / cover no-repeat;
    color: #ffffff;
    overflow: hidden;
}

.l1-public-rendered-page .l1-page-hero h1,
.l1-public-rendered-page .l1-page-hero p,
.l1-public-rendered-page .l1-page-hero .l1-eyebrow,
.l1-public-rendered-page .l1-page-hero .l1-link-arrow,
.l1-cms-body .l1-page-hero h1,
.l1-cms-body .l1-page-hero p,
.l1-cms-body .l1-page-hero .l1-eyebrow,
.l1-cms-body .l1-page-hero .l1-link-arrow {
    color: #ffffff;
}

.l1-cms-body .l1-page-hero .l1-eyebrow,
.l1-public-rendered-page .l1-page-hero .l1-eyebrow {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .22);
}

.l1-cms-body .l1-page-hero .l1-link-arrow,
.l1-public-rendered-page .l1-page-hero .l1-link-arrow {
    color: #f3f4f6;
}

.l1-cms-body .l1-section {
    padding: clamp(3rem, 4vw, 4.25rem) 0;
}

.l1-cms-body .l1-section-alt,
.l1-cms-body .l1-use-proof,
.l1-cms-body .l1-feature-table-section {
    background:
        radial-gradient(circle at 12% 10%, rgba(120, 131, 146, .06), transparent 20rem),
        #f8f9fa;
}

.l1-cms-body .l1-section-title,
.l1-cms-body h2,
.l1-cms-body h3,
.l1-cms-body h4 {
    color: var(--l1-text);
}

.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-feature,
.l1-cms-body .l1-builder-card,
.l1-cms-body .l1-plan-fit-card,
.l1-cms-body .l1-proof-card,
.l1-cms-body .l1-proof-panel,
.l1-cms-body .l1-compare-wrap,
.l1-cms-body .l1-feature-table-wrap,
.l1-cms-body .l1-proof-table-wrap,
.l1-cms-body .l1-workload-row {
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(39, 49, 75, .12);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(44, 48, 54, .055);
    color: var(--l1-text);
}

.l1-cms-body .l1-proof-command,
.l1-cms-body .l1-feature-table,
.l1-cms-body .l1-compare {
    background: #ffffff;
    color: var(--l1-text);
}

.l1-cms-body .l1-proof-command code,
.l1-cms-body .l1-proof-command span,
.l1-cms-body .l1-feature-table strong,
.l1-cms-body .l1-compare strong {
    color: var(--l1-text);
}

.l1-cms-body .l1-proof-command {
    border: 1px solid rgba(39, 49, 75, .1);
    border-radius: 10px;
    grid-template-columns: minmax(0, 1fr);
}

.l1-cms-body .l1-cta,
.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 h2,
.l1-cms-body .l1-cta h3,
.l1-cms-body .l1-cta p,
.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 .l1-btn-ghost,
.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;
}

@media (max-width: 991.98px) {
    .l1-section {
        padding: 2.35rem 0;
    }

    .l1-home-hero.l1-hero,
    body:not(.auth-body) .l1-hero#top {
        padding: 5.4rem 0 3.2rem;
    }

    .l1-home-hero .l1-hero-row,
    .l1-hero#top .l1-hero-row {
        display: block;
        min-height: 0;
    }

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

    .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);
    }
}

/* Keep public page heroes visually separated from the first content section. */
.l1-page-hero + .l1-section,
.l1-builder-hero:not(.l1-checkout-hero) + .l1-section,
.l1-contact-hero + .l1-section,
.l1-article-hero + .l1-section {
    padding-top: clamp(4.75rem, 6vw, 6.5rem);
}

@media (max-width: 991.98px) {
    .l1-page-hero + .l1-section,
    .l1-builder-hero:not(.l1-checkout-hero) + .l1-section,
    .l1-contact-hero + .l1-section,
    .l1-article-hero + .l1-section {
        padding-top: 3.5rem;
    }
}

@media (max-width: 575.98px) {
    .l1-home-hero.l1-hero,
    body:not(.auth-body) .l1-hero#top {
        padding: 4.8rem 0 2.75rem;
    }

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

    .l1-page-hero + .l1-section,
    .l1-builder-hero:not(.l1-checkout-hero) + .l1-section,
    .l1-contact-hero + .l1-section,
    .l1-article-hero + .l1-section {
        padding-top: 3rem;
    }
}

/* Public V3 final cascade: keep the redesign simple and consistent. */
.l1-page-hero,
.l1-builder-hero:not(.l1-checkout-hero),
.l1-article-hero {
    align-items: center;
    background:
        linear-gradient(rgba(56, 61, 69, .9), rgba(70, 78, 88, .88)),
        url("../img/world-map-outline.04b03780e8d0.svg") center / min(1320px, 126vw) auto no-repeat;
    color: #ffffff;
    display: flex;
    min-height: clamp(18rem, 24vw, 24rem);
    padding: clamp(5.35rem, 7vw, 7rem) 0 clamp(2.5rem, 3.6vw, 3.4rem);
    text-align: center;
}

.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;
}

.l1-page-hero h1,
.l1-builder-hero:not(.l1-checkout-hero) h1,
.l1-article-hero h1 {
    color: #ffffff;
    font-size: clamp(2.15rem, 4vw, 3.55rem);
    line-height: 1.04;
    max-width: 920px;
}

.l1-page-hero p,
.l1-builder-hero:not(.l1-checkout-hero) p,
.l1-article-hero p {
    color: rgba(255, 255, 255, .78);
    max-width: 760px;
}

.l1-page-hero .l1-eyebrow,
.l1-builder-hero:not(.l1-checkout-hero) .l1-eyebrow,
.l1-article-hero .l1-eyebrow {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .24);
    color: #ffffff;
}

.l1-page-hero + .l1-section,
.l1-builder-hero:not(.l1-checkout-hero) + .l1-section,
.l1-contact-hero + .l1-section,
.l1-article-hero + .l1-section {
    padding-top: clamp(3rem, 4.5vw, 4.25rem);
}

.l1-section {
    padding-bottom: clamp(3rem, 5vw, 4.75rem);
    padding-top: clamp(3rem, 5vw, 4.75rem);
}

.l1-section-head {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.row {
    justify-items: stretch;
}

.l1-feature,
.l1-feature-row,
.l1-plan,
.l1-plan-fit-card,
.l1-stat-card,
.l1-confidence-card,
.l1-location,
.l1-tool-card,
.l1-cms-body .l1-feature,
.l1-cms-body .l1-builder-card,
.l1-cms-body .l1-plan-fit-card,
.l1-cms-body .l1-proof-card {
    height: 100%;
}

.l1-feature,
.l1-feature-row,
.l1-cms-body .l1-feature,
.l1-cms-body .l1-builder-card,
.l1-cms-body .l1-plan-fit-card,
.l1-cms-body .l1-proof-card {
    box-shadow: none !important;
    padding: clamp(1.25rem, 2vw, 1.65rem);
}

.l1-feature p,
.l1-feature-row p,
.l1-cms-body .l1-feature p,
.l1-cms-body .l1-builder-card p {
    margin-bottom: 0;
}

.l1-narrow-grid,
.l1-cms-body .row {
    row-gap: 1.5rem;
}

.l1-locations-section {
    text-align: center;
}

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

.l1-locations-section .l1-location {
    display: grid;
    min-height: 170px;
    place-content: center;
}

.l1-devops-tools {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.l1-builder-actions,
.l1-cta-buttons,
.l1-feature-action-row,
.l1-cms-body .l1-builder-actions {
    justify-content: center;
    text-align: center;
}

.l1-cms-body .l1-section {
    padding-bottom: clamp(2.5rem, 4vw, 3.75rem);
    padding-top: clamp(2.5rem, 4vw, 3.75rem);
}

.l1-cms-body .l1-section + .l1-section {
    margin-top: 0;
}

.l1-cms-body .l1-page-hero,
.l1-cms-body .l1-builder-hero {
    background:
        linear-gradient(rgba(56, 61, 69, .9), rgba(70, 78, 88, .88)),
        url("../img/world-map-outline.04b03780e8d0.svg") center / min(1320px, 126vw) auto no-repeat;
    min-height: clamp(18rem, 24vw, 24rem);
    text-align: center;
}

.l1-accordion .l1-accordion-body,
.l1-faq .l1-accordion-body {
    padding-top: .75rem;
}

.l1-contact-page {
    background:
        linear-gradient(180deg, #393f48 0%, #454c56 100%);
}

.l1-contact-page .l1-contact-hero {
    min-height: calc(100vh - 74px);
    padding-bottom: clamp(4rem, 7vw, 6rem);
}

@media (max-width: 991.98px) {
    .l1-page-hero,
    .l1-builder-hero:not(.l1-checkout-hero),
    .l1-article-hero {
        min-height: 16rem;
        padding: 4.85rem 0 2.5rem;
    }

    .l1-page-hero + .l1-section,
    .l1-builder-hero:not(.l1-checkout-hero) + .l1-section,
    .l1-contact-hero + .l1-section,
    .l1-article-hero + .l1-section {
        padding-top: 2.75rem;
    }
}

/* Public hero background normalization: one filled map image, no stacked overlays. */
.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;
}

.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 {
    background: none !important;
    content: none !important;
    display: none !important;
}

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

.auth-form-card .l1-turnstile-wrap {
    justify-content: center;
}

/* ---- 11-dark-refactor.css ---- */
/* 11-dark-refactor.css - Dark refactor layer and profile theme menu
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* ---------- Dark website refactor layer ---------- */
body {
    background:
        radial-gradient(circle at 18% -12%, rgba(160, 167, 178, .22), transparent 34rem),
        radial-gradient(circle at 88% 8%, rgba(55, 212, 165, .12), transparent 28rem),
        var(--l1-bg);
}

a:hover,
.l1-link-arrow,
.l1-footer-list a:hover,
.l1-footer-bottom a:hover,
.l1-google-reviews:hover,
.l1-doc-toc a:hover,
.l1-legal-toc a:hover,
.l1-article-body a:hover,
.l1-blog-card-title a:hover,
.l1-doc-card h2 a:hover,
.l1-feature-link h3 a:hover {
    color: var(--l1-primary-dark);
}

/* Flat brand fill. The gradient ran between two indigos a shade apart, which
   cost a second colour stop and a coloured drop shadow to render an effect
   invisible at button size — the shadow is neutral now, so the only brand thing
   on the page's primary action is the fill itself. */
.l1-btn-primary {
    background: var(--l1-brand);
    border-color: var(--l1-brand);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
}

.l1-btn-primary:hover {
    background: var(--l1-brand-strong);
    border-color: var(--l1-primary-dark);
}

.l1-btn-ghost {
    background: rgba(255, 255, 255, .03);
    color: var(--l1-text);
}

.l1-btn-ghost:hover {
    background: rgba(160, 167, 178, .16);
    color: var(--l1-text);
}

/* ---------- Contact bar: standing phone and email above the navbar ----------
   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 {
    background: #1c1f23;
    border-bottom: 1px solid rgba(188, 193, 201, .16);
    color: #e1e4e7;
    font-size: .8125rem;
    position: relative;
    z-index: 1050;
}

.l1-contactbar-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
    justify-content: flex-end;
    margin: 0 auto;
    /* Same box as .l1-nav-shell, so the label lines up with the logo below it and
       the email with the Dashboard link. Note the shell's 1140px in
       10-palette.css is overridden later to this value; match the effective one,
       and change both together. */
    max-width: min(100% - 32px, 1190px);
    min-height: 2.5rem;
    padding: .4rem 1rem;
    width: 100%;
}

.l1-contactbar-link {
    align-items: center;
    color: #e1e4e7;
    display: inline-flex;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    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 lives in 14-enhancements.css with the other public links. */
    text-decoration: none;
    white-space: nowrap;
}

.l1-contactbar-link i {
    font-size: .85em;
    opacity: .7;
}

.l1-contactbar-link:hover {
    color: var(--l1-brand-strong);
}

.l1-navbar,
.l1-navbar.l1-navbar-scrolled,
.l1-navbar.l1-navbar-dashboard {
    background: rgba(14, 16, 18, .92);
    backdrop-filter: saturate(170%) blur(18px);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none;
    padding: .9rem 0;
}

.l1-navbar.l1-navbar-scrolled,
.l1-navbar.l1-navbar-dashboard {
    background: rgba(12, 13, 14, .96);
    padding: .62rem 0;
}

.l1-nav-shell {
    max-width: min(100% - 2rem, 1190px);
}

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

/* The silhouette filter that used to live here (brightness(0) invert(1) on
   .l1-brand img and .l1-footer-brand img) is gone. It existed because the only
   lockup was dark-ink, so it had to be knocked out to white to survive the dark
   navbar and the dark footer — at the cost of the mark's blue. There is a real
   white-wordmark lockup now: the navbar swaps the two on data-l1-theme and the
   footer, dark in both themes, links the dark one directly. Reinstating a
   filter here would flatten the mark again. */

.l1-brand img,
.l1-navbar.l1-navbar-scrolled .l1-brand img,
.l1-navbar.l1-navbar-dashboard .l1-brand img {
    height: 42px;
    max-height: 42px;
}

.l1-navbar .l1-nav-link {
    color: rgba(255, 255, 255, .88);
    font-weight: 760;
    padding: .5rem .75rem !important;
}

.l1-navbar .l1-nav-link:hover,
.l1-navbar .l1-nav-link.active,
.l1-navbar .l1-menu-trigger[aria-expanded="true"] {
    background: rgba(255, 255, 255, .07);
    color: #ffffff;
}

.l1-dashboard-link .l1-nav-link {
    color: #ffffff;
}

.l1-profile-avatar {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

.l1-profile-avatar-blank {
    background: var(--l1-brand-soft);
    color: var(--l1-brand-strong);
}

.l1-nav-toggle,
.l1-toggler {
    border: 1px solid var(--l1-border-strong);
    color: var(--l1-text);
}

/* The toggler SVG ships a white stroke and the marketing navbar is dark in both
   themes, so no filter is needed. An invert() here painted the icon black on the
   dark navbar; the light-theme "filter: none" cancel in 12-bento-hero.css was
   only ever there to undo it. */

.l1-dropdown {
    background: rgba(20, 22, 24, .98);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .42);
}

.l1-dropdown .l1-menu-link {
    color: var(--l1-text);
}

.l1-dropdown .l1-menu-link:hover,
.l1-dropdown .l1-menu-link:focus {
    background: rgba(160, 167, 178, .16);
    color: #ffffff;
}

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

.l1-hero,
.l1-page-hero,
.l1-article-hero {
    background:
        linear-gradient(180deg, rgba(20, 23, 26, .92) 0%, var(--l1-bg) 64%, var(--l1-bg-2) 100%);
}

.l1-hero::before,
.l1-page-hero::before,
.l1-article-hero::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    opacity: .5;
}

.l1-gradient-text {
    background: linear-gradient(120deg, #ffffff 0%, var(--l1-primary-dark) 48%, var(--l1-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.l1-eyebrow,
.l1-plan-badge,
.l1-blog-card-meta .l1-blog-tag,
.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);
}

.l1-section-alt,
.l1-footer,
.l1-cta-section,
.l1-doc-article-wrap,
.l1-builder-page,
.l1-public-rendered-page {
    background: var(--l1-bg-2);
}

.l1-feature,
.l1-feature-hero-link,
.l1-feature-guide,
.l1-command-panel,
.l1-ops-card,
.l1-plan-fit-card,
.l1-proof-card,
.l1-pricing-handoff,
.l1-plan,
.l1-confidence-card,
.l1-location,
.l1-stat-card,
.l1-cta-card,
.l1-billing-toggle,
.l1-compare-wrap,
.l1-accordion .l1-accordion-item,
.l1-accordion .l1-accordion-button,
.l1-legal-toc,
.l1-legal-meta,
.l1-legal-content table,
.l1-legal-contact,
.l1-blog-card,
.l1-empty-public,
.l1-blog-cta,
.l1-doc-toc,
.l1-docs-search-field,
.l1-doc-card,
.l1-docs-empty,
.l1-doc-meta span,
.l1-status-embed,
.l1-article-body table,
.l1-article-share-links a,
.l1-social a {
    background-color: var(--l1-surface);
    border-color: var(--l1-border);
    box-shadow: var(--l1-shadow-soft);
}

.l1-feature:hover,
.l1-plan:hover,
.l1-blog-card:hover,
.l1-doc-card:hover,
.l1-location:hover,
.l1-tool-card:hover {
    background: var(--l1-surface-2);
    border-color: rgba(188, 193, 201, .46);
    box-shadow: var(--l1-shadow-glow);
}

.l1-feature-hero-link,
.l1-locations-section .l1-location,
.l1-locations-section .l1-plan,
.l1-tool-card,
.l1-proof-toolbar,
.l1-proof-panel,
.l1-proof-command,
.l1-proof-tabs button,
.l1-compare thead th,
.l1-compare thead th.l1-compare-featured,
.l1-compare tbody tr:hover td,
.l1-accordion .l1-accordion-button:not(.is-collapsed),
.l1-article-body code,
.l1-article-body pre {
    background: var(--l1-surface-2);
}

.l1-feature-icon,
.l1-feature-row-icon,
.l1-workload-icon,
.l1-doc-card-arrow,
.l1-social a,
.l1-article-share-links a {
    background: var(--l1-primary-soft);
    color: var(--l1-primary-dark);
}

.l1-compare th,
.l1-compare td,
.l1-legal-content table th,
.l1-legal-content table td,
.l1-article-body th,
.l1-article-body td,
.l1-footer-top,
.l1-blog-card-byline,
.l1-doc-header,
.l1-article-share {
    border-color: var(--l1-border);
}

.l1-compare thead th.l1-compare-featured,
.l1-plan-featured,
.l1-doc-cta {
    background: linear-gradient(180deg, rgba(160, 167, 178, .18), rgba(55, 212, 165, .06));
}

.l1-plan-featured {
    border-color: rgba(188, 193, 201, .46);
}

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

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

.l1-commitment-strip button.is-active {
    background: #ffffff;
    color: #1f2227;
}

.l1-savings-badge {
    color: #5eead4;
}

input,
textarea,
select,
.form-control,
.form-select {
    background-color: var(--l1-surface) !important;
    border-color: var(--l1-border) !important;
    color: var(--l1-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--l1-text-dim) !important;
}

@media (max-width: 991.98px) {
    /* Stays right-aligned at every width; only the gutter tightens. Centring it
       here put the pair under the logo instead of over the menu button. */
    .l1-contactbar-inner {
        padding-left: .875rem;
        padding-right: .875rem;
    }

    .l1-navbar,
    .l1-navbar.l1-navbar-scrolled,
    .l1-navbar.l1-navbar-dashboard {
        background: rgba(12, 13, 14, .98);
        border-bottom-color: rgba(255, 255, 255, .1);
        padding: .55rem 0;
    }

    .l1-navbar .l1-nav-collapse {
        background: rgba(20, 22, 24, .98);
        border: 1px solid var(--l1-border);
        border-radius: var(--l1-radius-lg);
        margin-top: .75rem;
        padding: .6rem;
    }

    .l1-navbar .l1-nav-link {
        border-bottom-color: var(--l1-border);
    }

    .l1-navbar .l1-nav-item.l1-menu .l1-menu-panel.l1-dropdown {
        border-left-color: var(--l1-border-strong);
    }

    .l1-dashboard-link .l1-nav-link {
        border-bottom: 1px solid var(--l1-border) !important;
    }

    .l1-profile-toggle {
        justify-content: flex-start;
        padding-left: .25rem;
    }
}

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

    .l1-contactbar-inner {
        gap: .3rem 1rem;
        min-height: 2.35rem;
    }

    .l1-brand img,
    .l1-navbar.l1-navbar-scrolled .l1-brand img,
    .l1-navbar.l1-navbar-dashboard .l1-brand img {
        height: 38px;
        max-height: 38px;
    }
}

/* ---------- Profile theme menu and light-mode overrides ---------- */
.l1-profile-dropdown {
    min-width: 18rem;
    padding: .45rem;
}

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

.l1-profile-card-avatar {
    height: 58px !important;
    margin-bottom: .65rem;
    max-height: 58px !important;
    width: 58px !important;
}

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

.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-theme-toggle [hidden] {
    display: none !important;
}

.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 {
    color: #fca5a5 !important;
    gap: .45rem;
    white-space: nowrap;
}

.l1-profile-signout-compact:hover,
.l1-profile-signout-compact:focus {
    background: rgba(239, 68, 68, .14) !important;
    color: #fecaca !important;
}


/* ---- 12-bento-hero.css ---- */
/* 12-bento-hero.css - Bento grid, mockups, hero visual, capabilities table
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* =====================================================
   Bento grid, UI mockups, and hero visual (marketing V2)
   ===================================================== */
.l1-bento-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

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

.l1-bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.l1-bento-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--l1-primary), var(--l1-accent));
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.l1-bento-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--l1-shadow-soft);
    border-color: var(--l1-border-strong);
}

.l1-bento-card:hover::before {
    opacity: .7;
}

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

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

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

.l1-bento-card .l1-feature-tags {
    margin-top: auto;
    padding-top: 1.1rem;
}

.l1-bento-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--l1-primary-soft);
    border: 1px solid transparent;
    color: var(--l1-primary-dark);
    font-size: 1.15rem;
    margin-bottom: 1.1rem;
}

.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);
}

html[data-l1-theme="dark"] .l1-bento-card {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .13);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}

html[data-l1-theme="dark"] .l1-bento-card:hover {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(213, 216, 221, .36);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

html[data-l1-theme="dark"] .l1-bento-icon {
    background: rgba(188, 193, 201, .14);
    border-color: rgba(213, 216, 221, .22);
    color: var(--l1-primary-dark);
}

/* ---------- Mockup windows ---------- */
.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;
}

.l1-mockup-body {
    padding: 1rem;
    color: var(--l1-text-muted);
}

/* 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;
    color: var(--l1-accent);
    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-mockup-cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background: #bcc1c9;
    vertical-align: text-bottom;
    animation: l1-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes l1-cursor-blink {
    50% { opacity: 0; }
}

/* Animated usage graph */
.l1-mockup-graph {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 96px;
}

.l1-mockup-graph-bar {
    flex: 1;
    height: var(--h, 40%);
    min-height: 8%;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--l1-primary), var(--l1-primary-soft) 140%);
    opacity: .45;
    transform-origin: bottom;
    animation: l1-bar-rise .9s cubic-bezier(.22, .9, .35, 1) backwards;
}

.l1-mockup-graph-bar:nth-child(2n) { opacity: .3; }
.l1-mockup-graph-bar.active { opacity: 1; }

.l1-mockup-graph-bar:nth-child(1) { animation-delay: .05s; }
.l1-mockup-graph-bar:nth-child(2) { animation-delay: .1s; }
.l1-mockup-graph-bar:nth-child(3) { animation-delay: .15s; }
.l1-mockup-graph-bar:nth-child(4) { animation-delay: .2s; }
.l1-mockup-graph-bar:nth-child(5) { animation-delay: .25s; }
.l1-mockup-graph-bar:nth-child(6) { animation-delay: .3s; }
.l1-mockup-graph-bar:nth-child(7) { animation-delay: .35s; }
.l1-mockup-graph-bar:nth-child(8) { animation-delay: .4s; }
.l1-mockup-graph-bar:nth-child(9) { animation-delay: .45s; }
.l1-mockup-graph-bar:nth-child(10) { animation-delay: .5s; }
.l1-mockup-graph-bar:nth-child(11) { animation-delay: .55s; }
.l1-mockup-graph-bar:nth-child(12) { animation-delay: .6s; }

@keyframes l1-bar-rise {
    from { transform: scaleY(.12); }
}

.l1-mockup-graph-caption {
    display: flex;
    justify-content: space-between;
    margin-top: .55rem;
    color: var(--l1-text-dim);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Comparison meters (disk speed visual) */
.l1-meter-stack {
    display: grid;
    gap: .85rem;
}

.l1-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .3rem;
    color: var(--l1-text-dim);
    font-size: .74rem;
    font-weight: 600;
}

.l1-meter-head strong {
    color: var(--l1-text);
    font-size: .76rem;
    white-space: nowrap;
}

.l1-meter-track {
    height: 9px;
    border-radius: 999px;
    background: var(--l1-surface-2);
    border: 1px solid var(--l1-border);
    overflow: hidden;
}

.l1-meter-track span {
    display: block;
    height: 100%;
    width: var(--w, 60%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--l1-primary), var(--l1-accent));
    animation: l1-meter-fill 1.1s cubic-bezier(.22, .9, .35, 1) backwards;
}

.l1-meter-track-muted span {
    background: var(--l1-border-strong);
}

@keyframes l1-meter-fill {
    from { width: 0; }
}

/* Grafana-style panels used on the homepage feature bento. */
.l1-telemetry {
    background: #152a52;
    border: 1px solid rgba(158, 194, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(5, 11, 24, 0.16);
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
}

.l1-telemetry-bar {
    align-items: center;
    color: rgba(165, 206, 255, 0.78);
    display: flex;
    font-size: 0.68rem;
    font-weight: 700;
    gap: 0.75rem;
    justify-content: space-between;
    letter-spacing: 0.06em;
    padding: 0.7rem 0.95rem 0.4rem;
    text-transform: uppercase;
}

.l1-telemetry-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    padding: 0 0.95rem 0.45rem;
}

.l1-telemetry-kpis strong {
    color: #ffffff;
    display: block;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.l1-telemetry-kpis span {
    color: rgba(165, 206, 255, 0.7);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.l1-telemetry-svg {
    display: block;
    height: 118px;
    width: 100%;
}

.l1-telemetry-grid line {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}

.l1-telemetry-line {
    fill: none;
    stroke: #7eb0ff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.l1-telemetry-line.is-muted {
    stroke: rgba(186, 198, 216, 0.55);
    stroke-dasharray: 3 3;
    stroke-width: 1.5;
}

.l1-telemetry-line.is-sla {
    stroke: rgba(255, 196, 90, 0.88);
    stroke-dasharray: 4 4;
    stroke-width: 1.25;
}

.l1-telemetry-legend {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.68rem;
    font-weight: 650;
    gap: 0.85rem 1.1rem;
    padding: 0.2rem 0.95rem 0.75rem;
}

.l1-telemetry-swatch {
    background: #7eb0ff;
    border-radius: 99px;
    display: inline-block;
    height: 3px;
    margin-right: 0.4rem;
    vertical-align: middle;
    width: 0.75rem;
}

.l1-telemetry-swatch.is-muted {
    background: rgba(186, 198, 216, 0.7);
}

.l1-telemetry-swatch.is-sla {
    background: rgba(255, 196, 90, 0.95);
}

html[data-l1-theme="dark"] .l1-telemetry {
    background: #121a2c;
    border-color: rgba(165, 206, 255, 0.2);
}

/* Tech-stack logo strip */
.l1-stack-strip {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    padding: 1.1rem 1rem;
    background: var(--l1-surface-2);
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius);
}

.l1-stack-strip i {
    font-size: 2rem;
    opacity: .92;
}

/* ---------- Homepage hero visual composition ---------- */
/* Selector list mirrors the legacy `#top` skin rules so this wins the specificity contest. */
@media (min-width: 992px) {
    .l1-hero-row,
    .l1-home-hero .l1-hero-row,
    .l1-hero#top .l1-hero-row {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
        gap: 3rem;
        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-hero-visual {
    position: relative;
    max-width: 500px;
    margin: 2.75rem auto 2.75rem;
}

@media (min-width: 992px) {
    .l1-hero-visual {
        margin: 0 0 2.5rem auto;
    }
}

.l1-hero-visual-glow {
    position: absolute;
    inset: -14% -12%;
    background: radial-gradient(closest-side, var(--l1-primary-glow), transparent 74%);
    filter: blur(4px);
    pointer-events: none;
}

.l1-hero-mockup {
    position: relative;
    z-index: 1;
    animation: l1-float 7s ease-in-out infinite;
}

.l1-hero-terminal {
    position: absolute;
    z-index: 2;
    left: -2rem;
    bottom: -2.4rem;
    width: min(76%, 330px);
    box-shadow: 0 24px 54px rgba(12, 13, 14, .35);
    animation: l1-float 7s ease-in-out 1.1s infinite;
}

.l1-hero-chip-float {
    position: absolute;
    z-index: 3;
    top: -.9rem;
    right: -.6rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: var(--l1-surface);
    border: 1px solid var(--l1-border-strong);
    box-shadow: 0 12px 30px rgba(12, 13, 14, .22);
    color: var(--l1-text);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
    animation: l1-float 7s ease-in-out .5s infinite;
}

.l1-hero-chip-float i {
    color: var(--l1-accent);
}

@media (max-width: 991.98px) {
    .l1-hero-terminal {
        left: .5rem;
    }
    .l1-hero-chip-float {
        right: .25rem;
    }
}

@keyframes l1-float {
    50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .l1-hero-mockup,
    .l1-hero-terminal,
    .l1-hero-chip-float,
    .l1-mockup-graph-bar,
    .l1-meter-track span,
    .l1-mockup-cursor,
    .l1-mockup-status-dot {
        animation: none !important;
    }
}

/* ---------- Feature capabilities table: Bootstrap contrast fix ---------- */
.l1-feature-table.table {
    --bs-table-bg: transparent;
}

html[data-l1-theme="dark"] .l1-feature-table-wrap {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 255, 255, .13) !important;
}

html[data-l1-theme="dark"] .l1-feature-table.table {
    --bs-table-hover-bg: rgba(255, 255, 255, .05);
    --bs-table-hover-color: var(--l1-text);
    --bs-table-border-color: rgba(255, 255, 255, .12);
    background: transparent !important;
    color: var(--l1-text) !important;
}

html[data-l1-theme="dark"] .l1-feature-table.table > :not(caption) > * > * {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: var(--l1-text-muted) !important;
}

html[data-l1-theme="dark"] .l1-feature-table.table thead th {
    background: var(--l1-surface-2) !important;
    color: var(--l1-text) !important;
}

html[data-l1-theme="dark"] .l1-feature-table.table td strong {
    color: var(--l1-text) !important;
}

@media (max-width: 767.98px) {
    html[data-l1-theme="dark"] .l1-feature-table-wrap {
        background: transparent !important;
        border: 0 !important;
    }

    html[data-l1-theme="dark"] .l1-feature-table.table tr {
        background: rgba(255, 255, 255, .03) !important;
        border-color: rgba(255, 255, 255, .13) !important;
    }
}

/* Light-theme component rules (tokens in static/css/tokens.css). */
html[data-l1-theme="light"] body {
    background:
        radial-gradient(circle at 18% -12%, rgba(151, 160, 172, .12), transparent 34rem),
        radial-gradient(circle at 88% 8%, rgba(15, 159, 118, .08), transparent 28rem),
        var(--l1-bg);
    color: var(--l1-text);
}

html[data-l1-theme="light"] .l1-contactbar {
    background: #f7f7f8;
    border-bottom-color: rgba(151, 160, 172, .18);
    color: #414851;
}

html[data-l1-theme="light"] .l1-contactbar-link {
    color: #2b3138;
}

html[data-l1-theme="light"] .l1-contactbar-link:hover {
    color: var(--l1-primary-dark);
}

html[data-l1-theme="light"] .l1-navbar,
html[data-l1-theme="light"] .l1-navbar.l1-navbar-scrolled,
html[data-l1-theme="light"] .l1-navbar.l1-navbar-dashboard {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: rgba(15, 23, 42, .1);
    box-shadow: 0 12px 36px rgba(15, 23, 42, .08);
}

html[data-l1-theme="light"] .l1-navbar.l1-navbar-scrolled,
html[data-l1-theme="light"] .l1-navbar.l1-navbar-dashboard {
    background: rgba(255, 255, 255, .96);
}

html[data-l1-theme="light"] .l1-brand img,
html[data-l1-theme="light"] .l1-footer-brand img {
    filter: none;
}

html[data-l1-theme="light"] .l1-navbar .l1-nav-link,
html[data-l1-theme="light"] .l1-dashboard-link .l1-nav-link {
    color: rgba(17, 24, 39, .82);
}

html[data-l1-theme="light"] .l1-navbar .l1-nav-link:hover,
html[data-l1-theme="light"] .l1-navbar .l1-nav-link.active,
html[data-l1-theme="light"] .l1-navbar .l1-menu-trigger[aria-expanded="true"] {
    background: rgba(151, 160, 172, .1);
    color: var(--l1-primary-dark);
}

html[data-l1-theme="light"] .l1-dropdown {
    background: rgba(255, 255, 255, .98);
    border-color: rgba(15, 23, 42, .12);
    box-shadow: 0 24px 58px rgba(15, 23, 42, .16);
}

html[data-l1-theme="light"] .l1-dropdown .l1-menu-link {
    color: var(--l1-text);
}

html[data-l1-theme="light"] .l1-dropdown .l1-menu-link:hover,
html[data-l1-theme="light"] .l1-dropdown .l1-menu-link:focus {
    background: rgba(151, 160, 172, .1);
    color: var(--l1-primary-dark);
}

html[data-l1-theme="light"] .l1-menu-divider,
html[data-l1-theme="light"] .l1-profile-divider {
    border-color: var(--l1-border);
}

html[data-l1-theme="light"] .l1-profile-avatar {
    background: #eff4ff;
    color: var(--l1-primary-dark);
}

html[data-l1-theme="light"] .l1-profile-avatar-blank {
    background: var(--l1-brand-soft);
    color: var(--l1-brand-strong);
}

html[data-l1-theme="light"] .l1-profile-signout-compact {
    color: #b42318 !important;
}

html[data-l1-theme="light"] .l1-profile-signout-compact:hover,
html[data-l1-theme="light"] .l1-profile-signout-compact:focus {
    background: rgba(180, 35, 24, .1) !important;
    color: #8a1f16 !important;
}

html[data-l1-theme="light"] .l1-nav-toggle,
html[data-l1-theme="light"] .l1-toggler {
    border-color: var(--l1-border-strong);
    color: var(--l1-text);
}

html[data-l1-theme="light"] .l1-hero,
html[data-l1-theme="light"] .l1-page-hero,
html[data-l1-theme="light"] .l1-article-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 66%, #eef2f7 100%);
}

html[data-l1-theme="light"] .l1-hero::before,
html[data-l1-theme="light"] .l1-page-hero::before,
html[data-l1-theme="light"] .l1-article-hero::before {
    background-image:
        linear-gradient(rgba(15, 23, 42, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .055) 1px, transparent 1px);
    opacity: .5;
}

html[data-l1-theme="light"] .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;
}

html[data-l1-theme="light"] .l1-btn-ghost {
    background: rgba(15, 23, 42, .035);
    color: var(--l1-text);
}

html[data-l1-theme="light"] .l1-btn-ghost:hover {
    background: rgba(151, 160, 172, .1);
    color: var(--l1-primary-dark);
}
/* Contained light homepage hero */
html[data-l1-theme="light"] .l1-home-hero.l1-hero,
html[data-l1-theme="light"] body:not(.auth-body) .l1-hero#top {
    background-color: #eef3ff !important;
    background-image:
        radial-gradient(circle at 18% 18%, rgba(151, 160, 172, .18), transparent 30rem),
        radial-gradient(circle at 88% 20%, rgba(15, 159, 118, .10), transparent 34rem),
        linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(239, 244, 255, .82) 100%),
        url("../img/world-map-outline.04b03780e8d0.svg") !important;
    background-position: center, center, center, center 48% !important;
    background-repeat: no-repeat !important;
    background-size: cover, cover, cover, min(1280px, 112vw) auto !important;
    border: 1px solid rgba(138, 148, 161, .14);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
    color: var(--l1-text);
    margin: 0 auto clamp(2.5rem, 4vw, 4rem);
    overflow: hidden;
    width: min(calc(100% - clamp(2rem, 7vw, 8rem)), 1680px);
}

html[data-l1-theme="light"] .l1-home-hero.l1-hero::before,
html[data-l1-theme="light"] .l1-home-hero.l1-hero::after,
html[data-l1-theme="light"] body:not(.auth-body) .l1-hero#top::before,
html[data-l1-theme="light"] body:not(.auth-body) .l1-hero#top::after {
    content: none !important;
    display: none !important;
}

html[data-l1-theme="light"] .l1-home-hero .l1-container,
html[data-l1-theme="light"] .l1-hero#top .l1-container {
    max-width: 1280px;
}

html[data-l1-theme="light"] .l1-home-hero .l1-hero-title,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-title {
    color: #111827;
    text-shadow: none;
}

html[data-l1-theme="light"] .l1-home-hero .l1-gradient-text,
html[data-l1-theme="light"] .l1-hero#top .l1-gradient-text {
    /* Two stops, brand to accent. The middle stop used to be a violet (#6d5dfc)
       that made the ramp read as "purple headline"; neutralising it in place
       just put grey between two saturated colours, so it goes away entirely. */
    background: linear-gradient(120deg, #2563eb 0%, #0f9f76 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-l1-theme="light"] .l1-home-hero .l1-hero-sub,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-sub {
    color: rgba(17, 24, 39, .76);
}

html[data-l1-theme="light"] .l1-home-hero .l1-hero-stats,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-stats {
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(138, 148, 161, .16);
    border-radius: 8px;
    box-shadow: none;
    padding: .75rem .95rem;
    width: fit-content;
}
html[data-l1-theme="light"] .l1-home-hero .l1-hero-stats strong,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-stats strong {
    color: #111827;
}

html[data-l1-theme="light"] .l1-home-hero .l1-hero-stats span,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-stats span {
    color: rgba(17, 24, 39, .66);
}

html[data-l1-theme="light"] .l1-home-hero .l1-hero-stats-divider,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-stats-divider {
    background: rgba(138, 148, 161, .18);
}

html[data-l1-theme="light"] .l1-home-hero .l1-link-arrow,
html[data-l1-theme="light"] .l1-hero#top .l1-link-arrow {
    color: rgba(17, 24, 39, .68);
    font-weight: 700;
}

html[data-l1-theme="light"] .l1-home-hero .l1-link-arrow:hover,
html[data-l1-theme="light"] .l1-hero#top .l1-link-arrow:hover {
    color: var(--l1-primary-dark);
}

html[data-l1-theme="light"] .l1-home-hero .l1-btn-ghost,
html[data-l1-theme="light"] .l1-hero#top .l1-btn-ghost {
    background: rgba(255, 255, 255, .56);
    border-color: rgba(138, 148, 161, .18);
    color: rgba(17, 24, 39, .78);
}

html[data-l1-theme="light"] .l1-home-hero .l1-btn-ghost:hover,
html[data-l1-theme="light"] .l1-hero#top .l1-btn-ghost:hover {
    background: rgba(138, 148, 161, .1);
    border-color: rgba(138, 148, 161, .28);
    color: var(--l1-primary-dark);
}

@media (max-width: 991.98px) {
    html[data-l1-theme="light"] .l1-home-hero.l1-hero,
    html[data-l1-theme="light"] body:not(.auth-body) .l1-hero#top {
        border-radius: 16px;
        width: min(calc(100% - 1.5rem), 1680px);
    }
}

@media (max-width: 575.98px) {
    html[data-l1-theme="light"] .l1-home-hero.l1-hero,
    html[data-l1-theme="light"] body:not(.auth-body) .l1-hero#top {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        margin-bottom: 2.25rem;
        width: 100%;
    }
}

html[data-l1-theme="light"] .l1-section-alt,
html[data-l1-theme="light"] .l1-footer,
html[data-l1-theme="light"] .l1-cta-section,
html[data-l1-theme="light"] .l1-doc-article-wrap,
html[data-l1-theme="light"] .l1-builder-page,
html[data-l1-theme="light"] .l1-public-rendered-page {
    background: var(--l1-bg-2);
}

html[data-l1-theme="light"] .l1-feature,
html[data-l1-theme="light"] .l1-feature-hero-link,
html[data-l1-theme="light"] .l1-feature-guide,
html[data-l1-theme="light"] .l1-command-panel,
html[data-l1-theme="light"] .l1-ops-card,
html[data-l1-theme="light"] .l1-plan-fit-card,
html[data-l1-theme="light"] .l1-proof-card,
html[data-l1-theme="light"] .l1-pricing-handoff,
html[data-l1-theme="light"] .l1-plan,
html[data-l1-theme="light"] .l1-confidence-card,
html[data-l1-theme="light"] .l1-location,
html[data-l1-theme="light"] .l1-stat-card,
html[data-l1-theme="light"] .l1-cta-card,
html[data-l1-theme="light"] .l1-billing-toggle,
html[data-l1-theme="light"] .l1-compare-wrap,
html[data-l1-theme="light"] .l1-accordion .l1-accordion-item,
html[data-l1-theme="light"] .l1-accordion .l1-accordion-button,
html[data-l1-theme="light"] .l1-legal-toc,
html[data-l1-theme="light"] .l1-legal-meta,
html[data-l1-theme="light"] .l1-legal-content table,
html[data-l1-theme="light"] .l1-legal-contact,
html[data-l1-theme="light"] .l1-blog-card,
html[data-l1-theme="light"] .l1-empty-public,
html[data-l1-theme="light"] .l1-blog-cta,
html[data-l1-theme="light"] .l1-doc-toc,
html[data-l1-theme="light"] .l1-docs-search-field,
html[data-l1-theme="light"] .l1-doc-card,
html[data-l1-theme="light"] .l1-docs-empty,
html[data-l1-theme="light"] .l1-doc-meta span,
html[data-l1-theme="light"] .l1-status-embed,
html[data-l1-theme="light"] .l1-article-body table,
html[data-l1-theme="light"] .l1-article-share-links a,
html[data-l1-theme="light"] .l1-social a {
    background-color: var(--l1-surface);
    border-color: var(--l1-border);
    box-shadow: var(--l1-shadow-soft);
}

html[data-l1-theme="light"] input,
html[data-l1-theme="light"] textarea,
html[data-l1-theme="light"] select,
html[data-l1-theme="light"] .form-control,
html[data-l1-theme="light"] .form-select {
    background-color: #ffffff !important;
    border-color: var(--l1-border) !important;
    color: var(--l1-text) !important;
}

html[data-l1-theme="light"] input::placeholder,
html[data-l1-theme="light"] textarea::placeholder {
    color: var(--l1-text-dim) !important;
}

@media (max-width: 991.98px) {
    html[data-l1-theme="light"] .l1-navbar,
    html[data-l1-theme="light"] .l1-navbar.l1-navbar-scrolled,
    html[data-l1-theme="light"] .l1-navbar.l1-navbar-dashboard,
    html[data-l1-theme="light"] .l1-navbar .l1-nav-collapse {
        background: rgba(255, 255, 255, .98);
        border-color: var(--l1-border);
    }
}

/* ---- 13-dark-polish.css ---- */
/* 13-dark-polish.css - Dark/light theme correction and polish passes
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* ---------- Dark theme correction pass (tokens in static/css/tokens.css) ---------- */
html[data-l1-theme="dark"] body {
    background:
        radial-gradient(circle at 18% -12%, rgba(160, 167, 178, .22), transparent 34rem),
        radial-gradient(circle at 88% 8%, rgba(55, 212, 165, .12), transparent 28rem),
        var(--l1-bg);
    color: var(--l1-text);
}

html[data-l1-theme] .l1-navbar {
    left: auto;
    position: sticky;
    right: auto;
    top: 0;
    width: 100%;
    z-index: 1040;
}

html[data-l1-theme] .l1-contactbar {
    position: relative;
    z-index: 1045;
}

html[data-l1-theme="dark"] .l1-section,
html[data-l1-theme="dark"] .l1-home-section,
html[data-l1-theme="dark"] .l1-public-rendered-page,
html[data-l1-theme="dark"] .l1-cms-body .l1-section {
    background: var(--l1-bg);
    color: var(--l1-text);
}

html[data-l1-theme="dark"] .l1-section-alt,
html[data-l1-theme="dark"] .l1-cms-body .l1-section-alt,
html[data-l1-theme="dark"] .l1-footer,
html[data-l1-theme="dark"] .l1-cta-section,
html[data-l1-theme="dark"] .l1-doc-article-wrap,
html[data-l1-theme="dark"] .l1-builder-page {
    background: var(--l1-bg-2);
    color: var(--l1-text);
}

html[data-l1-theme="dark"] .l1-section-title,
html[data-l1-theme="dark"] .l1-section h1,
html[data-l1-theme="dark"] .l1-section h2,
html[data-l1-theme="dark"] .l1-section h3,
html[data-l1-theme="dark"] .l1-section h4,
html[data-l1-theme="dark"] .l1-section h5,
html[data-l1-theme="dark"] .l1-section h6 {
    color: var(--l1-text);
}

html[data-l1-theme="dark"] .l1-section-sub,
html[data-l1-theme="dark"] .l1-section p,
html[data-l1-theme="dark"] .l1-card p,
html[data-l1-theme="dark"] .l1-feature p,
html[data-l1-theme="dark"] .l1-plan p {
    color: var(--l1-text-muted);
}

html[data-l1-theme="dark"] .l1-profile-dropdown {
    --bs-dropdown-bg: #101215;
    --bs-dropdown-color: #f8fafc;
    --bs-dropdown-link-color: #f8fafc;
    --bs-dropdown-link-hover-bg: rgba(160, 167, 178, .18);
    --bs-dropdown-link-hover-color: #ffffff;
    background: rgba(16, 18, 21, .98) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-profile-dropdown .l1-profile-email,
html[data-l1-theme="dark"] .l1-profile-dropdown .l1-profile-link,
html[data-l1-theme="dark"] .l1-profile-dropdown .l1-theme-toggle {
    color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-profile-dropdown .l1-profile-role,
html[data-l1-theme="dark"] .l1-profile-dropdown .l1-profile-link i,
html[data-l1-theme="dark"] .l1-profile-dropdown .l1-theme-toggle i {
    color: #b6bcc5 !important;
}

html[data-l1-theme="dark"] .l1-profile-dropdown .l1-profile-link:hover,
html[data-l1-theme="dark"] .l1-profile-dropdown .l1-profile-link:focus,
html[data-l1-theme="dark"] .l1-profile-dropdown .l1-theme-toggle:hover,
html[data-l1-theme="dark"] .l1-profile-dropdown .l1-theme-toggle:focus {
    background: rgba(160, 167, 178, .18) !important;
    color: #ffffff !important;
}

html[data-l1-theme="dark"] .l1-profile-signout-compact {
    color: #fca5a5 !important;
}

html[data-l1-theme="dark"] .l1-profile-signout-compact i {
    color: #fca5a5 !important;
}

html[data-l1-theme="dark"] .l1-profile-divider,
html[data-l1-theme="dark"] .l1-menu-divider {
    border-color: rgba(255, 255, 255, .13) !important;
}
/* ---------- Dark theme visual polish pass ---------- */
html[data-l1-theme="dark"] .l1-section,
html[data-l1-theme="dark"] .l1-home-section,
html[data-l1-theme="dark"] .l1-cms-body .l1-section {
    background: var(--l1-bg) !important;
}

html[data-l1-theme="dark"] .l1-section-alt,
html[data-l1-theme="dark"] .l1-cms-body .l1-section-alt {
    background: var(--l1-bg-2) !important;
}

html[data-l1-theme="dark"] .l1-feature,
html[data-l1-theme="dark"] .l1-feature-row,
html[data-l1-theme="dark"] .l1-feature-guide,
html[data-l1-theme="dark"] .l1-feature-hero-link,
html[data-l1-theme="dark"] .l1-plan-fit-card,
html[data-l1-theme="dark"] .l1-workload-row,
html[data-l1-theme="dark"] .l1-confidence-card,
html[data-l1-theme="dark"] .l1-location,
html[data-l1-theme="dark"] .l1-stat-card,
html[data-l1-theme="dark"] .l1-blog-card,
html[data-l1-theme="dark"] .l1-tool-card,
html[data-l1-theme="dark"] .card.l1-feature {
    --bs-card-bg: rgba(255, 255, 255, .035);
    --bs-card-color: var(--l1-text);
    background: rgba(255, 255, 255, .035) !important;
    border-color: rgba(255, 255, 255, .13) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16) !important;
    color: var(--l1-text) !important;
}

html[data-l1-theme="dark"] .l1-feature:hover,
html[data-l1-theme="dark"] .l1-feature-row:hover,
html[data-l1-theme="dark"] .card.l1-feature:hover {
    background: rgba(255, 255, 255, .055) !important;
    border-color: rgba(213, 216, 221, .36) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22) !important;
}

html[data-l1-theme="dark"] .l1-feature h3,
html[data-l1-theme="dark"] .l1-feature-row h3,
html[data-l1-theme="dark"] .l1-feature-guide h2,
html[data-l1-theme="dark"] .l1-plan-fit-card h3,
html[data-l1-theme="dark"] .card.l1-feature h3 {
    color: var(--l1-text) !important;
}

html[data-l1-theme="dark"] .l1-feature p,
html[data-l1-theme="dark"] .l1-feature-row p,
html[data-l1-theme="dark"] .l1-feature-guide p,
html[data-l1-theme="dark"] .l1-plan-fit-card p,
html[data-l1-theme="dark"] .card.l1-feature p {
    color: var(--l1-text-muted) !important;
}

html[data-l1-theme="dark"] .l1-feature-icon,
html[data-l1-theme="dark"] .l1-feature-row-icon,
html[data-l1-theme="dark"] .l1-confidence-icon,
html[data-l1-theme="dark"] .l1-workload-icon,
html[data-l1-theme="dark"] .l1-proof-icon {
    background: rgba(188, 193, 201, .14) !important;
    border-color: rgba(213, 216, 221, .22) !important;
    color: var(--l1-primary-dark) !important;
}

html[data-l1-theme="dark"] .l1-pricing-handoff {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html[data-l1-theme="dark"] .l1-pricing-summary div {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .13) !important;
}

html[data-l1-theme="dark"] .l1-profile-toggle .l1-profile-avatar,
html[data-l1-theme="dark"] .l1-profile-toggle .l1-profile-avatar-blank {
    background: rgba(188, 193, 201, .12) !important;
    border: 1px solid rgba(213, 216, 221, .42) !important;
    box-shadow: none !important;
}

html[data-l1-theme="dark"] .l1-profile-toggle .l1-profile-avatar-blank {
    display: grid;
    place-items: center;
}

html[data-l1-theme="dark"] .l1-profile-toggle .l1-profile-avatar-blank i {
    color: var(--l1-brand-strong) !important;
}

html[data-l1-theme="dark"] .l1-nav-profile .l1-profile-toggle:hover,
html[data-l1-theme="dark"] .l1-nav-profile .l1-profile-toggle:focus,
html[data-l1-theme="dark"] .l1-nav-profile .l1-profile-toggle.show,
html[data-l1-theme="dark"] .l1-nav-profile .l1-profile-toggle[aria-expanded="true"] {
    background: rgba(188, 193, 201, .1) !important;
}

/* Compact marketing navbar profile avatar */
.l1-nav-profile .l1-profile-toggle {
    height: 34px !important;
    min-height: 0 !important;
    padding: 3px !important;
    width: 34px !important;
}

.l1-profile-toggle .l1-profile-avatar,
.l1-profile-toggle .l1-profile-avatar-blank,
html[data-l1-theme="dark"] .l1-profile-toggle .l1-profile-avatar,
html[data-l1-theme="dark"] .l1-profile-toggle .l1-profile-avatar-blank {
    height: 28px !important;
    max-height: 28px !important;
    width: 28px !important;
}

.l1-profile-toggle .l1-profile-avatar-blank i,
html[data-l1-theme="dark"] .l1-profile-toggle .l1-profile-avatar-blank i {
    font-size: .9rem !important;
}

.l1-profile-card .l1-profile-avatar-blank i,
html[data-l1-theme="dark"] .l1-profile-card .l1-profile-avatar-blank i {
    font-size: 1.2rem !important;
}

.l1-profile-card {
    padding: .8rem .8rem .7rem;
}

.l1-profile-card-avatar,
html[data-l1-theme="dark"] .l1-profile-card-avatar {
    height: 44px !important;
    margin-bottom: .55rem;
    max-height: 44px !important;
    width: 44px !important;
}

/* Contained dark homepage hero */
html[data-l1-theme="dark"] .l1-home-hero.l1-hero,
html[data-l1-theme="dark"] body:not(.auth-body) .l1-hero#top {
    background-color: var(--l1-hero-ground) !important;
    background-image:
        radial-gradient(circle at 18% 18%, rgba(var(--l1-hero-glow-rgb), .22), transparent 30rem),
        radial-gradient(circle at 88% 20%, rgba(55, 212, 165, .10), transparent 34rem),
        linear-gradient(180deg, rgba(var(--l1-hero-scrim-top-rgb), .42) 0%, rgba(var(--l1-hero-scrim-bottom-rgb), .68) 100%),
        url("../img/world-map-outline.04b03780e8d0.svg") !important;
    background-position: center, center, center, center 48% !important;
    background-repeat: no-repeat !important;
    background-size: cover, cover, cover, min(1280px, 112vw) auto !important;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
    margin: 0 auto clamp(2.5rem, 4vw, 4rem);
    overflow: hidden;
    width: min(calc(100% - clamp(2rem, 7vw, 8rem)), 1680px);
}

html[data-l1-theme="dark"] .l1-home-hero.l1-hero::before,
html[data-l1-theme="dark"] .l1-home-hero.l1-hero::after,
html[data-l1-theme="dark"] body:not(.auth-body) .l1-hero#top::before,
html[data-l1-theme="dark"] body:not(.auth-body) .l1-hero#top::after {
    content: none !important;
    display: none !important;
}

html[data-l1-theme="dark"] .l1-home-hero .l1-container,
html[data-l1-theme="dark"] .l1-hero#top .l1-container {
    max-width: 1280px;
}

html[data-l1-theme="dark"] .l1-home-hero .l1-hero-title,
html[data-l1-theme="dark"] .l1-hero#top .l1-hero-title {
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .18);
}

html[data-l1-theme="dark"] .l1-home-hero .l1-hero-sub,
html[data-l1-theme="dark"] .l1-hero#top .l1-hero-sub {
    color: rgba(248, 250, 252, .82);
}

html[data-l1-theme="dark"] .l1-home-hero .l1-hero-stats,
html[data-l1-theme="dark"] .l1-hero#top .l1-hero-stats {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}

html[data-l1-theme="dark"] .l1-home-hero .l1-btn-ghost,
html[data-l1-theme="dark"] .l1-hero#top .l1-btn-ghost {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .16);
    color: rgba(248, 250, 252, .9);
}

html[data-l1-theme="dark"] .l1-home-hero .l1-btn-ghost:hover,
html[data-l1-theme="dark"] .l1-hero#top .l1-btn-ghost:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(213, 216, 221, .36);
    color: #ffffff;
}

@media (max-width: 991.98px) {
    html[data-l1-theme="dark"] .l1-home-hero.l1-hero,
    html[data-l1-theme="dark"] body:not(.auth-body) .l1-hero#top {
        border-radius: 16px;
        width: min(calc(100% - 1.5rem), 1680px);
    }
}

@media (max-width: 575.98px) {
    html[data-l1-theme="dark"] .l1-home-hero.l1-hero,
    html[data-l1-theme="dark"] body:not(.auth-body) .l1-hero#top {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        margin-bottom: 2.25rem;
        width: 100%;
    }
}

/* Dark public utility pages and checkout polish */
html[data-l1-theme="dark"] .l1-page-hero,
html[data-l1-theme="dark"] .l1-contact-hero,
html[data-l1-theme="dark"] .l1-public-rendered-page .l1-page-hero,
html[data-l1-theme="dark"] .l1-cms-body .l1-page-hero {
    background-color: var(--l1-hero-ground) !important;
    background-image:
        radial-gradient(circle at 18% 16%, rgba(var(--l1-hero-glow-rgb), .20), transparent 30rem),
        linear-gradient(180deg, rgba(var(--l1-hero-scrim-top-rgb), .48) 0%, rgba(var(--l1-hero-scrim-bottom-rgb), .72) 100%),
        url("../img/world-map-outline.04b03780e8d0.svg") !important;
    background-position: center, center, center 48% !important;
    background-repeat: no-repeat !important;
    background-size: cover, cover, min(1280px, 116vw) auto !important;
    color: #ffffff !important;
}

html[data-l1-theme="dark"] .l1-page-hero h1,
html[data-l1-theme="dark"] .l1-contact-hero h1,
html[data-l1-theme="dark"] .l1-page-hero p,
html[data-l1-theme="dark"] .l1-contact-hero p {
    color: inherit !important;
}

html[data-l1-theme="dark"] .l1-page-hero p,
html[data-l1-theme="dark"] .l1-contact-hero p {
    color: rgba(248, 250, 252, .82) !important;
}

html[data-l1-theme="dark"] .l1-lg-panel,
html[data-l1-theme="dark"] .l1-lg-output,
html[data-l1-theme="dark"] .l1-contact-card,
html[data-l1-theme="dark"] .l1-contact-meta > div,
html[data-l1-theme="dark"] .l1-accordion .l1-accordion-item,
html[data-l1-theme="dark"] .l1-accordion .l1-accordion-button,
html[data-l1-theme="dark"] .l1-faq-handoff,
html[data-l1-theme="dark"] .l1-public-rendered-page :where(.l1-feature, .l1-card, .l1-content-card) {
    background: rgba(255, 255, 255, .045) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: none !important;
    color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-lg-panel h2,
html[data-l1-theme="dark"] .l1-lg-panel strong,
html[data-l1-theme="dark"] .l1-contact-card h2,
html[data-l1-theme="dark"] .l1-contact-card label,
html[data-l1-theme="dark"] .l1-contact-meta strong,
html[data-l1-theme="dark"] .l1-faq .l1-accordion-button,
html[data-l1-theme="dark"] .l1-accordion .l1-accordion-button {
    color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-lg-panel p,
html[data-l1-theme="dark"] .l1-lg-help,
html[data-l1-theme="dark"] .l1-contact-card p,
html[data-l1-theme="dark"] .l1-contact-meta span,
html[data-l1-theme="dark"] .l1-contact-meta a,
html[data-l1-theme="dark"] .l1-faq .l1-accordion-body,
html[data-l1-theme="dark"] .l1-accordion .l1-accordion-body {
    color: #b6bcc5 !important;
}

html[data-l1-theme="dark"] .l1-accordion .l1-accordion-button:hover,
html[data-l1-theme="dark"] .l1-accordion .l1-accordion-button:not(.is-collapsed) {
    background: rgba(160, 167, 178, .16) !important;
    color: #ffffff !important;
}

html[data-l1-theme="dark"] .l1-accordion .l1-accordion-body {
    background: rgba(255, 255, 255, .025) !important;
    border-top: 1px solid rgba(255, 255, 255, .1) !important;
}

html[data-l1-theme="dark"] .l1-lg-form :where(input, select, textarea),
html[data-l1-theme="dark"] .l1-contact-card :where(input, select, textarea),
html[data-l1-theme="dark"] .l1-checkout-page :where(input, select, textarea, .form-control, .form-select) {
    background-color: rgba(255, 255, 255, .065) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-lg-form :where(input, select, textarea)::placeholder,
html[data-l1-theme="dark"] .l1-contact-card :where(input, select, textarea)::placeholder,
html[data-l1-theme="dark"] .l1-checkout-page :where(input, textarea, .form-control)::placeholder {
    color: #8d96a3 !important;
}

html[data-l1-theme="dark"] .l1-lg-group-pill,
html[data-l1-theme="dark"] .l1-doc-card-kicker,
html[data-l1-theme="dark"] .l1-lg-status {
    background: rgba(160, 167, 178, .18) !important;
    border-color: rgba(213, 216, 221, .28) !important;
    color: #e3e5e8 !important;
}

html[data-l1-theme="dark"] .l1-contact-page .l1-contact-hero {
    min-height: 0;
    padding-bottom: clamp(4rem, 7vw, 7rem);
    padding-top: clamp(4rem, 7vw, 7rem);
}

html[data-l1-theme="dark"] .l1-checkout-page {
    color: #f8fafc;
    margin-left: auto;
    margin-right: auto;
    max-width: 1180px;
    padding: clamp(1rem, 2vw, 1.5rem);
}

html[data-l1-theme="dark"] .l1-checkout-page .l1-client-page-header,
html[data-l1-theme="dark"] .l1-checkout-page .card,
html[data-l1-theme="dark"] .l1-checkout-page .list-group-item,
html[data-l1-theme="dark"] .l1-checkout-page .border,
html[data-l1-theme="dark"] .l1-checkout-page [data-payment-provider-selector] {
    background: rgba(255, 255, 255, .045) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: none !important;
    color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-checkout-page [aria-label="Checkout progress"] {
    display: none !important;
}

html[data-l1-theme="dark"] .l1-checkout-page .card-body {
    padding: 1rem !important;
}

html[data-l1-theme="dark"] .l1-checkout-page .text-body-secondary,
html[data-l1-theme="dark"] .l1-checkout-page .text-muted {
    color: #b6bcc5 !important;
}

html[data-l1-theme="dark"] .l1-checkout-page [data-payment-provider-selector] > .table-responsive {
    display: none !important;
}

html[data-l1-theme="dark"] .l1-checkout-page [data-payment-provider-selector] .card-header {
    border-bottom-color: rgba(255, 255, 255, .1) !important;
    padding: .85rem 1rem !important;
}

html[data-l1-theme="dark"] .l1-checkout-page .list-group-item.active {
    background: rgba(160, 167, 178, .22) !important;
    border-color: rgba(213, 216, 221, .36) !important;
    color: #ffffff !important;
}
/* 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 {
    gap: 1rem;
}

.l1-tool-logo {
    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-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;
}

html[data-l1-theme="dark"] .l1-tool-logo-light {
    display: none;
}

html[data-l1-theme="dark"] .l1-tool-logo-dark {
    display: block !important;
}

html[data-l1-theme="dark"] .l1-tool-card span {
    color: #c8ccd2;
}
/* Pricing table dark-mode contrast fix. */
html[data-l1-theme="dark"] .l1-compare.table {
    --bs-table-bg: transparent;
    --bs-table-color: #f8fafc;
    --bs-table-hover-bg: rgba(255, 255, 255, .055);
    --bs-table-hover-color: #f8fafc;
    --bs-table-border-color: rgba(255, 255, 255, .12);
    background: transparent !important;
    color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-compare.table > :not(caption) > * > * {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-compare thead th {
    background: #25292e !important;
    color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-compare thead th.l1-compare-featured {
    background: linear-gradient(180deg, rgba(160, 167, 178, .24), rgba(55, 212, 165, .07)) !important;
    color: #e3e5e8 !important;
}

html[data-l1-theme="dark"] .l1-compare th:first-child,
html[data-l1-theme="dark"] .l1-compare td:first-child {
    color: #c8ccd2 !important;
}

html[data-l1-theme="dark"] .l1-compare tbody tr:hover td {
    background-color: rgba(255, 255, 255, .055) !important;
}

html[data-l1-theme="dark"] .l1-compare .l1-compare-check {
    color: #bcc1c9 !important;
}

html[data-l1-theme="dark"] .l1-compare .l1-compare-x {
    color: #9ca3af !important;
}

/* Homepage rhythm: keep the marketing story dense without making it feel cramped. */
.l1-home-hero.l1-hero,
body:not(.auth-body) .l1-hero#top {
    margin-bottom: clamp(1.35rem, 2.4vw, 2.25rem);
}

.l1-home-hero + .l1-section {
    padding-top: clamp(1.75rem, 3vw, 2.75rem);
}

.l1-home-hero ~ .l1-section {
    padding-bottom: clamp(2.65rem, 4.2vw, 4rem);
    padding-top: clamp(2.65rem, 4.2vw, 4rem);
}

.l1-home-hero ~ .l1-section .l1-section-head {
    margin-bottom: clamp(1.15rem, 2vw, 1.65rem);
}

.l1-home-hero ~ .l1-section .l1-section-title {
    font-size: clamp(1.8rem, 2.55vw, 2.4rem);
    line-height: 1.12;
}

.l1-home-hero ~ .l1-section .l1-section-sub {
    line-height: 1.55;
    margin-bottom: 0;
    max-width: 690px;
}

.l1-home-hero ~ .l1-section .l1-narrow-grid {
    max-width: 900px;
    row-gap: 1rem;
}

.l1-home-hero ~ .l1-section .l1-feature-row {
    gap: .95rem;
    padding: clamp(1rem, 1.4vw, 1.25rem);
}

.l1-home-hero ~ .l1-section .l1-feature-row-icon {
    height: 2.55rem;
    width: 2.55rem;
}

.l1-home-hero ~ .l1-section .l1-feature-row-body h3 {
    margin-bottom: .25rem;
}

.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 !important;
}

@media (max-width: 767.98px) {
    .l1-home-hero + .l1-section,
    .l1-home-hero ~ .l1-section {
        padding-bottom: 2.5rem;
        padding-top: 2.5rem;
    }
}

html[data-l1-theme="light"] .l1-home-hero.l1-hero,
html[data-l1-theme="light"] body:not(.auth-body) .l1-hero#top,
html[data-l1-theme="dark"] .l1-home-hero.l1-hero,
html[data-l1-theme="dark"] body:not(.auth-body) .l1-hero#top {
    margin: 0 auto clamp(1.35rem, 2.4vw, 2.25rem);
}

@media (max-width: 575.98px) {
    html[data-l1-theme="light"] .l1-home-hero.l1-hero,
    html[data-l1-theme="light"] body:not(.auth-body) .l1-hero#top,
    html[data-l1-theme="dark"] .l1-home-hero.l1-hero,
    html[data-l1-theme="dark"] body:not(.auth-body) .l1-hero#top {
        margin-bottom: 1.75rem;
    }
}

/* 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 {
    margin-left: auto;
    margin-right: auto;
    max-width: min(100%, 920px);
    text-align: center;
    width: 100%;
}

.l1-public-rendered-page > .l1-page-hero p {
    max-width: min(100%, 760px);
}

/* 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;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: min(100%, 760px);
    text-align: center;
    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;
}

/* Public hero consistency and homepage pricing handoff cleanup. */
.l1-pricing-handoff,
html[data-l1-theme="light"] .l1-pricing-handoff,
html[data-l1-theme="dark"] .l1-pricing-handoff {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.l1-pricing-summary div,
html[data-l1-theme="light"] .l1-pricing-summary div,
html[data-l1-theme="dark"] .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-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: center !important;
    display: flex !important;
    min-height: clamp(17.5rem, 22vw, 21rem) !important;
    padding: clamp(4.8rem, 5.8vw, 6.35rem) 0 clamp(2.35rem, 3vw, 3.1rem) !important;
}

.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-features-hero .l1-feature-hero-grid,
.l1-page-hero .l1-builder-actions,
.l1-builder-hero:not(.l1-checkout-hero) .l1-builder-actions {
    margin-top: clamp(1rem, 1.7vw, 1.35rem);
}

@media (max-width: 575.98px) {
    .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 {
        min-height: 15.5rem !important;
        padding: 4.55rem 0 2.2rem !important;
    }
}

/* Homepage storytelling polish: richer workload cards and clearer launch flow. */
.l1-home-hero ~ #use-cases .l1-home-workloads .l1-feature,
.l1-home-hero ~ #how-it-works .l1-home-step-grid .l1-feature,
body:not(.auth-body) .l1-hero#top ~ #use-cases .l1-home-workloads .l1-feature,
body:not(.auth-body) .l1-hero#top ~ #how-it-works .l1-home-step-grid .l1-feature {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.l1-home-hero ~ #use-cases .l1-home-workloads .l1-feature::before,
body:not(.auth-body) .l1-hero#top ~ #use-cases .l1-home-workloads .l1-feature::before {
    background: linear-gradient(90deg, var(--l1-primary), rgba(20, 184, 166, .8));
    content: "";
    height: 3px;
    inset: 0 0 auto;
    position: absolute;
}

.l1-home-hero ~ #use-cases .l1-home-workloads .l1-feature::after,
body:not(.auth-body) .l1-hero#top ~ #use-cases .l1-home-workloads .l1-feature::after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
        radial-gradient(ellipse at 100% 0%, rgba(165, 172, 182, .16), transparent 56%);
    background-size: 42px 42px, 42px 42px, auto;
    content: "";
    inset: 0;
    opacity: .42;
    pointer-events: none;
    position: absolute;
}

.l1-home-hero ~ #use-cases .l1-home-workloads .l1-feature > *,
.l1-home-hero ~ #how-it-works .l1-home-step-grid .l1-feature > *,
body:not(.auth-body) .l1-hero#top ~ #use-cases .l1-home-workloads .l1-feature > *,
body:not(.auth-body) .l1-hero#top ~ #how-it-works .l1-home-step-grid .l1-feature > * {
    position: relative;
    z-index: 1;
}

.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 ~ #plans .l1-pricing-summary,
body:not(.auth-body) .l1-hero#top ~ #plans .l1-pricing-summary {
    border: 1px solid var(--l1-border);
    border-radius: 14px;
    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) !important;
    padding: .8rem .1rem !important;
}

.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 !important;
}

.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;
}

.l1-home-hero ~ #how-it-works .l1-home-step-grid .l1-feature,
body:not(.auth-body) .l1-hero#top ~ #how-it-works .l1-home-step-grid .l1-feature {
    padding-top: 4.25rem;
}

.l1-home-hero ~ #how-it-works .l1-home-step-grid .l1-feature::before,
body:not(.auth-body) .l1-hero#top ~ #how-it-works .l1-home-step-grid .l1-feature::before {
    align-items: center;
    background: var(--l1-primary-soft);
    border: 1px solid rgba(165, 172, 182, .28);
    border-radius: 999px;
    color: var(--l1-primary-dark);
    content: "0" counter(l1-launch-step);
    counter-increment: l1-launch-step;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    height: 2rem;
    justify-content: center;
    left: 1.35rem;
    letter-spacing: .04em;
    position: absolute;
    top: 1.25rem;
    width: 3rem;
    z-index: 2;
}

.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;
}

html[data-l1-theme="dark"] .l1-home-hero ~ #plans .l1-pricing-summary,
html[data-l1-theme="dark"] body:not(.auth-body) .l1-hero#top ~ #plans .l1-pricing-summary {
    background:
        linear-gradient(135deg, rgba(188, 193, 201, .16), transparent 48%),
        rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .13);
}

@media (max-width: 767.98px) {
    .l1-home-hero ~ #how-it-works .l1-home-step-grid .l1-feature,
    body:not(.auth-body) .l1-hero#top ~ #how-it-works .l1-home-step-grid .l1-feature {
        padding-top: 4rem;
    }
}
/* Pricing page and launch CTA refinement pass. */
.l1-pricing-page .l1-pricing-hero {
    text-align: center;
}

.l1-pricing-page .l1-pricing-hero .l1-container {
    max-width: 940px;
}

.l1-pricing-page .l1-pricing-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: center;
    margin: 1.15rem auto 0;
}

.l1-pricing-page .l1-pricing-proof-row span {
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: rgba(255, 255, 255, .9);
    display: inline-flex;
    font-size: .86rem;
    font-weight: 750;
    gap: .45rem;
    letter-spacing: 0;
    padding: .48rem .72rem;
}

.l1-pricing-page .l1-pricing-proof-row i {
    color: #45e0bf;
}

.l1-pricing-page .l1-commitment-strip {
    border: 1px solid rgba(255, 255, 255, .16);
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

html[data-l1-theme="light"] .l1-pricing-page .l1-pricing-proof-row span {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(138, 148, 161, .18);
    color: #1f2937;
}

html[data-l1-theme="light"] .l1-pricing-page .l1-commitment-strip {
    background: rgba(255, 255, 255, .74);
    border-color: rgba(138, 148, 161, .2);
    color: #1f2937;
}

html[data-l1-theme="light"] .l1-pricing-page .l1-commitment-strip button {
    color: #475569;
}

html[data-l1-theme="light"] .l1-pricing-page .l1-commitment-strip button:hover {
    background: rgba(138, 148, 161, .08);
    color: #111827;
}

html[data-l1-theme="light"] .l1-pricing-page .l1-commitment-strip button.is-active {
    background: #111827;
    color: #ffffff;
}

.l1-pricing-page .l1-pricing-plans-section {
    padding-top: 3rem !important;
}

.l1-pricing-page .l1-pricing-plan-row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.l1-pricing-page .l1-plan {
    border-radius: 14px;
    gap: .45rem;
    overflow: hidden;
    padding: 1.45rem 1.25rem !important;
}

.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 !important;
    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;
}

html[data-l1-theme="dark"] .l1-pricing-page .l1-plan {
    background: linear-gradient(180deg, rgba(255, 255, 255, .046), rgba(255, 255, 255, .024));
    border-color: rgba(255, 255, 255, .13);
}

html[data-l1-theme="light"] .l1-pricing-page .l1-plan {
    background: #ffffff;
    border-color: #dde4ef;
}

.l1-pricing-page .l1-plan-featured {
    border-color: rgba(165, 172, 182, .55) !important;
}

.l1-pricing-page .l1-plan-badge {
    top: .9rem;
    transform: none;
    left: auto;
    right: .9rem;
}

.l1-pricing-page .l1-buying-confidence {
    gap: .85rem;
    margin-top: 1.25rem;
}

.l1-pricing-page .l1-confidence-card {
    align-items: flex-start;
    display: grid;
    gap: .85rem;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 1rem;
}

.l1-pricing-page .l1-os-card {
    grid-template-columns: 1fr;
}

.l1-pricing-page .l1-confidence-card h3 {
    font-size: .98rem;
    margin-bottom: .28rem;
}

.l1-pricing-page .l1-confidence-card p {
    font-size: .9rem;
    line-height: 1.5;
}

.l1-pricing-page .l1-custom-build-note {
    align-items: center;
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: 14px;
    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;
}

html[data-l1-theme="dark"] .l1-pricing-page .l1-custom-build-note {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .13);
}

.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-compare-wrap {
    border-radius: 14px;
}

.l1-pricing-page .l1-compare th,
.l1-pricing-page .l1-compare td {
    padding: .85rem 1rem;
}

/* Shared launch CTA reset: clean card, no map/grid treatment. */
.l1-cta-card,
html[data-l1-theme="light"] .l1-cta-card,
html[data-l1-theme="dark"] .l1-cta-card {
    --bs-card-bg: transparent;
    align-items: center;
    background-image: none !important;
    border-radius: 14px !important;
    display: grid;
    gap: .25rem 1.35rem;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    margin-left: auto;
    margin-right: auto;
    max-width: 980px;
    min-height: 0 !important;
    overflow: hidden;
    padding: clamp(1.4rem, 2.8vw, 2rem) clamp(1.25rem, 3vw, 2.1rem) !important;
    position: relative;
    text-align: left;
}

html[data-l1-theme="light"] .l1-cta-card {
    background: linear-gradient(135deg, #ffffff, #f7f9ff) !important;
    border: 1px solid #dbe3f0 !important;
    box-shadow: 0 16px 46px rgba(15, 23, 42, .08) !important;
    color: #111827 !important;
}

html[data-l1-theme="dark"] .l1-cta-card,
.l1-cta-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .026)) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: none !important;
    color: #f8fafc !important;
}

.l1-cta-card::before,
html[data-l1-theme="light"] .l1-cta-card::before,
html[data-l1-theme="dark"] .l1-cta-card::before {
    background: linear-gradient(180deg, var(--l1-primary), #14b8a6) !important;
    content: "";
    inset: 0 auto 0 0;
    opacity: 1 !important;
    pointer-events: none;
    position: absolute;
    width: 4px;
    z-index: 1;
}

.l1-cta-card::after,
html[data-l1-theme="light"] .l1-cta-card::after,
html[data-l1-theme="dark"] .l1-cta-card::after,
.l1-cta-glow,
html[data-l1-theme="light"] .l1-cta-glow,
html[data-l1-theme="dark"] .l1-cta-glow {
    display: none !important;
}

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

.l1-cta-card h2,
html[data-l1-theme="light"] .l1-cta-card h2,
html[data-l1-theme="dark"] .l1-cta-card h2 {
    color: inherit !important;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    grid-column: 1;
    letter-spacing: 0;
    line-height: 1.12;
    margin: 0 0 .45rem;
    max-width: 620px;
}

.l1-cta-card p,
html[data-l1-theme="light"] .l1-cta-card p,
html[data-l1-theme="dark"] .l1-cta-card p {
    color: var(--l1-text-muted) !important;
    font-size: .98rem;
    grid-column: 1;
    line-height: 1.55;
    margin: 0;
    max-width: 660px;
}

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

.l1-cta-card .l1-btn-primary,
html[data-l1-theme="light"] .l1-cta-card .l1-btn-primary,
html[data-l1-theme="dark"] .l1-cta-card .l1-btn-primary {
    background: var(--l1-primary) !important;
    border-color: var(--l1-primary) !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.l1-cta-card .l1-btn-ghost,
.l1-cta-card .btn-outline-secondary,
html[data-l1-theme="light"] .l1-cta-card .l1-btn-ghost,
html[data-l1-theme="light"] .l1-cta-card .btn-outline-secondary,
html[data-l1-theme="dark"] .l1-cta-card .l1-btn-ghost,
html[data-l1-theme="dark"] .l1-cta-card .btn-outline-secondary {
    background: transparent !important;
    border-color: var(--l1-border-strong) !important;
    color: var(--l1-text) !important;
}

@media (max-width: 767.98px) {
    .l1-cta-card,
    html[data-l1-theme="light"] .l1-cta-card,
    html[data-l1-theme="dark"] .l1-cta-card {
        grid-template-columns: 1fr;
        text-align: left;
    }

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

    .l1-pricing-page .l1-custom-build-note {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .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;
    }
}


/* ---- 14-enhancements.css ---- */
/* 14-enhancements.css - Recent public-site enhancements
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* ---------- Public site enhancements ---------- */
.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);
}

.l1-breadcrumbs a {
    color: var(--l1-text-muted);
}

.l1-breadcrumbs a:hover {
    color: var(--l1-primary-2);
}

/* Same measure as the heading block above it. .l1-faq-handoff is capped at 920px
   and centred (03-pricing-plans.css) 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;
    gap: 1rem;
    margin-inline: auto;
    max-width: 920px;
}

.l1-faq-item {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
}

.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;
    color: var(--l1-text-muted);
}

.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;
    margin-top: auto;
    font-size: 0.8125rem;
    color: var(--l1-text-dim);
}

.l1-testimonial-quote-mark {
    font-size: 1rem;
    color: var(--l1-primary);
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

.l1-testimonial-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--l1-primary-soft);
    color: var(--l1-primary-dark);
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

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

.l1-bento-card-link:hover {
    transform: translateY(-2px);
    border-color: var(--l1-border-strong);
    color: inherit;
}

html[data-l1-theme="light"] .l1-faq-item,
html[data-l1-theme="light"] .l1-testimonial-card {
    background: #fff;
}

/* Footer: light theme must not keep dark-footer grey text/icons on a pale bg. */
html[data-l1-theme="light"] .l1-footer {
    color: var(--l1-text-muted);
    border-top: 1px solid var(--l1-border);
}

html[data-l1-theme="light"] .l1-footer-title,
html[data-l1-theme="light"] .l1-footer-bottom,
html[data-l1-theme="light"] .l1-footer-bottom a {
    color: var(--l1-text);
}

html[data-l1-theme="light"] .l1-footer-tagline,
html[data-l1-theme="light"] .l1-footer-list a,
html[data-l1-theme="light"] .l1-footer-legal {
    color: var(--l1-text-muted);
}

html[data-l1-theme="light"] .l1-footer-list a:hover,
html[data-l1-theme="light"] .l1-footer-bottom a:hover {
    color: var(--l1-primary-dark);
}

html[data-l1-theme="light"] .l1-footer-top,
html[data-l1-theme="light"] .l1-footer-bottom {
    border-color: var(--l1-border);
}

html[data-l1-theme="light"] .l1-social a {
    background: #fff;
    border-color: var(--l1-border-strong, var(--l1-border));
    color: var(--l1-text);
}

html[data-l1-theme="light"] .l1-social a:hover {
    background: var(--l1-primary);
    border-color: var(--l1-primary);
    color: #fff;
}

/* ---------- Marketing refresh: dark homepage hero in light theme ----------
   The inner pages (.l1-page-hero) and the dark-theme homepage hero already use
   this deep-indigo treatment (see 13-dark-polish.css). The light-theme homepage
   hero was the one holdout still on a pale card; this brings it in line so every
   marketing page opens on the same dark, full-bleed hero, matching the rest of
   the site. */
html[data-l1-theme="light"] .l1-home-hero.l1-hero,
html[data-l1-theme="light"] body:not(.auth-body) .l1-hero#top {
    background-color: var(--l1-hero-ground) !important;
    /* Diagonal light-beam streaks (the two 65deg bands): soft crossing bands of
       brand color over the dark ground, layered between the corner glows and the
       base map/fade so they read as texture rather than fighting the headline. */
    background-image:
        radial-gradient(circle at 18% 18%, rgba(var(--l1-hero-glow-rgb), .22), transparent 30rem),
        radial-gradient(circle at 88% 20%, rgba(55, 212, 165, .10), transparent 34rem),
        linear-gradient(65deg, transparent 36%, rgba(213, 216, 221, .12) 45%, rgba(213, 216, 221, .05) 50%, transparent 60%),
        linear-gradient(65deg, transparent 60%, rgba(45, 212, 191, .09) 70%, transparent 82%),
        linear-gradient(180deg, rgba(var(--l1-hero-scrim-top-rgb), .42) 0%, rgba(var(--l1-hero-scrim-bottom-rgb), .68) 100%),
        url("../img/world-map-outline.04b03780e8d0.svg") !important;
    background-position: center, center, center, center, center, center 48% !important;
    background-repeat: no-repeat !important;
    background-size: cover, cover, cover, cover, cover, min(1280px, 112vw) auto !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34) !important;
}

html[data-l1-theme="light"] .l1-home-hero.l1-hero::before,
html[data-l1-theme="light"] .l1-home-hero.l1-hero::after,
html[data-l1-theme="light"] body:not(.auth-body) .l1-hero#top::before,
html[data-l1-theme="light"] body:not(.auth-body) .l1-hero#top::after {
    content: none !important;
    display: none !important;
}

html[data-l1-theme="light"] .l1-home-hero .l1-hero-title,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-title {
    color: #ffffff !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .18);
}

html[data-l1-theme="light"] .l1-home-hero .l1-hero-sub,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-sub {
    color: rgba(248, 250, 252, .82) !important;
}

html[data-l1-theme="light"] .l1-home-hero .l1-hero-stats,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-stats {
    background: rgba(255, 255, 255, .055) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: none !important;
}

html[data-l1-theme="light"] .l1-home-hero .l1-hero-stats strong,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-stats strong {
    color: #ffffff !important;
}

html[data-l1-theme="light"] .l1-home-hero .l1-hero-stats span,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-stats span {
    color: rgba(248, 250, 252, .72) !important;
}

html[data-l1-theme="light"] .l1-home-hero .l1-hero-stats-divider,
html[data-l1-theme="light"] .l1-hero#top .l1-hero-stats-divider {
    background: rgba(255, 255, 255, .2) !important;
}

html[data-l1-theme="light"] .l1-home-hero .l1-link-arrow,
html[data-l1-theme="light"] .l1-hero#top .l1-link-arrow {
    color: rgba(255, 255, 255, .72) !important;
    font-weight: 700;
}

html[data-l1-theme="light"] .l1-home-hero .l1-link-arrow:hover,
html[data-l1-theme="light"] .l1-hero#top .l1-link-arrow:hover {
    color: #ffffff !important;
}

html[data-l1-theme="light"] .l1-home-hero .l1-btn-ghost,
html[data-l1-theme="light"] .l1-hero#top .l1-btn-ghost {
    background: rgba(255, 255, 255, .055) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: rgba(248, 250, 252, .9) !important;
}

html[data-l1-theme="light"] .l1-home-hero .l1-btn-ghost:hover,
html[data-l1-theme="light"] .l1-hero#top .l1-btn-ghost:hover {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(213, 216, 221, .36) !important;
    color: #ffffff !important;
}

/* ---------- Marketing refresh: full-bleed dark CTA band ----------
   Matches the hero treatment above instead of a plain bordered card on a white
   section — a dark CTA band ahead of the footer. */
.l1-cta-section,
html[data-l1-theme="light"] .l1-cta-section,
html[data-l1-theme="dark"] .l1-cta-section {
    background-color: var(--l1-hero-ground) !important;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(var(--l1-hero-glow-rgb), .20), transparent 32rem),
        radial-gradient(circle at 85% 80%, rgba(55, 212, 165, .10), transparent 34rem),
        linear-gradient(65deg, transparent 40%, rgba(213, 216, 221, .10) 50%, transparent 62%) !important;
}

.l1-cta-card,
html[data-l1-theme="light"] .l1-cta-card,
html[data-l1-theme="dark"] .l1-cta-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.l1-cta-card::before,
html[data-l1-theme="light"] .l1-cta-card::before,
html[data-l1-theme="dark"] .l1-cta-card::before {
    content: none !important;
    display: none !important;
}

.l1-cta-card p,
html[data-l1-theme="light"] .l1-cta-card p,
html[data-l1-theme="dark"] .l1-cta-card p {
    color: rgba(248, 250, 252, .78) !important;
}

.l1-cta-card .l1-btn-ghost,
.l1-cta-card .btn-outline-secondary,
html[data-l1-theme="light"] .l1-cta-card .l1-btn-ghost,
html[data-l1-theme="light"] .l1-cta-card .btn-outline-secondary,
html[data-l1-theme="dark"] .l1-cta-card .l1-btn-ghost,
html[data-l1-theme="dark"] .l1-cta-card .btn-outline-secondary {
    background: rgba(255, 255, 255, .055) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: rgba(248, 250, 252, .92) !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. */
.l1-cta-card .l1-cta-code,
html[data-l1-theme="light"] .l1-cta-card .l1-cta-code,
html[data-l1-theme="dark"] .l1-cta-card .l1-cta-code {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    color: #ffffff !important;
}

.l1-cta-card .l1-btn-ghost:hover,
.l1-cta-card .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(213, 216, 221, .36) !important;
    color: #ffffff !important;
}

/* ---------- Marketing refresh: sharper button corners ----------
   07-refinement.css and 10-palette.css already intend an 8px radius here, but
   components.css's `.l1-btn-primary.btn-primary` (loaded after the marketing
   bundle on every page) has higher selector specificity and silently wins,
   leaving buttons pill-shaped. !important is the only reliable way to win
   without matching that exact compound-class selector everywhere it's used. */
.l1-btn-primary,
.l1-btn-ghost {
    border-radius: 8px !important;
}

/* ---------- Marketing refresh: bento card graphics ----------
   The SSD and Uptime cards already carry a visual (meter bars, a terminal
   mockup); DDoS Protection and Instant Deploy were plain icon+text. These give
   every card in the row the same visual weight instead of two out of four
   being just text. */
.l1-shield-radar {
    position: relative;
    width: 96px;
    height: 96px;
    margin: .5rem auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.l1-shield-radar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--l1-accent);
    opacity: 0;
    animation: l1-radar-ping 2.4s ease-out infinite;
}

.l1-shield-radar-ring:nth-child(2) { animation-delay: .8s; }
.l1-shield-radar-ring:nth-child(3) { animation-delay: 1.6s; }

@keyframes l1-radar-ping {
    0% { transform: scale(.4); opacity: .55; }
    100% { transform: scale(1); opacity: 0; }
}

.l1-shield-radar-core {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--l1-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 6px 18px rgba(15, 159, 118, .35);
}

.l1-shield-radar-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--l1-text-muted);
}

.l1-shield-radar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--l1-accent);
    box-shadow: 0 0 6px var(--l1-accent);
}

.l1-deploy-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .25rem 0;
}

/* Named .l1-deploy-tick, not .l1-deploy-step: components.css loads after this
   bundle and owns .l1-deploy-step as the billing wizard's padded two-column
   grid. Sharing that class put the dots beside the labels and the active
   pulse on top of "Resources". */
.l1-deploy-tick {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    flex: 1 1 0;
    min-width: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--l1-text-muted);
    text-align: center;
}

.l1-deploy-tick::before {
    content: '';
    position: absolute;
    top: 11px;
    right: 50%;
    width: calc(100% + .75rem);
    height: 2px;
    background: var(--l1-border-strong);
    z-index: 0;
}

.l1-deploy-tick:first-child::before {
    content: none;
}

.l1-deploy-tick.is-done::before,
.l1-deploy-tick.is-active::before {
    background: var(--l1-accent);
}

.l1-deploy-tick-dot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--l1-surface);
    border: 2px solid var(--l1-border-strong);
    font-size: .7rem;
}

.l1-deploy-tick.is-done .l1-deploy-tick-dot {
    background: var(--l1-accent);
    border-color: var(--l1-accent);
    color: #fff;
}

.l1-deploy-tick.is-done {
    color: var(--l1-text);
}

.l1-deploy-tick.is-active .l1-deploy-tick-dot {
    border-color: var(--l1-primary);
    box-shadow: 0 0 0 4px var(--l1-primary-soft);
    animation: l1-deploy-pulse 1.4s ease-in-out infinite;
}

.l1-deploy-tick.is-active {
    color: var(--l1-primary-dark);
}

.l1-deploy-tick > span:last-child {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes l1-deploy-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--l1-primary-soft); }
    50% { box-shadow: 0 0 0 7px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .l1-shield-radar-ring,
    .l1-deploy-tick.is-active .l1-deploy-tick-dot {
        animation: none;
    }
}

/* ---------- Marketing refresh: alternating light/dark sections ----------
   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 (07-refinement.css /
   10-palette.css) rather than inventing new ones. */
/* !important on the background because .l1-section carries
   `background: transparent` (10-palette.css) — 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 {
    background-color: var(--l1-hero-ground) !important;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(var(--l1-hero-glow-rgb), .18), transparent 32rem),
        radial-gradient(circle at 85% 75%, rgba(55, 212, 165, .09), transparent 34rem),
        linear-gradient(65deg, transparent 42%, rgba(213, 216, 221, .08) 50%, transparent 60%) !important;
    border-top: 0;
    border-bottom: 0;
}

/* Eyebrows on an always-dark band.
   .l1-cta-card is in this list because it was the one dark surface that never
   got the treatment: its eyebrow fell through to the base rule in
   07-refinement.css, which paints `color: var(--l1-primary-dark)`. That token is
   a deep navy (#1e3a8a), so "First-deposit bonus" on the LowEndTalk promo page
   rendered navy-on-navy at roughly 1.5:1. The four *-hero classes are handled by
   the sibling rule in 07-refinement.css; this covers the two band surfaces. */
.l1-section-dark .l1-eyebrow,
.l1-cta-card .l1-eyebrow {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .24);
    color: #ffffff;
}

/* The dot is its own element and takes --l1-accent / --l1-primary, both of which
   are mid-tone against these grounds. */
.l1-section-dark .l1-eyebrow-dot,
.l1-cta-card .l1-eyebrow-dot {
    background: rgba(255, 255, 255, .82);
}

/* .l1-cta-card is a grid, and grid items stretch along the inline axis by
   default, so the eyebrow pill and the code chip were rendering full card width
   (708px and 660px inside a 980px card) instead of hugging their text. The chip
   carries a `tw:inline-block` that cannot help here: grid blockifies its items,
   so inline-block computes to block. justify-self is the property that actually
   applies to a grid item. */
.l1-cta-card .l1-eyebrow,
.l1-cta-card .l1-cta-code {
    justify-self: start;
}

.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;
}

.l1-section-dark .l1-section-sub {
    color: rgba(255, 255, 255, .78);
}

.l1-section-dark > .l1-container > p {
    color: rgba(255, 255, 255, .78);
}

.l1-section-dark > .l1-container > p a {
    color: #ffffff;
}

.l1-section-dark .l1-feature,
.l1-section-dark .l1-bento-card,
.l1-section-dark .l1-ops-card,
.l1-section-dark .l1-builder-card {
    border-color: transparent;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
}

/* Cards keep their normal light-card text colors — only the section chrome
   (eyebrow/heading/sub above) goes light-on-dark, with white cards floating on
   a dark band rather than re-theming the cards themselves. */
.l1-section-dark .l1-feature h3,
.l1-section-dark .l1-bento-card h3 {
    color: var(--l1-text);
}

.l1-section-dark .l1-feature p,
.l1-section-dark .l1-bento-card p {
    color: var(--l1-text-muted);
}

/* When the site's own dark theme is also on, the cards' normal surface color
   is nearly identical to the section background and the two blend together.
   Give the cards a translucent glass surface + visible border so they still
   read as "cards floating on the dark band" instead of disappearing into it. */
html[data-l1-theme="dark"] .l1-section-dark .l1-feature,
html[data-l1-theme="dark"] .l1-section-dark .l1-bento-card {
    background: rgba(255, 255, 255, .045) !important;
    /* Shorthand, not border-color: an earlier layer sets the `border`
       shorthand, which would otherwise reset the color back to the light
       theme's border token and leave a pale outline on a dark card. */
    border: 1px solid rgba(255, 255, 255, .1) !important;
}

html[data-l1-theme="dark"] .l1-section-dark .l1-feature h3,
html[data-l1-theme="dark"] .l1-section-dark .l1-bento-card h3 {
    color: #ffffff;
}

html[data-l1-theme="dark"] .l1-section-dark .l1-feature p,
html[data-l1-theme="dark"] .l1-section-dark .l1-bento-card p {
    color: rgba(255, 255, 255, .72);
}

/* ---------- Marketing refresh: unify every other page's hero ----------
   .l1-page-hero (pricing/features/locations/CMS pages) and its sibling hero
   classes (.l1-contact-hero, .l1-article-hero, .l1-builder-hero) used a
   different dark shade (#3b2b70) than the homepage hero/CTA/dark sections
   above — this brings every marketing page hero, not just the
   homepage, onto the same deep-navy-plus-streak treatment (all of which now read
   the shared --l1-hero-ground token). Selector list and
   specificity mirror the "Public hero background normalization" rule in
   10-palette.css so this wins on source order alone. */
.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:
        radial-gradient(circle at 16% 18%, rgba(var(--l1-hero-glow-rgb), .20), transparent 30rem),
        linear-gradient(65deg, transparent 38%, rgba(213, 216, 221, .10) 48%, transparent 58%),
        linear-gradient(180deg, rgba(var(--l1-hero-scrim-top-rgb), .30) 0%, rgba(var(--l1-hero-scrim-bottom-rgb), .52) 100%),
        url("../img/world-map-outline.04b03780e8d0.svg") !important;
    background-position: center, center, center, center 48% !important;
    background-repeat: no-repeat !important;
    background-size: cover, cover, cover, min(1320px, 126vw) auto !important;
}

/* ---------- Marketing refresh: pricing hero coloring ----------
   The pricing hero's proof-row chips and credit toggle had a light-theme-only
   override (13-dark-polish.css) 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. */
html[data-l1-theme="light"] .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;
}

html[data-l1-theme="light"] .l1-pricing-page .l1-commitment-strip {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: rgba(255, 255, 255, .82) !important;
}

html[data-l1-theme="light"] .l1-pricing-page .l1-commitment-strip button {
    color: rgba(255, 255, 255, .78) !important;
}

html[data-l1-theme="light"] .l1-pricing-page .l1-commitment-strip button:hover {
    background: rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
}

html[data-l1-theme="light"] .l1-pricing-page .l1-commitment-strip button.is-active {
    background: var(--l1-primary) !important;
    color: #ffffff !important;
}

html[data-l1-theme="light"] .l1-pricing-page .l1-commitment-strip button.is-active:hover {
    background: var(--l1-primary-dark) !important;
    color: #ffffff !important;
}

/* ---------- Fix: "20% off" badge was invisible until already selected ----------
   .l1-commitment-strip button small (03-pricing-plans.css / 09-polish.css) 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. */
.l1-commitment-strip button small {
    display: inline-flex !important;
    background: rgba(15, 159, 118, .16) !important;
    color: #34d399 !important;
    opacity: 1 !important;
    margin-left: .4rem;
}

.l1-commitment-strip button.is-active small {
    background: rgba(255, 255, 255, .22) !important;
    color: #ffffff !important;
}


/* ---------- Pricing hero: tighten the cadence toggle ----------
   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-radius: 10px !important;
    gap: .25rem !important;
    padding: .3rem !important;
    width: fit-content !important;
}

.l1-pricing-page .l1-commitment-strip button {
    border-radius: 7px !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    padding: .5rem 1.15rem !important;
    text-transform: none !important;
}

.l1-pricing-page .l1-commitment-strip button small {
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
    padding: .1rem .4rem !important;
}

@media (max-width: 575.98px) {
    .l1-pricing-page .l1-commitment-strip {
        margin-left: auto;
        margin-right: auto;
        width: fit-content !important;
    }

    .l1-pricing-page .l1-commitment-strip button {
        padding: .5rem .85rem !important;
    }
}

/* ---------- Dark-theme fix: nav toggle was a solid white box ----------
   10-palette.css sets `.l1-nav-toggle { background: #ffffff }` with no theme
   condition. 11-dark-refactor.css then overrides only `border`/`color` and
   inverts the icon to white — but never resets that white background, so in
   dark theme the mobile menu button rendered as a white square with a white
   (inverted) icon on it, i.e. an apparently blank button. */
html[data-l1-theme="dark"] .l1-nav-toggle,
html[data-l1-theme="dark"] .l1-toggler {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .18);
}

html[data-l1-theme="dark"] .l1-nav-toggle:hover,
html[data-l1-theme="dark"] .l1-toggler:hover {
    background: rgba(255, 255, 255, .12);
}

/* ==========================================================================
   LayerOne rebrand: interaction polish on public surfaces
   --------------------------------------------------------------------------
   The rebrand changed the brand tokens, so anything that already hovered to
   var(--l1-primary*) picked up the new blue for free — buttons, footer links and
   most cards needed nothing. What did not follow are the hovers written as
   literal neutral greys, which is why the nav read as a grey utility bar bolted
   onto a blue site.

   Everything below lives in this file rather than a new 15-*.css because the
   marketing bundle's cascade is its load order and this is already the last
   layer; a fifteenth file would be one more place to look.

   Specificity is deliberate, not decorative. The rules being refined here are
   themselves theme-scoped (12-bento-hero.css:635 for light,
   11-dark-refactor.css:148 for dark), so a bare `.l1-nav-link:hover` would lose
   despite loading later. Each override mirrors the shape of the rule it
   supersedes: html[data-l1-theme="…"] + the same class chain.
   ========================================================================== */

/* ---------- Nav: brand-tinted hover instead of a neutral grey wash ----------
   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. */
html[data-l1-theme="light"] .l1-navbar .l1-nav-link:hover,
html[data-l1-theme="light"] .l1-navbar .l1-nav-link.active,
html[data-l1-theme="light"] .l1-navbar .l1-menu-trigger:hover,
html[data-l1-theme="light"] .l1-navbar .l1-menu-trigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--l1-brand) 10%, transparent);
    color: var(--l1-brand-strong);
}

html[data-l1-theme="dark"] .l1-navbar .l1-nav-link:hover,
html[data-l1-theme="dark"] .l1-navbar .l1-nav-link.active,
html[data-l1-theme="dark"] .l1-navbar .l1-menu-trigger:hover,
html[data-l1-theme="dark"] .l1-navbar .l1-menu-trigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--l1-brand) 18%, transparent);
    /* Not --l1-brand-strong here: on a dark ground that token is #93c5fd, which
       against the navbar's own dark fill is lower contrast than plain white. */
    color: #ffffff;
}

/* Dropdown items get the same treatment so the menu does not switch vocabulary
   halfway through the interaction. */
html[data-l1-theme="light"] .l1-dropdown .l1-menu-link:hover,
html[data-l1-theme="light"] .l1-dropdown .l1-menu-link:focus-visible {
    background: color-mix(in srgb, var(--l1-brand) 8%, transparent);
    color: var(--l1-brand-strong);
}

html[data-l1-theme="dark"] .l1-dropdown .l1-menu-link:hover,
html[data-l1-theme="dark"] .l1-dropdown .l1-menu-link:focus-visible {
    background: color-mix(in srgb, var(--l1-brand) 16%, transparent);
    color: #ffffff;
}

/* ---------- Cards: brand-tinted lift ----------
   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-feature,
.l1-plan-card {
    transition:
        border-color var(--l1-transition),
        box-shadow var(--l1-transition),
        transform var(--l1-transition);
}

html[data-l1-theme="light"] .l1-bento-card:hover,
html[data-l1-theme="light"] .l1-feature:hover,
html[data-l1-theme="light"] .l1-plan-card:hover {
    border-color: color-mix(in srgb, var(--l1-brand) 42%, var(--l1-border));
    box-shadow: 0 14px 34px var(--l1-primary-glow);
}

html[data-l1-theme="dark"] .l1-bento-card:hover,
html[data-l1-theme="dark"] .l1-feature:hover,
html[data-l1-theme="dark"] .l1-plan-card:hover {
    border-color: color-mix(in srgb, var(--l1-brand) 46%, transparent);
    /* Keep the black ambient shadow that gives depth on a dark ground and add the
       brand glow on top of it — replacing it outright flattened the card. */
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28), 0 0 0 1px var(--l1-brand-soft);
}

/* ---------- Links: brand underline that does not shift layout ----------
   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);
}

.l1-footer-list a:hover,
.l1-footer-bottom a:hover,
.l1-contactbar-link:hover {
    text-decoration: underline;
    text-decoration-color: currentColor;
}

/* ---------- Focus-visible: one brand ring across public surfaces ----------
   01-tokens-base.css 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);
}

/* ---------- Contact bar: brand ground for the phone and email strip ----------
   A faint brand tint so the strip reads as part of the brand rather than a system
   warning, with a hairline base to separate it from the navbar underneath. */
html[data-l1-theme="light"] .l1-contactbar {
    background: color-mix(in srgb, var(--l1-brand) 7%, #ffffff);
    border-bottom: 1px solid color-mix(in srgb, var(--l1-brand) 18%, transparent);
}

html[data-l1-theme="dark"] .l1-contactbar {
    background: color-mix(in srgb, var(--l1-brand) 6%, var(--l1-surface-1));
    border-bottom: 1px solid color-mix(in srgb, var(--l1-brand) 16%, transparent);
}

/* ---------- Stat rail ----------
   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;
}

/* ---------- Consecutive section paragraphs ----------
   A section head's .l1-section-sub is normally the last element in its block, so
   the homepage cascade zeroes its bottom margin
   (.l1-home-hero ~ .l1-section .l1-section-sub, 13-dark-polish.css). The About
   section runs two of them in sequence, which left the two paragraphs touching
   with a measured 0px gap — one wall of text.

   Space the *sibling* rather than reinstating margin-bottom: that rule is load
   bearing for every single-paragraph section head on the page, and giving it a
   bottom margin again would reopen the gap it was written to close. */
.l1-section-sub + .l1-section-sub {
    margin-top: 0.9rem;
}

/* The lift is the one motion-sensitive thing added here; colour transitions are
   safe to keep. tokens.css already zeroes --l1-transition under reduced motion,
   so only the transform needs suppressing. */
@media (prefers-reduced-motion: reduce) {
    .l1-bento-card:hover,
    .l1-feature:hover,
    .l1-plan-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   Public v2 page pass
   --------------------------------------------------------------------------
   Shared patterns used by every marketing page so inner pages match the
   homepage: two-column home hero, proof chips on dark heroes, a trust strip,
   numbered steps, blog/CMS reading layouts, and a nav deploy CTA.
   ========================================================================== */

/* Homepage hero: Tailwind's tw:grid-cols-1 on this row used to flatten the
   mockup under the copy on every breakpoint. CSS owns the layout so a utility
   on the template cannot silently stack it again. */
.l1-home-hero .l1-hero-row {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

@media (min-width: 992px) {
    .l1-home-hero .l1-hero-row {
        align-items: center;
        gap: 2.5rem;
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
        min-height: clamp(26rem, 36vw, 34rem);
    }
}

.l1-home-hero .l1-eyebrow,
.l1-hero#top .l1-eyebrow {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .24);
    color: #ffffff;
}

.l1-home-hero .l1-eyebrow-dot,
.l1-hero#top .l1-eyebrow-dot {
    background: rgba(255, 255, 255, .82);
}

/* 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 i {
    color: #45e0bf;
}

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

.l1-hero-proof a:hover {
    color: inherit;
    text-decoration: underline;
}

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

.l1-pricing-page .l1-page-hero .l1-hero-proof {
    justify-content: center;
}

.l1-page-hero .l1-builder-actions,
.l1-contact-hero .l1-builder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.35rem;
}

.l1-page-hero .l1-btn-ghost,
.l1-contact-hero .l1-btn-ghost {
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .18);
    color: rgba(248, 250, 252, .92);
}

.l1-page-hero .l1-btn-ghost:hover,
.l1-contact-hero .l1-btn-ghost:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(213, 216, 221, .36);
    color: #ffffff;
}

/* Trust strip under the homepage hero. */
.l1-trust-strip {
    background: var(--l1-surface);
    border-bottom: 1px solid var(--l1-border);
    padding: 1.05rem 0;
}

.l1-trust-strip ul {
    color: var(--l1-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .88rem;
    font-weight: 650;
    gap: .85rem 1.75rem;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.l1-trust-strip i {
    color: var(--l1-accent);
    margin-right: .4rem;
}

html[data-l1-theme="dark"] .l1-trust-strip {
    background: rgba(255, 255, 255, .03);
}

/* 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;
}

html[data-l1-theme="dark"] .l1-section-dark .l1-step-num {
    background: var(--l1-primary);
    color: #ffffff;
}

/* Nav deploy CTA: a real button in the account cluster, not another text link. */
.l1-navbar .l1-nav-cta {
    align-self: center;
    font-size: .88rem !important;
    margin-inline-end: .35rem;
    min-height: 36px !important;
    padding: .45rem .95rem !important;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .l1-navbar .l1-nav-cta {
        margin: .35rem 0 0;
        width: 100%;
    }
}

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

.l1-page-hero .l1-breadcrumbs a,
.l1-article-hero .l1-breadcrumbs a {
    color: rgba(255, 255, 255, .78);
}

.l1-page-hero .l1-breadcrumbs a:hover,
.l1-article-hero .l1-breadcrumbs a:hover {
    color: #ffffff;
}

.l1-page-hero .l1-breadcrumbs li:not(:last-child)::after,
.l1-article-hero .l1-breadcrumbs li:not(:last-child)::after {
    color: currentColor;
}

/* Blog index: first post is a wide feature card. */
@media (min-width: 768px) {
    .l1-blog-card-featured {
        display: grid;
        grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
        min-height: 240px;
    }

    .l1-blog-card-featured .l1-blog-card-icon {
        border-radius: 8px 0 0 8px;
        min-height: 100%;
    }

    .l1-blog-card-featured .l1-blog-card-body {
        padding: 1.5rem 1.6rem;
    }
}

/* Blog reading: the builder article already carries the title, so this only
   tightens the measure now that breadcrumbs are no longer a second hero. */
.l1-public-rendered-article .l1-builder-article {
    padding-top: 2.25rem;
}

.l1-public-rendered-article .l1-builder-article h1 {
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1.08;
}

/* Legal CMS pages read as documents, not landing pages. */
.l1-cms-body-legal {
    padding: 2.5rem 0 4.5rem;
}

.l1-cms-body-legal .l1-container {
    max-width: 760px;
}

.l1-cms-body-legal .l1-section {
    padding-bottom: 1.75rem;
    padding-top: 1.75rem;
}

/* 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;
}

/* Public status on the marketing layout: contained, not a console strip. */
.l1-status-public {
    padding: 2rem 0 4rem;
}

.l1-status-public .status-hero {
    background-color: var(--l1-hero-ground);
    background-image:
        radial-gradient(circle at 16% 18%, rgba(var(--l1-hero-glow-rgb), .20), transparent 30rem),
        linear-gradient(65deg, transparent 38%, rgba(213, 216, 221, .10) 48%, transparent 58%);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
}

/* Guest ticket / unsubscribe success cards sit in the dark hero. */
.l1-page-hero .l1-contact-success,
.l1-contact-hero .l1-contact-success {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    margin: 0 auto;
    max-width: 640px;
    padding: 2rem 1.75rem;
}

html[data-l1-theme="light"] .l1-page-hero .l1-contact-success,
html[data-l1-theme="light"] .l1-contact-hero .l1-contact-success {
    background: rgba(255, 255, 255, .08);
}

.l1-page-hero .l1-contact-success h1,
.l1-contact-hero .l1-contact-success h1 {
    color: #ffffff;
}

.l1-page-hero .l1-contact-success p,
.l1-contact-hero .l1-contact-success p {
    color: rgba(255, 255, 255, .78);
}

/* Looking-glass and contact forms: keep the panel from stretching full-bleed. */
.l1-lg-panel,
.l1-contact-card {
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

html[data-l1-theme="dark"] .l1-lg-panel,
html[data-l1-theme="dark"] .l1-contact-card {
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

.l1-section-dark .l1-ops-card h3,
.l1-section-dark .l1-builder-card h3,
.l1-section-dark .l1-plan-fit-card h3 {
    color: var(--l1-text);
}

.l1-section-dark .l1-ops-card p,
.l1-section-dark .l1-builder-card p,
.l1-section-dark .l1-plan-fit-card p {
    color: var(--l1-text-muted);
}

.l1-docs-article {
    max-width: 760px;
}

.l1-docs-article h2 {
    font-size: 1.35rem;
    margin-top: 1.75rem;
}

.l1-docs-article pre {
    background: var(--l1-surface-2);
    border: 1px solid var(--l1-border);
    border-radius: 8px;
    overflow-x: auto;
    padding: 1rem 1.15rem;
}

.l1-section-cta {
    margin: 2rem 0 0;
}

.l1-cms-body-docs,
.l1-cms-body-seo,
.l1-cms-body-standard {
    padding-bottom: 1rem;
}

.l1-status-public .incident-public-card,
.l1-status-public .public-status-shell {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: 12px;
}

/* ---- 15-public-redesign.css ---- */
/* 15-public-redesign.css - Public site visual system
 * Part of the LayerOne marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 *
 * This layer is meant to be visible. Earlier files unified every page onto the
 * same full-bleed navy banner; this one splits the homepage (cinematic, logo
 * ground) from inner pages (light canvas, contained hero card) and retunes the
 * marketing tokens to the lockup: electric blue on near-black, not muted royal
 * with a teal wash.
 *
 * Console/client shells do not load this file. Do not move these token
 * overrides into tokens.css.
 */

/* ---------- Logo-matched marketing tokens ---------- */
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;
}

html[data-l1-theme="dark"] {
    --l1-brand: #4c8cff;
    --l1-brand-strong: #7eb0ff;
    --l1-brand-soft: rgba(76, 140, 255, 0.16);
    --l1-brand-border: rgba(76, 140, 255, 0.4);
    --l1-brand-contrast: #050b18;
    --l1-primary: #4c8cff;
    --l1-primary-2: #7eb0ff;
    --l1-primary-dark: #c5d8ff;
    --l1-primary-soft: rgba(76, 140, 255, 0.16);
    --l1-primary-glow: rgba(76, 140, 255, 0.28);
}

html[data-l1-theme="light"] body {
    background:
        radial-gradient(circle at 12% -8%, rgba(77, 148, 255, 0.12), transparent 32rem),
        radial-gradient(circle at 92% 0%, rgba(106, 166, 255, 0.1), transparent 28rem),
        #f4f6fb;
}

.l1-container {
    max-width: 1200px;
}

/* ---------- Buttons: 8px, electric, not pills ---------- */
.l1-btn-primary,
.l1-btn-ghost {
    border-radius: 8px !important;
}

.l1-btn-primary,
.ui-btn--primary.l1-btn {
    background: #3b7ae8 !important;
    border-color: #3b7ae8 !important;
    box-shadow: 0 12px 28px rgba(77, 148, 255, 0.32);
    color: #ffffff !important;
}

.l1-btn-primary:hover,
.ui-btn--primary.l1-btn:hover {
    background: #3269d4 !important;
    border-color: #3269d4 !important;
    color: #ffffff !important;
}

/* Ghost buttons on navy surfaces. `.ui-btn` loads last (tailwind.css) with
   dark ink, and `html[data-l1-theme="light"] .l1-btn-ghost` in 12-bento-hero.css
   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. */
html[data-l1-theme="light"] .l1-page-hero .l1-btn-ghost,
html[data-l1-theme="dark"] .l1-page-hero .l1-btn-ghost,
html[data-l1-theme="light"] .l1-contact-hero .l1-btn-ghost,
html[data-l1-theme="dark"] .l1-contact-hero .l1-btn-ghost,
html[data-l1-theme="light"] .l1-article-hero .l1-btn-ghost,
html[data-l1-theme="dark"] .l1-article-hero .l1-btn-ghost,
html[data-l1-theme="light"] .l1-builder-hero:not(.l1-checkout-hero) .l1-btn-ghost,
html[data-l1-theme="dark"] .l1-builder-hero:not(.l1-checkout-hero) .l1-btn-ghost,
html[data-l1-theme="light"] .l1-cta-card .l1-btn-ghost,
html[data-l1-theme="dark"] .l1-cta-card .l1-btn-ghost,
html[data-l1-theme="light"] .l1-home-hero .l1-btn-ghost,
html[data-l1-theme="dark"] .l1-home-hero .l1-btn-ghost,
html[data-l1-theme="light"] .l1-hero#top .l1-btn-ghost,
html[data-l1-theme="dark"] .l1-hero#top .l1-btn-ghost,
html[data-l1-theme="light"] .l1-section-dark .l1-btn-ghost,
html[data-l1-theme="dark"] .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 !important;
    color: #ffffff !important;
}

html[data-l1-theme="light"] .l1-page-hero .l1-btn-ghost:hover,
html[data-l1-theme="dark"] .l1-page-hero .l1-btn-ghost:hover,
html[data-l1-theme="light"] .l1-contact-hero .l1-btn-ghost:hover,
html[data-l1-theme="dark"] .l1-contact-hero .l1-btn-ghost:hover,
html[data-l1-theme="light"] .l1-article-hero .l1-btn-ghost:hover,
html[data-l1-theme="dark"] .l1-article-hero .l1-btn-ghost:hover,
html[data-l1-theme="light"] .l1-builder-hero:not(.l1-checkout-hero) .l1-btn-ghost:hover,
html[data-l1-theme="dark"] .l1-builder-hero:not(.l1-checkout-hero) .l1-btn-ghost:hover,
html[data-l1-theme="light"] .l1-cta-card .l1-btn-ghost:hover,
html[data-l1-theme="dark"] .l1-cta-card .l1-btn-ghost:hover,
html[data-l1-theme="light"] .l1-home-hero .l1-btn-ghost:hover,
html[data-l1-theme="dark"] .l1-home-hero .l1-btn-ghost:hover,
html[data-l1-theme="light"] .l1-hero#top .l1-btn-ghost:hover,
html[data-l1-theme="dark"] .l1-hero#top .l1-btn-ghost:hover,
html[data-l1-theme="light"] .l1-section-dark .l1-btn-ghost:hover,
html[data-l1-theme="dark"] .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;
}

html[data-l1-theme="light"] .l1-home-hero .l1-gradient-text,
html[data-l1-theme="light"] .l1-hero#top .l1-gradient-text,
html[data-l1-theme="dark"] .l1-home-hero .l1-gradient-text,
html[data-l1-theme="dark"] .l1-hero#top .l1-gradient-text {
    animation: none;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
}

/* ---------- Type: display-sized headings ---------- */
.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;
}

.l1-page-hero h1,
.l1-contact-hero h1,
.l1-builder-hero:not(.l1-checkout-hero) h1,
.l1-article-hero h1 {
    font-size: clamp(2.35rem, 4.8vw, 4rem) !important;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02 !important;
}

.l1-section-title {
    font-size: clamp(1.85rem, 3.4vw, 2.85rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.08;
}

.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;
}

/* ---------- Homepage hero: brighter blue field, isometric mesh, no map ---------- */
html[data-l1-theme="light"] .l1-home-hero.l1-hero,
html[data-l1-theme="dark"] .l1-home-hero.l1-hero,
html[data-l1-theme="light"] body:not(.auth-body) .l1-hero#top,
html[data-l1-theme="dark"] body:not(.auth-body) .l1-hero#top {
    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) !important;
    border-radius: 24px !important;
    box-shadow: 0 28px 70px rgba(5, 11, 24, 0.28) !important;
    display: flex !important;
    flex-direction: column;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
    min-height: min(88vh, 62rem);
    overflow: hidden;
    padding: 0 !important;
    width: min(85vw, calc(100% - 2rem)) !important;
}

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

.l1-hero-orb {
    border-radius: 50%;
    filter: blur(8px);
    position: absolute;
}

.l1-hero-orb-a {
    background: radial-gradient(circle, rgba(59, 122, 232, 0.32), transparent 70%);
    height: 28rem;
    left: -6rem;
    top: -8rem;
    width: 28rem;
}

.l1-hero-orb-b {
    background: radial-gradient(circle, rgba(59, 122, 232, 0.18), transparent 72%);
    height: 22rem;
    right: -4rem;
    top: 10%;
    width: 22rem;
}

.l1-hero-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    inset: 0;
    mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%);
    position: absolute;
}

.l1-home-hero > .l1-container,
.l1-hero#top > .l1-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    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 !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    color: var(--l1-text-muted);
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 1.15rem 1.5rem !important;
    position: relative;
    width: 100%;
    z-index: 1;
}

html[data-l1-theme="dark"] .l1-home-hero > .l1-trust-strip,
html[data-l1-theme="dark"] .l1-hero#top > .l1-trust-strip {
    background: #121826 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

@media (min-width: 992px) {
    .l1-home-hero .l1-hero-row {
        gap: 3.25rem !important;
        grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr) !important;
        min-height: clamp(34rem, 48vw, 46rem) !important;
    }

    .l1-home-hero .l1-hero-visual {
        margin: 0 0 0 auto;
        max-width: 540px;
        transform: perspective(1600px) rotateY(-11deg) rotateX(7deg);
        transform-style: preserve-3d;
    }
}

.l1-home-hero .l1-hero-mockup {
    border: 1px solid rgba(165, 206, 255, 0.32);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(77, 148, 255, 0.2),
        0 0 80px rgba(77, 148, 255, 0.22);
}

.l1-home-hero .l1-hero-stats {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 0.85rem 1.15rem;
}

/* ---------- Trust strip: static, light, no ticker ---------- */
.l1-trust-strip {
    background: var(--l1-surface) !important;
    border-bottom: 1px solid var(--l1-border);
    border-top: 0;
    color: var(--l1-text-muted);
    overflow: visible;
    padding: 1.05rem 0 !important;
}

.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;
}

.l1-trust-strip i {
    color: #3b7ae8 !important;
}

html[data-l1-theme="dark"] .l1-trust-strip {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ---------- Compliance band (Hivelocity-style proof row) ---------- */
.l1-compliance-band {
    background: var(--l1-surface-3);
    border-bottom: 1px solid var(--l1-border);
    padding: 2.35rem 0;
}

.l1-compliance-band-inner {
    align-items: center;
    display: grid;
    gap: 1.75rem;
}

.l1-compliance-band-title {
    color: var(--l1-text);
    font-size: clamp(1.55rem, 2.5vw, 2.2rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

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

.l1-compliance-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.l1-compliance-tile {
    align-items: center;
    aspect-ratio: 1;
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: 10px;
    color: var(--l1-text);
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    justify-content: center;
    padding: 0.7rem 0.4rem;
    text-align: center;
}

.l1-compliance-icon {
    align-items: center;
    color: #4b5568;
    display: flex;
    font-size: 1.35rem;
    height: 1.7rem;
    justify-content: center;
}

.l1-compliance-name {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    max-width: 7.2em;
    text-transform: uppercase;
}

.l1-compliance-sub {
    color: var(--l1-text-muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.15;
    text-transform: uppercase;
}

.l1-trust-seal {
    margin: 0;
}

.l1-trust-seal img {
    display: block;
    height: 8.75rem;
    object-fit: contain;
    width: 8.75rem;
}

html[data-l1-theme="dark"] .l1-compliance-band {
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-l1-theme="dark"] .l1-compliance-icon {
    color: rgba(226, 232, 240, 0.82);
}

@media (min-width: 992px) {
    .l1-compliance-band {
        padding: 2.75rem 0;
    }

    .l1-compliance-band-inner {
        grid-template-columns: minmax(16rem, 0.32fr) minmax(0, 1fr);
        gap: 3rem;
    }

    .l1-compliance-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.85rem;
    }
}

/* ---------- Inner pages: light canvas, contained electric-navy card ---------- */
.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;
}

.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;
}

.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%;
}

html[data-l1-theme="dark"] .l1-page-hero > .l1-container,
html[data-l1-theme="dark"] .l1-contact-hero > .l1-container,
html[data-l1-theme="dark"] .l1-builder-hero:not(.l1-checkout-hero) > .l1-container {
    background-color: #1a3566;
    border-color: rgba(165, 206, 255, 0.28);
}

/* 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. */
.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 !important;
}

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

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

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

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

.l1-pricing-page .l1-pricing-hero {
    text-align: left !important;
}

.l1-pricing-page .l1-pricing-hero .l1-container {
    max-width: 1200px !important;
}

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

.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-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);
}

.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 {
    background: #3b7ae8;
    border-color: #3b7ae8;
    color: #ffffff;
}

.l1-include-split {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .l1-include-split {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
}

.l1-include-panel {
    border-radius: 18px !important;
    padding: 1.5rem 1.4rem 1.6rem;
}

.l1-include-panel h3 {
    font-size: 1.35rem;
    letter-spacing: -0.03em;
    margin: 0.45rem 0 1rem;
}

.l1-include-panel .l1-check-list {
    margin-top: 0;
}

.l1-include-panel-addon {
    background:
        radial-gradient(ellipse 80% 50% at 100% 0%, rgba(77, 148, 255, 0.12), transparent 55%),
        var(--l1-surface);
}

.l1-include-panel-addon .l1-check-list i {
    color: var(--l1-brand);
}

html[data-l1-theme="dark"] .l1-include-panel-addon {
    background:
        radial-gradient(ellipse 80% 50% at 100% 0%, rgba(76, 140, 255, 0.16), transparent 55%),
        var(--l1-surface);
}

.l1-section-dark .l1-feature .l1-bento-icon {
    margin-bottom: 1rem;
}

/* ---------- Solution landings: quieter glass, no badge chrome ---------- */
.l1-public-rendered-page > .l1-solution-hero.l1-page-hero {
    min-height: 0 !important;
    padding: 1.25rem 0 0 !important;
}

.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;
}

.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 !important;
}

.l1-solution-hero .l1-btn-primary {
    background: rgba(59, 122, 232, 0.78) !important;
    border-color: rgba(59, 122, 232, 0.4) !important;
    box-shadow: none !important;
}

.l1-public-rendered-page > .l1-solution-hero > .l1-container {
    align-items: stretch !important;
    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 {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 1.15rem 1.2rem 1.05rem;
}

.l1-solution-panel-kicker {
    color: rgba(255, 255, 255, 0.48) !important;
    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 {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.l1-solution-visual-row strong {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.98rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.l1-solution-landing .l1-section-head {
    max-width: 40rem;
}

.l1-solution-landing .l1-faq-list {
    max-width: none;
}

.l1-solution-landing .l1-bento-card {
    background: rgba(255, 255, 255, 0.42) !important;
    border-color: rgba(21, 42, 82, 0.08) !important;
    box-shadow: none !important;
}

.l1-solution-landing .l1-bento-card::before {
    display: none !important;
}

.l1-solution-landing .l1-bento-icon {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #5c6b82 !important;
    height: auto;
    justify-content: flex-start;
    margin-bottom: 0.7rem;
    width: auto;
}

.l1-solution-landing .l1-feature-tags {
    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);
}

.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 !important;
    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;
}

.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;
}

.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 {
    color: #5c6b82;
    font-weight: 700;
}

.l1-solution-landing .l1-faq-item {
    background: rgba(255, 255, 255, 0.42) !important;
    border-color: rgba(21, 42, 82, 0.08) !important;
    box-shadow: none !important;
}

.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-fit-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .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;
    }
}

/* ---------- Pricing: catalog sits on the hero card ---------- */
.l1-pricing-stage {
    margin-top: -0.25rem;
    padding: 0 0 1rem;
    position: relative;
    z-index: 2;
}

.l1-pricing-controls {
    background: var(--l1-bg-2);
    border-bottom: 1px solid var(--l1-border);
    padding: 1.05rem 1.1rem 1.05rem;
}

.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-pricing-families .l1-pick-grid.l1-deploy-families {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@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));
    }
}

.l1-pricing-controls .l1-pick {
    background: var(--l1-surface);
}

.l1-pricing-controls .l1-pick.is-selected {
    background: var(--l1-brand-soft);
}

.l1-pricing-cadence-bar {
    align-items: center;
    background: var(--l1-surface-2);
    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 {
    background: var(--l1-surface-1);
    border: 1px solid var(--l1-border-strong);
    border-radius: 999px;
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.22rem;
}

.l1-pricing-cadence-switch button {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 999px;
    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;
}

.l1-plan-matrix-family {
    align-items: flex-start;
    background: var(--l1-bg-2);
    border-bottom: 1px solid var(--l1-border);
    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 {
    font-family: var(--l1-font-head);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    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;
    background: var(--l1-brand-soft);
    border-radius: 999px;
    color: var(--l1-brand-strong);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 0.32rem 0.7rem;
    white-space: nowrap;
}

.l1-pricing-family-catalog[data-pricing-family="network"] .l1-plan-matrix-family-port {
    background: var(--l1-accent-soft);
    color: var(--l1-accent);
}

.l1-plan-matrix-section {
    padding: 0;
}

.l1-plan-matrix-wrap {
    background: var(--l1-surface);
    border: 1px solid var(--l1-border);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(5, 11, 24, 0.08);
    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-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-right: 0.45rem;
}

.l1-plan-matrix-badge {
    background: #3b7ae8;
    border-radius: 999px;
    color: #fff;
    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-family: var(--l1-font-head);
    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-plan-includes {
    margin: 0 auto;
    max-width: 920px;
}

.l1-plan-includes .l1-check-list {
    display: grid;
    gap: 0.65rem 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

@media (max-width: 767.98px) {
    .l1-plan-includes .l1-check-list {
        grid-template-columns: 1fr;
    }

    .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;
        border-bottom: 1px solid var(--l1-border);
        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: rgba(77, 148, 255, 0.06);
    }

    .l1-plan-matrix-row.is-featured > * {
        background: transparent;
    }

    .l1-plan-matrix-row:last-child {
        border-bottom: 0;
    }

    .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 18-marketing-v2.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;
    }
}

.l1-pricing-page [data-pricing-plan-amount] {
    font-variant-numeric: tabular-nums;
}

html[data-l1-theme="dark"] .l1-plan-matrix-wrap {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

html[data-l1-theme="dark"] .l1-plan-matrix-row.is-featured {
    background: rgba(76, 140, 255, 0.1);
}

html[data-l1-theme="dark"] .l1-plan-matrix-row.is-featured > * {
    background: rgba(76, 140, 255, 0.1);
}

@media (max-width: 767.98px) {
    html[data-l1-theme="dark"] .l1-plan-matrix-row.is-featured {
        border-color: rgba(76, 140, 255, 0.45);
    }
}

/* ---------- Cards: isometric-adjacent geometry ---------- */
.l1-bento-card,
.l1-faq-item,
.l1-blog-card,
.l1-location-card,
.l1-plan {
    border-radius: 18px !important;
}

.l1-bento-card::before {
    background: linear-gradient(90deg, #3b7ae8, #6b9af0) !important;
    height: 3px !important;
    opacity: 1 !important;
}

.l1-bento-icon {
    background: #e7edf6;
    border: 1px solid rgba(21, 42, 82, 0.08);
    border-radius: 12px;
    color: #1a3566;
}

.l1-section-dark .l1-bento-icon {
    background: #e7edf6;
    border-color: rgba(21, 42, 82, 0.08);
    color: #1a3566;
}

/* ---------- How-it-works as a numbered track ---------- */
.l1-step-track {
    position: relative;
}

.l1-step-track .l1-feature {
    border-radius: 18px !important;
    min-height: 100%;
    padding-top: 1.5rem;
}

.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,
html[data-l1-theme="dark"] .l1-section-dark .l1-step-num {
    background: #e7edf6;
    border: 0;
    color: #1a3566;
}

.l1-home-hero ~ #how-it-works .l1-home-step-grid .l1-feature::before,
body:not(.auth-body) .l1-hero#top ~ #how-it-works .l1-home-step-grid .l1-feature::before {
    content: none !important;
    display: none !important;
}

.l1-home-hero ~ #how-it-works .l1-home-step-grid .l1-feature,
body:not(.auth-body) .l1-hero#top ~ #how-it-works .l1-home-step-grid .l1-feature {
    padding-top: 1.5rem !important;
}

/* ---------- Regions: one board, Tampa live ---------- */
.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);
    border: 1px solid var(--l1-border);
    border-radius: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
}

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

.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-card-soon {
    background: #f6f8fb;
}

.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-card-soon .l1-region-kicker {
    color: #5c6b82;
}

.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;
}

@media (min-width: 768px) {
    .l1-region-facts {
        border-left: 1px solid var(--l1-border);
        border-top: 0;
    }
}

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

@media (min-width: 768px) {
    .l1-region-fact-list {
        gap: 1.15rem 1.35rem;
        grid-template-columns: 1fr 1fr;
    }
}

.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 {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--l1-brand-border, #b7d0ff);
    text-underline-offset: 0.15em;
}

.l1-region-card-soon > p {
    color: var(--l1-text-muted);
}

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

html[data-l1-theme="dark"] .l1-region-board {
    background: var(--l1-surface);
}

html[data-l1-theme="dark"] .l1-region-card-soon,
html[data-l1-theme="dark"] .l1-region-facts {
    background: rgba(255, 255, 255, 0.03);
}

/* ---------- CTA: two-column closer, electric bloom ---------- */
.l1-cta-section,
html[data-l1-theme="light"] .l1-cta-section,
html[data-l1-theme="dark"] .l1-cta-section {
    background-color: #152a52 !important;
    background-image:
        radial-gradient(ellipse 60% 80% at 8% 50%, rgba(110, 176, 255, 0.42), transparent 58%),
        radial-gradient(ellipse 40% 60% at 92% 80%, rgba(165, 206, 255, 0.2), transparent 50%) !important;
    padding: 3.5rem 0 4.25rem;
}

.l1-cta-card {
    align-items: end;
    display: grid !important;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    padding: 0 !important;
    position: relative;
}

.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;
}

@media (min-width: 768px) {
    .l1-cta-card {
        grid-template-columns: minmax(0, 1.3fr) auto;
    }
}

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

.l1-cta-card h2 {
    font-size: clamp(2.1rem, 4vw, 3.4rem) !important;
    letter-spacing: -0.045em;
    line-height: 1.05;
    max-width: 16ch !important;
}

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

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

/* ---------- Blog magazine feature ---------- */
@media (min-width: 768px) {
    .l1-blog-card-featured {
        border-radius: 20px !important;
        min-height: 280px;
        overflow: hidden;
    }

    .l1-blog-card-featured .l1-blog-card-cover {
        background:
            radial-gradient(circle at 30% 20%, rgba(77, 148, 255, 0.45), transparent 50%),
            #152a52;
    }
}

/* ---------- Dark bands stay on logo ground ---------- */
.l1-section-dark {
    background-color: #152a52 !important;
    background-image:
        radial-gradient(ellipse 50% 60% at 10% 0%, rgba(110, 176, 255, 0.28), transparent 50%),
        radial-gradient(ellipse 40% 50% at 90% 100%, rgba(165, 206, 255, 0.14), transparent 48%) !important;
}

.l1-footer {
    background: #122444;
    color: rgba(248, 250, 252, 0.78);
}

/* ---------- Contact form as the stage ---------- */
.l1-contact-hero .l1-contact-card {
    border-radius: 18px !important;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
}

/* ---------- Proof chips: electric, not mint ---------- */
.l1-hero-proof i,
.l1-pricing-page .l1-pricing-proof-row i {
    color: #7eb0ff !important;
}

.l1-commitment-strip button.is-active {
    background: #3b7ae8 !important;
}

.l1-home-hero .l1-hero-chip-float i {
    color: #6b9af0;
}

/* ---------- Motion hygiene ---------- */
@media (prefers-reduced-motion: reduce) {
    .l1-home-hero .l1-hero-visual {
        transform: none;
    }
}

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

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

    .l1-page-hero > .l1-container,
    .l1-contact-hero > .l1-container,
    .l1-builder-hero:not(.l1-checkout-hero) > .l1-container {
        border-radius: 18px;
        padding: 1.6rem 1.15rem !important;
    }
}

/* ---- 16-docs.css ---- */
/* ==========================================================================
   Help centre at /docs/  (l1-kb-*)

   A module of its own rather than more rules in 04-footer-legal.css: the docs
   are four templates sharing one shell, and they are the only pages on the
   public site with a persistent sidebar, a table-of-contents rail, and code
   blocks people copy from.

   Prefix is l1-kb-, not l1-docs-. The older l1-docs-* / l1-doc-* rules in
   04-footer-legal.css belong to a previous design and are still on the page;
   reusing the names would inherit half of it at random.

   Everything below is token-driven (var(--l1-*)), so dark mode follows from the
   token swap rather than from a parallel set of dark rules.
   ========================================================================== */

.l1-kb {
    background: var(--l1-bg);
}

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

/* Do not add l1-world-map-bg here, however many other heroes carry it.
   That class (03-pricing-plans.css) is a decorative overlay *element* --
   position: absolute, inset: 0, opacity .17, pointer-events: none -- meant for
   an empty child div, the way locations.html uses it. On a hero it takes the
   header out of flow, so the next section slides up over it, renders the copy at
   17%, and makes the search field unclickable. The older heroes only survive it
   because 07-refinement.css and 15-public-redesign.css list each of their class
   pairs and undo it one property at a time; l1-kb-hero is not on those lists and
   must not be added to them, since 15-public-redesign.css already killed the
   world-map texture on every hero, leaving the class with nothing to contribute
   but this. */
/* Top padding matches the 1.35rem every other public hero settled on in
   15-public-redesign.css. It is not a free choice: .l1-navbar was position:
   fixed when the older heroes were written, so each one reserved ~8rem for it,
   and 13-dark-polish.css later made the navbar sticky. A sticky navbar is in
   flow and needs no reservation, so the leftover 8rem here was 128px of blank
   page above the breadcrumb. */
.l1-kb-hero {
    padding: 1.35rem 0 2.25rem;
    text-align: center;
    border-bottom: 1px solid var(--l1-border);
}

.l1-kb-hero--compact {
    text-align: left;
}

.l1-kb-hero h1 {
    margin: .5rem 0 .75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    justify-content: center;
}

.l1-kb-hero--compact h1 {
    justify-content: flex-start;
}

.l1-kb-hero h1 svg {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--l1-primary-dark);
}

.l1-kb-hero__lede {
    color: var(--l1-text-muted);
    max-width: 46rem;
    margin: 0 auto 1.5rem;
}

.l1-kb-hero--compact .l1-kb-hero__lede {
    margin-left: 0;
}

.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;
    justify-content: 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;
    border: 1px solid var(--l1-border);
    border-radius: 999px;
    background: var(--l1-surface);
    color: var(--l1-text-muted);
    text-decoration: none;
}

.l1-kb-hero__popular a:hover {
    border-color: var(--l1-primary-dark);
    color: var(--l1-primary-dark);
}

.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;
}

/* ---------- Search ---------- */

.l1-kb-search {
    position: relative;
    max-width: 44rem;
    margin: 0 auto;
    text-align: left;
}

.l1-kb-hero--compact .l1-kb-search {
    margin-left: 0;
}

.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;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
}

.l1-kb-search__field:focus-within {
    border-color: var(--l1-primary-dark);
    box-shadow: 0 0 0 3px var(--l1-primary-soft);
}

.l1-kb-search--ai .l1-kb-search__field {
    border-color: color-mix(in srgb, var(--l1-primary-dark) 28%, var(--l1-border));
}

.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;
    /* Bootstrap Reboot still paints a border and inner chrome on
       input[type=search]. Without beating it, the field reads as a box
       sitting inside the box. */
    border: 0 !important;
    outline: 0;
    box-shadow: none !important;
    background: transparent !important;
    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;
}

@media (max-width: 40rem) {
    .l1-kb-search__ai-full {
        display: none;
    }

    .l1-kb-search__ai-short {
        display: inline;
    }
}

/* 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);
    border-radius: 6px;
    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;
}

@media (hover: none) {
    .l1-kb-search__hint {
        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;
}

/* ---------- AI answer ---------- */

.l1-kb-answer {
    border: 1px solid var(--l1-border);
    border-left: 3px solid var(--l1-primary-dark);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
    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);
    color: var(--l1-text-muted);
    font-size: .82rem;
    text-decoration: none;
}

.l1-kb-answer__sources a:hover {
    border-color: var(--l1-primary-dark);
    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;
}

.l1-kb-answer__note a {
    color: var(--l1-primary-dark);
}

/* ---------- Layout ---------- */

.l1-kb-section {
    padding: 3rem 0 4rem;
}

.l1-kb-layout {
    display: grid;
    gap: 2.5rem;
    padding: 2.5rem 0 4rem;
    align-items: start;
}

@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;
    }
}

.l1-kb-main {
    min-width: 0;
}

/* ---------- 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;
    color: var(--l1-text-muted);
    font-size: .875rem;
    line-height: 1.35;
    text-decoration: none;
}

.l1-kb-sidebar__list a:hover {
    color: var(--l1-primary-dark);
}

.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;
    }

    .l1-kb-sidebar__disclosure {
        border: 0;
        background: transparent;
        padding: 0;
    }

    /* 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__body {
        padding: 0;
    }
}

/* ---------- Category cards on the index ---------- */

.l1-kb-categories {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 48rem) {
    .l1-kb-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 75rem) {
    .l1-kb-categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.l1-kb-category {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
    padding: 1.35rem;
}

.l1-kb-category:hover {
    border-color: var(--l1-border-strong);
}

.l1-kb-category--accent {
    border-color: var(--l1-primary-dark);
}

.l1-kb-category__head {
    display: flex;
    gap: .85rem;
    color: inherit;
    text-decoration: none;
}

.l1-kb-category__head h2 {
    font-size: 1.05rem;
    margin: 0 0 .3rem;
    color: var(--l1-text);
}

.l1-kb-category__head:hover h2 {
    color: var(--l1-primary-dark);
}

.l1-kb-category__head p {
    margin: 0;
    color: var(--l1-text-muted);
    font-size: .875rem;
    line-height: 1.5;
}

.l1-kb-category__icon {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--l1-primary-soft);
    color: var(--l1-primary-dark);
}

.l1-kb-category__icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.l1-kb-category__list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--l1-border);
}

.l1-kb-category__list a {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem 0;
    color: var(--l1-text-muted);
    font-size: .9rem;
    text-decoration: none;
}

.l1-kb-category__list svg {
    width: .85rem;
    height: .85rem;
    color: var(--l1-text-dim);
    flex: 0 0 auto;
}

.l1-kb-category__list a:hover {
    color: var(--l1-primary-dark);
}

.l1-kb-category__list a:hover svg {
    color: var(--l1-primary-dark);
}

/* ---------- Article cards on a category page ---------- */

.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;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
    color: inherit;
    text-decoration: none;
}

.l1-kb-card__link:hover {
    border-color: var(--l1-primary-dark);
}

.l1-kb-card__index {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--l1-primary-soft);
    color: var(--l1-primary-dark);
    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;
    color: var(--l1-text);
}

.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);
}

/* ---------- 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;
    color: var(--l1-text);
}

.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 {
    color: var(--l1-primary-dark);
    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;
}

/* ---------- 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;
}

.l1-kb-table-scroll > table {
    margin: 0;
    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-copy {
    position: absolute;
    top: .55rem;
    right: .55rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
    color: #e2e8f5;
    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: .55;
    transition: opacity .12s ease, background .12s ease;
}

.l1-kb-code:hover .l1-kb-copy,
.l1-kb-copy:focus-visible {
    opacity: 1;
}

.l1-kb-copy:hover {
    background: rgba(255, 255, 255, .16);
}

.l1-kb-copy svg {
    width: .85rem;
    height: .85rem;
}

.l1-kb-copy.is-copied {
    background: rgba(52, 211, 153, .2);
    border-color: rgba(52, 211, 153, .45);
    color: #a7f3d0;
    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);
}

.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);
}

/* ---------- On this page ---------- */

.l1-kb-toc {
    font-size: .875rem;
}

@media (min-width: 62rem) {
    .l1-kb-toc {
        position: sticky;
        top: 6rem;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }
}

.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;
    color: var(--l1-text-muted);
    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:hover {
    color: var(--l1-primary-dark);
}

.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);
}

/* ---------- Pager ---------- */

.l1-kb-pager {
    display: grid;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--l1-border);
}

@media (min-width: 40rem) {
    .l1-kb-pager {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.l1-kb-pager__link {
    display: block;
    padding: .95rem 1.1rem;
    border: 1px solid var(--l1-border);
    border-radius: var(--l1-radius-lg);
    background: var(--l1-surface);
    text-decoration: none;
}

.l1-kb-pager__link:hover {
    border-color: var(--l1-primary-dark);
}

.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__spacer {
        display: block;
    }
}

/* ---------- Search results ---------- */

.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;
}

.l1-kb-result {
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--l1-border);
}

.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 {
    color: var(--l1-text);
    text-decoration: none;
}

.l1-kb-result h2 a:hover {
    color: var(--l1-primary-dark);
}

.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;
}

/* ---- 17-blog.css ---- */
/* Public journal: geometry and shared marketing colors for both themes.
 * Rebuild with scripts/build_css.sh --marketing-only.
 */
.l1-blog-hero { padding: 6.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: clamp(2.4rem, 5.5vw, 4.5rem); letter-spacing: -.055em; line-height: 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; border: 1px solid var(--mkt-line); border-radius: 4px; }
.l1-blog-search .l1-btn { min-height: 46px; 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 { display: block; 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; }
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-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-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; }
.l1-article-shell { padding: 6.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: clamp(2rem, 4.7vw, 3.9rem); letter-spacing: -.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-head .l1-blog-card-avatar { width: 36px; height: 36px; background: var(--mkt-blue-soft); color: var(--mkt-blue-dark); font-size: .9rem; border: 0; }
.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 { 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; font-size: 1.0625rem; line-height: 1.85; color: var(--mkt-ink); 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. */
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); }
@media (max-width: 991.98px) {
    .l1-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .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: 760px; margin-inline: auto; width: 100%; }
}
@media (max-width: 639.98px) {
    .l1-blog-hero, .l1-article-shell { padding-top: 5.5rem; }
    .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; }
    .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; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.l1-marketing-v2 .l1-journal-card { transition: none; }
    body.l1-marketing-v2 .l1-journal-card:hover { transform: none; }
}

/* ---- 18-marketing-v2.css ---- */
/* 18-marketing-v2.css - LayerOne public marketing V2
 *
 * A deliberately quieter visual system for every page rendered by
 * layouts/marketing.html. The earlier modules still own component geometry and
 * backwards compatibility for CMS-authored content; this file is the coherent
 * public-site art direction: editorial type, restrained cobalt, calm surfaces,
 * and technical detail only where it communicates something useful.
 *
 * Keep this scoped to .l1-marketing-v2. Console and client pages use their own
 * design system and must not inherit marketing presentation.
 */

/* ---------- Foundation ---------- */
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: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    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;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 {
    --mkt-bg: #0c1119;
    --mkt-paper: #121925;
    --mkt-paper-muted: #171f2c;
    --mkt-ink: #f3f5f8;
    --mkt-muted: #a5adba;
    --mkt-line: #2b3442;
    --mkt-line-strong: #465163;
    --mkt-blue: #155dd9;
    --mkt-blue-dark: #9bb8f5;
    --mkt-blue-hover: #104cc8;
    --mkt-blue-soft: rgba(21, 93, 217, 0.18);
    --mkt-graphic-bg: #070b11;
    --mkt-footer-bg: #070b11;
}

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

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

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);
}

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

/* ---------- Utility chrome ---------- */
body.l1-marketing-v2 .l1-contactbar {
    background: var(--mkt-paper) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mkt-line) !important;
    color: var(--mkt-muted);
    min-height: 32px;
    position: relative !important;
    top: auto !important;
    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);
}

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;
}

body.l1-marketing-v2 .l1-contactbar-link:hover {
    color: var(--mkt-ink) !important;
}

body.l1-marketing-v2 .l1-navbar {
    background: color-mix(in srgb, var(--mkt-paper) 94%, transparent) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mkt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    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);
}

body.l1-marketing-v2 .l1-brand img {
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
    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-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;
}

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) !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: 2px !important;
    box-shadow: 0 18px 50px rgba(15, 20, 31, 0.12) !important;
    padding: 0.45rem !important;
}

body.l1-marketing-v2 .l1-menu-link {
    border-radius: 1px !important;
    color: var(--mkt-ink) !important;
    font-size: 0.82rem;
    gap: 0.7rem;
    padding: 0.65rem 0.75rem !important;
}

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

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;
}

body.l1-marketing-v2 .l1-sign-in-link .l1-nav-link {
    padding-inline: 0.85rem !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;
}

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;
}

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;
}

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

body.l1-marketing-v2 .l1-profile-avatar {
    border: 1px solid var(--mkt-line) !important;
    border-radius: 999px !important;
    overflow: hidden;
}

body.l1-marketing-v2 .l1-profile-toggle {
    align-items: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    height: 40px !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 40px !important;
}

body.l1-marketing-v2 .l1-profile-avatar-blank {
    flex: 0 0 28px !important;
    height: 28px !important;
    width: 28px !important;
}

/* ---------- Homepage hero ---------- */
html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top {
    background: var(--l1-rail-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mkt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    position: relative;
    width: 100% !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 {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 58px 58px;
    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 .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.5rem, 1.8vw, 1.75rem) clamp(1.25rem, 3.2vw, 2.5rem) clamp(2rem, 3vw, 3rem) !important;
    width: 100% !important;
}

body.l1-marketing-v2 .l1-hero-atmosphere {
    bottom: auto !important;
    color: rgba(255, 255, 255, 0.58);
    display: block !important;
    font-family: var(--mkt-mono);
    font-size: 0.64rem;
    inset: 1.5rem clamp(1.25rem, 3.2vw, 2.5rem) auto auto !important;
    letter-spacing: 0.08em;
    overflow: visible;
    position: absolute;
    z-index: 2;
}

body.l1-marketing-v2 .l1-hero-row {
    align-items: center;
    display: grid !important;
    gap: clamp(3rem, 7vw, 7rem) !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.85fr) !important;
    isolation: isolate;
    min-height: 0 !important;
    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;
}

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

body.l1-marketing-v2 .l1-home-hero .l1-eyebrow {
    color: rgba(255, 255, 255, 0.82) !important;
}

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

html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top .l1-hero-title {
    color: #ffffff !important;
    font-size: clamp(3.25rem, 6.5vw, 6.25rem) !important;
    font-weight: 610 !important;
    letter-spacing: -0.05em !important;
    line-height: 0.96 !important;
    margin: 1.6rem 0 1.75rem !important;
    max-width: 10.5ch !important;
    text-shadow: none !important;
    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 !important;
    background: none !important;
    color: #a9ccff !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 !important;
    margin: 0 !important;
    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;
}

body.l1-marketing-v2 .l1-link-arrow {
    color: var(--mkt-ink) !important;
    font-size: 0.83rem;
    font-weight: 620;
    text-decoration: none;
}

body.l1-marketing-v2 .l1-link-arrow:hover {
    color: var(--mkt-blue-dark) !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;
}

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. 15-public-redesign.css:88 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 those in 15-public-redesign.css 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;
}

body.l1-marketing-v2 .l1-hero-preview-stack {
    margin: 0 auto;
    max-width: 520px;
    position: relative;
    transform: translateX(1rem);
    width: 100%;
    z-index: 1;
}

body.l1-marketing-v2 .l1-hero-visual {
    background: var(--mkt-graphic-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 32px 80px rgba(4, 18, 49, 0.38) !important;
    color: #ffffff;
    display: block !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: hidden;
    padding: 1.15rem !important;
    position: relative;
    transform: none !important;
    width: 100% !important;
    z-index: 1;
}

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

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 1rem;
}

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.3rem;
}

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.75rem 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: 1rem 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.15rem 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;
}

@keyframes l1-v2-cursor { 50% { opacity: 0; } }

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

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

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

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;
}

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

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

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% !important;
    z-index: 1;
}

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%;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-trust-seal {
    background: linear-gradient(180deg, rgba(21, 93, 217, 0.16) 0%, var(--mkt-paper) 100%);
}

body.l1-marketing-v2 .l1-compliance-band-copy {
    align-content: end;
    border-left: 0 !important;
    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) !important;
    font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
    font-style: normal !important;
    font-weight: 620 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    max-width: 18ch;
}

body.l1-marketing-v2 .l1-compliance-band-copy p {
    color: var(--mkt-muted) !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    margin: 0.15rem 0 0 !important;
    max-width: 58ch;
}

body.l1-marketing-v2 .l1-compliance-grid {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: grid !important;
    gap: 0.7rem !important;
    grid-area: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

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;
}

body.l1-marketing-v2 .l1-compliance-grid > li + li {
    border-left: 1px solid var(--mkt-line) !important;
}

body.l1-marketing-v2 .l1-compliance-grid > li:last-child {
    border-right: 1px solid var(--mkt-line) !important;
}

body.l1-marketing-v2 .l1-compliance-tile {
    align-items: center !important;
    aspect-ratio: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column;
    gap: 0.8rem;
    height: 100%;
    justify-content: center !important;
    min-height: 116px !important;
    padding: 1rem 0.75rem !important;
    text-align: center;
}

body.l1-marketing-v2 .l1-compliance-icon {
    align-items: center;
    background: #10151f !important;
    border: 1px solid #10151f !important;
    border-radius: 2px !important;
    color: #ffffff !important;
    display: inline-flex !important;
    flex: 0 0 34px;
    font-size: 0.82rem !important;
    height: 34px;
    justify-content: center;
    margin: 0 !important;
    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) !important;
    font-family: var(--mkt-mono);
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em;
    max-width: none !important;
    text-align: center !important;
    width: 100% !important;
}

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

/* ---------- Shared sections and inner-page hero ---------- */
body.l1-marketing-v2 .l1-section {
    background: var(--mkt-bg) !important;
    border: 0 !important;
    color: var(--mkt-ink) !important;
    padding: clamp(3.75rem, 6vw, 5.5rem) 0 !important;
}

body.l1-marketing-v2 .l1-section-alt {
    background: var(--mkt-paper-muted) !important;
}

body.l1-marketing-v2 .l1-section-dark {
    background: var(--mkt-night) !important;
    background-image: none !important;
    border-color: #283140 !important;
    color: #ffffff !important;
}

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;
}

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) !important;
    max-width: 780px !important;
    text-align: left !important;
}

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

body.l1-marketing-v2 .l1-section-sub {
    color: var(--mkt-muted) !important;
    font-size: clamp(0.98rem, 1.3vw, 1.08rem) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    max-width: 710px;
}

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 !important;
    overflow: hidden;
    padding: clamp(2rem, 3vw, 2.75rem) 0 clamp(2.25rem, 3.25vw, 3rem) !important;
    position: relative;
    text-align: left !important;
    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);
    content: "L1 / INFRASTRUCTURE";
    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;
}

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 !important;
    box-shadow: none !important;
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-block: 0 !important;
    text-align: left !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,
html[data-l1-theme] body.l1-marketing-v2 .l1-article-hero h1 {
    color: var(--mkt-ink) !important;
    font-size: clamp(2.65rem, 4.2vw, 4.25rem) !important;
    font-weight: 610 !important;
    letter-spacing: -0.05em !important;
    line-height: 0.98 !important;
    margin: 0.75rem 0 1rem !important;
    max-width: 12ch;
    text-align: left !important;
    text-shadow: none !important;
    word-spacing: 0.03em;
}

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 !important;
    margin: 0 !important;
    max-width: 760px !important;
    text-align: left !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;
}

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 !important;
    padding: 0 1.2rem 0 0 !important;
}

/* ---------- Cards become a precise content grid ---------- */
body.l1-marketing-v2 .l1-content-frame {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: clamp(0.9rem, 1.8vw, 1.35rem) !important;
    overflow: visible !important;
    padding: 0 !important;
}

body.l1-marketing-v2 .l1-bento-grid {
    background: transparent !important;
    gap: clamp(0.9rem, 1.8vw, 1.35rem) !important;
}

body.l1-marketing-v2 .l1-content-cell,
body.l1-marketing-v2 .l1-bento-card,
body.l1-marketing-v2 .l1-feature-card,
body.l1-marketing-v2 .l1-plan-card,
body.l1-marketing-v2 .l1-faq-item,
body.l1-marketing-v2 .l1-accordion-item,
body.l1-marketing-v2 .l1-spec-row {
    background: var(--mkt-paper) !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--mkt-ink) !important;
}

body.l1-marketing-v2 .l1-section-dark .l1-content-cell,
body.l1-marketing-v2 .l1-section-dark .l1-bento-card,
body.l1-marketing-v2 .l1-section-dark .l1-feature-card {
    background: var(--mkt-night-raised) !important;
    border-color: #2b3544 !important;
    color: #ffffff !important;
}

body.l1-marketing-v2 .l1-content-cell {
    padding: clamp(1.5rem, 3vw, 2.5rem) !important;
    transition: background-color 0.16s ease, border-color 0.16s ease !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;
    border-color: var(--mkt-blue) !important;
    transform: none !important;
}

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

body.l1-marketing-v2 .l1-content-cell p,
body.l1-marketing-v2 .l1-bento-card p,
body.l1-marketing-v2 .l1-feature-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;
    background: transparent !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--mkt-blue) !important;
    display: inline-flex;
    font-size: 0.82rem !important;
    height: 30px !important;
    justify-content: center;
    margin-bottom: 1.7rem !important;
    width: 30px !important;
}

body.l1-marketing-v2 .l1-section-dark .l1-bento-icon,
body.l1-marketing-v2 .l1-section-dark .l1-feature-icon {
    border-color: #364154 !important;
    color: var(--mkt-blue-dark) !important;
}

body.l1-marketing-v2 .l1-feature-tags span,
body.l1-marketing-v2 .l1-plan-tag,
body.l1-marketing-v2 .l1-plan-badge {
    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.61rem !important;
}

body.l1-marketing-v2 .l1-telemetry,
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 !important;
    box-shadow: none !important;
}

body.l1-marketing-v2 .l1-testimonial-card {
    border-top: 2px solid var(--mkt-blue) !important;
}

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) !important;
    border-radius: 1px !important;
    color: #ffffff !important;
}

/* ---------- Pricing catalog ---------- */
body.l1-marketing-v2 .l1-pricing-stage,
body.l1-marketing-v2 .l1-plan-matrix-section {
    background: var(--mkt-bg) !important;
}

body.l1-marketing-v2 .l1-plan-matrix-section {
    border: 0;
    padding: clamp(3.25rem, 6vw, 5.5rem) 0;
}

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) !important;
    border-color: var(--mkt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.l1-marketing-v2 .l1-pricing-controls {
    border: 1px solid var(--mkt-line) !important;
    padding: 1.2rem !important;
}

body.l1-marketing-v2 .l1-pick-grid {
    gap: 0 !important;
}

body.l1-marketing-v2 .l1-pick {
    background: transparent !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.l1-marketing-v2 .l1-pick.is-selected {
    background: var(--mkt-night) !important;
    border-color: var(--mkt-night) !important;
    color: #ffffff !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;
}

body.l1-marketing-v2 .l1-pricing-cadence-switch {
    background: var(--mkt-paper-muted) !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: 1px !important;
}

body.l1-marketing-v2 .l1-pricing-cadence-switch button {
    border-radius: 0 !important;
}

body.l1-marketing-v2 .l1-pricing-cadence-switch button.is-active {
    background: var(--mkt-ink) !important;
    color: var(--mkt-paper) !important;
}

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) !important;
    letter-spacing: -0.05em !important;
}

body.l1-marketing-v2 .l1-plan-matrix-family-port,
body.l1-marketing-v2 .l1-plan-matrix-badge {
    background: var(--mkt-blue-soft) !important;
    border: 0 !important;
    border-radius: 1px !important;
    color: var(--mkt-blue-dark) !important;
    font-family: var(--mkt-mono);
}

body.l1-marketing-v2 .l1-plan-matrix-head {
    background: var(--mkt-night) !important;
    border-color: #2d3747 !important;
    color: #9faabb !important;
    font-family: var(--mkt-mono);
    font-size: 0.59rem !important;
    letter-spacing: 0.05em;
}

body.l1-marketing-v2 .l1-plan-matrix-row {
    background: var(--mkt-paper) !important;
    border-color: var(--mkt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.l1-marketing-v2 .l1-plan-matrix-row:hover {
    background: var(--mkt-blue-soft) !important;
    transform: none !important;
}

body.l1-marketing-v2 .l1-plan-matrix-row.is-featured {
    border-color: var(--mkt-blue) !important;
}

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);
}

body.l1-marketing-v2 .l1-plan-matrix-cta {
    border-radius: 1px !important;
}

/* ---------- Forms, FAQ, articles ---------- */
body.l1-marketing-v2 .l1-faq-list,
body.l1-marketing-v2 .l1-faq,
body.l1-marketing-v2 .l1-accordion {
    gap: 0 !important;
    max-width: 900px;
}

body.l1-marketing-v2 .l1-faq-item,
body.l1-marketing-v2 .l1-accordion-item {
    margin: -1px 0 0 !important;
    padding: 1.25rem 1.35rem !important;
}

body.l1-marketing-v2 .l1-accordion-button {
    color: var(--mkt-ink) !important;
    font-size: 0.95rem !important;
    font-weight: 610 !important;
}

body.l1-marketing-v2 .l1-accordion-body,
body.l1-marketing-v2 .l1-faq-item p {
    color: var(--mkt-muted) !important;
}

body.l1-marketing-v2 .l1-contact-card,
body.l1-marketing-v2 .l1-looking-glass-card,
body.l1-marketing-v2 .l1-form-card {
    background: var(--mkt-paper) !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

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;
}

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;
}

body.l1-marketing-v2 .l1-article-shell,
body.l1-marketing-v2 .l1-builder-article {
    background: var(--mkt-bg) !important;
    color: var(--mkt-ink) !important;
}

body.l1-marketing-v2 .l1-article-prose,
body.l1-marketing-v2 .l1-builder-prose {
    color: var(--mkt-ink);
}

body.l1-marketing-v2 .l1-section > .l1-legal {
    padding-block: 0 !important;
}

body.l1-marketing-v2 .l1-section > .l1-legal .l1-legal-meta {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--mkt-blue-dark) !important;
    font-family: var(--mkt-mono);
    font-size: 0.64rem !important;
    font-weight: 650;
    letter-spacing: 0.08em;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    text-transform: uppercase;
}

body.l1-marketing-v2 .l1-section > .l1-legal .l1-legal-content > h1 {
    color: var(--mkt-ink) !important;
    font-size: clamp(2.7rem, 5vw, 4.75rem) !important;
    font-weight: 610 !important;
    letter-spacing: -0.048em !important;
    line-height: 1 !important;
    margin: 0 0 1.35rem !important;
    max-width: 14ch;
    word-spacing: 0.025em;
}

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 {
    font-size: clamp(2.15rem, 4.5vw, 4rem) !important;
    margin-bottom: 1.15rem !important;
    max-width: 12ch;
    text-align: left !important;
}

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;
    }
}

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 !important;
    max-width: 920px;
}

/* ---------- Documentation ---------- */
body.l1-marketing-v2 .l1-kb {
    background: var(--mkt-bg) !important;
}

body.l1-marketing-v2 .l1-kb-hero {
    background: var(--mkt-paper) !important;
    border: 0 !important;
    padding: clamp(3rem, 5vw, 4rem) 0 clamp(2.5rem, 4vw, 3.5rem) !important;
    text-align: center !important;
}

/* 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) !important;
    text-align: left !important;
}

body.l1-marketing-v2 .l1-kb-hero h1 {
    color: var(--mkt-ink) !important;
    font-size: clamp(2.7rem, 5.5vw, 5rem) !important;
    font-weight: 610 !important;
    justify-content: center !important;
    letter-spacing: -0.048em !important;
    line-height: 1 !important;
    margin: 0.9rem 0 1rem !important;
    word-spacing: 0.025em;
}

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) !important;
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 auto 1.5rem !important;
    max-width: 710px;
}

body.l1-marketing-v2 .l1-kb-hero--compact .l1-kb-hero__lede {
    margin-left: 0 !important;
}

body.l1-marketing-v2 .l1-kb-search {
    margin: 0 auto !important;
    max-width: 760px;
}

body.l1-marketing-v2 .l1-kb-hero--compact .l1-kb-search {
    margin-left: 0 !important;
}

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) !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.l1-marketing-v2 .l1-kb-search__field:focus-within {
    border-color: var(--mkt-blue) !important;
    box-shadow: 0 0 0 1px var(--mkt-blue) !important;
}

body.l1-marketing-v2 .l1-kb-search__input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.l1-marketing-v2 .l1-kb-search__hint {
    border-radius: 1px !important;
}

body.l1-marketing-v2 .l1-kb-hero__popular {
    justify-content: center !important;
    margin-top: 1rem !important;
}

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;
}

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;
}

body.l1-marketing-v2 .l1-kb-section {
    background: var(--mkt-bg) !important;
    padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(3.5rem, 6vw, 5.5rem) !important;
}

body.l1-marketing-v2 .l1-kb-categories {
    gap: 0 !important;
}

body.l1-marketing-v2 .l1-kb-category {
    background: var(--mkt-paper) !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: 0 !important;
    margin: -1px 0 0 -1px;
    padding: clamp(1.25rem, 2.5vw, 1.8rem) !important;
}

body.l1-marketing-v2 .l1-kb-category:hover {
    background: var(--mkt-blue-soft) !important;
    border-color: var(--mkt-blue) !important;
    position: relative;
    z-index: 1;
}

body.l1-marketing-v2 .l1-kb-category__icon,
body.l1-marketing-v2 .l1-kb-card__index {
    background: var(--mkt-blue-soft) !important;
    border-radius: 1px !important;
    color: var(--mkt-blue-dark) !important;
}

/* 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;
}

body.l1-marketing-v2 .l1-kb-home-hero h1 {
    margin-inline: auto !important;
    max-width: 13ch;
}

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-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;
}

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 {
    background: var(--mkt-paper);
    border: 1px solid var(--mkt-line);
    border-radius: 0;
    color: var(--mkt-ink);
    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 {
    border-color: var(--mkt-blue);
    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: 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-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);
    }

    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;
    }

    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;
    }
}

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);
}

/* The desktop navigation is an index, not a card. The mobile disclosure keeps
   its compact control surface; once the three-column layout is active, remove
   the enclosing box and let the category/active-page hierarchy do the work. */
@media (min-width: 62rem) {
    body.l1-marketing-v2 .l1-kb-sidebar__disclosure {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    body.l1-marketing-v2 .l1-kb-sidebar__body {
        padding: 0 !important;
    }
}

/* ---------- Public status ---------- */
body.l1-marketing-v2 .l1-status-public {
    padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(3.5rem, 6vw, 5rem) !important;
}

body.l1-marketing-v2 .l1-status-public .status-page {
    display: grid;
    gap: 1.25rem;
}

body.l1-marketing-v2 .l1-status-public .status-hero {
    background: var(--mkt-paper) !important;
    background-image: none !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--mkt-ink) !important;
    min-height: 0 !important;
    padding: clamp(1.75rem, 4vw, 3rem) !important;
}

body.l1-marketing-v2 .l1-status-public .status-hero .eyebrow {
    color: var(--mkt-blue-dark) !important;
    font-family: var(--mkt-mono) !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.08em !important;
}

body.l1-marketing-v2 .l1-status-public .status-hero h1 {
    color: var(--mkt-ink) !important;
    font-size: clamp(2.5rem, 5vw, 4.75rem) !important;
    font-weight: 610 !important;
    letter-spacing: -0.048em !important;
    line-height: 1 !important;
    margin: 0.65rem 0 0.75rem !important;
    text-align: left !important;
    text-shadow: none !important;
    word-spacing: 0.025em;
}

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: var(--mkt-muted) !important;
}

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 {
    background: var(--mkt-paper) !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.l1-marketing-v2 .l1-status-public .public-status-summary {
    border-color: var(--mkt-line) !important;
    padding: clamp(1.25rem, 3vw, 2rem) !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;
    font-size: clamp(1.6rem, 3vw, 2.5rem) !important;
    letter-spacing: -0.045em !important;
}

body.l1-marketing-v2 .l1-status-public .public-status-refresh {
    background: transparent !important;
    border: 1px solid var(--mkt-line) !important;
    border-radius: 1px !important;
    color: var(--mkt-muted) !important;
    font-family: var(--mkt-mono);
}

body.l1-marketing-v2 .l1-status-public .ui-empty {
    background: var(--mkt-paper) !important;
    border-radius: 0 !important;
    color: var(--mkt-ink) !important;
    padding: clamp(2.5rem, 5vw, 4rem) !important;
}

/* ---------- Closing CTA ---------- */
body.l1-marketing-v2 .l1-cta-section {
    background: var(--mkt-night) !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 3px solid var(--mkt-blue) !important;
    padding: 0 !important;
}

body.l1-marketing-v2 .l1-cta-card {
    align-items: end !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff;
    display: grid !important;
    gap: 3rem !important;
    grid-template-columns: minmax(0, 1.5fr) auto !important;
    padding: clamp(3.25rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.2rem) !important;
}

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

body.l1-marketing-v2 .l1-cta-card h2 {
    color: #ffffff !important;
    font-size: clamp(2.7rem, 5.4vw, 5.3rem) !important;
    font-weight: 610 !important;
    letter-spacing: -0.05em !important;
    line-height: 0.98 !important;
    margin: 0 0 1.25rem !important;
    max-width: 10ch;
    word-spacing: 0.03em;
}

body.l1-marketing-v2 .l1-cta-card p {
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    max-width: 620px;
}

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

body.l1-marketing-v2 .l1-cta-card .l1-btn-primary {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #10151f !important;
}

body.l1-marketing-v2 .l1-cta-card .l1-btn-primary:hover {
    background: #e8eefb !important;
    border-color: #e8eefb !important;
    color: #10151f !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 !important;
}

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

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

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;
}

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 !important;
    font-family: var(--mkt-mono) !important;
    font-size: 0.61rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}

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

body.l1-marketing-v2 .l1-footer-list a {
    color: #9ca7b7 !important;
    font-size: 0.78rem;
}

body.l1-marketing-v2 .l1-footer-list a:hover {
    color: #ffffff !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 !important;
    color: #7e8999 !important;
    font-family: var(--mkt-mono);
    font-size: 0.61rem !important;
    letter-spacing: 0.02em;
}

body.l1-marketing-v2 .l1-footer-bottom a {
    color: #aab4c2 !important;
}

/* ---------- Dark theme adjustments ---------- */
html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-navbar {
    background: rgba(18, 25, 37, 0.94) !important;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-home-hero.l1-hero#top {
    border-bottom-color: #1d3559 !important;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-home-proof-zone {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--l1-secondary) 48%, var(--mkt-bg)) 0%,
        #101827 34%,
        var(--mkt-bg) 100%
    );
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-dropdown,
html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-content-cell,
html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-faq-item,
html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-accordion-item,
html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-contact-card,
html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-plan-matrix-wrap,
html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-plan-matrix-row {
    background: var(--mkt-paper) !important;
}

/* ---------- Contrast contract ----------
 * 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.
 */
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 !important;
    color: #10151f !important;
}

body.l1-marketing-v2 .l1-hero-atmosphere {
    color: #6c7582 !important;
}

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

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-hero-atmosphere {
    color: var(--mkt-on-dark-muted) !important;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-home-hero .l1-hero-atmosphere {
    color: #edf4ff !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;
}

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) !important;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-contact-hero p {
    color: var(--mkt-muted) !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;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-hero-stats {
    background: transparent !important;
    border-color: var(--mkt-line) !important;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-hero-stats strong {
    color: var(--mkt-ink) !important;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-page-hero .l1-hero-stats span {
    color: var(--mkt-muted) !important;
}

body.l1-marketing-v2 .l1-solution-panel {
    background: var(--mkt-night) !important;
    border: 1px solid #2d3747 !important;
    border-radius: 2px !important;
    color: var(--mkt-on-dark) !important;
}

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;
}

body.l1-marketing-v2 .l1-solution-visual-row strong {
    color: var(--mkt-on-dark) !important;
}

body.l1-marketing-v2 .l1-section-dark .l1-eyebrow,
body.l1-marketing-v2 .l1-cta-card .l1-eyebrow {
    color: var(--mkt-on-dark-link) !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-feature-card h3,
body.l1-marketing-v2 .l1-section-dark .l1-content-cell strong {
    color: var(--mkt-on-dark) !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 .l1-feature-card p,
body.l1-marketing-v2 .l1-section-dark .tw\:text-ink-muted {
    color: var(--mkt-on-dark-muted) !important;
}

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;
}

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-section-dark .l1-addon-unit {
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--mkt-on-dark-muted) !important;
}

body.l1-marketing-v2 .l1-section-dark .l1-addon-price {
    color: var(--mkt-on-dark) !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;
}

body.l1-marketing-v2 .l1-home-hero#top .l1-hero-cta .l1-link-arrow {
    color: #ffffff !important;
}

body.l1-marketing-v2 .l1-footer-tagline a {
    color: var(--mkt-on-dark-link) !important;
}

body.l1-marketing-v2 .l1-footer .l1-footer-legal {
    color: #8591a3 !important;
}

body.l1-marketing-v2 .l1-mockup-status {
    color: #08764a !important;
}

body.l1-marketing-v2 .l1-control-chip.is-active {
    background: var(--mkt-blue) !important;
    color: #ffffff !important;
}

body.l1-marketing-v2 .l1-launch-step .l1-step-num {
    color: var(--mkt-muted) !important;
}

body.l1-marketing-v2 .l1-plan-sku {
    color: #08764a !important;
}

body.l1-marketing-v2 .tw\:bg-brand-soft.tw\:text-brand {
    color: var(--mkt-blue-dark) !important;
}

/* ---------- Surface hierarchy ----------
 * 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,
body.l1-marketing-v2 .l1-kb-categories {
    gap: clamp(0.85rem, 1.7vw, 1.25rem) !important;
}

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;
}

body.l1-marketing-v2 .l1-content-cell,
body.l1-marketing-v2 .l1-bento-card,
body.l1-marketing-v2 .l1-feature-card,
body.l1-marketing-v2 article.l1-feature,
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-looking-glass-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-kb-category,
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;
}

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;
}

body.l1-marketing-v2 .l1-content-cell,
body.l1-marketing-v2 .l1-bento-card,
body.l1-marketing-v2 .l1-feature-card,
body.l1-marketing-v2 article.l1-feature,
body.l1-marketing-v2 .l1-testimonial-card {
    box-shadow: none !important;
}

body.l1-marketing-v2 .l1-section-dark .l1-content-cell,
body.l1-marketing-v2 .l1-section-dark .l1-bento-card,
body.l1-marketing-v2 .l1-section-dark .l1-feature-card,
html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-content-cell,
html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-bento-card,
html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-feature-card {
    border: 0 !important;
    box-shadow: none !important;
}

body.l1-marketing-v2 a.l1-content-cell:hover,
body.l1-marketing-v2 .l1-bento-card-link:hover,
body.l1-marketing-v2 .l1-kb-category:hover {
    border: 0 !important;
    box-shadow: none !important;
}

/* 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;
}

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

body.l1-marketing-v2 .l1-content-frame .l1-stat-rail .l1-stat-card {
    background: var(--mkt-paper-muted) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

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

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

body.l1-marketing-v2 .l1-feature-tags {
    column-gap: 1rem !important;
    row-gap: 0.55rem !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) !important;
    border-radius: 999px;
    content: "";
    height: 4px;
    margin-right: 0.45rem;
    width: 4px;
}

body.l1-marketing-v2 .tw\:bg-brand-soft.tw\:text-brand {
    border: 0 !important;
    border-radius: 999px !important;
}

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) !important;
    border: 0 !important;
    border-radius: 999px !important;
}

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 !important;
}

body.l1-marketing-v2 .l1-faq-item,
body.l1-marketing-v2 .l1-accordion-item {
    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;
    padding-inline: 0 !important;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-pricing-page .l1-faq .l1-accordion-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mkt-line) 28%, transparent) !important;
    box-shadow: none !important;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-pricing-page .l1-faq .l1-accordion-button {
    box-shadow: none !important;
    padding-inline: 0.15rem 1.5rem !important;
}

html[data-l1-theme] body.l1-marketing-v2 .l1-pricing-page .l1-faq .l1-accordion-button::after {
    background: transparent !important;
    border-color: color-mix(in srgb, var(--mkt-line-strong) 36%, transparent) !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--mkt-muted) 72%, transparent) !important;
    height: 24px !important;
    width: 24px !important;
}

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;
}

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

@media (min-width: 768px) {
    body.l1-marketing-v2 .l1-let-promo-hero .l1-builder-actions {
        justify-content: flex-start;
    }
}

body.l1-marketing-v2 .l1-solution-panel,
body.l1-marketing-v2 .l1-pricing-controls,
body.l1-marketing-v2 .l1-plan-matrix-wrap {
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 48px rgba(15, 20, 31, 0.12) !important;
}

body.l1-marketing-v2 .l1-pick {
    background: var(--mkt-paper-muted) !important;
    border: 0 !important;
    border-radius: 10px !important;
}

body.l1-marketing-v2 .l1-plan-matrix-head,
body.l1-marketing-v2 .l1-plan-matrix-row {
    border: 0 !important;
    border-bottom: 1px solid var(--mkt-line) !important;
}

body.l1-marketing-v2 .l1-plan-matrix-row.is-featured {
    background: var(--mkt-blue-soft) !important;
    border-color: var(--mkt-line) !important;
}

body.l1-marketing-v2 .l1-cta-section,
body.l1-marketing-v2 .l1-cta-card {
    border: 0 !important;
}

/* ---------- Infrastructure signals ----------
 * The homepage visuals share one monitoring language: a quiet surface,
 * readable scales, direct values, and status colour used only as a signal.
 */
body.l1-marketing-v2 .l1-signal-panel {
    --signal-accent: var(--mkt-blue);
    --signal-accent-soft: var(--mkt-blue-soft);
    --signal-grid: rgba(82, 98, 122, 0.16);
    background: linear-gradient(145deg, var(--mkt-paper-muted), var(--mkt-paper)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(15, 20, 31, 0.06) !important;
    color: var(--mkt-ink) !important;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.25rem);
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-signal-panel {
    --signal-accent: var(--mkt-blue);
    --signal-accent-soft: var(--mkt-blue-soft);
    --signal-grid: rgba(172, 188, 213, 0.13);
    background: linear-gradient(145deg, #172131, #111925) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18) !important;
}

body.l1-marketing-v2 .l1-signal-panel-availability {
    --signal-accent: #0d956c;
    --signal-accent-soft: rgba(13, 149, 108, 0.13);
}

/* ========================================================================
   Utility pages — Looking Glass and public status
   ======================================================================== */

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;
    color: var(--mkt-blue-dark);
    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;
}

body.l1-marketing-v2 .looking-glass-page .l1-eyebrow-dot {
    background: var(--mkt-blue);
    border-radius: 999px;
    height: 6px;
    width: 6px;
}

body.l1-marketing-v2 .looking-glass-page .l1-lg-hero h1 {
    color: var(--mkt-ink) !important;
    font-size: clamp(2.8rem, 5.5vw, 4.9rem) !important;
    font-weight: 610 !important;
    letter-spacing: -0.055em !important;
    line-height: 0.98 !important;
    margin: 0 !important;
    max-width: 12ch;
}

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) !important;
    line-height: 1.62 !important;
    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 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;
}

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;
}

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) !important;
    font-weight: 620 !important;
    letter-spacing: -0.035em !important;
    margin: 0 !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 !important;
    line-height: 1.55 !important;
    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;
}

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%;
}

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;
}

body.l1-marketing-v2 .l1-lg-target-control {
    display: grid !important;
    gap: 0.7rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

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;
}

body.l1-marketing-v2 .l1-lg-output {
    background: #0b1321;
    border-radius: 16px;
    margin-top: 1rem;
    overflow: hidden;
}

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;
}

body.l1-marketing-v2 .l1-lg-output .l1-doc-card-kicker,
body.l1-marketing-v2 .l1-lg-output h2 {
    color: #eef4ff !important;
}

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;
}

body.l1-marketing-v2 .l1-lg-output pre {
    background: transparent !important;
    color: #e3ebf7 !important;
    font-size: 0.84rem;
    line-height: 1.65;
    margin: 0;
    max-height: 480px;
    overflow: auto;
    padding: 0.8rem 1.35rem 1.35rem;
    white-space: pre-wrap;
}

/* Status pages lead with the signal, then expose the data in calm rows. */
body.l1-marketing-v2 .l1-status-public {
    padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(3.5rem, 6vw, 5rem) !important;
}

body.l1-marketing-v2 .l1-status-public .status-page {
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

body.l1-marketing-v2 .l1-status-public .status-hero {
    background: linear-gradient(145deg, #111c2f, #0b1321) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 46px rgba(15, 20, 31, 0.10) !important;
    color: #ffffff !important;
    min-height: 0 !important;
    padding: clamp(1.7rem, 4vw, 2.8rem) !important;
}

body.l1-marketing-v2 .l1-status-public .status-hero::before {
    display: none;
}

body.l1-marketing-v2 .l1-status-public .status-hero .eyebrow {
    align-items: center;
    color: #a9b6ca !important;
    display: inline-flex;
    gap: 0.55rem;
}

.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"] { color: #f5b942; }
.status-signal-dot[data-tone="danger"] { color: #f97066; }
.status-signal-dot[data-tone="neutral"] { color: #9eabc0; }

body.l1-marketing-v2 .l1-status-public .status-hero h1 {
    color: #ffffff !important;
    font-size: clamp(2.45rem, 5vw, 4.35rem) !important;
    margin: 0.65rem 0 0.75rem !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;
}

body.l1-marketing-v2 .l1-status-public .status-hero .ui-status {
    background: rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
}

body.l1-marketing-v2 .l1-status-public .public-status-shell,
body.l1-marketing-v2 .l1-status-public .status-incidents {
    background: transparent !important;
    border: 0 !important;
    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 !important;
    border: 0 !important;
    padding: 0 0 1rem !important;
}

body.l1-marketing-v2 .l1-status-public .public-status-refresh {
    background: var(--mkt-paper-muted) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0.48rem 0.7rem !important;
}

body.l1-marketing-v2 .l1-status-public .public-status-summary h2,
body.l1-marketing-v2 .l1-status-public .status-section-heading h2 {
    font-size: clamp(1.65rem, 3vw, 2.35rem) !important;
}

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;
}

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 !important;
    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 !important;
    border-bottom: 1px solid var(--mkt-line) !important;
    padding: 1rem 1.15rem !important;
}

body.l1-marketing-v2 .l1-status-public .status-service {
    border-color: var(--mkt-line) !important;
}

body.l1-marketing-v2 .l1-status-public .status-service-trigger {
    border: 0 !important;
    padding: 1rem 1.15rem !important;
}

body.l1-marketing-v2 .l1-status-public .status-service-link:hover .status-service-trigger {
    background: var(--mkt-paper-muted) !important;
    transform: none !important;
}

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) !important;
}

body.l1-marketing-v2 .latency-location-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

body.l1-marketing-v2 .latency-location-card {
    background: var(--mkt-paper-muted) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 1rem !important;
}

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;
}

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;
}

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 !important;
}

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;
}

@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) {
    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%;
    }

    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;
    }
}

body.l1-marketing-v2 .l1-signal-panel-compact {
    min-height: 320px;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-signal-panel-availability {
    --signal-accent: #4fd1a4;
    --signal-accent-soft: rgba(79, 209, 164, 0.13);
}

body.l1-marketing-v2 .l1-signal-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

body.l1-marketing-v2 .l1-signal-head > div {
    display: grid;
    gap: 0.2rem;
}

body.l1-marketing-v2 .l1-signal-head strong {
    color: var(--mkt-ink) !important;
    font-size: 0.88rem !important;
    font-weight: 640 !important;
    letter-spacing: -0.015em !important;
}

body.l1-marketing-v2 .l1-signal-kicker,
body.l1-marketing-v2 .l1-signal-state,
body.l1-marketing-v2 .l1-signal-duration,
body.l1-marketing-v2 .l1-signal-foot,
body.l1-marketing-v2 .l1-signal-y-axis,
body.l1-marketing-v2 .l1-signal-x-axis,
body.l1-marketing-v2 .l1-signal-legend,
body.l1-marketing-v2 .l1-deploy-time {
    font-family: var(--mkt-mono);
}

body.l1-marketing-v2 .l1-signal-kicker {
    color: var(--mkt-muted) !important;
    font-size: 0.58rem;
    font-weight: 680;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.l1-marketing-v2 .l1-signal-state {
    align-items: center;
    background: rgba(13, 149, 108, 0.1);
    border-radius: 999px;
    color: #087653 !important;
    display: inline-flex;
    font-size: 0.56rem;
    font-weight: 700;
    gap: 0.38rem;
    letter-spacing: 0.045em;
    padding: 0.36rem 0.55rem;
    text-transform: uppercase;
    white-space: nowrap;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-signal-state {
    background: rgba(79, 209, 164, 0.12);
    color: #72ddb7 !important;
}

body.l1-marketing-v2 .l1-signal-state i {
    background: currentColor;
    border-radius: 999px;
    height: 5px;
    width: 5px;
}

body.l1-marketing-v2 .l1-signal-duration {
    color: var(--signal-accent) !important;
    font-size: 1rem;
    font-weight: 720;
    letter-spacing: -0.03em;
}

body.l1-marketing-v2 .l1-signal-summary {
    align-items: end;
    display: flex;
    gap: clamp(1.25rem, 4vw, 3rem);
    justify-content: space-between;
    margin-top: 1rem;
}

body.l1-marketing-v2 .l1-signal-primary {
    display: grid;
    gap: 0.08rem;
}

body.l1-marketing-v2 .l1-signal-primary strong {
    color: var(--mkt-ink) !important;
    font-size: clamp(1.65rem, 3.4vw, 2.25rem) !important;
    font-weight: 660 !important;
    letter-spacing: -0.055em !important;
    line-height: 1;
}

body.l1-marketing-v2 .l1-signal-primary span {
    color: var(--mkt-muted) !important;
    font-size: 0.63rem;
}

body.l1-marketing-v2 .l1-signal-summary dl {
    display: flex;
    gap: clamp(1rem, 3vw, 2.4rem);
    margin: 0;
}

body.l1-marketing-v2 .l1-signal-summary dl > div {
    display: grid;
    gap: 0.12rem;
}

body.l1-marketing-v2 .l1-signal-summary dt {
    color: var(--mkt-muted) !important;
    font-family: var(--mkt-mono);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

body.l1-marketing-v2 .l1-signal-summary dd {
    color: var(--mkt-ink) !important;
    font-family: var(--mkt-mono);
    font-size: 0.68rem;
    font-weight: 650;
    margin: 0;
}

body.l1-marketing-v2 .l1-signal-chart {
    display: grid;
    flex: 1 1 auto;
    gap: 0.6rem;
    grid-template-columns: 38px minmax(0, 1fr);
    margin-top: 0.75rem;
    min-height: 98px;
}

body.l1-marketing-v2 .l1-signal-y-axis {
    color: var(--mkt-subtle) !important;
    display: flex;
    flex-direction: column;
    font-size: 0.5rem;
    justify-content: space-between;
    padding: 0.08rem 0 0.3rem;
    text-align: right;
}

body.l1-marketing-v2 .l1-signal-chart svg {
    height: 100%;
    min-height: 98px;
    overflow: visible;
    width: 100%;
}

body.l1-marketing-v2 .l1-signal-grid line {
    stroke: var(--signal-grid);
    stroke-dasharray: 3 5;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

body.l1-marketing-v2 .l1-signal-line {
    fill: none;
    stroke: var(--signal-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

body.l1-marketing-v2 .l1-signal-point {
    fill: var(--mkt-paper);
    stroke: var(--signal-accent);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

body.l1-marketing-v2 .l1-signal-floor {
    fill: none;
    stroke: #c38319;
    stroke-dasharray: 5 5;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-signal-floor {
    stroke: #e0ad4f;
}

body.l1-marketing-v2 .l1-signal-x-axis {
    color: var(--mkt-subtle) !important;
    display: grid;
    font-size: 0.5rem;
    grid-template-columns: repeat(5, 1fr);
    margin: 0.1rem 0 0 44px;
}

body.l1-marketing-v2 .l1-signal-x-axis span:last-child {
    color: var(--signal-accent) !important;
    text-align: right;
}

body.l1-marketing-v2 .l1-signal-legend {
    color: var(--mkt-muted) !important;
    display: flex;
    font-size: 0.52rem;
    gap: 1.2rem;
    margin: 0.65rem 0 0 44px;
}

body.l1-marketing-v2 .l1-signal-legend span {
    align-items: center;
    display: inline-flex;
    gap: 0.38rem;
}

body.l1-marketing-v2 .l1-signal-legend i {
    background: var(--signal-accent);
    border-radius: 999px;
    height: 3px;
    width: 13px;
}

body.l1-marketing-v2 .l1-signal-legend .is-floor i {
    background: repeating-linear-gradient(90deg, #c38319 0 4px, transparent 4px 7px);
}

body.l1-marketing-v2 .l1-signal-foot {
    color: var(--mkt-subtle) !important;
    display: flex;
    font-size: 0.52rem;
    justify-content: space-between;
    letter-spacing: 0.035em;
    margin-top: auto;
    padding-top: 0.8rem;
    text-transform: uppercase;
}

body.l1-marketing-v2 .l1-traffic-flow {
    align-items: center;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: auto minmax(24px, 1fr) 48px minmax(24px, 1fr) auto;
    margin: auto 0 0.75rem;
    padding-top: 1.2rem;
}

body.l1-marketing-v2 .l1-traffic-endpoint {
    display: grid;
    gap: 0.06rem;
}

body.l1-marketing-v2 .l1-traffic-endpoint strong {
    color: var(--mkt-ink) !important;
    font-size: 0.68rem !important;
    font-weight: 650 !important;
}

body.l1-marketing-v2 .l1-traffic-endpoint span {
    color: var(--mkt-muted) !important;
    font-family: var(--mkt-mono);
    font-size: 0.48rem;
}

body.l1-marketing-v2 .l1-traffic-endpoint.is-clean {
    text-align: right;
}

body.l1-marketing-v2 .l1-traffic-endpoint.is-clean strong {
    color: #087653 !important;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-traffic-endpoint.is-clean strong {
    color: #72ddb7 !important;
}

body.l1-marketing-v2 .l1-traffic-channel {
    align-items: center;
    display: flex;
    height: 28px;
    justify-content: space-around;
    position: relative;
}

body.l1-marketing-v2 .l1-traffic-channel::before {
    background: var(--mkt-line-strong);
    content: "";
    height: 1px;
    inset: 50% 0 auto;
    position: absolute;
}

body.l1-marketing-v2 .l1-traffic-channel.is-clean::before {
    background: #23a87b;
}

body.l1-marketing-v2 .l1-traffic-channel i {
    background: var(--signal-accent);
    border-radius: 999px;
    height: 5px;
    position: relative;
    width: 5px;
    z-index: 1;
}

body.l1-marketing-v2 .l1-traffic-channel.is-inbound i:nth-child(2) {
    background: #d68b25;
}

body.l1-marketing-v2 .l1-traffic-channel.is-inbound i:nth-child(3) {
    background: #c55454;
}

body.l1-marketing-v2 .l1-traffic-channel.is-clean i {
    background: #23a87b;
}

body.l1-marketing-v2 .l1-traffic-scrubber {
    align-items: center;
    background: var(--signal-accent-soft);
    border-radius: 12px;
    color: var(--signal-accent) !important;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

body.l1-marketing-v2 .l1-traffic-scrubber > i {
    font-size: 0.9rem;
}

body.l1-marketing-v2 .l1-traffic-scrubber span {
    font-family: var(--mkt-mono);
    font-size: 0.42rem;
    font-weight: 750;
    letter-spacing: 0.08em;
}

body.l1-marketing-v2 .l1-traffic-drop {
    align-items: center;
    background: rgba(197, 84, 84, 0.08);
    border-radius: 9px;
    color: #9f3f3f !important;
    display: flex;
    gap: 0.6rem;
    margin: 0 auto;
    padding: 0.48rem 0.65rem;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-traffic-drop {
    background: rgba(233, 111, 111, 0.1);
    color: #f09a9a !important;
}

body.l1-marketing-v2 .l1-traffic-drop span {
    align-items: center;
    background: currentColor;
    border-radius: 999px;
    display: inline-flex;
    height: 17px;
    justify-content: center;
    width: 17px;
}

body.l1-marketing-v2 .l1-traffic-drop i {
    color: var(--mkt-paper) !important;
    font-size: 0.55rem;
}

body.l1-marketing-v2 .l1-traffic-drop strong {
    color: inherit !important;
    font-family: var(--mkt-mono);
    font-size: 0.53rem !important;
    font-weight: 680 !important;
    letter-spacing: 0.02em !important;
}

body.l1-marketing-v2 .l1-deploy-trace {
    display: grid;
    gap: 0.5rem;
    margin: auto 0 0.8rem;
    padding-top: 1rem;
}

body.l1-marketing-v2 .l1-deploy-trace > div {
    align-items: center;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 42px 22px minmax(0, 1fr);
}

body.l1-marketing-v2 .l1-deploy-time {
    color: var(--mkt-subtle) !important;
    font-size: 0.5rem;
}

body.l1-marketing-v2 .l1-deploy-trace i {
    align-items: center;
    background: var(--signal-accent-soft);
    border-radius: 999px;
    color: var(--signal-accent) !important;
    display: inline-flex;
    font-size: 0.52rem;
    height: 22px;
    justify-content: center;
    width: 22px;
}

body.l1-marketing-v2 .l1-deploy-trace .is-live i {
    background: rgba(13, 149, 108, 0.13);
    color: #087653 !important;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-deploy-trace .is-live i {
    color: #72ddb7 !important;
}

body.l1-marketing-v2 .l1-deploy-trace strong {
    color: var(--mkt-ink) !important;
    font-size: 0.66rem !important;
    font-weight: 620 !important;
    letter-spacing: -0.005em !important;
}

body.l1-marketing-v2 .l1-deploy-progress {
    background: var(--mkt-line);
    border-radius: 999px;
    height: 4px;
    overflow: hidden;
}

body.l1-marketing-v2 .l1-deploy-progress span {
    background: linear-gradient(90deg, var(--signal-accent), #24aa7c);
    border-radius: inherit;
    display: block;
    height: 100%;
    width: 100%;
}

/* ---------- Infrastructure proof 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;
}

body.l1-marketing-v2 .l1-infra-proof-copy h3 {
    color: var(--mkt-ink) !important;
    font-size: clamp(2rem, 4vw, 3.7rem) !important;
    font-weight: 610 !important;
    letter-spacing: -0.048em !important;
    line-height: 1 !important;
    margin: 0 0 1.1rem !important;
    max-width: 11ch;
    word-spacing: 0.025em;
}

body.l1-marketing-v2 .l1-infra-proof-copy p {
    color: var(--mkt-muted) !important;
    font-size: 0.97rem !important;
    line-height: 1.68 !important;
    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;
}

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;
}

body.l1-marketing-v2 .l1-infra-spec-grid dd {
    color: var(--mkt-ink) !important;
    font-size: clamp(1.2rem, 2.1vw, 1.65rem) !important;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.15;
    margin: 0.18rem 0 0;
}

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) !important;
    color: var(--mkt-on-dark) !important;
    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) !important;
    display: flex;
    font-size: 0.57rem;
    font-weight: 650;
    justify-content: space-between;
    letter-spacing: 0.08em;
}

body.l1-marketing-v2 .l1-infra-route-head strong {
    align-items: center;
    color: #68d9b2 !important;
    display: inline-flex;
    font-size: inherit !important;
    font-weight: 700 !important;
    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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

body.l1-marketing-v2 .l1-infra-route-note strong {
    color: var(--mkt-on-dark) !important;
    font-size: 0.83rem !important;
    font-weight: 620 !important;
}

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) !important;
    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;
}

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;
}

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) !important;
    font-weight: 620 !important;
    letter-spacing: -0.05em !important;
    line-height: 1;
}

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;
}

body.l1-marketing-v2 .l1-infra-proof-strip p {
    color: var(--mkt-muted) !important;
    font-size: 0.72rem !important;
    line-height: 1.55 !important;
    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;
    }
}

html[data-l1-theme="dark"] body.l1-marketing-v2 main a:not(.ui-btn):not(.l1-btn) {
    color: var(--mkt-blue-dark) !important;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-plan-fit-label {
    color: var(--mkt-on-dark-muted) !important;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-plan-sku {
    color: #72d6a7 !important;
}

html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-btn-primary,
html[data-l1-theme="dark"] body.l1-marketing-v2 .ui-btn--primary.l1-btn,
html[data-l1-theme="dark"] body.l1-marketing-v2 .ui-btn--primary,
html[data-l1-theme="dark"] body.l1-marketing-v2 .l1-btn-primary:hover,
html[data-l1-theme="dark"] body.l1-marketing-v2 .ui-btn--primary.l1-btn:hover,
html[data-l1-theme="dark"] body.l1-marketing-v2 .ui-btn--primary:hover {
    color: #ffffff !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;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    body.l1-marketing-v2 .l1-nav-shell {
        min-height: 66px;
    }

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

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

    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% !important;
    }

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

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

    body.l1-marketing-v2 .l1-account-nav .l1-profile-toggle::after {
        margin-left: auto !important;
        order: 3;
    }

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

    /* 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. */
    body.l1-marketing-v2 .l1-home-hero .l1-hero-atmosphere {
        inset: auto !important;
        margin: 1rem clamp(1.25rem, 3.2vw, 2.5rem) 0;
        position: relative !important;
        text-align: left;
        z-index: 1;
    }

    body.l1-marketing-v2 .l1-home-hero > .l1-container,
    body.l1-marketing-v2 .l1-home-hero#top > .l1-container {
        padding-top: 0.75rem !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-preview-stack {
        transform: none;
    }

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

    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;
    }

    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 !important;
    }

    body.l1-marketing-v2 .l1-cta-card {
        align-items: start !important;
        grid-template-columns: 1fr !important;
    }

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

@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;
    }

    html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top .l1-hero-title {
        font-size: clamp(2.9rem, 14vw, 4.75rem) !important;
    }

    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;
    }

    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 !important;
    }

    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;
    }

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

@media (max-width: 575.98px) {
    body.l1-marketing-v2 .l1-signal-panel {
        padding: 1rem;
    }

    body.l1-marketing-v2 .l1-signal-panel-compact {
        min-height: 280px;
    }

    body.l1-marketing-v2 .l1-signal-summary {
        align-items: start;
        flex-direction: column;
        gap: 0.7rem;
    }

    body.l1-marketing-v2 .l1-signal-summary dl {
        justify-content: space-between;
        width: 100%;
    }

    body.l1-marketing-v2 .l1-signal-chart {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    body.l1-marketing-v2 .l1-signal-x-axis,
    body.l1-marketing-v2 .l1-signal-legend {
        margin-left: 40px;
    }

    body.l1-marketing-v2 .l1-traffic-flow {
        gap: 0.3rem;
        grid-template-columns: auto minmax(18px, 1fr) 44px minmax(18px, 1fr) auto;
    }

    body.l1-marketing-v2 .l1-traffic-scrubber {
        height: 44px;
        width: 44px;
    }

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

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

    body.l1-marketing-v2 .l1-home-hero > .l1-container,
    body.l1-marketing-v2 .l1-home-hero#top > .l1-container {
        padding-block: 0.65rem 2.5rem !important;
    }

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

    html[data-l1-theme] body.l1-marketing-v2 .l1-home-hero.l1-hero#top .l1-hero-title {
        font-size: clamp(2.75rem, 14vw, 4.05rem) !important;
        letter-spacing: -0.045em !important;
    }

    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;
    }

    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: clamp(2.35rem, 11vw, 3.3rem) !important;
    }
}

/* ---------- LayerOne Aegis public security page and pricing callout ---------- */
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;
}

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;
    max-width: none;
}

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;
}

body.l1-marketing-v2 .l1-aegis-overview > a {
    color: var(--mkt-on-dark-link) !important;
    font-size: 0.85rem;
}

body.l1-marketing-v2 .l1-aegis-overview > a:hover {
    color: var(--mkt-on-dark) !important;
}

body.l1-marketing-v2 .l1-menu-link[aria-current="page"] {
    background: var(--mkt-blue-soft) !important;
    color: var(--mkt-blue-dark) !important;
}

body.l1-marketing-v2 .l1-menu-link[aria-current="page"] i {
    color: inherit !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;
    }
}

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

/* 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; }
[data-l1-theme="dark"] .l1-brand .l1-brand-logo--light { display: none; }
[data-l1-theme="dark"] .l1-brand .l1-brand-logo--dark { display: block; }