/*
 * Pricing page (marketing/pricing.blade.php). Builds on home.css (plans, FAQ, nav, footer) and adds the page's top
 * spacing, the feature comparison table and Meta's message fees.
 */

/* The plans open the page, below the floating nav */
.pricing-page #pricing { padding-top: 7.5rem; }
@media (min-width: 768px) { .pricing-page #pricing { padding-top: 9rem; } }
.pricing-page #pricing h1.h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }

/* ---------- Comparison: one card per group ---------- */
.pr-compare { scroll-margin-top: 5rem; }
.pr-cards { --plan-w: 6.5rem; display: grid; gap: .9rem; max-width: 60rem; margin: 2.5rem auto 0; }
.pr-card {
    border-radius: 1.25rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow .25s;
}
.pr-card[open] { box-shadow: inset 0 0 0 1px var(--line-2); }

/* Head: group title, the plan names over their columns, a chevron */
.pr-card-head {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols), var(--plan-w)) 1.5rem; align-items: center;
    gap: 0; padding: 1.1rem 1.25rem; cursor: pointer; list-style: none;
}
.pr-card-head::-webkit-details-marker { display: none; }
.pr-card-head:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; border-radius: 1.25rem; }
.pr-card-title { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; color: var(--text); }
.pr-card-title small { margin-left: .6rem; font-size: .74rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.pr-card-plan { text-align: center; font-size: .74rem; font-weight: 600; color: var(--text-3); transition: opacity .2s; }
.pr-card-plan.is-popular { color: var(--mint); }
.pr-card:not([open]) .pr-card-plan { opacity: 0; }
.pr-card-chev { display: grid; place-items: center; justify-self: end; width: 1.5rem; height: 1.5rem; color: var(--text-3); transition: transform .3s var(--ease); }
.pr-card-chev svg { width: .9rem; height: .9rem; }
.pr-card[open] .pr-card-chev { transform: rotate(180deg); }

/* Rows: no grid lines, soft spacing, a gentle highlight on hover */
.pr-rows { padding: 0 .5rem .6rem; }
.pr-row {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols), var(--plan-w)) 1.5rem; align-items: center;
    padding: .7rem .75rem; border-radius: .85rem; transition: background .2s;
}
.pr-row:hover { background: rgba(255, 255, 255, .03); }
.pr-feat b { display: block; font-size: .9rem; font-weight: 600; color: var(--text); }
.pr-feat small { display: block; margin-top: .1rem; font-size: .76rem; line-height: 1.45; color: var(--text-3); }
.pr-cell { display: grid; place-items: center; min-height: 1.5rem; }
.pr-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(61, 220, 151, .14); }
.pr-cell.is-popular .pr-dot { box-shadow: 0 0 0 4px rgba(61, 220, 151, .22), 0 0 14px rgba(61, 220, 151, .45); }
/* Not included: a quiet grey dot, no halo */
.pr-dot.is-off, .pr-cell.is-popular .pr-dot.is-off { background: rgba(255, 255, 255, .16); box-shadow: none; }
.pr-val { font-size: .86rem; font-weight: 700; color: var(--text); }
.pr-cell.is-popular .pr-val { color: var(--mint); }

.pr-cards-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: 2rem; }
.pr-cards-cta span { width: 100%; text-align: center; font-size: .9rem; color: var(--text-2); }
@media (min-width: 640px) { .pr-cards-cta span { width: auto; margin-right: .5rem; } }

/* Phones: narrower plan columns, the hint drops under the name in smaller type */
@media (max-width: 639px) {
    .pr-cards { --plan-w: 3.9rem; }
    .pr-card-head { padding: 1rem .9rem; }
    .pr-card-title small { display: block; margin: .15rem 0 0; }
    .pr-card-plan { font-size: .64rem; line-height: 1.2; }
    .pr-rows { padding: 0 .25rem .5rem; }
    .pr-row { padding: .65rem .65rem; }
    .pr-feat b { font-size: .84rem; }
    .pr-feat small { display: none; }
}

/* ---------- Meta's message fees ---------- */
.pr-fees { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .pr-fees { grid-template-columns: repeat(3, 1fr); } }
.pr-fee {
    padding: 1.5rem; border-radius: 1.25rem;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.pr-fee-tag { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pr-fee b { display: block; margin: .6rem 0 .5rem; font-size: 1.9rem; letter-spacing: -.03em; color: var(--text); }
.pr-fee b small { font-size: .82rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.pr-fee p { font-size: .88rem; line-height: 1.55; color: var(--text-2); }
.pr-fee.is-zero { background: rgba(61, 220, 151, .06); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .3); }
.pr-fee.is-zero .pr-fee-tag, .pr-fee.is-zero b { color: var(--mint); }