/* ── /creators ──
   Marketing only. It hands off to the claim widget on the landing page rather
   than carrying a second copy of it, so there is no app code here at all.
   Tokens mirror the landing page's palette; kept local so this file can be
   read on its own. */

:root {
    --n950: #070b14;
    --n900: #0c1221;
    --n800: #131c34;
    --n700: #1a2644;
    --navy: #243b53;
    --btc: #f7931a;
    --btc4: #f9a94b;
    --btc6: #e07d08;
    --g5: #22c55e;
    --w: #fff;
    --w9: rgba(255,255,255,.9);
    --w7: rgba(255,255,255,.7);
    --w5: rgba(255,255,255,.5);
    --w3: rgba(255,255,255,.3);
    --w2: rgba(255,255,255,.2);
    --w1: rgba(255,255,255,.1);
    --w05: rgba(255,255,255,.05);
    --w03: rgba(255,255,255,.03);
    --rmd: 12px;
    --rlg: 16px;
    --rxl: 20px;
    --rf: 9999px;
    --fd: 'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --fm: 'Space Mono','SF Mono',ui-monospace,monospace;
    --eo: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--fd);
    background: var(--n950);
    color: var(--w);
    line-height: 1.6;
    overflow-x: hidden;
}

/* One warm glow behind the top of the page, the same trick the landing uses */
.bg-m {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 620px at 78% -8%, rgba(247,147,26,.16), transparent 62%),
        radial-gradient(760px 560px at 8% 4%, rgba(36,59,83,.55), transparent 60%);
}

.wrap {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

a {
    color: inherit;
}

/* ══ NAV ══
   The landing page's header, exactly: fixed and full width, transparent at
   the top and a blurred bar once scrolled, links hidden behind a hamburger
   on phones. Keep these in step with index.html. */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .35s var(--eo);
}

    .nav.scrolled {
        background: rgba(7,11,20,.88);
        backdrop-filter: blur(20px) saturate(1.2);
        border-bottom: 1px solid var(--w1);
    }

.nav-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--w);
}

.nav-logo-i {
    display: block;
    height: 32px;
    width: auto;
}

.nav-logo-t {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.3px;
}

    .nav-logo-t span {
        color: var(--btc);
    }

.nav-a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-lk {
    font-size: 13px;
    font-weight: 600;
    color: var(--w5);
    text-decoration: none;
    padding: 8px 10px;
    transition: color .2s;
}

    .nav-lk:hover, .nav-lk.on {
        color: var(--w);
    }

.ham {
    display: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--w2);
    border-radius: 8px;
    background: var(--w05);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .ham span {
        display: block;
        width: 16px;
        height: 1.5px;
        background: var(--w7);
        transition: all .25s;
    }

    .ham.open span:nth-child(1) { transform: rotate(45deg) translate(2px,2px); }
    .ham.open span:nth-child(2) { opacity: 0; }
    .ham.open span:nth-child(3) { transform: rotate(-45deg) translate(2px,-2px); }

.mob-menu {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 99;
    background: rgba(7,11,20,.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--w1);
    padding: 16px 24px;
    flex-direction: column;
    gap: 8px;
}

    .mob-menu.open {
        display: flex;
    }

    .mob-menu a {
        padding: 12px 16px;
        color: var(--w7);
        font-size: 15px;
        text-decoration: none;
        border-radius: 8px;
    }

        .mob-menu a:hover {
            color: var(--w);
            background: var(--w05);
        }

@media (max-width: 640px) {
    .nav-lk, .nav-a .btn {
        display: none;
    }

    .ham {
        display: flex;
    }
}

/* ══ BUTTONS ══ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: var(--rf);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s var(--eo), box-shadow .2s var(--eo), background .2s, border-color .2s;
}

.btn-p {
    background: linear-gradient(135deg,var(--btc),var(--btc6));
    color: #1a1000;
    box-shadow: 0 6px 20px rgba(247,147,26,.22);
}

    .btn-p:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(247,147,26,.32);
    }

.btn-s {
    background: var(--w05);
    border-color: var(--w1);
    color: var(--w9);
}

    .btn-s:hover {
        background: var(--w1);
        border-color: var(--w2);
        transform: translateY(-2px);
    }

.btn-sm {
    padding: 9px 18px;
    font-size: 13px;
}

/* ══ HERO ══ (top padding clears the fixed header) */
.hero {
    padding: 100px 0 12px;
}

