/* ==========================================================================
   Road to 1M campaign landing pages (static mock-ups, variants A and B).
   Built on the redesign tokens. Nothing here talks to a backend: the counter,
   the entry totals and the milestone states are hard-coded.
   ========================================================================== */

.kxpc { --kxpc-ink: #0a0a0a; --kxpc-dark: #101010; }

/* ── Campaign header ────────────────────────────────────────────────────
   Different from the site header: wordmark left, nav centred, actions right,
   because this page has two things to sell (entries and registration). */
.kxpc-hdr {
    position: sticky; top: 0; z-index: 60;
    background: var(--kxp-white);
    border-bottom: 1px solid var(--kxp-grey-100);
}
.kxpc-hdr__inner {
    display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
    padding: 1rem var(--kxp-gutter);
    max-width: var(--kxp-max); margin-inline: auto;
}
.kxpc-wordmark {
    font-family: var(--kxp-font-display);
    font-weight: 800; font-size: clamp(1rem, 0.7rem + 0.9vw, 1.4rem);
    letter-spacing: 0.1em; text-transform: uppercase;
    white-space: nowrap; color: var(--kxp-black);
}
.kxpc-wordmark__x {
    color: var(--kxp-accent);
    font-size: 1.426em; line-height: 1; vertical-align: -0.019em;
}
.kxpc-nav { flex: 1; }
.kxpc-nav ul {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: clamp(0.9rem, 2vw, 2.1rem);
    list-style: none; margin: 0; padding: 0;
}
.kxpc-nav a {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 700;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--kxp-black);
    white-space: nowrap;
    transition: color 0.3s var(--kxp-ease);
}
.kxpc-nav a:hover { color: var(--kxp-accent); }
.kxpc-soon {
    margin-left: 0.4em; padding: 2px 6px;
    font-size: 9px; letter-spacing: 0.1em;
    background: var(--kxp-grey-100); color: var(--kxp-grey-500);
    vertical-align: middle;
}
.kxpc-hdr__actions { display: flex; align-items: center; gap: 0.6rem; }

.kxpc-btn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.72rem 1.15rem;
    border: 1px solid var(--kxp-black);
    background: transparent; color: var(--kxp-black);
    white-space: nowrap;
    transition: background 0.3s var(--kxp-ease), color 0.3s var(--kxp-ease), border-color 0.3s var(--kxp-ease);
}
.kxpc-btn:hover { background: var(--kxp-grey-50); }
.kxpc-btn--solid { background: var(--kxp-black); color: var(--kxp-white); }
.kxpc-btn--solid:hover { background: var(--kxp-accent); border-color: var(--kxp-accent); }
.kxpc-btn--red { background: var(--kxp-accent); border-color: var(--kxp-accent); color: var(--kxp-white); }
.kxpc-btn--red:hover { background: var(--kxp-accent-dk); border-color: var(--kxp-accent-dk); }
.kxpc-btn--ghost { border-color: var(--kxp-grey-300); }
.kxpc-btn__count {
    display: inline-grid; place-items: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    background: var(--kxp-accent); color: var(--kxp-white);
    border-radius: 999px;
    font-size: 11px; font-variant-numeric: tabular-nums;
}

