/* ============================================================================
   Ticketminds marketing page (apex / www host).

   Standalone: this page does NOT load Bootstrap or shop.css, so everything it
   needs is here. Colours are the brand palette from
   .claude/skills/frontend-designer/references/ticketminds-brand.md — do not
   invent new ones.
   ============================================================================ */

:root {
    --lp-brand: #3C60A8;
    --lp-brand-600: #304E8F;
    --lp-brand-700: #253D75;
    --lp-brand-900: #152344;
    --lp-brand-50: #F1F5FB;
    --lp-brand-100: #DEE7F4;
    --lp-accent: #D4920A;
    --lp-slate-50: #F8FAFC;
    --lp-slate-200: #E2E8F0;
    --lp-slate-300: #CBD5E1;
    --lp-slate-400: #94A3B8;
    --lp-slate-500: #64748B;
    --lp-slate-600: #475569;
    --lp-slate-800: #1E293B;
    --lp-slate-900: #0F172A;
    --lp-radius: 8px;
}

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

body {
    margin: 0;
    background: #fff;
    color: var(--lp-slate-600);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.lp {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- hero ---------- */

/* No bottom border: the showcase panel below supplies the separation, and a rule as well as a
   bordered panel 40px later reads as two dividers stacked. */
.lp-hero {
    padding: 64px 0 8px;
    text-align: center;
}

.lp-logo {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 36px;
}

.lp-hero h1 {
    margin: 0;
    font-size: clamp(28px, 5vw, 38px);
    line-height: 1.2;
    letter-spacing: -0.03em;
    font-weight: 750;
    color: var(--lp-slate-900);
}

.lp-lede {
    margin: 18px auto 0;
    max-width: 46ch;
    font-size: 17px;
    color: var(--lp-slate-500);
}

/* ---------- customer showcase (Knack Volley) ---------- */

/* Asymmetric on purpose: the logo is a fixed 96px column and the copy takes the rest, so the
   panel does not read as one of those evenly-split "feature card" rows. */
.lp-showcase {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 26px;
    align-items: start;
    margin: 40px 0 0;
    padding: 28px;
    background: var(--lp-brand-50);
    border: 1px solid var(--lp-brand-100);
    border-radius: 12px;
}

.lp-showcase-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.lp-eyebrow {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--lp-brand);
}

.lp-showcase h2 {
    margin: 0 0 10px;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 750;
    color: var(--lp-slate-900);
}

.lp-showcase-body p {
    margin: 0;
    font-size: 15.5px;
    color: var(--lp-slate-600);
}

/* Click-through to the live vendor shop — the page's primary action. */
.lp-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: 20px;
    padding: 14px 26px;
    border-radius: var(--lp-radius);
    background: var(--lp-brand);
    color: #fff;
    font-size: 16.5px;
    font-weight: 650;
    text-decoration: none;
    transition: background-color 150ms ease-out, transform 150ms ease-out;
}

.lp-cta:hover {
    background: var(--lp-brand-600);
}

.lp-cta:active {
    transform: translateY(1px);
}

.lp-cta-sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--lp-brand-100);
}

/* ---------- contact ---------- */

.lp-contact {
    padding: 54px 0 48px;
}

.lp-contact h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--lp-slate-900);
}

/* Result banner after a POST. Success and failure are visually distinct because the failure case
   carries an instruction the visitor must actually act on. */
.lp-note {
    margin: 18px 0 0;
    padding: 13px 16px;
    border-radius: var(--lp-radius);
    font-size: 15px;
    border: 1px solid;
}

.lp-note-ok {
    background: #EDFAF2;
    border-color: #BFE6CE;
    color: #146034;
}

.lp-note-bad {
    background: #FDF0EF;
    border-color: #F2C9C4;
    color: #96271B;
}

.lp-note a {
    color: inherit;
    font-weight: 650;
}

.lp-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #C0392B;
}

.lp-error:empty {
    display: none;
}

/* Honeypot. Taken out of the layout entirely rather than hidden with opacity, so no sighted
   visitor can tab into or click it; the field is aria-hidden and tabindex="-1" in the markup. */
.lp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lp-form {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.lp-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 650;
    color: var(--lp-slate-800);
}

.lp-field input,
.lp-field textarea {
    width: 100%;
    font: inherit;
    font-size: 15.5px;
    padding: 10px 12px;
    border: 1px solid var(--lp-slate-300);
    border-radius: var(--lp-radius);
    background: #fff;
    color: var(--lp-slate-900);
    transition: border-color 150ms ease-out;
}

.lp-field textarea {
    resize: vertical;
    min-height: 110px;
}

.lp-field input::placeholder,
.lp-field textarea::placeholder {
    color: var(--lp-slate-400);
}

.lp-field input:hover,
.lp-field textarea:hover {
    border-color: var(--lp-slate-400);
}

