.koppa-placeholder-landing {
    --koppa-placeholder-ink: #1f252b;
    --koppa-placeholder-muted: #66737d;
    --koppa-placeholder-orange: #f35c09;
    --koppa-placeholder-blue: #0d6efd;
    --koppa-placeholder-surface: #ffffff;
    min-height: 100vh;
    color: var(--koppa-placeholder-ink);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.96)),
        #f5f7f9;
    overflow: hidden;
}

.koppa-placeholder-nav {
    min-height: 112px;
    padding: 1.5rem clamp(1rem, 4vw, 4rem);
}

.koppa-placeholder-brand {
    color: var(--koppa-placeholder-ink);
}

.koppa-placeholder-brand:hover {
    color: var(--koppa-placeholder-ink);
}

.koppa-placeholder-brand img {
    width: 112px;
    height: auto;
}

.koppa-placeholder-lang .btn {
    color: var(--koppa-placeholder-muted);
}

.koppa-placeholder-lang .btn:hover,
.koppa-placeholder-lang .btn:focus,
.koppa-placeholder-lang .btn.show {
    color: var(--koppa-placeholder-ink);
}

.koppa-placeholder-top-cta,
.koppa-placeholder-cta {
    --bs-btn-bg: var(--koppa-placeholder-blue);
    --bs-btn-border-color: var(--koppa-placeholder-blue);
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
}

.koppa-placeholder-hero {
    position: relative;
    /* Space between the columns comes from the Bootstrap gutter, not `gap`. This element is a
       .row, so its children are col-lg-5 + col-lg-7 — exactly 12 columns, exactly 100% width.
       A `gap` is added on top of that width rather than taken out of it, so the pair no longer
       fits on one line and flex-wrap dropped the visual below the copy, leaving the right half
       of the hero empty. */
    --bs-gutter-x: clamp(2rem, 5vw, 5rem);
    min-height: calc(100vh - 112px);
    padding: clamp(2rem, 7vh, 4.5rem) clamp(1rem, 4vw, 4rem) 5rem;
}

.koppa-placeholder-copy {
    max-width: 560px;
    z-index: 1;
}

.koppa-placeholder-copy h1 {
    max-width: 560px;
    /* Was clamp(3.3rem, 6.5vw, 5.6rem), which ran to four lines in a col-lg-5 and pushed the
       body copy and CTA below the fold on a laptop. */
    font-size: clamp(2.4rem, 3.6vw, 3.4rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 1.6rem;
}

.koppa-placeholder-copy p {
    max-width: 540px;
    color: #3f4d57;
    font-size: 1.22rem;
    line-height: 1.58;
    margin-bottom: 2rem;
}

.koppa-placeholder-note {
    max-width: 290px;
    color: var(--koppa-placeholder-muted);
    font-size: 0.98rem;
    line-height: 1.35;
}

.koppa-placeholder-visual {
    /* Was a 620px floor, which reserved more height than the scaled mock needs and pushed the
       hero past the fold. The mock sizes itself. */
    min-height: auto;
    z-index: 1;
}

.koppa-placeholder-browser {
    position: relative;
    /* Scaled rather than narrowed: the mock's internal type is fixed px, so reducing its width
       only makes it reflow taller (560px wide measured 684px tall against 631x662 before).
       zoom shrinks the whole thing and its layout box with it. */
    zoom: 0.8;
    width: min(860px, 100%);
    border: 1px solid rgba(31, 37, 43, 0.16);
    border-radius: 1rem;
    background: var(--koppa-placeholder-surface);
    box-shadow: 0 34px 90px rgba(27, 48, 68, 0.2);
    overflow: hidden;
}

.koppa-placeholder-browser-bar {
    height: 48px;
    padding: 0 1rem;
    background: #eef2f5;
    border-bottom: 1px solid rgba(31, 37, 43, 0.12);
}

.koppa-placeholder-browser-bar span {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: #d94141;
}

.koppa-placeholder-browser-bar span:nth-child(2) {
    background: #f6bf26;
}

.koppa-placeholder-browser-bar span:nth-child(3) {
    background: #34a853;
}

.koppa-placeholder-browser-bar b {
    margin-left: 0.7rem;
    color: #74808a;
    font-size: 0.86rem;
}

.koppa-placeholder-app-header {
    min-height: 112px;
    padding: 1.35rem 1.6rem;
    color: #fff;
    background: var(--koppa-placeholder-orange);
}

.koppa-placeholder-app-header img {
    width: 58px;
    height: auto;
}

.koppa-placeholder-app-header strong,
.koppa-placeholder-app-header small {
    display: block;
}

.koppa-placeholder-app-header strong {
    font-size: 1.45rem;
    line-height: 1.1;
}

.koppa-placeholder-app-header small {
    font-size: 0.95rem;
    font-style: italic;
}

.koppa-placeholder-app-nav {
    padding: 1rem 1.6rem;
    color: #c7cbd0;
    background: #24292f;
    font-weight: 700;
}

.koppa-placeholder-app-nav span:nth-child(3) {
    color: #fff;
    text-decoration: underline;
}

.koppa-placeholder-app-body {
    padding: 1.45rem;
    background: #f7f8fa;
}

.koppa-placeholder-live,
.koppa-placeholder-panel {
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid #e4e8eb;
}

.koppa-placeholder-live {
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.koppa-placeholder-live .badge {
    background: #dc3545;
    font-size: 0.9rem;
}

.koppa-placeholder-live strong {
    display: inline-flex;
    justify-content: center;
    min-width: 5.2rem;
    padding: 0.4rem 0.8rem;
    border: 2px solid var(--koppa-placeholder-blue);
    border-radius: 0.4rem;
    color: var(--koppa-placeholder-blue);
    font-size: 1.25rem;
}

.koppa-placeholder-live a {
    display: inline-block;
    margin-top: 0.85rem;
    color: var(--koppa-placeholder-blue);
    font-weight: 700;
    text-decoration: underline;
}

.koppa-placeholder-panel {
    padding: 1.1rem;
    min-height: 194px;
}

.koppa-placeholder-panel h2 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 800;
}

.koppa-placeholder-panel li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.62rem 0;
    color: #46515a;
    font-weight: 700;
}

