/* 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 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: .5rem;
    padding: .5rem .5rem 0;
}

.l1-deploy-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    flex: 1;
    font-size: .78rem;
    font-weight: 600;
    color: var(--l1-text-muted);
    text-align: center;
}

.l1-deploy-step::before {
    content: '';
    position: absolute;
    top: 11px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--l1-border-strong);
    z-index: 0;
}

.l1-deploy-step:first-child::before {
    content: none;
}

.l1-deploy-step.is-done::before,
.l1-deploy-step.is-active::before {
    background: var(--l1-accent);
}

.l1-deploy-dot {
    position: relative;
    z-index: 1;
    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-step.is-done .l1-deploy-dot {
    background: var(--l1-accent);
    border-color: var(--l1-accent);
    color: #fff;
}

.l1-deploy-step.is-done {
    color: var(--l1-text);
}

.l1-deploy-step.is-active .l1-deploy-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-step.is-active {
    color: var(--l1-primary-dark);
}

@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-step.is-active .l1-deploy-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-feature,
.l1-section-dark .l1-bento-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 {
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

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