/* ==========================================================================
   Pricing page — /pricing
   --------------------------------------------------------------------------
   Additive stylesheet. Every rule is scoped under .pricing-page so nothing
   here can leak into the shared styles the consuming sites merge.

   Source of truth: Figma M6fH00cIP9Q28idYN7jG1L, frame 8114:44585 (1920 wide)
     Hero + plan cards   8114:44586
     Comparison table    8114:44720
     Payment methods     8160:35249
     Trust cards         8114:45641
     FAQs                8114:45674

   Fonts come from googleapis.css (Open Sans 400/500/600/700).
   Dark mode is in darktheme.css (`.darkmode .pricing-page`): it re-points the
   tokens below and handles the few things a token cannot.
   ========================================================================== */

.pricing-page {
    /* Figma variables (same set as the account page); the ones dark mode
       re-points are the reason these are tokens. */
    --pr-heading: #13231c;
    --pr-paragraph: #3a5247;
    --pr-muted: #6f867d;
    --pr-placeholder: #9bb0a7;
    --pr-stroke: #dbe8e2;
    --pr-surface: #ffffff;
    --pr-background: #f6f9f8;
    --pr-light: #f0f8f4;
    --pr-primary: #16a085;
    --pr-red: #dc2626;
    --pr-on-ink: #ffffff;
    --pr-ink-hover: #26382f;
    --pr-tab-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 2px 2px rgba(0, 0, 0, .04);
    --pr-card-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    --pr-soft-shadow: 0 1px 2px rgba(0, 0, 0, .04);

    display: block;
    background: var(--pr-surface);
    color: var(--pr-heading);
    /* The design's body text; rules below only restate what differs. */
    font-size: 16px;
    line-height: 24px;
    text-align: start;
}

.pricing-page :is(h1, h2, h3, p, ul) {
    margin: 0;
}

.pricing-page ul {
    padding: 0;
    list-style: none;
}

.pricing-page .pricing-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pricing-page :is(a, button):focus-visible {
    outline: 2px solid rgba(22, 160, 133, .35);
    outline-offset: 2px;
}

/* Every section sits in a 1140 column with 16px gutters. */
.pricing-page .pricing-section {
    max-width: 1140px;
    margin: 0 auto;
    padding: 80px 16px;
}

/* Title + lead, shared by the hero, trust and FAQ headings. */
.pricing-page .pricing-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.pricing-page .pricing-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 48px;
}

.pricing-page .pricing-lead {
    color: var(--pr-paragraph);
}

/* --------------------------------------------------------------------------
   Monthly / Yearly switch — 8114:45746 (hero) and 8129:32452 (table)
   -------------------------------------------------------------------------- */

.pricing-page .pricing-billing {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 10px;
    background: var(--pr-light);
}

.pricing-page .pricing-billing-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pr-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.pricing-page .pricing-billing-tab:hover,
.pricing-page .pricing-billing-tab[aria-pressed="true"] {
    color: var(--pr-heading);
}

.pricing-page .pricing-billing-tab[aria-pressed="true"] {
    background: var(--pr-surface);
    box-shadow: var(--pr-tab-shadow);
    cursor: default;
}

.pricing-page .pricing-billing-save {
    font-size: 12px;
    line-height: 16px;
    color: var(--pr-red);
}

/* The hero switch has 160px tabs (shrinking only below ~358px viewports);
   the table one hugs its labels. */
.pricing-page .pricing-billing--wide {
    max-width: 100%;
}

.pricing-page .pricing-billing--wide .pricing-billing-tab {
    width: 160px;
    min-width: 0;
}

/* Values that change with the switch are printed once per period; everything that is not the
   page's current billing state is hidden. One line per Duration Type a plan can be sold on,
   because CSS cannot match data-period against data-billing. */
.pricing-page:not([data-billing="weekly"]) [data-period="weekly"],
.pricing-page:not([data-billing="monthly"]) [data-period="monthly"],
.pricing-page:not([data-billing="bi-monthly"]) [data-period="bi-monthly"],
.pricing-page:not([data-billing="tri-monthly"]) [data-period="tri-monthly"],
.pricing-page:not([data-billing="quart-yearly"]) [data-period="quart-yearly"],
.pricing-page:not([data-billing="semi-yearly"]) [data-period="semi-yearly"],
.pricing-page:not([data-billing="yearly"]) [data-period="yearly"],
.pricing-page:not([data-billing="bi-yearly"]) [data-period="bi-yearly"] {
    display: none;
}

