/* progress-marketing.css
 *
 * Only what /tutoring/progress needs on top of fp-components.css, tier-palette.css and
 * progress-summary.css.
 *
 * The summary component is NOT restyled here. It is shown in a browser-chrome frame precisely
 * so a visitor reads it as "a screenshot of the thing", and restyling it for the marketing page
 * would make the sample a lie about what they get.
 *
 * The topic board below IS styled here, because the live board's CSS is four thousand lines of
 * app-scoped rules that would fight the marketing layout. What it must not do is invent its own
 * colors: every tier color is read from tier-palette.css, the same file the product reads, so
 * "the red one" means the same thing on this page as it does inside the app. A hex code for a
 * tier anywhere in this file is a bug.
 *
 * No hover transforms anywhere: cards lift their shadow, nothing moves.
 */

/* ── The sample, framed as the product ──────────────────────────────────────── */
.pm-sample-frame {
    max-width: var(--pm-shot-width);
    margin: 0 auto;
    border-radius: 0.9rem;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 28px 60px -34px rgba(0, 0, 0, 0.5);
}

.pm-sample-chrome {
    display: flex;
    align-items: center;
    gap: var(--pm-space-xs);
    padding: var(--pm-space-xs) var(--pm-space-sm);
    background: #f1f3f5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.pm-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #d3d7db;
}

.pm-sample-url {
    margin-left: var(--pm-space-xs);
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: #fff;
    font-size: 0.72rem;
    color: #6c757d;
}

/* The component brings its own padding and shadow; inside the frame both would double up. */
.pm-sample-body.parent-summary {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    /* The component's own surface is white; the shot sits it on the app's page color so the
       two shots on this page look like two views of one product. */
    background: var(--pm-app-bg);
}

.pm-sample-note {
    max-width: var(--pm-shot-width);
    margin: var(--pm-space-sm) auto 0;
    display: flex;
    align-items: flex-start;
    gap: var(--pm-space-xs);
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
}

.pm-sample-fallback {
    padding: var(--pm-space-lg);
    margin: 0;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

/* ── The uncertainty panel ──────────────────────────────────────────────────── */
/* Stands in for the usual screenshot in a split-feature row, so it has to carry its own
   visual weight on the image side of the grid. */
.pm-honesty-card {
    align-self: center;
    padding: var(--pm-space-lg);
    border-radius: 1rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 18px 44px -30px rgba(0, 0, 0, 0.5);
}

.pm-honesty-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pm-space-lg);
    padding: var(--pm-space-xs) 0;
}

