/* ==========================================================================
   Stochumberg — landing page
   Editorial rebuild of the marketing home: split hero with a workspace map,
   a six-column model rail, numbered capability rows, and hairline-separated
   bands. Nav, footer, buttons and the reveal-on-scroll behaviour come from
   brand.css; every colour, radius and font here is a tokens.css variable.

   Replaces the old `#login-overlay .l-*` block that used to live in
   style.css — this page no longer loads style.css at all.
   ========================================================================== */

.ld-wrap {
    max-width: var(--br-container);
    margin: 0 auto;
}

/* Bands are separated by a hairline, not by shadow or a tinted panel. */
.ld-band {
    position: relative;
    z-index: 1;
    padding: clamp(64px, 9vw, 104px) var(--br-gutter);
}

.ld-rule {
    position: relative;
    z-index: 1;
    height: 1px;
    border: 0;
    background: var(--border);
    max-width: var(--br-container);
    margin: 0 auto;
}

.ld-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chart-1);
    margin-bottom: 14px;
}

.ld-head {
    max-width: 34rem;
    margin-bottom: clamp(32px, 5vw, 48px);
}

.ld-head h2 {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 12px;
    text-wrap: balance;
}

.ld-head p {
    color: var(--muted-foreground);
    font-size: 16px;
    line-height: 1.6;
    max-width: 48ch;
}

/* ---------- Hero ---------- */

.ld-hero {
    position: relative;
    z-index: 1;
    max-width: var(--br-container);
    margin: 0 auto;
    padding: clamp(40px, 7vw, 72px) var(--br-gutter) 0;
}

/* The map needs the wider half: at an even split its middle column collapses
   to ~140px and every bubble wraps one word per line. */
.ld-stage {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: end;
}

.ld-copy {
    padding-bottom: clamp(8px, 2vw, 24px);
    max-width: 34rem;
}

.ld-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.ld-badge .ld-pulse {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}

/* The wordmark is the one place Syne is allowed, and it stays the largest
   thing in the hero. Half the size it used to be, so the tagline below has to
   come down with it to stay subordinate. */
.ld-brand {
    font-family: var(--font-brand);
    font-size: clamp(28px, 3.8vw, 38px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--foreground);
    margin-bottom: 12px;
}

.ld-title {
    font-size: clamp(19px, 2.3vw, 27px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    text-wrap: balance;
}

.ld-sub {
    font-size: clamp(15px, 1.5vw, 17px);
    color: var(--muted-foreground);
    line-height: 1.6;
    max-width: 40ch;
    margin-bottom: 26px;
}

.ld-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Google sign-in: the primary CTA, so it is the high-contrast neutral fill. */
.ld-google {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 20px;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.ld-google:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.ld-google svg { flex: none; }

.ld-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--foreground);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}

.ld-ghost:hover {
    background: var(--accent);
    border-color: var(--ring);
}

.ld-note {
    width: 100%;
    font-size: 12.5px;
    color: var(--muted-foreground);
    margin-top: 12px;
}

.ld-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.ld-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--muted-foreground);
}

.ld-trust-item svg {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.ld-trust-sep {
    color: var(--border);
    font-size: 12px;
}

/* ---------- Workspace map ----------
   Three columns — sidebar, conversation, model rail. It sits on the fold, so
   the bottom edge is open: the card runs off the hero into the next band. */

.ld-map {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    overflow: hidden;
    background: var(--background);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-lg);
}

.ld-map-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.ld-map-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ld-map-title {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
}

.ld-map-body {
    flex: 1;
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr) 136px;
    min-height: 0;
}

.ld-map-side {
    padding: 12px 8px;
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 55%, transparent);
}

.ld-map-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    margin-bottom: 2px;
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    color: var(--muted-foreground);
}

.ld-map-item svg {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
}

.ld-map-item.is-on {
    background: var(--secondary);
    color: var(--foreground);
}

.ld-map-grp {
    margin: 12px 0 4px;
    padding: 0 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.ld-map-thread {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--muted-foreground);
}

.ld-map-thread time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
    opacity: 0.75;
}

.ld-map-main {
    display: flex;
    flex-direction: column;
    padding: 20px 22px 18px;
    min-height: 360px;
}

.ld-map-head {
    margin-bottom: 16px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.ld-map-feed {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
}

.ld-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ld-msg-user { justify-content: flex-end; }

.ld-bubble-user {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);
    background: var(--bubble-user);
    border: 1px solid var(--bubble-user-border);
    font-size: 13.5px;
    line-height: 1.5;
}

.ld-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-mark);
    color: #fff;
    font-family: var(--font-brand);
    font-size: 12px;
    font-weight: 700;
}

.ld-bubble-ai {
    max-width: 82%;
    padding: 12px 14px;
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-sm);
    background: var(--card);
    border: 1px solid var(--border);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted-foreground);
}

