/* People & Planet Prize campaign page (redesign of /campaign/people-planet-prize).
 *
 * Desktop Figma: 6jVr7YbefLWCQjcGuvD59L node 1786:9832 — Mobile: Qkw1rAqYvxShVppu34QlEv node 1611:6442.
 * Desktop/mobile variants both render at all viewports; per-section 768px
 * media-query gates hide whichever doesn't fit — same pattern as
 * contributors-listing.css. Sections: hero, facts, categories (ppp-cat),
 * criteria (ppp-crit), guidelines (ppp-guide), timeline, faq, cta.
 */

/* People & Planet Prize — Hero.
 *
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L node 1786:7505, mobile Qkw1rAqYvxShVppu34QlEv
 * node 1611:6445. Both variants render at all viewports; the 768px gate hides one.
 */

.ppp-hero--desktop { display: block; }
.ppp-hero--mobile  { display: none; }
@media (max-width: 768px) {
    .ppp-hero--desktop { display: none; }
    .ppp-hero--mobile  { display: block; }
}

/* ============================== Desktop (1786:7505) ============================== */

/* Section — Blue/10 #151C32 bg, 92px vertical / 112px gutters on the 1440 frame. */
.ppp-hero--desktop {
    background: #151C32;
    padding: 92px 112px;
    font-family: 'Inter', sans-serif;
}
/* 1440 - 2×112 gutters = 1216 content width, centered. */
.ppp-hero__container {
    max-width: 1216px;
    margin: 0 auto;
}
/* Hero Text row (1786:7506) — copy column vs prize card, space-between. */
.ppp-hero__row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Decorative vectorized SVGs (1949:1080 / 1949:1170) — 10% opacity baked into the files. */
.ppp-hero__deco {
    position: absolute;
    display: block;
    pointer-events: none;
}
/* image 138 — leaf + soundwaves, 143.115×218.586 at x 773.23, y -51.42. */
.ppp-hero__deco--top {
    left: 773.23px;
    top: -51.42px;
    width: 143.115px;
    height: 218.586px;
}
/* image 137 — tree, 163.817×218.209 at x 772.18, y 209.79. */
.ppp-hero__deco--bottom {
    left: 772.18px;
    top: 209.79px;
    width: 163.817px;
    height: 218.209px;
}
/* Copy column (1786:7507) — 618px, 20px gaps. */
.ppp-hero__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 618px;
}
/* Eyebrow (1786:7508) — 28px icon + 12px gap, Huge/Regular 20/28 teal #2FB8A9. */
.ppp-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ppp-hero__eyebrow-icon { display: block; width: 28px; height: 28px; }
.ppp-hero__eyebrow-text {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: #2FB8A9;
    white-space: nowrap;
}
/* Heading (1786:7511) — Display lg/Semibold 48/60, tracking -0.96, white. */
.ppp-hero__heading {
    margin: 0;
    font-size: 48px;
    line-height: 60px;
    font-weight: 600;
    letter-spacing: -0.96px;
    color: #FFFFFF;
}
/* Lead (1786:7512) — Text xl/Medium 20/30, Blue/2 #C8CEE4. */
.ppp-hero__lead {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    color: #C8CEE4;
}
/* CTA row (1786:7513) — 20px gap. */
.ppp-hero__ctas {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
/* Buttons — Text md/Semibold 16/24, px20 py12, radius 8, Shadow/xs. */
.ppp-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
/* Apply Now — Brand/600 #465DA6. */
.ppp-hero__cta--primary {
    background: #465DA6;
    border: 1px solid #465DA6;
    color: #FFFFFF;
}
/* View Winners — white, Gray/300 border, Gray/700 text. */
.ppp-hero__cta--secondary {
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    color: #414651;
}
/* Note (1786:7516) — Base/Regular 14/22, Blue/3 #B5BEDB. */
.ppp-hero__note {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #B5BEDB;
    white-space: nowrap;
}
/* Prize card (1788:9858) — 318px, Blue/9 #1C2542 bg, #465DA6 border, padding 32, gap 16. */
.ppp-hero__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 318px;
    padding: 32px;
    background: #1C2542;
    border: 1px solid #465DA6;
    border-radius: 8px;
    box-sizing: border-box;
}
.ppp-hero__card-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
/* $2,000 (1788:9860) — Display lg/Semibold 48/60, tracking -0.96, teal #2FB8A9. */
.ppp-hero__card-total {
    margin: 0;
    font-size: 48px;
    line-height: 60px;
    font-weight: 600;
    letter-spacing: -0.96px;
    color: #2FB8A9;
    white-space: nowrap;
}
/* Caption (1788:9861) — Text md/Medium 16/24, Blue/2 #C8CEE4. */
.ppp-hero__card-caption {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #C8CEE4;
    white-space: nowrap;
}
/* Line 7 (1788:9879) — 1px Brand/700 #5E69A8 rule. */
.ppp-hero__card-divider {
    width: 100%;
    border-top: 1px solid #5E69A8;
}
/* Card rows — label/value space-between, Text md 16/24. */
.ppp-hero__card-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}
.ppp-hero__card-label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #C8CEE4;
    white-space: nowrap;
}
/* Values — semibold; sidebar-white #F9F9F9 default, teal for the two prizes. */
.ppp-hero__card-value {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #F9F9F9;
    white-space: nowrap;
}
.ppp-hero__card-value--teal { color: #2FB8A9; }
/* Public Recognition row (1788:9874) — fixed 136/118px columns so both wrap. */
.ppp-hero__card-label--fixed { width: 136px; white-space: normal; }
.ppp-hero__card-value--fixed { width: 118px; text-align: right; white-space: normal; }

/* ============================== Mobile (1611:6445) ============================== */

/* Section — Blue/9 #1C2542 bg, 48px vertical / 16px side margins on the 390 frame. */
.ppp-hero--mobile {
    background: #1C2542;
    padding: 48px 16px;
    font-family: 'Inter', sans-serif;
}
.ppp-hero__m-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
/* Copy block (1611:6446) — 8px gaps. */
.ppp-hero__m-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
/* Eyebrow (1611:6447) — 16px globe icon + 8px gap, Small/Regular 12/20 teal. */
.ppp-hero__m-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ppp-hero__m-eyebrow-icon { display: block; width: 16px; height: 16px; }
.ppp-hero__m-eyebrow-text {
    margin: 0;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #2FB8A9;
    white-space: nowrap;
}
/* Heading (1611:6450) — Heading/2 30/38 Bold, white. */
.ppp-hero__m-heading {
    margin: 0;
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
    color: #FFFFFF;
}
/* Lead (1611:6451) — Base/Regular 14/22, Blue/2 #C8CEE4. */
.ppp-hero__m-lead {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #C8CEE4;
}
/* Button block (1611:6452) — wrap, 8px row / 12px column gap, max-width 375. */
.ppp-hero__m-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 8px 12px;
    width: 100%;
    max-width: 375px;
}
/* Buttons — Text sm/Semibold 14/20, px16 py10, radius 8, Shadow/xs. */
.ppp-hero__m-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
/* Apply Now — 177px, Brand/600 #465DA6. */
.ppp-hero__m-cta--primary {
    width: 177px;
    background: #465DA6;
    border: 1px solid #465DA6;
    color: #FFFFFF;
}
/* View Winners — 169px, white with Gray/300 border, Gray/700 text. */
.ppp-hero__m-cta--secondary {
    width: 169px;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    color: #414651;
}
/* Note (1611:6455) — Small/Regular 12/20, Blue/3 #B5BEDB. */
.ppp-hero__m-note {
    margin: 0;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #B5BEDB;
    white-space: nowrap;
}
/* Prize card (1611:6456) — full width, padding 24, gap 16, #465DA6 border. */
.ppp-hero__m-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 24px;
    background: #1C2542;
    border: 1px solid #465DA6;
    border-radius: 8px;
    box-sizing: border-box;
}
.ppp-hero__m-card-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
/* $2,000 (1611:6458) — Heading/2 30/38 Bold, teal #2FB8A9. */
.ppp-hero__m-card-total {
    margin: 0;
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
    color: #2FB8A9;
    white-space: nowrap;
}
/* Caption (1611:6459) — Base/Regular 14/22, Blue/2 #C8CEE4. */
.ppp-hero__m-card-caption {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #C8CEE4;
    white-space: nowrap;
}
/* Line 7 (1611:6460) — 1px Brand/700 #5E69A8 rule. */
.ppp-hero__m-card-divider {
    width: 100%;
    border-top: 1px solid #5E69A8;
}
.ppp-hero__m-card-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}
/* Labels — Base/Regular 14/22, Blue/2 #C8CEE4. */
.ppp-hero__m-card-label {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #C8CEE4;
    white-space: nowrap;
}
/* Values — Text sm/Semibold 14/20; #F9F9F9 default, teal for the two prizes. */
.ppp-hero__m-card-value {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #F9F9F9;
    white-space: nowrap;
}
.ppp-hero__m-card-value--teal { color: #2FB8A9; }
/* Public Recognition row (1611:6473) — fixed 136/118px columns. */
.ppp-hero__m-card-label--fixed { width: 136px; white-space: normal; }
.ppp-hero__m-card-value--fixed { width: 118px; text-align: right; white-space: normal; }

/* Facts strip — desktop Figma 6jVr7YbefLWCQjcGuvD59L 1788:9911,
 * mobile Figma Qkw1rAqYvxShVppu34QlEv 1611:6476. */

.ppp-facts--desktop { display: block; }
.ppp-facts--mobile  { display: none; }
@media (max-width: 768px) {
    .ppp-facts--desktop { display: none; }
    .ppp-facts--mobile  { display: block; }
}

.ppp-facts { font-family: 'Inter', sans-serif; }

/* Desktop section — white bg, 72px/112px padding (1788:9911). */
.ppp-facts--desktop {
    background: #FFFFFF;
    padding: 72px 112px;
}
/* 1440 − 2×112 gutters → 1216 content, four tiles gap 36. */
.ppp-facts__container {
    max-width: 1216px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 36px;
}
/* Tile — white, p12, radius 8, Shadow popover-arrow 2 2 5 #0000000D (1800:6013). */
.ppp-facts__tile {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.05);
}
/* Icon chip — Brand/25 #F6F9FF, 60px, radius 6.667 (1949:10015). */
.ppp-facts__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F6F9FF;
}
.ppp-facts--desktop .ppp-facts__chip {
    width: 60px;
    height: 60px;
    border-radius: 6.667px;
}
/* Deadline chip — Secondary/25 #F3FFFD (1949:10041). */
.ppp-facts__chip--teal { background: #F3FFFD; }
.ppp-facts__icon { display: block; }

.ppp-facts__text {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ppp-facts--desktop .ppp-facts__text { gap: 4px; }
/* Label — Text md/Regular 16/24 Gray/8 #595959 (1800:6014). */
.ppp-facts--desktop .ppp-facts__label {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #595959;
}
/* Value — Text md/Semibold 16/24 black (1800:6015). */
.ppp-facts--desktop .ppp-facts__value {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #000000;
}

/* Mobile section — white, p16, 1px Gray/4 bottom border (1611:6476). */
.ppp-facts--mobile {
    background: #FFFFFF;
    padding: 16px;
    border-bottom: 1px solid #F0F0F0;
}
/* Two centered rows, 16px apart (1611:6477 / 1611:6491). */
.ppp-facts__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.ppp-facts__row + .ppp-facts__row { margin-top: 16px; }
/* Item — fixed 128 wide, icon/text gap 8 (1611:6478). */
.ppp-facts__item {
    width: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
/* Mobile chip — 48px, radius 8 (1611:6479). */
.ppp-facts--mobile .ppp-facts__chip {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}
/* Divider — 1×24 Gray/4, round caps (1611:6484). */
.ppp-facts__divider {
    width: 1px;
    height: 24px;
    background: #F0F0F0;
    border-radius: 0.5px;
}
.ppp-facts--mobile .ppp-facts__text { gap: 2px; }
/* Label — Text xs/Regular 12/18 Gray/7 #8C8C8C (1611:6482). */
.ppp-facts--mobile .ppp-facts__label {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #8C8C8C;
}
/* Value — Text sm/Semibold 14/20 Gray/900 #181D27 (1611:6483). */
.ppp-facts--mobile .ppp-facts__value {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #181D27;
}

/* Categories "Two lenses, one mission" — desktop Figma 6jVr7YbefLWCQjcGuvD59L 1788:9985,
 * mobile Figma Qkw1rAqYvxShVppu34QlEv 1611:6505. */

.ppp-cat--desktop { display: block; }
.ppp-cat--mobile  { display: none; }
@media (max-width: 768px) {
    .ppp-cat--desktop { display: none; }
    .ppp-cat--mobile  { display: block; }
}

.ppp-cat { font-family: 'Inter', sans-serif; }

/* Desktop section — Gray/3 #F5F5F5, 72px/112px padding (1788:9985). */
.ppp-cat--desktop {
    position: relative;
    background: #F5F5F5;
    padding: 72px 112px;
    overflow: hidden;
}
/* 1440 − 2×112 gutters → 1216 content, header/cards gap 36. */
.ppp-cat__container {
    position: relative;
    max-width: 1216px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
}
/* Vectorized leaf art — 91x139 at 1184/39 and 95x128 at 1285/139 in the 1440 frame (1949:10080, 1949:10064). */
.ppp-cat__deco { position: absolute; display: block; pointer-events: none; }
.ppp-cat__deco--one { top: 39px; right: 165px; width: 91px; height: 139px; }
.ppp-cat__deco--two { top: 139px; right: 60px; width: 95px; height: 128px; }

/* Header stack — gap 24 (1788:10049). */
.ppp-cat__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
/* Eyebrow pill — Brand/50 #EBF1FF, px12 py4, r16, 14/20 Medium Brand/700 #5E69A8 (1788:10050). */
.ppp-cat__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 16px;
    background: #EBF1FF;
    mix-blend-mode: multiply;
    color: #5E69A8;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
/* Heading — Display md/Semibold 36/44, -0.72px (1788:10051). */
.ppp-cat__heading {
    margin: 0;
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: rgba(0, 0, 0, 0.88);
}
/* Sub-line — Text md/Regular 16/24 Gray/8 #595959 (1788:10052). */
.ppp-cat__sub {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #595959;
}

/* Card row — two equal cards, gap 32 (1788:9989). */
.ppp-cat__cards {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
/* Card — white, 1px Gray/4 #F0F0F0, r14, padding 24px 20px, gap 20, clipped (1788:9990). */
.ppp-cat__card {
    position: relative;
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    border-radius: 14px;
    padding: 24px 20px;
    overflow: hidden;
}
/* Lavender blob art behind card content (1788:9991 / 1788:10012). */
.ppp-cat__blob { position: absolute; pointer-events: none; }
.ppp-cat__blob img { position: absolute; display: block; max-width: none; }
.ppp-cat__blob--people {
    left: 135.81px;
    top: 289.96px;
    width: 246.503px;
    height: 246.928px;
}
.ppp-cat__blob--people img {
    left: -51.72%;
    top: -51.64%;
    width: 203.44%;
    height: 203.28%;
}
.ppp-cat__blob--planet {
    left: -147.16px;
    top: -325.93px;
    width: 625.827px;
    height: 792.641px;
}
.ppp-cat__blob--planet img {
    left: 0;
    top: 0;
    width: 115.65%;
    height: 116.58%;
}

/* Card text block — gap 16 (1788:9995). */
.ppp-cat__card-head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
/* Title row — flag + name, gap 12 (1949:7362). */
.ppp-cat__title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
/* Flag thumb — cropped PNG, 24x32 People / 21x32 Planet (1949:7360, 1949:7367). */
.ppp-cat__flag {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    height: 32px;
}
.ppp-cat__flag--people { width: 24px; }
.ppp-cat__flag--planet { width: 21px; }
.ppp-cat__flag img { position: absolute; display: block; max-width: none; }
/* Crop offsets straight from Figma image transforms. */
.ppp-cat__flag--people img { left: -76.37%; top: -41.15%; width: 252.2%; height: 288.89%; }
.ppp-cat__flag--planet img { left: -94.34%; top: -40.74%; width: 288.68%; height: 288.89%; }
/* Card title — Heading/3 24/32 Semibold, -0.72px (1788:9996). */
.ppp-cat__title {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: rgba(0, 0, 0, 0.88);
}
/* Card description — Large/Regular 16/24 Gray/8 #595959 (1788:10001). */
.ppp-cat__desc {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #595959;
}

/* Card photo — 552x288, r8 (1949:5715, 1949:5717). */
.ppp-cat__photo {
    position: relative;
    width: 100%;
    height: 288px;
    border-radius: 8px;
    overflow: hidden;
}
.ppp-cat__photo img { position: absolute; display: block; }
/* People photo keeps the Figma crop: full width, shifted up 14.24%. */
.ppp-cat__photo--people img { left: 0; top: -14.24%; width: 100%; height: 128.35%; max-width: none; }
.ppp-cat__photo--planet img { inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Prize pill — Brand/50 #EBF1FF, px12 py4, r16, Text xl 20/30 Regular #5E69A8 (1800:6083). */
.ppp-cat__prize {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 16px;
    background: #EBF1FF;
    color: #5E69A8;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
}

/* ---------- Mobile (1611:6505) ---------- */

/* Mobile section — Gray/3 #F5F5F5, padding 32px 16px, stack gap 20. */
.ppp-cat--mobile {
    background: #F5F5F5;
    padding: 32px 16px;
}
.ppp-cat__container-m {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Header stack — gap 16 (1611:6506). */
.ppp-cat__header-m {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
/* Mobile pill — px8 py2, 12/18 Medium (1611:6507). */
.ppp-cat__badge--m {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 18px;
}
/* Mobile heading — Heading/4 20/28 Bold (1611:6508). */
.ppp-cat__heading-m {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(0, 0, 0, 0.88);
}
/* Mobile sub — Base/Regular 14/22 #595959 (1611:6509). */
.ppp-cat__sub-m {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #595959;
}

/* Swipe carousel — full-bleed scroll-snap track, cards 336 / gap 16 (1611:6510). */
.ppp-cat__carousel { margin: 0 -16px; }
.ppp-cat__track {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ppp-cat__track::-webkit-scrollbar { display: none; }
/* Mobile card — 336 wide, padding 20px 16px (1611:6511). */
.ppp-cat__card--m {
    flex: 0 0 336px;
    width: 336px;
    padding: 20px 16px;
    scroll-snap-align: start;
}
/* Mobile card text block — gap 12 (1611:6516). */
.ppp-cat__card-head--m { gap: 12px; }
/* Mobile title row — gap 8, centered (1611:6517). */
.ppp-cat__title-row--m {
    align-items: center;
    gap: 8px;
}
/* Mobile flags — 21x28 (1611:6518, 1611:6530). */
.ppp-cat__flag--m { width: 21px; height: 28px; }
/* Mobile title — Large/Medium 16/24 Semibold (1611:6519). */
.ppp-cat__title--m {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
}
/* Mobile description — 14/22, 280px text box (1611:6520). */
.ppp-cat__desc--m {
    font-size: 14px;
    line-height: 22px;
    max-width: 280px;
}
/* Mobile photo keeps the 552:288 ratio (1611:6521). */
.ppp-cat__photo--m {
    height: auto;
    aspect-ratio: 552 / 288;
}
/* Mobile prize pill — px8 py2, 12/18 Medium (1611:6522). */
.ppp-cat__prize--m {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
}

/* Pagination dots — 5px circles on 12px centers, active #465DA6, idle #8C8C8C 40% (1611:6535). */
.ppp-cat__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 21px;
}
.ppp-cat__dot {
    width: 5px;
    height: 5px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #8C8C8C;
    opacity: 0.4;
    cursor: pointer;
}
.ppp-cat__dot--active {
    background: #465DA6;
    opacity: 1;
}

/* Criteria "What makes a winning story" — desktop Figma 6jVr7YbefLWCQjcGuvD59L 1788:10074,
 * mobile Figma Qkw1rAqYvxShVppu34QlEv 1611:6539. */

.ppp-crit--desktop { display: block; }
.ppp-crit--mobile  { display: none; }
@media (max-width: 768px) {
    .ppp-crit--desktop { display: none; }
    .ppp-crit--mobile  { display: block; }
}

.ppp-crit { font-family: 'Inter', sans-serif; }
/* Figma sizes are border-box (card 258 includes padding + 1px border). */
.ppp-crit, .ppp-crit * { box-sizing: border-box; }

/* ---------- Shared card building blocks ---------- */

/* Card shell — 258 high, r14, 1px Gray/4 #F0F0F0, art clipped (1788:10078). */
.ppp-crit__card {
    position: relative;
    height: 258px;
    border: 1px solid #F0F0F0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}
.ppp-crit__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ppp-crit__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Number chip — 24px circle, 12/20 Bold (1788:10081). */
.ppp-crit__num {
    flex: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
}
/* Light chip on blue cards — Brand/50 bg, Blue/6 digit (1788:10081). */
.ppp-crit__num--light { background: #EBF1FF; color: #465DA6; }
/* Dark chip on light cards — Blue/6 bg, Blue/1 digit (1788:10098). */
.ppp-crit__num--dark { background: #465DA6; color: #DADFED; }
/* Title — Huge/Medium 20/28 Semibold, heading rgba(0,0,0,.88) (1788:10100). */
.ppp-crit__title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0;
    color: rgba(0, 0, 0, 0.88);
}
.ppp-crit__title--light { color: #FFFFFF; }
/* Body — Large/Regular 16/24, Gray/8 #595959 (1788:10101). */
.ppp-crit__body {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #595959;
}
.ppp-crit__body--light { color: #FFFFFF; }

/* Decorative art layers sit above the gradient, clipped by the card. */
.ppp-crit__arrow, .ppp-crit__plant, .ppp-crit__applause,
.ppp-crit__ellipse, .ppp-crit__plant-m, .ppp-crit__applause-m { position: absolute; display: block; }

/* Star strip — 9 stars 36.1px, gap 29 (1959:2207). */
.ppp-crit__stars {
    position: absolute;
    top: 29px;
    left: calc(50% + 0.45px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 29px;
}
.ppp-crit__stars img { display: block; width: 36.1px; height: 36.1px; flex: none; }

/* ---------- Desktop (1788:10074) ---------- */

/* Section — Gray/25 #FDFDFD, 72/112 padding, 1440 − 2×112 → 1216 content. */
.ppp-crit--desktop { background: #FDFDFD; padding: 72px 112px; }
.ppp-crit__container {
    max-width: 1216px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}
/* Badge — Brand/50 pill, px12 py4 r16, 14/20 Medium Brand/700 (1788:10075). */
.ppp-crit__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 16px;
    background: #EBF1FF;
    mix-blend-mode: multiply;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #5E69A8;
}
/* Heading — Display md/Semibold 36/44, -0.72px (1788:10076). */
.ppp-crit__heading {
    margin: 0;
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: rgba(0, 0, 0, 0.88);
}
.ppp-crit__rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.ppp-crit__row {
    display: flex;
    gap: 20px;
    width: 100%;
}

/* Card 1 — flex-1, blue gradient, content 449 bottom-right (1788:10078). */
.ppp-crit__card--1 {
    flex: 1 0 0;
    min-width: 0;
    align-items: flex-end;
    padding: 20px 20px 32px 32px;
    background: linear-gradient(-37.697deg, #465DA6 21.581%, #DADFED 109.97%);
}
.ppp-crit__content--1 { width: 449px; }
/* Blurred white ellipse glow — 704 render box from 436 frame at -61/113 (1959:2200). */
.ppp-crit__ellipse { left: -195px; top: -21px; width: 704px; height: 704px; }
/* Seedling photo — visible crop of image 142 (454x303 at -91/8) (1954:2163). */
.ppp-crit__plant { left: 0; top: 8px; width: 364px; height: 249px; }

/* Card 2 — fixed 447, light gradient, arrows along the top (1788:10095). */
.ppp-crit__card--2 {
    flex: none;
    width: 447px;
    padding: 32px;
    background: linear-gradient(197.114deg, #EBF1FF 32.43%, #FFFFFF 77.567%);
}
.ppp-crit__arrow { width: 60px; height: 60px; }
.ppp-crit__arrow--30 { left: 41px; top: -6px; }
.ppp-crit__arrow--75 { left: 133px; top: 19px; }
.ppp-crit__arrow--94 { left: 241px; top: 35px; }
.ppp-crit__arrow--4 { right: 59px; top: -5px; }

/* Card 3 — fixed 504, Brand/50→white vertical gradient (1788:10116). */
.ppp-crit__card--3 {
    flex: none;
    width: 504px;
    padding: 32px;
    background: linear-gradient(180deg, #EBF1FF 0%, #FFFFFF 100%);
}

/* Card 4 — flex-1, Blue/3→Blue/6 gradient, content 398 (1788:10124). */
.ppp-crit__card--4 {
    flex: 1 0 0;
    min-width: 0;
    padding: 32px;
    background: linear-gradient(213.893deg, #B5BEDB 6.8353%, #465DA6 83.577%);
}
.ppp-crit__content--4 { width: 398px; }
/* Applause photo — image 144 (378 wide, lower 2/3 crop) at 356/19 (1959:2197). */
.ppp-crit__applause { left: 356px; top: -173.68px; width: 378px; height: 566.7px; }

/* ---------- Mobile (1611:6539) ---------- */

/* Section — white, 1px Brand/25 #F6F9FF bottom border, 32/16 padding. */
.ppp-crit--mobile {
    background: #FFFFFF;
    border-bottom: 1px solid #F6F9FF;
    padding: 32px 16px;
    flex-direction: column;
    gap: 20px;
}
/* Re-assert the gate with flex so the column gap applies (display only). */
@media (max-width: 768px) {
    .ppp-crit--mobile { display: flex; }
}
.ppp-crit__header-m {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
/* Mobile badge — px8 py2 r16, 12/18 Medium (I1611:6541). */
.ppp-crit__badge--m { padding: 2px 8px; font-size: 12px; line-height: 18px; }
/* Mobile heading — Heading/4 20/28 Bold (1611:6542). */
.ppp-crit__heading-m {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(0, 0, 0, 0.88);
}
/* Carousel track — full-bleed scroll-snap row, gap 16 (1611:6543). */
.ppp-crit__track {
    display: flex;
    gap: 16px;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ppp-crit__track::-webkit-scrollbar { display: none; }
.ppp-crit__card--m {
    flex: none;
    width: 336px;
    scroll-snap-align: start;
}
.ppp-crit__content--m { width: 100%; }
/* Mobile chip — 20px circle (1611:6547). */
.ppp-crit__num--m { width: 20px; height: 20px; }
/* Mobile title — Large/Medium 16/24 Semibold (1611:6549). */
.ppp-crit__title--m { font-size: 16px; line-height: 24px; flex: 1 1 0; min-width: 0; }
/* Mobile body — Base/Regular 14/22 (1611:6550). */
.ppp-crit__body--m { font-size: 14px; line-height: 22px; }

/* Card 1 — blue gradient, text right of the plant crop (1611:6544). */
.ppp-crit__card--m1 {
    padding: 20px 20px 20px 120px;
    background: linear-gradient(-44.155deg, #465DA6 21.288%, #DADFED 107.08%);
}
/* Seedling crop — visible part of image 142 (140x194 at -29/73.39) (1611:6551). */
.ppp-crit__plant-m { left: 0; top: 73px; width: 112px; height: 184px; }

/* Card 2 — light gradient + arrows 52.87px along the top (1611:6553). */
.ppp-crit__card--m2 {
    padding: 20px 16px;
    background: linear-gradient(204.849deg, #E0E9FF 31.658%, #FFFFFF 76.16%);
}
.ppp-crit__arrow--m30 { left: 15px; top: -5.61px; width: 52.87px; height: 52.87px; }
.ppp-crit__arrow--m75 { left: 96.07px; top: 16.42px; width: 52.87px; height: 52.87px; }
.ppp-crit__arrow--m94 { left: 191.23px; top: 30.52px; width: 52.87px; height: 52.87px; }
.ppp-crit__arrow--m4 { right: 15px; top: -4.73px; width: 52.87px; height: 52.87px; }

/* Card 3 — #E0E9FF→white gradient, star strip offset right (1611:6575). */
.ppp-crit__card--m3 {
    padding: 20px 16px;
    background: linear-gradient(180deg, #E0E9FF 0%, #FFFFFF 100%);
}
.ppp-crit__stars--m { top: 29.39px; left: calc(50% + 84.45px); }

/* Card 4 — same gradient as card 1, applause crop on the left (1611:6601). */
.ppp-crit__card--m4 {
    padding: 20px 20px 20px 120px;
    background: linear-gradient(-44.155deg, #465DA6 21.288%, #DADFED 107.08%);
}
/* Applause crop — image 145 (169x215 at -61/52.39, inner 128.72%/151.52%) (1611:6609). */
.ppp-crit__applause-m { left: -61px; top: -58.38px; width: 217.54px; height: 325.77px; }

/* Pagination dots — 336 frame, 5px dots, 12px centers, active #465DA6 (1611:6610). */
.ppp-crit__dots {
    width: 336px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.ppp-crit__dot {
    width: 5px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #8C8C8C;
    opacity: 0.4;
    cursor: pointer;
}
.ppp-crit__dot--active { background: #465DA6; opacity: 1; }

/* People & Planet Prize — Guidelines ("Everything you need to know").
 * Desktop: 6jVr7YbefLWCQjcGuvD59L 1791:2451. Mobile: Qkw1rAqYvxShVppu34QlEv 1611:6615.
 * Both variants render at all viewports; the 768px gate hides whichever doesn't fit. */

.ppp-guide--desktop { display: block; }
.ppp-guide--mobile  { display: none; }
@media (max-width: 768px) {
    .ppp-guide--desktop { display: none; }
    .ppp-guide--mobile  { display: block; }
}

/* Section — Brand/50 #EBF1FF bg (1791:2451 / 1611:6615). */
.ppp-guide {
    background: #EBF1FF;
    font-family: 'Inter', sans-serif;
}
/* Desktop frame 1440, gutters 112 → 1216 content; py 72, gap 32 between header/grid/terms. */
.ppp-guide--desktop { padding: 72px 112px; }
.ppp-guide--desktop .ppp-guide__inner {
    max-width: 1216px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Header — centered badge + heading + sub, gap 32 (1791:2872). */
.ppp-guide__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
/* "Guidelines" badge — Brand/50 pill multiplied over the section bg, 14/20 Medium Brand/700 (1791:2873). */
.ppp-guide__badge {
    mix-blend-mode: multiply;
    background: #EBF1FF;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
    color: #5E69A8;
}
/* Heading — Display md/Semibold 36/44, tracking -0.72 (1791:2874). */
.ppp-guide__heading {
    margin: 0;
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: rgba(0, 0, 0, 0.88);
}
/* Sub-line — Text xl/Regular 20/30 Gray/8, 842 wide centered (1791:2875). */
.ppp-guide__sub {
    margin: 0;
    max-width: 842px;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #595959;
}

/* Grid — 3×3 cards, 20px between cards, 32px between rows (1791:2903/2921/2974). */
.ppp-guide__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 20px;
}
/* Card — Brand/25 #F6F9FF, 1px Gray/4 border, radius 14, padding 20/20/24, gap 20 (1791:2455). */
.ppp-guide__card {
    background: #F6F9FF;
    border: 1px solid #F0F0F0;
    border-radius: 14px;
    padding: 20px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    overflow: hidden;
}
.ppp-guide__card-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Icon tile + title stack, gap 12 (1791:2457). */
.ppp-guide__card-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Icon tile — 36×36 Brand/50, radius 4, centered 20px glyph (1959:2223). */
.ppp-guide__icon-tile {
    width: 36px;
    height: 36px;
    background: #EBF1FF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ppp-guide__icon {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
}
/* Card title — 20/28 Semibold black (1791:2460). */
.ppp-guide__card-title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #000000;
}
/* Card body — 16/24 Regular Gray/8 (1791:2461). */
.ppp-guide__card-body {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #595959;
}
/* Bottom pill — Success/50 #ECFDF3, 14/20 Medium Teal/7, multiplied (1791:2879). */
.ppp-guide__pill {
    mix-blend-mode: multiply;
    background: #ECFDF3;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
    color: #269387;
}

/* Terms line — 20/30 Gray/8 centered, underlined link (1800:6054). */
.ppp-guide__terms {
    margin: 0;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #595959;
}
.ppp-guide__terms-link {
    color: #595959;
    text-decoration: underline;
}

/* ---- Mobile (Qkw1rAqYvxShVppu34QlEv 1611:6615) ---- */
/* Section — px 16, pt 32, pb 48, Gray/5 bottom rule, gap 20. */
.ppp-guide--mobile {
    padding: 32px 16px 48px;
    border-bottom: 1px solid #D9D9D9;
}
.ppp-guide--mobile .ppp-guide__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Header — left-aligned, gap 12 (1611:6616). */
.ppp-guide--mobile .ppp-guide__header {
    align-items: flex-start;
    gap: 12px;
}
/* Badge — 12/18 Medium, px 8 py 2 (1611:6617). */
.ppp-guide--mobile .ppp-guide__badge {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 18px;
}
/* Heading — Heading/4 20/28 Bold (1611:6618). */
.ppp-guide--mobile .ppp-guide__heading {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 0;
}
/* Sub — Base/Regular 14/22 (1611:6619). */
.ppp-guide--mobile .ppp-guide__sub {
    max-width: none;
    text-align: left;
    font-size: 14px;
    line-height: 22px;
}
/* Grid — 2 cols, 16px between cards, 20px between rows (1611:6620). */
.ppp-guide--mobile .ppp-guide__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
}
/* Card — padding 12, gap 10 (1611:6621). */
.ppp-guide--mobile .ppp-guide__card {
    padding: 12px;
    gap: 10px;
    overflow: visible;
}
/* Last card "Entry Limit" spans the full row (1611:6689). */
.ppp-guide--mobile .ppp-guide__card--wide { grid-column: 1 / -1; }
/* Title + body stack, gap 4 (1611:6624). */
.ppp-guide--mobile .ppp-guide__card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Card title — Base/Medium 14/22 (1611:6625). */
.ppp-guide--mobile .ppp-guide__card-title {
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.88);
}
/* Card body — Small/Regular 12/20 (1611:6626). */
.ppp-guide--mobile .ppp-guide__card-body {
    font-size: 12px;
    line-height: 20px;
}
/* Pill — 12/18 Medium, px 8 py 2 (1611:6627). */
.ppp-guide--mobile .ppp-guide__pill {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 18px;
}

/* Timeline — "How It Works" submission steps band.
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L 1791:3026, mobile Qkw1rAqYvxShVppu34QlEv 1611:6696.
 */

.ppp-timeline--desktop { display: block; }
.ppp-timeline--mobile  { display: none; }
@media (max-width: 768px) {
    .ppp-timeline--desktop { display: none; }
    .ppp-timeline--mobile  { display: block; }
}

/* Band — Blue/10 #151C32, 1px Brand/100 bottom border (both variants). */
.ppp-timeline {
    background: #151C32;
    border-bottom: 1px solid #CDD8F9;
    font-family: 'Inter', sans-serif;
}

/* ---------- Desktop (1791:3026) ---------- */

/* Stack — gap 32, 72px vertical padding, 1216px content (1440 − 2×112). */
.ppp-timeline__container {
    max-width: 1216px;
    margin: 0 auto;
    padding: 72px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

/* Badge 1791:3027 — Blue/50 pill, px12 py4 r16, Text sm/Medium #175CD3. */
.ppp-timeline__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 16px;
    background: #EFF8FF;
    color: #175CD3;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

/* Heading 1791:3028 — Display md/Semibold 36/44, tracking -0.72px, white. */
.ppp-timeline__heading {
    margin: 0;
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: #FFFFFF;
}

/* Sub 1791:3078 — Text xl/Regular 20/30, Brand/100 #CDD8F9. */
.ppp-timeline__sub {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #CDD8F9;
}

/* Step row 1791:3029 — 4 equal columns, gap 32, bottom-aligned. */
.ppp-timeline__steps {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 32px;
    width: 100%;
}

/* Track 1791:3074 — 4px #909ECA bar, r999, 1072px (72px in each side);
   bottom 10px centers it on the 24px dots. */
.ppp-timeline__track {
    position: absolute;
    left: 72px;
    right: 72px;
    bottom: 10px;
    height: 4px;
    border-radius: 999px;
    background: #909ECA;
}

/* Column — tooltip above dot, gap 32, centered. */
.ppp-timeline__step {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* Tooltip 1791:3031 — Shadow/md as drop-shadow so the arrow casts too. */
.ppp-timeline__tooltip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    filter: drop-shadow(0px 4px 4px rgba(10, 13, 18, 0.1)) drop-shadow(0px 2px 2px rgba(10, 13, 18, 0.06));
}

/* Card — Brand/25 #F6F9FF, r8, p16. */
.ppp-timeline__card {
    box-sizing: border-box;
    width: 100%;
    background: #F6F9FF;
    border-radius: 8px;
    padding: 16px;
}

/* Title — Text xl/Semibold 20/30, primary #465DA6. */
.ppp-timeline__title {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #465DA6;
}

/* Body — Text md/Regular 16/24, black, 4px under the title. */
.ppp-timeline__body {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #000000;
}

/* Inline links ("here", "us") — underlined, inherit black body color. */
.ppp-timeline__link {
    color: inherit;
    text-decoration: underline;
}

/* Arrow 1791:3036 — 16x6 slot; 25.46x13.73 svg overhangs into card + below. */
.ppp-timeline__arrow {
    position: relative;
    width: 16px;
    height: 6px;
    flex-shrink: 0;
}
.ppp-timeline__arrow svg {
    position: absolute;
    width: 25.4598px;
    height: 13.7279px;
    left: 50%;
    transform: translateX(-50%);
    top: -2.8578px;
    display: block;
}

/* Dot 1791:3039 — 24px #909ECA circle (shared with mobile). */
.ppp-timeline__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #909ECA;
    flex-shrink: 0;
}

/* ---------- Mobile (1611:6696) ---------- */

/* Stack — gap 24, padding 48px 16px. */
.ppp-timeline__container-m {
    padding: 48px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Header 1611:6697 — gap 12. */
.ppp-timeline__header-m {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* Badge 1611:6698 — px8 py2, Text xs/Medium 12/18. */
.ppp-timeline__badge--m {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 18px;
}

/* Heading 1611:6699 — Heading/4: Inter Bold 20/28, white. */
.ppp-timeline__heading-m {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #FFFFFF;
}

/* Sub 1611:6700 — Base/Regular 14/22, Brand/100 #CDD8F9. */
.ppp-timeline__sub-m {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #CDD8F9;
}

/* Steps wrapper 1611:6701 — px8, hosts the vertical track. */
.ppp-timeline__steps-m {
    position: relative;
    padding: 0 8px;
}

/* Track 1611:6719 — 4px #909ECA vertical bar, r999, on the dot centerline
   (left 18px → center x20); Figma's 470px line spans top 38 / bottom 29 at 390w. */
.ppp-timeline__track-m {
    position: absolute;
    left: 18px;
    top: 38px;
    bottom: 29px;
    width: 4px;
    border-radius: 999px;
    background: #909ECA;
}

/* Step list 1611:6702 — gap 31. */
.ppp-timeline__list-m {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 31px;
}

/* Step row — 24px dot + 16px gap + tooltip, vertically centered. */
.ppp-timeline__step-m {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Tooltip 1611:6706 — left arrow + card, Shadow/lg drop-shadow. */
.ppp-timeline__tooltip-m {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    align-items: center;
    filter: drop-shadow(0px 12px 8px rgba(10, 13, 18, 0.08)) drop-shadow(0px 4px 3px rgba(10, 13, 18, 0.03));
}

/* Arrow — 6x16 slot; 8.51x16 svg overhangs 2.51px under the card. */
.ppp-timeline__arrow-m {
    position: relative;
    width: 6px;
    height: 16px;
    flex-shrink: 0;
}
.ppp-timeline__arrow-m svg {
    position: absolute;
    width: 8.5147px;
    height: 16px;
    left: 0;
    top: 0;
    display: block;
}

/* Card — fills the row beside the arrow. */
.ppp-timeline__card--m { flex: 1 0 0; min-width: 1px; }

/* Title — Text sm/Semibold 14/20, primary #465DA6. */
.ppp-timeline__title--m {
    font-size: 14px;
    line-height: 20px;
}

/* Body — Text sm/Regular 14/20, black. */
.ppp-timeline__body--m {
    font-size: 14px;
    line-height: 20px;
}

/* People & Planet Prize — FAQ section.
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L 1791:3080, mobile Qkw1rAqYvxShVppu34QlEv 1611:6720.
 * Both variants render at all viewports; the 768px gate hides one.
 */

.ppp-faq--desktop { display: block; }
.ppp-faq--mobile  { display: none; }
@media (max-width: 768px) {
    .ppp-faq--desktop { display: none; }
    .ppp-faq--mobile  { display: block; }
}

/* Section root — white bg, Inter everywhere (1791:3080 / 1611:6720). */
.ppp-faq {
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
}

/* ---------- Shared accordion behaviour ---------- */
.ppp-faq__list {
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* Question row — reset button chrome, text left / icon right. */
.ppp-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.ppp-faq__question-text { color: #000000; }
.ppp-faq__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Closed: plus shown; open: minus shown. */
.ppp-faq__icon--minus { display: none; }
.ppp-faq__item--open .ppp-faq__icon--minus { display: inline-flex; }
.ppp-faq__item--open .ppp-faq__icon--plus { display: none; }
.ppp-faq__answer { display: none; }
.ppp-faq__item--open .ppp-faq__answer { display: block; }
.ppp-faq__answer-text { margin: 0; }

/* ---------- Desktop (1791:3080) ---------- */
/* 72px v-pad, 288px h-pad => 864 column on the 1440 frame; 44px header→list gap. */
.ppp-faq--desktop { padding: 72px 288px; }
@media (max-width: 1440px) {
    /* Keep the 864 column centered when the viewport is narrower than the frame. */
    .ppp-faq--desktop { padding-left: 24px; padding-right: 24px; }
    .ppp-faq--desktop .ppp-faq__header,
    .ppp-faq--desktop .ppp-faq__list { max-width: 864px; margin: 0 auto; }
}
/* Header — centered, 24px gaps; 44px down to the list (1791:3081). */
.ppp-faq--desktop .ppp-faq__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin-bottom: 44px;
}
/* Badge — Brand/50 pill, Text sm/Medium Brand/700 (1791:3082). */
.ppp-faq--desktop .ppp-faq__badge {
    background: #EBF1FF;
    border-radius: 16px;
    padding: 4px 12px;
    mix-blend-mode: multiply;
    color: #5E69A8;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
}
/* Heading — Display md/Semibold 36/44, tracking -0.72 (1791:3083). */
.ppp-faq--desktop .ppp-faq__heading {
    margin: 0;
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.72px;
    color: rgba(0, 0, 0, 0.88);
}
/* Sub — Text xl/Regular 20/30 Gray/7 (1791:3084). */
.ppp-faq--desktop .ppp-faq__sub {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #8C8C8C;
}
/* List — 24px between items (1791:3085). */
.ppp-faq--desktop .ppp-faq__list { gap: 24px; }
/* Item — 16px inner gap + pb, 1px Gray/6 divider (1791:3086). */
.ppp-faq--desktop .ppp-faq__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #BFBFBF;
}
/* Question — 20/28 weight 600 black (1791:3088). */
.ppp-faq--desktop .ppp-faq__question-text {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}
/* Icons — 20px frame, 14.1667 glyph incl. 2.5 stroke bleed (1791:3089). */
.ppp-faq--desktop .ppp-faq__icon { width: 20px; height: 20px; }
.ppp-faq--desktop .ppp-faq__icon-svg--plus { width: 14.1667px; height: 14.1667px; }
.ppp-faq--desktop .ppp-faq__icon-svg--minus { width: 14.1667px; height: 2.5px; }
/* Answer — Text xl/Regular 20/30 Gray/8 (1791:3090). */
.ppp-faq--desktop .ppp-faq__answer-text {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #595959;
}

/* ---------- Mobile (1611:6720) ---------- */
/* 32px v-pad, 16px side margins on the 390 frame; 24px gaps. */
.ppp-faq--mobile { padding: 32px 16px; }
/* Header — left-aligned, 12px gaps; 24px down to the list (1611:6721). */
.ppp-faq--mobile .ppp-faq__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin-bottom: 24px;
}
/* Badge — Brand/50 pill, Text xs/Medium Brand/700 (1611:6722). */
.ppp-faq--mobile .ppp-faq__badge {
    background: #EBF1FF;
    border-radius: 16px;
    padding: 2px 8px;
    mix-blend-mode: multiply;
    color: #5E69A8;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    text-align: center;
}
/* Heading — Heading/4 20/28 weight 700 (1611:6723). */
.ppp-faq--mobile .ppp-faq__heading {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(0, 0, 0, 0.88);
}
/* Sub — Text sm/Regular 14/20 Gray/7 (1611:6724). */
.ppp-faq--mobile .ppp-faq__sub {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #8C8C8C;
}
/* List — 24px between items (section gap on 1611:6720). */
.ppp-faq--mobile .ppp-faq__list { gap: 24px; }
/* Item — 12px inner gap + pb, 1px Gray/5 divider (1611:6725). */
.ppp-faq--mobile .ppp-faq__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #D9D9D9;
}
/* Question — Base/Medium 14/22 weight 600 black (1611:6726). */
.ppp-faq--mobile .ppp-faq__question-text {
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
}
/* Icons — 16px frame, 10.6667 glyph incl. 1.33333 stroke bleed (1611:6727). */
.ppp-faq--mobile .ppp-faq__icon { width: 16px; height: 16px; }
.ppp-faq--mobile .ppp-faq__icon-svg--plus { width: 10.6667px; height: 10.6667px; }
.ppp-faq--mobile .ppp-faq__icon-svg--minus { width: 10.6667px; height: 1.33333px; }
/* Answer — expanded state not in the mobile node; 14/20 Gray/8 mirrors desktop scale. */
.ppp-faq--mobile .ppp-faq__answer-text {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #595959;
}

/* CTA — "Your story could change everything" closing band.
 * Desktop Figma 6jVr7YbefLWCQjcGuvD59L 1791:3127, mobile Qkw1rAqYvxShVppu34QlEv 1611:6743.
 */

.ppp-cta--desktop { display: block; }
.ppp-cta--mobile  { display: none; }
@media (max-width: 768px) {
    .ppp-cta--desktop { display: none; }
    .ppp-cta--mobile  { display: block; }
}

/* Band — Blue/9 #1C2542, art bleeds past the right edge so clip it. */
.ppp-cta {
    position: relative;
    overflow: hidden;
    background: #1C2542;
    font-family: 'Inter', sans-serif;
}

/* Content stack — gap 24, centered; 1216px content width (1440 − 2×112). */
.ppp-cta__container {
    position: relative;
    z-index: 1;
    max-width: 1216px;
    margin: 0 auto;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
/* Mobile band 1611:6743 — padding 48px 20px, 335px stack, gap 14. */
.ppp-cta__container--mobile {
    box-sizing: content-box; /* keep the 335px stack exact beside 20px gutters */
    max-width: 335px;
    padding: 48px 20px;
    gap: 14px;
}

/* Heading — Heading/H3: Inter Bold 48/1.2, tracking -1.44px, white. */
.ppp-cta__heading {
    margin: 0;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -1.44px;
    color: #FFFFFF;
    text-align: center;
}
/* Mobile heading — 24/32 Bold, tracking -0.72px. */
.ppp-cta__heading--mobile {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.72px;
}

/* Lead — Body/xlarge: 18/1.5, tracking -0.54px, Gray/6 #BFBFBF. */
.ppp-cta__lead {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.54px;
    color: #BFBFBF;
    text-align: center;
}
/* Mobile lead — Base/Regular 14/22, Gray/5 #D9D9D9, no tracking. */
.ppp-cta__lead--mobile {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    color: #D9D9D9;
}

/* Button row — gap 24 desktop. */
.ppp-cta__buttons { display: flex; gap: 24px; align-items: flex-start; }
/* Mobile row — gap 16, buttons share the 335px width. */
.ppp-cta__buttons--mobile { gap: 16px; width: 100%; }

/* Buttons — Text md/Semibold 16/24, px20 py12, radius 8, Shadow/xs. */
.ppp-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    white-space: nowrap;
    transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
/* Mobile buttons — Text sm/Semibold 14/20, px16 py10, equal widths. */
.ppp-cta__button--mobile {
    flex: 1 0 0;
    min-width: 1px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
}
/* Primary — Brand/600 #465DA6 fill + border, white label. */
.ppp-cta__button--primary {
    background: #465DA6;
    border-color: #465DA6;
    color: #FFFFFF;
}
.ppp-cta__button--primary:hover { background: #38489E; border-color: #38489E; color: #FFFFFF; }
/* Secondary — white fill, Gray/300 #D5D7DA border, Gray/700 #414651 label. */
.ppp-cta__button--secondary {
    background: #FFFFFF;
    border-color: #D5D7DA;
    color: #414651;
}
.ppp-cta__button--secondary:hover { border-color: #465DA6; color: #465DA6; }

/* Stewardship logo art — 293x489 crop at right -50px, 5% opacity (1791:3127). */
.ppp-cta__art {
    position: absolute;
    top: 0;
    right: -50px;
    width: 293px;
    height: 489px;
    opacity: 0.05;
    overflow: hidden;
    pointer-events: none;
}
/* Wide logomark scaled to crop height; left edge of the mark shows. */
.ppp-cta__art img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 610.28%;
    max-width: none;
}
/* Mobile art — 149x249 crop at right -25px, 6% opacity (1611:6743). */
.ppp-cta__art--mobile {
    right: -25px;
    width: 149px;
    height: 249px;
    opacity: 0.06;
}