/*
 * Locate2u Mesh — landing page styles.
 *
 * Every colour, font, radius, shadow, and space comes from /brand/brand.css
 * (the local copy of loc-mesh/design/brand/tokens/colors_and_type.css). If a
 * value feels missing, add the token to the source-of-truth and re-sync — do
 * not invent a local one-off here. The page rebuilds the marketing sections
 * from design/brand/source/marketing.jsx + marketing-sections.jsx, matching
 * the screen capture brand/screens/03-landing-page-mesh-locate2u-com.png. The
 * compositional spec is design/brand/components.md → "Marketing".
 *
 * Two raw colours live in the syntax-highlight + SDK-chip blocks below
 * (string green / number amber, and the language brand chips). These are NOT
 * brand UI accents — they are code-listing token colours / third-party
 * language marks mirrored verbatim from the source artifact, scoped to those
 * blocks and called out at each site.
 */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--l2u-font-sans);
    color: var(--l2u-text-body);
    background: var(--l2u-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* Shared section-inner wrapper width matches the source artboard (1280 inner). */
.hero__grid,
.logo-strip__inner,
.capabilities__inner,
.arch__inner,
.agents__inner,
.sdk__inner,
.pricing__inner,
.final-cta__band,
.foot__inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* ============================================================
   Nav — dark bar, standalone lockup, centred links + CTAs.
   ============================================================ */

.nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--l2u-s-6);
    height: 76px;
    padding: 0 var(--l2u-s-20);
    background: var(--l2u-dark-blue);
    color: var(--fg-on-dark);
    border-bottom: 1px solid var(--l2u-dark-border);
}

/* ---- Brand lockup ------------------------------------------------------
   Canonical "inline" lockup (design/brand/source → MeshLockup):
   [Locate2u wordmark] · [mesh mark] mesh. Shared by the nav and footer.
   The logo-classic art places the wordmark high in its frame, so we nudge it
   down (~15.5% of its own height) to optically line up with the "mesh" text. */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-3);
    color: var(--fg-on-dark);
}

.brand-lockup__logo {
    width: auto;
    align-self: center;
    transform: translateY(15.5%);
}

.brand-lockup__sep {
    width: 1px;
    align-self: center;
    background: var(--l2u-dark-border-strong);
}

.brand-lockup__mesh {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
}

.brand-lockup__product {
    font-family: var(--l2u-font-mono);
    font-weight: 500;
    letter-spacing: -0.4px;
    color: var(--fg-on-dark);
}

.nav__logo { height: 22px; }
.nav__mark { height: 21px; width: 21px; }
.nav__product { font-size: 16px; }
.nav .brand-lockup__sep { height: 18px; }

.nav__links {
    display: flex;
    gap: var(--l2u-s-7);
}

.nav__links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--l2u-on-dark-78);
    transition: color .15s;
}
.nav__links a:hover { color: var(--fg-on-dark); }

.nav__cta {
    display: flex;
    align-items: center;
    gap: var(--l2u-s-3);
}

.link-mute {
    font-size: 14px;
    font-weight: 500;
    color: var(--l2u-on-dark-78);
    white-space: nowrap;
    transition: color .15s;
}
.link-mute:hover { color: var(--fg-on-dark); }

/* ============================================================
   Buttons — primary / ghost; sm / lg; optional glow on dark.
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
    border-radius: var(--l2u-r-pill);
    font-family: var(--l2u-font-sans);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, background .15s;
    text-decoration: none;
    white-space: nowrap;
}

.btn--sm {
    padding: var(--l2u-s-2) var(--l2u-s-4);
    font-size: 13px;
    height: 36px;
}

.btn--lg {
    padding: var(--l2u-s-3) var(--l2u-s-6);
    font-size: 15px;
    height: 48px;
}

.btn--primary {
    background: var(--l2u-primary);
    color: var(--fg-on-dark);
}
.btn--primary:hover { transform: translateY(-1px); }
.btn--primary.btn--glow { box-shadow: var(--l2u-shadow-cta-blue); }

.btn--ghost {
    background: transparent;
    color: var(--l2u-text-body);
    border-color: var(--l2u-border);
}
.btn--ghost.btn--on-dark {
    color: var(--l2u-on-dark-9);
    border-color: var(--l2u-dark-border-strong);
}
.btn--ghost.btn--on-dark:hover { background: var(--l2u-dark-fill); }

/* ============================================================
   Pills + status dots
   ============================================================ */

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
    padding: var(--l2u-s-2) var(--l2u-s-3);
    border-radius: var(--l2u-r-pill);
    font-size: 11px;
    width: fit-content;
}

