/* ============================================================
   PRECEDENT PRICING
   Self-contained. No libraries, no images.

   What animates:
     · cards stagger in on scroll
     · every price counts up from zero
     · feature checkmarks draw themselves in sequence
     · the featured card has a light rotating around its border
     · a spotlight follows the cursor across each card
     · the Monthly / First year toggle rolls the numbers between
       setup+monthly and true first-year cost

   Scale with font-size on .pr. All colours are local variables.
   ============================================================ */
@property --pr-a{syntax:'<angle>';initial-value:0deg;inherits:false}

.pr{
  --pr-accent:#7ee04a;
  --pr-accent-dim:rgba(126,224,74,.4);
  --pr-ink:#f6f6f2;
  --pr-dim:#8b8d83;
  --pr-faint:#5a5c53;
  --pr-line:rgba(246,246,242,.11);
  --pr-bg:#0c0d0b;
  --pr-card:#141613;
  --pr-card-2:#191c17;
  --pr-mono:'JetBrains Mono',ui-monospace,monospace;
  --pr-display:'Archivo',system-ui,sans-serif;

  font-size:clamp(13px,1.05vw,16px);      /* ← master scale dial */
  font-family:var(--pr-display);
  color:var(--pr-ink);background:var(--pr-bg);
  padding:4.5em clamp(1.4rem,4vw,4.5rem);
  position:relative;overflow:hidden;
}
.pr *{box-sizing:border-box;margin:0;padding:0}
.pr ul{list-style:none}

/* ---- header ---- */
.pr-head{
  max-width:96em;margin:0 auto 2.6em;
  display:grid;grid-template-columns:1fr 1.1fr;gap:2.5em;align-items:end;
}
.pr-label{
  font-family:var(--pr-mono);font-size:.66em;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--pr-dim);
}
.pr-title{
  margin-top:.7em;font-weight:800;font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:.94;letter-spacing:-.035em;text-transform:uppercase;max-width:15ch;
}
.pr-title em{
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:-.015em;color:var(--pr-accent);
}
.pr-lede{color:#c4c6bf;font-size:.95em;line-height:1.62;max-width:46ch}

/* ---- monthly / first-year toggle ---- */
.pr-toggle{
  max-width:96em;margin:0 auto 2.4em;display:flex;justify-content:flex-start;
}
.pr-switch{
  position:relative;display:inline-flex;padding:.28em;border-radius:100px;
  background:var(--pr-card);border:1px solid var(--pr-line);
}
.pr-switch button{
  position:relative;z-index:2;background:none;border:0;cursor:pointer;
  padding:.6em 1.15em;border-radius:100px;
  font-family:var(--pr-mono);font-size:.64em;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pr-dim);transition:color .35s ease;
}
.pr-switch button.on{color:#0c1206}
.pr-knob{
  position:absolute;top:.28em;bottom:.28em;left:.28em;border-radius:100px;
  background:var(--pr-accent);
  box-shadow:0 0 1.4em rgba(126,224,74,.4);
  transition:transform .45s cubic-bezier(.34,1.35,.5,1),width .45s cubic-bezier(.34,1.35,.5,1);
}

/* ---- cards ---- */
.pr-tiers{
  max-width:96em;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em;align-items:stretch;
}
.pr-tier{
  position:relative;border-radius:.45em;padding:2.2em 2em;
  background:var(--pr-card);border:1px solid var(--pr-line);
  display:flex;flex-direction:column;isolation:isolate;
  opacity:0;transform:translateY(2em);
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.25,1),
             border-color .4s ease,box-shadow .4s ease;
}
.pr.in .pr-tier{opacity:1;transform:translateY(0)}
.pr.in .pr-tier:nth-child(2){transition-delay:.1s}
.pr.in .pr-tier:nth-child(3){transition-delay:.2s}
.pr-tier:hover{border-color:rgba(246,246,242,.2);box-shadow:0 1.4em 3em rgba(0,0,0,.4)}

/* cursor spotlight */
.pr-tier::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(18em 18em at var(--mx,50%) var(--my,0%),
    rgba(126,224,74,.10),transparent 62%);
  opacity:0;transition:opacity .4s ease;
}
.pr-tier:hover::after{opacity:1}
.pr-tier > *{position:relative;z-index:1}

