/* Muse Models — Website v2 Pricing (card W1 #19; card W2 #21). Page-scoped (`pr-` prefix). Values follow
   the approved W0 pricing mockup v1.0 and the brand tokens in css/tokens.css; buttons are the shared
   .btn styles. The mockup's container queries are the viewport breakpoints here. The cards come from
   the Portal's offers (js/offers.js): 1, 2 or 3 of them, centred at the 3-up card width. */

/* intro */
.pr-hero{background:radial-gradient(900px 420px at 50% 0%,rgba(139,108,255,.14),transparent 70%)}
.pr-hero-inner{max-width:820px;padding-top:76px;padding-bottom:36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.pr-hero h1{font-size:clamp(2.2rem,5.4vw,3.25rem);line-height:1.08}
.pr-lead{color:var(--text-2);font-size:1.12rem;max-width:40em}
.pr-pill{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-violet);background:var(--gold);padding:5px 12px;border-radius:999px}
.pr-pill-skel{width:min(260px,80%);height:29px;border-radius:999px}

/* plans: Trial, Growth (emphasised when shown), Scale — whichever the offers make renderable */
.pr-plans-wrap{padding-bottom:56px;scroll-margin-top:80px}   /* #plans (card G4 #35): the cards land below the 68px sticky nav */
.pr-plans-wrap:focus{outline:none}                            /* focused on an in-page jump to the plans, not a control */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}   /* landing on /pricing#plans: a jump, not the site's smooth scroll */
.pr-plans{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;align-items:stretch;padding:8px 0 20px}
.pr-card{flex:0 1 calc((100% - 32px) / 3);min-width:0;border:1px solid var(--line-strong);border-radius:var(--r-flagship);background:var(--bg-2);padding:28px 24px;display:flex;flex-direction:column;gap:14px}
.pr-card.pr-feature{border-color:rgba(217,183,121,.6);box-shadow:0 0 70px rgba(217,183,121,.08)}
.pr-card .pr-name{font-family:var(--font-mono);font-weight:400;font-size:12px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-bright)}
.pr-card.pr-feature .pr-name{color:var(--gold)}
.pr-line{font-family:var(--font-head);font-size:1.45rem;font-weight:600;line-height:1.15;letter-spacing:-.01em;min-height:2.3em}
.pr-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:2px}
.pr-amt{font-family:var(--font-head);font-weight:700;font-size:2.6rem;line-height:1.05;color:var(--gold)}
.pr-per{font-size:.95rem;color:var(--text-2)}
.pr-was{color:var(--text-2);text-decoration:line-through}
.pr-badge{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(217,183,121,.5);padding:2px 8px;border-radius:999px;align-self:center}
.pr-sub{font-size:.9rem;color:var(--text-2);line-height:1.5;min-height:2.7em}
.pr-sub b{color:var(--text);font-weight:600}
.pr-rows{list-style:none;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);margin-top:4px}
.pr-rows li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.pr-ic{flex:none;width:20px;text-align:center;font-weight:600}
.pr-ic.ok{color:var(--violet-bright)}
.pr-ic.lock{color:var(--text-2);font-size:.85rem}
.pr-ic.na{color:var(--text-2)}
.pr-rows li.is-locked{color:var(--text-2)}
.pr-rows .qty{color:var(--text-2)}
.pr-oa{font-size:.88rem;color:var(--text-2);border-left:2px solid var(--gold);padding-left:10px}
.pr-card .btn{margin-top:auto;width:100%;justify-content:center}
/* loading skeleton (no numbers): the real card's boxes with neutral bars, sized like a card with a special
   (its badge on a second line) and one wrapped row, so the cards land without a jump */
.pr-skel .pr-name .mm-skel{width:5em}
.pr-skel .pr-line .mm-skel{width:80%}
.pr-skel .pr-price{min-height:calc(2.6rem * 1.05 + 28px)}
.pr-skel .pr-amt .mm-skel{width:3.2em;height:.8em}
.pr-skel .pr-sub .mm-skel{width:65%}
.pr-skel .pr-rows li .mm-skel{width:62%;height:.8em;margin:.4em 0}
.pr-skel .pr-rows li:nth-child(8){padding-bottom:calc(9px + 1.6em)}
.pr-skel-btn{justify-content:center;line-height:normal}
.pr-skel-btn::before{content:"\200b"}
.pr-skel-btn .mm-skel{width:40%}
/* fail safe: the offers can't be read, so a panel replaces the cards */
.pr-fallback{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:640px;margin:8px auto 20px;padding:40px 32px;text-align:center;border:1px solid var(--line-strong);border-radius:var(--r-flagship);background:var(--bg-2)}
.pr-fallback h2{font-size:1.45rem;line-height:1.2;letter-spacing:-0.01em}
.pr-fallback p{color:var(--text-2)}
.pr-fallback p a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.pr-under{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:14px 0 8px;color:var(--text-2);font-size:.95rem}
.pr-under strong{color:var(--text);font-weight:600}
.pr-foot{font-size:.82rem;color:var(--text-2)}

/* what happens next */
.pr-next{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.pr-next-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pr-next h2{font-size:2rem;line-height:1.15}
.pr-steps{list-style:none;display:flex;flex-direction:column;gap:14px}
.pr-steps li{display:flex;gap:14px}
.pr-num{font-family:var(--font-mono);color:var(--violet-bright);flex:none}

/* questions */
.pr-faq{max-width:780px}
.pr-faq h2{font-size:2rem;margin-bottom:22px}
.pr-faq details{border-bottom:1px solid var(--line);padding:16px 0}
.pr-faq summary{cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.pr-faq summary::-webkit-details-marker{display:none}
.pr-faq summary::after{content:"+";color:var(--violet-bright);font-family:var(--font-mono)}
.pr-faq details[open] summary::after{content:"–"}
.pr-faq summary:focus-visible{outline:2px solid var(--violet-bright);outline-offset:3px;border-radius:6px}
.pr-faq p{color:var(--text-2);margin-top:10px;font-size:.98rem}

/* screen-reader text for the ✓ / 🔒 / — row icons */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:900px){
  .pr-plans{max-width:520px;margin:0 auto}
  .pr-card{flex-basis:100%}
  .pr-line{min-height:0}
}
@media(max-width:800px){
  .pr-next{grid-template-columns:1fr}
}