/* ============================================================================
   JustLinks — brand design system
   ============================================================================
   The marketing surface (home, pricing, explore, acceptable use) is a dark,
   editorial canvas. It is deliberately a separate layer from Bootstrap rather
   than a theme on top of it: Bootstrap still paints the authenticated
   dashboard, and a theme override there would drag every owner-facing table
   and form along with it.

   Rules that keep this honest:
   - Tokens live in :root and are the only source of colour, type and rhythm.
   - Nothing here targets a dashboard class. If a dashboard is ever redesigned
     it should get its own system, not inherit this one by accident.
   - Motion is decorative and always respects prefers-reduced-motion.
   ========================================================================== */

:root {
    /* Surfaces — near-black, not pure black, so shadows still read. */
    --jl-canvas: #07080a;
    --jl-canvas-2: #0b0d10;
    --jl-surface: rgba(255, 255, 255, .032);
    --jl-surface-2: rgba(255, 255, 255, .055);
    --jl-line: rgba(255, 255, 255, .09);
    --jl-line-strong: rgba(255, 255, 255, .18);

    /* Ink */
    --jl-ink: #f5f7fa;
    --jl-ink-2: rgba(245, 247, 250, .64);
    --jl-ink-3: rgba(245, 247, 250, .42);

    /* Brand — the existing palette, used sparingly. Cyan is the single accent. */
    --jl-cyan: #00aff0;
    --jl-sky: #7fe0ff;
    --jl-deep: #0a7cc1;
    --jl-navy: #083a52;

    /* Type */
    --jl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --jl-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --jl-font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

    /* Rhythm */
    --jl-radius: 18px;
    --jl-radius-sm: 12px;
    --jl-gutter: clamp(1.25rem, 4vw, 3rem);
    --jl-section: clamp(5.5rem, 11vw, 10.5rem);
}

/* ---------------------------------------------------------------------------
   Shell
   ------------------------------------------------------------------------- */

.mkt-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--jl-canvas);
    color: var(--jl-ink);
    font-family: var(--jl-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

.mkt-shell ::selection {
    background: rgba(0, 175, 240, .32);
    color: #fff;
}

.mkt-main {
    flex: 1;
}

.mkt-container {
    width: min(1180px, 100% - (var(--jl-gutter) * 2));
    margin-inline: auto;
}

.mkt-container--narrow {
    width: min(820px, 100% - (var(--jl-gutter) * 2));
    margin-inline: auto;
}

.mkt-section {
    padding-block: var(--jl-section);
    position: relative;
}

.mkt-hairline {
    height: 1px;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg, transparent, var(--jl-line), transparent);
}

/* ---------------------------------------------------------------------------
   Typography primitives
   ------------------------------------------------------------------------- */

.mkt-display,
.mkt-h1,
.mkt-h2,
.mkt-h3 {
    font-family: var(--jl-font-display);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: .98;
    margin: 0;
    color: var(--jl-ink);
    text-wrap: balance;
}

.mkt-display {
    font-size: clamp(2.8rem, 7.4vw, 6.4rem);
    line-height: .92;
    letter-spacing: -.045em;
}

.mkt-h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
.mkt-h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.mkt-h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); letter-spacing: -.025em; }