/* featured card: a light travels its border */
.pr-tier.featured{background:var(--pr-card-2)}
.pr-tier.featured::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:0;
  background:
    conic-gradient(from var(--pr-a),
      rgba(126,224,74,.22) 0deg,
      rgba(126,224,74,.22) 250deg,
      #b6f584 300deg,
      rgba(126,224,74,.22) 350deg,
      rgba(126,224,74,.22) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:prSpin 4.5s linear infinite;
}
@keyframes prSpin{to{--pr-a:360deg}}
/* if @property isn't supported the gradient just sits still — still a green rim */

.pr-top{display:flex;align-items:center;justify-content:space-between;gap:.8em;margin-bottom:.6em}
.pr-name{font-weight:800;font-size:1.5em;letter-spacing:-.025em;text-transform:uppercase;line-height:1}
.pr-tier.featured .pr-name{color:var(--pr-accent)}
.pr-badge{
  font-family:var(--pr-mono);font-size:.52em;letter-spacing:.14em;text-transform:uppercase;
  background:var(--pr-accent);color:#0c1206;padding:.4em .7em;border-radius:100px;
  position:relative;overflow:hidden;
}
.pr-badge::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  animation:prShine 3.4s ease-in-out infinite;
}
@keyframes prShine{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}

.pr-line{font-size:.88em;color:#a9aba1;line-height:1.5;margin-bottom:1.6em;min-height:3em;max-width:26ch}

/* price block */
.pr-prices{display:grid;grid-template-columns:1fr 1fr;gap:1em;padding:1.2em 0;
  border-top:1px solid var(--pr-line);border-bottom:1px solid var(--pr-line)}
.pr-prices.single{grid-template-columns:1fr}
.pr-cell:first-child{border-right:1px solid var(--pr-line);padding-right:1em}
.pr-prices.single .pr-cell:first-child{border-right:0;padding-right:0}
.pr-num{
  font-weight:800;font-size:1.6em;letter-spacing:-.035em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.pr-num sub{font-size:.42em;font-weight:600;letter-spacing:0;vertical-align:baseline;color:var(--pr-dim)}
.pr-cap{
  display:block;margin-top:.4em;font-family:var(--pr-mono);font-size:.56em;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pr-faint);
}

/* features */
.pr-feats{display:grid;gap:.75em;margin:1.5em 0 2em}
.pr-feat{display:flex;gap:.7em;align-items:flex-start;font-size:.86em;color:#a9aba1;
  opacity:0;transform:translateX(-.5em);transition:opacity .45s ease,transform .5s ease}
.pr.in .pr-feat{opacity:1;transform:translateX(0)}
.pr-check{width:1.05em;height:1.05em;flex:none;margin-top:.15em;color:var(--pr-accent)}
.pr-check path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s cubic-bezier(.3,.8,.3,1)}
.pr.in .pr-feat .pr-check path{stroke-dashoffset:0}

/* cta */
.pr-cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:.95em 1.4em;border-radius:.25em;text-decoration:none;
  font-size:.78em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(246,246,242,.18);color:var(--pr-ink);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.pr-cta:hover{border-color:var(--pr-accent);color:var(--pr-accent)}
.pr-cta.solid{background:var(--pr-accent);color:#0c1206;border-color:var(--pr-accent)}
.pr-cta.solid:hover{background:#94ec66;color:#0c1206}
.pr-cta svg{width:.85em;height:.85em;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pr-cta:hover svg{transform:translateX(.25em)}

.pr-foot{
  max-width:96em;margin:2.2em auto 0;
  font-family:var(--pr-mono);font-size:.6em;letter-spacing:.1em;
  color:var(--pr-faint);line-height:1.9;
}

@media (max-width:900px){
  .pr{padding:3rem 1.4rem}
  .pr-head{grid-template-columns:1fr;gap:1.2em;align-items:start}
  .pr-tiers{grid-template-columns:1fr;gap:1.1em}
  .pr-line{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .pr-tier,.pr-feat,.pr-check path,.pr-knob{transition:none}
  .pr-tier.featured::before,.pr-badge::after{animation:none}
}