/* ── The front page ──
   Rendered from inc/page-home.php. Plan: roadmaps/Implemented/homepage-redesign.md.

   ONE GRID, as on /educators/. Every section is a full-width band (the root
   carries `alignfull`), and every section's content sits on `.pp-home-grid`
   inside it, so the whole page shares one left edge whatever its bands do.

   ONE BREAKPOINT, the tablet one. Up to `1024px` (phones and every tablet
   in portrait) every section is stacked in one centred column (below, > The
   stacked column); from `1025px` the sections take their side-by-side
   layouts. At 820px the two-column layouts left about 370px a column, too
   cramped, and the header turns to its mobile version at that width anyway.
   Comments below say "phone" and "desktop" for the two sides of it.

   Values follow STYLING.md. Selectors are this page's own (> Component
   Selectors). */

/* The root fills the content area, so the theme's constrained-layout padding
   no longer applies and the gutter belongs to the grid: `16px`, the documented
   side gutter. */
.pp-home-grid {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
}

/* The documented outer breathing-room clamp, top and bottom, so a band that
   takes a fill later carries its own room inside it. The page carries
   Blocksy's `content_area_spacing: none`, so nothing else spaces the first
   section from the header. */
.pp-home-section {
    padding: clamp(32px, 5vw, 64px) 0;
}

.pp-home-h {
    margin: 0 0 16px;
}

/* ── Call to action ──
   The /educators/ hero CTA's values, under this page's own class: accent fill,
   #fff label (rule 7), 8px control radius, the provisional `12px 24px` for a
   CTA that owns a page (STYLING.md > Spacing), and the Resting / Hover lift
   shadow tiers. */
.pp-home-cta {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    background: var(--theme-palette-color-5);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    /* A sign-up, so caps: the same action as the header's JOIN NOW and the
       plan cards' START FREE (STYLING.md > A page CTA on a light ground). */
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(var(--pp-steel-7-rgb), 0.08);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.pp-home-cta:hover,
.pp-home-cta:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-home-cta:focus-visible {
    outline: 2px solid var(--pp-focus-ring);
    outline-offset: 2px;
}

/* The same CTA on a dark ground (the hero). No shadow: every tier is a
   steel-7 shadow, invisible there, so the fill does the separating and hover
   is the lift alone. The standard ring is all but invisible too: a 2px stroke
   in the ground's prominent tone instead (STYLING.md > Native surfaces on a
   dark ground). */
.pp-home-cta--on-dark,
.pp-home-cta--on-dark:hover,
.pp-home-cta--on-dark:focus {
    box-shadow: none;
}

.pp-home-cta--on-dark:focus-visible {
    outline-color: var(--theme-palette-color-8);
}

/* ── Hero ──
   The café video full width, the copy on its right half, where it covers
   neither the man in the first shots nor his face in the close-up (see
   pp_home_hero()). The ground under everything is `--theme-palette-color-4`,
   the colour the old hero used, so the band reads dark before the poster
   arrives and the phone layout's copy sits on it directly.

   Text is the dark-ground set from STYLING.md > Attention surface: `#fff`,
   and `rgba(255, 255, 255, 0.9)` for anything secondary. */
.pp-home-section--hero {
    padding: 0;
}

.pp-home-hero {
    position: relative;
    overflow: hidden;
    background: var(--theme-palette-color-4);
}

.pp-home-hero__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-home-hero__grid {
    position: relative;
    padding-top: clamp(32px, 5vw, 64px);
    padding-bottom: clamp(32px, 5vw, 64px);
}

.pp-home-hero__title {
    margin: 0 0 16px;
    color: #fff;
    text-wrap: balance;
}

.pp-home-hero__lead {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.9);
}

/* At every width the call to action spans the copy column, as wide as the
   paragraph above it, with the note centred under it as small print and the
   store row (the slot's content, whatever its width) centred under that. */
.pp-home-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: center;
}

.pp-home-hero__note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

