/* ═══════════════════════════════════════════════════════
   PRICING.CSS — /pricing standalone page (Iconiq Creatives)
   Dark premium · gradient accents · glass cards
═══════════════════════════════════════════════════════ */

.pr-body {
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient gradient glow backdrop */
.pr-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 15% 0%, rgba(65, 189, 254, 0.14), transparent 60%),
    radial-gradient(55% 45% at 90% 12%, rgba(225, 17, 251, 0.14), transparent 62%),
    radial-gradient(50% 40% at 50% 100%, rgba(65, 189, 254, 0.08), transparent 70%);
}
.pr-grid-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: clamp(48px, 6vw, 84px) clamp(48px, 6vw, 84px);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 80%);
}

.pr-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

/* ── Top bar ─────────────────────────────────────────── */
.pr-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 3vw, 30px) 0;
}
.pr-logo { display: inline-flex; align-items: center; }
.pr-logo img { height: clamp(26px, 4vw, 34px); width: auto; display: block; }

.pr-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.pr-back:hover {
  color: var(--color-white);
  border-color: rgba(65, 189, 254, 0.5);
  background: rgba(65, 189, 254, 0.08);
}
.pr-back svg { width: 15px; height: 15px; transition: transform var(--t-base); }
.pr-back:hover svg { transform: translateX(-3px); }