/* Mobile: copy → live demo → form, so they see the thing before they build
   it. Desktop: copy and form on the left, demo alongside. The landing's hero
   is laid out exactly this way — keep them in step. */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "demo" "gen";
    gap: 32px;
}

.hero-copy {
    grid-area: copy;
}

.hero-grid .mk {
    grid-area: gen;
}

.hero-grid .demo-wrap {
    grid-area: demo;
}

@media (min-width: 1000px) {
    .hero-grid {
        grid-template-columns: minmax(0,1fr) 400px;
        grid-template-areas: "copy demo" "gen demo";
        gap: 28px 48px;
        align-items: center;
    }

    .hero-copy {
        align-self: end;
    }

    .hero-grid .mk {
        align-self: start;
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--w05);
    border: 1px solid var(--w1);
    border-radius: var(--rf);
    font-size: 12px;
    font-weight: 600;
    color: var(--w7);
}

    .badge .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--g5);
        box-shadow: 0 0 0 3px rgba(34,197,94,.16);
    }

h1 {
    margin: 20px 0 0;
    font-size: clamp(34px, 5.4vw, 54px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.6px;
}

    h1 .hl {
        color: var(--btc);
    }

.hero-sub {
    margin-top: 18px;
    max-width: 30em;
    font-size: 17px;
    color: var(--w7);
}

.hero-note {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--w3);
}

/* The permanent-link headline runs long: a touch smaller, and its second
   sentence on a line of its own so neither breaks mid-phrase */
.hero h1 {
    font-size: clamp(32px, 4.6vw, 48px);
    text-wrap: balance;
}

    .hero h1 .hl {
        display: block;
    }

/* Who the page is for, said plainly under the pitch */
.hero-for {
    margin-top: 12px;
    max-width: 32em;
    font-size: 14.5px;
    color: var(--w5);
}

.hero-sub a {
    color: var(--w9);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "anywhere you post", kept as the line under the form's button */
.mk-where {
    margin-top: 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--w5);
}

/* Free mode: the early-access line, unhidden by /api/config */
.hero-early {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: var(--rf);
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.3);
    color: #86efac;
    font-size: 13px;
    font-weight: 600;
}

/* ══ LIVE DEMO ══
   The pitch, same as the landing: a real jar you can tip. Face one is the
   /embed in a phone, face two is the same jar's QR in the corner of a stream. */
.demo-wrap {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.demo-tg {
    display: inline-flex;
    gap: 4px;
    background: var(--w05);
    border: 1px solid var(--w1);
    border-radius: var(--rf);
    padding: 4px;
    margin-bottom: 16px;
}

    .demo-tg button {
        border: 0;
        background: transparent;
        color: var(--w5);
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        padding: 6px 18px;
        border-radius: var(--rf);
        cursor: pointer;
        transition: background .2s, color .2s;
    }

        .demo-tg button.on {
            background: var(--btc);
            color: var(--n950);
        }

.demo-cap {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--w5);
}

    .demo-cap a {
        color: var(--btc4);
        font-weight: 700;
    }

/* One action per face, sitting under the thing it acts on */
.demo-act {
    margin-top: 14px;
}

/* The phone: a dark bezel around the live embed. The screen follows the
   embed's reported height (amount → QR → Paid ✓) with a floor so an idle
   card still looks like a phone rather than a card. */
.phone {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 12px;
    background: linear-gradient(180deg,#1b2233,#0b0f19);
    border: 1px solid var(--w1);
    border-radius: 44px;
    box-shadow:
        0 30px 60px rgba(0,0,0,.55),
        0 0 0 1px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.phone-notch {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 24px;
    border-radius: 14px;
    background: #05070d;
    z-index: 2;
}

/* The card is centred in the screen rather than pinned to the top: a short
   card in a tall phone read as a rendering fault. The padding is the strip
   the notch owns, so the centring happens below it, and the JS sizes the
   frame to whatever height the embed reports. */
.phone-screen {
    position: relative;
    height: 500px;
    padding-top: 34px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 34px;
    background: var(--n900);
    transition: height .4s var(--eo);
}

    .phone-screen iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* The stream scene: a 16:9 frame with a live pill and a QR card in the corner */
.stream {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--rlg);
    overflow: hidden;
    border: 1px solid var(--w1);
    background:
        radial-gradient(420px 260px at 32% 60%, rgba(247,147,26,.28), transparent 65%),
        radial-gradient(360px 240px at 80% 20%, rgba(36,59,83,.9), transparent 70%),
        linear-gradient(180deg,#141b2d,#080b14);
    box-shadow: 0 24px 50px rgba(0,0,0,.5);
}

.stream-live {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 6px;
    background: #e11d48;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .6px;
}

    .stream-live span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
        animation: blink 1.6s ease-in-out infinite;
    }

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.stream-viewers {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(0,0,0,.45);
    color: var(--w7);
    font-size: 10.5px;
    font-weight: 600;
}

/* A soft silhouette so the scene reads as a person on camera */
.stream-cam {
    position: absolute;
    left: 14%;
    bottom: -8%;
    width: 44%;
    height: 78%;
    background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.14) 0 18%, transparent 19%),
        radial-gradient(ellipse at 50% 92%, rgba(255,255,255,.1) 0 46%, transparent 47%);
    filter: blur(1px);
}