/* ── Announcement bar (variant B) ───────────────────────────────────────── */
.kxpc-annbar { background: var(--kxpc-dark); color: var(--kxp-white); }
.kxpc-annbar__inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem clamp(1rem, 3vw, 2.25rem);
    max-width: var(--kxp-max); margin-inline: auto;
    padding: 0.8rem var(--kxp-gutter);
}
.kxpc-annbar__live {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 800;
    letter-spacing: 0.09em; text-transform: uppercase;
}
.kxpc-annbar__sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.22); }
.kxpc-annbar__msg {
    flex: 1;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 600;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: rgba(255,255,255,0.82);
}
.kxpc-annbar .kxpc-btn { padding: 0.55rem 1.05rem; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.kxpc-hero { position: relative; overflow: hidden; background: var(--kxp-white); }
.kxpc-hero__inner {
    position: relative; z-index: 2;
    max-width: var(--kxp-max); margin-inline: auto;
    padding: clamp(2rem, 5vw, 3.5rem) var(--kxp-gutter) clamp(2.5rem, 5vw, 4rem);
    display: grid; gap: clamp(2rem, 5vw, 3.5rem);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 1000px) {
    .kxpc-hero__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
/* The oversized brand X sitting behind the hero. */
.kxpc-hero__x {
    position: absolute; z-index: 1;
    top: 50%; left: 52%; transform: translate(-50%, -50%);
    font-family: var(--kxp-font-display);
    font-weight: 800; font-size: min(40vw, 560px); line-height: 1;
    letter-spacing: -0.04em;
    color: var(--kxp-grey-50);
    pointer-events: none; user-select: none;
}

.kxpc-hero__kicker {
    font-family: var(--kxp-font-display);
    font-size: clamp(1.9rem, 1rem + 3.4vw, 3.1rem);
    font-weight: 800; line-height: 0.95;
    letter-spacing: -0.02em; text-transform: uppercase;
    color: var(--kxp-black);
    margin: 0;
}
.kxpc-hero__goal {
    display: block;
    font-size: clamp(2.6rem, 0.9rem + 6.6vw, 5.4rem);
    color: var(--kxp-accent);
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}
.kxpc-hero__label {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 700;
    letter-spacing: 0.34em; text-transform: uppercase;
    color: var(--kxp-black);
    margin: 0.9rem 0 0.7rem;
}
.kxpc-hero__blurb { max-width: 46ch; margin-top: 1.2rem; color: var(--kxp-grey-700); }
.kxpc-hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }

/* ── Flip counter ───────────────────────────────────────────────────────── */
.kxpc-count { display: flex; align-items: center; gap: clamp(0.25rem, 0.8vw, 0.5rem); flex-wrap: wrap; }
.kxpc-count__d {
    display: grid; place-items: center;
    min-width: clamp(2.4rem, 4.4vw, 3.6rem);
    padding: clamp(0.4rem, 1vw, 0.7rem) clamp(0.3rem, 0.8vw, 0.55rem);
    background: var(--kxpc-ink); color: var(--kxp-white);
    border-radius: 6px;
    font-family: var(--kxp-font-display);
    font-weight: 800;
    font-size: clamp(1.7rem, 0.9rem + 2.6vw, 3rem);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    /* The hairline is the seam of a split-flap tile. */
    background-image: linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255,255,255,0.16) 50%, transparent calc(50% + 1px));
}
.kxpc-count__sep {
    font-family: var(--kxp-font-display);
    font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.4rem);
    color: var(--kxp-black);
}

/* ── Progress ───────────────────────────────────────────────────────────── */
.kxpc-prog { margin-top: 1.4rem; max-width: 34rem; }
.kxpc-prog__track { height: 8px; background: var(--kxp-grey-100); border-radius: 999px; overflow: hidden; }
.kxpc-prog__fill {
    height: 100%; background: var(--kxp-accent); border-radius: 999px;
    width: 0;
    transition: width 1.6s var(--kxp-ease);
}
.kxpc-prog__row {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
    margin-top: 0.7rem;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kxp-grey-700);
}
.kxpc-prog__row b { color: var(--kxp-black); font-weight: 800; }
.kxpc-prog__togo { color: var(--kxp-accent); font-weight: 800; }

/* ── Prize plate (stands in for the car render) ─────────────────────────── */
.kxpc-prize { position: relative; }
.kxpc-prize__head { text-align: right; margin-bottom: 1rem; }
@media (max-width: 999px) { .kxpc-prize__head { text-align: left; } }
.kxpc-prize__over {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--kxp-grey-700);
    margin: 0;
}
.kxpc-prize__name {
    font-family: var(--kxp-font-display);
    font-size: clamp(1.6rem, 0.8rem + 2.6vw, 2.9rem);
    font-weight: 800; line-height: 1;
    letter-spacing: -0.02em; text-transform: uppercase;
    color: var(--kxp-black);
    margin: 0.35rem 0 0;
}
.kxpc-prize__draw {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--kxp-accent);
    margin: 0.3rem 0 0;
}

.kxpc-plate {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid; place-items: center;
    background: radial-gradient(120% 90% at 50% 25%, #3a3a3a 0%, #1a1a1a 45%, #0b0b0b 100%);
    clip-path: polygon(var(--kxp-chamfer) 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%, 0 var(--kxp-chamfer));
    overflow: hidden;
}
.kxpc-plate__word {
    font-family: var(--kxp-font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 1rem + 7vw, 6rem);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.38);
    line-height: 1;
}
.kxpc-plate__note {
    position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
    font-family: var(--kxp-font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    text-align: center; white-space: nowrap;
}
.kxpc-plate--sm { aspect-ratio: 4 / 3; }
.kxpc-badge {
    position: absolute; top: 0; right: 0;
    width: clamp(56px, 6vw, 84px); aspect-ratio: 3 / 4;
    display: grid; place-items: center;
    background: var(--kxpc-dark);
    clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
    font-family: var(--kxp-font-display);
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    text-align: center; line-height: 1.3;
    padding: 0 6px 12px;
}

/* ── Prize Road ─────────────────────────────────────────────────────────── */
.kxpc-road { background: var(--kxpc-dark); color: var(--kxp-white); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.kxpc-road__shell { max-width: var(--kxp-max); margin-inline: auto; padding-inline: var(--kxp-gutter); }
.kxpc-road__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.4rem; }
.kxpc-road__title {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1); font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0;
}
.kxpc-road__sub { font-size: var(--kxp-step--1); color: rgba(255,255,255,0.6); margin: 0; }