.mkt-serif {
    font-family: var(--jl-font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
}

.mkt-gradient-text {
    background: linear-gradient(100deg, #ffffff 0%, var(--jl-sky) 55%, var(--jl-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mkt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1.6rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--jl-ink-3);
}

.mkt-eyebrow::before {
    content: "";
    width: 1.8rem;
    height: 1px;
    background: var(--jl-cyan);
    opacity: .8;
}

.mkt-lede {
    margin: 1.6rem 0 0;
    max-width: 46ch;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.55;
    color: var(--jl-ink-2);
}

.mkt-note {
    font-size: .9rem;
    color: var(--jl-ink-3);
}

/* Bootstrap's reboot paints headings near-black and links default blue. On the dark
   canvas that is invisible, so the shell re-points the handful of primitives the
   marketing pages actually use. Scoped to .mkt-shell on purpose - the dashboard is
   never inside it and keeps Bootstrap's own defaults.

   Wrapped in :where() so these element-level rules contribute ZERO specificity and
   therefore never out-rank a real component class. Without it, `.mkt-shell a` would
   beat `.mkt-brand` and paint the wordmark accent-cyan. */
:where(.mkt-shell) h1,
:where(.mkt-shell) h2,
:where(.mkt-shell) h3,
:where(.mkt-shell) h4,
:where(.mkt-shell) h5,
:where(.mkt-shell) h6 {
    color: var(--jl-ink);
}

:where(.mkt-shell) p,
:where(.mkt-shell) li,
:where(.mkt-shell) dl,
:where(.mkt-shell) dd {
    color: inherit;
}

:where(.mkt-shell) a {
    color: var(--jl-sky);
}

.mkt-shell .lead {
    color: var(--jl-ink-2);
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
}

.mkt-shell .text-muted {
    color: var(--jl-ink-3) !important;
}

.mkt-shell code {
    color: var(--jl-sky);
    background: rgba(0, 175, 240, .1);
    padding: .1rem .42rem;
    border-radius: 6px;
}

.mkt-shell hr {
    border-color: var(--jl-line);
    opacity: 1;
}

/* Form controls on the dark surface. */
.mkt-shell .form-control,
.mkt-shell .form-select {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--jl-line-strong);
    color: var(--jl-ink);
}

.mkt-shell .form-control::placeholder {
    color: var(--jl-ink-3);
}

.mkt-shell .form-control:focus,
.mkt-shell .form-select:focus {
    background: rgba(255, 255, 255, .06);
    border-color: var(--jl-cyan);
    color: var(--jl-ink);
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Buttons — overrides Bootstrap's defaults wherever the marketing shell is
   in scope, so existing markup (.btn-primary) keeps working but reads premium.
   ------------------------------------------------------------------------- */

.mkt-shell .btn {
    --bs-btn-focus-box-shadow: none;
    border-radius: 999px;
    padding: .72rem 1.5rem;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: -.01em;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.mkt-shell .btn:active {
    transform: translateY(1px);
}

.mkt-shell .btn-primary {
    background: var(--jl-ink);
    border-color: var(--jl-ink);
    color: #07080a;
    box-shadow: 0 0 0 0 rgba(0, 175, 240, .0);
}

.mkt-shell .btn-primary:hover,
.mkt-shell .btn-primary:focus-visible {
    background: #ffffff;
    border-color: #ffffff;
    color: #07080a;
    box-shadow: 0 10px 40px -12px rgba(127, 224, 255, .65);
}

.mkt-shell .btn-accent {
    background: linear-gradient(120deg, var(--jl-sky), var(--jl-cyan));
    border: 0;
    color: #04141c;
    box-shadow: 0 14px 44px -18px rgba(0, 175, 240, .9);
}

.mkt-shell .btn-accent:hover,
.mkt-shell .btn-accent:focus-visible {
    color: #04141c;
    filter: brightness(1.06);
    box-shadow: 0 18px 54px -16px rgba(127, 224, 255, .95);
}

.mkt-shell .btn-outline-primary,
.mkt-shell .btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--jl-line-strong);
    color: var(--jl-ink);
}

.mkt-shell .btn-outline-primary:hover,
.mkt-shell .btn-outline-secondary:hover,
.mkt-shell .btn-outline-primary:focus-visible,
.mkt-shell .btn-outline-secondary:focus-visible {
    background: var(--jl-surface-2);
    border-color: var(--jl-ink-3);
    color: #fff;
}

.mkt-shell .btn-lg {
    padding: .95rem 1.9rem;
    font-size: 1.02rem;
}

/* The base rule above out-ranks Bootstrap's own .btn-sm, so the small variant has to be
   re-stated here or the paging and empty-state buttons inherit full-size padding. */
.mkt-shell .btn-sm {
    padding: .45rem .95rem;
    font-size: .84rem;
}

.mkt-shell a:focus-visible,
.mkt-shell button:focus-visible,
.mkt-shell input:focus-visible,
.mkt-shell select:focus-visible {
    outline: 2px solid var(--jl-sky);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */

.mkt-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(7, 8, 10, .72);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background-color .3s ease;
}

.mkt-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 4.5rem;
}

.mkt-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--jl-ink);
    text-decoration: none;
    font-family: var(--jl-font-display);
    font-weight: 700;
    font-size: 1.18rem;
    letter-spacing: -.03em;
}

