/* Pricing-package LAYOUT MODULE — service-card styles.
   Ported from the provided "service cards" designs, but every color is driven
   through the vendor's theme via the --pk-* palette variables (set by the
   consumer: packages_pk_style on the public page, the dashboard sample, the
   gallery canvas) so the color swatch themes them.

   Markup: `.pricing.pk-<layout>` > `.pk-grid` > one `.card` per tier (`.pop` on
   the featured one). Each card carries the same slots — badge, eyebrow, title,
   desc, price (.sub + .amt [+ .per]), features, actions (.btn). Two of the slots
   are grouped in `.head` / `.body` wrappers that are `display:contents` by
   default (so the card reads as a flat stack) and only become real panels for
   the layouts that need a split (Horizontal feature, Tinted header) — this keeps
   ONE markup that every layout can restyle, so the gallery can switch layouts
   live.

   ---------------------------------------------------------------------------
   TYPE: Zulli Typography Kit v1.0, retuned to match service_layouts.css. Same
   three rules, same reasons:

   1. Card type is FIXED px, not cqi. Sizing every step off .pricing meant the
      whole module pinned to the top of its clamp the moment the section broke
      out to 1024px on desktop. Only the price amount — a genuine display
      moment, and the one step that clears the kit's 24px display floor — still
      scales.
   2. Titles keep the vendor's display face at the kit's --type-h3 SIZE. The
      size was the bug, not the face; --pk-hf is the vendor's brand.
   3. Eyebrows, badges, price prefixes and add-on labels are mono (--pk-mf).

   NUMERALS: every price carries tabular-nums, per the kit's "tabular figures in
   every column" rule. In a 3-up grid the amounts sit in a visual column and
   proportional figures make the decimals wander between cards.

   Note the kit's DM Mono face card lists "package prices" in the mono lane. The
   amount is left in the display face here because at 24-38px it clears the
   display floor, and the kit's mono steps stop at 13px, so there is no mono
   display step to move it to. Tabular figures give the alignment the mono rule
   was after. Flag if you'd rather the amount go mono outright. */

.pricing{
  container-type: inline-size;
  font-family: var(--pk-bf, 'Inter', system-ui, sans-serif);
  color: rgba(var(--pk-ink-rgb), .72);
  /* Design tokens — all derived from the theme palette. */
  --c-surface: color-mix(in srgb, var(--pk-ink) 4%, var(--pk-bg));
  --c-ink: var(--pk-ink);
/* Secondary text now comes from the derived --*-muted role (see
   _muted_text in style_templates.py) instead of a hardcoded alpha. A fixed
   fade put 43 of 72 themes under AA; the derived value mutes as far as each
   palette allows and stops there. Fallback keeps the old look off-theme. */
  --c-muted: var(--pk-muted, rgba(var(--pk-ink-rgb), .68));
  --c-line: rgba(var(--pk-ink-rgb), .16);
  --c-line-soft: rgba(var(--pk-ink-rgb), .09);
  --c-accent: var(--pk-primary);
  /* Only for a solid fill with --c-accent-ink painted on top — borders,
     rules and tints stay on the raw --c-accent above them (see --lk-primary
     vs --lk-primary-fill in link_layouts.css, same split). */
  --c-accent-fill: var(--pk-primary-fill, var(--pk-primary));
  --c-accent-ink: var(--pk-on-primary);
  --c-accent-text: var(--pk-primary-text, var(--pk-primary));
  --c-accent-soft: color-mix(in srgb, var(--pk-primary) 14%, var(--pk-bg));
  --c-accent-line: color-mix(in srgb, var(--pk-primary) 42%, var(--pk-bg));
  --c-shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px -6px rgba(0,0,0,.12);
  --c-shadow-lg: 0 4px 8px rgba(0,0,0,.06), 0 24px 44px -22px rgba(0,0,0,.32);
  /* Was a hardcoded 10px, which ignored the vendor's corner_style entirely.
     6px is the kit's --radius-lg, for the lab and picker where no theme is set. */
  --c-r: var(--pk-radius, 6px);
  --c-gap: var(--space-md, clamp(16px, 2vw, 24px));
  --c-row: var(--space-sm, clamp(12px, 1.4vw, 16px));
}

