/* Pricing page — subscription plan cards, the credit-pack picker and the FAQ accordion.

   Unlike the marketing pages this one sets `body.has-app-sidebar`, so the
   scoped mini-preflight in app-shell.css supplies `border-style: solid` and
   the `border-width` / `border-color` pairs below do paint — exactly as the
   Tailwind `border-*` utilities did here. */

/* ---------- header ---------- */

.pr-head {
    margin-top: 5rem;
    margin-bottom: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: .5rem;
    text-align: center;
}

.pr-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}

@media (min-width: 640px) {
    .pr-title { font-size: 54px; }
}

.pr-sub {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    max-width: 32rem;
    font-size: 17px;
    color: rgb(113 113 122);
}

/* ---------- plan cards ---------- */

.pr-section {
    margin-top: 4rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.pr-wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 1240px;
}

.pr-cards {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 700px) {
    .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Four across only once the viewport can spare it next to the sidebar rail —
   below this the cards would be narrower than their own feature lines. */
@media (min-width: 1180px) {
    .pr-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-radius: 28px;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    padding: 2rem 1.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.pr-card--featured {
    border-color: rgb(24 24 27);
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .35);
}

/* The pack picker opens downward, so the pay-as-you-go card has to sit above
   its neighbours in the row. */
.pr-card--payg { z-index: 1; }

.pr-badge {
    position: absolute;
    top: -.75rem;
    left: 1.75rem;
    border-radius: 9999px;
    background-color: rgb(24 24 27);
    padding: .3rem .75rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgb(255 255 255);
}

.pr-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgb(161 161 170);
}

.pr-priceline {
    margin-top: .75rem;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.pr-price {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.025em;
}

.pr-price-note {
    font-size: 15px;
    color: rgb(161 161 170);
}

.pr-price-sub {
    margin-top: .5rem;
    min-height: 2.5rem;
    font-size: 14px;
    color: rgb(113 113 122);
}

/* ---------- pack picker ---------- */

.pr-picker { position: relative; }

.pr-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(250 250 250);
    padding: .875rem 1rem;
    text-align: left;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.pr-trigger:hover { background-color: rgb(244 244 245); }

.pr-lines {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.pr-pack-title {
    font-size: 14px;
    font-weight: 600;
}

.pr-pack-meta {
    font-size: 12px;
    color: rgb(113 113 122);
}

/* `payg-pack-arrow` is also the picker script's hook. */
.payg-pack-arrow {
    flex-shrink: 0;
    color: rgb(161 161 170);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.payg-pack-arrow.pr-is-flipped { transform: rotate(180deg); }

.pr-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    margin-top: .375rem;
    display: none;
    overflow: hidden;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    padding-top: .375rem;
    padding-bottom: .375rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.pr-menu.pr-is-open { display: block; }

/* `payg-pack-option` is also the picker script's hook. */
.pr-option {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    text-align: left;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.pr-option:hover,
.pr-option--selected { background-color: rgb(250 250 250); }

.pr-option-price {
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    color: rgb(24 24 27);
}

.pr-cta {
    display: flex;
    height: 3rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background-color: rgb(24 24 27);
    font-size: 15px;
    font-weight: 600;
    color: rgb(255 255 255);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.pr-cta:hover { background-color: rgb(0 0 0); }

/* Secondary CTA for the non-featured cards. */
.pr-cta--quiet {
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    color: rgb(24 24 27);
}

.pr-cta--quiet:hover { background-color: rgb(244 244 245); }

.pr-features {
    font-size: 14px;
    color: rgb(82 82 91);
}

/* Was Tailwind's `space-y-3`. */
.pr-features > :not([hidden]) ~ :not([hidden]) {
    margin-top: .75rem;
    margin-bottom: 0;
}

.pr-feature {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.pr-check {
    flex-shrink: 0;
    color: rgb(16 185 129);
}

/* ---------- FAQ ---------- */

.pr-faq {
    margin-top: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.pr-faq-wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
}

.pr-faq-title {
    margin-bottom: 2.5rem;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.025em;
}

/* Was Tailwind's `divide-y divide-zinc-200`. */
.pr-faq-list > :not([hidden]) ~ :not([hidden]) {
    border-top-width: 1px;
    border-bottom-width: 0;
    border-color: rgb(228 228 231);
}

.pr-faq-item {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.pr-faq-summary {
    display: flex;
    cursor: pointer;
    list-style-type: none;
    align-items: center;
    justify-content: space-between;
}

.pr-faq-q { font-weight: 500; }

.pr-faq-icon {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
    color: rgb(161 161 170);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

/* Was `group-open:rotate-45` — the plus becomes a cross only when open. */
.pr-faq-item[open] .pr-faq-icon { transform: rotate(45deg); }

.pr-faq-a {
    margin-top: .75rem;
    font-size: 14px;
    color: rgb(82 82 91);
}

.pr-faq-list-inner {
    margin-top: .75rem;
    font-size: 14px;
    color: rgb(82 82 91);
}

/* Was Tailwind's `space-y-2`. */
.pr-faq-list-inner > :not([hidden]) ~ :not([hidden]) {
    margin-top: .5rem;
    margin-bottom: 0;
}