/*
 * Pre-order App Round-up
 * Visual language of the competitor alternative pages (competitor-alt-page): the dark
 * black → #29165E hero, cream (#efeee9) and sand (#e8e7e2) bands, frosted white cards with
 * 3px corners, the dark-purple comparison band and the green-to-purple closing band.
 * Root font size is 10px (theme), so 1.6rem = 16px.
 * No scroll-reveal, no load-in animation: everything renders in place.
 */

.ppr,
.ppr-faq,
.ppr-video {
    --ppr-cream: #efeee9;
    --ppr-sand: #e8e7e2;
    --ppr-ink: var(--dark-purple, #29165e);
    --ppr-body: var(--dark-grey, #3d464d);
    --ppr-muted: var(--bluey-grey, #667280);
    --ppr-line: rgba(41, 22, 94, 0.12);
    --ppr-gutter: 20px;
    color: var(--ppr-body);
}

body:has(.ppr) {
    background-color: #efeee9;
}

/* The theme's add_ids_to_headings DOMDocument round trip leaves the shortcode output inside a <p>,
   which the browser splits into an empty <p> before the block (and one after the stray </p>).
   The alt pages hide the same artefact with their own rule. */
body:has(.ppr) .entry-content > p:empty {
    display: none;
}

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

.ppr p {
    margin: 0 0 1.4rem;
    font-size: 1.7rem;
    line-height: 1.65;
}
.ppr p:last-child {
    margin-bottom: 0;
}
/* Inline links: no rule here on purpose. The theme's global a / a:hover (style.css) styles them,
   so they render exactly as blog body links: dark purple underlined, mid purple without the
   underline on hover. */
.ppr strong {
    color: var(--ppr-ink);
}

.ppr [id] {
    scroll-margin-top: 100px;
}

.ppr-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Layout ---------- */

.ppr-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--ppr-gutter);
}
.ppr-container--narrow {
    max-width: 800px;
}
.ppr-container--wide {
    max-width: 1320px;
}

.ppr-section {
    padding: 72px 0;
}
@media (min-width: 1024px) {
    .ppr-section {
        padding: 96px 0;
    }
}
.ppr-section--cream {
    background: var(--ppr-cream);
}
.ppr-section--sand {
    background: var(--ppr-sand);
}
.ppr-section--dark {
    background: var(--dark-purple, #29165e);
    color: rgba(231, 227, 255, 0.8);
}

.ppr .ppr-section__head {
    display: block; /* a global header rule makes <header> a flex row */
    max-width: 820px;
    margin: 0 auto 40px;
    text-align: center;
}
.ppr .ppr-h2 {
    margin: 0 0 16px;
    color: var(--ppr-ink);
    font-size: clamp(3rem, 4.2vw, 4.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.ppr .ppr-lead {
    margin: 0;
    font-size: 1.9rem;
    color: var(--ppr-body);
}
.ppr .ppr-h3 {
    margin: 0 0 12px;
    color: var(--ppr-ink);
    font-size: clamp(2rem, 2.2vw, 2.4rem);
    font-weight: 700;
    line-height: 1.25;
}
.ppr .ppr-after {
    max-width: 820px;
    margin: 32px auto 0;
    text-align: center;
    font-size: 1.6rem;
    color: var(--ppr-muted);
}

.ppr-section--dark .ppr-h2 {
    color: #fff;
}
.ppr-section--dark .ppr-lead,
.ppr-section--dark .ppr-after {
    color: rgba(231, 227, 255, 0.75);
}
.ppr-section--dark a {
    color: var(--lilac, #e7e3ff);
}

/* Number badge shared by glance cards, criteria and picks */
.ppr-num {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--mid-purple, #5e4c92);
}

/* Frosted card, as .glass-cream on the alt pages */
.ppr-glance__card,
.ppr-criterion,
.ppr-pick,
.ppr-card,
.ppr-choose__item,
.ppr-mistake {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--ppr-line);
    border-radius: 3px;
}

/* ---------- Buttons and "more" links (the site's own components) ----------
   CSS only, so post 9443 (which hard-codes this markup) picks it up too. Values are copied
   from, not loaded from, the site components; keep them in step if those change:
   - .ppr-btn--light / --dark = .blocks-hero__primary--custom (blocks_hero/css/hero.css),
     the pill CTA on the hero (light = the agency page's white CTA, dark = the component's
     default darkest-purple fill).
   - .ppr-btn--glass and .ppr-glance__link = .blocks-content-col__more
     (blocks_partials/css/content-column.css).
   The arrow is the same 16x16 SVG path both components inline, drawn here as a mask over
   the existing ↓ / → glyph spans. Arrows on in-page (#) links point down. */

.ppr {
    --ppr-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.175 9H0V7h12.175l-5.6-5.6L8 0l8 8-8 8-1.425-1.4L12.175 9V9'/%3E%3C/svg%3E");
}

.ppr .ppr-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 17px 30px 18px;
    border: 2px solid;
    border-radius: 9999px;
    box-shadow:
        0 20px 25px -5px rgba(19, 0, 65, 0.2),
        0 8px 10px -6px rgba(19, 0, 65, 0.2);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: left;
    text-decoration: none;
}
@media (min-width: 768px) {
    .ppr .ppr-btn {
        padding: 18px 34px 19px;
        font-size: 17px;
    }
}
@media (max-width: 420px) {
    .ppr .ppr-btn {
        padding: 15px 22px 16px;
        gap: 10px;
        font-size: 15px;
    }
}
.ppr .ppr-btn--light {
    background: #fff;
    border-color: #fff;
    color: #130041;
}
.ppr .ppr-btn--light:hover,
.ppr .ppr-btn--light:focus-visible {
    color: var(--mid-purple, #5e4c92);
}
.ppr .ppr-btn--dark,
.ppr .ppr-btn--dark:hover,
.ppr .ppr-btn--dark:focus-visible {
    background: var(--darkest-purple, #130041);
    border-color: var(--darkest-purple, #130041);
    /* The site's pill takes the theme's mid-purple a:hover colour, which is unreadable on
       the dark fill, so the label stays white and only the arrow moves. */
    color: #fff;
}

.ppr .ppr-btn__arrow,
.ppr .ppr-glance__link > span[aria-hidden],
.ppr .ppr-btn--glass::after {
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 16px;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask: var(--ppr-arrow) center / contain no-repeat;
    mask: var(--ppr-arrow) center / contain no-repeat;
    transition: transform 0.15s ease;
}
.ppr .ppr-btn:hover .ppr-btn__arrow,
.ppr .ppr-btn:focus-visible .ppr-btn__arrow {
    transform: translateX(10px);
}
.ppr a[href^="#"] .ppr-btn__arrow {
    transform: rotate(90deg);
}
.ppr a[href^="#"]:hover .ppr-btn__arrow,
.ppr a[href^="#"]:focus-visible .ppr-btn__arrow {
    transform: rotate(90deg) translateX(10px);
}

/* Secondary: the content column's "more" link. Lilac on the dark hero, where the site's
   #5e4c92 would not read. */
.ppr .ppr-btn.ppr-btn--glass,
.ppr .ppr-glance__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    text-decoration: none;
}
@media (min-width: 768px) {
    .ppr .ppr-btn.ppr-btn--glass,
    .ppr .ppr-glance__link {
        font-size: 16px;
    }
}
.ppr .ppr-btn.ppr-btn--glass {
    color: var(--lilac, #e7e3ff);
}
.ppr .ppr-btn.ppr-btn--glass:hover,
.ppr .ppr-btn.ppr-btn--glass:focus-visible {
    color: #fff;
}
.ppr .ppr-btn--glass::after {
    content: "";
    width: 14px;
    height: 14px;
    transform: rotate(90deg);
}
.ppr .ppr-glance__link > span[aria-hidden] {
    width: 14px;
    height: 14px;
    transform: rotate(90deg);
}
.ppr .ppr-btn--glass:hover::after,
.ppr .ppr-btn--glass:focus-visible::after,
.ppr .ppr-glance__link:hover > span[aria-hidden],
.ppr .ppr-glance__link:focus-visible > span[aria-hidden] {
    transform: rotate(90deg) translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
    .ppr .ppr-btn__arrow,
    .ppr .ppr-glance__link > span[aria-hidden],
    .ppr .ppr-btn--glass::after {
        transition: none;
    }
}

/* ---------- Hero ---------- */

.ppr-hero {
    position: relative;
    overflow: hidden;
    padding: 136px 0 56px;
    background: linear-gradient(135deg, #000 0%, #29165e 50%, #000 100%);
    color: rgba(231, 227, 255, 0.85);
    text-align: center;
}
@media (min-width: 1024px) {
    .ppr-hero {
        padding: 168px 0 72px;
    }
}
/* Static glows (the alt pages float theirs; these do not move) */
.ppr-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    pointer-events: none;
}
.ppr-hero__glow--a {
    top: 60px;
    left: -80px;
    width: 380px;
    height: 380px;
    background: rgba(240, 190, 253, 0.12);
}
.ppr-hero__glow--b {
    bottom: -60px;
    right: -60px;
    width: 320px;
    height: 320px;
    background: rgba(255, 191, 218, 0.12);
}
.ppr-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1000px;
}
.ppr .ppr-hero__h1 {
    margin: 0 auto 24px;
    max-width: 920px;
    color: #fff;
    font-size: clamp(3.6rem, 6vw, 7.2rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
}
/* {{accent}} word in the H1 ("Pre-order", "Backorder"): lilac (deposit) to white, left to
   right across the word. Solid lilac where background-clip: text isn't supported.
   box-decoration-break: clone gives each line its own full gradient if the word wraps. */
.ppr .ppr-accent {
    color: var(--deposit, #dcbbf5);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ppr .ppr-accent {
        background-image: linear-gradient(90deg, var(--deposit, #dcbbf5), #fff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
}
.ppr .ppr-hero__lede {
    max-width: 760px;
    margin: 0 auto 32px;
    font-size: clamp(1.7rem, 1.6vw, 2rem);
    color: rgba(231, 227, 255, 0.85);
}
.ppr-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 32px;
    margin-bottom: 24px;
}
.ppr .ppr-hero__video {
    margin: 0 0 40px;
    font-size: 1.5rem;
    color: rgba(231, 227, 255, 0.7);
}
.ppr .ppr-hero__video a {
    color: var(--salmon, #ffbfda);
}

.ppr-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(231, 227, 255, 0.15);
}
.ppr-jump__label {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(231, 227, 255, 0.55);
}
.ppr-jump__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ppr .ppr-jump__list a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgba(231, 227, 255, 0.2);
    border-radius: 3px;
    font-size: 1.4rem;
    color: rgba(231, 227, 255, 0.85);
    text-decoration: none;
}
.ppr .ppr-jump__list a:hover {
    background: rgba(231, 227, 255, 0.1);
    color: #fff;
}

/* ---------- Intro ---------- */

.ppr .ppr-prose {
    font-size: 1.9rem;
    line-height: 1.7;
    color: var(--ppr-body);
}

/* ---------- App Store icons, beside each app's name ---------- */

.ppr-app {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    vertical-align: middle;
}
/* Table header: icon above the name, so a column is only as wide as its name */
.ppr-app--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
/* Rounded square as the App Store draws them (corner ~22% of the side) */
.ppr-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(41, 22, 94, 0.1);
}
.ppr-icon--md {
    width: 40px;
    height: 40px;
    border-radius: 9px;
}
.ppr-icon--sm {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}
.ppr .ppr-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Purple Dot has no App Store icon any more: its white wordmark (6.4:1) on a dark tile the
   same height as the icons, widened to the wordmark so it stays legible */
.ppr-icon--on-dark {
    width: auto;
    padding: 0 9px;
    background: var(--darkest-purple, #221d43);
}
.ppr .ppr-icon--on-dark img {
    width: auto;
    height: 12px;
    object-fit: contain;
}
.ppr .ppr-icon--sm.ppr-icon--on-dark {
    padding: 0 7px;
}
.ppr .ppr-icon--sm.ppr-icon--on-dark img {
    height: 9px;
}
.ppr-section--dark .ppr-icon {
    box-shadow: 0 0 0 1px rgba(231, 227, 255, 0.2);
}

/* ---------- TL;DR glance cards ---------- */

.ppr-glance {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    .ppr-glance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .ppr-glance {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}
.ppr-glance__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
}
/* Number and use case share one line (glance cards and pick sidebar); the use case wraps under itself, not under the number */
.ppr-numline {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.ppr-numline .ppr-num {
    flex: none;
    margin-bottom: 0;
}
.ppr .ppr-glance__use {
    margin: 0;
    min-width: 0; /* lets the flex child shrink so the ellipsis can kick in */
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ppr-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ppr .ppr-glance__app {
    margin: 0 0 16px;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--ppr-ink);
}
.ppr-facts {
    margin: 0 0 20px;
    border-top: 1px solid var(--ppr-line);
}
.ppr-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ppr-line);
    font-size: 1.5rem;
    line-height: 1.4;
}
.ppr-facts dt {
    color: var(--ppr-muted);
    font-weight: 500;
}
.ppr-facts dd {
    margin: 0;
    color: var(--ppr-ink);
    font-weight: 600;
    text-align: right;
}
/* Type and arrow come from the "more" link rules under Buttons. */
.ppr .ppr-glance__link {
    align-self: flex-start;
    margin-top: auto;
    color: #5e4c92;
}
.ppr .ppr-glance__link:hover,
.ppr .ppr-glance__link:focus-visible {
    color: #130041;
}

/* ---------- How we evaluated ---------- */

.ppr-criteria {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ppr-criterion {
    display: grid;
    gap: 24px;
    padding: 24px;
    /* Solid white, not the shared frosted card fill, so the card runs into the
       clips' white backgrounds (Oli, 2026-10-08). Other frosted cards unchanged. */
    background: #fff;
}
@media (min-width: 1024px) {
    .ppr-criterion {
        padding: 40px;
    }
    /* Text 2/3, media 1/3, media centred against the text (Oli, 2026-10-08).
       minmax(0, …) lets the text column shrink past its longest word. */
    .ppr-criterion--media {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: center;
        gap: 48px;
    }
    .ppr-criterion:not(.ppr-criterion--media) .ppr-criterion__text {
        max-width: 760px;
    }
}
.ppr-criterion__media {
    margin: 0;
    text-align: center;
}
/* 2:1 clip (feature-media cards are 800x400). The slot holds the ratio before the
   poster or first frame arrives, so nothing shifts when it starts playing. */
.ppr-video-clip {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border: 1px solid var(--ppr-line);
    border-radius: 3px;
    background: #fff;
}
.ppr-shot {
    display: inline-block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ppr-line);
    border-radius: 3px;
    background: #fff;
}

/* ---------- Picks by use case ---------- */

.ppr-picks {
    display: grid;
    gap: 16px;
}
.ppr-pick {
    display: grid;
    gap: 20px;
    padding: 24px;
}
@media (min-width: 1024px) {
    .ppr-pick {
        grid-template-columns: 280px 1fr;
        gap: 48px;
        padding: 40px;
    }
}
.ppr-pick__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
@media (min-width: 1024px) {
    .ppr-pick__meta {
        padding-right: 40px;
        border-right: 1px solid var(--ppr-line);
    }
}
.ppr-pick__meta .ppr-numline {
    margin-bottom: 16px;
}
.ppr .ppr-pick__use {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ppr-muted);
}
.ppr .ppr-pick__app {
    margin: 0 0 16px;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ppr-ink);
}
.ppr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ppr-chips li {
    padding: 4px 10px;
    border-radius: 3px;
    background: var(--lilac, #e7e3ff);
    color: var(--ppr-ink);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ---------- App cards ---------- */

.ppr-cards {
    display: grid;
    gap: 16px;
}
@media (min-width: 768px) {
    .ppr-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        align-items: start;
    }
}
.ppr-card {
    padding: 24px;
}
@media (min-width: 1024px) {
    .ppr-card {
        padding: 32px;
    }
}
.ppr .ppr-card p {
    font-size: 1.6rem;
}
.ppr .ppr-card__cta {
    margin-top: 20px;
}

/* ---------- Comparison table (dark band, as the alt pages' comparison section) ---------- */

.ppr-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(231, 227, 255, 0.12);
    border-radius: 3px;
    -webkit-overflow-scrolling: touch;
}
.ppr-table-wrap:focus-visible {
    outline: 2px solid var(--salmon, #ffbfda);
    outline-offset: 2px;
}
.ppr-table {
    width: 100%;
    min-width: 1040px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1.5rem;
    line-height: 1.4;
}
.ppr-table th,
.ppr-table td {
    padding: 16px 14px;
    border: 0;
    border-bottom: 1px solid rgba(231, 227, 255, 0.1);
    text-align: left;
    vertical-align: top;
}
.ppr-table thead th {
    background: var(--darkest-purple, #221d43);
    color: #fff;
    font-weight: 700;
    vertical-align: bottom;
}
.ppr-table tbody tr:nth-child(odd) th,
.ppr-table tbody tr:nth-child(odd) td {
    background: var(--darkest-purple, #221d43);
}
.ppr-table tbody tr:nth-child(even) th,
.ppr-table tbody tr:nth-child(even) td {
    background: var(--dark-purple, #29165e);
}
.ppr-table tbody tr:last-child th,
.ppr-table tbody tr:last-child td {
    border-bottom: 0;
}
/* Sticky feature column so rows stay readable while the table scrolls sideways */
.ppr-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 170px;
    max-width: 220px;
    color: #fff;
    font-weight: 700;
    box-shadow: 1px 0 0 rgba(231, 227, 255, 0.12);
}
.ppr-cell__inner {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
}
.ppr-cell svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}
.ppr-cell--yes {
    color: #7fd3c3;
}
.ppr-cell--no {
    color: #f19a9a;
}
.ppr-cell--partial {
    color: #ffe476;
}
.ppr-cell--text {
    color: rgba(231, 227, 255, 0.85);
}

/* ---------- How to choose ---------- */

.ppr-choose {
    display: grid;
    gap: 16px;
}
@media (min-width: 768px) {
    .ppr-choose {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}
@media (min-width: 1024px) {
    .ppr-choose {
        grid-template-columns: repeat(3, 1fr);
    }
}
.ppr-choose__item {
    padding: 24px;
    border-top: 3px solid var(--mid-purple, #5e4c92);
}

/* ---------- Common mistakes (alt pages' pain-point cards) ---------- */

.ppr-mistakes {
    display: grid;
    gap: 16px;
}
@media (min-width: 1024px) {
    .ppr-mistakes {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}
.ppr-mistake {
    padding: 24px;
}
@media (min-width: 1024px) {
    .ppr-mistake {
        padding: 32px;
    }
}
.ppr-mistake__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}
.ppr-mistake__head .ppr-h3 {
    margin: 0;
}
.ppr-mistake__icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 3px;
    background: rgba(172, 72, 72, 0.1);
    color: var(--no, #ac4848);
}
.ppr-mistake__icon svg {
    width: 26px;
    height: 26px;
}

/* ---------- FAQ (post_content wp:html items, wrapped in a .ppr-faq group) ---------- */

.ppr-faq {
    max-width: none !important;
    margin: 0 !important;
    padding: 72px var(--ppr-gutter) !important;
    background: var(--ppr-cream);
}
@media (min-width: 1024px) {
    .ppr-faq {
        padding: 96px var(--ppr-gutter) !important;
    }
}
.ppr-faq > * {
    max-width: 1160px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.ppr-faq h2.ppr-faq__heading {
    margin-bottom: 32px;
    color: var(--dark-purple, #29165e);
    font-size: clamp(3rem, 4.2vw, 4.6rem);
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    scroll-margin-top: 100px;
}
.ppr-faq .faq-details {
    background: transparent;
}
.ppr-faq .wp-block-group.border {
    background: rgba(255, 255, 255, 0.7);
}

/* ---------- Final pick (alt pages' closing band) ---------- */

.ppr-final {
    padding: 80px 0;
    background: var(--green-to-purple, #e7e3ff);
    text-align: center;
}
@media (min-width: 1024px) {
    .ppr-final {
        padding: 112px 0;
    }
}
.ppr-final .ppr-prose {
    color: var(--dark-grey, #3d464d);
}
.ppr-final__cta {
    margin-top: 32px;
}
.ppr .ppr-final__note {
    margin-top: 16px;
    font-size: 1.5rem;
    color: var(--dark-grey, #3d464d);
}

/* ---------- Video (post_content group, wrapped in .ppr-video) ---------- */

.ppr-video {
    max-width: none !important;
    margin: 0 !important;
    padding: 72px var(--ppr-gutter) !important;
    background: var(--ppr-sand); /* not dark purple: it would run straight into the footer */
}
.ppr-video > * {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.ppr-video .wp-block-embed {
    margin: 0;
}

/* The closing YouTube embed lives in post_content, outside .ppr: centre its 640px iframe in the
   wider wrapper. Scoped with :has(.ppr) so other pages' embeds are untouched. */
body:has(.ppr) .wp-block-embed__wrapper {
    display: flex;
    justify-content: center;
}