/* ---- grid ---- */
.pk-grid{ display:grid; gap:var(--c-gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,264px),1fr)); align-items:start; }

/* ---- shared card + content slots ---- */
.pricing .card{
  background:var(--c-surface); border-radius:var(--c-r);
  display:flex; flex-direction:column; gap:var(--c-row); padding:var(--c-gap);
  position:relative; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pricing .head, .pricing .body{ display:contents; }  /* flat by default; panels only for wide/tinted */
/* --type-label */
.pricing .eyebrow{ font-family:var(--pk-mf, ui-monospace, monospace); font-size:12px; line-height:1.2; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); }
/* --type-h3 size, vendor's display face — see rule 2 in the header */
.pricing .title{ margin:0; font-family:var(--pk-hf, 'Fraunces', serif); font-weight:var(--pk-tw, 600); font-size:18px; line-height:1.36; color:var(--c-ink); letter-spacing:-.008em; }
/* --type-body-sm */
.pricing .desc{ font-size:13px; line-height:1.55; color:rgba(var(--pk-ink-rgb),.72); max-width:46ch; }
.pricing .price{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.pricing .price .sub{ font-family:var(--pk-mf, ui-monospace, monospace); font-size:12px; line-height:1.2; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); font-weight:500; }
/* The one step that still scales: it clears the kit's 24px display floor, so it
   is display type on purpose. Tabular so amounts align across a 3-up row. */
.pricing .price .amt{ font-family:var(--pk-hf, 'Fraunces', serif); font-size:clamp(24px, 5.2cqi, 32px); font-weight:var(--pk-tw, 600); color:var(--c-ink); letter-spacing:-.016em; line-height:1.1; font-variant-numeric:tabular-nums; }
/* --type-data — the "/ 4 hrs" qualifier is a unit, not prose */
.pricing .price .per{ font-family:var(--pk-mf, ui-monospace, monospace); font-size:13px; line-height:1.4; color:var(--c-muted); font-variant-numeric:tabular-nums; }
.pricing .features{ list-style:none; display:grid; gap:9px; font-size:13px; line-height:1.55; margin:0; padding:0; color:rgba(var(--pk-ink-rgb),.82); }
.pricing .features li{ display:grid; grid-template-columns:15px 1fr; gap:10px; align-items:start; position:relative; }
.pricing .features li::before{ content:""; width:15px; height:15px; border-radius:50%; margin-top:3px; background:var(--c-accent-soft); }
.pricing .features li::after{ content:""; position:absolute; left:3.5px; top:6.5px; width:7px; height:3.5px;
  border-left:1.6px solid var(--c-accent); border-bottom:1.6px solid var(--c-accent); transform:rotate(-45deg); border-radius:1px; }
/* --type-label */
.pricing .addons-label{ font-family:var(--pk-mf, ui-monospace, monospace); font-size:12px; line-height:1.2; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); font-weight:500; margin-top:-2px; }
/* Add-ons — optional extras, so no included-checkmark: a small accent "+",
   name on the left, price flushed right, hairline rows. The 15px marker
   column lines the names up with the feature list above. */