.kxpc-road__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr);
    gap: 0.85rem;
    margin-top: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}
.kxpc-stop {
    position: relative;
    display: flex; flex-direction: column;
    background: #1c1c1c;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 0.9rem 0.9rem 1.1rem;
    text-align: center;
    min-height: 190px;
}
.kxpc-stop--done { background: var(--kxp-white); color: var(--kxp-black); border-color: var(--kxp-white); }
.kxpc-stop--next { border-color: var(--kxp-accent); border-width: 2px; }
.kxpc-stop--grand { border-color: var(--kxp-white); }

.kxpc-stop__state {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    font-family: var(--kxp-font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.kxpc-stop--done .kxpc-stop__state { color: var(--kxp-black); }
.kxpc-stop--next .kxpc-stop__state { color: var(--kxp-white); }
.kxpc-stop__tick {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px; border-radius: 999px;
    background: var(--kxp-accent); color: var(--kxp-white);
    font-size: 10px;
}
.kxpc-stop__at {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1); font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin: 0.55rem 0 0;
}
.kxpc-stop--next .kxpc-stop__at, .kxpc-stop--grand .kxpc-stop__at { color: var(--kxp-accent); }
.kxpc-stop__art {
    flex: 1; display: grid; place-items: center;
    margin: 0.6rem 0;
    min-height: 62px;
}
.kxpc-stop__glyph { font-size: 2rem; line-height: 1; }
.kxpc-stop__hidden {
    display: grid; place-items: center;
    width: 100%; height: 62px;
    background: linear-gradient(to bottom, #2a2a2a, #151515);
    border-radius: 4px;
    font-family: var(--kxp-font-display);
    font-size: 1.5rem; font-weight: 800;
    color: rgba(255,255,255,0.55);
}
.kxpc-stop__prize {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0); font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0;
}
.kxpc-stop__note {
    font-family: var(--kxp-font-display);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0.35rem 0 0;
    color: rgba(255,255,255,0.5);
}
.kxpc-stop--done .kxpc-stop__note { color: var(--kxp-accent); }
.kxpc-stop--grand .kxpc-stop__note { color: var(--kxp-accent); letter-spacing: 0.12em; text-transform: uppercase; }
.kxpc-road__foot { margin-top: 1.1rem; font-size: var(--kxp-step--1); color: rgba(255,255,255,0.45); }

/* ── Info cards ─────────────────────────────────────────────────────────── */
.kxpc-cards {
    max-width: var(--kxp-max); margin-inline: auto;
    padding: clamp(2rem, 4vw, 3rem) var(--kxp-gutter);
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 900px)  { .kxpc-cards { grid-template-columns: 1.35fr 1.35fr 1fr; } }
.kxpc-card {
    background: var(--kxp-white);
    border: 1px solid var(--kxp-grey-100);
    padding: clamp(1.2rem, 2.4vw, 1.75rem);
}
.kxpc-card__title {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1); font-weight: 800;
    letter-spacing: 0.02em; text-transform: uppercase;
    margin: 0 0 1.1rem;
}
.kxpc-card__title--red { color: var(--kxp-accent); }

.kxpc-ways { display: grid; gap: 1.25rem; }
@media (min-width: 560px) { .kxpc-ways { grid-template-columns: 1fr 1fr; } }
.kxpc-way { display: flex; gap: 0.85rem; }
.kxpc-way__icon {
    flex: 0 0 auto;
    width: 44px; height: 44px; display: grid; place-items: center;
    background: #fdecec; border-radius: 999px;
    color: var(--kxp-accent);
}
.kxpc-way__name {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0); font-weight: 700;
    margin: 0;
}
.kxpc-way__text { font-size: var(--kxp-step--1); color: var(--kxp-grey-700); margin: 0.25rem 0 0; }
.kxpc-way__val {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 800;
    color: var(--kxp-accent);
    margin: 0.4rem 0 0;
}
.kxpc-card__rule { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--kxp-grey-100); text-align: center; font-size: var(--kxp-step--1); color: var(--kxp-grey-700); }
.kxpc-card__rule b { color: var(--kxp-accent); }

