/* ── Ambient glow wrap ────────────────────────────── */
.lp-hero-wrap {
    position: relative;
    overflow: hidden;
}

.lp-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.lp-glow-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(ellipse, var(--mud-palette-primary) 0%, transparent 70%);
    filter: blur(90px);
    opacity: 0.18;
    top: -250px;
    left: -200px;
}

.lp-glow-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse, var(--ij-lp-purple) 0%, transparent 70%);
    filter: blur(90px);
    opacity: 0.18;
    top: -150px;
    right: -150px;
}

.lp-glow-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse, var(--ij-lp-pink) 0%, transparent 70%);
    filter: blur(80px);
    opacity: 0.13;
    bottom: -100px;
    left: 35%;
}

/* ── Hero section ─────────────────────────────────── */
.lp-hero {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 96px;
    padding-bottom: 72px;
}

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    border-radius: 980px;
    padding: 5px 16px;
    margin-bottom: 32px;
}

/* ── App Store badge ──────────────────────────────────
   Apple's guidelines: 40px minimum height onscreen, and clear space of at least one-quarter
   the badge height (10px) around it — the band's padding clears that. The artwork is never
   recolored; the dark-theme swap picks Apple's own white file instead of filtering the
   black one. The badge itself lives in the device band below, never in the hero. */
.ij-appstore-badge {
    display: inline-flex;
    line-height: 0;
    border-radius: 8px;
    transition: opacity 120ms ease;
}

.ij-appstore-badge:hover {
    opacity: 0.85;
}

.ij-appstore-badge:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

.ij-appstore-badge-img {
    height: 40px;
    width: auto;
}

.ij-appstore-badge-img--dark {
    display: none;
}

.ij-theme-dark .ij-appstore-badge-img--light {
    display: none;
}

.ij-theme-dark .ij-appstore-badge-img--dark {
    display: inline-block;
}

.lp-gradient-text {
    background: linear-gradient(90deg, var(--mud-palette-primary), var(--ij-lp-purple), var(--ij-lp-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── The loop: Grade · Note · News · Ask Claude ───── */
.lp-loop-wrap {
    position: relative;
    z-index: 1;
    padding-bottom: 96px;
}

.lp-loop {
    display: flex;
    align-items: stretch;
    max-width: 1000px;
    margin: 0 auto;
}

.lp-loop-step {
    flex: 1;
    text-align: center;
    padding: 0 12px;
}

.lp-loop-tile {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.lp-loop-tile .mud-icon-root {
    font-size: 26px;
}

.lp-loop-tile--grade {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.lp-loop-tile--note {
    color: var(--ij-lp-purple);
    background: color-mix(in srgb, var(--ij-lp-purple) 14%, transparent);
}

.lp-loop-tile--news {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
}

.lp-loop-tile--claude {
    background: color-mix(in srgb, var(--ij-lp-clay) 14%, transparent);
}

.lp-loop-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    color: var(--mud-palette-text-primary);
}

.lp-loop-caption {
    font-size: 13px;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Arrows sit level with the tiles (padding-top ≈ half the tile), not the
   captions, so the row reads as one connected cycle. */
.lp-loop-arrow {
    display: flex;
    align-items: flex-start;
    padding-top: 17px;
    color: var(--mud-palette-text-disabled);
}

.lp-loop-arrow .mud-icon-root {
    font-size: 22px;
}

/* The eye should land on Claude — the last hop gets the clay accent. */
.lp-loop-arrow--claude {
    color: var(--ij-lp-clay);
}

/* ── "Works with Claude" band ─────────────────────── */
.lp-claude-wrap {
    position: relative;
    z-index: 1;
    padding-bottom: 96px;
}

.lp-claude-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ij-lp-clay) 30%, transparent);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--ij-lp-clay) 12%, transparent),
        color-mix(in srgb, var(--ij-lp-clay) 2%, transparent)
    );
}

.lp-claude-copy {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.lp-claude-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ij-lp-clay);
    margin-bottom: 16px;
}

.lp-claude-title {
    margin-bottom: 14px;
}

/* The mock exchange sits on a faint inset so it reads as a separate pane. */
.lp-claude-chat {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}

.lp-chat-bubble {
    font-size: 13.5px;
    line-height: 1.5;
    padding: 12px 15px;
}

.lp-chat-bubble--user {
    align-self: flex-end;
    max-width: 80%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 15px 15px 4px 15px;
}

.lp-chat-bubble--claude {
    align-self: flex-start;
    max-width: 88%;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 15px 15px 15px 4px;
    color: var(--mud-palette-text-primary);
}

.lp-chat-name {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* ── "Take your journal with you" device band ─────── */
.lp-appband-wrap {
    position: relative;
    z-index: 1;
    padding-bottom: 96px;
}

.lp-appband {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px;
    align-items: center;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--mud-palette-primary) 10%, transparent),
        color-mix(in srgb, var(--ij-lp-purple) 7%, transparent)
    );
}

