/* ==========================================================================
   pricing — page-specific layout
   Built against design-output/pricing/full-page.png and the section captures.
   Header, footer, buttons, pills, CTA banner, FAQ, spine and dividers are
   shared and live in global.css.

   The plan panel is the same component the home page draws in its pricing
   section; it is restated here because each page loads global.css plus one
   stylesheet of its own. If a third page needs it, it should move up into
   global.css and come out of both page files.
   ========================================================================== */

/* ── Section 1 — Page head + plans ──────────────────────────────────────── */

/* Its own ground, and no padding of its own: the frame opens flush under the
   bar and closes on its own rule, with the CTA below starting its 80px from
   there. Measured off section-01.png, where the rules fall at y 102 / 454 /
   952 with the bar ending at 102. */
.plans {
    background: var(--bg-primary);
}

/* The two outer horizontals, which run the full width of the page. */
.plans__band {
    border-block: 1px solid var(--border-color);
}

/* The rule between title and plans is page-wide as well, so it belongs to
   the head rather than to the column inside it. */
.plans__head {
    border-bottom: 1px solid var(--border-color);
}

/* The verticals sit on the gutter. Head and grid each carry their own pair;
   they are stacked, so the two read as one line down the page. */
.plans__head-inner {
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    padding-block: var(--s-10);
    border-inline: 1px solid var(--border-color);
    text-align: center;
}

/* 64px at the 1440 design width, held to the width that breaks it after
   "find" as in the reference rather than by a hard <br>. */
.plans__title {
    max-width: 720px;
    margin: var(--s-4) auto 0;
    font-family: var(--font-serif);
    font-size: clamp(38px, 4.45vw, 64px);
    font-weight: var(--w-regular);
    line-height: var(--lh-tight);
}

/* Two equal cells on the design column, ruled down both edges and between. */
.plans__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    border-inline: 1px solid var(--border-color);
}

.plans__cell + .plans__cell {
    border-left: 1px solid var(--border-color);
}

/* Panel and call stacked inside the cell, 20px in from its edges. The call is
   a sibling of the panel, not a child: on the source it sits below the panel,
   on the cell ground. */
.plans__cell {
    display: flex;
    flex-direction: column;
    gap: 21px;
    padding: 20px;
}

.plan {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 400px;
    padding: 20px;
    border-radius: var(--r-lg);
    background: var(--c-bone-mid);
}

.plan__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

.plan__name {
    font-family: var(--font-serif);
    font-size: var(--t-3xl);
    font-weight: var(--w-regular);
}

/* A capsule a shade lighter than the panel it sits on */
.plan__hours {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--bg-primary);
    font-size: var(--t-md);
    line-height: 1.2;
    color: var(--text-muted);
}

.plan__price {
    margin-top: var(--s-5);
    font-family: var(--font-serif);
    font-size: var(--t-4xl);
}

/* Pushed to the foot of the panel; rows sit on a 36px pitch */
.plan__features {
    display: grid;
    gap: 14px;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-md);
    line-height: 1.2;
    color: var(--text-muted);
}

.plan__features li::before {
    content: "\2713";
    margin-right: var(--s-3);
}

.plan__cta {
    justify-content: center;
    padding-block: 10px;
    border-radius: var(--r-pill);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .plans__grid {
        grid-template-columns: 1fr;
    }

    /* Stacked, so the rule between the pair turns from a side to a top */
    .plans__cell + .plans__cell {
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }
}