/* pricing.css — the pricing page (#5701).
 *
 * WHY THIS FILE EXISTS. The page carried ~550 lines of CSS inside its own
 * <style> block, which is how it ended up painting every quota tile a different
 * colour from a six-value map. Three of those six were the timeline's OVERLAY
 * tokens — the PNG overlay background, the text overlay background and the
 * chapter marker — so restyling the editor restyled pricing, and vice versa.
 * Colour a customer reads as meaning "these numbers are different kinds of
 * thing" was in fact meaning "this is a PNG overlay" somewhere else entirely.
 *
 * ONE ACCENT, USED THREE TIMES: the Vault band's name, the recommended column's
 * border, and the primary button. It is --brand-primary, the same orange the
 * landing page uses for its call to action, so the two pages read as one
 * product. Everything else is ink, muted ink and hairlines. The numbers a
 * customer is trying to COMPARE are a plain label/value list in tabular
 * figures, because comparison is this page's whole job and colour hinders it.
 *
 * TOKENS ONLY. Every colour here comes from tokens.css, so the page follows the
 * signed-in visitor's theme (dark, light, midnight, slate, sepia) rather than
 * committing to a palette of its own. The two things tokens.css does not carry
 * — a monospace stack and this page's radius — are declared below, scoped to
 * the page, which is what #5701 asks for: if it needs its own tokens, it
 * declares its own rather than borrowing another surface's.
 *
 * The page shape (the outer gutter and cap) is marketing.css's <main> and
 * .mkt-wrap, and the buttons are .mkt-btn — shared with index.html so the bar,
 * the landing page and this page cannot drift into three different widths or
 * three different buttons.
 */

/* The reading column.
 *
 * NOT a second opinion about how wide a page is: <main> still takes its cap and
 * its gutter from the frame tokens, so this page's box and the bar above it are
 * the same shape as every other public page. This is the measure INSIDE that
 * box, the same job .mkt-wrap does on the landing page and for the same reason.
 *
 * It caps NOTHING. <main> already carries --page-max and --page-gutter, and the
 * top bar carries the same two, so the page and the bar above it are one shape
 * by construction. A second cap here — which is what this had — inset the
 * content inside the bar, and the logo and account chip overhung the page they
 * belong to.
 *
 * The prose is what the old 1040 cap was really protecting, and that job now
 * sits on the text blocks themselves, below. */
.pr-wrap {
    margin: 0 auto;
}

/* Prose keeps a line length a person can read, whatever the band does. Applied
   to the text blocks rather than to their container, so widening the page again
   later cannot silently stretch a paragraph to the full band. */
.pr-lede p,
.pr-details p,
.pr-note,
.pr-note-inline {
    max-width: 68ch;
}

.pricing-page {
    /* Figures a customer reads down a column. A proportional font makes 100 GB
       and 500 GB different widths, which is what makes two plans hard to
       compare at a glance. */
    --pr-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --pr-radius: 8px;
    background: var(--bg-base);
    padding: 2rem 0 5rem;
}

/* ---- lede ----------------------------------------------------------------- */

/* The lede carries NO measure of its own. It had one, and it was the headline
   that paid for it: a 62ch box broke "Four plans that follow your action camera
   season." across two lines on a page 1400px wide, with the right half of the
   screen empty beside it. The prose keeps its own line length below, which is
   what the cap was actually protecting. */
.pr-lede {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 2.75rem;
}

/* The lede is one paragraph under the headline now. It was two columns — the
   claim on the left and five facts on the right — which put the case for the
   model in front of somebody who had not yet seen a price. The rungs are
   immediately below, and Questions at the foot carries the argument for anyone
   who wants it. */

.pr-lede h1 {
    margin: 0;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--text-primary);
    text-wrap: balance;
}

.pr-lede p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* The eyebrow is deliberately NOT .mkt-eyebrow. That one is cyan, and a second
   saturated colour on a page whose whole argument is "one accent" is the defect
   this page is being rebuilt to remove. Muted ink, and the letterform carries
   the emphasis instead. */
