/* =====================================================================
   pricing.css: /pricing (goal 22, redesign-site/decisions.md §13)

   ⛔ EVERY SELECTOR THAT NAMES A CLASS NAMES A pr- ONE (design contract
   §4.6), so this sheet cannot reach a component on any other page.
   Enforced by tests/test_pricing.py.

   ⛔ NO CUSTOM PROPERTIES (contract §1.6): a page sheet that defines one
   repaints every element beneath its selector, the footer included. The
   palette ships as literals, from ds_rules.py's PALETTE:
     cream #FDF8F0  band #F5EDE1  card #FFFEFB  line #E9E0CF  bar #DDD5C2
     forest-deep #1F5540  forest #2D6A4F  ink #2C2418
     body #55503F  muted #6E6555

   The shells, headings, buttons and notes are ds.css's. This sheet adds
   only what the grammar has no word for: the free-tier floor strip and the
   comparison table.

   ⚠ #DDD5C2 FOR RULES DRAWN ON THE BAND, #E9E0CF ON THE CARD. The line
   value was calibrated against the card; on the #F5EDE1 band it measures
   about 1.08:1 and does not read at 1px (ruling 12). The table sits on the
   band, so its rules are the bar value.
   ===================================================================== */

/* --- 1. The floor -------------------------------------------------------
   Free is not a fourth column (§13 D4): it is the ground every account
   stands on. A bordered strip rather than a card in a row of cards, so it
   reads as a precondition and not as an option being compared. */
.pr-floor {
    background: #FFFEFB;
    border: 1px solid #E9E0CF;
    border-radius: 12px;
    padding: 22px;
    margin: 26px 0 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}
.pr-floor-lead {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;
    color: #2C2418;
}
.pr-floor-body { margin: 0; max-width: 640px; font-size: 15px; line-height: 1.6; }
.pr-floor-cta { flex: 0 0 auto; }

/* --- 2. The exchange rate ----------------------------------------------
   Said once, and given its own air so it reads as the page's premise
   rather than as another line of body copy. */
.pr-rate { margin: 26px 0 0; max-width: 680px; }

/* --- 3. The comparison table -------------------------------------------
   The wrapper scrolls, never the page: at 390 a three-column comparison
   cannot fit, and ds_conformance forbids the document scrolling sideways.
   tabindex makes the scroll region keyboard-reachable, which is the
   WCAG 2.1 requirement that comes with making anything scrollable. */
.pr-table-wrap { margin: 24px 0 0; overflow-x: auto; }
.pr-table-wrap:focus-visible { outline: 2px solid #2D6A4F; outline-offset: 4px; }
.pr-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    /* Fixed, so the columns are equal and a longer plan name cannot narrow
       its neighbour and drop its price off the shared baseline. */
    table-layout: fixed;
}
.pr-table th, .pr-table td {
    text-align: left;
    vertical-align: top;
    padding: 13px 16px;
    border-top: 1px solid #DDD5C2;
}
.pr-table thead th { border-top: 0; padding-top: 0; }
.pr-axis-head, .pr-axis { width: 190px; }

.pr-plan-head { display: table-cell; }
.pr-plan-name {
    display: block;
    font-family: Lora, Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: #2C2418;
    margin-bottom: 6px;
}
.pr-price {
    display: block;
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 27px;
    line-height: 1.1;
    color: #1F5540;
    font-variant-numeric: tabular-nums;
}
/* Muted, not faint: #8A7F68 at this size is one of the three pairings that
   fail AA (flag F4), and the marketing family uses the rule set as written
   rather than the locked pages' calibration. */
.pr-price-unit {
    font-family: Inter, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #6E6555;
}

.pr-axis { font-size: 15px; font-weight: 500; line-height: 1.5; color: #55503F; }
.pr-val { font-size: 15px; line-height: 1.5; color: #6E6555; }

/* ⭐ THE ROW THE PAGE EXISTS FOR. Cost per credit is the only value in the
   table a reader cannot work out from the others, and it is what turns three
   unrelated prices into a ladder (§13 section 02, fault 1). Card ground on a
   band, plus ink at 600, is the whole emphasis: no accent, no rule, nothing
   the rest of the table does not already use. */
.pr-row--key th, .pr-row--key td { background: #FFFEFB; }
.pr-row--key .pr-val { color: #2C2418; font-weight: 600; }
.pr-row--key .pr-axis { color: #2C2418; font-weight: 600; }

.pr-row--cta td { padding-top: 20px; }

/* --- 4. The worked example ----------------------------------------------
   Ruled off rather than boxed: it is a footnote to the table, not a fifth
   thing to compare. */
.pr-worked { margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid #DDD5C2; }
.pr-worked-body { margin: 0; max-width: 700px; font-size: 15px; line-height: 1.6; }

/* --- 5. Before you pay -------------------------------------------------- */
.pr-faq { display: flex; flex-direction: column; margin-top: 22px; }
.pr-faq-row { padding: 20px 0; border-top: 1px solid #E9E0CF; }
.pr-faq-q { margin: 0 0 8px; }
.pr-faq-a { margin: 0; max-width: 700px; font-size: 15px; line-height: 1.6; }

/* Visually hidden, still read: the axis column has no visible header, and an
   empty th is a table a screen reader cannot describe. */
.pr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   Desktop, from the site's 768px breakpoint
   ===================================================================== */
@media (min-width: 768px) {
    .pr-floor {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 26px;
        padding: 24px 26px;
        margin-top: 30px;
    }
    .pr-floor-lead { font-size: 17px; }
    .pr-rate { margin-top: 30px; }

    .pr-table-wrap { margin-top: 28px; }
    .pr-axis-head, .pr-axis { width: 210px; }
    .pr-plan-name { font-size: 19px; }
    .pr-price { font-size: 34px; }
    .pr-faq-row { padding: 22px 0; }
}