.pm-honesty-row + .pm-honesty-row {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.pm-honesty-row b {
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.pm-honesty-row.is-lead b {
    font-size: 1.9rem;
    color: var(--bs-primary, #0d6efd);
}

.pm-honesty-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #6c757d);
}

.pm-honesty-caption {
    margin: var(--pm-space-xs) 0 0;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 575.98px) {
    .pm-sample-url { display: none; }
    .pm-honesty-row { gap: var(--pm-space-sm); }
}

/* ── The topic board ────────────────────────────────────────────────────────────
   There is almost nothing here on purpose. The board shot uses the product's own markup and the
   product's own stylesheet (insights.css, loaded by the page), so the cards, the tier panels and
   the titles need no rules of their own. What is left is the stage they stand on.

   An earlier version of this file reimplemented the card in `pm-` classes. It looked close and
   was wrong in a dozen small ways within a day, which is exactly the drift the shot exists to
   avoid. If a rule below starts describing a card, it belongs in insights.css instead. */

:root {
    /* The insights page's body color (insights.css `body`). Named once here so the shot's
       backdrop and the app's background cannot drift apart. */
    --pm-app-bg: #f8f9fa;

    /* One width for every product shot and every caption under one. The board shot used to run
       64rem while the summary and question shots ran 52rem, so the three biggest things on the
       page had three different left edges as you scrolled. */
    --pm-shot-width: 60rem;

    /* A four-step scale, so spacing is chosen rather than typed. Before this the file held
       0.4, 0.55, 0.85, 0.9, 1.1, 1.25, 1.3, 1.4 and 1.75rem with nothing to tell them apart. */
    --pm-space-xs: 0.4rem;
    --pm-space-sm: 0.75rem;
    --pm-space-md: 1.1rem;
    --pm-space-lg: 1.75rem;
}

.pm-board-stage,
.pm-modal-stage {
    padding: var(--pm-space-md);
    background: var(--pm-app-bg);
}

/* The live page wears this strip across its top; the shot keeps it so the color order is
   legible before a single card is read. */
.pm-accent-strip {
    height: 4px;
    border-radius: 999px;
    margin-bottom: var(--pm-space-sm);
    background: var(--tier-accent-strip);
}

/* The real cards lift and scale under the cursor because they open a topic. Nothing in a shot
   opens, so the motion would be a promise the page cannot keep. */
.pm-board-stage .tier-card:hover,
.pm-board-stage .tier-card:active {
    transform: none;
    filter: none;
}

/* The strip is a page-width band in the app; inside the shot it is the shot's own header. */
.pm-board-stage .sh-forecast {
    margin: 0 0 var(--pm-space-md);
}

/* ── Panels on the page's canvas ────────────────────────────────────────────────
   .fp-marketing-page paints a #eef1f6 canvas and ships a white panel token for things that sit
   on it, but .fp-benefit carries only a border — so every card below the board read as gray on
   gray. These give them the panel surface the design system already defines, rather than a new
   color invented here. */
.fp-benefit,
.pm-honesty-card {
    background: var(--fp-page-panel-bg, #fff);
    box-shadow: var(--fp-page-panel-shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.05));
}

/* The split-feature rows put their copy straight on the canvas too. */
.fp-split-feature-body {
    padding: var(--pm-space-md);
    border-radius: var(--fp-page-panel-radius, 12px);
    background: var(--fp-page-panel-bg, #fff);
    box-shadow: var(--fp-page-panel-shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.05));
}

/* .fp-cta-panel is deliberately NOT in the list above. It ships as a dark navy panel whose copy
   is white; giving it the white panel surface turned its lead paragraph, its note and its ghost
   button invisible. It is also the one block on the page that should break the rhythm rather
   than join it. */

/* ── Page rhythm ────────────────────────────────────────────────────────────────
   This page runs more sections than a typical landing page because it is a walkthrough, and at
   the stock 3rem the headers floated a long way from the thing they introduce. Tightened so each
   header reads as a caption for the block under it. */
.fp-marketing-page .fp-section-header {
    margin-bottom: var(--pm-space-lg);
}


/* ── The modal shot ─────────────────────────────────────────────────────────── */
/* The question screen is built for a modal body; given a whole page it sprawls. */
.pm-modal-stage .squares-container { margin-bottom: var(--pm-space-md); }

/* Only two questions are shown, so the list needs no scroll of its own. */
.pm-modal-stage .qb-list {
    display: flex;
    flex-direction: column;
    gap: var(--pm-space-sm);
    margin: 0;
}

/* Buttons in a shot are scenery. Make that true for a pointer and a keyboard, not just visually. */
.pm-modal-stage .practice-btn,
.pm-modal-stage .qb-reveal-btn {
    pointer-events: none;
}

.pm-after-shot { margin-top: var(--pm-space-lg); }

/* ── Narrow screens ─────────────────────────────────────────────────────────────
   The board's whole argument is four colored columns SIDE BY SIDE. Stacked into one column it
   stops being a comparison and becomes eleven cards to scroll past, which is the opposite of the
   point. The app answers this with tier tabs; a static shot can do something simpler and keep the
   shape: let the four columns stay four, and swipe. */
@media (max-width: 767.98px) {
    .pm-board-stage { padding: var(--pm-space-sm) 0 var(--pm-space-sm) var(--pm-space-sm); }

    .pm-board-stage > .pm-accent-strip,
    .pm-board-stage > .sh-forecast { margin-right: var(--pm-space-sm); }

    #progress-board {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Room for the last column's shadow, and a hint that there is more to the right. */
        padding-right: var(--pm-space-sm);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #progress-board::-webkit-scrollbar { display: none; }

    #progress-board > [class*="col-"] {
        flex: 0 0 72%;
        max-width: 72%;
        scroll-snap-align: start;
    }

    .pm-modal-stage { padding: var(--pm-space-sm); }
}

@media (max-width: 575.98px) {
    #progress-board > [class*="col-"] {
        flex: 0 0 82%;
        max-width: 82%;
    }
}