.pr-eyebrow {
    font-family: var(--pr-mono);
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* NO HORIZONTAL BANDS. The no-cost rung and the prepaid one were full-width
   rows stacked above the working plans — two rungs of one ladder given a whole
   screen width each to state four figures, laid out differently from the two
   below them. They are columns now, in a pair, which halves the page and lets
   all four be read the same way. Everything that dressed a band went with it. */

/* ---- the rungs, two to a row --------------------------------------------- */

.pr-section-head {
    font-family: var(--pr-mono);
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 400;
    margin: 2.75rem 0 0.9rem;
}

.pr-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.pr-col {
    /* The card's SURROUND carries the colour, not its contents: a tinted head
       fading into the body, a border in the accent rather than a hairline, and
       a soft ring outside it so the card sits on the page instead of being cut
       out of it. The figures inside stay ink on the card — see the block at the
       foot of this file for why. */
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--pr-accent-plan) var(--pr-surround), transparent) 0,
            color-mix(in srgb, var(--pr-accent-plan) 3%, transparent) 6rem,
            transparent 12rem),
        var(--bg-elevated);
    border-color: color-mix(in srgb, var(--pr-accent-plan) 22%, var(--border-soft));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr-accent-plan) 7%, transparent);
    border: 1px solid var(--border-soft);
    border-radius: var(--pr-radius);
    padding: 1.6rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

/* The recommended column. Which one wears it is the catalogue's decision, not a
   rule in this file.
 *
 * NO TOP EDGE. It had a 3px bar in the accent, and so did the prepaid card
 * beside it — two of the four cards wearing a stripe the other two did not,
 * which read as two kinds of card rather than one recommendation. Now that every
 * rung carries its own colour on its head, a bar on top of that is a second
 * marker for something already marked.
 *
 * What is left is the same signal turned up: a deeper wash of the rung's own
 * colour, a firmer edge and a wider ring than its neighbour. The distinction
 * survives; the stripe does not. */
.pr-col-pick {
    border-color: color-mix(in srgb, var(--pr-accent-plan) var(--pr-edge), var(--border-default));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--pr-accent-plan) 18%, transparent),
        var(--shadow-popup);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--pr-accent-plan) 22%, transparent) 0,
            color-mix(in srgb, var(--pr-accent-plan) 5%, transparent) 6rem,
            transparent 12rem),
        var(--bg-elevated);
}

.pr-col-head { display: flex; flex-direction: column; gap: 0.35rem; }

.pr-col-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    /* The head of the card is where a rung says which one it is, so the name and
       the price beneath it are the one place the rung's colour lands. */
    color: var(--pr-accent-plan);
}

.pr-col-price {
    font-family: var(--pr-mono);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    /* This rung's own accent, the same one its name carries. On the no-cost rung
       this line IS the offer — one word where the others carry a figure — and it
       used to be an eyebrow above the name saying the same thing in the label's
       place. */
    color: var(--pr-accent-plan);
}

.pr-col-why { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; }

.pr-rows { display: flex; flex-direction: column; }

.pr-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.pr-row:last-child { border-bottom: 0; }
.pr-row-k { color: var(--text-secondary); font-size: 0.88rem; }

.pr-row-v {
    font-family: var(--pr-mono);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* The buy control sits at the foot of the column whatever the rows above it
   measure, so the two columns' buttons line up. Accent use 3 of 3 is
   .mkt-btn-primary, which is marketing.css's and therefore the landing page's. */
.pr-col-action { margin-top: auto; }
.pr-col-action .mkt-btn { width: 100%; }

/* What a row says when it cannot be bought here: a prepaid term is a statement,
   not a button that would answer 400. */
.pr-note-inline {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* NO ADD-ON SHELF. Six tiles of things to buy sat under the plans on a page a
   signed-out visitor reads to choose a rung. Buying more of one thing is
   something you do once you have run out of it, and the place that knows you
   have is the Usage page, where each offer now sits under the meter it refills.
   The rules went with the markup. */

/* ---- the details control, and its dialog ---------------------------------- */

/* A quiet third affordance. It must not compete with the buy control beside it,
   so it is a text link in weight and a button in behaviour: keyboard reachable,
   focusable, and announced as the action it is. */
.pr-details {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    align-self: flex-start;
}

.pr-details:hover { color: var(--text-primary); }
.pr-details:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 2px; }

/* Band: the buy control and the details link read as one row of actions. */

/* Column: under the button, centred with it. The wrapper has to be the flex
   container for that — align-self on the child alone does nothing in a block. */
.pr-col-action { display: flex; flex-direction: column; align-items: center; }
/* align-self, not the parent's align-items: the base rule sets flex-start on
   every trigger and a child's own align-self beats its parent's align-items. */
.pr-col-action .pr-details { align-self: center; margin-top: 0.6rem; }


/* Dialog body. The shared Modal supplies the chrome, the theme and the type
   scale; these are only the three shapes this particular body holds. */
.pr-dlg-lede { margin: 0 0 1rem; color: var(--text-secondary); line-height: 1.6; }

.pr-dlg-h {
    margin: 1.1rem 0 0.5rem;
    font-family: var(--pr-mono);
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text-muted);
}