/* ── Header ──────────────────────────────────────────── */
.pr-head {
  text-align: center;
  padding: clamp(46px, 8vw, 96px) 0 clamp(30px, 5vw, 56px);
}
.pr-title {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.pr-title .grad {
  background: var(--gradient-brand-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pr-lead {
  max-width: 560px;
  margin: clamp(18px, 2.6vw, 24px) auto 0;
  font-size: clamp(0.98rem, 1.6vw, 1.12rem);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ── Section heading ─────────────────────────────────── */
.pr-section { padding: clamp(26px, 4vw, 40px) 0; }
.pr-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.pr-section-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-blue);
}
.pr-section-title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing: -0.02em;
}

/* ── Scroll-changing section backgrounds ─────────────────
   Web design rides the brand gradient (like the Careers section);
   Per-project rates sits on a light panel — so the backdrop shifts
   as you scroll. Each band is full-bleed via a 100vw ::after. */
.pr-section--grad,
.pr-section--light {
  position: relative;
  isolation: isolate;
  padding: clamp(44px, 6vw, 80px) 0;
  margin: clamp(10px, 2vw, 20px) 0;
}
.pr-section--grad::after,
.pr-section--light::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}
.pr-section--grad::after {
  /* Brand gradient deepened with a soft top glow — matches the Careers section. */
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255, 255, 255, 0.18) 0%, transparent 45%),
    linear-gradient(180deg, rgba(5, 6, 12, 0.10) 0%, rgba(5, 6, 12, 0.32) 100%),
    var(--gradient-brand);
  /* Fade the band in/out of the black page so the edges don't look cut off. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
.pr-section--light::after { background: #f3f4f7; }

/* Web design on the gradient — lighter translucent dark card, gradient price + CTA */
.pr-section--grad .pr-section-num { color: rgba(255, 255, 255, 0.9); }
.pr-section--grad .pr-section-title { color: #ffffff; }
.pr-section--grad .pr-section-num,
.pr-section--grad .pr-section-title { text-shadow: 0 2px 20px rgba(5, 6, 12, 0.25); }

.pr-section--grad .pr-web {
  background: rgba(14, 16, 28, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 66px -34px rgba(5, 6, 12, 0.7);
}
.pr-section--grad .pr-web::before { display: none; }
.pr-section--grad .pr-web:hover { box-shadow: 0 40px 78px -34px rgba(5, 6, 12, 0.75); }
.pr-section--grad .pr-web-title { color: #ffffff; }
.pr-section--grad .pr-web-desc { color: rgba(255, 255, 255, 0.82); }

/* Per-project rates on the light panel — dark text + white cards */
.pr-section--light .pr-section-num { color: #1f6fd6; }
.pr-section--light .pr-section-title { color: #0b0d14; }
.pr-section--light .pr-card {
  background: #ffffff;
  border-color: rgba(10, 14, 25, 0.10);
  box-shadow: 0 14px 34px -22px rgba(10, 14, 25, 0.4);
  backdrop-filter: none;
}
.pr-section--light .pr-card:hover { box-shadow: 0 22px 46px -24px rgba(10, 14, 25, 0.5); }
.pr-section--light .pr-card-title { color: #0b0d14; }
.pr-section--light .pr-card-sub { color: #6b7280; }
.pr-section--light .pr-row { border-top-color: rgba(10, 14, 25, 0.09); }
.pr-section--light .pr-row-name { color: #1a1e28; }
.pr-section--light .pr-row-meta { color: #8a8f99; }
.pr-section--light .pr-row-lead { border-bottom-color: rgba(10, 14, 25, 0.18); }
.pr-section--light .pr-row-price { color: #0b0d14; }

/* Extra breathing room around the Payment methods section (top + bottom) */
#sec-pay {
  padding-top: clamp(52px, 8vw, 108px);
  padding-bottom: clamp(52px, 8vw, 108px);
}

/* ── Web design — featured full-width offer ──────────── */
.pr-web {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(22px, 4vw, 48px);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(120deg, rgba(65, 189, 254, 0.08), rgba(225, 17, 251, 0.08)),
    rgba(255, 255, 255, 0.02);
  padding: clamp(24px, 3.4vw, 42px);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.pr-web::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--gradient-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.pr-web:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 66px -30px rgba(0, 0, 0, 0.85),
              0 0 56px -16px rgba(65, 189, 254, 0.3);
}
.pr-web + .pr-web { margin-top: clamp(14px, 2vw, 20px); }
/* Custom web build — plainer card so the priced one leads */
.pr-web--custom {
  background: rgba(255, 255, 255, 0.028);
}
.pr-web--custom::before { background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), transparent 55%); }
.pr-web--custom:hover {
  box-shadow: 0 30px 66px -30px rgba(0, 0, 0, 0.85),
              0 0 56px -16px rgba(225, 17, 251, 0.28);
}
.pr-web--custom .pr-web-amount {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--color-white);
}
.pr-web--custom .pr-card-icon { background: rgba(225, 17, 251, 0.12); color: var(--color-pink); }
.pr-web-info { max-width: 580px; }
.pr-web-title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  letter-spacing: -0.02em;
  margin: 16px 0 8px;
}
.pr-web-desc { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.55; }
.pr-web-buy { flex-shrink: 0; text-align: right; }
.pr-web-price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.pr-web-amount {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--gradient-brand-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pr-web .pr-plan-cta { display: inline-flex; }

@media (max-width: 720px) {
  .pr-web { flex-direction: column; align-items: flex-start; gap: 24px; }
  .pr-web-buy { text-align: left; width: 100%; }
  .pr-web-price { justify-content: flex-start; }
  .pr-web .pr-plan-cta { width: 100%; }
}

/* ── À la carte rate cards ───────────────────────────── */
.pr-rates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
}
.pr-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.028);
  backdrop-filter: blur(8px);
  padding: clamp(22px, 3vw, 32px);
  overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.pr-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(65, 189, 254, 0.5), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.pr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.8),
              0 0 40px -10px rgba(65, 189, 254, 0.28);
}
.pr-card:hover::before { opacity: 1; }
.pr-card--pink:hover {
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.8),
              0 0 40px -10px rgba(225, 17, 251, 0.3);
}
.pr-card--pink::before { background: linear-gradient(135deg, rgba(225, 17, 251, 0.5), transparent 45%); }

.pr-card-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  background: rgba(65, 189, 254, 0.12);
  color: var(--color-blue);
}
.pr-card--pink .pr-card-icon { background: rgba(225, 17, 251, 0.12); color: var(--color-pink); }
.pr-card-icon svg { width: 22px; height: 22px; }

