/* ==========================================================================
   MEDALLION XLN — LANDING DESIGN SYSTEM
   Location: /public_html/assets/css/landing.css

   Loaded after styles.css and Tailwind, only by the marketing pages.

   WHY THIS FILE EXISTS
   The landing page had one composition — white background, heading, paragraph,
   a row of equal rounded cards — repeated for every section. It read as a
   template rather than as a product with a point of view. This file supplies
   the parts that make a section recognisably Medallion: navy environments,
   gold signal accents, network lines between real things, contribution trails,
   and an editorial type scale big enough to carry a statement.

   Everything is namespaced .lx-* so it cannot collide with Tailwind utilities
   or with styles.css.
   ========================================================================== */

:root {
    --lx-navy:        #0B1220;
    --lx-navy-2:      #111C2E;
    --lx-navy-3:      #17263B;
    --lx-ink:         #0F172A;
    --lx-gold:        #F9C94C;
    --lx-orange:      #F28E1C;
    --lx-line-dark:   rgba(255, 255, 255, .10);
    --lx-line-light:  rgba(15, 23, 42, .10);
    --lx-dim:         rgba(255, 255, 255, .62);
    --lx-dim-strong:  rgba(255, 255, 255, .80);
    --lx-paper:       #FBFAF8;
}

/* ── Environments ──────────────────────────────────────────────────────────
   Sections alternate between paper and navy so the page has a pulse instead
   of one continuous white field. */

.lx-dark {
    position: relative;
    background: var(--lx-navy);
    color: #fff;
    isolation: isolate;
    overflow: hidden;
}
.lx-paper { background: var(--lx-paper); }

/* Engineering grid + a single warm light source. Present in every navy
   environment, which is what makes them feel like one place. */
.lx-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
}
.lx-dark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 50% at 78% -5%, rgba(249, 201, 76, .13), transparent 60%),
        radial-gradient(ellipse 50% 40% at 8% 105%, rgba(242, 142, 28, .07), transparent 60%);
    pointer-events: none;
}

/* ── Editorial type ───────────────────────────────────────────────────────── */

.lx-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lx-orange);
}
.lx-dark .lx-kicker { color: var(--lx-gold); }
.lx-kicker::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: .55;
}

/* One statement per section, set large enough to be the section. */
.lx-display {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.02;
    font-size: clamp(2.25rem, 5.2vw, 4.25rem);
    margin: 0;
}
/* Capped at 5rem, not 6: at 96px the hero headline broke "Build something
   real." across three lines inside its column. The statement should read as
   two lines of two, not as a stack of single words. */
.lx-display--xl { font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: 1.0; }
.lx-display--sm { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.06; }

.lx-lede {
    font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
    line-height: 1.6;
    color: rgba(15, 23, 42, .68);
    max-width: 46ch;
}
.lx-dark .lx-lede { color: var(--lx-dim); }