.pp-home-hero__after {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* Desktop, from the tablet breakpoint up (laptops, and tablets in
   landscape): the video fills the band and the copy sits over its right half.
   Below it, every tablet in portrait included, the band would be close to
   square: the crop closes in on the man, the copy covers him and the scrim
   darkens most of the scene, so those widths take the stacked layout below.

   Values recorded in STYLING.md > A hero over a looping video:
   - Band height `clamp(480px, 72vh, 720px)`: tall enough for the video to
     read as a scene rather than a strip, short enough that the next section
     shows its top on a laptop screen.
   - The scrim: `--pp-steel-7-rgb` (the documented overlay channel) at `0.88`
     on the right edge, `0.72` at 40% in, clear by 75%. The copy column spans
     roughly the right 40%, so it always sits on 0.7 or more, and the left
     quarter, where the man is, is untouched. */
@media (min-width: 1025px) {
    .pp-home-hero {
        display: flex;
        align-items: center;
        min-height: clamp(480px, 72vh, 720px);
    }

    .pp-home-hero__media {
        position: absolute;
        inset: 0;
    }

    .pp-home-hero__media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to left,
            rgba(var(--pp-steel-7-rgb), 0.88) 0%,
            rgba(var(--pp-steel-7-rgb), 0.72) 40%,
            rgba(var(--pp-steel-7-rgb), 0) 75%
        );
    }

    .pp-home-hero__grid {
        width: 100%;
    }

    /* The panel text measure (STYLING.md > A promotion card on a dashboard). */
    .pp-home-hero__copy {
        max-width: 480px;
        margin-left: auto;
    }

    /* Over the video, the CTA lets the scene through: the accent channel at
       `0.85`, turning solid on hover and focus. It always sits on the scrim
       (0.7 or more steel-7), so the composite is darker than the accent and
       the white label keeps its contrast. Stacked, it sits on the solid
       ground, where translucency would only dull it, so it stays solid. */
    .pp-home-cta--over-video {
        background: rgba(var(--pp-accent-rgb), 0.85);
        transition: background-color 0.18s ease, transform 0.18s ease;
    }

    .pp-home-cta--over-video:hover,
    .pp-home-cta--over-video:focus {
        background: var(--theme-palette-color-5);
    }
}

/* Phone and tablet: the video is a 16:9 band with nothing over it, and the
   copy follows on the dark ground, centred at the `480px` panel measure (on
   a phone narrower than that, the full column). */