.pill--dark {
    background: var(--l2u-dark-fill);
    border: 1px solid var(--l2u-dark-border-strong);
    color: var(--l2u-on-dark-9);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--l2u-r-pill);
    background: var(--l2u-text-mute-2);
    flex-shrink: 0;
}
.status-dot--success { background: var(--l2u-success); }

@keyframes l2u-pulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50%      { box-shadow: 0 0 0 4px rgba(45, 210, 122, 0); opacity: 0.7; }
}
.status-dot--pulse {
    color: var(--l2u-success);
    animation: l2u-pulse 1.6s infinite ease-in-out;
}

/* ============================================================
   Dark dotted background — HeroGridBg (primary @18% dots + radial fade
   to --l2u-dark-blue). Reused by hero, architecture, and the final-CTA band.
   ============================================================ */

.hero__bg,
.arch__bg,
.final-cta__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, transparent, var(--l2u-dark-blue) 70%),
        radial-gradient(circle at 1px 1px, rgba(79,139,255,0.18) 1px, transparent 1.5px) 0 0 / 40px 40px;
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
    position: relative;
    background: var(--l2u-dark-blue);
    color: var(--fg-on-dark);
    padding: var(--l2u-s-20) var(--l2u-s-20) calc(var(--l2u-s-20) + var(--l2u-s-12));
    overflow: hidden;
}

.hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--l2u-s-16);
    align-items: center;
}

.hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-5);
}

.hero__title {
    margin: 0;
    font-family: var(--l2u-font-sans);
    font-weight: 900;
    font-size: 72px;
    line-height: 76px;
    letter-spacing: -2.2px;
    color: var(--fg-on-dark);
}

.hero__lead {
    margin: 0;
    font-size: 18px;
    line-height: 30px;
    color: var(--l2u-on-dark-7);
    max-width: 540px;
}

.hero__ctas {
    display: flex;
    gap: var(--l2u-s-3);
    align-items: center;
    margin-top: var(--l2u-s-2);
}

.hero__meta {
    list-style: none;
    margin: var(--l2u-s-3) 0 0;
    padding: 0;
    display: flex;
    gap: var(--l2u-s-6);
    font-family: var(--l2u-font-mono);
    font-size: 11px;
    color: var(--l2u-on-dark-45);
    letter-spacing: 0.6px;
}

/* ============================================================
   Code / response panel (hero) + reused panel chrome
   ============================================================ */

.code-panel {
    background: var(--l2u-dark-fill-soft);
    border: 1px solid var(--l2u-dark-border-strong);
    border-radius: var(--l2u-r-card);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.40);
}

.code-panel__head {
    padding: var(--l2u-s-3) var(--l2u-s-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--l2u-s-3);
    border-bottom: 1px solid var(--l2u-dark-border);
}

.code-panel__route {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-3);
    font-size: 11px;
    color: var(--l2u-on-dark-7);
    letter-spacing: 1.2px;
}
.code-panel__mark { width: 18px; height: 18px; }

.code-panel__status {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
    font-size: 10px;
    color: var(--l2u-on-dark-5);
    white-space: nowrap;
}

.code-panel__body {
    margin: 0;
    padding: var(--l2u-s-5) var(--l2u-s-6);
    font-family: var(--l2u-font-mono);
    font-size: 13px;
    line-height: 22px;
    color: var(--l2u-on-dark-78);
    overflow-x: auto;
}