/* min-width:0 on both tracks, or the art column refuses to shrink and pushes
   the QR straight out through the side of the card. */
.kxpc-mine { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.kxpc-mine > * { min-width: 0; }
@media (min-width: 560px) { .kxpc-mine { grid-template-columns: minmax(0, 1fr) auto; } }
.kxpc-mine__big {
    font-family: var(--kxp-font-display);
    font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.2rem);
    font-weight: 800; line-height: 1;
    color: var(--kxp-accent);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.kxpc-mine__list { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.kxpc-mine__list li { display: flex; align-items: center; gap: 0.55rem; font-size: var(--kxp-step--1); color: var(--kxp-grey-700); }
.kxpc-mine__dot { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: #fdecec; color: var(--kxp-accent); font-size: 10px; flex: 0 0 auto; }
.kxpc-mine__art { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.kxpc-mine__can { width: clamp(62px, 6vw, 92px); height: auto; mix-blend-mode: multiply; flex: 0 1 auto; }
.kxpc-mine__arrow { color: var(--kxp-grey-300); font-size: 1.4rem; }
.kxpc-qr { border: 1px solid var(--kxp-grey-100); padding: 0.5rem; text-align: center; flex: 0 0 auto; }
.kxpc-qr svg { display: block; width: clamp(58px, 5.4vw, 78px); height: auto; }
.kxpc-qr__cap { font-family: var(--kxp-font-display); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kxp-grey-500); margin: 0.45rem 0 0; }

.kxpc-card--cta .kxpc-card__title { line-height: 1.15; }
.kxpc-card--cta p { font-size: var(--kxp-step--1); color: var(--kxp-grey-700); margin: 0 0 1.3rem; }

/* ── Trust bar ──────────────────────────────────────────────────────────── */
.kxpc-trust {
    border-top: 1px solid var(--kxp-grey-100);
    background: var(--kxp-white);
}
.kxpc-trust__inner {
    max-width: var(--kxp-max); margin-inline: auto;
    padding: 1.3rem var(--kxp-gutter);
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.kxpc-trust__item {
    display: flex; align-items: center; justify-content: center; gap: 0.65rem;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--kxp-grey-700);
    text-align: left;
}
.kxpc-trust__item svg { color: var(--kxp-accent); flex: 0 0 auto; }

/* ── Four-step strip (variant B) ────────────────────────────────────────── */
.kxpc-steps { background: var(--kxpc-dark); color: var(--kxp-white); }
.kxpc-steps__inner {
    max-width: var(--kxp-max); margin-inline: auto;
    padding: clamp(1.5rem, 3vw, 2.4rem) var(--kxp-gutter);
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.kxpc-step { display: flex; align-items: center; gap: 1rem; position: relative; }
@media (min-width: 1000px) {
    .kxpc-step + .kxpc-step { padding-left: 1.75rem; }
    .kxpc-step + .kxpc-step::before {
        content: ""; position: absolute; left: 0; top: 10%; bottom: 10%;
        width: 1px; background: rgba(255,255,255,0.16);
    }
}
.kxpc-step__icon { flex: 0 0 auto; color: var(--kxp-white); }
.kxpc-step__name {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1); font-weight: 800;
    letter-spacing: 0.03em; text-transform: uppercase;
    margin: 0; line-height: 1.05;
}
.kxpc-step__sub {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0.25rem 0 0;
}
.kxpc-step--accent .kxpc-step__icon { color: var(--kxp-accent); }

/* ── Mock-up banner ─────────────────────────────────────────────────────── */
.kxpc-mock {
    background: #fff8e5;
    border-bottom: 1px solid #f0dfae;
    color: #6b5410;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 600;
    text-align: center;
    padding: 0.6rem var(--kxp-gutter);
}
.kxpc-mock b { font-weight: 800; }

@media (max-width: 860px) {
    .kxpc-nav { display: none; }
    .kxpc-hdr__inner { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .kxpc-prog__fill { transition: none; }
}

/* Product art on the Prize Road is line-drawn, not emoji: this brand dropped
   emoji from the Enixytil section for the same reason. */
.kxpc-stop__glyph { display: grid; place-items: center; color: currentColor; }
.kxpc-stop--grand .kxpc-stop__glyph { color: var(--kxp-accent); }

/* ── Register a can ─────────────────────────────────────────────────────── */
.kxpc-reg { background: var(--kxp-grey-50); }
.kxpc-reg__shell {
    max-width: var(--kxp-max); margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--kxp-gutter);
    display: grid; gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 900px) { .kxpc-reg__shell { grid-template-columns: 1fr 1.1fr; } }

.kxpc-reg__title {
    font-family: var(--kxp-font-display);
    font-size: clamp(1.7rem, 1rem + 2.4vw, 2.7rem);
    font-weight: 800; line-height: 1.02;
    letter-spacing: -0.02em; text-transform: uppercase;
    margin: 1rem 0 0;
}
.kxpc-reg__lead { margin-top: 1rem; color: var(--kxp-grey-700); max-width: 44ch; }

.kxpc-reg__panel {
    background: var(--kxp-white);
    padding: clamp(1.4rem, 3vw, 2.25rem);
    clip-path: polygon(var(--kxp-chamfer) 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%, 0 var(--kxp-chamfer));
}

.kxpc-reg__label {
    display: block;
    font-family: var(--kxp-font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--kxp-grey-500);
    margin-bottom: 0.6rem;
}
.kxpc-reg__row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kxpc-reg__row input {
    flex: 1 1 14rem; min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--kxp-grey-300);
    background: var(--kxp-white);
    /* Monospace so the customer can actually tell O from 0 and I from l while
       checking it against the can — the whole known failure mode of this code. */
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 1.02rem; letter-spacing: 0.06em;
    color: var(--kxp-black);
    text-transform: uppercase;
}
.kxpc-reg__row input:focus-visible { outline: 2px solid var(--kxp-accent); outline-offset: 1px; border-color: var(--kxp-accent); }
.kxpc-reg__row button { flex: 0 0 auto; }

.kxpc-reg__msg {
    margin: 0.9rem 0 0;
    font-size: var(--kxp-step--1);
    min-height: 1.3em;
    color: var(--kxp-grey-700);
}
.kxpc-reg__msg--ok  { color: #1f6b3c; font-weight: 600; }
.kxpc-reg__msg--err { color: var(--kxp-accent-dk); font-weight: 600; }

.kxpc-reg__lock {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0); font-weight: 700;
    color: var(--kxp-black);
    margin: 0;
}
.kxpc-reg__note { margin-top: 0.7rem; font-size: var(--kxp-step--1); color: var(--kxp-grey-700); }
.kxpc-reg__actions { margin-top: 1.2rem; }
.kxpc-reg__kept {
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    background: var(--kxp-grey-50); padding: 0.1em 0.4em;
}

.kxpc-reg__mine {
    margin-top: 1.6rem; padding-top: 1.4rem;
    border-top: 1px solid var(--kxp-grey-100);
}
.kxpc-reg__mine-label {
    font-family: var(--kxp-font-display);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--kxp-grey-500);
    margin: 0;
}
.kxpc-reg__mine-big {
    font-family: var(--kxp-font-display);
    font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem);
    font-weight: 800; line-height: 1;
    color: var(--kxp-accent);
    font-variant-numeric: tabular-nums;
    margin: 0.3rem 0 0;
}
.kxpc-reg__mine-sub { margin: 0.4rem 0 0; font-size: var(--kxp-step--1); color: var(--kxp-grey-700); }
.kxpc-reg__link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-top: 0.9rem;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--kxp-black);
    transition: color 0.3s var(--kxp-ease);
}
.kxpc-reg__link:hover { color: var(--kxp-accent); }