.mkt-brand:hover { color: #fff; }

.mkt-brand-mark {
    width: 30px;
    height: auto;
    flex: none;
}

.mkt-brand-dot {
    color: var(--jl-cyan);
}

.mkt-nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mkt-nav-links a {
    position: relative;
    color: var(--jl-ink-2);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    transition: color .18s ease;
}

.mkt-nav-links a:hover,
.mkt-nav-links a.active {
    color: #fff;
}

.mkt-nav-links a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.55rem;
    height: 1px;
    background: var(--jl-cyan);
}

.mkt-nav-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.mkt-nav-actions .btn {
    padding: .55rem 1.15rem;
    font-size: .9rem;
    white-space: nowrap;
}

.mkt-nav-signin {
    color: var(--jl-ink-2);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    margin-right: .4rem;
}

.mkt-nav-signin:hover { color: #fff; }

@media (max-width: 767.98px) {
    .mkt-nav-links { display: none; }
    .mkt-nav-signin { display: none; }
    .mkt-nav-inner { height: 4rem; }
}

@media (max-width: 575.98px) {
    .mkt-nav-actions .btn { padding: .5rem .9rem; font-size: .84rem; }
    .mkt-brand { font-size: 1.05rem; }
    .mkt-brand-mark { width: 26px; }
}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.mkt-footer {
    border-top: 1px solid var(--jl-line);
    padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
    color: var(--jl-ink-2);
}

.mkt-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 2.5rem;
}

.mkt-footer-brand p {
    margin: 1rem 0 0;
    max-width: 30ch;
    font-size: .9rem;
    color: var(--jl-ink-3);
}

.mkt-footer h4 {
    margin: 0 0 1rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--jl-ink-3);
}

.mkt-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .6rem;
}

.mkt-footer a {
    color: var(--jl-ink-2);
    text-decoration: none;
    font-size: .92rem;
}

.mkt-footer a:hover { color: #fff; }

.mkt-footer-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--jl-line);
    font-size: .84rem;
    color: var(--jl-ink-3);
}

@media (max-width: 767.98px) {
    .mkt-footer-grid { grid-template-columns: 1fr 1fr; }
    .mkt-footer-brand { grid-column: 1 / -1; }
}

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

.mkt-hero {
    position: relative;
    padding-block: clamp(4rem, 9vw, 8rem) clamp(5rem, 9vw, 9rem);
    overflow: hidden;
}

.mkt-hero::before {
    content: "";
    position: absolute;
    inset: -30% -20% auto -20%;
    height: 90%;
    background:
        radial-gradient(48% 60% at 22% 28%, rgba(0, 175, 240, .20), transparent 70%),
        radial-gradient(42% 55% at 82% 12%, rgba(127, 224, 255, .13), transparent 72%),
        radial-gradient(60% 60% at 60% 90%, rgba(10, 124, 193, .12), transparent 75%);
    filter: blur(10px);
    pointer-events: none;
}

.mkt-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
    pointer-events: none;
}

.mkt-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.mkt-hero-copy { max-width: 40rem; }

.mkt-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin-top: 2.4rem;
}

.mkt-hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.4rem;
    margin-top: 2rem;
    font-size: .85rem;
    color: var(--jl-ink-3);
}

.mkt-hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.mkt-hero-trust i { color: var(--jl-cyan); font-size: .78rem; }

@keyframes jl-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Entrance animations, gated.

   These play once per document load, not once per element insertion. That
   distinction is load-bearing in a prerendered Blazor app: the circuit's first
   render re-inserts the prerendered markup, and re-inserting an element restarts
   its CSS animations. On a cold load the circuit connects after the browser has
   already painted, so an ungated entrance visibly replays — the hero fades in a
   second time — which reads as the top of the page blinking.

   So the entrance is opted into by a class on <html>, which the framework never
   touches: it is present for the first paint and removed by js/intro.js the
   moment the circuit applies its first render. Markup inserted after that has
   nothing left to replay, and shows its finished state immediately.

   The ungated state is deliberately the FINISHED state (fully opaque, no
   transform), so losing the gate mid-flight snaps to the end rather than hiding
   the content.

   Infinite animations are not gated: replaying one is invisible, and gating it
   would stop it for the rest of the page's life.
   --------------------------------------------------------------------------- */

