/* ==========================================================================
   Energy Pouches page. Depends on tokens from redesign.css.
   ========================================================================== */

/* Header is solid from the top here — there's no hero photo behind it. */
.kxp-pp { padding-top: 64px; }

.kxp-pp__intro {
    padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 7vw, 6rem);
}
.kxp-pp__title { margin-top: 1.4rem; }
.kxp-pp__title--accent { color: var(--kxp-accent); }
.kxp-pp__h { margin-block: 1.2rem 3rem; }

/* ── Two-column: label left, prose right. Collapses to stacked on mobile. ── */
.kxp-pp__split { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) {
    .kxp-pp__split { grid-template-columns: 240px 1fr; }
    /* Label tracks the prose as you read past it. */
    .kxp-pp__split-head { position: sticky; top: 100px; align-self: start; }
}
.kxp-pp__split-body > * + * { margin-top: 1.4rem; }

.kxp-pp__note {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    max-width: var(--kxp-max-text);
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    line-height: 1.35;
}
.kxp-pp__note--light { color: var(--kxp-white); }

/* ── Ingredients — a spec list, not cards ───────────────────────────────── */
.kxp-ing { margin: 0; border-top: 1px solid var(--kxp-grey-300); }
.kxp-ing__row {
    display: grid; gap: 0.3rem 2rem;
    grid-template-columns: 1fr;
    padding-block: 1.4rem;
    border-bottom: 1px solid var(--kxp-grey-300);
}
@media (min-width: 800px) {
    .kxp-ing__row { grid-template-columns: 300px 1fr; align-items: baseline; }
}
.kxp-ing__term { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.kxp-ing__name {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.kxp-ing__unit {
    font-size: var(--kxp-step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kxp-grey-500);
}
.kxp-ing__desc { margin: 0; color: var(--kxp-grey-700); max-width: 62ch; }

/* The lead above the two columns — the section intro, not a full-width slab. */
.kxp-pp__ing-lead { max-width: 62ch; }

/* Enixytil sits above the split: it is the one thing both lines share, so it
   reads as the platform and the columns read as variations on it. */
.kxp-ing__core {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--kxp-white);
    border-left: 3px solid var(--kxp-accent);
}
.kxp-ing__core-title {
    font-size: var(--kxp-step-1);
    margin: 0 0 0.6rem;
}
.kxp-ing__core p { margin: 0; color: var(--kxp-grey-700); max-width: 68ch; }

/* KILLA | PABLO side by side (#90). Below 900px they stack, and the second
   column keeps its own rule so the two blends never run together. */
.kxp-ing__cols {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
    .kxp-ing__cols { grid-template-columns: repeat(2, 1fr); }
}
.kxp-ing__line {
    font-size: var(--kxp-step-2);
    letter-spacing: -0.02em;
    margin: 0;
}
.kxp-ing__tagline {
    margin: 0.2rem 0 0;
    color: var(--kxp-grey-700);
}
.kxp-ing__spec {
    margin: 0.35rem 0 1.25rem;
    font-size: var(--kxp-step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kxp-accent);
}
/* Inside a column there is no room for the 300px term gutter — force the
   stacked layout back on, whatever the viewport. */
@media (min-width: 800px) {
    .kxp-ing__cols .kxp-ing__row { grid-template-columns: 1fr; }
}

/* ── Steps — numbering earns its place: this is a real sequence ─────────── */
.kxp-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.kxp-steps li {
    display: grid; gap: 0.4rem 1.75rem;
    grid-template-columns: auto 1fr;
    align-items: start;
    padding-block: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}
.kxp-steps li:first-child { border-top: 1px solid rgba(255,255,255,0.14); }
.kxp-steps__num {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    color: var(--kxp-accent);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
.kxp-steps__body { display: block; }
.kxp-steps__label {
    display: block;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 0.35rem;
}
.kxp-steps__txt { display: block; color: var(--kxp-grey-300); max-width: 62ch; line-height: 1.6; }

/* ── Why grid ───────────────────────────────────────────────────────────── */
.kxp-why {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .kxp-why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .kxp-why { grid-template-columns: repeat(3, 1fr); } }
.kxp-why li { border-top: 1px solid var(--kxp-grey-300); padding-top: 1.2rem; }
.kxp-why__title { font-size: var(--kxp-step-1); margin-bottom: 0.6rem; }
.kxp-why__desc  { color: var(--kxp-grey-700); font-size: var(--kxp-step-0); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.kxp-faq { border-bottom: 1px solid var(--kxp-grey-300); }
.kxp-faq:first-of-type { border-top: 1px solid var(--kxp-grey-300); }
.kxp-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding-block: 1.4rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: color 0.3s var(--kxp-ease);
}
.kxp-faq__q::-webkit-details-marker { display: none; }
.kxp-faq__q:hover { color: var(--kxp-accent); }
/* Plus that becomes a minus on open. */
.kxp-faq__icon { position: relative; flex: 0 0 14px; height: 14px; }
.kxp-faq__icon::before,
.kxp-faq__icon::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    background: currentColor;
    transition: transform 0.35s var(--kxp-ease);
}
.kxp-faq__icon::before { width: 14px; height: 1.5px; }
.kxp-faq__icon::after  { width: 1.5px; height: 14px; }
.kxp-faq[open] .kxp-faq__icon::after { transform: scaleY(0); }
/* A div, not a p: several answers are multi-paragraph and carry their own
   <p> markup, which cannot legally nest inside another <p>. */
.kxp-faq__a {
    padding-bottom: 1.6rem;
    max-width: 68ch;
    color: var(--kxp-grey-700);
}
.kxp-faq__a > :first-child { margin-top: 0; }
.kxp-faq__a > :last-child  { margin-bottom: 0; }
.kxp-faq__a > * + * { margin-top: 0.9rem; }
.kxp-faq__more { margin-top: 2.25rem; }

/* The standalone FAQ page: no split head/body, so the list needs its own
   measure or fifteen answers run the full width of a wide screen. */
.kxp-faqpage { max-width: 76ch; }
.kxp-faq__a ul { margin: 0; padding-left: 1.2rem; }
.kxp-faq__a li + li { margin-top: 0.35rem; }

/* ── Closing CTA ────────────────────────────────────────────────────────── */
.kxp-pp__cta { text-align: center; }
.kxp-pp__cta-title { margin-bottom: 2.5rem; }

/* ── Facts strip (#123) ─────────────────────────────────────────────────────
   Was three bold sentences in one paragraph, floating in white space. The
   four claims became chips; the two statements a headline plus qualifier. */
.kxp-pp__facts { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.kxp-pp__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kxp-pp__chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.1rem;
    background: var(--kxp-white);
    font-family: var(--kxp-font-display);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kxp-black);
    /* The octagon cue, at chip scale. */
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.kxp-pp__chips li::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    background: var(--kxp-accent);
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.kxp-pp__statements {
    display: grid;
    gap: 1.25rem;
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
}
@media (min-width: 760px) {
    .kxp-pp__statements { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
.kxp-pp__statements p {
    display: grid;
    gap: 0.45rem;
    padding-left: 1.1rem;
    border-left: 2px solid var(--kxp-accent);
}
.kxp-pp__statements strong {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--kxp-black);
}
.kxp-pp__statements span { font-size: var(--kxp-step-0); line-height: 1.6; color: var(--kxp-grey-700); }

/* ── The collaboration (#124) ───────────────────────────────────────────────
   Closes the page on the dark band. Brand red is only 4.2:1 on black, so the
   small type here uses the lifted red the campaign hero already uses. */
.kxp-collab { --kxp-collab-red: #ff3b30; }

.kxp-collab__top { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) {
    .kxp-collab__top {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: center;
    }
}
/* The photo runs to the screen edge rather than stopping at the page gutter.
   The pull is the gutter plus whatever space the centred shell leaves beside
   it on wide screens; body already hides horizontal overflow, so the scrollbar
   rounding in 100vw cannot cause a sideways scroll. Stacked, it bleeds both
   ways; from 900px the right edge stays on the column boundary. */
.kxp-collab__media {
    margin: 0;
    margin-left: calc(-1 * (var(--kxp-gutter) + max(0px, (100vw - var(--kxp-max)) / 2)));
    margin-right: calc(-1 * var(--kxp-gutter));
    /* ...and up into the section's own top padding, so the photo starts on the
       edge where the dark band begins instead of floating in black. */
    margin-top: calc(-1 * var(--kxp-section));
}
@media (min-width: 900px) {
    /* Stretched rather than centred: with the negative top margin the box then
       runs from the section edge down to the bottom of the row, and the
       portrait photo fills it by cover. */
    .kxp-collab__top { align-items: stretch; }
    .kxp-collab__media { margin-right: 0; align-self: stretch; }
    .kxp-collab__media img { height: 100%; object-fit: cover; object-position: center 35%; }
}
.kxp-collab__media img {
    display: block;
    width: 100%;
    height: auto;
    /* No chamfer on the flush left edge — only the corner that still floats. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.kxp-collab__names {
    margin-top: 0.9rem;
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kxp-white);
}
.kxp-collab__names span { margin-inline: 0.4rem; color: var(--kxp-collab-red); }
.kxp-collab__title { margin-top: 1rem; }
.kxp-collab__body {
    display: grid;
    gap: 1rem;
    max-width: 62ch;
    margin-top: 1.5rem;
    color: var(--kxp-grey-300);
    line-height: 1.65;
}
.kxp-collab__pull {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--kxp-white);
}

.kxp-collab__pillars {
    display: grid;
    gap: 1.75rem 2rem;
    margin: clamp(3rem, 6vw, 4.5rem) 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 760px) {
    .kxp-collab__pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kxp-collab__pillars li { padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.kxp-collab__pillar-title {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--kxp-collab-red);
}
.kxp-collab__pillar-text { margin-top: 0.7rem; font-size: var(--kxp-step--1); line-height: 1.6; color: var(--kxp-grey-300); }

.kxp-collab__close {
    display: grid;
    justify-items: start;
    gap: 1rem;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.kxp-collab__line {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-2);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--kxp-white);
}
.kxp-collab__line span { color: var(--kxp-collab-red); }
.kxp-collab__powered {
    font-family: var(--kxp-font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--kxp-grey-500);
}
.kxp-collab__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 0.5rem; }
.kxp-collab__ig {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--kxp-font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kxp-white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 0.35rem;
    transition: color 0.3s var(--kxp-ease), border-color 0.3s var(--kxp-ease);
}
.kxp-collab__ig:hover { color: var(--kxp-collab-red); border-bottom-color: var(--kxp-collab-red); }