@media (max-width: 1024px) {
    .pp-home-hero__media {
        aspect-ratio: 16 / 9;
    }

    .pp-home-hero__copy {
        max-width: 480px;
        margin: 0 auto;
    }

    .pp-home-cta {
        display: block;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-home-cta,
    .pp-home-cta--over-video {
        transition: none;
    }
}

/* ── Proof strip ──
   Four stat cells on a light band right under the dark hero: `--pp-steel-1`,
   the full-width band tint /educators/ already uses, with the `24px` section
   step above and below rather than the section clamp, since it is one row.

   Each cell is a figure over a label. The figure takes `24px` / `700`, the
   scorecard's big-figure size (STYLING.md > A light card whose colour sits in
   one object), in `--pp-steel-7`; the label is secondary UI text, `0.85rem`
   in `--pp-steel-5`. Cells are divided by the standard hairline. No count-up
   or other motion: the figure's size is what makes it read as a figure. */
.pp-home-section--proof {
    padding: 24px 0;
    background: var(--pp-steel-1);
}

/* Columns follow the cell count, so a dropped cell leaves three equal ones
   rather than a gap. */
.pp-home-proof {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.pp-home-proof__item {
    margin: 0;
    padding: 0 16px;
}

.pp-home-proof__item + .pp-home-proof__item {
    border-left: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-home-proof__figure {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pp-steel-7);
}

.pp-home-proof__label {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--pp-steel-5);
}

/* Phone: two by two, without dividers, which would sit at odd places once the
   cells wrap. */
@media (max-width: 1024px) {
    .pp-home-proof {
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr;
        gap: 16px 0;
    }

    .pp-home-proof__item + .pp-home-proof__item {
        border-left: 0;
    }
}

/* ── Library ──
   Three blocks, placed by grid area. Desktop: the copy and the list stacked
   on the left, centred as one block against the mosaic on the right, `32px`
   apart (the wide-surface step, STYLING.md > Spacing); the two empty `1fr`
   rows do the centring. Phone: copy, mosaic, list, which is the source order,
   with `24px` between them. */
.pp-home-library {
    display: grid;
    grid-template-areas:
        "intro"
        "mosaic"
        "list";
    row-gap: 24px;
}

.pp-home-library__intro {
    grid-area: intro;
}

.pp-home-library__body {
    margin: 0;
}

.pp-home-mosaic {
    grid-area: mosaic;
}

.pp-home-paths {
    grid-area: list;
}

@media (min-width: 1025px) {
    .pp-home-library {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas:
            ".     mosaic"
            "intro mosaic"
            "list  mosaic"
            ".     mosaic";
        column-gap: 32px;
        row-gap: 0;
        align-items: center;
    }
}

/* The mosaic: one composite image, so the treatment of the app's Listen
   mosaic (STYLING.md > Native surfaces on a dark ground): the card radius,
   `14px`, as a clip on the whole, `4px` gaps between tiles. Two columns of the
   illustrations' own 16:9, which makes the composite close to square. */
.pp-home-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 14px;
    overflow: hidden;
}

.pp-home-mosaic__tile {
    margin: 0;
}

.pp-home-mosaic__link {
    display: block;
    line-height: 0;
}

.pp-home-mosaic__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Inside the clip the ring has to sit inside the tile, or the composite's
   corners and the neighbouring tiles would cut it off. */
.pp-home-mosaic__link:focus-visible {
    outline: 2px solid var(--pp-focus-ring);
    outline-offset: -2px;
}


/* The content types: three rows under the paragraph, divided by the standard
   hairline. Each row is one link: icon, title and count on the first line,
   the description under the title. Icon, title and count take the accent,
   which is what marks the row as a link without a card around it.

   Hover is the neutral row tint (STYLING.md > Tints: hover vs. active), so
   the row carries `12px` of side padding inside a matching negative margin:
   the tint gets room, and the text still lines up with the paragraph. */