html.jl-intro .mkt-rise {
    animation: jl-rise .8s cubic-bezier(.22, 1, .36, 1) both;
}

.mkt-rise-1 { animation-delay: .05s; }
.mkt-rise-2 { animation-delay: .14s; }
.mkt-rise-3 { animation-delay: .23s; }
.mkt-rise-4 { animation-delay: .32s; }

/* ---------------------------------------------------------------------------
   Hero product mock — a faithful miniature of a real JustLinks page. Built in
   markup rather than shipped as a screenshot so it stays crisp at any density
   and never goes stale against the live product.
   ------------------------------------------------------------------------- */

.mkt-mock {
    position: relative;
    display: flex;
    justify-content: center;
    perspective: 1400px;
}

.mkt-mock-glow {
    position: absolute;
    inset: 8% 6% -6% 6%;
    background: radial-gradient(60% 70% at 50% 30%, rgba(0, 175, 240, .45), transparent 72%);
    filter: blur(50px);
    z-index: 0;
}

.mkt-phone {
    position: relative;
    z-index: 1;
    width: min(330px, 82%);
    border-radius: 42px;
    padding: 12px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .18);
    transform: rotateX(6deg) rotateY(-8deg) rotateZ(1.5deg);
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.mkt-mock:hover .mkt-phone {
    transform: rotateX(2deg) rotateY(-3deg) rotateZ(0deg);
}

.mkt-phone-screen {
    border-radius: 32px;
    background: #0e1013;
    padding: 1.4rem 1.1rem 1.1rem;
    overflow: hidden;
}

.mock-page-head {
    text-align: center;
    padding-bottom: 1.1rem;
}

.mock-avatar {
    width: 54px;
    height: 54px;
    margin: 0 auto .6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--jl-font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: #04141c;
    background: linear-gradient(130deg, var(--jl-sky), var(--jl-cyan));
    box-shadow: 0 8px 24px -8px rgba(0, 175, 240, .8);
}

.mock-name {
    font-family: var(--jl-font-display);
    font-weight: 600;
    font-size: .98rem;
    color: #fff;
}

.mock-sub {
    font-size: .72rem;
    color: var(--jl-ink-3);
    letter-spacing: .02em;
}

.mock-links {
    display: grid;
    gap: .5rem;
}

.mock-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .07);
    font-size: .84rem;
    color: var(--jl-ink);
}

.mock-link i {
    width: 1.6rem;
    text-align: center;
    color: var(--jl-sky);
    font-size: .82rem;
}

.mock-link .mock-chev {
    margin-left: auto;
    color: var(--jl-ink-3);
    font-size: .7rem;
}

.mock-link--pinned {
    background: linear-gradient(120deg, rgba(127, 224, 255, .2), rgba(0, 175, 240, .12));
    border-color: rgba(127, 224, 255, .3);
}

.mock-made {
    margin-top: 1rem;
    text-align: center;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--jl-ink-3);
}

.mkt-mock-chip {
    position: absolute;
    z-index: 2;
    padding: .55rem .95rem;
    border-radius: 999px;
    background: rgba(12, 14, 17, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--jl-line-strong);
    font-size: .78rem;
    font-weight: 600;
    color: var(--jl-ink);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9);
    white-space: nowrap;
}

.mkt-mock-chip i { color: var(--jl-cyan); margin-right: .35rem; }

.mkt-mock-chip--a { top: 12%; left: -2%; animation: jl-float 7s ease-in-out infinite; }
.mkt-mock-chip--b { bottom: 16%; right: -2%; animation: jl-float 8.5s ease-in-out infinite reverse; }

@keyframes jl-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (max-width: 991.98px) {
    .mkt-hero-inner { grid-template-columns: 1fr; }
    .mkt-hero-copy { max-width: none; }
    .mkt-mock { margin-top: 1rem; }
    .mkt-mock-chip--a { left: 2%; }
    .mkt-mock-chip--b { right: 2%; }
}

/* On a phone the chips sit on top of the mini page instead of beside it, so they are
   dropped rather than made to collide with the mock. */
@media (max-width: 575.98px) {
    .mkt-mock-chip { display: none; }
    .mkt-phone { transform: none; }
}