.koppa-placeholder-panel li + li {
    border-top: 1px solid #edf0f2;
}

.koppa-placeholder-panel li span {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    color: #fff;
    background: var(--koppa-placeholder-orange);
    font-size: 0.82rem;
}

.koppa-placeholder-panel li b {
    color: #1f252b;
}

/* Equal-width sides so the score sits dead centre regardless of team-name length. Centring a
   flex row instead puts the score wherever the longer name leaves it, and flex-fill does not
   help — flex: 1 1 auto still grows the longer item. */
.koppa-placeholder-prediction,
.koppa-placeholder-fixture {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.7rem;
    align-items: center;
}

.koppa-placeholder-prediction {
    margin: 1.2rem 0 1rem;
}

.koppa-placeholder-prediction span:first-of-type,
.koppa-placeholder-fixture span:first-of-type {
    text-align: right;
}

.koppa-placeholder-prediction span:last-of-type,
.koppa-placeholder-fixture span:last-of-type {
    text-align: left;
}

.koppa-placeholder-prediction strong {
    color: var(--koppa-placeholder-blue);
    font-size: 1.55rem;
}

.koppa-placeholder-panel small {
    color: var(--koppa-placeholder-muted);
}

.koppa-placeholder-badge {
    position: absolute;
    z-index: 2;
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 14px 34px rgba(31, 37, 43, 0.2);
}

/* Orange, not blue: this badge points at the mocked app header, which is orange precisely to
   stand for the customer's own colours. Blue made it read as another CTA competing with the
   two real ones, and said nothing about branding. */
.koppa-placeholder-badge-primary {
    left: 3%;
    bottom: 13%;
    padding: 0.85rem 1.2rem;
    background: var(--koppa-placeholder-orange);
}

.koppa-placeholder-badge-secondary {
    top: 18%;
    right: 0;
    padding: 0.8rem 1.1rem;
    background: #24292f;
}

@media screen and (max-width: 991px) {
    .koppa-placeholder-hero {
        padding-top: 2rem;
    }

    .koppa-placeholder-visual {
        min-height: auto;
    }

    .koppa-placeholder-browser {
        /* Full width on mobile, so it does not need scaling down as well. */
        zoom: 1;
        margin-top: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .koppa-placeholder-nav {
        min-height: 86px;
        padding: 1rem;
    }

    .koppa-placeholder-brand img {
        width: 82px;
    }

    .koppa-placeholder-top-cta {
        font-size: 0.86rem;
    }

    .koppa-placeholder-copy h1 {
        font-size: 2.9rem;
    }

    .koppa-placeholder-copy p {
        font-size: 1.04rem;
    }

    .koppa-placeholder-note {
        max-width: none;
    }

    .koppa-placeholder-app-header,
    .koppa-placeholder-app-nav,
    .koppa-placeholder-app-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .koppa-placeholder-app-header {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 1rem;
    }

    .koppa-placeholder-app-nav {
        gap: 1rem !important;
        overflow-x: auto;
    }

    .koppa-placeholder-live .d-flex {
        gap: 0.6rem !important;
    }

    .koppa-placeholder-live strong {
        min-width: 4.4rem;
        font-size: 1.05rem;
    }

    .koppa-placeholder-badge {
        display: none;
    }
}