.pricing .addons{ list-style:none; display:grid; margin:0; padding:0; font-size:13px; line-height:1.55; color:rgba(var(--pk-ink-rgb),.72); }
.pricing .addons li{ display:flex; align-items:baseline; gap:10px; padding:5px 0; }
.pricing .addons li:first-child{ padding-top:0; }
.pricing .addons li + li{ border-top:1px dashed color-mix(in srgb, var(--c-line) 80%, transparent); }
.pricing .addons li::before{ content:"+"; flex:0 0 15px; text-align:center; color:var(--c-accent-text); font-weight:600; }
.pricing .addons .addon-name{ flex:1; min-width:0; }
/* --type-data — an add-on price is money in a column */
.pricing .addons .addon-price{ font-family:var(--pk-mf, ui-monospace, monospace); font-size:13px; color:var(--c-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pricing .actions{ margin-top:auto; padding-top:6px; display:flex; flex-direction:column; gap:9px; }
/* --btn-md: 14px/500, 40-44px tall, --radius-md. The kit puts UI affordances at
   500 and reserves 600-700 for headings; this was 600 at a size off the scale.
   min-height rather than height so a wrapped label on a narrow card still fits. */
.pricing .btn{
  font:inherit; font-size:14px; line-height:1.2; font-weight:500; cursor:pointer; width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--btn-h-md, clamp(40px, 4.4vw, 44px)); text-align:center; text-decoration:none;
  padding:8px var(--btn-px-md, clamp(14px, 1.8vw, 20px));
  border-radius:var(--radius-md, 5px); border:1px solid var(--c-accent);
  background:var(--c-accent-fill); color:var(--c-accent-ink); transition:filter .2s, background .2s, color .2s, border-color .2s;
}
.pricing .btn:hover{ filter:brightness(1.08); }
.pricing .btn.ghost{ background:transparent; color:var(--c-accent-text); }
.pricing .btn.ghost:hover{ background:var(--c-accent-soft); filter:none; }
.pricing .btn.quiet{ background:transparent; border-color:transparent; color:var(--c-muted); padding:4px; }
.pricing .btn.quiet:hover{ color:var(--c-ink); background:transparent; filter:none; }
/* --type-label. Pill radius is deliberate — a chip is a shape, not a step on
   the radius scale, so it doesn't follow --pk-radius. */
.pricing .badge{
  font-family:var(--pk-mf, ui-monospace, monospace); font-size:12px; line-height:1.2; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; align-self:flex-start;
  background:var(--c-accent-fill); color:var(--c-accent-ink); padding:5px 10px; border-radius:99px; white-space:nowrap;
}
.pricing .rule, .pricing .divider{ display:none; }

/* Keep the featured badge OUT of the content flow on the flat layouts whose
   badge would otherwise add a row at the top and shove the featured card's text
   down, out of alignment with its neighbours across a multi-up row. It floats in
   the top-right corner (clear of the top-left eyebrow) so every card's content
   top-aligns. Layouts with their own badge treatment (straddle, flag, ribbon,
   stamp, header panel) are handled in their own rules. */
.pk-summary .pop .badge,
.pk-compact .pop .badge,
.pk-inverted .pop .badge,
.pk-elevated .pop .badge{ position:absolute; top:16px; right:16px; z-index:2; }

/* ============================================================ */
/* Named layouts                                                */
/* ============================================================ */

/* 01 · Summary grid — bordered card, short accent rule, description + price. */
.pk-summary .pk-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); }
.pk-summary .card{ border:1px solid var(--c-line); box-shadow:var(--c-shadow-sm); }
.pk-summary .card:hover{ transform:translateY(-3px); box-shadow:var(--c-shadow-lg); }
.pk-summary .rule{ display:block; height:2px; width:28px; background:var(--c-accent); border-radius:2px; }
.pk-summary .features, .pk-summary .addons, .pk-summary .addons-label{ display:none; }
.pk-summary .actions .btn{ width:auto; align-self:flex-start; }

/* 02 · Pricing tiers — bordered, a divider under the price, full feature list;
   the popular tier is ringed with the accent and its badge straddles the edge. */