/* ---------------------------------------------------------------------------
   Editorial rows — numbered convictions, not feature cards.
   ------------------------------------------------------------------------- */

.mkt-rows {
    border-top: 1px solid var(--jl-line);
}

.mkt-row {
    display: grid;
    grid-template-columns: 5rem 1fr 1.1fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: start;
    padding-block: clamp(2.25rem, 4vw, 3.25rem);
    border-bottom: 1px solid var(--jl-line);
}

.mkt-row-num {
    font-family: var(--jl-font-display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--jl-cyan);
    padding-top: .5rem;
}

.mkt-row h3 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }

.mkt-row p {
    margin: 0;
    padding-top: .45rem;
    color: var(--jl-ink-2);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    max-width: 42ch;
}

@media (max-width: 767.98px) {
    .mkt-row { grid-template-columns: 3rem 1fr; }
    .mkt-row p { grid-column: 2; padding-top: .25rem; }
}

/* ---------------------------------------------------------------------------
   Split feature sections with a product visual.
   ------------------------------------------------------------------------- */

.mkt-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 7vw, 6rem);
    align-items: center;
}

.mkt-split--reverse .mkt-split-visual { order: -1; }

.mkt-split-copy .mkt-h2 { margin-bottom: 1.4rem; }

.mkt-split-copy p {
    color: var(--jl-ink-2);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    max-width: 42ch;
}

.mkt-split-list {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .9rem;
}

.mkt-split-list li {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--jl-ink-2);
    font-size: .98rem;
}

.mkt-split-list i { color: var(--jl-cyan); }

.mkt-panel {
    position: relative;
    border-radius: var(--jl-radius);
    border: 1px solid var(--jl-line);
    background: linear-gradient(170deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
    padding: clamp(1.4rem, 3vw, 2.2rem);
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}

.mkt-panel-glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(45% 45% at 60% 30%, rgba(0, 175, 240, .22), transparent 70%);
    filter: blur(40px);
    z-index: -1;
}

/* Analytics visual */
.mkt-bars {
    display: flex;
    align-items: flex-end;
    gap: .65rem;
    height: 190px;
    padding-top: 1rem;
}

.mkt-bar {
    flex: 1;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--jl-sky), rgba(0, 175, 240, .25));
    position: relative;
    transform-origin: bottom;
}

/* Gated with the rest of the entrance — see the note above jl-rise. The ungated
   state is the grown bar, so the chart is never left empty. */
html.jl-intro .mkt-bar {
    animation: jl-grow 1s cubic-bezier(.22, 1, .36, 1) both;
}

