/* Pricing: four tier cards with their headline perks, then one section per project with the
   four tiers side by side (src/pricing-view.mjs). Loads after tokens.css, site.css and profile.css. */
.pricing-main{max-width:1240px;padding-block:48px 72px}
.pricing-top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:32px}
.pricing-heading{max-width:720px;margin-bottom:0}
.pricing-heading>p:last-child{font-size:var(--fs-md);line-height:1.7}
.buy-credits-card{flex:0 1 380px;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.buy-credits-card .eyebrow{margin:0 0 6px}
.buy-credits-card h2{margin:0 0 6px;font:600 var(--fs-lg) var(--font-display);color:var(--text)}
.buy-credits-card p{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--text-muted)}
.buy-credits-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.buy-credits-row .button{flex:1 1 140px;justify-content:center;gap:12px;white-space:nowrap}
.button.tier-quiet{background:var(--accent-100);color:var(--accent-700);box-shadow:none}
.button.tier-quiet:hover{background:var(--accent-200)}

/* Tier cards */
.tier-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:28px}
.tier-card{position:relative;display:flex;flex-direction:column;padding:22px 22px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.tier-featured{border:2px solid var(--accent);box-shadow:var(--shadow-md)}
.tier-badge{position:absolute;top:-11px;right:18px;padding:5px 11px;border-radius:var(--r-pill);background:var(--accent);font-size:var(--fs-2xs);font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#fff}
.tier-head h2{margin:0 0 6px;font-size:var(--fs-sm);font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-600)}
.tier-price{margin:0;font:600 var(--fs-2xl) var(--font-display);letter-spacing:-.03em;color:var(--text)}
.tier-note{font:500 var(--fs-xs) var(--font-sans);letter-spacing:0;color:var(--text-subtle)}
.tier-lead{margin:16px 0 8px;font-size:var(--fs-xs);font-weight:700;color:var(--text-subtle)}
.tier-highlights,.perks-col ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.tier-highlights li,.perks-col li{position:relative;padding-left:20px;font-size:var(--fs-sm);line-height:1.5;color:var(--text-muted)}
.tier-highlights li::before,.perks-col li::before{content:'';position:absolute;left:2px;top:.45em;width:9px;height:5px;border:solid var(--accent);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.tier-highlights strong,.perks-col strong{color:var(--text)}
.tier-highlights{margin-bottom:18px}
.tier-card .tier-emotes{margin:-4px 0 18px}
.tier-card>.button{justify-content:center;margin-top:auto}

/* Emotes */
.tier-emote-label{margin:0 0 6px;font-size:var(--fs-xs);color:var(--text-subtle)}
.tier-emote-label strong{color:var(--text)}
.emote-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.emote-row img{width:28px;height:28px;border-radius:6px;background:var(--surface-3)}
.emote-more{padding:4px 8px;border-radius:var(--r-pill);background:var(--accent-50);font-size:var(--fs-2xs);font-weight:800;color:var(--accent-700)}

/* Perks by project */
.perks-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 22px}
.perks-jump span{margin-right:6px;font-size:var(--fs-2xs);font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-subtle)}
.perks-jump a{padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.perks-jump a:hover{border-color:var(--accent-300);color:var(--accent-600)}
.project-perks{margin-bottom:18px;padding:22px 24px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);scroll-margin-top:84px}
.perks-head{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.perks-head h2{margin:0;font:600 var(--fs-xl) var(--font-display);letter-spacing:-.01em}
.perks-head p{margin:2px 0 0;font-size:var(--fs-sm);color:var(--text-subtle)}
.project-badge{width:44px;height:44px;flex:none;border-radius:12px;object-fit:cover}
.project-badge.mark{display:grid;place-items:center;background:var(--accent);color:#fff;font:600 22px/1 var(--font-display);padding-bottom:3px}
.project-link{margin-left:auto;padding:8px 14px;border-radius:var(--r-pill);background:var(--accent-50);font-size:var(--fs-sm);font-weight:700;color:var(--accent-700);white-space:nowrap}
.project-link:hover{background:var(--accent-100)}
.perks-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.perks-col{padding:16px 18px 4px;border-left:1px solid var(--line-soft)}
.perks-col:first-child{padding-left:0;border-left:0}
.perks-tier{margin:0 0 10px;font-size:var(--fs-xs);font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent-600)}
.tier-who{margin:12px 0 6px;font-size:var(--fs-2xs);font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--text-subtle)}
.perks-tier+.tier-who{margin-top:0}
.tier-same{margin:0;font-size:var(--fs-sm);font-style:italic;color:var(--text-faint)}
.perks-col code,.tier-highlights code,.pricing-notes code{padding:1px 5px;border-radius:6px;background:var(--accent-50);font-size:.92em}

.pricing-notes{margin-top:28px}
.pricing-notes h2{margin-top:0;font:600 var(--fs-xl) var(--font-display)}
.pricing-notes ul{display:grid;gap:10px;margin:0;padding-left:18px;font-size:var(--fs-base);line-height:1.6;color:var(--text-muted)}
.pricing-notes strong{color:var(--text)}
.pricing-notes a{color:var(--accent-600);font-weight:700}

@media(max-width:1100px){.tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.perks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.perks-col:nth-child(3){padding-left:0;border-left:0}}
@media(max-width:900px){.pricing-top{flex-direction:column;align-items:stretch}.buy-credits-card{flex:none}}
@media(max-width:600px){
 .tier-grid,.perks-grid{grid-template-columns:1fr}
 .perks-col{padding:14px 0 6px;border-left:0;border-top:1px solid var(--line-soft)}
 .perks-col:first-child{border-top:0}
 .perks-head{flex-wrap:wrap}.project-link{margin-left:58px}
 .project-perks{padding:18px}
}