.code-panel__foot {
    border-top: 1px solid var(--l2u-dark-border);
    padding: var(--l2u-s-3) var(--l2u-s-5);
    display: flex;
    gap: var(--l2u-s-3);
    align-items: center;
    font-size: 11px;
    color: var(--l2u-on-dark-5);
}
.code-panel__arrow { color: var(--l2u-primary); }

/* Syntax tokens — code-listing colours mirrored from the source artifact's
   CodeBlock (string green / number amber). Scoped to code panels only; not
   brand UI accents. Keyword = brand primary, comment = on-dark alpha. */
.c-cmt { color: var(--l2u-on-dark-4); }
.c-kw  { color: var(--l2u-primary); }
.c-str { color: #7DD3A3; }
.c-num { color: #F6C77C; }

/* ============================================================
   Carrier logo / trust strip
   ============================================================ */

.logo-strip {
    background: var(--l2u-dark-blue);
    color: var(--fg-on-dark);
    padding: 0 var(--l2u-s-20) var(--l2u-s-16);
}

.logo-strip__inner {
    border-top: 1px solid var(--l2u-dark-border);
    padding-top: var(--l2u-s-12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--l2u-s-6);
    flex-wrap: wrap;
}

.logo-strip__caption {
    font-size: 11px;
    letter-spacing: 1.4px;
    color: var(--l2u-on-dark-45);
}

.logo-strip__marks {
    display: flex;
    gap: var(--l2u-s-12);
    flex-wrap: wrap;
}
.logo-strip__marks span {
    font-family: var(--l2u-font-sans);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.3px;
    color: var(--l2u-on-dark-7);
    white-space: nowrap;
}

/* ============================================================
   Capabilities — 3-up category-dotted card grid
   ============================================================ */

.capabilities {
    background: var(--l2u-cream);
    padding: var(--l2u-s-24) var(--l2u-s-20);
}

.capabilities__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--l2u-s-8);
    margin-bottom: var(--l2u-s-12);
    flex-wrap: wrap;
}

.capabilities__intro { max-width: 720px; }

.capabilities__intro .l2u-eyebrow { margin: 0; }

.capabilities__title {
    margin: var(--l2u-s-4) 0;
    font-family: var(--l2u-font-sans);
    font-weight: 900;
    font-size: 56px;
    line-height: 62px;
    letter-spacing: -1.6px;
    color: var(--l2u-bluish-grey);
}

.capabilities__intro .l2u-lead { margin: 0; max-width: 580px; }

.capabilities__legend {
    display: flex;
    gap: var(--l2u-s-4);
    align-items: center;
    flex-wrap: wrap;
}

.legend {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
    font-family: var(--l2u-font-mono);
    font-size: 11px;
    letter-spacing: 0.6px;
    color: var(--l2u-text-mute-2);
}

/* Category dots: Service=primary, Streaming=success, Data=viz-violet, AI=warn.
   Data uses the viz-violet token (categorical legend use — see components.md). */
.legend__dot { width: 8px; height: 8px; border-radius: var(--l2u-r-pill); flex-shrink: 0; }
.legend__dot--service   { background: var(--l2u-primary); }
.legend__dot--streaming { background: var(--l2u-success); }
.legend__dot--data      { background: var(--l2u-viz-violet); }
.legend__dot--ai        { background: var(--l2u-warn); }

.cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--l2u-s-4);
}

.cap-card {
    background: var(--l2u-white);
    border: 1px solid var(--l2u-border);
    border-radius: var(--l2u-r-card);
    padding: var(--l2u-s-6);
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-3);
    min-height: 178px;
    transition: transform .15s, box-shadow .2s;
}
.cap-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--l2u-shadow-card);
}

.cap-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cap-card__cat {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
    font-family: var(--l2u-font-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--l2u-text-mute-2);
    text-transform: uppercase;
}