/* ── My entries, inside the WooCommerce account ─────────────────────────── */
.kxp-r1m-account__big {
    font-family: var(--kxp-font-display);
    font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem);
    font-weight: 800; line-height: 1;
    color: var(--kxp-accent);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.kxp-r1m-account__sub { margin: 0.4rem 0 0; color: var(--kxp-grey-700); }
.kxp-r1m-account__progress { margin: 1rem 0 1.6rem; color: var(--kxp-grey-500); font-size: var(--kxp-step--1); }
.kxp-r1m-table { width: 100%; }

/* ── Free entry ─────────────────────────────────────────────────────────── */
.kxpc-free { background: var(--kxp-white); border-top: 1px solid var(--kxp-grey-100); }
.kxpc-free__shell {
    max-width: var(--kxp-max); margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--kxp-gutter);
    display: grid; gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 900px) { .kxpc-free__shell { grid-template-columns: 1fr 1.1fr; } }

.kxpc-free__title {
    font-family: var(--kxp-font-display);
    font-size: clamp(1.7rem, 1rem + 2.4vw, 2.7rem);
    font-weight: 800; line-height: 1.02;
    letter-spacing: -0.02em; text-transform: uppercase;
    margin: 1rem 0 0;
}
.kxpc-free__lead { margin-top: 1rem; color: var(--kxp-grey-700); max-width: 46ch; }
.kxpc-free__back { margin-top: 1.5rem; }