.pr-card-title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-bottom: 4px;
}
.pr-card-sub {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

.pr-list { list-style: none; }
.pr-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.pr-row:first-child { border-top: none; }
.pr-row-name { font-size: var(--text-sm); color: var(--color-text-primary); }
.pr-row-meta { display: block; font-size: var(--text-2xs); color: var(--color-text-muted); margin-top: 2px; }
.pr-row-lead { flex: 1 1 auto; border-bottom: 1px dotted rgba(255, 255, 255, 0.14); transform: translateY(-3px); }
.pr-row-price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white);
  white-space: nowrap;
}

/* ── Packages ────────────────────────────────────────── */
.pr-packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 22px);
  align-items: stretch;
}
.pr-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  padding: clamp(26px, 3.4vw, 38px);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.pr-plan:hover { transform: translateY(-5px); }

/* Featured "Growth" plan — gradient frame + glow */
.pr-plan--featured {
  background: linear-gradient(180deg, rgba(65, 189, 254, 0.06), rgba(225, 17, 251, 0.06));
  border-color: transparent;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85),
              0 0 60px -18px rgba(225, 17, 251, 0.35);
}
.pr-plan--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--gradient-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.pr-plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #05060a;
  background: var(--gradient-brand-h);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(225, 17, 251, 0.6);
}

.pr-plan-name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--text-2xl);
  margin-bottom: 6px;
}
.pr-plan-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 22px;
}
.pr-plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.pr-plan-amount {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pr-plan--featured .pr-plan-amount {
  background: var(--gradient-brand-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pr-plan-per {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.pr-plan-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
  margin: 22px 0;
}
.pr-features { list-style: none; display: grid; gap: 12px; margin-bottom: 26px; }
.pr-feature {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: 1.45;
}
.pr-feature svg {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  color: var(--color-blue);
}
.pr-plan--featured .pr-feature svg { color: var(--color-pink); }

.pr-plan-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 22px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base), color var(--t-base), border-color var(--t-base);
}
/* Plan-card buttons span the card; web-card button hugs its content */
.pr-plan > .pr-plan-cta { width: 100%; }
.pr-web .pr-plan-cta { display: inline-flex; }
.pr-plan-cta--ghost {
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.02);
}
.pr-plan-cta--ghost:hover {
  border-color: rgba(65, 189, 254, 0.5);
  background: rgba(65, 189, 254, 0.08);
  transform: translateY(-2px);
}
.pr-plan-cta--primary {
  background: var(--gradient-brand-h);
  color: #05060a;
  box-shadow: 0 16px 30px -26px rgba(225, 17, 251, 0.55);
}
.pr-plan-cta--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 38px -32px rgba(225, 17, 251, 0.6); }
.pr-plan-cta svg { width: 16px; height: 16px; transition: transform var(--t-base); }
.pr-plan-cta:hover svg { transform: translateX(4px); }

.pr-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: clamp(18px, 3vw, 26px);
}