/* --------------------------------------------------------------------------
   Buttons. Card CTAs are .pricing-btn, table CTAs .pricing-btn-sm; both take
   the --ink / --primary colour modifiers below.
   -------------------------------------------------------------------------- */

.pricing-page .pricing-btn,
.pricing-page .pricing-btn-sm,
.pricing-page .pricing-faqs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: background-color .15s ease;
}

.pricing-page .pricing-btn {
    width: 100%;
    padding: 12px 24px;
    border-radius: 12px;
    text-align: center;
}

/* 40px tall with its 1px border inside, as in Figma — hence 7/11/7/15. */
.pricing-page .pricing-btn-sm {
    display: inline-flex;
    gap: 8px;
    padding: 7px 11px 7px 15px;
    border: 1px solid var(--pr-stroke);
    border-radius: 8px;
    background: var(--pr-surface);
    color: var(--pr-heading);
    white-space: nowrap;
}

.pricing-page .pricing-btn-sm:hover {
    background: var(--pr-light);
}

.pricing-page .pricing-btn--ink {
    border-color: transparent;
    background: var(--pr-heading);
    color: var(--pr-on-ink);
}

.pricing-page .pricing-btn--ink:hover {
    background: var(--pr-ink-hover);
}

.pricing-page .pricing-btn--primary {
    background: var(--pr-primary);
    color: #fff;
}

.pricing-page .pricing-btn--primary:hover {
    background: #12816b;
}

/* --------------------------------------------------------------------------
   Hero + plan cards — 8114:44586
   -------------------------------------------------------------------------- */

.pricing-page .pricing-hero .pricing-head {
    padding-bottom: 32px;
}

.pricing-page .pricing-billing-row {
    display: flex;
    justify-content: center;
    padding-bottom: 32px;
}

/* Cards hug their content and sit top-aligned (Figma 8114:44590: hug height, row align min),
   so the foot line follows the feature list instead of being pushed to a fixed card bottom. */
.pricing-page .pricing-plans {
    display: flex;
    flex-wrap: wrap;
    /* Every card is as tall as the tallest: the lists are written per plan and differ in
       length, and a card ending short of its neighbour reads as a broken row. */
    align-items: stretch;
    justify-content: center;
    gap: 20px;
}

.pricing-page .pricing-plan {
    flex: 1 1 0;
    min-width: 238px;
    max-width: 356px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Figma's inside stroke takes no layout space: content is 24px from the
       outer edge and 308 wide, so the 1px border comes out of the padding. */
    padding: 23px;
    overflow: hidden;
    border: 1px solid var(--pr-stroke);
    border-radius: 24px;
    background: var(--pr-surface);
    box-shadow: var(--pr-card-shadow);
}

.pricing-page .pricing-plan--popular {
    border-color: var(--pr-primary);
    background: linear-gradient(180deg, var(--pr-surface) 0%, var(--pr-background) 100%);
    box-shadow: 0 1px 2px rgba(22, 160, 133, .12);
}

.pricing-page .pricing-included,
.pricing-page .pricing-included ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pricing-page .pricing-plan-top {
    display: flex;
    align-items: center;
    gap: 24px;
}

