/* ── /venues ──
   The venue side of the home page as a page of its own: the counter hero,
   the poster standing in its stand, the print kit and the map card. It
   sits on top of /creators/creators.css, which carries the shared parts
   (palette, header, buttons, sections, steps, questions, footer), so the
   two audience pages cannot drift apart. Only what the venue side has and
   the creators page does not lives here. The poster and the map card are
   index.html's own rules; keep them in step with it. */

/* ══ HERO ══ Copy and the call to action on the left, the poster on the
   right. Phones: copy, then the poster. */
.hero-grid {
    grid-template-areas: "copy" "demo";
}

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

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

    /* The café counter, the landing's own photo, under the landing's
       lighter veil: the counter is dark already */
    .hero {
        background:
            linear-gradient(90deg, var(--n950) 0%, rgba(7,11,20,.92) 30%, rgba(7,11,20,.35) 58%, rgba(7,11,20,.18) 100%),
            linear-gradient(180deg, rgba(7,11,20,.6) 0%, rgba(7,11,20,0) 22%, rgba(7,11,20,0) 70%, var(--n950) 100%),
            url('/hero-bg.jpg') center right / cover no-repeat var(--n950);
    }
}

.hero h1 {
    font-size: clamp(34px, 5.4vw, 56px);
}

    /* "bitcoin tip jar" stays in its line here; the creators' headline puts
       its second sentence on a line of its own */
    .hero h1 .hl {
        display: inline;
    }

.badge {
    color: var(--btc4);
}

/* creators.css gives the early-access line a display, which beats the
   hidden attribute; here it stays hidden until /api/config says free mode */
.hero-early[hidden] {
    display: none;
}

.v-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

@media (max-width: 560px) {
    .v-cta .btn {
        width: 100%;
    }
}

/* ══ THE POSTER ══ A scale model of the A4 the print kit makes, standing in
   its wooden stand on the counter. Decorative: the QR code is the demo
   jar's, and it really pays it. */
.demo-wrap {
    max-width: 400px;
}

.pp-tent {
    width: 100%;
}

.pp {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
    aspect-ratio: 210/297;
    min-height: 460px; /* the content is fixed-size; a narrow box grows past A4 rather than clipping */
    background: #fafbfc;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
    color: #111122;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.pp-bar {
    height: 10px;
    background: var(--btc);
    flex: none;
}

    .pp-bar.btm {
        height: 4px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

.pp-card {
    flex: 1;
    margin: 12px 16px 26px;
    background: #fff;
    border: 1px solid #e6e8f0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 16px 10px;
    min-height: 0;
}

.pp-logo {
    display: block;
    height: 30px;
    width: auto;
    margin-bottom: 7px;
}

.pp-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.3px;
    margin-bottom: 1px;
}

.pp-tag {
    font-size: 9px;
    color: #6b7094;
    margin-bottom: 10px;
}

.pp-qrf {
    background: #fff;
    border: 1px solid #e6e8f0;
    border-radius: 8px;
    padding: 6px;
    position: relative;
    margin-bottom: 8px;
}

    .pp-qrf svg {
        display: block;
        width: 104px;
        height: 104px;
    }

.pp-bb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 20px;
    height: 20px;
    background: var(--btc);
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-cta {
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 2px;
}

.pp-url {
    font-size: 8px;
    color: var(--btc);
    margin-bottom: 9px;
}

.pp-chips {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 4px;
    width: 100%;
    max-width: 170px;
    margin-bottom: 9px;
}

    .pp-chips span {
        padding: 4px 0;
        background: #fdf1e0;
        border: 1px solid var(--btc);
        border-radius: 4px;
        font-size: 7.5px;
        font-weight: 700;
        color: #94580f;
    }

.pp-div {
    width: 40px;
    height: 1px;
    background: #e6e8f0;
    margin-bottom: 7px;
}

.pp-how {
    font-size: 8px;
    font-weight: 700;
    margin-bottom: 5px;
}