/* ── What's included / not included (fine print per section) ── */
.pr-terms {
  max-width: 820px;
  margin: clamp(22px, 3.2vw, 32px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pr-terms-row {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
.pr-terms-row strong {
  display: inline-block;
  margin-right: 8px;
  font-weight: 600;
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.pr-terms-row.inc strong { color: var(--color-blue); }
.pr-terms-row.exc strong { color: var(--color-pink); }
/* Light "Per-project" band — darken the body copy for contrast; brand labels stay. */
.pr-section--light .pr-terms-row { color: rgba(20, 22, 30, 0.62); }

/* Per-project: the Video "included / not included" note belongs to the Video
   card only. On the mobile carousel it eases away when you swipe to Graphic
   Design, and eases back on Video. (Desktop shows both cards, so it stays.) */
#sec-rates .pr-terms {
  overflow: hidden;
  max-height: 200px;
  transition: opacity 0.4s var(--t-ease, ease),
              transform 0.4s var(--t-ease, ease),
              max-height 0.45s var(--t-ease, ease),
              margin-top 0.45s var(--t-ease, ease);
}
#sec-rates .pr-terms.is-hidden {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  margin-top: 0;
  pointer-events: none;
}

/* ── Payment ─────────────────────────────────────────── */
.pr-pay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
}
.pr-pay-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.028);
  padding: clamp(20px, 2.6vw, 28px);
}
.pr-pay-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pr-pay-logo {
  display: block;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
}
.pr-pay-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-pay-logo--mono {
  display: grid;
  place-items: center;
  background: var(--mono, #f26a21);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
}
.pr-qr-modal-logo.pr-pay-logo--mono { font-size: 1.4rem; }
.pr-pay-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.pr-pay-row { margin-top: 10px; }
.pr-pay-key { font-size: var(--text-2xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pr-pay-val { font-family: var(--font-mono); font-size: var(--text-base); color: var(--color-white); }

/* QR (GoTyme) — hidden behind a branded trigger, revealed in a centered lightbox */
.pr-qr { margin: 2px 0 18px; }

/* ── Locked trigger tile ─────────────────────────────── */
.pr-qr-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(65, 189, 254, 0.12), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(225, 17, 251, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.028);
  color: var(--color-white);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
/* moving sheen sweep so the covered code feels "alive" */
.pr-qr-trigger::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-out-quart);
  pointer-events: none;
}
.pr-qr-trigger:hover,
.pr-qr-trigger:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(65, 189, 254, 0.45);
  box-shadow: 0 22px 50px -24px rgba(65, 189, 254, 0.55);
  outline: none;
}
.pr-qr-trigger:hover::after,
.pr-qr-trigger:focus-visible::after { left: 120%; }

.pr-qr-glyph {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--gradient-brand-h);
  color: #05060a;
}
.pr-qr-glyph svg { width: 26px; height: 26px; }

/* Bank logo used as the trigger icon */
.pr-qr-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.6);
}
.pr-qr-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Collapse the QR block for methods with no code (e.g. BDO) */
.pr-qr-tile[hidden],
.pr-qr-actions[hidden],
.pr-qr-btn[hidden],
.pr-pay-logo[hidden] { display: none !important; }

.pr-qr-trigger-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-qr-trigger-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  color: var(--color-white);
}
.pr-qr-trigger-sub {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.pr-qr-trigger-arrow {
  margin-left: auto;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--color-text-secondary);
  transition: color var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.pr-qr-trigger-arrow svg { width: 15px; height: 15px; }
.pr-qr-trigger:hover .pr-qr-trigger-arrow,
.pr-qr-trigger:focus-visible .pr-qr-trigger-arrow {
  color: var(--color-blue);
  border-color: rgba(65, 189, 254, 0.45);
  transform: scale(1.08);
}

.pr-qr-cap {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* ── White QR tile (used inside the lightbox) ────────── */
.pr-qr-tile {
  position: relative;
  width: 100%;
  max-width: 260px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
}
.pr-qr-tile::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(140deg, var(--brand, #41BDFE), var(--brand-glow, rgba(65, 189, 254, 0.45)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.pr-qr-img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* ── Centered lightbox ───────────────────────────────── */
.pr-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 24px;
}
.pr-qr-modal[hidden] { display: none; }
.pr-qr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 10, 0.72);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pr-qr-modal.open .pr-qr-modal-backdrop { opacity: 1; }

.pr-qr-modal-card {
  /* Brand accent — overridden per bank in JS (applyBrand); these are the fallbacks. */
  --brand: #41BDFE;
  --brand-tint: rgba(65, 189, 254, 0.16);
  --brand-border: rgba(65, 189, 254, 0.55);
  --brand-glow: rgba(65, 189, 254, 0.45);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(360px, 100%);
  padding: clamp(28px, 5vw, 40px) clamp(22px, 4vw, 32px) clamp(24px, 4vw, 32px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--brand-border);
  background:
    radial-gradient(130% 85% at 50% -12%, var(--brand-tint), transparent 72%),
    rgba(16, 16, 22, 0.98);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 50px -8px var(--brand-glow);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  transition: opacity 0.32s var(--ease-out-quart), transform 0.32s var(--ease-out-quart);
}
/* While capturing to an image, drop the action buttons + close from the shot. */
.pr-qr-modal-card.is-capturing .pr-qr-actions,
.pr-qr-modal-card.is-capturing .pr-qr-modal-close { display: none !important; }
/* Neutralise the open-animation transform (and its transition) so measured geometry
   matches html2canvas's untransformed layout — otherwise the composited QR/logo mis-scale. */
.pr-qr-modal.open .pr-qr-modal-card.is-capturing,
.pr-qr-modal-card.is-capturing { transform: none !important; transition: none !important; }
/* html2canvas can't render the masked gradient ring, so it would flood the QR's
   transparent pixels with the brand colour — hide the ring while capturing. */
.pr-qr-modal-card.is-capturing .pr-qr-tile::before { display: none !important; }
.pr-qr-modal-card.is-capturing .pr-qr-tile { background: #fff; }
.pr-qr-modal.open .pr-qr-modal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pr-qr-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--t-base), border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.pr-qr-modal-close svg { width: 16px; height: 16px; }
.pr-qr-modal-close:hover {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  transform: rotate(90deg);
}
.pr-qr-modal-logo { width: 48px; height: 48px; border-radius: 13px; }
.pr-qr-modal-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand, var(--color-blue));
}
.pr-qr-modal-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 2px;
}
.pr-qr-modal-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}
.pr-qr-modal-key {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}
.pr-qr-modal-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-white);
}
.pr-qr-modal-acct {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.08em;
  color: var(--color-white);
}
body.pr-modal-open { overflow: hidden; }