.lx-gold-text {
    background: linear-gradient(96deg, var(--lx-gold), var(--lx-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Network motif ─────────────────────────────────────────────────────────
   Nodes joined by lines. Used wherever the page claims things are connected,
   so the claim is shown rather than asserted. */

.lx-node {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .875rem;
    background: rgba(249, 201, 76, .12);
    border: 1px solid rgba(249, 201, 76, .28);
    color: var(--lx-gold);
    flex: 0 0 auto;
}
.lx-paper .lx-node, .lx-light .lx-node {
    background: rgba(242, 142, 28, .10);
    border-color: rgba(242, 142, 28, .22);
    color: var(--lx-orange);
}

/* A horizontal chain of steps with the connector drawn between them. */
.lx-chain {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .lx-chain { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.lx-chain__step {
    position: relative;
    padding: 1.5rem 1.25rem;
}
/* The connector: a rule that runs between steps, with the node sitting on it. */
.lx-chain__step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2.6rem;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lx-line-light) 12%, var(--lx-line-light) 88%, transparent);
}
.lx-dark .lx-chain__step::before {
    background: linear-gradient(90deg, transparent, var(--lx-line-dark) 12%, var(--lx-line-dark) 88%, transparent);
}
.lx-chain__step:first-child::before { background: linear-gradient(90deg, transparent 50%, var(--lx-line-light) 50%); }
.lx-chain__step:last-child::before  { background: linear-gradient(90deg, var(--lx-line-light) 50%, transparent 50%); }
.lx-dark .lx-chain__step:first-child::before { background: linear-gradient(90deg, transparent 50%, var(--lx-line-dark) 50%); }
.lx-dark .lx-chain__step:last-child::before  { background: linear-gradient(90deg, var(--lx-line-dark) 50%, transparent 50%); }
@media (max-width: 899px) {
    .lx-chain__step::before,
    .lx-chain__step:first-child::before,
    .lx-chain__step:last-child::before { display: none; }
}
.lx-chain__num {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: rgba(15, 23, 42, .30);
}
.lx-dark .lx-chain__num { color: rgba(255, 255, 255, .28); }

/* ── Surfaces ──────────────────────────────────────────────────────────────
   Two panel treatments, not one card used eleven times. */

.lx-panel {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--lx-line-dark);
    border-radius: 1.1rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lx-panel--light {
    background: #fff;
    border-color: var(--lx-line-light);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* A product surface: reads as software, not as a marketing card. */
.lx-ui {
    border-radius: 1.1rem;
    border: 1px solid var(--lx-line-dark);
    background: linear-gradient(180deg, var(--lx-navy-2), var(--lx-navy));
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .75);
    overflow: hidden;
}
.lx-ui__bar {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--lx-line-dark);
    background: rgba(255, 255, 255, .025);
}
.lx-ui__dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.16); }
.lx-ui__row {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.lx-ui__row:last-child { border-bottom: 0; }

/* ── Status, stated honestly ───────────────────────────────────────────────
   The page claims some things are not built. Those labels have to be legible
   at a glance, not buried in body text. */

.lx-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.lx-status--live    { background: rgba(16, 185, 129, .14); color: #059669; }
.lx-status--partial { background: rgba(245, 158, 11, .16); color: #B45309; }
.lx-status--planned { background: rgba(100, 116, 139, .14); color: #64748B; }
.lx-dark .lx-status--live    { background: rgba(16, 217, 148, .16); color: #34D399; }
.lx-dark .lx-status--partial { background: rgba(249, 201, 76, .16); color: var(--lx-gold); }
.lx-dark .lx-status--planned { background: rgba(255, 255, 255, .08); color: rgba(255,255,255,.55); }

/* ── Contribution trail ────────────────────────────────────────────────────
   A record, drawn as a record: a rail with entries hanging off it. */

.lx-trail { position: relative; padding-left: 1.75rem; }
.lx-trail::before {
    content: "";
    position: absolute;
    left: .4375rem;
    top: .5rem;
    bottom: .5rem;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--lx-line-light) 8%, var(--lx-line-light) 92%, transparent);
}
.lx-dark .lx-trail::before { background: linear-gradient(180deg, transparent, var(--lx-line-dark) 8%, var(--lx-line-dark) 92%, transparent); }
.lx-trail__item { position: relative; padding: .6875rem 0; }
.lx-trail__item::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 1.15rem;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--lx-orange);
    box-shadow: 0 0 0 3px rgba(242, 142, 28, .14);
}
.lx-dark .lx-trail__item::before {
    background: var(--lx-gold);
    box-shadow: 0 0 0 3px rgba(249, 201, 76, .14);
}

/* ── Comparison split ──────────────────────────────────────────────────────
   Two columns that are deliberately NOT equal in weight: the point of the
   section is that one of them is the product. */

.lx-versus { display: grid; gap: 1rem; }
@media (min-width: 900px) { .lx-versus { grid-template-columns: 1fr 1.15fr; gap: 1.5rem; align-items: start; } }
.lx-versus__muted { opacity: .72; }

.lx-flow-list { list-style: none; margin: 0; padding: 0; }
.lx-flow-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    font-weight: 600;
}
.lx-flow-list li + li { border-top: 1px solid var(--lx-line-dark); }
.lx-versus__muted .lx-flow-list li + li { border-top-color: var(--lx-line-light); }
.lx-flow-list .lx-idx {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .6875rem;
    opacity: .45;
    width: 1.25rem;
    flex: 0 0 auto;
}

/* ── Big numbers / keywords ────────────────────────────────────────────────── */