.ld-bubble-ai strong {
    color: var(--foreground);
    font-weight: 600;
}

.ld-map-composer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--card);
}

.ld-map-composer span:first-child {
    flex: 1;
    font-size: 13px;
    color: var(--muted-foreground);
}

.ld-map-send {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--primary);
    color: var(--primary-foreground);
}

.ld-map-send svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
}

.ld-map-rail {
    padding: 14px 10px;
    border-left: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 55%, transparent);
}

.ld-rail-label {
    margin: 8px 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.ld-rail-label:first-child { margin-top: 0; }

.ld-rail-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    margin-bottom: 6px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 12.5px;
}

.ld-rail-chip i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 2px;
}

.ld-rail-chip .ld-live {
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--success);
}

/* ---------- Models ----------
   A rail, not a card farm: six cells divided by hairlines. */

.ld-models {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.ld-model {
    display: flex;
    flex-direction: column;
    min-height: 200px;
    padding: 26px 18px;
    border-right: 1px solid var(--border);
}

.ld-model:last-child { border-right: none; }

.ld-model .ld-model-bar {
    width: 22px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 18px;
}

.ld-model h3 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 4px;
}

.ld-model .ld-engine {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
    margin-bottom: 12px;
}

.ld-model p {
    margin-top: auto;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted-foreground);
}

/* ---------- Capabilities ---------- */

.ld-caps {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
}

.ld-cap {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: baseline;
    padding: 26px 0;
    border-bottom: 1px solid var(--border);
}

.ld-cap-num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
}

.ld-cap h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.ld-cap p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted-foreground);
    max-width: 46ch;
}

/* ---------- Zen ---------- */

.ld-zen {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(80% 70% at 12% 80%,
            color-mix(in srgb, var(--success) 9%, transparent), transparent 60%),
        var(--background);
}

.ld-zen .ld-kicker { color: var(--success); }

.ld-zen-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.ld-zen-intro h2 {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
    text-wrap: balance;
}

.ld-zen-intro p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted-foreground);
    max-width: 40ch;
}

.ld-zen-point {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.ld-zen-point:first-child { border-top: 1px solid var(--border); }

.ld-zen-point h3 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 6px;
}

.ld-zen-point p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted-foreground);
    max-width: 42ch;
}

/* ---------- About ---------- */

.ld-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.ld-about-cell {
    background: var(--background);
    padding: clamp(24px, 4vw, 36px);
}

.ld-about-cell .ld-n {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--muted-foreground);
}

.ld-about-cell .ld-n::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.ld-about-cell h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
}

.ld-about-cell p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted-foreground);
    max-width: 52ch;
}

/* ---------- Closing ---------- */

.ld-closing {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    overflow: hidden;
    padding: clamp(44px, 7vw, 72px) clamp(24px, 5vw, 48px);
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--card);
}

.ld-closing::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 120px;
    pointer-events: none;
    background: radial-gradient(60% 100% at 50% 0%,
        color-mix(in srgb, var(--chart-1) 14%, transparent), transparent 70%);
}

.ld-closing > * { position: relative; }

.ld-closing h2 {
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 12px;
}

.ld-closing p {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--muted-foreground);
    margin-bottom: 26px;
}

.ld-closing .ld-google { margin-inline: auto; }

.ld-closing .ld-note {
    margin-top: 14px;
    font-size: 12.5px;
}

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

@media (max-width: 960px) {
    .ld-stage {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .ld-copy {
        max-width: 40rem;
        padding-bottom: 8px;
    }

    .ld-map-body { grid-template-columns: 1fr; }
    .ld-map-side,
    .ld-map-rail { display: none; }

    .ld-models { grid-template-columns: repeat(3, 1fr); }
    .ld-model:nth-child(3) { border-right: none; }
    .ld-model:nth-child(n + 4) { border-top: 1px solid var(--border); }

    .ld-cap {
        grid-template-columns: 48px 1fr;
        gap: 10px 16px;
    }

    .ld-cap p { grid-column: 2; }

    .ld-zen-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    /* The phone header keeps the mark and the CTA only; the link row is
       dropped in brand.css, where every page shares the same problem.

       The badge goes for the same reason: it wrapped to two lines and pushed
       the wordmark below the fold. */
    .ld-badge { display: none; }

    /* The trust items wrap here, which strands a separator at a line end. */
    .ld-trust-sep { display: none; }
    .ld-trust { gap: 8px 16px; }

    .ld-models { grid-template-columns: repeat(2, 1fr); }
    .ld-model:nth-child(2n) { border-right: none; }
    .ld-model:nth-child(3) { border-right: 1px solid var(--border); }
    .ld-model:nth-child(n + 3) { border-top: 1px solid var(--border); }

    .ld-about { grid-template-columns: 1fr; }

    .ld-cta-row .ld-google,
    .ld-cta-row .ld-ghost { flex: 1 0 auto; justify-content: center; }
}