.stream-qr {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

.stream-qr-box {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .stream-qr-box canvas {
        width: 76px;
        height: 76px;
        image-rendering: pixelated;
    }

.stream-qr-t {
    padding-right: 6px;
    text-align: left;
}

    .stream-qr-t b {
        display: block;
        color: var(--n900);
        font-size: 11.5px;
        font-weight: 800;
        line-height: 1.2;
    }

    .stream-qr-t i {
        display: block;
        margin-top: 3px;
        font-style: normal;
        font-size: 9.5px;
        color: #64748b;
        line-height: 1.3;
    }

.stream-cap {
    margin: 16px auto 0;
    max-width: 30em;
    padding: 12px 14px;
    background: var(--w03);
    border: 1px solid var(--w05);
    border-radius: var(--rmd);
    font-size: 12.5px;
    color: var(--w5);
    text-align: left;
}

/* The profile: the link as one line in a bio */
.bio {
    max-width: 360px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--rlg);
    border: 1px solid var(--w1);
    background: var(--n900);
    box-shadow: 0 24px 50px rgba(0,0,0,.5);
    text-align: left;
}

.bio-banner {
    height: 84px;
    background:
        radial-gradient(260px 120px at 20% 100%, rgba(247,147,26,.45), transparent 70%),
        linear-gradient(135deg,#243b53,#0f172a);
}

.bio-body {
    position: relative;
    padding: 0 18px 18px;
}

.bio-avatar {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-top: -32px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--btc),var(--btc6));
    border: 3px solid var(--n900);
}

.bio-name {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.bio-handle {
    font-size: 12.5px;
    color: var(--w3);
}

.bio-text {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--w7);
}

/* The one line that matters, lit */
.bio-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: var(--rmd);
    background: rgba(247,147,26,.1);
    border: 1px solid rgba(247,147,26,.32);
    font-family: var(--fm);
    font-size: 12px;
    color: var(--w7);
    overflow-wrap: anywhere;
}

    .bio-link b {
        color: var(--btc4);
        font-weight: 700;
    }

.bio-link-ic {
    flex: none;
    font-size: 13px;
}

.bio-meta {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--w3);
}

    .bio-meta b {
        color: var(--w7);
        font-weight: 700;
    }

/* Toast for a settled demo tip (the embed tells us by postMessage) */
.toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    z-index: 1000;
    transform: translateX(-50%) translateY(80px);
    padding: 12px 22px;
    background: var(--n800);
    border: 1px solid var(--w2);
    border-radius: var(--rf);
    font-size: 13px;
    font-weight: 500;
    color: var(--w);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    pointer-events: none;
    transition: transform .35s var(--eo);
}

    .toast.show {
        transform: translateX(-50%) translateY(0);
    }

/* Photo hero (desktop only) — the creators' counterpart to the landing's
   café counter: a creator's desk, sharp on the right and falling away to
   near-black on the left where the copy sits.

   It breaks out of .wrap to span the viewport, the way the landing's hero
   does, and paints back the wrap's own gutter so the copy stays aligned.
   The photo is bright, so the veil is heavier than the landing's: the right
   edge still sits at ~45% so a white desk reads as part of a dark page. */
