.root {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-24) var(--spacing-16) var(--spacing-60);
    background: var(--color-bg-neutral-light);
    font-family: var(--font-default);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    width: 100%;
    /* 540 = the design's 492px cards + the section card's 24px padding ×2 (Figma checkout column).
       520 here rendered 472px cards, crowding the renewal/price row (e.g. the pharmacy caption). */
    max-width: 540px;
}

.intro {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    padding: var(--spacing-8) var(--spacing-4) 0;
}

.title {
    color: var(--color-text-primary);
}

.subtitle {
    color: var(--color-text-secondary);
}

.card {
    position: relative;
    padding: var(--spacing-24);
    background: var(--color-bg-base-light);
    border-radius: var(--border-radius-lg);
}

@media screen and (width <= 768px) {
    .root {
        padding: var(--spacing-16) var(--spacing-12) var(--spacing-40);
    }

    .card {
        padding: var(--spacing-20);
    }
}

/* Sticky-bar express copy. Stays MOUNTED either way (a remount would tear down the Stripe iframe
   on every scroll transition); hides by collapsing its grid row (1fr → 0fr) with a fade, so the
   bar smoothly grows/shrinks around the CTA instead of the button snapping in via a display
   toggle. The negative margin cancels the bar's flex gap so the collapsed row is truly zero-height;
   the delayed `visibility` keeps the collapsed Stripe iframe out of the tab order. */
.stickyExpress {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition:
        grid-template-rows 0.18s ease,
        opacity 0.18s ease,
        margin-bottom 0.18s ease,
        visibility 0s linear;
}

.stickyExpress > div {
    min-height: 0;
}

/* Clip ONLY while masked: a permanent `overflow: hidden` here deadlocks the Express Checkout
   Element's lazy render — an instance that LOADS inside a clipped wrapper (the persistent bar
   copies mount masked) sticks as a blank 8px stub and never paints. With the clip scoped to the
   hidden pose, unmasking removes it and Stripe's visibility recovery repaints the buttons. The
   exit still clips (the class lands at hide-start); the entry grows unclipped, covered by the
   row's 0→1 opacity fade. */
.stickyExpressHidden > div {
    overflow: hidden;
}

.stickyExpressHidden {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-bottom: calc(var(--spacing-8) * -1);
    pointer-events: none;
    visibility: hidden;
    transition:
        grid-template-rows 0.18s ease,
        opacity 0.18s ease,
        margin-bottom 0.18s ease,
        visibility 0s linear 0.18s;
}