.cap-card__arrow { color: var(--l2u-text-mute-2); font-size: 14px; }

.cap-card__name {
    margin: 0;
    font-family: var(--l2u-font-sans);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.4px;
    color: var(--l2u-bluish-grey);
}

.cap-card__endpoint { color: var(--l2u-primary); }

.cap-card__desc {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--l2u-text-body);
}

/* ============================================================
   Layered architecture diagram (dark centrepiece)
   ============================================================ */

.arch {
    position: relative;
    background: var(--l2u-dark-blue);
    color: var(--fg-on-dark);
    padding: var(--l2u-s-24) var(--l2u-s-20);
    overflow: hidden;
}

.arch__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--l2u-s-20);
    align-items: center;
}

.arch__copy .l2u-eyebrow { margin: 0; }

.arch__title {
    margin: var(--l2u-s-4) 0 var(--l2u-s-5);
    font-family: var(--l2u-font-sans);
    font-weight: 900;
    font-size: 52px;
    line-height: 58px;
    letter-spacing: -1.5px;
    color: var(--fg-on-dark);
}

.arch__lead {
    margin: 0;
    font-size: 17px;
    line-height: 28px;
    color: var(--l2u-on-dark-7);
    max-width: 460px;
}
.arch__lead b { color: var(--fg-on-dark); }

.arch__features {
    list-style: none;
    margin: var(--l2u-s-8) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-4);
    max-width: 460px;
}
.arch__features li { display: flex; gap: var(--l2u-s-4); align-items: flex-start; }

.arch__feature-dot {
    margin-top: 5px;
    width: 8px;
    height: 8px;
    border-radius: var(--l2u-r-pill);
    background: var(--l2u-primary);
    flex-shrink: 0;
}
.arch__feature-l { display: block; font-size: 15px; font-weight: 600; color: var(--fg-on-dark); }
.arch__feature-s { display: block; margin-top: 2px; font-size: 13px; color: var(--l2u-on-dark-5); }

.arch__diagram {
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-4);
    position: relative;
}

.layer {
    border-radius: var(--l2u-r-card);
    border: 1px solid var(--l2u-dark-border);
    padding: var(--l2u-s-6);
    background: var(--l2u-dark-fill-soft);
}
/* Public layer = primary tint; management layer = viz-violet tint (categorical
   diagram colour — see components.md "layered architecture diagram"). */
.layer--public { background: rgba(79,139,255,0.10); border-color: rgba(79,139,255,0.30); }
.layer--mgmt   { background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.30); }

.layer__head {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--l2u-s-3);
    gap: var(--l2u-s-3);
}
.layer__head .l2u-eyebrow { margin: 0; }
.layer__head-l {
    font-family: var(--l2u-font-mono);
    font-size: 11px;
    letter-spacing: 1.4px;
}
.layer__head-l--public { color: var(--l2u-primary); }
.layer__head-l--mgmt   { color: var(--l2u-viz-violet); }
.layer__head-l--svc    { color: var(--l2u-success); }
.layer__head-r {
    font-family: var(--l2u-font-mono);
    font-size: 10px;
    letter-spacing: 0.6px;
    color: var(--l2u-on-dark-45);
    text-transform: uppercase;
}

.layer__nodes { display: flex; gap: var(--l2u-s-3); }

.node {
    background: var(--l2u-dark-fill);
    border: 1px solid var(--l2u-dark-border);
    border-radius: var(--l2u-r-md);
    padding: var(--l2u-s-3);
    flex: 1;
    min-width: 0;
}
.node__top { display: flex; align-items: center; gap: var(--l2u-s-2); }
.node__dot { width: 6px; height: 6px; border-radius: var(--l2u-r-pill); flex-shrink: 0; }
.node__dot--primary   { background: var(--l2u-primary); }
.node__dot--streaming { background: var(--l2u-success); }
.node__dot--ai        { background: var(--l2u-warn); }
.node__dot--viz       { background: var(--l2u-viz-violet); }
.node__sub {
    font-family: var(--l2u-font-mono);
    font-size: 10px;
    color: var(--l2u-on-dark-5);
    letter-spacing: 1.2px;
}
.node__label {
    margin-top: var(--l2u-s-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-on-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layer__svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--l2u-s-3);
}
.svc-chip {
    background: var(--l2u-dark-fill-soft);
    border: 1px solid var(--l2u-dark-border);
    border-radius: var(--l2u-r-sm);
    padding: var(--l2u-s-3);
    font-size: 13px;
    color: var(--l2u-on-dark-78);
    display: flex;
    align-items: center;
    gap: var(--l2u-s-2);
}

