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

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