.pk-tiers .card{ border:1px solid var(--c-line); box-shadow:var(--c-shadow-sm); padding:26px 24px 24px; }
.pk-tiers .card:hover{ transform:translateY(-3px); box-shadow:var(--c-shadow-lg); }
.pk-tiers .desc{ display:none; }
.pk-tiers .divider{ display:block; height:1px; background:var(--c-line-soft); }
.pk-tiers .pop{ border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent), var(--c-shadow-lg); }
.pk-tiers .pop .badge{ position:absolute; top:0; right:22px; transform:translateY(-50%); }

/* 03 · Horizontal feature — price panel on the left, pitch on the right. */
.pk-wide .pk-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); }
.pk-wide .card{ border:1px solid var(--c-line); box-shadow:var(--c-shadow-sm); padding:0; gap:0;
  display:grid; grid-template-columns:minmax(140px,36%) 1fr; align-items:stretch; overflow:hidden; }
.pk-wide .card:hover{ transform:translateY(-3px); box-shadow:var(--c-shadow-lg); }
.pk-wide .head{ display:flex; flex-direction:column; gap:10px; justify-content:center;
  padding:24px 20px; background:color-mix(in srgb, var(--pk-ink) 4%, var(--pk-bg));
  border-right:1px solid var(--c-line); }
.pk-wide .body{ display:flex; flex-direction:column; gap:13px; padding:24px 22px; }
.pk-wide .pop .head{ background:var(--c-accent-fill); border-right-color:var(--c-accent); }
.pk-wide .pop .head .title, .pk-wide .pop .head .amt{ color:var(--c-accent-ink); }
.pk-wide .pop .head .eyebrow, .pk-wide .pop .head .sub, .pk-wide .pop .head .per{ color:color-mix(in srgb, var(--c-accent-ink) 75%, transparent); }
.pk-wide .pop .head .badge{ background:color-mix(in srgb, var(--c-accent-ink) 20%, transparent); color:var(--c-accent-ink); }
@container (max-width:520px){
  .pk-wide .card{ grid-template-columns:1fr; }
  .pk-wide .head{ border-right:0; border-bottom:1px solid var(--c-line); }
}

/* 04 · Compact grid — dense, description + price, no features. */
.pk-compact .pk-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:var(--c-row); }
.pk-compact .card{ border:1px solid var(--c-line); box-shadow:var(--c-shadow-sm); padding:20px; gap:9px; }
.pk-compact .card:hover{ transform:translateY(-3px); box-shadow:var(--c-shadow-lg); }
/* Compact steps DOWN the kit scale (h4 / body-sm) rather than off it. */
.pk-compact .title{ font-size:16px; line-height:1.42; letter-spacing:-.004em; }
.pk-compact .desc{ font-size:13px; }
.pk-compact .amt{ font-size:24px; }
.pk-compact .features, .pk-compact .addons, .pk-compact .addons-label{ display:none; }
/* --btn-sm for the dense layout */
.pk-compact .actions .btn{ width:auto; align-self:flex-start; min-height:var(--btn-h-sm, clamp(32px, 3.4vw, 34px)); padding:6px var(--btn-px-sm, clamp(10px, 1.2vw, 14px)); font-size:13px; border-radius:var(--radius-sm, 4px); }
.pk-compact .pop{ border-color:var(--c-accent); background:linear-gradient(180deg, var(--c-accent-soft), var(--c-surface) 60%); }
.pk-compact .pop .badge{ background:transparent; color:var(--c-accent-text); padding:0; }

/* 05 · Bordered — plain bordered card; popular ring + straddling badge. */
.pk-bordered .card{ border:1px solid var(--c-line); box-shadow:var(--c-shadow-sm); }
.pk-bordered .card:hover{ transform:translateY(-3px); box-shadow:var(--c-shadow-lg); }
.pk-bordered .pop{ border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent), var(--c-shadow-sm); }
.pk-bordered .pop .badge{ position:absolute; top:0; right:22px; transform:translateY(-50%); }

/* 06 · Top accent bar — thin top rule that thickens + a corner flag on popular.
   All cards reserve the same top space (the flag's row) so featured + regular
   cards line up across the row. */