.pp-steps {
    width: 100%;
    max-width: 190px;
    text-align: left;
}

    .pp-steps div {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
        font-size: 7.5px;
        color: #6b7094;
    }

    .pp-steps span {
        width: 13px;
        height: 13px;
        flex: none;
        background: var(--btc);
        border-radius: 50%;
        color: #fff;
        font-size: 7px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.pp-ft {
    position: absolute;
    bottom: 9px;
    left: 0;
    right: 0;
    font-size: 6.5px;
    color: #9eadd0;
}

/* The wooden stand the poster slots into: in front of the paper, its slot
   showing past the poster's edges, a soft shadow on the counter */
.pp-stand {
    position: relative;
    z-index: 2;
    width: min(100%, 386px);
    height: 28px;
    margin: -6px auto 0;
    border-radius: 4px 4px 8px 8px;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 7px, rgba(255,255,255,.03) 7px 9px, transparent 9px 15px),
        linear-gradient(180deg, #a8815a 0%, #8a6844 20%, #63482c 55%, #3a2a17 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.3),
        inset 0 -2px 3px rgba(0,0,0,.45);
}

    .pp-stand::before {
        content: '';
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: min(92%, 348px);
        height: 5px;
        border-radius: 2px;
        background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.22));
    }

    .pp-stand::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -11px;
        transform: translateX(-50%);
        width: 116%;
        max-width: calc(100vw - 8px);
        height: 22px;
        background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 68%);
        z-index: -1;
    }

/* ══ WHO IT'S FOR ══ The landing's audience chips */
.aud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

    .aud span {
        padding: 10px 18px;
        background: var(--w05);
        border: 1px solid var(--w1);
        border-radius: var(--rf);
        font-size: 13px;
        color: var(--w7);
    }

    .aud a {
        color: inherit;
        text-decoration: none;
    }

.step strong {
    color: var(--btc4);
}

/* ══ FOR THE COUNTER ══ The print kit's three things, each drawn small */
.kit {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    margin-top: 30px;
}

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

/* An A4 sheet, small */
.kit-a4 i {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 64px;
    height: 90px;
    padding-top: 12px;
    background: #fafbfc;
    border-top: 5px solid var(--btc);
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
}

    .kit-a4 i svg {
        width: 34px;
        height: 34px;
    }

    .kit-a4 i b {
        display: block;
        width: 34px;
        height: 4px;
        border-radius: 2px;
        background: #fdf1e0;
        border: 1px solid rgba(247,147,26,.6);
    }

/* A table tent: one sheet folded, standing on its two edges */
.kit-tent svg {
    width: 150px;
    height: 100px;
}

/* The 3D-printed stand: an orange plate with the code in white, leaning
   back on its base */
.kit-stand {
    flex-direction: column;
    gap: 0;
}

    .kit-stand i {
        display: grid;
        place-items: center;
        width: 66px;
        height: 72px;
        background: var(--btc);
        border-radius: 7px;
        transform: perspective(240px) rotateX(16deg);
        transform-origin: bottom;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    }

        .kit-stand i svg {
            width: 46px;
            height: 46px;
        }

    .kit-stand b {
        display: block;
        width: 92px;
        padding: 3px 0;
        border-radius: 3px 3px 6px 6px;
        background: linear-gradient(180deg, var(--btc6), #b86505);
        color: #fff;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .3px;
        text-align: center;
        box-shadow: 0 8px 18px rgba(0,0,0,.45);
    }

/* ══ THE MAP CARD ══ index.html's, drawn the same way */
.feat.wide {
    grid-column: 1 / -1;
}

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

.feat p strong {
    color: var(--w9);
    font-weight: 700;
}

.fv-map {
    position: relative;
    padding: 0;
    background: radial-gradient(120% 140% at 50% 0,#13213b 0,var(--n900) 62%);
}

.fv-tiles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.fv-pin {
    position: absolute;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

    .fv-pin.g {
        background: #5b6472;
        color: #fff;
    }

    .fv-pin.o {
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
        background: var(--btc);
        color: #1a1000;
        font-size: 15px;
        box-shadow: 0 0 0 8px rgba(247,147,26,.16), 0 6px 18px rgba(247,147,26,.35);
        animation: fvbreathe 2.6s ease-in-out infinite;
    }

.fv-tag {
    position: absolute;
    transform: translateY(-50%);
    padding: 4px 9px;
    border-radius: 8px;
    background: rgba(12,18,33,.92);
    border: 1px solid rgba(247,147,26,.45);
    color: var(--w9);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

@keyframes fvbreathe {
    0%,100% { box-shadow: 0 0 0 6px rgba(247,147,26,.14), 0 6px 18px rgba(247,147,26,.3) }
    50% { box-shadow: 0 0 0 14px rgba(247,147,26,.05), 0 6px 18px rgba(247,147,26,.35) }
}

@media (prefers-reduced-motion: reduce) {
    .fv-pin.o {
        animation: none;
    }
}