.connector { display: flex; justify-content: center; height: 18px; }
.connector svg line {
    stroke: rgba(79,139,255,0.4);
    stroke-dasharray: 2 3;
    stroke-width: 1;
}

/* ============================================================
   Agent story — copy + spec cards / dark agent-trace mock
   ============================================================ */

.agents {
    background: var(--l2u-cream-2);
    padding: var(--l2u-s-24) var(--l2u-s-20);
}

.agents__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--l2u-s-20);
    align-items: center;
}

.agents__copy .l2u-eyebrow { margin: 0; }

.agents__title {
    margin: var(--l2u-s-4) 0 var(--l2u-s-5);
    font-family: var(--l2u-font-sans);
    font-weight: 900;
    font-size: 52px;
    line-height: 58px;
    letter-spacing: -1.5px;
    color: var(--l2u-bluish-grey);
}

.agents__lead {
    margin: 0;
    font-size: 17px;
    line-height: 28px;
    color: var(--l2u-text-body);
    max-width: 540px;
}

.agents__specs {
    margin-top: var(--l2u-s-7);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--l2u-s-3);
    max-width: 460px;
}
.spec-card {
    background: var(--l2u-white);
    border: 1px solid var(--l2u-border);
    border-radius: var(--l2u-r-md);
    padding: var(--l2u-s-3) var(--l2u-s-4);
}
.spec-card__k {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.2px;
    color: var(--l2u-primary);
}
.spec-card__l { margin-top: var(--l2u-s-2); font-size: 13px; color: var(--l2u-bluish-grey); }

.agents__ctas {
    display: flex;
    gap: var(--l2u-s-3);
    align-items: center;
    margin-top: var(--l2u-s-7);
    flex-wrap: wrap;
}

.trace {
    background: var(--l2u-dark-blue);
    color: var(--fg-on-dark);
    border-radius: var(--l2u-r-2xl);
    padding: var(--l2u-s-6);
    box-shadow: 0 30px 60px rgba(30,42,68,0.25);
}
.trace__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--l2u-s-3);
    padding-bottom: var(--l2u-s-3);
    border-bottom: 1px solid var(--l2u-dark-border);
}
.trace__route { display: inline-flex; align-items: center; gap: var(--l2u-s-2); font-size: 11px; color: var(--l2u-on-dark-7); letter-spacing: 1.2px; }
.trace__mark { width: 18px; height: 18px; }
.trace__meta { font-size: 10px; color: var(--l2u-on-dark-5); white-space: nowrap; }

.trace__body {
    margin-top: var(--l2u-s-4);
    font-family: var(--l2u-font-mono);
    font-size: 12px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-3);
}
.trace__line { color: var(--l2u-on-dark-5); }
.trace__line--result { margin-top: var(--l2u-s-1); }
.trace__role { color: var(--l2u-primary); }
.trace__role--ok { color: var(--l2u-success); }

.trace__step {
    background: var(--l2u-dark-fill-soft);
    border: 1px solid var(--l2u-dark-border);
    border-radius: var(--l2u-r-sm);
    padding: var(--l2u-s-3);
}
.trace__step-top { display: flex; justify-content: space-between; align-items: center; gap: var(--l2u-s-3); }
.trace__tool { color: var(--fg-on-dark); font-weight: 600; }
.trace__bullet { margin-right: var(--l2u-s-1); }
.trace__bullet--primary { color: var(--l2u-primary); }
.trace__bullet--success { color: var(--l2u-success); }
.trace__bullet--warn    { color: var(--l2u-warn); }
.trace__ms { color: var(--l2u-on-dark-5); }
.trace__out { margin-top: var(--l2u-s-2); color: var(--l2u-on-dark-7); }

