/* =========================================================
   PRICING PAGE — plan grid, add-ons, billing FAQ.
   Loaded after public.css (tokens/nav/footer/buttons) and landing.css
   (hero, section shells, feature cards), whose vocabulary this page shares
   with the homepage. Everything here is either page-scoped layout or a
   pricing-specific component.

   Presentation only. There is no amount, no currency and no plan name in
   this file: every one of those comes from /api/public/pricing at runtime,
   and a test asserts this stylesheet generates no content containing a
   number either.
   ========================================================= */

/* =========================================================
   PAGE SHELL

   The section shells come from landing.css at a fixed 24px inline padding.
   Pricing runs wider content (up to four plan columns), so it takes a fluid
   gutter instead — comfortable on a desktop, never touching the edge on a
   phone. Scoped to .page-pricing so the homepage keeps its own spacing.
   ========================================================= */

.page-pricing .hero,
.page-pricing .section,
.page-pricing .section--muted > .section {
    padding-inline: clamp(20px, 4vw, 48px);
}

/* One vertical rhythm for every band on the page. */
.page-pricing .section,
.page-pricing .section--muted > .section {
    padding-block: clamp(56px, 7vw, 88px);
}

/* Matched to the homepage, measured rather than guessed: its hero is
   96px/88px and the section below adds 72px, so the gap between the last
   line of the hero and the next heading is 160px. Zeroing the bottom here
   made that gap 88px — noticeably tighter than every other page. */
.hero--compact {
    padding-block: clamp(64px, 8vw, 96px) clamp(32px, 5vw, 72px);
}

/* =========================================================
   PLAN GRID
   ========================================================= */

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 18px;
    /* Cards size to their own content. Stretching them to a common height
       is the obvious choice and it is wrong here: the catalog gives Free 23
       feature lines and Enterprise 43, so a shared height left 720px of
       empty card between Free's last feature and its button. The call to
       action is lifted above the list instead (see .plan-card__cta), which
       is what actually needs to line up across the row. */
    align-items: start;
}

.plan-card {
    /* Declared once so the reservation rule below can be derived from them
       rather than restating two numbers that would drift apart. */
    --card-gap: 12px;
    --note-line: calc(13.5px * 1.6);

    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    padding: 26px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.plan-card--featured {
    border-color: var(--accent);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
}

.plan-card__name {
    margin: 0;
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text);
}

.plan-card__price {
    font-size: clamp(30px, 4vw, 38px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    /* Digits line up between cards. */
    font-variant-numeric: tabular-nums;
}

.plan-card__price--custom {
    font-size: clamp(22px, 3vw, 26px);
}

.plan-card__interval {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-faint);
    letter-spacing: 0;
    margin-inline-start: 4px;
}

.plan-card__blurb,
.plan-card__note {
    margin: 0;
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

.plan-card__note {
    font-size: 13.5px;
    /* --text-faint on --surface is about 4:1, under AA for text this size,
       and this line carries the yearly price and the "priced per
       organization" explanation — both things a reader is trying to read. */
    color: var(--text-muted);
}

/* Two lines' worth, so a one-line blurb does not lift its card's button
   above its neighbours'. It only ever ADDS space, so a longer description
   still sets its own height. */
.plan-card__blurb {
    min-height: 3.2em;
}

/* A free plan renders no yearly note (see priceBlock in pricing.js), which
   makes its card exactly one note-line shorter than its neighbours and
   lifts its button out of the row. That line is reserved instead.
   :has() is progressive here: where it is unsupported the card simply keeps
   the small offset it would have had anyway — nothing breaks. */
.plan-card:not(:has(.plan-card__note)) .plan-card__price {
    padding-block-end: calc(var(--note-line) + var(--card-gap));
}

.plan-card__features {
    list-style: none;
    margin: 4px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.plan-card__features li {
    position: relative;
    padding-inline-start: 22px;
}

.plan-card__features li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: var(--accent);
    font-size: 13px;
    line-height: 1.6;
}

/* ORDER, not source order. The call to action is rendered after the
   feature list and shown before it, so the four buttons sit at the same
   height across the row — a plan with twice the features does not push its
   button half a screen further down the page. */
.plan-card__features { order: 2; }

.plan-card__cta {
    order: 1;
    margin-block-start: 4px;
    align-self: stretch;
}

/* An add-on is bought alongside a plan rather than instead of one, so its
   card is quieter: no featured state and no call to action of its own. */
.plan-card--addon .plan-card__price {
    font-size: clamp(24px, 3vw, 28px);
}

/* There are two add-ons and the container is wide, so a 1fr track made each
   card 523px of mostly empty surface. They are capped and centred instead,
   which also keeps them the size of a plan card rather than twice it. */
#pricing-addons {
    grid-template-columns: repeat(auto-fit, minmax(248px, 340px));
    justify-content: center;
}

/* =========================================================
   LOADING AND EMPTY STATES

   Both are states the reader is meant to understand, so both are composed
   rather than left as a line of text. The skeleton mirrors the plan card it
   is standing in for; the unavailable state borrows the dashed frame the
   homepage uses when it has no reviews to show.
   ========================================================= */

.plan-skeleton {
    min-height: 268px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 37%, var(--surface) 63%);
    background-size: 400% 100%;
    animation: pricing-shimmer 1.4s ease infinite;
}

@keyframes pricing-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Announced, not shown — the skeleton above is the visual state. */
.pricing-loading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pricing-empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 18px;
    margin: 0;
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.6;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}

.pricing-empty p {
    margin: 0;
    max-width: 46ch;
}

.pricing-note {
    margin: 24px 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

/* =========================================================
   BILLING FAQ

   Built on landing.css's feature cards so it matches the homepage, with the
   question/answer hierarchy the cards there do not need. They are read, not
   operated, so the accent hover a feature card carries is taken back off.
   ========================================================= */

.faq-grid {
    gap: 16px;
}

.faq-card {
    padding: 24px;
}

.faq-card:hover {
    border-color: var(--border);
    background: var(--surface);
}

.faq-card h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
}

.faq-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.65;
}

/* The global rule is `a { color: inherit }`, which would leave these
   reading as body text. Inside an answer a link has to look like one. */
.faq-card a {
    color: var(--accent);
    text-decoration: none;
}

.faq-card a:hover {
    text-decoration: underline;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 560px) {
    .plan-grid { grid-template-columns: 1fr; }
    .plan-card { padding: 22px 20px; }
    .faq-card { padding: 20px; }
    .plan-skeleton { min-height: 200px; }
}

@media (prefers-reduced-motion: no-preference) {
    .plan-card,
    .faq-card {
        transition: border-color 0.15s ease, background 0.15s ease;
    }
}

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