/* On /free-entry/ this section is the whole page, so it sits directly under the
   header with nothing above it — it needs its own headroom and enough height
   that the footer doesn't ride up under a short panel. */
#kxpMain > .kxpc-free:first-child { border-top: 0; min-height: 60vh; }
#kxpMain > .kxpc-free:first-child .kxpc-free__shell { padding-top: clamp(3.5rem, 7vw, 6rem); }

.kxpc-free__panel {
    background: var(--kxp-grey-50);
    padding: clamp(1.4rem, 3vw, 2.25rem);
    clip-path: polygon(var(--kxp-chamfer) 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%, 0 var(--kxp-chamfer));
}

.kxpc-free__q { border: 0; margin: 0 0 1.5rem; padding: 0; }
.kxpc-free__qlabel {
    padding: 0;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0); font-weight: 700;
    color: var(--kxp-black);
    margin-bottom: 0.6rem;
}
.kxpc-free__hint { margin: 0 0 0.7rem; font-size: var(--kxp-step--1); color: var(--kxp-grey-500); }

.kxpc-free__radios { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kxpc-free__radio {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--kxp-white);
    border: 1px solid var(--kxp-grey-300);
    font-size: var(--kxp-step--1);
    cursor: pointer;
    transition: border-color 0.25s var(--kxp-ease);
}
.kxpc-free__radio:hover { border-color: var(--kxp-black); }
.kxpc-free__radio:has(input:checked) { border-color: var(--kxp-accent); box-shadow: inset 0 0 0 1px var(--kxp-accent); }
.kxpc-free__radio input { accent-color: var(--kxp-accent); }

.kxpc-free__select {
    width: 100%; max-width: 26rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--kxp-grey-300);
    background: var(--kxp-white);
    font-family: var(--kxp-font-body);
    font-size: var(--kxp-step-0);
    color: var(--kxp-black);
}
.kxpc-free__select:focus-visible,
.kxpc-free__handle input:focus-visible { outline: 2px solid var(--kxp-accent); outline-offset: 1px; }

.kxpc-free__handle {
    display: flex; align-items: stretch;
    max-width: 26rem;
    border: 1px solid var(--kxp-grey-300);
    background: var(--kxp-white);
}
.kxpc-free__handle span {
    display: grid; place-items: center;
    padding-inline: 0.85rem;
    background: var(--kxp-grey-50);
    border-right: 1px solid var(--kxp-grey-300);
    font-family: var(--kxp-font-display);
    font-weight: 700; color: var(--kxp-grey-500);
}
.kxpc-free__handle input {
    flex: 1; min-width: 0;
    padding: 0.75rem 0.9rem;
    border: 0; background: transparent;
    font-family: var(--kxp-font-body);
    font-size: var(--kxp-step-0);
    color: var(--kxp-black);
}

