/* =====================================================================
   /purchasing-methods/ — page-specific layout (tokens only).
   The two-column layout reuses the design system (.section / .container
   / .grid.grid-2 / .card). These rules add only what stock components
   can't express: the icon + full-bleed red header bar and the feature
   list. Scoped to .purchasing-page so nothing leaks site-wide.
   ===================================================================== */

.purchasing-page .pm-license {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    /* Hover = the house gray offset-shadow card (card-shadow-convention): NEVER a
       red hover border. The base keeps a TRANSPARENT-gray shadow + the transition,
       so it animates alpha 0 -> 1 on hover and leaves no faint ghost on mouse-out
       (never transitions to/from `none`, which would fade through black). The
       visible hover shadow is the defined token var(--gray-400). */
    border-color: var(--gray-400); /* #9D9EA2 default gray border */
    box-shadow: 4px 4px 0 0 rgba(157, 158, 162, 0); /* var(--gray-400) #9D9EA2 @ alpha 0 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.purchasing-page .pm-license:hover {
    border-color: var(--gray-400);            /* stays gray — no red hover border */
    box-shadow: 4px 4px 0 0 var(--gray-400);  /* #9D9EA2 — 4px bottom-right gray offset */
    transform: none;                          /* offset shadow only; overrides .card:hover lift */
}

/* ── Header: icon (left) + red bar bleeding to the card's right edge ──────── */
.purchasing-page .pm-license__head {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    /* cancel the card's right padding so the bar reaches the card edge */
    margin-right: calc(var(--space-lg) * -1);
}
.purchasing-page .pm-license__icon {
    display: block;
    height: auto;
    flex-shrink: 0;
}
.purchasing-page .pm-license__icon--perpetual { width: 130px; }
.purchasing-page .pm-license__icon--subscription { width: 170px; }

.purchasing-page .pm-license__bar {
    flex: 1 1 auto;
    background-color: var(--red);
}
.purchasing-page .pm-license__title {
    font-family: var(--font-display);
    font-size: var(--fs-subheading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--white);
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    overflow-wrap: break-word;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
.purchasing-page .pm-license__desc {
    color: var(--color-black);
    line-height: 1.7;
    margin: 0;
}

.purchasing-page .pm-license__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.purchasing-page .pm-license__features li {
    position: relative;
    padding-left: var(--space-lg);
    color: var(--color-black);
    line-height: 1.55;
}
.purchasing-page .pm-license__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--red);
}

/* CTA button: auto-width, left-aligned (a flex child would otherwise stretch
   to the full card width). Vertical spacing comes from the card's flex gap. */
.purchasing-page .pm-license__cta {
    align-self: flex-start;
}

/* Promotional note pinned to the bottom of the card (keeps both cards even). */
.purchasing-page .pm-license__note {
    margin: auto 0 0;
    color: var(--red);
    font-weight: 600;
    line-height: 1.5;
}

/* ── Responsive: stack icon above the bar on small screens ────────────────── */
@media (max-width: 575px) {
    .purchasing-page .pm-license__head {
        flex-direction: column;
        align-items: flex-start;
    }
    .purchasing-page .pm-license__bar {
        align-self: stretch;
    }
    .purchasing-page .pm-license__icon--perpetual { width: 110px; }
    .purchasing-page .pm-license__icon--subscription { width: 120px; }
}