.lp-appband-copy {
    min-width: 0;
    padding: 52px 12px 52px 48px;
}

.lp-appband-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.lp-appband-eyebrow .mud-icon-root {
    font-size: 15px;
}

.lp-appband-title {
    margin-bottom: 14px;
}

.lp-appband-body {
    max-width: 400px;
    margin-bottom: 28px;
}

/* Quiet disclaimer under the badge: the mockup's figures are an illustrative capture, not a
   live quote. Small and text-secondary so it clarifies without competing with the copy. */
.lp-appband-note {
    max-width: 400px;
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* The device is anchored to the bottom of the band and cropped by it — the screen runs off
   the edge rather than sitting in a floating frame, so the phone reads as a window into the
   app instead of a product shot. */
.lp-appband-phone {
    display: flex;
    justify-content: center;
    align-self: end;
    /* min-width:0 lets the column take its 0.85fr share instead of being pushed out to the
       device's intrinsic width — without it a tablet-width band overflows and clips the
       phone against its own rounded edge. */
    min-width: 0;
    padding: 36px 40px 0;
}

.lp-appband-device {
    position: relative;
    flex: none;
    width: 264px;
    max-width: 100%;
    aspect-ratio: 264 / 404;
    padding: 10px 10px 0;
    border-radius: 40px 40px 0 0;
    background: var(--mud-palette-black);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--mud-palette-black) 28%, transparent);
}

.lp-appband-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 32px 32px 0 0;
    background: var(--mud-palette-surface);
}

/* Real captures of the shipped iOS app's stock page, top-anchored so the frame crops the
   bottom. Two are stacked — the app's light and dark themes — and cross-fade so the phone
   demonstrates both looks. */
.lp-appband-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Stack the two captures; the cross-fade rides the light one's opacity between them. The
   dark shot sits underneath as the base, the light shot fades in and out on top. */
.lp-appband-shot--dark {
    position: absolute;
    inset: 0;
}

.lp-appband-shot--light {
    position: relative;
    z-index: 1;
    animation: lp-appband-crossfade 9s ease-in-out infinite;
}

/* Hold each theme, then a soft dissolve — long dwell so it reads as a gentle showcase, not
   a flicker. 0–40% light, 50–90% dark, cross-fading in the 10% gaps. */
@keyframes lp-appband-crossfade {
    0%,
    40% {
        opacity: 1;
    }
    50%,
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Respect a reduced-motion preference: no animated cross-fade. Fall back to the capture
   that matches the page's own theme, so a still frame still looks intentional. */
@media (prefers-reduced-motion: reduce) {
    .lp-appband-shot--light {
        animation: none;
    }

    .ij-theme-dark .lp-appband-shot--light {
        display: none;
    }
}

/* Between phone and desktop the band keeps two columns, but the copy needs the room more
   than the device does — trim the phone's gutters and let it scale with its column. */
@media (min-width: 600px) and (max-width: 959.95px) {
    .lp-appband-copy {
        padding: 40px 8px 40px 32px;
    }

    .lp-appband-phone {
        padding: 28px 16px 0;
    }
}

/* ── CTA section ──────────────────────────────────── */
.lp-cta-wrap {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 96px 24px;
}

.lp-cta-glow {
    position: absolute;
    width: 900px;
    height: 500px;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--ij-lp-purple));
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.14;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.lp-cta-content {
    position: relative;
    z-index: 1;
}

/* ── Responsive hero / CTA type — fluid so the (longer) FR strings don't
      overflow a phone. clamp() floors on small screens; the cap matches the
      custom theme sizes (AppTypography H2 3.5rem / H3 2.75rem) so desktop is
      pixel-identical to before. ── */
.lp-hero-title {
    font-size: clamp(2.25rem, 7vw, 3.5rem);
    /* Wraps the EN title into the comp's two balanced lines ("Every stock, on"
       / "the record.") — a width constraint + balance instead of a hard <br>,
       so the shorter FR title stays on one line. */
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

.lp-cta-title {
    font-size: clamp(1.875rem, 6vw, 2.75rem);
}

/* Trim the oversized vertical padding on phones; the loop stacks and the
   connecting arrows disappear (a vertical arrow chain reads as clutter). */
@media (max-width: 599.95px) {
    .lp-hero {
        padding-top: 56px;
        padding-bottom: 48px;
    }

    .lp-cta-wrap {
        padding: 56px 20px;
    }

    .lp-loop {
        flex-direction: column;
        gap: 32px;
    }

    .lp-loop-arrow {
        display: none;
    }

    .lp-claude-band {
        grid-template-columns: 1fr;
    }

    .lp-claude-copy {
        padding: 36px 28px;
    }

    .lp-claude-chat {
        padding: 28px;
    }

    .lp-appband {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .lp-appband-copy {
        padding: 36px 28px 32px;
    }

    .lp-appband-phone {
        padding: 0 28px;
    }

    .lp-appband-device {
        width: 232px;
    }
}