/* Pricing page.
   The app's own /pricing is a dark "higgsfield" stage in lime #d8ff3f / magenta #ff2e8a on
   black. Those are route-scoped one-offs, NOT platform tokens — so this port drops them
   entirely and rebuilds the page in the landing's language: white ground, --blue as the only
   accent, gold reserved for the one thing that genuinely needs to pop (the discount).

   Every behaviour the live page has is kept: the credit-pack slider, the allowance toggle,
   the per-channel conversation estimates, the EGP line and the per-card feature list. */

.pr { max-width: 1220px; margin: 0 auto; padding: 56px min(6vw, 40px) 40px; }
.pr-head { max-width: 720px; margin-bottom: 30px; }
.pr-head .pill { margin-bottom: 18px; }
.pr-head h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.025em; margin: 0 0 16px; }
.pr-head > p { font-size: 17.5px; line-height: 1.65; color: var(--muted); margin: 0; }

/* The one place a second colour earns its keep: a discount has to read as a discount.
   gold-deep on gold-wash measures 4.78:1 — gold-ink on the same wash is 4.43 and fails. */
.pr-offer {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  padding: 9px 15px; border-radius: 100px;
  background: #FFEEDC; border: 1px solid rgba(var(--gold-rgb), .38);
  font-size: 13.6px; font-weight: 600; color: #9A5B06;
}