@media (min-width: 1000px) {
    .hero {
        position: relative;
        margin: 0 calc(50% - 50vw);
        padding: 118px calc(50vw - 50%) 52px;
        background:
            linear-gradient(90deg, var(--n950) 0%, rgba(7,11,20,.95) 30%, rgba(7,11,20,.72) 58%, rgba(7,11,20,.55) 100%),
            linear-gradient(180deg, rgba(7,11,20,.6) 0%, rgba(7,11,20,0) 20%, rgba(7,11,20,0) 64%, var(--n950) 100%),
            url('/creators/hero-creator.jpg') center right / cover no-repeat var(--n950);
    }
}

/* ══ MAKE YOUR TIP LINK ══
   The generator and its result, laid out like the landing's. Claiming a
   short link happens in a modal, not inline. */
.mk {
    scroll-margin-top: 78px;
    padding: 26px 28px 28px;
    background: linear-gradient(180deg,var(--w05),var(--w03));
    border: 1px solid var(--w1);
    border-radius: var(--rxl);
}

.mk-f {
    margin-bottom: 18px;
}

/* The name and the amounts wait until the address is well-formed, then
   rise into place. Once shown they stay shown. */
.mk-more {
    transition: opacity .35s var(--eo), transform .35s var(--eo);
}

    .mk-more.rise {
        opacity: 0;
        transform: translateY(6px);
    }

.mk-l {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--w5);
}

    .mk-l span {
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
    }

.mk-in {
    width: 100%;
    padding: 13px 15px;
    background: var(--w05);
    border: 1px solid var(--w1);
    border-radius: var(--rmd);
    color: var(--w);
    font-family: var(--fd);
    font-size: 15px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

    .mk-in.mono {
        font-family: var(--fm);
        font-size: 14px;
    }

    .mk-in::placeholder {
        color: var(--w3);
    }

    .mk-in:focus {
        border-color: var(--btc);
        box-shadow: 0 0 0 3px rgba(247,147,26,.15);
    }

/* The address field carries the bolt inside it */
.mk-iw {
    position: relative;
}

    .mk-iw .mk-in {
        padding-left: 40px;
    }

.mk-bolt {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    pointer-events: none;
}

.mk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mk-ch {
    padding: 8px 12px;
    background: var(--w05);
    border: 1px solid var(--w1);
    border-radius: var(--rf);
    font-family: var(--fm);
    font-size: 12.5px;
    color: var(--w5);
    cursor: pointer;
    user-select: none;
    transition: all .2s;
}

    .mk-ch:hover {
        border-color: var(--w2);
        color: var(--w7);
    }

    .mk-ch.on {
        background: linear-gradient(135deg,var(--btc),var(--btc6));
        border-color: transparent;
        color: #fff;
        font-weight: 700;
    }

.mk-go {
    width: 100%;
    margin-top: 4px;
}

.mk-note {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--w3);
}

.mk-status, .mk-caps {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--w5);
}

    .mk-status.good, .mk-caps.good { color: #86efac; }
    .mk-status.bad, .mk-caps.bad { color: #fca5a5; }
    .mk-status.warn, .mk-caps.warn { color: var(--btc4); }

/* ── The result ── */
.mk-res {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--w1);
    animation: fiu .35s var(--eo);
}

@keyframes fiu {
    from { opacity: 0; transform: translateY(6px); }
}

.mk-ready {
    font-size: 13px;
    font-weight: 700;
    color: #86efac;
    margin-bottom: 10px;
}

/* The URL and its copy button share one box */
.mk-urlw {
    position: relative;
}

.mk-url {
    padding: 13px 46px 13px 15px;
    background: var(--w05);
    border: 1px solid rgba(247,147,26,.3);
    border-radius: var(--rmd);
    font-family: var(--fm);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--btc4);
    word-break: break-all;
}

.mk-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* ── Paste-anywhere codes, folded away ── */
.mk-emb {
    margin-top: 16px;
    border-top: 1px solid var(--w05);
    padding-top: 14px;
}

    .mk-emb > summary {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--w5);
        cursor: pointer;
        list-style: none;
    }

        .mk-emb > summary::-webkit-details-marker {
            display: none;
        }

        .mk-emb > summary:hover {
            color: var(--w7);
        }

        .mk-emb > summary svg {
            width: 13px;
            height: 13px;
            flex-shrink: 0;
        }

.code-cap {
    margin-top: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--w3);
}