.pr-qr-actions { display: flex; gap: 10px; margin-top: 6px; width: 100%; }
.pr-qr-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-white);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-base), background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.pr-qr-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pr-qr-btn:hover { transform: translateY(-2px); border-color: rgba(65, 189, 254, 0.5); background: rgba(65, 189, 254, 0.08); }
.pr-qr-btn--primary {
  /* Tinted to the active bank's brand colour (set per-method in JS). */
  background: var(--brand, var(--color-blue));
  color: var(--brand-ink, #05060a);
  border-color: transparent;
  /* spread near -blur keeps the glow from poking past the pill's rounded ends */
  box-shadow: 0 14px 26px -24px var(--brand-glow, rgba(65, 189, 254, 0.6));
}
.pr-qr-btn--primary:hover {
  background: var(--brand, var(--color-blue));
  color: var(--brand-ink, #05060a);
  border-color: transparent;
  box-shadow: 0 18px 32px -28px var(--brand-glow, rgba(65, 189, 254, 0.7));
}
.pr-pay-card.qr-off .pr-qr { display: none; }

/* toast */
.pr-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(14px);
  z-index: 1200;
  background: rgba(15, 15, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: 11px 18px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
}
.pr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── CTA band ────────────────────────────────────────── */
.pr-cta {
  position: relative;
  text-align: center;
  border-radius: var(--radius-xl);
  padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 48px);
  margin: clamp(30px, 5vw, 56px) 0;
  overflow: hidden;
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(65, 189, 254, 0.14), transparent 60%),
    radial-gradient(70% 130% at 50% 100%, rgba(225, 17, 251, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.pr-cta-title {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.6rem, 4.6vw, 2.6rem);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.pr-cta-sub { color: var(--color-text-secondary); max-width: 460px; margin: 0 auto 26px; font-size: var(--text-sm); line-height: 1.55; }
.pr-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 30px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand-h);
  color: #05060a;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  box-shadow: 0 18px 34px -28px rgba(225, 17, 251, 0.5);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.pr-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 24px 42px -34px rgba(225, 17, 251, 0.55); }
.pr-cta-btn svg { width: 18px; height: 18px; transition: transform var(--t-base); }
.pr-cta-btn:hover svg { transform: translateX(4px); }

/* ── Footer ──────────────────────────────────────────── */
.pr-foot {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: clamp(26px, 4vw, 40px) 0;
  margin-top: clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.pr-foot-copy { font-size: var(--text-xs); color: var(--color-text-muted); }
.pr-foot a { color: var(--color-text-secondary); text-decoration: none; transition: color var(--t-base); }
.pr-foot a:hover { color: var(--color-blue); }

/* ── Reveal ──────────────────────────────────────────── */
.pr-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart); }
.pr-reveal.in { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 980px) {
  .pr-packages { grid-template-columns: 1fr; }
  .pr-pay { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pr-rates, .pr-pay { grid-template-columns: 1fr; }
}

/* Phones: give the hero more breathing room so the big title doesn't sit
   cramped under the top bar and the top section feels balanced. */
@media (max-width: 600px) {
  .pr-topbar { padding: 24px 0; }
  .pr-head { padding: 64px 0 52px; }
  .pr-lead { margin-top: 24px; }
  .pr-section { padding-top: clamp(32px, 7vw, 44px); }
}

/* ── Pricing cards → wheel carousel on phones ───────────────
   Both the Social-media packages and the Per-project rate cards become the
   same swipe carousel on phones: scroll-snap (card + peek) with a coverflow
   shrink/fade on the card peeking in from the right, plus scaling dots —
   the exact motion + dot look of the Artsons featured-project wheel.
   JS drives the coverflow + dots. */
.pr-pkg-dots { display: none; }
@media (max-width: 760px) {
  .pr-packages,
  .pr-rates {
    display: flex;
    grid-template-columns: none;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* top padding gives the "Most Popular" badge (which sits above the card at
       top:-13px) room inside the scroll container, which would otherwise clip it */
    padding: 24px 16px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* pull the track to the page edges so cards can peek off-screen */
    margin-left: calc(-1 * clamp(20px, 5vw, 48px));
    margin-right: calc(-1 * clamp(20px, 5vw, 48px));
    padding-left: clamp(20px, 5vw, 48px);
    padding-right: clamp(20px, 5vw, 48px);
    scroll-padding-left: clamp(20px, 5vw, 48px);
  }
  .pr-packages::-webkit-scrollbar,
  .pr-rates::-webkit-scrollbar { display: none; }
  .pr-packages > .pr-plan,
  .pr-rates > .pr-card {
    flex: 0 0 80%;
    min-width: 0;
    scroll-snap-align: start;
    transform-origin: left center;
    will-change: transform, opacity;
  }

  /* Dots — same as the portfolio wheel: equal 7px circles set apart by opacity,
     with the active one scaled up (JS sets the scale per-dot via dotScale). */
  .pr-pkg-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-top: 20px;
  }
  .pr-pkg-dots button {
    width: 16px; height: 16px;
    min-width: 0; min-height: 0;
    padding: 0; margin: 0;
    display: grid; place-items: center;
    background: none; border: none;
    cursor: pointer;
    transform-origin: center;
    transition: transform 0.3s ease;
  }
  .pr-pkg-dots button::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
    transition: opacity 0.25s ease;
  }
  .pr-pkg-dots button:hover::before { opacity: 0.6; }
  .pr-pkg-dots button[aria-current="true"]::before { opacity: 1; }
}
/* Dot colour follows each section's foreground: white on the dark Social band,
   ink on the light Per-project band. */
#sec-social .pr-pkg-dots { color: rgba(255, 255, 255, 0.92); }
#sec-rates .pr-pkg-dots { color: #0b0d12; }

@media (prefers-reduced-motion: reduce) {
  .pr-reveal { opacity: 1; transform: none; transition: none; }
  .pr-card, .pr-plan, .pr-cta-btn, .pr-plan-cta, .pr-back { transition: none; }
  .pr-qr-trigger, .pr-qr-trigger::after, .pr-qr-modal-card,
  .pr-qr-modal-backdrop, .pr-qr-modal-close { transition: none; }
  .pr-qr-modal-card { transform: none; }
}

/* ── Single shared section CTA (e.g. Social media) ─────── */
.pr-section-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 3vw, 30px);
}
.pr-section-cta .pr-plan-cta {
  width: auto;
  min-width: 240px;
}

/* Book nav item behaves like every other tab: muted when inactive, electric
   blue when it's the active section (handled by the shared .nav-active rule). */