/* LocoLink Venue page (2026-10-15). Builds on v5.css: the Venue colours
   (amber to pink, as in the app), a TV frame for the departure board, the
   QR sign, the partner block, the trial band and the FAQ. */

.vn {
    --vn-a: #ff9f0a;
    --vn-b: #ff375f;
    --vn-grad: linear-gradient(110deg, #ff9f0a 0%, #ff6a2b 52%, #ff375f 100%);
}

/* Hero */
.vn .v5-hero::before {
    background:
        radial-gradient(40% 40% at 50% 16%, rgba(255, 122, 26, .22), transparent 70%),
        radial-gradient(30% 35% at 16% 42%, rgba(255, 55, 95, .14), transparent 70%),
        radial-gradient(30% 35% at 84% 42%, rgba(139, 92, 246, .13), transparent 70%);
}
.vn .v5-pill b { background: var(--vn-grad); color: #fff; }
.vn .v5-hero h1 span,
.vn .v5-h2 em { background-image: var(--vn-grad); }
.vn-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.vn-hero-note { margin: 18px auto 0; font-size: 14px; color: var(--text-secondary); max-width: 40em; }
.vn .v5-stage .dev-window .bar .t b { color: #ffb547; font-weight: 800; }

/* Feature rows */
.vn .v5-feature { padding: calc(var(--v5-section) * .6) 0; }
.vn .v5-points li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat, var(--vn-grad);
}
.vn-visual-stack { position: relative; }
.vn-visual-stack .dev-phone { position: absolute; width: 26%; right: -3%; bottom: -12%; transform: rotate(3deg); }
.vn .v5-visual .glow { background: radial-gradient(closest-side, rgba(255, 106, 43, .55), rgba(255, 55, 95, .25), transparent); }

/* The departure board on a TV */
.vn-tv { position: relative; padding: 1.3%; border-radius: 18px; background: #07070b;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 40px 90px rgba(0, 0, 0, .42), 0 12px 28px rgba(0, 0, 0, .22); }
.vn-tv img { display: block; width: 100%; height: auto; border-radius: 7px; }
.vn-tv::after { content: ""; position: absolute; left: 41%; right: 41%; bottom: -24px; height: 24px;
    background: linear-gradient(#2c2c35, #141419); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.vn-tv-wrap { padding-bottom: 28px; }

/* The QR sign at the edge of the layout */
.vn-sign { position: absolute; left: -4%; bottom: -10%; width: min(34%, 230px); padding: 18px 18px 16px; text-align: center;
    background: #fff; color: #0b1220; border-radius: 20px; transform: rotate(-4deg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .06); }
.vn-sign i { display: block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #ff6a2b; text-transform: uppercase; }
.vn-sign b { display: block; margin: 6px 0 10px; font-size: 19px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.vn-sign svg { display: block; width: 100%; height: auto; }
.vn-sign small { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; color: #475569; line-height: 1.3; }

/* Who it is for */
.vn-for .v5-cards-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .vn-for .v5-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vn-for .v5-cards-grid { grid-template-columns: 1fr; } }

/* Partners */
.vn-partner { padding: calc(var(--v5-section) * .55) 0; }
.vn-partner-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px);
    align-items: center; padding: clamp(28px, 5vw, 60px); border-radius: 32px;
    background: linear-gradient(135deg, rgba(255, 159, 10, .14), rgba(255, 55, 95, .10) 55%, rgba(139, 92, 246, .08));
    border: 1px solid var(--v5-glass-border); }
.vn-partner-card .v5-h2 { font-size: clamp(32px, 4.6vw, 54px); }
.vn-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vn-benefits div { padding: 18px; border-radius: 20px; background: var(--v5-glass); border: 1px solid var(--v5-glass-border); }
.vn-benefits b { display: block; margin: 10px 0 4px; font-size: 16px; font-weight: 800; color: var(--text-primary); }
.vn-benefits div { line-height: 1.45; }
.vn-benefits span { display: block; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.vn-benefits svg { width: 30px; height: 30px; padding: 6px; border-radius: 10px; color: #fff; background: var(--vn-grad); }
.vn-partner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 900px) { .vn-partner-card { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .vn-benefits { grid-template-columns: 1fr; } }

/* Trial band */
.vn-trial { padding: calc(var(--v5-section) * .45) 0; }
.vn-trial-card { position: relative; text-align: center; padding: clamp(32px, 6vw, 72px) clamp(22px, 5vw, 64px); border-radius: 32px;
    background: #0b0e19; color: #fff; overflow: hidden; isolation: isolate; }
.vn-trial-card::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(50% 70% at 20% 0%, rgba(255, 159, 10, .35), transparent 70%),
        radial-gradient(50% 70% at 85% 100%, rgba(255, 55, 95, .32), transparent 70%); }
.vn-trial-card h2 { margin: 12px auto 14px; max-width: 16em; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.035em; font-weight: 900; color: #fff; }
.vn-trial-card p { margin: 0 auto; max-width: 36em; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.vn-trial-card .v5-eyebrow { color: #ffb547; }
.vn-trial-card .vn-hero-actions { margin-top: 28px; }
.vn-trial-card .v5-btn-ghost { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }

/* FAQ */
.vn-faq { padding: calc(var(--v5-section) * .5) 0 calc(var(--v5-section) * .7); }
.vn-faq-list { max-width: 860px; margin: 30px auto 0; display: grid; gap: 12px; }
.vn-faq details { border-radius: 18px; background: var(--v5-glass); border: 1px solid var(--v5-glass-border); padding: 4px 22px; }
.vn-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-size: 17px; font-weight: 800; color: var(--text-primary);
    display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.vn-faq summary::-webkit-details-marker { display: none; }
.vn-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    font-size: 18px; font-weight: 700; color: #fff; background: var(--vn-grad); transition: transform .2s ease; }
.vn-faq details[open] summary::after { transform: rotate(45deg); }
.vn-faq details p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.vn-center { text-align: center; }
.vn-center .v5-lead { margin-left: auto; margin-right: auto; }

@media (max-width: 760px) {
    .vn-sign { width: 38%; left: -2%; bottom: -14%; padding: 12px; border-radius: 14px; }
    .vn-sign b { font-size: 14px; margin: 4px 0 6px; }
    .vn-visual-stack .dev-phone { width: 30%; right: -2%; }
}

/* The Venue block on the homepages (2026-10-15), in place of the old store
   demo block. Built by tools/v5-builders/venue_home.py. */
.vn-home { padding: calc(var(--v5-section) * .5) 0; }
.vn-home-card { --vn-grad: linear-gradient(110deg, #ff9f0a 0%, #ff6a2b 52%, #ff375f 100%);
    position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 4.5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 60px) clamp(24px, 5vw, 60px) clamp(40px, 6vw, 72px);
    border-radius: 32px; border: 1px solid var(--v5-glass-border);
    background: linear-gradient(135deg, rgba(255, 159, 10, .15), rgba(255, 55, 95, .10) 55%, rgba(139, 92, 246, .09)), var(--v5-glass); }
.vn-home-card::before { content: ""; position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; right: -12%; top: -30%;
    background: radial-gradient(closest-side, rgba(255, 122, 26, .22), transparent); pointer-events: none; }
.vn-home-pill { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px;
    font-size: 14px; font-weight: 800; color: var(--text-primary); background: var(--v5-glass); border: 1px solid var(--v5-glass-border); }
.vn-home-pill b { padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #fff;
    background: var(--vn-grad); box-shadow: 0 6px 16px -6px rgba(255, 106, 43, .7); }
.vn-home .v5-h2 { margin-top: 18px; }
.vn-home .v5-h2 em { background-image: var(--vn-grad); white-space: nowrap; }
.vn-home .v5-lead { max-width: 34em; }
.vn-home-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; }
.vn-home-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; color: var(--text-primary); background: var(--v5-glass); border: 1px solid var(--v5-glass-border); }
.vn-home-chips svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%; color: #fff; background: var(--vn-grad); }
.vn-home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vn-home-actions .v5-btn svg { width: 18px; height: 18px; }
.vn-home-actions .v5-btn { padding-top: 8px; padding-bottom: 8px; line-height: 1.25; }
.vn-home-note { margin: 16px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.vn-home-visual { position: relative; }
.vn-home-visual .vn-tv { transform: perspective(1600px) rotateY(-5deg); transform-origin: 70% 50%; }
.vn-home-visual .dev-phone { position: absolute; width: 21%; left: -5%; bottom: -24%; transform: rotate(-4deg); z-index: 2; }
@media (max-width: 900px) {
    .vn-home-card { grid-template-columns: 1fr; }
    .vn-home-visual { margin: 6px 2% 22% 12%; }
    .vn-home-visual .vn-tv { transform: none; }
    .vn-home-visual .dev-phone { width: 25%; left: -11%; bottom: -30%; }
}

/* partner-apply.html: LocoLink Venue for partners, in place of the old store
   demo section. Built by tools/v5-builders/venue_partner_apply.py. */
.vn-pa { padding: clamp(48px, 7vw, 88px) 0; scroll-margin-top: 96px; }
.vn-pa .vn-home-card { align-items: start; }
.vn-pa .v5-h2 { font-size: clamp(32px, 3.7vw, 48px); }
.vn-pa .v5-h2 em { white-space: normal; }
.vn-pa .v5-lead { font-size: 17px; line-height: 1.6; }
.vn-steps { list-style: none; display: grid; gap: 10px; padding: 0; margin: 24px 0 0; counter-reset: vn-step; }
.vn-steps li { position: relative; counter-increment: vn-step; padding: 14px 16px 14px 60px; border-radius: 18px;
    background: var(--v5-glass); border: 1px solid var(--v5-glass-border); }
.vn-steps li::before { content: counter(vn-step); position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; font-size: 15px; font-weight: 900; color: #fff; background: var(--vn-grad); }
.vn-steps b { display: block; font-size: 16px; font-weight: 800; color: var(--text-primary); }
.vn-steps span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
.vn-pa-side { display: grid; gap: clamp(56px, 7vw, 84px); padding-top: 18px; }
.vn-pa-side .vn-home-visual { margin-left: 9%; }
@media (max-width: 900px) { .vn-pa-side .vn-home-visual { margin: 6px 2% 0 12%; } }