/* ── How a family gets started ─────────────────────────────────────────────────
   .fp-steps-grid is a 2-up grid, which leaves a lone third step on its own row. With three
   steps the row should be three. The card is also a horizontal flex with no fill, so at a third
   of the width the number crowded the heading and the whole thing sat gray on gray. */
.fp-steps-grid {
    grid-template-columns: repeat(3, 1fr);
}

.fp-step-card {
    flex-direction: column;
    gap: var(--pm-space-sm);
    background: var(--fp-page-panel-bg, #fff);
    box-shadow: var(--fp-page-panel-shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.05));
}

/* The numbers are the point of this section: make them read as a sequence. */
.fp-step-card .step-number {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.05rem;
}

.fp-step-card h5 {
    margin-bottom: 0.35rem;
}

@media (max-width: 991.98px) {
    .fp-steps-grid { grid-template-columns: 1fr; }
    /* Back to a row when stacked: at full width the number belongs beside the words. */
    .fp-step-card { flex-direction: row; align-items: flex-start; gap: var(--pm-space-md); }
}

/* ── "Ours, not the College Board's" ────────────────────────────────────────────
   The point JR made: the sample used to show the eight official content domains, which quietly
   advertised the competition's granularity as if it were ours. The comparison is the argument,
   so it gets its own block rather than a line of body copy. */
.pm-granularity {
    max-width: var(--pm-shot-width);
    margin: var(--pm-space-lg) auto 0;
    padding: var(--pm-space-md);
    border-radius: var(--fp-page-panel-radius, 12px);
    background: var(--fp-page-panel-bg, #fff);
    box-shadow: var(--fp-page-panel-shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.05));
}

.pm-granularity-head {
    display: flex;
    align-items: center;
    gap: var(--pm-space-xs);
    margin-bottom: var(--pm-space-sm);
    font-size: 1rem;
    color: var(--bs-body-color, #1b2a4a);
}

.pm-granularity-head i { color: var(--tier-advanced-text, #2c7a38); }

.pm-granularity p {
    margin: 0 0 var(--pm-space-sm);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--bs-secondary-color, #555);
}

/* The two sides side by side: one word against a list is the whole comparison. */
.pm-granularity-compare {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pm-space-sm);
    padding: var(--pm-space-sm);
    border-radius: 0.6rem;
    background: var(--pm-app-bg);
}

.pm-granularity-compare > i {
    color: var(--bs-secondary-color, #6c757d);
    flex: 0 0 auto;
}

.pm-granularity-side {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* Ours takes the room, because there is more of it — which is the point. */
.pm-granularity-side.is-ours { flex: 1 1 22rem; }

.pm-granularity-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #6c757d);
}

.pm-granularity-example {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bs-body-color, #1b2a4a);
}

.pm-granularity-side.is-ours .pm-granularity-example {
    font-weight: 600;
    color: var(--tier-advanced-text, #2c7a38);
}

.pm-granularity-foot { margin-bottom: 0; }

@media (max-width: 575.98px) {
    .pm-granularity-compare > i { transform: rotate(90deg); }
}