.lx-figure {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-weight: 800;
    letter-spacing: -.04em;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1;
    background: linear-gradient(180deg, #fff, rgba(255,255,255,.55));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Motion ────────────────────────────────────────────────────────────────
   One signal, used sparingly: something on the network is alive. */

.lx-pulse {
    width: 7px; height: 7px; border-radius: 999px;
    background: #34D399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .55);
    animation: lx-pulse 2.4s ease-out infinite;
    flex: 0 0 auto;
}
@keyframes lx-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
    70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* Connector lines in the hero diagram draw themselves once on load. */
.lx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lx-draw 1.5s ease forwards; }
@keyframes lx-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .lx-pulse { animation: none; }
    .lx-draw  { animation: none; stroke-dashoffset: 0; }
}

/* ========================================================================
   LANDING POSITIONING EXPERIMENT — isolated .ab-* component system
   ======================================================================== */
body[data-landing-experiment] { background:#f8f7f3; color:var(--lx-ink); }
body[data-landing-experiment] #main-content { overflow:clip; }
.ab-shell { width:min(100% - 3rem, 1280px); margin-inline:auto; min-width:0; }
.ab-section { position:relative; padding:clamp(5rem,8vw,8.5rem) 0; }
.ab-kicker { margin:0 0 1rem; color:#ba6a10; font-size:.72rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.ab-section-head { max-width:760px; margin-bottom:3rem; }
.ab-section-head h2,.ab-proof__intro h2,.ab-final h2,.ab-beta h2 { margin:0; font:800 clamp(2.15rem,4.5vw,4.5rem)/1.02 var(--font-display,'Plus Jakarta Sans',sans-serif); letter-spacing:-.045em; }
.ab-section-head>p:last-child,.ab-proof__intro>p,.ab-final__inner>p,.ab-beta__panel>div>p:last-child { max-width:650px; margin:1.25rem 0 0; color:#526075; font-size:1.08rem; line-height:1.7; }
.ab-actions { display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }
.ab-button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.8rem 1.25rem; border:1px solid transparent; border-radius:999px; font-weight:750; text-decoration:none; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.ab-button:hover { transform:translateY(-2px); }
.ab-button--primary { background:var(--lx-gold); color:#111827; box-shadow:0 12px 35px rgba(249,201,76,.18); }
.ab-button--primary:hover { background:#ffd86b; }
.ab-button--secondary { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.05); color:#fff; }
.ab-text-link { display:inline-flex; gap:.5rem; align-items:center; margin-top:1.35rem; color:#b96a12; font-weight:750; text-decoration:none; }

.ab-hero { position:relative; isolation:isolate; overflow:hidden; padding:clamp(8.25rem,12vw,11rem) 0 0; background:#091221; color:#fff; }
.ab-hero::before { content:""; position:absolute; inset:0; z-index:-2; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(#000,transparent 88%); }
.ab-hero::after { content:""; position:absolute; width:60vw; height:60vw; right:-20vw; top:-25vw; z-index:-1; border-radius:50%; background:radial-gradient(circle,rgba(249,201,76,.17),rgba(249,201,76,0) 66%); }
.ab-hero--b::after { right:auto; left:-25vw; background:radial-gradient(circle,rgba(242,142,28,.13),rgba(242,142,28,0) 68%); }
.ab-hero__grid { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(430px,.96fr); gap:clamp(2rem,6vw,6rem); align-items:center; }
.ab-hero__copy,.ab-hero__visual { min-width:0; }
.ab-beta-pill { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:2rem; padding:.42rem .75rem; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:rgba(255,255,255,.72); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ab-beta-pill span,.ab-live-dot { width:.48rem; height:.48rem; border-radius:50%; background:#4ade80; box-shadow:0 0 0 5px rgba(74,222,128,.09); }
.ab-hero .ab-kicker,.ab-final .ab-kicker,.ab-agents .ab-kicker { color:var(--lx-gold); }
.ab-hero__title { max-width:790px; margin:0; font:800 clamp(3.25rem,6.6vw,6.75rem)/.92 var(--font-display,'Plus Jakarta Sans',sans-serif); letter-spacing:-.065em; }
.ab-hero__title span { color:var(--lx-gold); }
.ab-hero--b .ab-hero__title span { background:linear-gradient(90deg,var(--lx-gold),#f59e62); background-clip:text; -webkit-background-clip:text; color:transparent; }
.ab-hero__lede { max-width:680px; margin:1.6rem 0 2rem; color:rgba(255,255,255,.7); font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.65; }
.ab-hero__note { margin:1.1rem 0 0; color:rgba(255,255,255,.45); font-size:.78rem; }
.ab-hero__visual { position:relative; }
.ab-visual-caption { margin:.85rem 0 0; color:rgba(255,255,255,.42); font-size:.68rem; text-align:right; }
.ab-network-stage,.ab-creator-stage { position:relative; padding:1.1rem; border:1px solid rgba(255,255,255,.13); border-radius:1.5rem; background:linear-gradient(150deg,rgba(23,38,59,.94),rgba(8,15,28,.98)); box-shadow:0 28px 80px rgba(0,0,0,.34); }
.ab-network-stage::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 40% 18%,rgba(249,201,76,.1),transparent 35%); pointer-events:none; }
.ab-network-stage__top,.ab-creator-stage__header { display:flex; align-items:center; gap:.55rem; padding:.3rem .25rem 1rem; color:rgba(255,255,255,.62); font-size:.68rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.ab-network-stage__top>span:last-child,.ab-creator-stage__header small { margin-left:auto; color:rgba(255,255,255,.38); }
.ab-people-row { position:relative; display:flex; justify-content:center; gap:2rem; padding:1.2rem 0 1.5rem; }
.ab-people-row::before { content:""; position:absolute; left:22%; right:22%; top:2.5rem; height:1px; background:linear-gradient(90deg,transparent,var(--lx-gold),transparent); opacity:.45; }
.ab-person { position:relative; z-index:1; display:grid; justify-items:center; gap:.45rem; }
.ab-person>span,.ab-creator-avatar { display:grid; place-items:center; width:3.3rem; height:3.3rem; border:1px solid rgba(249,201,76,.45); border-radius:50%; background:#111e32; color:var(--lx-gold); font-size:.8rem; font-weight:800; box-shadow:0 0 0 7px #0f1a2c; }
.ab-person small { color:rgba(255,255,255,.55); font-size:.68rem; }
.ab-collab-card,.ab-opportunity-card { position:relative; display:flex; gap:.85rem; align-items:center; padding:1rem; border:1px solid rgba(255,255,255,.1); border-radius:1rem; background:rgba(255,255,255,.045); }
.ab-collab-card--primary { margin-bottom:.7rem; border-color:rgba(249,201,76,.27); }
.ab-collab-card small,.ab-opportunity-card small,.ab-product-main small { display:block; margin-bottom:.22rem; color:var(--lx-gold); font-size:.61rem; font-weight:800; letter-spacing:.13em; }
.ab-collab-card strong,.ab-creator-profile strong,.ab-opportunity-card strong { display:block; font-size:.9rem; }
.ab-collab-card p,.ab-creator-profile p,.ab-opportunity-card p { margin:.18rem 0 0; color:rgba(255,255,255,.52); font-size:.72rem; }
.ab-card-icon { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.75rem; background:rgba(249,201,76,.12); color:var(--lx-gold); }
.ab-progress { margin-left:auto; color:#4ade80; font-size:.78rem; font-weight:800; }
.ab-collab-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.ab-collab-grid>.ab-collab-card { align-items:flex-start; }
.ab-collab-grid>.ab-collab-card>i { color:var(--lx-gold); }
.ab-creator-profile { display:flex; align-items:center; gap:1rem; padding:1.1rem .5rem 1.4rem; }
.ab-creator-avatar { border-radius:1rem; font-size:1.15rem; }
.ab-creator-needs { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
.ab-creator-needs span { padding:.8rem; border:1px solid rgba(255,255,255,.09); border-radius:.8rem; color:rgba(255,255,255,.7); font-size:.72rem; }
.ab-creator-needs i { display:block; margin-bottom:.65rem; color:var(--lx-gold); }
.ab-creator-needs b { display:block; margin-top:.3rem; color:#fff; }
.ab-opportunity-card { display:block; margin-top:.65rem; }
.ab-opportunity-card>span { position:absolute; top:1rem; right:1rem; color:var(--lx-gold); font-size:.7rem; }
.ab-flow { display:grid; grid-template-columns:repeat(6,1fr); margin-top:clamp(4rem,7vw,7rem); border-top:1px solid rgba(255,255,255,.09); }
.ab-flow__step { position:relative; display:flex; align-items:center; gap:.65rem; padding:1.4rem .7rem; color:rgba(255,255,255,.68); font-size:.72rem; }
.ab-flow__step:not(:last-child)::after { content:""; position:absolute; right:0; width:1px; height:35%; background:rgba(255,255,255,.1); }
.ab-flow__step span { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.65rem; background:rgba(249,201,76,.1); color:var(--lx-gold); }

.ab-positioning { background:#fbfaf7; }
.ab-execution-map { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid #e4e1d9; border-radius:1.25rem; overflow:hidden; background:#e4e1d9; }
.ab-execution-map article { position:relative; z-index:1; min-width:0; padding:2rem; background:#fff; }
.ab-map-node { display:grid; place-items:center; width:3rem; height:3rem; margin-bottom:2rem; border-radius:50%; background:#0e1a2b; color:var(--lx-gold); }
.ab-execution-map small { color:#a86113; font-weight:800; }
.ab-execution-map h3 { margin:.55rem 0; font-size:1.15rem; }
.ab-execution-map p { margin:0; color:#687385; font-size:.9rem; line-height:1.6; }
.ab-audience-contrast { display:grid; grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr); align-items:stretch; }
.ab-audience-contrast article { min-width:0; padding:clamp(2rem,4vw,3.5rem); border:1px solid #e3e1da; border-radius:1.4rem; background:#fff; }
.ab-audience-contrast__medallion { background:#0d192a!important; color:#fff; border-color:#0d192a!important; }
.ab-audience-contrast h3 { margin:.7rem 0 1rem; font:800 clamp(1.8rem,3vw,3rem)/1.04 var(--font-display,'Plus Jakarta Sans',sans-serif); letter-spacing:-.04em; }
.ab-audience-contrast p:last-child { color:#657286; line-height:1.65; }
.ab-audience-contrast__medallion p:last-child { color:rgba(255,255,255,.6); }
.ab-label { color:#aa6315; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.ab-contrast-arrow { display:grid; place-content:center; justify-items:center; gap:.45rem; color:#9b5b12; font-size:.7rem; text-transform:uppercase; }
.ab-signal-bars { display:flex; align-items:flex-end; gap:.35rem; height:70px; margin:2rem 0; }
.ab-signal-bars span { width:11%; height:var(--h); border-radius:.3rem .3rem 0 0; background:#dedbd1; }
.ab-opportunity-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0; }
.ab-opportunity-tags span { padding:.45rem .7rem; border:1px solid rgba(249,201,76,.25); border-radius:999px; background:rgba(249,201,76,.08); color:var(--lx-gold); font-size:.75rem; }

.ab-proof { background:#0a1322; color:#fff; }
.ab-proof__intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.45fr); gap:2rem; align-items:end; margin-bottom:3rem; }
.ab-proof__intro>p { grid-column:1; color:rgba(255,255,255,.6); }
.ab-proof-links { grid-column:2; grid-row:1/3; display:grid; gap:.7rem; justify-self:end; }
.ab-proof-links a { color:var(--lx-gold); font-size:.83rem; font-weight:750; text-decoration:none; }
.ab-product-window { overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:1.25rem; background:#101b2d; box-shadow:0 30px 80px rgba(0,0,0,.22); }
.ab-product-window__bar { display:flex; align-items:center; gap:.4rem; min-height:48px; padding:0 1rem; border-bottom:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.65); font-size:.68rem; }
.ab-product-window__bar>span { width:.55rem; height:.55rem; border-radius:50%; background:#6c7585; }
.ab-product-window__bar>span:first-child { background:#ef7d6f; }.ab-product-window__bar>span:nth-child(2){background:#f5c95d}.ab-product-window__bar>span:nth-child(3){background:#5fca8e}
.ab-product-window__bar b { margin-left:.55rem; letter-spacing:.08em; }.ab-product-window__bar small{margin-left:auto;color:rgba(255,255,255,.35)}
.ab-product-window__body { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:390px; }
.ab-product-window aside { display:flex; flex-direction:column; gap:.5rem; padding:1.3rem .8rem; border-right:1px solid rgba(255,255,255,.1); }
.ab-product-window aside>b { display:grid; place-items:center; width:2.1rem; height:2.1rem; margin:0 .5rem 1rem; border-radius:.6rem; background:var(--lx-gold); color:#111827; }
.ab-product-window aside span { display:flex; align-items:center; gap:.6rem; padding:.65rem .7rem; border-radius:.55rem; color:rgba(255,255,255,.5); font-size:.72rem; }
.ab-product-window aside span.active { background:rgba(249,201,76,.1); color:var(--lx-gold); }
.ab-product-main { min-width:0; padding:1.6rem; background:radial-gradient(circle at 80% 0,rgba(249,201,76,.08),transparent 35%),#0d1727; }
.ab-product-main__head { display:flex; justify-content:space-between; gap:1rem; align-items:end; margin-bottom:1.2rem; }
.ab-product-main__head h3 { margin:.2rem 0 0; font-size:1.35rem; }.ab-product-main__head>span{color:#4ade80;font-size:.7rem}
.ab-product-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.ab-product-grid article { min-width:0; padding:1rem; border:1px solid rgba(255,255,255,.09); border-radius:.85rem; background:rgba(255,255,255,.04); }
.ab-product-grid article.wide { grid-column:1/-1; }
.ab-product-grid h4 { margin:.3rem 0; font-size:.9rem; }.ab-product-grid p{margin:.3rem 0;color:rgba(255,255,255,.48);font-size:.72rem}
.ab-demo-action { display:inline-block; margin-top:.85rem; padding:.35rem .7rem; border-radius:999px; background:var(--lx-gold); color:#111827; font-size:.67rem; font-weight:800; }
.ab-mini-progress { height:.3rem; margin-top:1rem; border-radius:999px; background:rgba(255,255,255,.1); }.ab-mini-progress span{display:block;width:62%;height:100%;border-radius:inherit;background:#4ade80}
.ab-attendees { display:flex; margin-top:.8rem; }.ab-attendees i,.ab-attendees b{display:grid;place-items:center;width:1.75rem;height:1.75rem;margin-right:-.3rem;border:2px solid #142035;border-radius:50%;background:#263750;color:#fff;font-size:.55rem;font-style:normal}
.ab-surface-strip { display:grid; grid-template-columns:repeat(8,1fr); gap:1px; margin-top:1rem; border:1px solid rgba(255,255,255,.09); border-radius:1rem; overflow:hidden; background:rgba(255,255,255,.09); }
.ab-surface-strip span { display:grid; gap:.45rem; justify-items:center; padding:.9rem .3rem; background:#0f1a2a; color:rgba(255,255,255,.64); font-size:.66rem; text-align:center; }.ab-surface-strip i{color:var(--lx-gold)}

.ab-workflows { background:#f7f5ef; }
.ab-workflows--b { background:#fff; }
.ab-workflow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.ab-workflows--b .ab-workflow-grid { grid-template-columns:repeat(4,1fr); }
.ab-workflow-card { position:relative; min-width:0; min-height:290px; padding:1.6rem; border:1px solid #e2dfd6; border-radius:1rem; background:#fff; color:inherit; text-decoration:none; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.ab-workflow-card:hover { transform:translateY(-4px); border-color:#d29a43; box-shadow:0 20px 40px rgba(25,35,50,.07); }
.ab-workflow-card__number { position:absolute; top:1rem; right:1rem; color:#b8b4aa; font:700 .7rem/1 monospace; }
.ab-workflow-card__icon { display:grid; place-items:center; width:2.8rem; height:2.8rem; margin-bottom:2rem; border-radius:.75rem; background:#0e1a2b; color:var(--lx-gold); }
.ab-workflow-card h3 { margin:0 0 .65rem; font-size:1.05rem; }.ab-workflow-card p{margin:0;color:#677386;font-size:.87rem;line-height:1.65}
.ab-card-link { position:absolute; left:1.6rem; bottom:1.5rem; color:#a75e0d; font-size:.72rem; font-weight:800; }

.ab-agents { background:#0b1423; color:#fff; }
.ab-agents__grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(3rem,8vw,8rem); align-items:center; }
.ab-agents .ab-section-head { margin:0; }.ab-agents .ab-section-head>p:last-of-type{color:rgba(255,255,255,.58)}
.ab-agent-stack { display:grid; gap:.7rem; }
.ab-agent-stack article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1rem; align-items:center; padding:1rem; border:1px solid rgba(255,255,255,.1); border-radius:1rem; background:rgba(255,255,255,.035); }
.ab-agent-stack article>span { display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:.75rem; background:rgba(249,201,76,.1); color:var(--lx-gold); }
.ab-agent-stack small{color:var(--lx-gold);font-size:.56rem;letter-spacing:.13em}.ab-agent-stack h3{margin:.2rem 0;font-size:.95rem}.ab-agent-stack p{margin:0;color:rgba(255,255,255,.48);font-size:.75rem}.ab-agent-stack article>i{color:rgba(255,255,255,.3)}

.ab-beta { background:#f7f5ef; }
.ab-beta__panel { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(240px,.55fr); gap:2rem; align-items:center; padding:clamp(1.8rem,4vw,3.5rem); border:1px solid #dedbd1; border-radius:1.5rem; background:#fff; }
.ab-beta__mark { position:relative; display:grid; place-items:center; width:5rem; height:5rem; border-radius:1.2rem; background:#0e1a2b; color:var(--lx-gold); font-size:2rem; font-weight:900; }.ab-beta__mark i{position:absolute;right:-.35rem;top:-.35rem;font-size:1rem}
.ab-beta h2 { font-size:clamp(1.8rem,3vw,3rem); }.ab-beta__truth{display:grid;gap:.75rem}.ab-beta__truth span{color:#4e5d71;font-size:.8rem;font-weight:700}.ab-beta__truth i{margin-right:.45rem;color:#15945e}
.ab-final { position:relative; isolation:isolate; overflow:hidden; padding:clamp(6rem,10vw,10rem) 0; background:#07101e; color:#fff; text-align:center; }
.ab-final__inner { display:grid; justify-items:center; }.ab-final h2{max-width:900px;font-size:clamp(2.6rem,6vw,5.6rem)}.ab-final__inner>p{color:rgba(255,255,255,.6)}.ab-final .ab-actions{margin-top:2rem}.ab-final__orb{position:absolute;z-index:-1;border:1px solid rgba(249,201,76,.14);border-radius:50%}.ab-final__orb--one{width:500px;height:500px;right:-250px;top:-200px}.ab-final__orb--two{width:320px;height:320px;left:-160px;bottom:-100px}

@media (max-width:1100px){
  .ab-hero__grid{grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);gap:2rem}.ab-hero__title{font-size:clamp(3rem,6vw,5.5rem)}
  .ab-workflows--b .ab-workflow-grid{grid-template-columns:repeat(3,1fr)}.ab-surface-strip{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .ab-shell{width:min(100% - 2rem,1280px)}.ab-hero{padding-top:7.5rem}.ab-hero__grid,.ab-agents__grid{grid-template-columns:1fr}.ab-hero__visual{max-width:640px}.ab-flow{grid-template-columns:repeat(3,1fr)}
  .ab-execution-map{grid-template-columns:1fr 1fr}.ab-audience-contrast{grid-template-columns:1fr}.ab-contrast-arrow{padding:1rem;transform:rotate(90deg)}
  .ab-proof__intro{grid-template-columns:1fr}.ab-proof-links{grid-column:1;grid-row:auto;justify-self:start}.ab-workflow-grid,.ab-workflows--b .ab-workflow-grid{grid-template-columns:repeat(2,1fr)}
  .ab-beta__panel{grid-template-columns:auto 1fr}.ab-beta__truth{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .ab-section{padding:4.5rem 0}.ab-hero__title{font-size:clamp(2.8rem,13vw,4.6rem)}.ab-hero__visual{width:100%}.ab-flow{grid-template-columns:repeat(2,1fr)}
  .ab-product-window__body{grid-template-columns:1fr}.ab-product-window aside{display:none}.ab-product-main{padding:1rem}.ab-product-main__head{align-items:start;flex-direction:column}.ab-surface-strip{grid-template-columns:repeat(2,1fr)}
  .ab-workflow-grid,.ab-workflows--b .ab-workflow-grid{grid-template-columns:1fr}.ab-workflow-card{min-height:250px}.ab-beta__panel{grid-template-columns:1fr}.ab-beta__truth{grid-template-columns:1fr}
}
@media (max-width:430px){
  .ab-shell{width:calc(100% - 1.5rem)}.ab-hero{padding-top:6.6rem}.ab-hero__title{font-size:clamp(2.65rem,14vw,3.75rem)}.ab-hero__lede{font-size:1rem}.ab-actions{align-items:stretch;flex-direction:column}.ab-button{width:100%}
  .ab-collab-grid,.ab-creator-needs,.ab-execution-map,.ab-product-grid{grid-template-columns:1fr}.ab-product-grid article.wide{grid-column:auto}.ab-people-row{gap:.8rem}.ab-flow__step{padding:1rem .35rem;font-size:.65rem}.ab-network-stage,.ab-creator-stage{padding:.8rem}
  .ab-section-head h2,.ab-proof__intro h2,.ab-final h2{font-size:clamp(2rem,10vw,3rem)}.ab-product-window__bar b{font-size:.56rem}.ab-product-window__bar small{display:none}.ab-opportunity-card>span{position:static;display:block;margin-top:.7rem}
}
@media (max-width:390px){.ab-hero__title{letter-spacing:-.055em}.ab-flow{grid-template-columns:1fr 1fr}.ab-person>span{width:2.85rem;height:2.85rem}.ab-workflow-card{padding:1.35rem}.ab-card-link{left:1.35rem}}
@media (max-width:375px){.ab-shell{width:calc(100% - 1.1rem)}.ab-hero__note{font-size:.7rem}.ab-collab-card{padding:.8rem}.ab-surface-strip span{font-size:.61rem}}
@media (prefers-reduced-motion:reduce){.ab-button,.ab-workflow-card{transition:none!important}.ab-button:hover,.ab-workflow-card:hover{transform:none}}

/* ── Charts and drawn figures ──────────────────────────────────────────────
   Two primitives, both dependency-free: proportion bars built from plain
   elements, and stroke-drawn SVG for diagrams.

   NO CHARTING LIBRARY. A landing page that already pulls Tailwind, GSAP and
   Font Awesome off three CDNs does not need a fourth request to draw a dozen
   rectangles, and a bar whose width is a CSS custom property stays responsive
   and readable to a screen reader in a way a <canvas> does not.

   WHY WIDTHS ANIMATE FROM A CLASS, NOT ON LOAD. These figures sit far down the
   page. A CSS animation would run — and finish — while the section is still
   several screens away, so every visitor would scroll to a chart that had
   already finished moving. scripts.php adds .is-drawn when the figure actually
   enters the viewport. Without JS, or with reduced motion, the bars render at
   their true width immediately; the animation is decoration, never the data. */

.lx-chart { --lx-c-live: #34D399; --lx-c-partial: var(--lx-gold); --lx-c-planned: rgba(255,255,255,.34); }
.lx-paper .lx-chart { --lx-c-live: #059669; --lx-c-partial: #D97706; --lx-c-planned: rgba(15,23,42,.26); }

.lx-bar {
    display: flex;
    width: 100%;
    height: .5rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--lx-line-dark);
}
.lx-paper .lx-bar { background: var(--lx-line-light); }
.lx-bar--tall { height: .875rem; }

.lx-bar__seg {
    width: var(--w, 0%);
    min-width: 0;
    transition: width .9s cubic-bezier(.22, .61, .36, 1);
}
.lx-bar__seg--live    { background: var(--lx-c-live); }
.lx-bar__seg--partial { background: var(--lx-c-partial); }
.lx-bar__seg--planned { background: var(--lx-c-planned); }

/* Pre-draw state. Applied only once JS has confirmed it can animate, so a
   no-JS visitor never sees an empty chart. */
.lx-chart[data-animate] .lx-bar__seg { width: 0; }
.lx-chart[data-animate].is-drawn .lx-bar__seg { width: var(--w, 0%); }

/* Stagger, so the categories resolve in sequence rather than as one jump. */
.lx-chart.is-drawn .lx-bar__seg { transition-delay: calc(var(--i, 0) * 70ms); }

.lx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    font-size: .75rem;
}
.lx-legend__key {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
}
.lx-legend__swatch {
    width: .625rem;
    height: .625rem;
    border-radius: 3px;
    flex: 0 0 auto;
}

/* The loop, drawn as a loop. pathLength="1" is what lets .lx-draw use a
   dasharray of 1 regardless of the path's real length. */
.lx-ring__path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lx-chart[data-animate].is-drawn .lx-ring__path,
.lx-chart:not([data-animate]) .lx-ring__path { animation: lx-draw 1.6s ease forwards; }

.lx-ring__node circle { transition: opacity .4s ease, transform .4s ease; }
.lx-chart[data-animate] .lx-ring__node { opacity: 0; }
.lx-chart[data-animate].is-drawn .lx-ring__node {
    opacity: 1;
    transition: opacity .45s ease calc(.5s + var(--i, 0) * 110ms);
}

@media (prefers-reduced-motion: reduce) {
    .lx-bar__seg { transition: none; }
    .lx-chart[data-animate] .lx-bar__seg { width: var(--w, 0%); }
    .lx-chart[data-animate] .lx-ring__node { opacity: 1; }
    .lx-ring__path { stroke-dashoffset: 0; animation: none; }
    .lx-chart[data-animate].is-drawn .lx-ring__path { animation: none; }
}