/* The website package card (on the websites page, the two trade pages and /pricing) and the Pricing page
   itself, added 4 November 2026. Built by scripts/build-marketing-pages.mjs. Colours are the shell's tokens
   only, so light, dark and the glass layer all work. The plan cards on /pricing reuse how-it-works.css. */

.svc-package{padding:55px 0;border-top:1px solid var(--line);scroll-margin-top:100px}
.svc-package{display:grid;gap:0;max-width:760px}
.svc-package .pkg-label{display:inline-flex;width:fit-content;margin:0 0 12px;padding:4px 12px;border-radius:999px;border:1px solid var(--signal);background:var(--signal);color:var(--signal-ink);font:700 .74rem/1.3 var(--body);letter-spacing:.02em}
.svc-package h2{margin:0 0 10px}
.svc-package .pkg-price{margin:0 0 6px;font-size:1.05rem;color:var(--ink-mid);font-variant-numeric:tabular-nums}
.svc-package .pkg-price b{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.svc-package .svc-ticks{margin:16px 0 8px}
.svc-package .pkg-small{margin:0 0 20px;font-size:.92rem;color:var(--muted)}
.svc-package .btn{justify-self:start}

/* The Pricing page */
.pricing-page{padding-bottom:20px}
.pricing-page .pricing-hero{padding:44px 0 10px;max-width:760px}
.pricing-page .pricing-hero h1{margin:0 0 16px}
.pricing-plans{padding:55px 0;border-top:1px solid var(--line);scroll-margin-top:100px}
.pricing-plans>h2{margin:0 0 10px}
.pricing-plans .plan-cards{margin-top:22px}
.pricing-plans .plan{border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.pricing-plans .plan:has(.plan-badge){border-color:var(--signal)}
.pricing-plans .plan-name b{font-family:var(--display);font-size:1.3rem}
.pricing-plans .plan-name span{font-size:.95rem;color:var(--ink-mid)}
.pricing-plans .plan-name .plan-badge{font-size:.8rem;color:var(--signal-ink)}
.pricing-page .editorial-close .svc-small{margin:22px 0 0}
.pricing-plans .plan-ask{margin-top:auto;font-weight:700}
.pricing-plans .pricing-addon{margin:4px 0 0;font-size:.94rem;color:var(--ink-mid)}
.pricing-plans .plan-cards[data-billing="monthly"] .pricing-addon .pp-year,
.pricing-plans .plan-cards[data-billing="yearly"] .pricing-addon .pp-month{display:none}
.pricing-plans .pricing-more{margin:18px 0 0;font-weight:700}
.pricing-page .pricing-quote{padding:55px 0 30px;border-top:1px solid var(--line);max-width:760px}
@media (max-width:640px){
  .svc-package,.pricing-plans{padding:40px 0}
  .pricing-page .pricing-hero{padding-top:28px}
}