/* =====================================================================
   CodeCraft — Pricing page (service-selector). Loaded only on /pricing.
   Built on services.css tokens (.cc-svc: --accent / --slate-* / --mute /
   --hairline / --glass) + main.css design system. Dark slate world,
   periwinkle accent, glass panels. Card layout echoes the reference image,
   re-skinned into the CodeCraft palette. Every motion has a reduced fallback.
   ===================================================================== */

/* Varied, banded background (NOT one flat colour): a periwinkle glow up top,
   a warmer mid-band behind the cards, settling back to deep slate. */
.cc-svc--pricing{
  padding-bottom:10px;
  background:
    radial-gradient(90% 50% at 50% -8%, color-mix(in srgb,var(--peri) 22%,transparent), transparent 60%),
    radial-gradient(70% 40% at 85% 38%, color-mix(in srgb,var(--glow) 10%,transparent), transparent 55%),
    linear-gradient(180deg, #0E111B 0%, #14161F 26%, #191D2B 55%, #13151E 100%);
}
/* A soft "stage" band sits behind the cards so they read on a different
   surface than the hero — kills the same-colour-throughout feel. */
.pr-panels::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100vw;height:100%;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 70% at 50% 30%, color-mix(in srgb,var(--peri) 9%,transparent), transparent 70%);
}
.pr-panels > *{ position:relative;z-index:1; }

/* ---------------------------------------------------------------------
   PERSISTENT TOP
   ------------------------------------------------------------------- */
.pr-promise{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(120px,16vh,180px) var(--pad) clamp(20px,4vh,40px);
  text-align:center;
}
.pr-promise .svc-eyebrow{ margin-inline:auto; }
.pr-promise__hl{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(2.1rem,5vw,3.9rem);color:var(--bone);
  max-width:18ch;margin:0 auto;text-wrap:balance;
}
.pr-promise__sub{
  margin:22px auto 0;color:var(--mute);font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.6;max-width:60ch;
}

/* Value chips — hairline glass pills, stagger in */
.pr-chips{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:34px auto 0;max-width:860px;
}
.pr-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;border-radius:999px;
  font-size:.86rem;font-weight:500;color:var(--bone);
  background:var(--glass);border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease-expo),transform .6s var(--ease-expo);
  transition-delay:calc(var(--d,0) * .12s + .15s);
}
.pr-chip__dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 10px var(--accent);
}
[data-reveal-svc].is-in .pr-chip{ opacity:1;transform:none; }

/* ---------------------------------------------------------------------
   SERVICE SELECTOR
   ------------------------------------------------------------------- */
.pr-selector{
  max-width:var(--maxw);margin:clamp(20px,4vh,46px) auto 0;
  padding:0 var(--pad);
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.pr-selector__label{ color:var(--mute);font-size:.7rem; }

/* Desktop segmented pill — same family as the nav pill */
.pr-seg{
  display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;
  padding:6px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  max-width:100%;
}
.pr-seg__btn{
  appearance:none;border:0;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:.86rem;
  color:var(--mute);background:transparent;
  padding:10px 16px;border-radius:999px;white-space:nowrap;
  transition:color .25s,background .25s,transform .25s var(--ease-expo);
}
.pr-seg__btn:hover{ color:var(--bone);background:rgba(255,255,255,.05); }
.pr-seg__btn.is-active{
  color:var(--bone);
  background:var(--peri);
  box-shadow:0 6px 20px color-mix(in srgb,var(--peri) 45%,transparent),inset 0 0 0 1px rgba(255,255,255,.12);
}
.pr-seg__btn:focus-visible{ outline:2px solid var(--glow);outline-offset:2px; }

/* Mobile dropdown (hidden on desktop) */
.pr-select__wrap{ position:relative;display:none;width:100%;max-width:420px; }
.pr-select{
  appearance:none;width:100%;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:1rem;color:var(--bone);
  padding:15px 44px 15px 18px;border-radius:14px;
  background:var(--slate-panel);border:1px solid var(--hairline);
}
.pr-select:focus-visible{ outline:2px solid var(--glow);outline-offset:2px; }
.pr-select__chev{ position:absolute;right:18px;top:50%;width:13px;transform:translateY(-50%);color:var(--mute);pointer-events:none; }

/* Currency disclaimer under the selector */
.pr-fx-note{
  max-width:62ch;margin:4px auto 0;text-align:center;
  font-size:.78rem;line-height:1.5;color:var(--mute);
}

/* ---------------------------------------------------------------------
   PANELS  (all rendered; JS shows one)
   ------------------------------------------------------------------- */
.pr-panels{
  max-width:var(--maxw);margin:clamp(28px,5vh,56px) auto 0;
  padding:0 var(--pad) clamp(50px,8vh,90px);
  position:relative;
}
.pr-panel{ display:none; }
.pr-panel.is-active{ display:block; }
.pr-panel[hidden]{ display:none; }

/* Swap motion: clip-path wipe + fade-up (added by JS on the incoming panel) */
.pr-panel.is-entering{
  animation:prWipe .55s var(--ease-expo) both;
}
@keyframes prWipe{
  from{ opacity:0;transform:translateY(16px);clip-path:inset(0 0 100% 0); }
  to  { opacity:1;transform:none;clip-path:inset(0 0 0 0); }
}

.pr-panel__head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;
  margin-bottom:30px;
}
.pr-panel__intro{ color:var(--mute);font-size:1.05rem;line-height:1.5;max-width:46ch; }