/* ============================================================
   SDK grid
   ============================================================ */

.sdk {
    background: var(--l2u-cream);
    padding: var(--l2u-s-20) var(--l2u-s-20);
}

.sdk__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--l2u-s-6);
    margin-bottom: var(--l2u-s-8);
    flex-wrap: wrap;
}
.sdk__head .l2u-eyebrow { margin: 0; }
.sdk__title {
    margin: var(--l2u-s-3) 0 0;
    font-family: var(--l2u-font-sans);
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -0.8px;
    color: var(--l2u-bluish-grey);
}
.sdk__link {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--l2u-primary);
}

.sdk__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--l2u-s-4);
}
.sdk-card {
    background: var(--l2u-white);
    border: 1px solid var(--l2u-border);
    border-radius: var(--l2u-r-lg);
    padding: var(--l2u-s-5);
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-3);
}
.sdk-card__head { display: flex; align-items: center; gap: var(--l2u-s-3); }
/* Language brand chips — third-party language marks (TS/Py/Go blue family),
   plus brand-token chips for REST/MCP/signing. The language hex values are
   the languages' own brand colours, scoped to this legend square only. */
.sdk-card__chip { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.sdk-card__chip--ts   { background: #3178C6; }
.sdk-card__chip--py   { background: #3776AB; }
.sdk-card__chip--go   { background: #00ADD8; }
.sdk-card__chip--rest { background: var(--l2u-bluish-grey); }
.sdk-card__chip--mcp  { background: var(--l2u-warn); }
.sdk-card__chip--sig  { background: var(--l2u-success); }
.sdk-card__name { font-weight: 700; font-size: 14px; color: var(--l2u-bluish-grey); }
.sdk-card__cmd {
    background: var(--l2u-cream-2);
    border-radius: var(--l2u-r-xs);
    padding: var(--l2u-s-3);
    font-size: 12px;
    color: var(--l2u-bluish-grey);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sdk-card__prompt { color: var(--l2u-text-mute-2); }

/* ============================================================
   Pricing
   ============================================================ */

.pricing {
    background: var(--l2u-cream);
    padding: var(--l2u-s-24) var(--l2u-s-20);
}

.pricing__head { text-align: center; margin-bottom: var(--l2u-s-12); }
.pricing__head .l2u-eyebrow { margin: 0; }
.pricing__title {
    margin: var(--l2u-s-4) 0 var(--l2u-s-4);
    font-family: var(--l2u-font-sans);
    font-weight: 900;
    font-size: 56px;
    line-height: 62px;
    letter-spacing: -1.6px;
    color: var(--l2u-bluish-grey);
}
.pricing__lead { margin: 0 auto; max-width: 620px; }

.pricing__grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr 1fr;
    gap: var(--l2u-s-5);
    align-items: stretch;
}

.plan {
    background: var(--l2u-white);
    color: var(--l2u-bluish-grey);
    border: 1px solid var(--l2u-border);
    border-radius: var(--l2u-r-3xl);
    padding: var(--l2u-s-8);
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-5);
    position: relative;
}
/* Featured plan — dark surface + offset RECOMMENDED pill + pop shadow. */
.plan--featured {
    background: var(--l2u-dark-blue);
    color: var(--fg-on-dark);
    border-color: var(--l2u-dark-border-strong);
    box-shadow: 0 20px 50px rgba(30,42,68,0.30);
}

.plan__badge {
    position: absolute;
    top: -14px;
    left: var(--l2u-s-8);
    background: var(--l2u-primary);
    color: var(--fg-on-dark);
    border-radius: var(--l2u-r-pill);
    padding: var(--l2u-s-2) var(--l2u-s-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.plan__name {
    font-size: 11px;
    letter-spacing: 1.4px;
    color: var(--l2u-text-mute-2);
    text-transform: uppercase;
}
.plan--featured .plan__name { color: var(--l2u-primary); }

.plan__price {
    margin-top: var(--l2u-s-4);
    font-family: var(--l2u-font-sans);
    font-weight: 900;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -1.2px;
    color: var(--l2u-bluish-grey);
}
.plan--featured .plan__price { color: var(--fg-on-dark); }

.plan__sub {
    margin-top: var(--l2u-s-2);
    font-size: 11px;
    letter-spacing: 0.4px;
    color: var(--l2u-text-mute-2);
}
.plan--featured .plan__sub { color: var(--l2u-on-dark-5); }

.plan__blurb {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--l2u-text-body);
}
.plan--featured .plan__blurb { color: var(--l2u-on-dark-7); }

.plan__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-3);
    flex: 1;
}
.plan__bullets li {
    display: flex;
    gap: var(--l2u-s-3);
    align-items: flex-start;
    font-size: 14px;
    color: var(--l2u-bluish-grey);
}
.plan--featured .plan__bullets li { color: var(--l2u-on-dark-9); }
.plan__bullets li::before {
    content: "";
    margin-top: 6px;
    width: 6px;
    height: 6px;
    border-radius: var(--l2u-r-pill);
    background: var(--l2u-primary);
    flex-shrink: 0;
}

.plan__cta {
    margin-top: var(--l2u-s-2);
    padding: var(--l2u-s-3) var(--l2u-s-5);
    border-radius: var(--l2u-r-sm);
    font-family: var(--l2u-font-sans);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s;
}
.plan__cta--primary {
    background: var(--l2u-primary);
    color: var(--fg-on-dark);
    box-shadow: var(--l2u-shadow-cta-blue);
}
.plan__cta--primary:hover { transform: translateY(-1px); }
.plan__cta--outline {
    background: transparent;
    color: var(--l2u-bluish-grey);
    border: 1px solid var(--l2u-border);
}
.plan__cta--outline:hover { background: var(--l2u-cream-2); }

/* ============================================================
   Final CTA band
   ============================================================ */

.final-cta {
    background: var(--l2u-cream);
    padding: 0 var(--l2u-s-20) var(--l2u-s-24);
}

.final-cta__band {
    background: var(--l2u-dark-blue);
    border-radius: var(--l2u-r-4xl);
    padding: var(--l2u-s-20) var(--l2u-s-16);
    color: var(--fg-on-dark);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--l2u-s-16);
    align-items: center;
    position: relative;
    overflow: hidden;
}

.final-cta__band .final-cta__bg { opacity: 0.4; }

.final-cta__copy { position: relative; z-index: 1; }
.final-cta__copy .l2u-eyebrow { margin: 0; }

.final-cta__title {
    margin: var(--l2u-s-4) 0 var(--l2u-s-5);
    font-family: var(--l2u-font-sans);
    font-weight: 900;
    font-size: 52px;
    line-height: 56px;
    letter-spacing: -1.5px;
    color: var(--fg-on-dark);
}

.final-cta__lead {
    margin: 0;
    font-size: 17px;
    line-height: 28px;
    color: var(--l2u-on-dark-7);
    max-width: 520px;
}

.final-cta__ctas {
    display: flex;
    gap: var(--l2u-s-3);
    margin-top: var(--l2u-s-7);
    flex-wrap: wrap;
}

.final-cta__mark-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}
.final-cta__mark-tile {
    background: var(--l2u-primary);
    border-radius: var(--l2u-r-4xl);
    width: 220px;
    height: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--l2u-shadow-cta-blue);
}
.final-cta__mark { width: 160px; height: 160px; }