.pp-home-paths {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Desktop: the list sits under the paragraph in the same column, `24px`
   below it (on a phone the grid's row gap does it). After the reset above,
   which would otherwise override it. */
@media (min-width: 1025px) {
    .pp-home-paths {
        margin-top: 24px;
    }
}

.pp-home-path__item {
    margin: 0;
    border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-home-path__item:last-child {
    border-bottom: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-home-path {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas:
        "icon title cue"
        ".    desc  desc";
    column-gap: 12px;
    align-items: center;
    margin: 0 -12px;
    padding: 16px 12px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.18s ease;
}

.pp-home-path:hover {
    color: inherit;
    background: rgba(var(--pp-steel-7-rgb), 0.05);
}

.pp-home-path:focus-visible {
    outline: 2px solid var(--pp-focus-ring);
    outline-offset: -2px;
}

.pp-home-path__icon {
    grid-area: icon;
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: var(--theme-palette-color-5);
}

.pp-home-path__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

/* A title that is itself the link: accent (STYLING.md > Card titles are UI
   chrome). */
.pp-home-path__title {
    grid-area: title;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-palette-color-5);
}

.pp-home-path__cue {
    grid-area: cue;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-palette-color-5);
}

.pp-home-path__cue svg {
    width: 15px;
    height: 15px;
    transition: transform 0.18s ease;
}

.pp-home-path:hover .pp-home-path__cue svg {
    transform: translateX(2px);
}

.pp-home-path__desc {
    grid-area: desc;
    margin-top: 4px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--pp-steel-5);
}

@media (prefers-reduced-motion: reduce) {
    .pp-home-path,
    .pp-home-path__cue svg {
        transition: none;
    }

    .pp-home-path:hover .pp-home-path__cue svg {
        transform: none;
    }
}

/* ── A phone frame ──
   A real app screenshot inside a phone drawn in CSS (STYLING.md > A phone
   frame): an `8px` bezel in `--theme-palette-color-4`, the site's dark
   ground, with concentric corners, `32px` outside and `24px` on the display,
   and the Card shadow tier. The frame takes its width from its container.

   The display is a status bar over the screen. The captures have the phone's
   own status bar cropped off, so the frame draws one: dark, as the app paints
   it (the site's dark ground), with the time on the left, signal, Wi-Fi and
   battery on the right in white, and the camera hole centred between them.
   Its height is the Android status bar's share of a 720px-wide capture
   (`48px`), and everything in it is sized in container units, so it keeps
   its proportions at every phone width.

   The screen keeps the screenshots' own 720 × 1444, so nothing is cropped,
   and holds that shape before the lazy image arrives. The images sit
   absolutely in it, so one screen can stack several.

   What else makes it read as a phone rather than a dark card, all in the
   bezel's colour: a faint light rim on the bezel's edge, and the side
   buttons (power and volume on the right, as on an Android phone, since the
   screens are the Android app's). */
.pp-home-phone {
    position: relative;
    padding: 8px;
    border-radius: 32px;
    background: var(--theme-palette-color-4);
    box-shadow:
        inset 0 0 0 1px rgba(var(--pp-steel-1-rgb), 0.12),
        0 6px 22px rgba(var(--pp-steel-7-rgb), 0.10);
}

.pp-home-phone::before,
.pp-home-phone::after {
    content: "";
    position: absolute;
    right: -3px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--theme-palette-color-4);
}

/* Power. */
.pp-home-phone::before {
    top: 22%;
    height: 7%;
}

/* Volume. */
.pp-home-phone::after {
    top: 32%;
    height: 13%;
}

.pp-home-phone__display {
    container-type: inline-size;
    overflow: hidden;
    border-radius: 24px;
    background: var(--theme-palette-color-4);
}

.pp-home-phone__status {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    aspect-ratio: 720 / 48;
    padding: 0 7cqw;
    color: #fff;
    font-size: 4cqw;
    font-weight: 600;
    line-height: 1;
}

/* The camera hole: the bezel's colour, outlined by the bezel's rim, which
   is what shows it against the dark bar. */
.pp-home-phone__status::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.6cqw;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--theme-palette-color-4);
    box-shadow: 0 0 0 0.4cqw rgba(var(--pp-steel-1-rgb), 0.12);
    transform: translate(-50%, -50%);
}

.pp-home-phone__icons {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
}

.pp-home-phone__icons svg {
    display: block;
    width: 3.8cqw;
    height: 3.8cqw;
    fill: currentColor;
}

.pp-home-phone__screen {
    position: relative;
    aspect-ratio: 720 / 1444;
    overflow: hidden;
    background: var(--theme-palette-color-8);
}

.pp-home-phone__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── How it works ──
   Four steps and their app screens, on the `--pp-steel-1` band, which sets
   the white screens apart and alternates with the library above.

   Phone: each step is its text, then its own phone (`__shot`), `240px` wide
   and centred; steps `32px` apart. Desktop: the four steps in the left column
   beside one phone (`__stage`, `320px`) on the right; choosing a step shows
   its screen. Stacked, the four texts are about the phone's height, so
   neither column is left with empty space. */
.pp-home-section--how {
    background: var(--pp-steel-1);
}

.pp-home-how__intro {
    margin-bottom: 24px;
}

.pp-home-how__lead {
    margin: 0;
}