.mkt-bar:nth-child(1) { height: 34%; animation-delay: .0s; }
.mkt-bar:nth-child(2) { height: 52%; animation-delay: .06s; }
.mkt-bar:nth-child(3) { height: 41%; animation-delay: .12s; }
.mkt-bar:nth-child(4) { height: 68%; animation-delay: .18s; }
.mkt-bar:nth-child(5) { height: 57%; animation-delay: .24s; }
.mkt-bar:nth-child(6) { height: 84%; animation-delay: .30s; }
.mkt-bar:nth-child(7) { height: 100%; animation-delay: .36s; background: linear-gradient(180deg, #fff, var(--jl-sky)); }

@keyframes jl-grow {
    from { transform: scaleY(.05); opacity: .3; }
    to { transform: scaleY(1); opacity: 1; }
}

.mkt-panel-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .25rem;
}

.mkt-panel-stat strong {
    font-family: var(--jl-font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    letter-spacing: -.04em;
}

.mkt-panel-stat span { color: var(--jl-ink-3); font-size: .82rem; }

.mkt-panel-caption {
    display: flex;
    justify-content: space-between;
    margin-top: .9rem;
    font-size: .74rem;
    color: var(--jl-ink-3);
    letter-spacing: .04em;
}

/* Subdomain / QR visual */
.mkt-url {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.1rem;
    border-radius: var(--jl-radius-sm);
    border: 1px solid var(--jl-line-strong);
    background: rgba(0, 0, 0, .35);
    font-family: var(--jl-font-display);
    font-size: clamp(.95rem, 2vw, 1.2rem);
    letter-spacing: -.02em;
}

.mkt-url .mkt-url-name {
    color: #fff;
    border-bottom: 1px dashed rgba(127, 224, 255, .6);
    padding-bottom: 1px;
}

.mkt-url .mkt-url-suffix { color: var(--jl-ink-3); }

.mkt-qr-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.4rem;
}

.mkt-qr {
    width: 92px;
    height: 92px;
    flex: none;
    border-radius: 14px;
    background:
        conic-gradient(from 0deg, #fff 0 25%, transparent 0 50%, #fff 0 75%, transparent 0) 0 0 / 18px 18px,
        radial-gradient(circle at 30% 30%, #fff 0 6px, transparent 6px),
        radial-gradient(circle at 70% 30%, #fff 0 6px, transparent 6px),
        radial-gradient(circle at 30% 70%, #fff 0 6px, transparent 6px),
        #0e1013;
    border: 1px solid var(--jl-line-strong);
    box-shadow: inset 0 0 0 8px #0e1013, 0 20px 40px -24px rgba(0, 175, 240, .8);
}

.mkt-qr-copy strong { display: block; font-family: var(--jl-font-display); font-size: 1rem; }
.mkt-qr-copy span { color: var(--jl-ink-3); font-size: .84rem; }

@media (max-width: 991.98px) {
    .mkt-split { grid-template-columns: 1fr; }
    .mkt-split--reverse .mkt-split-visual { order: 0; }
}

/* ---------------------------------------------------------------------------
   Showcase shelf
   ------------------------------------------------------------------------- */

.mkt-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.mkt-section-head p {
    margin: 1rem 0 0;
    max-width: 48ch;
    color: var(--jl-ink-2);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
}

.mkt-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.1rem;
}

/* ---------------------------------------------------------------------------
   Closing call to action
   ------------------------------------------------------------------------- */

.mkt-cta {
    position: relative;
    text-align: center;
    padding-block: clamp(6rem, 12vw, 11rem);
    overflow: hidden;
}

.mkt-cta::before {
    content: "";
    position: absolute;
    inset: auto -10% -40% -10%;
    height: 80%;
    background: radial-gradient(50% 60% at 50% 100%, rgba(0, 175, 240, .3), transparent 72%);
    filter: blur(30px);
    pointer-events: none;
}

.mkt-cta .mkt-display { font-size: clamp(2.6rem, 8vw, 6.5rem); }

.mkt-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-top: 2.6rem;
}

.mkt-cta-note {
    margin-top: 1.4rem;
    font-size: .88rem;
    color: var(--jl-ink-3);
}

/* ---------------------------------------------------------------------------
   Pricing — dark editorial tiers
   ------------------------------------------------------------------------- */

.pricing-shell {
    padding-block: clamp(4rem, 8vw, 7rem) clamp(5rem, 9vw, 8rem);
}

.pricing-shell .pricing-head { text-align: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }

.pricing-shell .pricing-head .mkt-lede { margin-inline: auto; }

.pricing-interval-toggle {
    display: flex;
    width: fit-content;
    gap: .3rem;
    padding: .3rem;
    margin: 2rem auto 0;
    border: 1px solid var(--jl-line);
    border-radius: 999px;
    background: var(--jl-surface);
}

.pricing-interval-toggle .btn {
    padding: .55rem 1.35rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--jl-ink-2);
    font-weight: 600;
}

.pricing-interval-toggle .btn-primary,
.pricing-interval-toggle .btn-primary:hover {
    background: var(--jl-ink);
    color: #07080a;
}

.pricing-interval-note { font-size: .88rem; color: var(--jl-ink-3); }

.pricing-card {
    position: relative;
    height: 100%;
    border: 1px solid var(--jl-line);
    border-radius: var(--jl-radius);
    background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
    color: var(--jl-ink);
    box-shadow: 0 40px 90px -60px rgba(0, 0, 0, .9);
    transition: border-color .25s ease, transform .25s ease;
}

.pricing-card:hover { transform: translateY(-4px); border-color: var(--jl-line-strong); }

.pricing-card-featured {
    border-color: rgba(127, 224, 255, .45);
    background: linear-gradient(170deg, rgba(0, 175, 240, .16), rgba(255, 255, 255, .015));
    box-shadow: 0 50px 120px -50px rgba(0, 175, 240, .6);
}

.pricing-card-featured::before {
    content: "Most popular";
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--jl-sky), var(--jl-cyan));
    color: #04141c;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pricing-card .card-body { padding: clamp(1.6rem, 3vw, 2.2rem); }

.pricing-tier-name {
    font-family: var(--jl-font-display);
    font-weight: 700;
    letter-spacing: -.03em;
    font-size: 1.5rem;
    margin: 0;
}

.pricing-tier-tagline { color: var(--jl-ink-3); font-size: .92rem; margin: .35rem 0 1.5rem; }

.pricing-price { display: flex; align-items: baseline; gap: .35rem; }

.pricing-price-amount {
    font-family: var(--jl-font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.1rem);
    letter-spacing: -.045em;
    line-height: 1;
}

.pricing-price-period { color: var(--jl-ink-3); font-size: .95rem; }

.pricing-features { display: grid; gap: 0; margin: 0 0 1.75rem; }

.pricing-feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--jl-line);
    font-size: .92rem;
}

