/* Pricing: fee plaques on the owner door, then a first-year ledger on enamel. */
.pricing-plaques .plaque-grid {
    gap: 12px;
}

.pricing-plaques .figure {
    font-size: var(--type-numeral-lg);
}

.first-year-ledger {
    max-width: 34rem;
}

.fee-line {
    margin-top: 4px;
    font-size: var(--type-ui);
    font-variant-numeric: lining-nums tabular-nums;
}

/* The two compared columns get equal width; the fee name stays narrow. */
@media (min-width: 601px) {
    .fee-table table {
        table-layout: fixed;
    }

    .fee-table th:first-child {
        width: 24%;
    }
}

/* Our column is the painted door: a light juniper wash running the full height
   of the table, door-deep figures, hairline juniper rims. The "typical" column
   stays plain trim white, so the comparison lands before a single number is
   read. Column 2 is ours, the fee name is the row header, so the positional
   selector matches the width rule above.

   Juniper on trim white is the outline button's own hover wash, used here at
   column scale; color-mix keeps it tied to the door token instead of adding a
   palette entry. Deliberately not the enamel plaque: a full-height slab of
   slate reads as a black bar beside two near-white columns, and brass stops
   being legible long before the wash is light enough to sit calmly next to
   them. The plaque stays what it is elsewhere, a small tile, not a column. */
.fee-table thead th:nth-child(2),
.fee-table tbody td:nth-child(2) {
    background: color-mix(in srgb, var(--door-juniper) 12%, var(--trim-white));
    color: var(--door-deep);
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    border-bottom-color: color-mix(in srgb, var(--door-juniper) 28%, transparent);
    box-shadow:
        inset 1px 0 0 var(--door-juniper),
        inset -1px 0 0 var(--door-juniper);
}

/* The column's top edge. */
.fee-table thead th:nth-child(2) {
    background: color-mix(in srgb, var(--door-juniper) 20%, var(--trim-white));
    box-shadow:
        inset 1px 0 0 var(--door-juniper),
        inset -1px 0 0 var(--door-juniper),
        inset 0 1px 0 var(--door-juniper);
}

/* The column's bottom edge. */
.fee-table tbody tr:last-child td:nth-child(2) {
    box-shadow:
        inset 1px 0 0 var(--door-juniper),
        inset -1px 0 0 var(--door-juniper),
        inset 0 -1px 0 var(--door-juniper);
}

@media (max-width: 600px) {
    /* Stacked rows have no columns left, so our figure carries the wash with
       it: a painted panel per fee, hairline juniper rim, with the stacked
       layout's generated label above it in juniper. */
    /* The last row is named too: the desktop rule that draws the column's
       bottom edge is more specific, and left the last panel with no top rim. */
    .fee-table.table-stack tbody td:nth-child(2),
    .fee-table.table-stack tbody tr:last-child td:nth-child(2) {
        margin: 9px 0 3px;
        padding: 10px 15px 11px;
        background: color-mix(in srgb, var(--door-juniper) 12%, var(--trim-white));
        color: var(--door-deep);
        font-weight: 500;
        font-variant-numeric: lining-nums tabular-nums;
        box-shadow: inset 0 0 0 1px var(--door-juniper);
    }

    .fee-table.table-stack tbody td:nth-child(2)::before {
        color: var(--door-juniper);
    }
}