.lp-submit {
    align-self: flex-start;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 15.5px;
    font-weight: 650;
    padding: 12px 24px;
    border-radius: var(--lp-radius);
    background: var(--lp-accent);
    color: #231705;
    transition: background-color 150ms ease-out, transform 150ms ease-out;
}

.lp-submit:hover {
    background: #E8A31C;
}

.lp-submit:active {
    transform: translateY(1px);
}

.lp-fallback {
    margin: 0;
    font-size: 14px;
    color: var(--lp-slate-500);
}

.lp-fallback a {
    color: var(--lp-brand-600);
}

/* Visible ring on keyboard focus only, so a mouse click does not draw one. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--lp-brand);
    outline-offset: 2px;
}

.lp-field input:focus,
.lp-field textarea:focus {
    border-color: var(--lp-brand);
}

/* ---------- sister product (PartiPix) ---------- */

/* Deliberately NOT styled like the Knack Volley panel. That one is proof and uses the
   Ticketminds blue; this one is a different product with a different audience, so it gets
   PartiPix's own colours as a hairline accent and a plain surface underneath. */
.lp-sister {
    margin: 8px 0 0;
    padding: 26px 28px 28px;
    border: 1px solid var(--lp-slate-200);
    border-radius: 12px;
    background: var(--lp-slate-50);
    position: relative;
    overflow: hidden;
}

.lp-sister::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #FF6B85, #9B5FFF);
}

.lp-sister .lp-eyebrow {
    color: #8B4FE0;
}

/* The SVG carries only a viewBox (0 0 560 160), no width/height, so Chrome would default it to
   300px. Sized explicitly here; the width/height attributes in the markup express the same 3.5:1
   ratio so the box is reserved before the file loads. */
.lp-sister-logo {
    display: block;
    width: 100%;
    max-width: 250px;
    height: auto;
    margin: 6px 0 18px;
}

.lp-sister h2 {
    margin: 0 0 10px;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.025em;
    font-weight: 750;
    color: var(--lp-slate-900);
}

.lp-sister p {
    margin: 0;
    max-width: 56ch;
    font-size: 15.5px;
    color: var(--lp-slate-600);
}

.lp-sister-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 15px;
    font-weight: 650;
    color: #8B4FE0;
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 79, 224, 0.35);
    padding-bottom: 2px;
    transition: border-color 150ms ease-out;
}

.lp-sister-link:hover {
    border-bottom-color: #8B4FE0;
}

/* ---------- footer ---------- */

.lp-footer {
    margin-top: 34px;
    padding: 26px 0 44px;
    border-top: 1px solid var(--lp-slate-200);
    font-size: 14px;
    color: var(--lp-slate-500);
}

.lp-footer p {
    margin: 0;
}

.lp-footer a {
    color: var(--lp-brand-600);
}

.lp-footer-legal {
    margin-top: 8px !important;
    color: var(--lp-slate-400);
    font-size: 13px;
}

.lp-footer-legal a {
    color: var(--lp-slate-500);
}

/* ---------- document pages (privacy) ---------- */

/* Narrower than the landing page: this is prose, and 60-75 characters a line is where it stays
   readable. The landing page's 720px is set by its panels, not by its text. */
.lp-doc {
    max-width: 640px;
    padding-bottom: 20px;
}

.lp-doc .lp-eyebrow {
    margin: 40px 0 20px;
}

.lp-doc .lp-eyebrow a {
    color: var(--lp-brand);
    text-decoration: none;
}

.lp-doc .lp-eyebrow a:hover {
    text-decoration: underline;
}

.lp-doc h1 {
    margin: 0 0 18px;
    font-size: clamp(28px, 4.5vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 750;
    color: var(--lp-slate-900);
}

.lp-doc h2 {
    margin: 34px 0 10px;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--lp-slate-900);
}

.lp-doc p {
    margin: 0 0 12px;
    font-size: 15.5px;
}

.lp-doc-lede {
    font-size: 16.5px !important;
    color: var(--lp-slate-500);
    padding-bottom: 6px;
}

.lp-doc a {
    color: var(--lp-brand-600);
}

.lp-doc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    background: var(--lp-slate-100, #F1F5F9);
    border: 1px solid var(--lp-slate-200);
    border-radius: 4px;
    padding: 1px 5px;
}

.lp-doc .lp-footer {
    margin-top: 40px;
}

/* Build stamp, matching the other shells. Corner-parked, not part of the layout. */
.lp-version {
    position: fixed;
    right: 8px;
    bottom: 6px;
    font-size: 10.5px;
    color: var(--lp-slate-300);
    pointer-events: none;
}

/* ---------- narrow screens ---------- */

@media (max-width: 560px) {
    .lp-hero {
        padding: 44px 0 6px;
    }

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

    /* Stack the showcase and centre it, so the club logo stays the first thing seen rather
       than being squeezed into a 96px column beside wrapped text. */
    .lp-showcase {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 18px;
        padding: 26px 20px;
    }

    .lp-showcase-body p {
        text-align: left;
    }

    .lp-cta {
        width: 100%;
    }
}