.code-b {
    position: relative;
    background: #04060c;
    border: 1px solid var(--w1);
    border-radius: 10px;
    padding: 12px 46px 12px 14px;
    margin-top: 8px;
}

    .code-b code {
        display: block;
        font-family: var(--fm);
        font-size: 11px;
        line-height: 1.75;
        color: var(--w7);
        white-space: pre-wrap;
        word-break: break-word;
    }

.tipbtn-prev {
    margin-top: 8px;
    padding: 14px;
    background: var(--w03);
    border: 1px solid var(--w05);
    border-radius: 10px;
    text-align: center;
}

.tipbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    background: #f7931a;
    color: #fff;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}

/* The copy icon that lives inside a code box or the URL box */
.cpi {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--w05);
    border: 1px solid var(--w1);
    border-radius: 8px;
    color: var(--w5);
    cursor: pointer;
    transition: all .2s;
}

    .cpi:hover {
        background: var(--w1);
        border-color: var(--w2);
        color: var(--w9);
    }

    .cpi.ok {
        color: #22c55e;
        border-color: rgba(34,197,94,.4);
    }

    .cpi svg {
        width: 14px;
        height: 14px;
    }

    .cpi .i-tick, .cpi.ok .i-copy {
        display: none;
    }

    .cpi.ok .i-tick {
        display: block;
    }

/* ══ CLAIM MODAL ══ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .modal-overlay.open {
        display: flex;
    }

.modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 92vh;
    overflow: auto;
    background: var(--n900);
    border: 1px solid var(--w1);
    border-radius: var(--rxl);
    animation: fiu .35s var(--eo);
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--w1);
    border-radius: 8px;
    background: var(--w05);
    color: var(--w5);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-close:hover {
        background: var(--w1);
        color: var(--w);
    }

.modal-hd {
    padding: 28px 28px 0;
    text-align: center;
}

    .modal-hd h2 {
        font-size: 20px;
        font-weight: 800;
        color: var(--w);
        margin-bottom: 4px;
        letter-spacing: -.3px;
    }

    .modal-hd p {
        font-size: 13px;
        color: var(--w5);
        line-height: 1.5;
    }

.modal-bd {
    padding: 20px 28px 28px;
}

.claim-preview {
    padding: 12px 16px;
    background: var(--w05);
    border: 1px solid var(--w1);
    border-radius: var(--rmd);
    font-family: var(--fm);
    font-size: 13px;
    color: var(--w5);
    text-align: center;
    margin-bottom: 14px;
    word-break: break-all;
}

    .claim-preview .slug {
        color: var(--btc4);
        font-weight: 700;
    }

.claim-input-wrap {
    position: relative;
}

.claim-input {
    width: 100%;
    padding: 13px 15px;
    background: var(--w05);
    border: 1px solid var(--w1);
    border-radius: var(--rmd);
    color: var(--w);
    font-family: var(--fd);
    font-size: 15px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

    .claim-input::placeholder {
        color: var(--w3);
    }

    .claim-input:focus {
        border-color: var(--btc);
        box-shadow: 0 0 0 3px rgba(247,147,26,.15);
    }

    .claim-input.valid {
        border-color: rgba(34,197,94,.5);
    }

    .claim-input.invalid {
        border-color: rgba(239,68,68,.5);
    }

.claim-status {
    margin: 8px 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--w5);
    min-height: 1em;
}

    .claim-status.good { color: #86efac; }
    .claim-status.bad { color: #fca5a5; }

.claim-info {
    margin: 4px 0 16px;
    padding: 12px 14px;
    background: var(--w03);
    border: 1px solid var(--w05);
    border-radius: var(--rmd);
}

.claim-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    padding: 3px 0;
}

.claim-info-label {
    color: var(--w3);
}

.claim-info-value {
    color: var(--w7);
    font-family: var(--fm);
    text-align: right;
    word-break: break-all;
}

.claim-btn {
    width: 100%;
}

    .claim-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.claim-success {
    text-align: center;
}

.claim-success-icon {
    font-size: 34px;
    margin-bottom: 6px;
}

.claim-success h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--w);
    margin-bottom: 8px;
}

.claim-success-url {
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--w05);
    border: 1px solid rgba(247,147,26,.3);
    border-radius: var(--rmd);
    font-family: var(--fm);
    font-size: 12.5px;
    color: var(--btc4);
    word-break: break-all;
    cursor: pointer;
}

.claim-note {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(34,197,94,.08);
    border: 1px solid rgba(34,197,94,.25);
    border-radius: var(--rmd);
    text-align: left;
}

.claim-next {
    margin-top: 16px;
    padding: 16px;
    background: var(--w03);
    border: 1px solid var(--w1);
    border-radius: var(--rmd);
    text-align: left;
}

@media (max-width: 560px) {
    .mk {
        padding: 22px 18px 24px;
    }
}

/* ══ SECTIONS ══ */
section {
    position: relative;
    z-index: 1;
    padding: 56px 0 8px;
}

