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

   The second consumer of STYLING.md > Marketing page sections: the homepage's
   bands, grid, quote cards and stacked column, under this page's own
   selectors. `pp-signup-page-*` rather than `pp-signup-*`, which is
   pms-custom's namespace (`.pp-signup-plans`, `.pp-signup-modal`).

   One dark ground for the whole page, `--theme-palette-color-4`, the
   homepage hero's (owner's call: three band colours on a page this short
   read as three pages). The sections are still bands, for the grid and the
   reveal, but take no fill of their own, and each after the first drops its
   top padding, so a single clamp step separates them. One breakpoint, the
   tablet one, as on the homepage. */

.pp-signup-page {
    background: var(--theme-palette-color-4);
}

.pp-signup-page-grid {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
}

/* The documented outer clamp. The page carries Blocksy's
   `content_area_spacing: none`, so nothing else spaces the first band from
   the header. */
.pp-signup-page-section {
    padding: clamp(32px, 5vw, 64px) 0;
}

/* Sections after the first: the previous one's bottom padding is the gap. */
.pp-signup-page-section + .pp-signup-page-section {
    padding-top: 0;
}

/* ── Headline ──
   The hero's text set on the dark ground (STYLING.md > A hero over a looping
   video, > A closing call to action): title `#fff` with `text-wrap:
   balance`, the lead `rgba(255, 255, 255, 0.9)`. Centred, at the
   reading column's `660px`: an `<h1>` this long is cramped at the `480px`
   panel measure. */
.pp-signup-page-headline {
    max-width: 660px;
    margin: 0 auto;
    text-align: center;
}

.pp-signup-page-headline__title {
    margin: 0 0 16px;
    color: #fff;
    text-wrap: balance;
}

.pp-signup-page-headline__lead {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    text-wrap: balance;
}

/* ── Plans ──
   pms-custom's `[pp_signup_plans]`, unchanged, in the homepage pricing's
   `880px` column. The cards bring their own surfaces, light and teal, both
   distinct on the dark ground. */
.pp-signup-page-section--plans .pp-signup-page-grid {
    max-width: 880px;
}

/* ── Quotes ──
   Three plain quotes, no boxes (STYLING.md > Quotes under a rule), on the
   dark ground: each under a hairline in the light channel,
   `rgba(var(--pp-steel-1-rgb), 0.12)` (the phone frame's rim, the light
   border on a dark ground), `16px` above the quote. In the plans' `880px`
   column, so the quotes line up with the cards above them. The quote and the
   name take the dark-ground secondary text, `rgba(255, 255, 255, 0.9)`; the
   name is a meta line, `0.85rem` / `600`, `12px` under the quote. Three
   columns on desktop, `32px` apart (the wide-surface step); stacked on a
   phone, `24px` apart. Outlined cards were tried first and dropped by the
   owner: one-line quotes left them mostly empty. */
.pp-signup-page-section--quotes .pp-signup-page-grid {
    max-width: 880px;
}

.pp-signup-page-quotes {
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-signup-page-quote {
    margin: 0;
}

.pp-signup-page-quote__figure {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(var(--pp-steel-1-rgb), 0.12);
}

.pp-signup-page-quote__text {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: rgba(255, 255, 255, 0.9);
}

.pp-signup-page-quote__text p {
    margin: 0;
}

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

@media (min-width: 1025px) {
    .pp-signup-page-quotes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
    }
}

/* ── Scroll reveal ──
   STYLING.md > A section revealed on scroll. js/page-signup.js adds
   `.pp-signup-page--reveal` to the root once it runs, after marking what is
   already on screen, so nothing is painted hidden and a page without the
   script is static. */
@media (prefers-reduced-motion: no-preference) {
    .pp-signup-page--reveal .pp-signup-page-section {
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

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

/* ── The stacked column ──
   STYLING.md > The stacked column, narrowed for this page: the plans and
   quotes are capped at the `480px` panel measure, centred (`512px` with the
   gutters), only up to `768px`. From `769px` they keep their `880px`
   column, so the two plan cards sit side by side on a tablet in portrait
   (about `356px` each at 769px) rather than stacking, which keeps the plans
   comparable at a glance. The quotes share that column so their edges stay
   with the cards'; they stay one column until `1025px`. Up to `768px` the
   headline takes the cap too, so it lines up with the stacked cards under
   it (owner's call); from `769px` it keeps its own `660px`. Phones never
   reach the cap. Last in the file and scoped to the root, so it overrides
   the headline's `660px` and the `880px` columns. */
@media (max-width: 768px) {
    .pp-signup-page .pp-signup-page-section .pp-signup-page-grid {
        max-width: 512px;
    }
}