.kxpc-free__confirm {
    display: flex; gap: 0.7rem; align-items: flex-start;
    margin: 0 0 1.4rem;
    font-size: var(--kxp-step--1);
    color: var(--kxp-grey-700);
    cursor: pointer;
}
.kxpc-free__confirm input { margin-top: 0.2rem; accent-color: var(--kxp-accent); flex: 0 0 auto; }
.kxpc-free__confirm strong { color: var(--kxp-black); }
.kxpc-free__actions { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   WE MAKE DREAMS — the gold direction the owners approved.
   Scoped to .kxpc-gold so the shop keeps its red accent untouched; the
   campaign is a different world and shares only the typography.
   ══════════════════════════════════════════════════════════════════════════ */
.kxpc-gold {
    --gold:      #a98a52;
    --gold-lt:   #c9ae76;
    --gold-soft: #f3ecdd;
    --sand:      #faf7f2;
    --kxpc-ink:  #14120f;
}
/* #104 — the header still carried the shop's red: the × in the wordmark, the
   nav hover and the "My entries" count badge. On a gold page they read as a
   leftover from another brand. */
.kxpc-gold .kxpc-wordmark__x { color: var(--gold); }
.kxpc-gold .kxpc-nav a:hover { color: var(--gold); }
.kxpc-gold .kxpc-btn__count { background: var(--gold); color: var(--kxp-white); }

/* The footer is the shop's, shared across the site. On the gold page its two
   red accents were the last thing carrying the other palette. */
.kxpc-gold .kxp-ftr__statement--accent { color: var(--gold); }
.kxpc-gold .kxp-ftr__badge { background: var(--gold); }

.kxpc-gold .kxpc-hero { background: linear-gradient(180deg, var(--sand) 0%, #ffffff 100%); }
.kxpc-gold .kxpc-hero__x { color: #f2ede4; }

/* The hero states the promise, not the mechanic. */
.kxpc-dream__over {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 700;
    letter-spacing: .34em; text-transform: uppercase;
    color: var(--kxp-grey-500);
    margin: 0 0 1.1rem;
}
.kxpc-dream__title {
    font-family: var(--kxp-font-display);
    font-size: clamp(2.1rem, 1.1rem + 4.2vw, 4rem);
    font-weight: 800; line-height: .98;
    letter-spacing: -.03em; text-transform: uppercase;
    color: var(--kxp-black);
    margin: 0;
}
.kxpc-dream__title em { font-style: normal; color: var(--gold); display: block; }
.kxpc-dream__rule { width: 4.5rem; height: 2px; background: var(--gold); margin: 1.6rem 0; border: 0; }
.kxpc-dream__facts {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0); font-weight: 700;
    line-height: 1.5; letter-spacing: .02em; text-transform: uppercase;
    color: var(--kxp-black);
    margin: 0;
}
.kxpc-dream__facts span { color: var(--gold); display: block; }
.kxpc-dream__nopurchase { margin-top: 1rem; font-size: var(--kxp-step--1); color: var(--kxp-grey-500); }
/* Grey disclosure, but the route out of it has to look clickable. */
.kxpc-dream__nopurchase a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kxpc-dream__nopurchase a:hover { color: var(--kxp-accent); }

.kxpc-gold .kxpc-btn--solid { background: var(--kxpc-ink); border-color: var(--kxpc-ink); }
.kxpc-gold .kxpc-btn--solid:hover { background: var(--gold); border-color: var(--gold); }
.kxpc-gold .kxpc-count__d { background: var(--kxpc-ink); border-radius: 4px; }
.kxpc-gold .kxpc-prog__fill { background: var(--gold); }
.kxpc-gold .kxpc-prog__togo { color: var(--gold); }
.kxpc-gold .kxpc-hero__goal,
.kxpc-gold .kxpc-card__title--red,
.kxpc-gold .kxpc-reg__mine-big,
.kxpc-gold .kxpc-prize__draw { color: var(--gold); }
.kxpc-gold .kxpc-way__icon { background: var(--gold-soft); color: var(--gold); }
.kxpc-gold .kxpc-trust__item svg { color: var(--gold); }
.kxpc-gold .kxpc-reg { background: var(--sand); }
.kxpc-gold .kxpc-free { background: #fff; }
.kxpc-gold .kxpc-free__panel { background: var(--sand); }
.kxpc-gold .kxpc-reg__row input:focus-visible { outline-color: var(--gold); border-color: var(--gold); }
.kxpc-gold .kxpc-plate { background: radial-gradient(120% 90% at 50% 25%, #2a2724 0%, #17140f 55%, #0b0a08 100%); }
.kxpc-gold .kxpc-plate__word { -webkit-text-stroke-color: rgba(201,174,118,.55); }

/* Counter, given its own card the way the comp shows it. */
.kxpc-countercard {
    max-width: var(--kxp-max); margin-inline: auto;
    padding: 0 var(--kxp-gutter);
}
.kxpc-countercard__inner {
    background: #fff;
    border: 1px solid var(--kxp-grey-100);
    padding: clamp(1.5rem, 4vw, 2.6rem);
    text-align: center;
    clip-path: polygon(var(--kxp-chamfer) 0, 100% 0, 100% calc(100% - var(--kxp-chamfer)), calc(100% - var(--kxp-chamfer)) 100%, 0 100%, 0 var(--kxp-chamfer));
}
.kxpc-countercard__label {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0); font-weight: 700;
    letter-spacing: .3em; text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1.2rem;
}
.kxpc-countercard .kxpc-count { justify-content: center; }
.kxpc-countercard .kxpc-prog { margin-inline: auto; max-width: 42rem; }

/* How it works — five steps, a real sequence, so they are numbered. */
.kxpc-steps5 {
    list-style: none; margin: 0; padding: clamp(2rem,4vw,3rem) var(--kxp-gutter);
    max-width: var(--kxp-max); margin-inline: auto;
    display: grid; gap: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.kxpc-step5 { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.kxpc-step5__disc {
    width: 62px; height: 62px; display: grid; place-items: center;
    border: 1px solid var(--kxp-grey-100); border-radius: 999px;
    background: #fff; color: var(--gold);
}
.kxpc-step5__n {
    font-family: var(--kxp-font-display); font-weight: 800;
    font-size: var(--kxp-step--1); color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.kxpc-step5__name {
    font-family: var(--kxp-font-display); font-weight: 800;
    font-size: var(--kxp-step-0); letter-spacing: .1em; text-transform: uppercase;
    color: var(--kxp-black); margin: 0;
}
.kxpc-step5__text { font-size: var(--kxp-step--1); color: var(--kxp-grey-700); margin: 0; max-width: 22ch; }

/* Closing band. */
.kxpc-dreamband { background: var(--kxpc-ink); color: #fff; }
.kxpc-dreamband__inner {
    max-width: var(--kxp-max); margin-inline: auto;
    padding: clamp(2rem,5vw,3.5rem) var(--kxp-gutter);
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem;
}
.kxpc-dreamband__copy {
    flex: 1 1 22rem;
    font-family: var(--kxp-font-display);
    font-size: clamp(1.2rem, .9rem + 1.2vw, 1.8rem);
    font-weight: 800; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase;
    margin: 0;
}
.kxpc-dreamband__copy span { color: var(--gold-lt); display: block; }

/* Legal wording under the entry forms. */
.kxpc-legal { margin-top: 1.1rem; font-size: var(--kxp-step--1); color: var(--kxp-grey-700); }
.kxpc-legal p { margin: 0 0 .5rem; }
.kxpc-legal--missing {
    border: 1px dashed var(--kxp-accent);
    background: #fdecec; color: var(--kxp-accent-dk);
    padding: .8rem 1rem;
}
.kxpc-legal__links { margin-top: .7rem; font-size: var(--kxp-step--1); }
.kxpc-legal__links a { text-decoration: underline; }
.kxpc-optin {
    display: flex; gap: .65rem; align-items: flex-start;
    margin-top: 1.1rem; font-size: var(--kxp-step--1); color: var(--kxp-grey-700);
    cursor: pointer;
}
.kxpc-optin input { margin-top: .22rem; accent-color: var(--gold); flex: 0 0 auto; }

/* ── Site-wide promotion: ticker + pop-up ───────────────────────────────── */
.kxp-ticker {
    background: #14120f; color: #fff;
    overflow: hidden; position: relative;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1); font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
}
.kxp-ticker__track {
    display: flex; width: max-content;
    animation: kxp-ticker 38s linear infinite;
}
.kxp-ticker__item { padding: .6rem 2.5rem; white-space: nowrap; }
.kxp-ticker__item b { color: #c9ae76; font-weight: 800; }
.kxp-ticker:hover .kxp-ticker__track { animation-play-state: paused; }
@keyframes kxp-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    /* Motion off: show one copy, centred, still readable. */
    .kxp-ticker__track { animation: none; width: 100%; justify-content: center; }
    .kxp-ticker__item + .kxp-ticker__item { display: none; }
}

.kxp-popup {
    position: fixed; inset: 0; z-index: 9000;
    display: grid; place-items: center;
    padding: var(--kxp-gutter);
    background: rgba(10,10,10,.62);
}
.kxp-popup[hidden] { display: none; }
.kxp-popup__card {
    position: relative;
    background: #fff; max-width: 30rem; width: 100%;
    padding: clamp(1.8rem, 4vw, 2.6rem);
    text-align: center;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.kxp-popup__over {
    font-family: var(--kxp-font-display);
    font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
    color: #a98a52; margin: 0;
}
.kxp-popup__title {
    font-family: var(--kxp-font-display);
    font-size: clamp(1.5rem, 1rem + 2vw, 2.1rem);
    font-weight: 800; line-height: 1.03; letter-spacing: -.02em; text-transform: uppercase;
    color: var(--kxp-black); margin: .7rem 0 0;
}
.kxp-popup__title span { color: #a98a52; display: block; }
.kxp-popup__text { margin: .9rem 0 1.4rem; color: var(--kxp-grey-700); font-size: var(--kxp-step--1); }
.kxp-popup__close {
    position: absolute; top: .5rem; right: .5rem;
    width: 36px; height: 36px; display: grid; place-items: center;
    background: none; border: 0; cursor: pointer;
    color: var(--kxp-grey-500); font-size: 1.3rem; line-height: 1;
}
.kxp-popup__close:hover { color: var(--kxp-black); }
.kxp-popup__close:focus-visible,
.kxp-popup .kxpc-btn:focus-visible { outline: 2px solid #a98a52; outline-offset: 2px; }
.kxp-popup__later {
    display: block; margin-top: .8rem; background: none; border: 0; cursor: pointer;
    font-family: var(--kxp-font-display); font-size: var(--kxp-step--1);
    color: var(--kxp-grey-500); text-decoration: underline;
}