.pk-accent-bar .card{ border:1px solid var(--c-line); padding-top:40px; overflow:hidden; }
.pk-accent-bar .card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--c-line); }
.pk-accent-bar .card:hover{ transform:translateY(-3px); box-shadow:var(--c-shadow-lg); }
.pk-accent-bar .pop::before{ height:5px; background:var(--c-accent); }
.pk-accent-bar .pop .badge{ position:absolute; top:5px; left:0; border-radius:0 0 var(--c-r) 0; padding:4px 12px 4px 24px; }

/* 07 · Inverted — the popular tier flips to a solid ink fill. */
.pk-inverted .card{ border:1px solid var(--c-line); }
.pk-inverted .card:hover{ transform:translateY(-3px); box-shadow:var(--c-shadow-lg); }
.pk-inverted .pop{ background:var(--c-ink); border-color:var(--c-ink); }
.pk-inverted .pop .title, .pk-inverted .pop .amt{ color:var(--pk-bg); }
.pk-inverted .pop .desc, .pk-inverted .pop .features, .pk-inverted .pop .addons{ color:color-mix(in srgb, var(--pk-bg) 80%, transparent); }
.pk-inverted .pop .eyebrow, .pk-inverted .pop .sub, .pk-inverted .pop .per, .pk-inverted .pop .addons-label{ color:color-mix(in srgb, var(--pk-bg) 60%, transparent); }
.pk-inverted .pop .features li::before{ background:color-mix(in srgb, var(--pk-bg) 12%, transparent); }
.pk-inverted .pop .features li::after{ border-color:var(--pk-bg); }
.pk-inverted .pop .addons li::before{ color:var(--pk-bg); }
.pk-inverted .pop .addons li + li{ border-top-color:color-mix(in srgb, var(--pk-bg) 25%, transparent); }
.pk-inverted .pop .addons .addon-price{ color:color-mix(in srgb, var(--pk-bg) 60%, transparent); }
.pk-inverted .pop .btn{ background:var(--pk-bg); border-color:var(--pk-bg); color:var(--c-ink); }
.pk-inverted .pop .btn.quiet{ background:transparent; border-color:transparent; color:color-mix(in srgb, var(--pk-bg) 60%, transparent); }
.pk-inverted .pop .badge{ background:color-mix(in srgb, var(--pk-bg) 16%, transparent); color:color-mix(in srgb, var(--pk-bg) 85%, transparent); }

/* 08 · Hairline — no box; a rule above each card, thick + accent on popular. */
.pk-hairline .card{ background:transparent; border-radius:0; border-top:1px solid var(--c-ink); padding:22px 0 0; }
.pk-hairline .card:hover{ transform:none; box-shadow:none; }
.pk-hairline .actions{ padding-top:14px; border-top:1px solid var(--c-line-soft); }
.pk-hairline .btn{ background:transparent; border-color:var(--c-line); color:var(--c-ink); }
.pk-hairline .btn:hover{ border-color:var(--c-ink); background:transparent; }
.pk-hairline .pop{ border-top-width:3px; border-top-color:var(--c-accent); }
.pk-hairline .pop .badge{ background:transparent; color:var(--c-accent-text); padding:0; }
.pk-hairline .pop .btn{ background:var(--c-accent-fill); border-color:var(--c-accent); color:var(--c-accent-ink); }
.pk-hairline .pop .btn:hover{ filter:brightness(1.08); }

/* 09 · Elevated — depth does the work; the popular tier lifts off the page. */
.pk-elevated .card{ border:1px solid var(--c-line-soft); box-shadow:var(--c-shadow-sm); }
.pk-elevated .card:hover{ transform:translateY(-4px); box-shadow:var(--c-shadow-lg); }
.pk-elevated .pop{ box-shadow:var(--c-shadow-lg); border-color:transparent; transform:translateY(-6px); }
.pk-elevated .pop:hover{ transform:translateY(-9px); }
.pk-elevated .pop .badge{ background:var(--c-accent-soft); color:var(--c-accent-text); }