/* ============================================================
   Footer
   ============================================================ */

.foot {
    background: var(--l2u-dark-blue);
    color: var(--fg-on-dark);
    padding: var(--l2u-s-20) var(--l2u-s-20) var(--l2u-s-12);
}

.foot__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: var(--l2u-s-8);
}

.foot__brand {
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-4);
}
.foot__lockup { align-self: flex-start; }
.foot__logo { height: 22px; }
.foot__mark { height: 20px; width: 20px; }
.foot__product { font-size: 16px; }
.foot .brand-lockup__sep { height: 17px; }

.foot__tagline { color: var(--l2u-on-dark-5); max-width: 280px; }

.foot__status {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
    font-size: 11px;
    color: var(--l2u-on-dark-45);
}

.foot__env { color: var(--l2u-on-dark-4); margin: 0; }

.foot__cols { display: contents; }

.foot__col { display: flex; flex-direction: column; gap: var(--l2u-s-3); }
.foot__col-head {
    font-size: 11px;
    letter-spacing: 1.4px;
    color: var(--l2u-on-dark-45);
    text-transform: uppercase;
    margin: 0 0 var(--l2u-s-2);
}
.foot__col a {
    color: var(--l2u-on-dark-78);
    font-size: 13px;
    transition: color .15s;
}
.foot__col a:hover { color: var(--fg-on-dark); }