.pp-home-how__steps {
    display: grid;
    row-gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-home-how__step {
    margin: 0;
}

.pp-home-how__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.pp-home-how__body {
    margin: 0;
}

/* A text link with an arrow, the library rows' cue look (STYLING.md >
   Established UI-chrome sizes, a link's secondary cue): How it works'
   "Included with Plus" and Pedro's "More about me". */
.pp-home-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-palette-color-5);
    text-decoration: none;
}

.pp-home-more:hover {
    color: var(--theme-palette-color-5);
}

.pp-home-more:focus-visible {
    outline: 2px solid var(--pp-focus-ring);
    outline-offset: 2px;
}

.pp-home-more svg {
    width: 15px;
    height: 15px;
    transition: transform 0.18s ease;
}

.pp-home-more:hover svg {
    transform: translateX(2px);
}

.pp-home-how__more {
    margin-top: 8px;
}

.pp-home-how__shot {
    width: 240px;
    max-width: 100%;
    margin: 24px auto 0;
}

.pp-home-how__stage {
    display: none;
}

/* The screen on show is the one not `aria-hidden` (see pp_home_how()). */
.pp-home-how__stage .pp-home-phone__img {
    transition: opacity 0.25s ease;
}

.pp-home-how__stage .pp-home-phone__img[aria-hidden="true"] {
    opacity: 0;
}

/* The CTA spans the steps column, as the hero's spans its copy column. */
.pp-home-how__actions {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    text-align: center;
}

@media (min-width: 1025px) {
    .pp-home-how {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "intro   intro"
            "steps   stage"
            "actions stage";
        grid-template-rows: auto auto 1fr;
        column-gap: clamp(32px, 5vw, 64px);
    }

    .pp-home-how__intro {
        grid-area: intro;
        margin-bottom: 32px;
    }

    .pp-home-how__shot {
        display: none;
    }

    .pp-home-how__stage {
        grid-area: stage;
        display: block;
        align-self: center;
        justify-self: center;
        width: 320px;
    }

    /* The steps as a selector: a rail on their left, with the chosen step's
       stretch of it in the accent (the selected-tab marker, STYLING.md >
       Tabs, turned on its side), and the others' text muted to
       `--pp-steel-5`. No accent tint behind the chosen step: that is
       reserved for what a running process is on. The rail is there with or
       without the script, so nothing shifts when it runs. */
    .pp-home-how__steps {
        grid-area: steps;
        row-gap: 8px;
    }

    .pp-home-how__step {
        padding: 12px 16px;
        border-left: 2px solid rgba(var(--pp-steel-7-rgb), 0.12);
        border-radius: 0 8px 8px 0;
        transition: background-color 0.18s ease, border-color 0.18s ease;
    }

    .pp-home-how__step.is-selected {
        border-left-color: var(--theme-palette-color-5);
    }

    .pp-home-how__step:not(.is-selected) .pp-home-how__body {
        color: var(--pp-steel-5);
    }

    /* Once the script runs, a whole step is the target; hover is the
       neutral row tint. */
    .pp-home-how--live .pp-home-how__step {
        cursor: pointer;
    }

    .pp-home-how--live .pp-home-how__step:not(.is-selected):hover {
        background: rgba(var(--pp-steel-7-rgb), 0.05);
    }

    .pp-home-how__actions {
        grid-area: actions;
        margin-top: 24px;
    }
}

/* The step title as a button (added by the script): on desktop the title's
   own look, with the standard ring; on a phone, a tab (below). */