/* One-time ⇄ Monthly toggle */
.pr-billing{
  position:relative;display:inline-flex;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--hairline);
}
.pr-billing__btn{
  position:relative;z-index:1;appearance:none;border:0;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:.84rem;color:var(--mute);
  background:transparent;padding:9px 18px;border-radius:999px;
  transition:color .25s;
}
.pr-billing__btn.is-active{ color:var(--bone); }
.pr-billing__btn:focus-visible{ outline:2px solid var(--glow);outline-offset:2px; }
.pr-billing__thumb{
  position:absolute;top:5px;left:5px;height:calc(100% - 10px);width:calc(50% - 5px);
  border-radius:999px;background:var(--peri);z-index:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .35s var(--ease-expo);
}
.pr-billing.is-monthly .pr-billing__thumb{ transform:translateX(100%); }

/* ---------------------------------------------------------------------
   TIER CARDS
   ------------------------------------------------------------------- */
.pr-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;
  /* perspective so the float reads as a card lifting toward you (fan-carousel feel) */
  perspective:1500px;
}
.pr-card{
  position:relative;display:flex;flex-direction:column;
  padding:32px 26px;border-radius:24px;
  /* Distinct raised surface (lighter at the top, faint peri pool at the base)
     so the card clearly lifts off the banded page — not dark-on-dark. */
  background:
    linear-gradient(180deg, #20243440 0%, transparent 32%),
    linear-gradient(180deg, var(--slate-raise) 0%, color-mix(in srgb,var(--peri) 12%, var(--slate-panel)) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 50px -18px rgba(5,7,14,.7), inset 0 1px 0 rgba(255,255,255,.05);
  transform-style:preserve-3d;
  transition:transform .45s var(--ease-expo),box-shadow .45s,border-color .3s,opacity .4s,filter .4s;
  will-change:transform;
}
/* FLOAT ON HOVER — the hovered card lifts and tilts toward the viewer with a
   periwinkle glow; its siblings sink back and dim so focus lands on one card
   at a time (the fan-carousel "spread + lift" feeling, in a comparable grid). */
.pr-card:hover{
  transform:translateY(-16px) rotateX(5deg) scale(1.025);
  box-shadow:0 44px 90px -18px rgba(5,7,14,.8), 0 0 60px color-mix(in srgb,var(--peri) 24%,transparent);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  z-index:4;
}
.pr-cards:hover .pr-card:not(:hover){
  transform:translateY(4px) scale(.97);
  opacity:.72;filter:saturate(.85);
}

/* MOST POPULAR — a distinct periwinkle gradient card (same highlight language
   as .svc-cta__inner / .svc-step.is-key elsewhere on the site), raised + glowing
   so it clearly reads as a different surface from its siblings. */
.pr-card.is-popular{
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--peri) 8%,#fff) 0%, transparent 26%),
    linear-gradient(165deg, color-mix(in srgb,var(--peri) 42%, var(--slate-panel)) 0%, color-mix(in srgb,var(--peri) 20%, var(--slate-panel)) 55%, var(--slate-raise) 100%);
  transform:translateY(-14px) scale(1.02);
  border-color:transparent;
  box-shadow:0 40px 90px -20px rgba(5,7,14,.8), 0 0 70px color-mix(in srgb,var(--peri) 28%,transparent);
  z-index:2;
}
.pr-card.is-popular::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(150deg,var(--peri),var(--glow) 45%,color-mix(in srgb,var(--peri) 40%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.9;
}
.pr-card.is-popular::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 60px color-mix(in srgb,var(--peri) 35%,transparent);
}
.pr-card.is-popular:hover{ transform:translateY(-18px) scale(1.02); }

.pr-card__badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-size:.6rem;letter-spacing:.14em;color:var(--bone);
  padding:6px 13px;border-radius:999px;white-space:nowrap;
  background:var(--peri);box-shadow:0 6px 18px color-mix(in srgb,var(--peri) 50%,transparent);
}

.pr-card__top{ position:relative; }
.pr-card__name{
  font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--bone);
  letter-spacing:-.01em;margin-bottom:14px;
}

/* Price block */
.pr-card__price{ display:flex;flex-direction:column;gap:2px;margin-bottom:14px;min-height:78px; }
.pr-card__lead{ font-size:.8rem;color:var(--mute);font-weight:600; }
.pr-card__amt{ display:flex;align-items:baseline;gap:6px;line-height:1;flex-wrap:wrap; }
/* Struck original price (the "$26 → $19" device from the reference) */
.pr-card__was{
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  color:var(--mute);text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 70%,transparent);
  opacity:.7;align-self:flex-start;margin-top:6px;
}
.pr-card.is-popular .pr-card__was{ color:#fff;opacity:.55;text-decoration-color:rgba(255,255,255,.6); }
.pr-panel.is-monthly .pr-card__was{ display:none; }
/* Save % corner ribbon on the popular card */
.pr-card__save{
  position:absolute;top:14px;right:14px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-display);font-weight:800;font-size:.78rem;color:var(--ink);
  padding:6px 11px;border-radius:999px;
  background:linear-gradient(120deg,var(--glow),var(--glow-warm));
  box-shadow:0 8px 22px -6px color-mix(in srgb,var(--glow) 70%,transparent);
}
.pr-card__save .mono{ font-size:.56rem;letter-spacing:.1em;font-weight:600; }
.pr-cur{ font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--bone);align-self:flex-start;margin-top:6px; }
.pr-num{
  font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,5vw,3.1rem);
  color:var(--bone);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.pr-card.is-popular .pr-num,.pr-card.is-popular .pr-cur{ color:#fff; }
.pr-plus{ font-family:var(--font-display);font-weight:800;font-size:1.6rem;color:var(--accent); }
.pr-unit{ font-size:.95rem;color:var(--mute);font-weight:600;margin-left:3px; }
.pr-card__cad{ font-size:.62rem;color:var(--mute);letter-spacing:.1em;margin-top:6px; }
.pr-card__quote{
  font-family:var(--font-display);font-weight:800;font-size:1.9rem;color:var(--accent);
  display:inline-block;margin:8px 0;
}
/* Indicative multi-currency line under the CAD amount */
.pr-card__fx,.pr-care__fx{
  display:block;margin-top:7px;
  font-size:.68rem;line-height:1.45;color:var(--mute);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.pr-card.is-popular .pr-card__fx{ color:rgba(255,255,255,.62); }
.pr-care__fx{ margin-top:5px; }

/* "+ maintenance from $X/mo" — the recurring half of build + maintenance */
.pr-card__maint{
  display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  padding:5px 11px;border-radius:999px;
  font-size:.78rem;font-weight:600;color:var(--accent);
  background:color-mix(in srgb,var(--peri) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--peri) 26%,transparent);
}
.pr-card.is-popular .pr-card__maint{
  color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);
}

.pr-card__note{
  font-size:.78rem;color:var(--accent);font-weight:600;margin-top:6px;
  /* shown only in monthly mode */
  display:none;
}
.pr-panel.is-monthly .pr-card__note{ display:block; }
.pr-panel.is-monthly .pr-card__price[data-mo] .pr-card__lead,
.pr-panel.is-monthly .pr-card__price[data-mo] .pr-card__cad{ display:none; }

.pr-card__blurb{ color:var(--mute);font-size:.9rem;line-height:1.5;margin-bottom:20px; }

/* Features */
.pr-card__feats{ list-style:none;display:flex;flex-direction:column;gap:11px;flex:1;margin-bottom:24px; }
.pr-feat{ display:flex;align-items:flex-start;gap:10px;font-size:.88rem;line-height:1.35;color:var(--bone); }
.pr-feat.is-off{ color:var(--mute); }
.pr-feat__ic{ width:20px;height:20px;flex:none;margin-top:0; }
/* Solid filled disc with a white tick (echoes the reference's circles) */
.pr-feat__ic--yes{
  color:#fff;border-radius:50%;padding:3px;
  background:var(--peri);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--peri) 14%,transparent);
}
.pr-card.is-popular .pr-feat__ic--yes{
  background:var(--glow);color:var(--ink);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--glow) 20%,transparent);
}
.pr-feat__ic--no{ color:color-mix(in srgb,var(--mute) 60%,transparent); }

.pr-card__cta{
  margin-top:auto;width:100%;text-align:center;padding:14px 22px;font-size:.95rem;
}

/* Footer line under cards */
.pr-panel__foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-top:26px;color:var(--mute);font-size:.92rem;
}
.pr-panel__foot-dot{ width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);flex:none; }
.pr-panel__sidenote{
  margin-left:auto;font-size:.82rem;color:var(--mute);
  padding:6px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--hairline);
}

/* Bespoke band */
.pr-bespoke{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;
  margin-top:24px;padding:24px 28px;border-radius:18px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--peri) 14%,transparent),var(--glass));
  border:1px solid color-mix(in srgb,var(--peri) 24%,transparent);
}
.pr-bespoke__text{ display:flex;flex-direction:column;gap:4px; }
.pr-bespoke__text strong{ font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--bone); }
.pr-bespoke__text span{ color:var(--mute);font-size:.9rem; }

/* ---------------------------------------------------------------------
   MONTHLY CARE PLANS  (optional maintenance retainer under build tiers)
   Read as a clearly-separate, lighter "add-on" band so they never compete
   with the one-time build tiers above them.
   ------------------------------------------------------------------- */
.pr-care{
  margin-top:clamp(40px,7vh,72px);
  padding-top:clamp(34px,5vh,56px);
  border-top:1px solid var(--hairline);
}
.pr-care__head{ text-align:center;max-width:60ch;margin:0 auto clamp(24px,4vh,40px); }
.pr-care__head .svc-eyebrow{ margin-inline:auto; }
.pr-care__hl{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(1.5rem,3vw,2.2rem);color:var(--bone);margin:10px 0 0;
}
.pr-care__sub{ margin:14px auto 0;color:var(--mute);font-size:1rem;line-height:1.6;max-width:54ch; }

.pr-care__plans{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;
  perspective:1500px;
}
.pr-care__card{
  position:relative;display:flex;flex-direction:column;
  padding:26px 22px;border-radius:20px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--peri) 7%, var(--slate-panel)) 0%, var(--slate-panel) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 36px -16px rgba(5,7,14,.6);
  transform-style:preserve-3d;
  transition:transform .45s var(--ease-expo),box-shadow .45s,border-color .3s,opacity .4s,filter .4s;
  will-change:transform;
}
.pr-care__card:hover{
  transform:translateY(-12px) rotateX(5deg) scale(1.02);
  box-shadow:0 36px 70px -18px rgba(5,7,14,.7), 0 0 44px color-mix(in srgb,var(--peri) 18%,transparent);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  z-index:4;
}
.pr-care__plans:hover .pr-care__card:not(:hover){ transform:translateY(3px) scale(.975);opacity:.74;filter:saturate(.85); }
.pr-care__card.is-popular{
  border-color:transparent;
  background:linear-gradient(165deg, color-mix(in srgb,var(--peri) 30%, var(--slate-panel)) 0%, color-mix(in srgb,var(--peri) 14%, var(--slate-panel)) 60%, var(--slate-raise) 100%);
  box-shadow:0 26px 60px -20px rgba(5,7,14,.75), 0 0 48px color-mix(in srgb,var(--peri) 22%,transparent);
}
.pr-care__card.is-popular::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(150deg,var(--peri),var(--glow) 45%,color-mix(in srgb,var(--peri) 40%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;
}
.pr-care__badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-size:.58rem;letter-spacing:.14em;color:var(--bone);
  padding:6px 13px;border-radius:999px;white-space:nowrap;
  background:var(--peri);box-shadow:0 6px 18px color-mix(in srgb,var(--peri) 50%,transparent);
}
.pr-care__name{
  font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--bone);
  letter-spacing:-.01em;margin-bottom:10px;
}
.pr-care__price{ display:flex;align-items:baseline;gap:4px;line-height:1; }
.pr-care__cad{ font-size:.6rem;color:var(--mute);letter-spacing:.1em;margin-top:6px;display:block; }
.pr-care__blurb{ color:var(--mute);font-size:.86rem;line-height:1.5;margin:14px 0 16px; }
.pr-care__feats{ list-style:none;display:flex;flex-direction:column;gap:9px;flex:1;margin-bottom:20px; }
.pr-care__feats .pr-feat{ font-size:.84rem; }
.pr-care__cta{ margin-top:auto;width:100%;text-align:center;padding:12px 20px;font-size:.9rem; }
.pr-care__foot{
  text-align:center;margin:clamp(20px,3vh,30px) auto 0;max-width:60ch;
  color:var(--mute);font-size:.86rem;line-height:1.55;
}

/* ---------------------------------------------------------------------
   HONEST PRICING NOTE  (indicative-pricing disclaimer near the foot)
   ------------------------------------------------------------------- */
.pr-note{
  max-width:760px;margin:clamp(40px,7vh,80px) auto 0;
  padding:0 var(--pad);text-align:center;
}
.pr-note .svc-eyebrow{ margin-inline:auto; }
.pr-note__text{
  margin:14px auto 0;color:var(--mute);
  font-size:clamp(.96rem,1.25vw,1.08rem);line-height:1.7;max-width:64ch;
}

/* ---------------------------------------------------------------------
   QUOTE-ONLY PANELS (Enterprise, Workshop) — single wide premium panel
   ------------------------------------------------------------------- */
.pr-quote{
  display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(28px,5vw,64px);align-items:center;
  padding:clamp(34px,5vw,60px);border-radius:26px;
  background:radial-gradient(120% 120% at 85% -20%,color-mix(in srgb,var(--accent) 14%,transparent),var(--slate-panel) 60%);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  box-shadow:0 30px 80px rgba(5,7,14,.5);
}
.pr-quote--shop{
  background:radial-gradient(120% 120% at 15% -20%,color-mix(in srgb,var(--glow-warm) 16%,transparent),var(--slate-panel) 60%);
}
.pr-quote__hl{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(1.8rem,3.6vw,2.9rem);color:var(--bone);margin:14px 0 0;
}
.pr-quote__sub{ margin-top:16px;color:var(--mute);font-size:1.05rem;line-height:1.6;max-width:48ch; }
.pr-quote__points{ list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px; }
.pr-quote__points li{ display:flex;align-items:center;gap:9px;color:var(--bone);font-weight:600;font-size:.92rem; }
.pr-quote__dot{ width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);flex:none; }
.pr-quote__aside{ display:flex;flex-direction:column;align-items:flex-start;gap:14px; }
.pr-quote__aside .cc-btn{ padding:16px 28px;font-size:1rem; }
.pr-quote__promise{ font-size:.66rem;color:var(--mute);letter-spacing:.12em; }

/* ---------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------- */
@media (max-width:980px){
  .pr-cards{ grid-template-columns:1fr;gap:18px; }
  /* MOST POPULAR first + never visually crowd on stack */
  .pr-card.is-popular{ order:-1;transform:none;scale:1; }
  .pr-card.is-popular:hover{ transform:translateY(-6px); }
  .pr-card:hover{ transform:translateY(-6px) rotateX(0deg); }
  .pr-cards:hover .pr-card:not(:hover){ transform:none;opacity:1;filter:none; }
  /* Care plans stack too */
  .pr-care__plans{ grid-template-columns:1fr;gap:14px; }
  .pr-care__card.is-popular{ order:-1; }
  .pr-care__card:hover{ transform:translateY(-6px) rotateX(0deg); }
  .pr-care__plans:hover .pr-care__card:not(:hover){ transform:none;opacity:1;filter:none; }
  .pr-quote{ grid-template-columns:1fr;text-align:left; }
  .pr-quote__aside{ align-items:stretch; }
  .pr-quote__aside .cc-btn{ text-align:center; }
}
@media (max-width:760px){
  .pr-seg{ display:none; }
  .pr-select__wrap{ display:block; }
  .pr-selector{ align-items:stretch; }
  .pr-selector__label{ text-align:center; }
  .pr-panel__head{ flex-direction:column;align-items:flex-start; }
  .pr-panel__sidenote{ margin-left:0; }
  .pr-bespoke{ flex-direction:column;align-items:flex-start; }
  .pr-bespoke .cc-btn{ width:100%;text-align:center; }
}

/* ---------------------------------------------------------------------
   4-TIER PANELS (Web Development, with the $999 Starter tier)
   Placed after the base responsive blocks so these widths win. Tighter
   cards + smaller type so four fit without crowding; collapses to 2-up
   then 1-up. The popular card keeps its lift.
   ------------------------------------------------------------------- */
.pr-cards--4{ grid-template-columns:repeat(4,1fr);gap:14px; }
.pr-cards--4 .pr-card{ padding:28px 20px; }
.pr-cards--4 .pr-num{ font-size:clamp(1.9rem,3.4vw,2.5rem); }
.pr-cards--4 .pr-card__name{ font-size:1.15rem; }
.pr-cards--4 .pr-card__feats{ gap:9px; }
.pr-cards--4 .pr-feat{ font-size:.82rem; }
@media (max-width:1180px){
  .pr-cards--4{ grid-template-columns:repeat(2,1fr);gap:18px; }
  .pr-cards--4 .pr-card.is-popular{ transform:none;scale:1; }
  .pr-cards--4 .pr-card.is-popular:hover{ transform:translateY(-8px); }
}
@media (max-width:600px){
  .pr-cards--4{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pr-chip{ opacity:1;transform:none;transition:none; }
  .pr-panel.is-entering{ animation:none; }
  .pr-billing__thumb{ transition:none; }
  .pr-card,.pr-card:hover,.pr-card.is-popular,.pr-card.is-popular:hover{ transition:none; }
  .pr-card:hover,.pr-cards:hover .pr-card:not(:hover){ transform:none;opacity:1;filter:none; }
  .pr-care__card,.pr-care__card:hover,.pr-care__plans:hover .pr-care__card:not(:hover){ transition:none;transform:none;opacity:1;filter:none; }
}
.cc-reduced .pr-chip{ opacity:1;transform:none; }
.cc-reduced .pr-panel.is-entering{ animation:none; }

/* =====================================================================
   LIGHT particles re-skin — matches the service pages. Tier/quote cards stay
   dark and float on the light particle field; on-background text → ink; the
   glass controls become light. Dark bg gradients off (the canvas owns the bg).
   ===================================================================== */
.cc-svc--pricing{background:#EEF1FA}
.pr-promise__hl{ color:var(--ink); }
.pr-promise__sub,.pr-selector__label,.pr-panel__intro,.pr-panel__foot{ color:#4a5170; }
.pr-chip{ background:#fff;border-color:rgba(92,103,149,.18);color:var(--ink); }
.pr-seg{ background:#fff;border-color:rgba(92,103,149,.16); }
.pr-seg__btn{ color:#565d77; }
.pr-seg__btn:hover{ color:var(--ink);background:rgba(92,103,149,.08); }
.pr-billing{ background:#fff;border-color:rgba(92,103,149,.16); }
.pr-billing__btn{ color:#565d77; }
.pr-panel__sidenote{ background:#fff;border-color:rgba(92,103,149,.16);color:#565d77; }
/* dark tier + quote + care cards keep light text inside */
.pr-card,.pr-quote,.pr-care__card{ color:var(--bone); }
/* care band heading/sub + foot → ink on the light page */
.pr-care{ border-top-color:rgba(92,103,149,.18); }
.pr-care__hl{ color:var(--ink); }
.pr-care__sub,.pr-care__foot{ color:#4a5170; }
/* honest-pricing note → ink on light */
.pr-note__text{ color:#4a5170; }
/* currency disclaimer under selector → muted ink on light */
.pr-fx-note{ color:#6a7290; }
/* FX lines live inside dark cards, so they keep their muted-light tone — no override needed */
/* bespoke band → light periwinkle panel, dark text */
.pr-bespoke{ background:color-mix(in srgb,var(--peri) 12%,#fff);border-color:color-mix(in srgb,var(--peri) 28%,transparent); }
.pr-bespoke__text strong{ color:var(--ink); }
.pr-bespoke__text span{ color:#565d77; }