.pr-dlg-h:first-child { margin-top: 0; }

.pr-dlg-rows { display: flex; flex-direction: column; margin: 0; }

.pr-dlg-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.pr-dlg-row:last-child { border-bottom: 0; }
.pr-dlg-row dt { color: var(--text-secondary); font-size: 0.86rem; }

.pr-dlg-row dd {
    margin: 0;
    font-family: var(--pr-mono);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    text-align: right;
}

.pr-dlg-terms { margin: 0; padding-left: 1.1rem; }

.pr-dlg-terms li {
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.55;
    margin-bottom: 0.35rem;
}

.pr-dlg-terms li:last-child { margin-bottom: 0; }

/* The one link out. Set apart above a rule, because it leaves the dialog. */
.pr-dlg-agreement {
    margin: 1.1rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-soft);
    font-size: 0.84rem;
}

.pr-dlg-agreement a { color: var(--brand-primary); }

/* ---- questions ------------------------------------------------------------ */

.pr-faq { display: flex; flex-direction: column; }

/* Disclosures, closed on arrival. Left open, four long answers followed the
   decision the page exists for and buried the end of it; closed, the section
   reads as the list of things people ask, and any one of them opens in place.
   Nothing is fetched on open — the answers are in the markup — so a click
   cannot fail and the browser's own find still reaches the words. */
.pr-qa { padding: 0.35rem 0; border-bottom: 1px solid var(--border-soft); }
.pr-qa:last-child { border-bottom: 0; }

.pr-qa h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.008em;
    color: var(--text-primary);
}

/* The whole heading is the control, so the target is the width of the row
   rather than the width of the triangle. A button, not a div with a handler:
   it is focusable, it answers the keyboard, and it reports its state. */
.pr-qa-toggle {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    width: 100%;
    padding: 0.65rem 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.pr-qa-toggle:hover { color: var(--brand-primary); }
.pr-qa-toggle:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* The app's own disclosure triangle: the accent, at the size the editor's
   Files and Assets headers use. One affordance across the product, so a
   customer who has used the editor already knows what this row does. */
.pr-qa-arrow {
    flex: 0 0 auto;
    font-size: 0.55rem;
    line-height: 1;
    color: var(--brand-primary);
}

.pr-qa-body { padding: 0 0 0.75rem 1.1rem; }

.pr-qa p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 72ch;
}

.pr-qa p + p { margin-top: 0.45rem; }
.pr-qa strong { color: var(--text-primary); font-weight: 600; }

.pr-note {
    margin-top: 2.5rem;
    padding: 0.9rem 1rem;
    border-left: 2px solid var(--border-default);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
    max-width: 72ch;
}

/* ---- states --------------------------------------------------------------- */

/* A catalogue we could not read renders nothing rather than a plausible price.
   This is the visible half of that: the reason, and a way to ask again. */
.pr-error {
    padding: 2.5rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.pr-error p { margin: 0 0 1rem; }

.pr-loading {
    padding: 2.5rem 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.pr-message {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--pr-radius);
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg-sunken) 80%, transparent);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loading-overlay.show { display: flex; }

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-soft);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: pr-spin 1s linear infinite;
}

.loading-text { color: var(--text-primary); margin-top: 1rem; font-size: 0.9rem; }

@keyframes pr-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .loading-spinner { animation: none; }
}

/* ---- responsive ----------------------------------------------------------- */

@media (max-width: 760px) {
    .pr-cols { grid-template-columns: 1fr; }
}

/* ── Colour: one per rung, and kept off the figures (#5701 revisited) ────────
 *
 * The page was one accent used three times and greyscale everywhere else. That
 * restraint was right about one thing and wrong about another. Right: colour on
 * the NUMBERS hurts, because comparing plans is this page's whole job and a
 * customer reading 100 GB against 500 GB does not need two hues to do it. The
 * figures are untouched for exactly that reason, and this is the rule that has
 * not moved.
 *
 * Wrong twice over. With one accent, three of the four cards were the same
 * orange and the fourth was cyan, so the ladder read as "the Vault one, and
 * three others" rather than as four rungs — and the two cards that were
 * different were marked with a 3px stripe on top, which is a second thing to
 * learn on a page a visitor reads once.
 *
 * So each rung wears ONE COLOUR, on the head of its card: the plan's name, the
 * price under it, the wash behind both, and the edge of the recommended one.
 * The stripes are gone, because the colour already says everything the stripe
 * was there to say.
 *
 * WHERE THE COLOURS COME FROM. tokens.css, as a family that belongs to this
 * ladder and to nothing else. The version #5701 removed pulled three of its six
 * colours from the timeline's OVERLAY tokens, so restyling the editor restyled
 * pricing; a named family with one owner cannot be borrowed by accident, and a
 * literal hex in THIS file could not follow the visitor's theme.
 *
 * WHICH RUNG GETS WHICH is pricing.js's, from the card's POSITION on the ladder
 * — never from a plan id, which is the same class of defect as a price written
 * into a page. A rung past the end of the ramp keeps the page default below,
 * so a fifth plan is a plain card rather than a colourless one. */
.pricing-page {
    /* The page default, and the fallback for any rung the ramp does not reach.
       Every card's paint is mixed from this one variable, so a rung recolours
       itself by setting it and nothing else. */
    --pr-accent-plan: var(--brand-primary);
    --pr-edge: 42%;
    /* The big plan cards carry more than the rest — they are the decision the
       page exists for, and at 1200px they need to hold their own space. */
    --pr-surround: 16%;
}

/* The ladder, in the order the rungs are sold. Four declarations and no
   selector naming a plan: a rung is coloured by where it stands. */
.pr-rung-1 { --pr-accent-plan: var(--plan-accent-1); }
.pr-rung-2 { --pr-accent-plan: var(--plan-accent-2); }
.pr-rung-3 { --pr-accent-plan: var(--plan-accent-3); }
.pr-rung-4 { --pr-accent-plan: var(--plan-accent-4); }

/* Each card gets a tinted head, so a column reads as a card rather than as a
   region of the page. The wash is deliberately weak — it separates, it does not
   decorate. */
.pr-col-head {
    position: relative;
}

/* THE PREPAID RUNG PAINTS NOTHING OF ITS OWN, and that is the change. It is a
   different KIND of purchase, not a higher rung of the same ladder, and it used
   to say so with a stripe, a second card background and a private accent — three
   devices for one distinction, on a card that is now told apart by its colour
   exactly the way the other three are. pricing.js still marks the card, because
   what a rung IS is a fact about the row worth carrying in the markup; nothing
   in this file paints from it any more. */

/* Every rung's Choose control is the shared action chip from styles.css. What
   is set here is only its geometry: full width of the card it sits in, and the
   same padding and weight the Usage page's hibernate offer carries, so the two
   are one control in two places rather than two that resemble each other. */
.pr-choose {
    width: 100%;
    padding: 0.55rem 1.1rem;
    font-weight: 700;
}

/* A customer who has asked not to see motion or decoration still gets the
   structure — the edges stay, the washes go. */
@media (prefers-contrast: more) {
    .pr-col { background-image: none; }
    .pr-col,
    .pr-col-pick { box-shadow: none; }
}