/* ════════════════════════════════════════════════════════════════════
   PRICING (2026-10-19): the plans, after shadcnspace "pricing-02".
   Three cards; the recommended one sits a touch forward inside a slowly
   turning gradient ring. Each card opens with a live figure of what it
   covers: registries flow through CyberXYZ to where installs happen, and
   each plan lights what it adds (.pf__b--new). pricing.js plays the
   figures while on screen and slides the cards in once.
   ════════════════════════════════════════════════════════════════════ */
.pricing { padding: clamp(44px, 4.4vw, 60px) var(--gutter); }
.pricing__in { max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto; }
.pricing__head { text-align: center; margin-bottom: clamp(36px, 4vw, 52px); }
.pricing__head .eyebrow { margin-inline: auto; }
.pc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }

.pc { position: relative; display: flex; }
.pc--featured { z-index: 1; scale: 1.02; }
.pc__ring { position: absolute; inset: -2px; border-radius: 20px; overflow: hidden; z-index: 0; }
.pc__ring span { position: absolute; inset: -100%; filter: blur(3px);
  background: conic-gradient(from 0deg, #ef4136, #e0621f, #ffd9c2, #d9defe, #8f99f6, #f4e2ee, #ef4136);
  animation: pcSpin 6s linear infinite; }
@keyframes pcSpin { to { transform: rotate(1turn); } }
.pc__card { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px);
  border-radius: 18px; background: linear-gradient(170deg, #fff 0%, #fdfdff 100%); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,15,40,.04); }
.pc--featured .pc__card { border-color: transparent; box-shadow: 0 18px 40px rgba(15,15,40,.08); }

.pc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc__name { margin: 0; font: 700 26px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.pc__badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 12.5px/1 var(--font-body); white-space: nowrap; }
.pc__badge svg { width: 14px; height: 14px; fill: url(#xyz-accent) #e7522a; }
.pc__kick { margin-top: 6px; font: 500 12.5px/1.3 var(--font-mono); color: var(--ink-3); }
.pc__desc { margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-3); min-height: 4.65em; }  /* three lines, so the figures and prices line up */

.pc__price { display: flex; align-items: baseline; gap: 6px; margin-top: 22px; }
.pc__price b { font: 700 clamp(40px, 4vw, 52px)/1 var(--font-display); letter-spacing: -.035em; color: var(--ink); }
.pc__price span { font-size: 15px; color: var(--ink-3); }
.pc__annual { margin: 8px 0 0; font: 400 12.5px/1.5 var(--font-mono); color: var(--ink-3); }
.pc__sep { border: 0; height: 1px; background: var(--line); margin: 22px 0; }
.pc__list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; flex: 1; align-content: start; }
.pc__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pc__ic { width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: #e7522a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pc__list li.is-off { color: var(--ink-4); }
.pc__list li.is-off .pc__ic { stroke: #c9c9d6; }
.pc__cta { width: 100%; justify-content: center; height: 48px; }

/* the live figure: registries -> CyberXYZ -> where installs happen */
.pf { margin: 20px 0 0; padding: 16px 14px 12px; border-radius: 14px; background: linear-gradient(135deg, #fff7f2 0%, #faf5fb 50%, #f3f5ff 100%); border: 1px solid #f0eef6; }
.pf__row { display: flex; align-items: center; gap: 6px; }
.pf__src, .pf__dst { display: grid; gap: 6px; flex: none; }
.pf__src { grid-template-columns: repeat(var(--cols, 2), 30px); }
.pf__dst { grid-template-columns: 30px; }
.pf__b { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  box-shadow: 0 1px 2px rgba(15,15,40,.08), 0 0 0 1px rgba(15,15,40,.05); }
.pf__b img { width: 17px; height: 17px; object-fit: contain; }
.pf__b--ic svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf__b--new::after { content: ""; position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gradient); box-shadow: 0 0 0 2px #fff; }
.pf__wire { position: relative; flex: 1; height: 2px; min-width: 18px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #d9d9e6 0 5px, transparent 5px 9px); }
.pf__wire i { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #e7522a; opacity: 0; }
.pf__hub { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff;
  box-shadow: 0 4px 12px rgba(231,82,42,.18), 0 0 0 1px rgba(231,82,42,.18); }
.pf__hub img { width: 28px; height: 28px; }
.pf__hub::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(231,82,42,.45); opacity: 0; }


.incl { margin-top: 32px; }
.incl__label { font: 500 13px/1.3 var(--font-mono); letter-spacing: 0; text-transform: lowercase;
  color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pricing__note { margin: 20px auto 0; max-width: 820px; text-align: center; font: 400 12px/1.6 var(--font-mono); color: var(--ink-3); }


@media (max-width: 1000px) {
  .pc-row { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
  .pc--featured { scale: 1; }
}

/* ── what each plan adds (2026-10-19, second pass) ─────────────────────
   Inherited coverage is grey and quiet; what the plan adds is in colour and
   named in the chips under the figure. Each addition lights up in turn,
   its bubble and its chip together, and the loop repeats. */
.pf__b--old { opacity: .45; filter: grayscale(1); box-shadow: 0 0 0 1px rgba(15,15,40,.06); }
.pf__b--big { grid-column: var(--cols, 2); grid-row: 1 / span 2; align-self: center; width: 38px; height: 38px; }
.pf__b--big img { width: 22px; height: 22px; }
.pf__lead { margin: 12px 0 6px; text-align: center; font: 500 11.5px/1.4 var(--font-mono); color: var(--ink-3); }
.pf__adds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pf__adds li { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 6px; border-radius: 999px;
  background: #fff; border: 1px solid #ebe8f2; font: 600 12px/1 var(--font-body); color: var(--ink-2); }
.pf__adds img, .pf__adds svg { width: 15px; height: 15px; object-fit: contain; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf--team .pf__adds li::before, .pf--biz .pf__adds li::before, .pf--ent .pf__adds li::before { content: "+"; margin-right: -2px; font-weight: 700; color: #e7522a; }
.pf--team .pf__adds li::before { content: none; }

@property --on { syntax: "<number>"; inherits: false; initial-value: 0; }
.pf__b--new, .pf__adds li { --on: 0; }
.pf__b--new { scale: calc(1 + var(--on) * .14); box-shadow: 0 1px 2px rgba(15,15,40,.08), 0 0 0 calc(1px + var(--on) * 3px) rgba(231,82,42, calc(.12 + var(--on) * .2)); }
.pf__adds li { border-color: color-mix(in srgb, #e7522a calc(var(--on) * 55%), #ebe8f2); background: color-mix(in srgb, #fff1e8 calc(var(--on) * 100%), #fff); color: color-mix(in srgb, var(--ink) calc(var(--on) * 100%), var(--ink-2)); }
@media (prefers-reduced-motion: no-preference) {
  .pf.is-visible .pf__wire i { animation: pfPkt 1.6s linear infinite; }
  .pf.is-visible .pf__wire i:nth-child(2) { animation-delay: .8s; }
  .pf.is-visible .pf__wire + .pf__hub + .pf__wire i { animation-delay: .4s; }
  .pf.is-visible .pf__wire + .pf__hub + .pf__wire i:nth-child(2) { animation-delay: 1.2s; }
  .pf.is-visible .pf__hub::after { animation: pfRing 2.4s ease-out infinite; }
  .pf--c3.is-visible :is(.pf__b--new, .pf__adds li) { animation: pfOn3 3.6s ease-in-out infinite; animation-delay: calc(var(--k) * 1.2s); }
  .pf--c4.is-visible :is(.pf__b--new, .pf__adds li) { animation: pfOn4 4.8s ease-in-out infinite; animation-delay: calc(var(--k) * 1.2s); }
  .pf--c5.is-visible :is(.pf__b--new, .pf__adds li) { animation: pfOn5 6s ease-in-out infinite; animation-delay: calc(var(--k) * 1.2s); }
  .pc-anim .pc { opacity: 0; translate: -60px 0; transition: opacity .6s ease-in-out, translate .6s ease-in-out; transition-delay: calc(var(--i) * .25s); }
  .pc-anim.is-in .pc { opacity: 1; translate: 0 0; }
}
@keyframes pfOn3 { 0%, 34%, 100% { --on: 0; } 6%, 26% { --on: 1; } }
@keyframes pfOn4 { 0%, 26%, 100% { --on: 0; } 5%, 20% { --on: 1; } }
@keyframes pfOn5 { 0%, 21%, 100% { --on: 0; } 4%, 16% { --on: 1; } }

/* ── the shared logo marquee, under the plans ── */
.pricing-mq { padding: clamp(28px, 3vw, 40px) var(--gutter) clamp(12px, 2vw, 24px); text-align: center; }
.pricing-mq .lmq { margin-top: 18px; }

/* ── the plan matrix: comparison-3's structure, bench-matrix's motion ── */
.cmx { max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto; }
.cmx__scroll { border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,.92) 45%); border: 1px solid rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,15,40,.04), 0 12px 32px rgba(15,15,40,.05); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); padding-top: 18px; }
.cmx__t { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.cmx__t col.cmx__c0 { width: 40%; }
.cmx__t :is(th, td) { padding: 13px 18px; text-align: center; vertical-align: middle; border-bottom: 1px solid #efeff5; transition: background-color .15s ease, opacity .2s ease; }
.cmx__t .is-hero { background: rgba(255,241,232,.55); }
.cmx__t thead th { vertical-align: bottom; padding: 18px 18px 18px; border-bottom: 1.5px solid var(--ink); }
.cmx__t thead th.is-hero { border-radius: 14px 14px 0 0; position: relative; }
.cmx__fh { text-align: left !important; font: 500 12px/1.3 var(--font-mono); color: var(--ink-3); }
.cmx__plan { display: block; font: 700 18px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.cmx__price { display: block; margin-top: 6px; font: 800 30px/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.cmx__cad { display: block; margin-top: 6px; font: 400 11.5px/1.45 var(--font-mono); color: var(--ink-3); }
.cmx__badge { position: absolute; top: -13px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12px/1 var(--font-body); white-space: nowrap; }
.cmx__group th { padding: 20px 18px 8px; text-align: left; border-bottom: 1px solid #e7e7f0; font: 500 13px/1.3 var(--font-mono);
  color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cmx__row th { text-align: left; font-weight: 400; }
.cmx__row th b { display: block; font: 600 15px/1.35 var(--font-body); color: var(--ink); }
.cmx__note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.cmx__logos { display: inline-flex; gap: 6px; align-items: center; }
.cmx__logos img { width: 15px; height: 15px; object-fit: contain; }
.cmx__y, .cmx__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; }
.cmx__y { background: var(--ink); }
.cmx__y svg, .cmx__n svg { width: 14px; height: 14px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cmx__y svg { stroke: #fff; }
.is-hero .cmx__y { background: var(--accent-gradient); }
.cmx__n { background: #f1f1f6; }
.cmx__n svg { stroke: #b4b4c6; }
.cmx__v { font: 500 14px/1.35 var(--font-body); color: var(--ink-2); }
.is-hero .cmx__v { color: var(--ink); font-weight: 600; }
.cmx__cta :is(th, td) { border-bottom: 0; padding: 18px 14px 22px; }
.cmx__cta td.is-hero { border-radius: 0 0 14px 14px; }
.cmx__cta .btn { width: 100%; justify-content: center; height: 44px; font-size: 14.5px; }
/* bench-matrix's focus: hover a row and the others step back; hover a column and it is followed */
@media (hover: hover) {
  .cmx__t tbody:hover .cmx__row:not(:hover) { opacity: .45; }
  .cmx__t[data-hcol="1"] tr > :nth-child(2), .cmx__t[data-hcol="2"] tr > :nth-child(3), .cmx__t[data-hcol="3"] tr > :nth-child(4) { background-color: rgba(15,15,40,.035); }
  .cmx__t[data-hcol="2"] tr > .is-hero:nth-child(3) { background-color: rgba(255,226,206,.75); }
}
@media (prefers-reduced-motion: no-preference) {
  .cmx--anim .cmx__row { opacity: 0; translate: 0 6px; }
  .cmx--anim.is-in .cmx__row { animation: cmxIn .5s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--d) * 45ms); }
}
@keyframes cmxIn { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.pf--team .pf__b--new::after { content: none; }  /* the base plan adds nothing over another: no "new" dots */
/* worked examples: the arithmetic done for the buyer */
.pricing__ex { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pricing__ex li { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid var(--line); display: grid; gap: 4px; }
.pricing__ex b { font: 600 14.5px/1.3 var(--font-body); color: var(--ink); }
.pricing__ex span { font: 400 12.5px/1.45 var(--font-mono); color: var(--ink-3); }
@media (max-width: 1000px) { .pricing__ex { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }

/* pricing: the logos still, centred, each once (the marquee's bubbles without the motion) */
.lmq--static { width: auto; margin-inline: auto; max-width: 1080px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.lmq--static .lmq__row { width: auto; flex-wrap: wrap; justify-content: center; gap: 12px 14px; padding: 6px 0; animation: none; }
.lmq--static .lmq__b { margin: 0; }

/* free, for individuals and evaluation: a slim card under the paid plans */
.pfree { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 24px 32px; align-items: center;
  padding: 22px 26px; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,.92) 45%); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15,15,40,.04); }
.pfree__k { font: 500 13px/1.3 var(--font-mono); color: transparent; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pfree__t { margin: 6px 0 6px; font: 700 22px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.pfree__p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.pfree__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pfree__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.pfree__cta { white-space: nowrap; }
@media (max-width: 1000px) { .pfree { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }