/* ============================================================
   packages.css — /services/packages/ only.
   Load order: global.css → components.css → skeleton.css →
   service.css → this.

   The page is four full-width bands, not a row of floating cards.
   Each band names the services it bundles and links them out at their
   own standalone fee, so the reader can see what the bundle is made of
   and price it themselves. No savings figure is printed anywhere —
   services.md forbids inventing one.
   ============================================================ */

/* The one rule, stated at the top rather than as a footnote. */
.pkg-rule {
  margin: 28px 0 0;
  padding: 18px 22px;
  max-width: 760px;
  border: 1px solid var(--border-hi);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--bg2);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text2);
}
.pkg-rule strong { color: var(--text); font-weight: 700; }

/* ---- band ---- */
.pkg {
  /* Clears the 58px fixed nav when jumped to from a teaser. Matches the
     .pk rule in service.css. JS also lands inbound hashes, but the CSS
     should not depend on that. */
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
/* No .inner cap. The 880px cap belonged to the old band layout; with the
   bands on .sp-lead / .sp-sub / .sp-row it only squeezed the lead line
   into two rows while the rows themselves are already capped at 78ch by
   service.css, exactly as on the eight service pages. */
.pkg-flag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-md);
  color: var(--text3);
}
/* Flag is text first. The accent is decoration on top of a word that
   already says "Flagship", never the only carrier of that meaning. */
.pkg-flag--flagship { color: var(--accent); border-color: var(--accent); }
.pkg-flag--limited  { color: var(--text); border-color: var(--border-hi); }

/* The bands carry no type rules of their own any more. Name, price,
   scope, sub, labelled rows and the single button are .sp-lead /
   .sp-sub / .sp-row / .sp-book from service.css, so this page and the
   eight /services/<slug>/ pages cannot drift apart. What is left here
   is the page-specific chrome: the one-package rule box, the anchor
   scroll offset, the narrower .inner and the flags. */