.pp-home-how__tab {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.pp-home-how__tab:focus-visible {
    outline: 2px solid var(--pp-focus-ring);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Phone, once the script runs: the four titles are a row of tabs (STYLING.md
   > Tabs: steel text, the chosen one darker over a 2px accent underline),
   then the chosen step's text, then the one phone. The steps' own boxes drop
   out (`display: contents`) so their titles and texts share one grid: the
   titles fill the first row, and all four texts sit in the same cell of the
   second, only the chosen one visible. The cell takes the tallest text's
   height, so changing step never moves the phone. The per-step phones give
   way to the stage. */
@media (max-width: 1024px) {
    .pp-home-how--live .pp-home-how__steps {
        grid-template-columns: repeat(4, auto);
        justify-content: space-between;
        gap: 16px 8px;
    }

    .pp-home-how--live .pp-home-how__step {
        display: contents;
    }

    .pp-home-how--live .pp-home-how__title {
        grid-row: 1;
        margin: 0;
    }

    .pp-home-how--live .pp-home-how__text {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .pp-home-how--live .pp-home-how__step:not(.is-selected) .pp-home-how__text {
        visibility: hidden;
    }

    /* `0.9375rem`, the control-text step: the four labels fit one row on
       a 320px screen. `44px` is the touch target. */
    .pp-home-how--live .pp-home-how__tab {
        min-height: 44px;
        border-bottom: 2px solid transparent;
        font-size: 0.9375rem;
        font-weight: 700;
        line-height: 1.2;
        color: var(--pp-steel-5);
        transition: color 0.18s ease, border-color 0.18s ease;
    }

    .pp-home-how--live .pp-home-how__step.is-selected .pp-home-how__tab {
        border-bottom-color: var(--theme-palette-color-5);
        color: var(--pp-steel-7);
    }

    .pp-home-how--live .pp-home-how__shot {
        display: none;
    }

    .pp-home-how--live .pp-home-how__stage {
        display: block;
        width: 240px;
        max-width: 100%;
        margin: 24px auto 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-home-more svg,
    .pp-home-how__step,
    .pp-home-how__stage .pp-home-phone__img,
    .pp-home-how--live .pp-home-how__tab {
        transition: none;
    }

    .pp-home-more:hover svg {
        transform: none;
    }
}

/* ── App band ──
   The copy beside the app's home screen in the phone frame, on a white
   ground between the `--pp-steel-1` How it works band and the Pedro section.

   Three blocks placed by grid area, as the library is. Desktop: the phone on
   the left (How it works above has its phone on the right), the intro and
   actions stacked on the right, centred as one block against it by the two
   empty `1fr` rows, `32px` apart. Phone: intro, phone, actions, the source
   order, `24px` apart. The phone is `240px` at both widths, How it works'
   phone size: beside two short blocks of copy, a taller one leaves the copy
   column mostly empty. */
.pp-home-app {
    display: grid;
    grid-template-areas:
        "intro"
        "phone"
        "actions";
    row-gap: 24px;
}

.pp-home-app__intro {
    grid-area: intro;
}

.pp-home-app__lead {
    margin: 0;
}

.pp-home-app__phone {
    grid-area: phone;
    width: 240px;
    max-width: 100%;
    margin: 0 auto;
}

.pp-home-app__actions {
    grid-area: actions;
}

@media (min-width: 1025px) {
    .pp-home-app {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas:
            "phone ."
            "phone intro"
            "phone actions"
            "phone .";
        column-gap: 32px;
        row-gap: 0;
        align-items: center;
    }

    .pp-home-app__actions {
        margin-top: 24px;
    }
}

/* ── Pedro ──
   The curator note beside his photo, on the `--pp-steel-1` band, which
   alternates with the white app band above. Desktop: the note on the left,
   the photo on the right (the app band above has its phone on the left),
   `32px` apart and centred on each other. Phone: the photo, then the note,
   `24px` apart, so the face comes before the words it introduces.

   The note is content text and inherits. The photo is the illustrations'
   treatment on this page (› An image mosaic on a page): the `14px` card
   radius as a clip, no shadow, the file's own 16:9. */
.pp-home-section--pedro {
    background: var(--pp-steel-1);
}

/* The column narrowed to pricing's `880px`, so the note and the photo
   shrink together: a short aside at the page's full width ran the note to
   about 80 characters a line beside one of the page's largest images. */
.pp-home-section--pedro .pp-home-grid {
    max-width: 880px;
}

.pp-home-pedro {
    display: grid;
    grid-template-areas:
        "photo"
        "note"
        "more";
    row-gap: 24px;
    align-items: center;
}

.pp-home-pedro__note {
    grid-area: note;
    margin: 0;
}

/* Under the note, `16px` below it rather than the section's `24px` step, so
   the link reads as the note's own. */
.pp-home-pedro__more {
    grid-area: more;
    justify-self: start;
    margin-top: -8px;
}

.pp-home-pedro__photo {
    grid-area: photo;
    overflow: hidden;
    border-radius: 14px;
    line-height: 0;
}

.pp-home-pedro__img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 1025px) {
    .pp-home-pedro {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas:
            ".    photo"
            "note photo"
            "more photo"
            ".    photo";
        column-gap: 32px;
        row-gap: 0;
    }

    .pp-home-pedro__more {
        margin-top: 16px;
    }

    /* Without the photo the note keeps the left column's measure. */
    .pp-home-pedro--no-photo {
        grid-template-areas:
            ".    ."
            "note ."
            "more ."
            ".    .";
    }
}

/* ── Testimonials ──
   Three quotes on a white band, each in a card outlined by the standard
   hairline, with no fill (the `--pp-steel-1` panel repeated the Pedro band's
   colour straight after it), the `14px` card step, no shadow, `28px` card
   padding. Three
   columns on desktop, `24px` apart, equal in height with the names along
   their foot (below); stacked on a phone, `16px` apart.

   The quote is content text and inherits, with the theme's blockquote
   styling cleared, since the panel already marks it as a quotation. The name
   is a meta line: `0.85rem` / `600` / `--pp-steel-5`, `16px` under the
   quote, left-aligned (Blocksy centres a figcaption). */
.pp-home-quotes {
    display: grid;
    align-items: start;
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.pp-home-quote {
    margin: 0;
}

.pp-home-quote__figure {
    margin: 0;
    padding: 28px;
    border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
    border-radius: 14px;
}

.pp-home-quote__text {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
}

.pp-home-quote__text p {
    margin: 0;
}

/* Scoped to the figure: Blocksy's `.entry-content figcaption` (centred,
   `.5em` above) otherwise outranks a single class. */
.pp-home-quote__figure .pp-home-quote__name {
    margin: 16px 0 0;
    font-size: 0.85rem;
    text-align: left;
    font-weight: 600;
    color: var(--pp-steel-5);
}

/* Desktop: three equal-height cards, the names lined up along their foot.
   The quotes now differ by about a line, and copy cannot be fitted to the
   boxes, since line counts change with the width. */
@media (min-width: 1025px) {
    .pp-home-quotes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: 24px;
    }

    .pp-home-quote {
        display: flex;
    }

    .pp-home-quote__figure {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .pp-home-quote__text {
        flex: 1;
    }
}

/* ── Pricing ──
   pms-custom's `[pp_signup_plans]`, unchanged, on the `--pp-steel-1` band so
   it is not read as part of the white testimonials band above. The heading
   takes How it works' intro spacing, `24px` on a phone and `32px` from the
   desktop breakpoint up: the section's `16px` heading margin left the cards
   pressed against it.

   The column is narrower than the page's `1120px` grid: `880px` with its
   `16px` gutters, so each card is about `410px` wide rather than `550px`, and
   the heading breaks into two balanced lines instead of one long one. */
.pp-home-section--pricing {
    background: var(--pp-steel-1);
}

.pp-home-section--pricing .pp-home-grid {
    max-width: 880px;
}

.pp-home-section--pricing .pp-home-h {
    margin-bottom: 24px;
    text-wrap: balance;
}

@media (min-width: 1025px) {
    .pp-home-section--pricing .pp-home-h {
        margin-bottom: 32px;
    }
}

/* ── FAQ ──
   Questions as <details> rows on a white band, between the `--pp-steel-1`
   pricing band and the dark closing band. One column, the heading over the
   list, capped at the reading column's `660px` (STYLING.md > The reading
   column on a prose page) and centred: as two columns, the heading alone
   left the left one empty.

   Rows are the list-of-link-rows geometry (STYLING.md > A list of link rows):
   the standard hairline above each and below the last, the neutral row tint
   on hover inside `12px` side padding with a matching negative margin, `8px`
   radius, focus ring inset. The question is the control: `600` in
   `--pp-steel-7`, the theme's size, with a `20px` chevron in `--pp-steel-5`
   that turns over when open (`0.18s ease`). The answer is content text. */
.pp-home-faq {
    max-width: 660px;
    margin: 0 auto;
}

.pp-home-faq__item {
    margin: 0;
    border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-home-faq__item:last-child {
    border-bottom: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-home-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 -12px;
    padding: 16px 12px;
    border-radius: 8px;
    font-weight: 600;
    color: var(--pp-steel-7);
    list-style: none;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.pp-home-faq__question::-webkit-details-marker {
    display: none;
}

.pp-home-faq__question:hover {
    background: rgba(var(--pp-steel-7-rgb), 0.05);
}

.pp-home-faq__question:focus-visible {
    outline: 2px solid var(--pp-focus-ring);
    outline-offset: -2px;
}

.pp-home-faq__chevron {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--pp-steel-5);
    transition: transform 0.18s ease;
}

.pp-home-faq__item[open] .pp-home-faq__chevron {
    transform: rotate(180deg);
}

.pp-home-faq__answer {
    margin: 0;
    padding: 0 0 16px;
}

@media (prefers-reduced-motion: reduce) {
    .pp-home-faq__question,
    .pp-home-faq__chevron {
        transition: none;
    }
}

/* ── Closing call to action ──
   The hero's ground and text set (STYLING.md > A hero over a looping video):
   `--theme-palette-color-4`, title `#fff` with `text-wrap: balance`, the lead
   `rgba(255, 255, 255, 0.9)`, the on-dark CTA. Centred, ending the page, with
   the lead at the `480px` panel measure. Full-width CTA on a phone, as in the
   hero (the shared `.pp-home-cta` rule). */
.pp-home-section--close {
    background: var(--theme-palette-color-4);
}

.pp-home-close {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}

.pp-home-close__title {
    margin: 0 0 16px;
    color: #fff;
    text-wrap: balance;
}

.pp-home-close__lead {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.9);
    text-wrap: balance;
}

.pp-home-close__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
}

.pp-home-close__note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1024px) {
    .pp-home-close__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Scroll reveal ──
   Each section fades and rises once as it enters the viewport, never again.
   js/page-home.js adds `.pp-home--reveal` to the root, and only once it is
   running, so a page whose script never loads shows every section as normal.
   Sections already on screen when it starts are revealed in the same task,
   so nothing above the fold is ever painted hidden.

   STYLING.md > A section revealed on scroll (flagged, not yet validated):
   `16px` rise on the 4px grid, over `0.25s ease`, the slower-reveal step.

   The whole rule sits behind `no-preference`: under reduced motion there is no
   hidden state to reveal from, and the script does not add the class either. */
@media (prefers-reduced-motion: no-preference) {
    .pp-home--reveal .pp-home-section {
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .pp-home--reveal .pp-home-section:not(.is-revealed) {
        opacity: 0;
        transform: translateY(16px);
    }
}

/* ── The stacked column ──
   Up to the tablet breakpoint every section is one column, and on anything
   wider than a phone (a tablet in portrait, an opened foldable, a narrow
   window) it stretched to the full width: lines of about 90 characters and
   images grown into walls. So the column is capped at the `480px` panel measure the
   hero's copy already uses there, centred: `512px` with the grid's `16px`
   gutters (border-box). Phones never reach it, the widest being about
   440px, so they are unchanged.

   Last in the file and scoped to the page root, so it also overrides the
   `880px` columns of Pedro and pricing. */
@media (max-width: 1024px) {
    .pp-home .pp-home-section .pp-home-grid {
        max-width: 512px;
    }
}