/* 10 · Tinted header — price sits in a header block; popular fills with accent. */
.pk-tinted .pk-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.pk-tinted .card{ border:1px solid var(--c-line); padding:0; gap:0; overflow:hidden; }
.pk-tinted .card:hover{ transform:translateY(-3px); box-shadow:var(--c-shadow-lg); }
.pk-tinted .head{ position:relative; display:flex; flex-direction:column; gap:8px; padding:22px 24px;
  background:color-mix(in srgb, var(--pk-ink) 5%, var(--pk-bg)); border-bottom:1px solid var(--c-line); }
/* Badge floats in the header corner so the featured header stays the same height
   as its neighbours (eyebrow + title + price only) and the bodies line up. */
.pk-tinted .pop .head .badge{ position:absolute; top:14px; right:14px; }
.pk-tinted .body{ display:flex; flex-direction:column; gap:14px; padding:22px 24px 24px; flex:1; }
.pk-tinted .pop .head{ background:var(--c-accent-fill); border-bottom-color:var(--c-accent); }
.pk-tinted .pop .head .title, .pk-tinted .pop .head .amt{ color:var(--c-accent-ink); }
.pk-tinted .pop .head .eyebrow, .pk-tinted .pop .head .sub, .pk-tinted .pop .head .per{ color:color-mix(in srgb, var(--c-accent-ink) 74%, transparent); }
.pk-tinted .pop .head .badge{ background:color-mix(in srgb, var(--c-accent-ink) 20%, transparent); color:var(--c-accent-ink); }

/* 11 · Corner ribbon — tinted wash + a diagonal ribbon on popular. */
.pk-ribbon .card{ border:1px solid var(--c-line); overflow:hidden; }
.pk-ribbon .card:hover{ transform:translateY(-3px); box-shadow:var(--c-shadow-lg); }
.pk-ribbon .pop{ border-color:var(--c-accent-line); background:linear-gradient(180deg, var(--c-accent-soft), var(--c-surface) 55%); }
/* The diagonal has to be long enough for the label at --type-label size; mono
   sets wider than the 10.5px sans this used to carry, so the ribbon grew with
   it rather than the type shrinking off-scale to fit the old ribbon. */
.pk-ribbon .pop .badge{ position:absolute; top:22px; right:-52px; width:186px; transform:rotate(45deg);
  background:var(--c-accent-fill); color:var(--c-accent-ink); text-align:center; border-radius:0; padding:5px 0;
  font-size:12px; letter-spacing:.08em; }

/* 12 · Ledger — price leads with a rule under it; popular gets an ink border. */
/* padding-top reserves the badge's row on every card, not just .pop — that is
   what keeps the featured card's price aligned with its neighbours'. Same
   approach as .pk-accent-bar. */
.pk-ledger .card{ border:1px solid var(--c-line); padding-top:52px; }
.pk-ledger .card:hover{ transform:translateY(-3px); box-shadow:var(--c-shadow-lg); }
.pk-ledger .price{ order:-1; padding-bottom:14px; border-bottom:1px solid var(--c-line-soft); width:100%; }
/* The ledger price leads the card, so it takes the next display step up
   (--type-display-m, 32px) rather than an improvised 38px. */
.pk-ledger .amt{ font-size:clamp(26px, 5.6cqi, 32px); line-height:1.18; }
.pk-ledger .pop{ border-color:var(--c-ink); }
.pk-ledger .pop .price{ border-bottom-color:var(--c-ink); }
.pk-ledger .pop .badge{ position:absolute; top:16px; right:var(--c-gap); background:var(--c-accent-soft); color:var(--c-accent-text);
  border:1px solid var(--c-accent-line); border-radius:var(--radius-sm, 4px); padding:4px 8px; }

@media (prefers-reduced-motion:reduce){ .pricing *{ transition:none !important; } }