.foot__legal {
    max-width: 1280px;
    margin: var(--l2u-s-14) auto 0;
    padding-top: var(--l2u-s-6);
    border-top: 1px solid var(--l2u-dark-border);
    display: flex;
    justify-content: space-between;
    gap: var(--l2u-s-3);
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--l2u-on-dark-45);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1100px) {
    .arch__inner { grid-template-columns: 1fr; gap: var(--l2u-s-12); }
    .agents__inner { grid-template-columns: 1fr; gap: var(--l2u-s-12); }
    .cap-grid { grid-template-columns: 1fr 1fr; }
    .sdk__grid { grid-template-columns: 1fr 1fr; }
    .foot__inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 960px) {
    .nav { padding: 0 var(--l2u-s-6); }
    .nav__links { display: none; }
    .hero { padding: var(--l2u-s-12) var(--l2u-s-6) var(--l2u-s-16); }
    .hero__grid { grid-template-columns: 1fr; gap: var(--l2u-s-12); }
    .hero__title { font-size: 48px; line-height: 52px; letter-spacing: -1.4px; }
    .logo-strip { padding: 0 var(--l2u-s-6) var(--l2u-s-12); }
    .capabilities, .arch, .agents, .sdk, .pricing { padding-left: var(--l2u-s-6); padding-right: var(--l2u-s-6); }
    .capabilities, .arch, .agents, .pricing { padding-top: var(--l2u-s-16); padding-bottom: var(--l2u-s-16); }
    .capabilities__title, .pricing__title { font-size: 40px; line-height: 46px; letter-spacing: -1.2px; }
    .arch__title, .agents__title, .final-cta__title { font-size: 36px; line-height: 42px; letter-spacing: -1px; }
    .layer__nodes { flex-direction: column; }
    .layer__svc-grid { grid-template-columns: repeat(2, 1fr); }
    .final-cta { padding: 0 var(--l2u-s-6) var(--l2u-s-16); }
    .final-cta__band { grid-template-columns: 1fr; padding: var(--l2u-s-12) var(--l2u-s-8); gap: var(--l2u-s-12); }
    .final-cta__mark-tile { width: 160px; height: 160px; }
    .final-cta__mark { width: 110px; height: 110px; }
    .foot { padding: var(--l2u-s-12) var(--l2u-s-6); }
    .foot__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .cap-grid, .sdk__grid, .pricing__grid { grid-template-columns: 1fr; }
    .foot__inner { grid-template-columns: 1fr; }
    .hero__ctas, .agents__ctas, .final-cta__ctas { flex-direction: column; align-items: stretch; }
    .hero__meta { flex-wrap: wrap; }
    .agents__specs { grid-template-columns: 1fr; }
    .layer__svc-grid { grid-template-columns: 1fr; }
}