/* Jumping to #make must not park the heading under the fixed header */
section[id] {
    scroll-margin-top: 78px;
}

h2 {
    font-size: clamp(24px, 3.2vw, 30px);
    font-weight: 800;
    letter-spacing: -.7px;
    line-height: 1.2;
}

.lede {
    margin-top: 14px;
    max-width: 46em;
    font-size: 16px;
    color: var(--w7);
}

    .lede + .lede {
        margin-top: 12px;
    }

/* Straight-to-a-wallet vs through-a-jar, side by side */
.compare {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 14px;
    margin-top: 28px;
}

.cmp {
    padding: 18px 20px;
    background: var(--w03);
    border: 1px solid var(--w05);
    border-radius: var(--rlg);
}

    .cmp.good {
        background: rgba(247,147,26,.06);
        border-color: rgba(247,147,26,.22);
    }

    .cmp h3 {
        font-size: 14px;
        font-weight: 700;
        color: var(--w9);
    }

    .cmp p {
        margin-top: 6px;
        font-size: 13.5px;
        color: var(--w5);
    }

    .cmp.good h3 {
        color: var(--btc4);
    }

    .cmp.bad {
        border-color: rgba(239,68,68,.18);
    }

    /* The verdict, drawn: a cross on the wallet link, a tick on the jar */
    .cmp .mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        margin-right: 10px;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 800;
        vertical-align: -5px;
    }

    .cmp.bad .mark {
        background: rgba(239,68,68,.14);
        border: 1px solid rgba(239,68,68,.4);
        color: #f87171;
    }

    .cmp.good .mark {
        background: rgba(34,197,94,.14);
        border: 1px solid rgba(34,197,94,.4);
        color: var(--g5);
    }

/* ══ STEPS ══ */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 16px;
    margin-top: 30px;
}

.step {
    padding: 22px;
    background: var(--w03);
    border: 1px solid var(--w05);
    border-radius: var(--rlg);
}

    .step .n {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(247,147,26,.14);
        border: 1px solid rgba(247,147,26,.3);
        color: var(--btc4);
        font-size: 13px;
        font-weight: 800;
    }

    .step h3 {
        margin-top: 14px;
        font-size: 15px;
        font-weight: 700;
    }

    .step p {
        margin-top: 6px;
        font-size: 13.5px;
        color: var(--w5);
    }

    .step code {
        font-family: var(--fm);
        font-size: 12px;
        color: var(--btc4);
        /* break between words, never mid-address — a split you@coino/s.io
           reads as a typo */
        overflow-wrap: break-word;
    }

.note {
    margin-top: 20px;
    padding: 16px 18px;
    background: var(--w03);
    border: 1px solid var(--w05);
    border-left: 2px solid var(--btc);
    border-radius: var(--rmd);
    font-size: 13.5px;
    color: var(--w7);
}

/* ══ PLACES ══ */
.places {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 14px;
    margin-top: 30px;
}

.place {
    padding: 18px 20px;
    background: var(--w03);
    border: 1px solid var(--w05);
    border-radius: var(--rlg);
    transition: border-color .2s, background .2s;
}

    .place:hover {
        border-color: var(--w1);
        background: var(--w05);
    }

    .place h3 {
        font-size: 14px;
        font-weight: 700;
        color: var(--w9);
    }

    .place p {
        margin-top: 5px;
        font-size: 13px;
        color: var(--w5);
    }

    .place .tag {
        display: inline-block;
        margin-bottom: 8px;
        padding: 3px 9px;
        border-radius: var(--rf);
        background: rgba(247,147,26,.12);
        color: var(--btc4);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
    }

/* ══ FAQ ══ */
.faq {
    margin-top: 26px;
    border-top: 1px solid var(--w05);
}

.faq details {
    border-bottom: 1px solid var(--w05);
}