.pricing-page .pricing-plan-name {
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.pricing-page .pricing-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 4px 6px;
    border-radius: 999px;
    background: var(--pr-light);
    color: var(--pr-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.pricing-page .pricing-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* "$" is top-aligned against the 40px amount, not centred. */
.pricing-page .pricing-price-value {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.pricing-page .pricing-price-currency {
    font-size: 18px;
    line-height: 28px;
}

.pricing-page .pricing-price-amount {
    font-size: 40px;
    font-weight: 600;
    line-height: 40px;
}

.pricing-page .pricing-price-meta {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 16px;
    color: var(--pr-paragraph);
    white-space: nowrap;
}

.pricing-page .pricing-included-title {
    font-weight: 600;
    color: var(--pr-paragraph);
}

.pricing-page .pricing-included li {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Custom quote — 8117:57439 */
.pricing-page .pricing-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 32px;
    font-size: 14px;
    line-height: 20px;
    color: var(--pr-muted);
    text-align: center;
}

.pricing-page .pricing-custom-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pricing-page .pricing-custom-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.pricing-page .pricing-custom-link {
    border-radius: 2px;
    font-weight: 500;
    color: var(--pr-primary);
}

.pricing-page .pricing-custom-link:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Icons live in img/pricing/ (Figma exports). Fixed-colour ones are plain
   <img>; these three change colour with the text (and dark mode), so the same
   files are used as a mask painted in currentColor.
   -------------------------------------------------------------------------- */

/* .pricing-features holds a Rich Text key as the admin wrote it, so its items carry no tick
   span of their own and take one from a pseudo-element instead. */
.pricing-page .pricing-tick,
.pricing-page .pricing-features li::before,
.pricing-page .pricing-chevron,
.pricing-page .pricing-faq-icon {
    flex: none;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: var(--pr-icon) center / contain no-repeat;
    mask: var(--pr-icon) center / contain no-repeat;
}

.pricing-page .pricing-tick,
.pricing-page .pricing-features li::before {
    width: 20px;
    height: 20px;
    --pr-icon: url("../img/pricing/tick.svg");
}

.pricing-page .pricing-features li::before {
    content: "";
}

/* Nothing written in the key yet: no empty item taking the list's 16px gap. */
.pricing-page .pricing-features:empty {
    display: none;
}

.pricing-page .pricing-chevron {
    width: 16px;
    height: 16px;
    --pr-icon: url("../img/pricing/chevron-right.svg");
}

/* --------------------------------------------------------------------------
   Comparison table — 8114:44720
   Bottom rules are inset shadows: Figma draws them INSIDE the 72px rows, a
   border would make every row 73px.
   -------------------------------------------------------------------------- */

.pricing-page .pricing-compare {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 0;
    padding-bottom: 0;
}

.pricing-page .pricing-compare-head,
.pricing-page .pricing-compare-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-page .pricing-compare-head,
.pricing-page .pricing-compare-row,
.pricing-page .pricing-compare-group-title {
    box-shadow: inset 0 -1px 0 var(--pr-stroke);
}

.pricing-page .pricing-compare-select {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 0;
}

/* Figma sets this one label in Inter; the site only loads Open Sans. */
.pricing-page .pricing-compare-label,
.pricing-page .pricing-compare-plan-sum {
    font-size: 14px;
    line-height: 20px;
}

.pricing-page .pricing-compare-label {
    color: var(--pr-muted);
}

.pricing-page .pricing-compare-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    text-align: center;
}

.pricing-page .pricing-compare-plan-name {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.pricing-page .pricing-compare-plan-sum {
    margin-top: 8px;
    color: var(--pr-paragraph);
}

/* Plan picker — phone table only (8161:63749). 44px right = 16 gap to the
   edge + 16 icon + 12 gap; 15 = the 16px inset less the inside border. */
.pricing-page .pricing-compare-pick {
    display: none;
    width: 100%;
    height: 48px;
    padding: 0 44px 0 15px;
    border: 1px solid var(--pr-stroke);
    border-radius: 12px;
    background: var(--pr-surface) url("../img/pricing/chevron-down.svg") no-repeat right 15px center / 16px;
    color: var(--pr-heading);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.pricing-page .pricing-compare-group-title {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 22px 0;
    color: var(--pr-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.pricing-page .pricing-compare-feature,
.pricing-page .pricing-compare-value {
    display: flex;
    align-items: center;
    padding: 24px 0;
    font-weight: 500;
}

.pricing-page .pricing-compare-feature {
    color: var(--pr-paragraph);
}

.pricing-page .pricing-compare-value {
    justify-content: center;
    padding-inline: 24px;
}

/* A line the other plan lists and this one does not. */
.pricing-page .pricing-compare-off {
    color: var(--pr-muted);
}

/* --------------------------------------------------------------------------
   Payment methods — 8160:35249
   Figma composites each logo at 60% with the Luminosity blend mode, which on
   the white page reads as grey.
   -------------------------------------------------------------------------- */

.pricing-page .pricing-payments {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-bottom: 48px;
}

.pricing-page .pricing-pay-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}

.pricing-page .pricing-pay-logos li {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 4px;
}

.pricing-page .pricing-pay-logo {
    display: block;
    opacity: .6;
    mix-blend-mode: luminosity;
}

.pricing-page .pricing-pay-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--pr-placeholder);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Trust — 8114:45641
   -------------------------------------------------------------------------- */

.pricing-page .pricing-trust-box {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
    padding: 16px;
    border-radius: 24px;
    background: var(--pr-background);
}

.pricing-page .pricing-trust-card {
    flex: 1 1 0;
    min-width: min(300px, 100%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    background: var(--pr-surface);
    box-shadow: var(--pr-soft-shadow);
}

.pricing-page .pricing-trust-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* h3 needs its colour set: darktheme.css paints every bare h3 white. */
.pricing-page .pricing-trust-title {
    color: var(--pr-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.pricing-page .pricing-trust-desc {
    color: var(--pr-paragraph);
}

/* --------------------------------------------------------------------------
   FAQs — 8114:45674
   -------------------------------------------------------------------------- */

.pricing-page .pricing-faqs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 48px;
}

.pricing-page .pricing-faqs-aside {
    flex: 1 1 0;
    min-width: min(300px, 100%);
    max-width: 343px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pricing-page .pricing-faqs-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-radius: 24px;
    background: var(--pr-background);
}

.pricing-page .pricing-faqs-cta-label {
    font-weight: 600;
}

/* Same button as the home page's .faqs-cta-btn (ai-math-solver.css, which is
   not loaded here). */
.pricing-page .pricing-faqs-btn {
    gap: 6px;
    width: 100%;
    padding: 7px 15px;
    border: 1px solid #148e76;
    border-radius: 50px;
    background: linear-gradient(180deg, #22ac91 20.43%, #16a085 53.1%);
    box-shadow: 0 2px 0 0 #148e76;
    color: #fff;
    transition: filter .2s ease;
}

.pricing-page .pricing-faqs-btn:hover {
    filter: brightness(.96);
}

.pricing-page .pricing-faqs-list {
    flex: 1 1 0;
    min-width: min(300px, 100%);
}

/* Figma centres this 1px rule on the row edge and counts the outer half in
   the layout: each row is 0.5px taller than its content, the rule straddles. */
.pricing-page .pricing-faq {
    margin-bottom: .5px;
    background: var(--pr-surface);
    box-shadow: inset 0 -.5px 0 var(--pr-stroke), 0 .5px 0 var(--pr-stroke);
}

/* Text fills up to the chevron (no gap), as in Figma. The chevron is centred
   on a closed row and pinned to the top of an open one. */
.pricing-page .pricing-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    border: 0;
    background: none;
    color: var(--pr-heading);
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

/* Chevron points up when open (Figma), down when closed. */
.pricing-page .pricing-faq-icon {
    width: 16px;
    height: 16px;
    color: var(--pr-paragraph);
    transform: rotate(180deg);
    transition: transform .2s ease;
    --pr-icon: url("../img/pricing/chevron-up.svg");
}

.pricing-page .pricing-faq-q[aria-expanded="true"] {
    align-items: flex-start;
}

.pricing-page .pricing-faq-q[aria-expanded="true"] .pricing-faq-icon {
    transform: none;
}

.pricing-page .pricing-faq-a {
    padding-bottom: 24px;
    color: var(--pr-paragraph);
}

/* An answer may carry a walkthrough image (the pricing page's cancellation GIF).
   --pr-stroke is re-pointed for dark mode, so the frame follows the theme; the
   image itself is dimmed there by the global `.darkmode img` rule, like the rest. */
.pricing-page .pricing-faq-media {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    margin-top: 16px;
    border: 1px solid var(--pr-stroke);
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Register plan page — 8160:34557. Heading, switch, payments and FAQ are the
   shared rules above; the plan chooser box (8167:76028) is the new part.
   -------------------------------------------------------------------------- */

.pricing-page--register .pricing-payments {
    padding-top: 48px;
}

/* The register frame uses a different grey here than the pricing frame. */
.pricing-page--register .pricing-pay-label {
    color: #98a1ae;
}

.pricing-page .register-chooser {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
    padding: 12px;
    border-radius: 24px;
    background: var(--pr-background);
}

.pricing-page .register-included {
    flex: 1 1 0;
    min-width: min(300px, 100%);
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}

.pricing-page .register-intro,
.pricing-page .register-plan-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pricing-page .register-intro {
    max-width: 300px;
}

.pricing-page .register-intro-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}

.pricing-page .register-intro-text,
.pricing-page .pricing-included--sm li {
    font-size: 14px;
    line-height: 20px;
}

.pricing-page .register-intro-text {
    color: var(--pr-muted);
}

.pricing-page .pricing-included--sm .pricing-tick,
.pricing-page .pricing-included--sm .pricing-features li::before {
    width: 16px;
    height: 16px;
    --pr-icon: url("../img/pricing/tick-sm.svg");
}

.pricing-page .register-plans {
    flex: 1 1 420px;
    min-width: 0;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px 24px 24px;
    border-radius: 16px;
    background: var(--pr-surface);
    box-shadow: var(--pr-soft-shadow);
}

/* Figma's rule sits 16px under the title and takes no height. */
.pricing-page .register-plans-title {
    padding-bottom: 16px;
    box-shadow: inset 0 -1px 0 var(--pr-stroke);
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -.096px;
}

.pricing-page .register-plan {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 24px, a rule, 24px between plans — the rule is the next plan's top edge. */
.pricing-page .register-plan + .register-plan {
    padding-top: 24px;
    box-shadow: inset 0 1px 0 var(--pr-stroke);
}

.pricing-page .register-plan-head {
    gap: 4px;
}

.pricing-page .register-plan-name {
    font-weight: 600;
}

.pricing-page .register-plan-tagline {
    font-size: 12px;
    line-height: 16px;
    color: var(--pr-muted);
}

.pricing-page .register-plan-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.pricing-page .register-plan-row .pricing-price {
    flex: 1 1 auto;
}

.pricing-page .register-plan-row .pricing-price-value {
    gap: 2px;
}

.pricing-page .register-plan-row .pricing-price-amount {
    font-size: 36px;
    line-height: 36px;
}

/* --------------------------------------------------------------------------
   RTL — layout is flex/logical already; only the pointing icons flip.
   -------------------------------------------------------------------------- */

[dir="rtl"] .pricing-page .pricing-chevron,
[dir="rtl"] .pricing-page .pricing-faqs-btn img {
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Phone — Figma 8161:36243 (375 wide). Everything not listed here is the
   desktop rule, already wrapping to this width through the frames' own
   min/max widths.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .pricing-page .pricing-hero,
    .pricing-page .pricing-trust {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* The table shows one plan at a time, picked in the select. */
    .pricing-page[data-compare-plan="0"] .pricing-compare [data-plan="1"],
    .pricing-page[data-compare-plan="1"] .pricing-compare [data-plan="0"] {
        display: none;
    }

    .pricing-page .pricing-compare-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .pricing-page .pricing-compare-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pricing-page .pricing-compare-select {
        align-items: stretch;
    }

    .pricing-page .pricing-compare-label {
        text-align: center;
    }

    .pricing-page .pricing-compare-select .pricing-billing {
        display: flex;
    }

    .pricing-page .pricing-compare-select .pricing-billing-tab {
        flex: 1 1 0;
    }

    .pricing-page .pricing-compare-pick {
        display: block;
    }

    .pricing-page .pricing-compare-plan {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding: 24px 0;
        text-align: start;
    }

    .pricing-page .pricing-compare-plan-info {
        flex: 1 1 auto;
        min-width: 0;
    }

    .pricing-page .pricing-compare-value {
        justify-content: flex-end;
        padding-inline: 0;
    }

    /* Register chooser (8170:76513): the columns stack full width and each
       plan's button drops under its price at full width. */
    .pricing-page .register-plans {
        max-width: none;
    }

    .pricing-page .register-plan-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pricing-page .register-plan-row .pricing-price-value {
        gap: 4px;
    }
}