.pricing-feature:first-child { border-top: 1px solid var(--jl-line); }

.pricing-feature dt { font-weight: 500; color: var(--jl-ink-2); }
.pricing-feature dd { margin: 0; font-weight: 600; color: var(--jl-ink); text-align: right; }

.pricing-notes {
    max-width: 820px;
    margin: clamp(3.5rem, 7vw, 5rem) auto 0;
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    border-top: 1px solid var(--jl-line);
}

.pricing-notes h2 { color: var(--jl-ink); font-family: var(--jl-font-display); letter-spacing: -.02em; }
.pricing-notes p { color: var(--jl-ink-2); }
.pricing-notes code { color: var(--jl-sky); background: rgba(0, 175, 240, .1); padding: .1rem .4rem; border-radius: 6px; }

.pricing-shell .alert {
    border: 1px solid var(--jl-line-strong);
    border-radius: var(--jl-radius-sm);
    background: var(--jl-surface);
    color: var(--jl-ink);
}

.pricing-shell .alert-warning { border-color: rgba(255, 193, 7, .4); }
.pricing-shell .alert-success { border-color: rgba(0, 175, 240, .45); }

/* Plan-status card reuses Bootstrap .card */
.pricing-shell .card.bg-white {
    background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important;
    border: 1px solid var(--jl-line) !important;
    color: var(--jl-ink);
    border-radius: var(--jl-radius);
}

.pricing-shell .text-muted { color: var(--jl-ink-3) !important; }

/* ---------------------------------------------------------------------------
   Public product page — dark canvas so the owner's coloured card reads as the
   one lit object on the page. Global because two layouts render this shell.
   ------------------------------------------------------------------------- */

.public-page-shell {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 2.5rem 1rem 3.5rem;
    background:
        radial-gradient(60% 45% at 50% 0%, rgba(0, 175, 240, .12), transparent 70%),
        var(--jl-canvas);
    color: var(--jl-ink);
    font-family: var(--jl-font-body);
}

.public-brand-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .7rem 1rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--jl-line);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--jl-ink);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
}

.public-brand-banner:hover,
.public-brand-banner:focus {
    color: #fff;
    border-color: var(--jl-line-strong);
    text-decoration: none;
}

.public-message-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--jl-line);
    color: var(--jl-ink);
}

.public-message-card .alert-danger {
    background: rgba(220, 53, 69, .16);
    border: 1px solid rgba(220, 53, 69, .4);
    color: #ffd9dd;
}

/* The not-found / suspended card is platform chrome, not owner content, so its button
   joins the dark palette. Scoped to the card on purpose: the email-capture button on a
   live owner page is the owner's surface and keeps Bootstrap's default. */
.public-message-card .btn-primary {
    background: var(--jl-ink);
    border-color: var(--jl-ink);
    color: #07080a;
    border-radius: 999px;
    font-weight: 600;
}

.public-message-card .btn-primary:hover,
.public-message-card .btn-primary:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #07080a;
}

/* ---------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mkt-rise,
    .mkt-bar,
    .mkt-mock-chip,
    .public-card.animated-gradient-card {
        animation: none !important;
    }

    .mkt-phone,
    .pricing-card,
    .mkt-shell .btn,
    .public-link-row {
        transition: none !important;
    }
}