.faq summary {
    padding: 16px 34px 16px 0;
    position: relative;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

    .faq summary::-webkit-details-marker {
        display: none;
    }

    .faq summary::after {
        content: '+';
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        font-weight: 400;
        color: var(--w3);
    }

.faq details[open] summary::after {
    content: '–';
}

.faq details p {
    padding: 0 0 18px;
    max-width: 62em;
    font-size: 14px;
    color: var(--w5);
}

    .faq details p + p {
        margin-top: -6px;
    }

.faq code {
    font-family: var(--fm);
    font-size: 12.5px;
    color: var(--btc4);
}

/* ══ CLOSER ══ */
.closer {
    margin: 64px 0 0;
    padding: 40px 24px;
    text-align: center;
    background: linear-gradient(180deg,rgba(247,147,26,.09),rgba(247,147,26,.02));
    border: 1px solid rgba(247,147,26,.2);
    border-radius: var(--rxl);
}

    .closer h2 {
        font-size: clamp(22px, 3vw, 28px);
    }

    .closer p {
        margin: 12px auto 0;
        max-width: 34em;
        font-size: 15px;
        color: var(--w7);
    }

    .closer .btn {
        margin-top: 22px;
    }

/* ══ FOOTER ══ */
footer {
    position: relative;
    z-index: 1;
    margin-top: 56px;
    padding: 26px 0 40px;
    border-top: 1px solid var(--w05);
    font-size: 12.5px;
    color: var(--w3);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    justify-content: space-between;
}

    footer a {
        color: var(--w5);
        text-decoration: none;
    }

        footer a:hover {
            color: var(--w9);
        }

/* ══ RESPONSIVE ══ */
@media (max-width: 900px) {
    .hero {
        padding-top: 84px;
    }
}

@media (max-width: 560px) {
    .wrap, .nav {
        padding-left: 18px;
        padding-right: 18px;
    }

    .hero-cta .btn {
        width: 100%;
    }

    section {
        padding-top: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn, .mk-more {
        transition: none;
    }

        .btn:hover {
            transform: none;
        }
}

/* ══ WHAT A JAR CAN DO ══ Each card draws its own small picture. Laid out
   the way the landing lays it out: centred, two by two, so four cards never
   leave one alone on a row. */
#features h2,
#features .lede,
#features .feat-note {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.feats {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    max-width: 840px;
    margin: 30px auto 0;
}

@media (max-width: 640px) {
    .feats {
        grid-template-columns: 1fr;
    }
}

.feat {
    padding: 16px;
    background: var(--w03);
    border: 1px solid var(--w05);
    border-radius: var(--rlg);
}

    .feat h3 {
        margin: 14px 2px 4px;
        font-size: 16px;
        font-weight: 700;
    }

    .feat p {
        margin: 0 2px;
        font-size: 14px;
        color: var(--w5);
    }

.feat-v {
    height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--n900);
    border: 1px solid var(--w05);
    font-size: 12px;
    overflow: hidden;
}

.fv-col {
    flex: 1;
    min-width: 0;
}

.fv-h {
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--w3);
}

.fv-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid var(--w05);
    font-family: var(--fm);
    font-size: 11px;
    color: var(--w5);
    white-space: nowrap;
}

.fv-col.on .fv-row {
    color: var(--w9);
}

    .fv-col.on .fv-row b {
        font-family: var(--fd);
        color: var(--btc4);
        overflow: hidden;
        text-overflow: ellipsis;
    }

.fv-toast {
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg,var(--btc),var(--btc6));
    color: #1a1000;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(247,147,26,.25);
}

.fv-unlock {
    flex-direction: column;
    gap: 8px;
}

.fv-tip {
    font-family: var(--fm);
    font-weight: 700;
    color: var(--g5);
}

.fv-gift {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px dashed rgba(247,147,26,.5);
    color: var(--w9);
}

.fv-goal {
    flex-direction: column;
    align-items: stretch;
}

.fv-gt {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--w7);
}

    .fv-gt b {
        color: var(--btc4);
    }

.fv-bar {
    height: 10px;
    border-radius: var(--rf);
    background: var(--w1);
    overflow: hidden;
}

    .fv-bar i {
        display: block;
        width: 64%;
        height: 100%;
        background: linear-gradient(90deg,var(--btc),var(--btc4));
    }

.feat-note {
    margin-top: 14px;
    font-size: 13px;
    color: var(--w3);
}

    .feat-note a {
        color: var(--btc4);
        font-weight: 600;
        text-decoration: none;
    }