/* ===== allowance toggle ===== */
.pr-toggle { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.pr-toggle-label { font-size: 13.4px; color: var(--muted); }
.pr-seg { display: inline-flex; padding: 4px; border-radius: 100px; background: #F3F6FC; border: 1px solid var(--line); }
.pr-segbtn {
  font-family: inherit; font-size: 13.4px; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border-radius: 100px; border: 1px solid transparent;
  background: transparent; color: #46587A;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.pr-segbtn:hover { color: var(--blue); }
.pr-segbtn.is-on {
  background: #fff; color: var(--blue); border-color: rgba(31,98,255,.24);
  box-shadow: 0 4px 12px -6px rgba(12,44,130,.3);
}

/* ===== cards ===== */
.pr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pr-card {
  display: flex; flex-direction: column; padding: 22px 20px 22px;
  border-radius: 20px; background: #fff; border: 1px solid var(--line);
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pr-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(12,44,130,.42); border-color: rgba(31,98,255,.26); }
.pr-card.is-top {
  border-color: rgba(31,98,255,.4);
  background: linear-gradient(180deg, #F5F9FF 0%, #fff 38%);
  box-shadow: 0 22px 46px -28px rgba(15,75,230,.5);
}
.pr-badge {
  align-self: flex-start; margin-bottom: 12px; padding: 5px 12px; border-radius: 100px;
  background: var(--blue); color: #fff;
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.pr-badge.is-ghost { background: transparent; color: transparent; }

.pr-cardhead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pr-name { font-size: 18px; font-weight: 700; margin: 0; }
.pr-off {
  padding: 3px 9px; border-radius: 100px; background: #FFEEDC;
  border: 1px solid rgba(var(--gold-rgb), .38); color: #9A5B06;
  font-weight: 700; font-size: 11px; white-space: nowrap;
}
.pr-tag { font-size: 13.2px; line-height: 1.55; color: var(--muted); margin: 8px 0 18px; }

/* ===== allowance + slider ===== */
.pr-pack {
  padding: 15px 15px 13px; border-radius: 14px;
  background: #F7F9FD; border: 1px solid var(--line); margin-bottom: 18px;
}
.pr-allow b { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.pr-creditnote { display: block; font-style: normal; font-size: 11.8px; line-height: 1.45; color: var(--muted); margin-top: 4px; }
.pr-ests { margin-top: 11px; display: grid; gap: 5px; }
.pr-est { display: flex; justify-content: space-between; gap: 10px; font-size: 12.4px; color: var(--muted); }
.pr-est b { color: var(--ink); font-weight: 600; }
/* the toggle swaps what sits under the credits figure — never the figure itself, because
   the credit is the unit actually sold and metered */
body[data-allowance="replies"] .pr-ests { display: none; }
body[data-allowance="conversations"] .pr-creditnote { display: none; }

.pr-slider {
  -webkit-appearance: none; appearance: none; width: 100%; margin: 14px 0 6px;
  height: 5px; border-radius: 100px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue) var(--fill, 0%), #DDE6F5 var(--fill, 0%), #DDE6F5 100%);
}
.pr-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue); cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(12,44,130,.5);
  transition: transform .15s var(--ease);
}
.pr-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.pr-slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue); cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(12,44,130,.5);
}
.pr-slider:focus-visible { box-shadow: 0 0 0 3px rgba(31,98,255,.28); }
.pr-ticks { display: flex; justify-content: space-between; font-size: 10.8px; color: #8296B4; font-variant-numeric: tabular-nums; }

/* ===== price ===== */
.pr-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pr-price s { font-size: 13.4px; color: #93A3BE; }
.pr-amount { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pr-per, .pr-from { font-size: 13.4px; color: var(--muted); }
.pr-from { font-weight: 600; }
.pr-egp { margin-top: 6px; font-size: 12.6px; color: var(--muted); }
.pr-sub { margin-top: 8px; font-size: 13.4px; color: var(--muted); }
.pr-over { margin-top: 10px; font-size: 12.4px; color: var(--muted); }
.pr-over b { color: var(--ink); font-weight: 600; }
.pr-offer-tag {
  margin-top: 10px; display: inline-block; font-size: 11.6px; font-weight: 700; color: #9A5B06;
}

/* ===== per-card feature list ===== */
.pr-feats { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.pr-frow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; }
.pr-frow dt { font-size: 12.4px; color: var(--muted); }
.pr-frow dd { margin: 0; font-size: 12.6px; font-weight: 600; color: var(--ink); text-align: right; }
.pr-yes { color: var(--blue); font-weight: 700; }
.pr-no { color: #A9B7CE; }

.pr-cta { margin-top: auto; padding-top: 20px; }
.pr-cta a {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 100px; font-size: 14.4px; font-weight: 600;
  background: #F3F6FC; border: 1px solid rgba(31,98,255,.18); color: #14306B;
  transition: all .18s var(--ease);
}
.pr-cta a:hover { border-color: rgba(31,98,255,.45); color: var(--blue); }
.pr-card.is-top .pr-cta a {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, #4B8CFF 0%, #1250E6 62%, #0A3AC8 100%);
  box-shadow: 0 12px 26px -10px rgba(15,75,230,.55), inset 0 1px 0 rgba(255,255,255,.45);
}
.pr-card.is-top .pr-cta a:hover { color: #fff; }

/* ===== closing notes ===== */
.pr-notes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 44px; }
.pr-note-card { padding: 22px 24px; border-radius: 18px; background: #F7F9FD; border: 1px solid var(--line); }
.pr-note-card h3 { font-size: 15.6px; font-weight: 700; margin: 0 0 8px; }
.pr-note-card p { font-size: 14.2px; line-height: 1.68; color: #3E4F6B; margin: 0; }
.pr-fine { margin-top: 26px; font-size: 13px; line-height: 1.7; color: #8296B4; }
.pr-fine a { color: var(--blue); font-weight: 600; }
.pr-fine p { margin: 0 0 6px; }

@media (max-width: 1080px) { .pr-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .pr-grid, .pr-notes { grid-template-columns: minmax(0,1fr); } }

@media (prefers-reduced-motion: reduce) {
  .pr-card, .pr-slider::-webkit-slider-thumb { transition: none; }
  .pr-card:hover { transform: none; }
}

/* ===== per-plan accent glow =====
   A Higgsfield-style lit card, rebuilt for a WHITE ground. Neon designed for black goes
   muddy here, so the glow is made of three cheap parts instead: a coloured halo cast by
   box-shadow, a lit top edge, and a faint tint bleeding down from the top of the card.

   TWO tokens per plan, and the split is a contrast rule, not a style choice:
     --acc      vivid, for the halo/tint/edge  — DECORATIVE ONLY. Vivid green is 2.28:1 on
                white and vivid orange 2.04:1, so neither may ever carry meaning.
     --acc-ink  darkened, for anything perceivable — the slider fill and thumb, the feature
                ticks, CTA hover. All four measure 4.9-6.5:1 on white.

   These rules live at the END of the file on purpose: .pr-card[data-plan=...] and
   .pr-card.is-top have the SAME specificity (0,2,0), so source order is what decides which
   background wins. Moving this block up silently hands Growth back its old blue gradient. */
.pr-card[data-plan="starter"]    { --acc: 34,197,94;  --acc-ink: #15803D; }  /* green  */
.pr-card[data-plan="growth"]     { --acc: 31,98,255;  --acc-ink: #1F62FF; }  /* blue   */
.pr-card[data-plan="pro"]        { --acc: 255,159,67; --acc-ink: #9A5B06; }  /* orange */
.pr-card[data-plan="enterprise"] { --acc: 239,68,68;  --acc-ink: #B91C1C; }  /* red    */

.pr-card[data-plan] {
  position: relative;
  border-color: rgba(var(--acc), .34);
  background: linear-gradient(180deg, rgba(var(--acc), .13) 0%, #fff 38%);
  box-shadow:
    0 0 0 1px rgba(var(--acc), .16),
    0 10px 26px -10px rgba(var(--acc), .55),
    0 26px 64px -26px rgba(var(--acc), .70);
  animation: prGlow 5.2s ease-in-out infinite;
}
.pr-card[data-plan="growth"]     { animation-delay: -1.3s; }
.pr-card[data-plan="pro"]        { animation-delay: -2.6s; }
.pr-card[data-plan="enterprise"] { animation-delay: -3.9s; }

/* the lit top edge, inset so it sits between the rounded corners */
.pr-card[data-plan]::before {
  content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, rgb(var(--acc)) 45%, rgb(var(--acc)) 55%, transparent);
  filter: drop-shadow(0 0 6px rgba(var(--acc), .9));
}

@keyframes prGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--acc), .14),
                         0 10px 26px -10px rgba(var(--acc), .46),
                         0 26px 64px -26px rgba(var(--acc), .58); }
  50%      { box-shadow: 0 0 0 1px rgba(var(--acc), .24),
                         0 12px 32px -10px rgba(var(--acc), .70),
                         0 32px 78px -26px rgba(var(--acc), .88); }
}

.pr-card[data-plan]:hover {
  border-color: rgba(var(--acc), .55);
  animation-play-state: paused;
  box-shadow:
    0 0 0 1px rgba(var(--acc), .20),
    0 16px 38px -14px rgba(var(--acc), .58),
    0 34px 78px -30px rgba(var(--acc), .70);
}

/* controls take the INK, never the vivid — these have to be perceivable */
.pr-card[data-plan] .pr-slider {
  background: linear-gradient(90deg, var(--acc-ink) 0%, var(--acc-ink) var(--fill, 0%), #DDE6F5 var(--fill, 0%), #DDE6F5 100%);
}
.pr-card[data-plan] .pr-slider::-webkit-slider-thumb { border-color: var(--acc-ink); }
.pr-card[data-plan] .pr-slider::-moz-range-thumb { border-color: var(--acc-ink); }
.pr-card[data-plan] .pr-slider:focus-visible { box-shadow: 0 0 0 3px rgba(var(--acc), .34); }
.pr-card[data-plan] .pr-yes { color: var(--acc-ink); }
.pr-card[data-plan] .pr-cta a:hover { border-color: rgba(var(--acc), .6); color: var(--acc-ink); }
.pr-card[data-plan] .pr-pack { border-color: rgba(var(--acc), .22); background: rgba(var(--acc), .05); }

/* Growth keeps the solid brand button — it is the primary action on the page, and blue is
   already its accent, so nothing needs restating. */
.pr-card.is-top .pr-cta a:hover { color: #fff; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .pr-card[data-plan] { animation: none; }
}

/* ===== cursor spotlight on the plan cards =====
   Same mechanism as the service-page steps: mousemove writes --mx/--my, the overlay's
   radial-gradient reads them, in the card's own accent. ::after — ::before is already
   taken by the lit top edge. Hover-gated in CSS so touch never shows a stuck glow. */
.pr-card[data-plan] { overflow: hidden; }
.pr-card[data-plan]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(var(--acc), .11), transparent 64%);
  transition: opacity .35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .pr-card[data-plan]:hover::after { opacity: 1; }
}