/* ============================================================================
   CANDY WRAPPER — PRICING PAGE (layers on top of styles.css)
   Reuses ALL brand tokens + atoms from styles.css (palette, gradients, .btn,
   .pill, .rise, nav, footer). This file only adds pricing-specific furniture:
   the billing toggle, the tier-card grid, the trial banner, the FAQ.
   Self-contained, no build, no deps.
   ========================================================================== */

/* ---- page hero ---- */
#price-hero{padding:64px 0 26px;position:relative;text-align:center}
#price-hero .hero-head{max-width:820px;margin:0 auto}
#price-hero h1{font-size:clamp(34px,5.6vw,60px);margin:20px 0 0;line-height:1}
#price-hero .lead{margin:18px auto 0}

/* ---- the Monthly / Annual billing toggle ---- */
.billing{display:flex;flex-direction:column;align-items:center;gap:12px;margin:30px auto 0}
.bswitch{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:5px;box-shadow:var(--sh-sm);position:relative}
.bswitch button{appearance:none;border:none;cursor:pointer;font-family:var(--font-ui);font-weight:700;
  font-size:14px;color:var(--ink-3);background:transparent;border-radius:var(--r-pill);
  padding:10px 22px;transition:color var(--med);position:relative;z-index:1;white-space:nowrap}
.bswitch button.on{color:#fff}
/* the sliding pill behind the active option */
.bswitch .glider{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--r-pill);
  background:var(--grad-candy);box-shadow:var(--sh-pink);transition:transform var(--med) var(--ease)}
.bswitch[data-bill="annual"] .glider{transform:translateX(100%)}
/* "buy in bulk" tag — only visible on annual */
.bulk-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.04em;font-weight:700;color:#0e8f78;background:var(--mint-soft);border:1px solid #bfeede;
  border-radius:var(--r-pill);padding:7px 15px;opacity:0;transform:translateY(-4px);
  transition:opacity var(--med),transform var(--med);pointer-events:none;height:0;margin:0;overflow:hidden}
.billing[data-bill="annual"] .bulk-tag{opacity:1;transform:none;height:auto;margin-top:2px;pointer-events:auto;padding:7px 15px}

/* ---- the tier grid ---- */
.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px;align-items:stretch;text-align:left}
@media(max-width:1080px){.tiers{grid-template-columns:repeat(2,1fr);gap:16px;max-width:760px;margin-left:auto;margin-right:auto}}
@media(max-width:560px){.tiers{grid-template-columns:1fr;max-width:420px}}

.tier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px 20px;box-shadow:var(--sh-sm);transition:var(--med);overflow:hidden}
.tier:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.tier > *{position:relative;z-index:1}
/* faint top wash per accent (mirrors .tcard) */
.tier::before{content:"";position:absolute;left:0;right:0;top:0;height:80px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,var(--tc-soft),transparent);opacity:.7}

.tier .rank{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--tc);
  background:var(--tc-soft);border-radius:var(--r-pill);padding:5px 11px;align-self:flex-start}
.tier h3{font-size:22px;margin:14px 0 2px}
.tier .dorian{font-size:13px;color:var(--ink-3);font-weight:600;min-height:34px}
.tier .dorian b{color:var(--tc);font-weight:800}

/* price block — both monthly + annual present, JS toggles the .show class */
.tier .price{margin:16px 0 4px;display:flex;align-items:flex-end;gap:3px;min-height:46px}
.tier .price .amt{font-size:40px;font-weight:800;color:var(--ink-1);letter-spacing:-.03em;line-height:.9}
.tier .price .per{font-size:13px;color:var(--ink-3);font-weight:600;padding-bottom:5px}
.tier .price[data-free] .amt{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
/* fixed-height price block so every tier's CTA lands on the SAME baseline,
   in both Monthly and Annual states (price 46 + pnote 16 + gaps) */
.tier .pwrap{position:relative;min-height:70px}
.tier .pmonthly,.tier .pannual{display:none}
.tiers[data-bill="monthly"] .pmonthly{display:flex}
.tiers[data-bill="annual"]  .pannual{display:flex}
/* "billed annually / was $X" subline */
.tier .pnote{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);letter-spacing:.02em;
  min-height:16px;margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tier .pnote .was{text-decoration:line-through;text-decoration-color:var(--pink);color:var(--ink-faint);margin:0}
.tier .pnote .save{color:#0e8f78;font-weight:700;white-space:nowrap}

.tier .cta{margin-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-weight:700;font-size:14px;padding:12px 16px;border-radius:var(--r-pill);cursor:pointer;
  border:1.5px solid var(--line-2);background:#fff;color:var(--ink-1);transition:var(--med);text-align:center}
.tier .cta:hover{transform:translateY(-2px);border-color:var(--tc);box-shadow:var(--sh-md)}
.tier .cta.primary{border:none;color:#fff;background:var(--grad-candy);box-shadow:var(--sh-pink)}
.tier .cta.primary:hover{box-shadow:0 22px 50px -16px rgba(255,77,157,.6)}

.tier .feats{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px dashed var(--line-2);
  display:flex;flex-direction:column;gap:11px}
.tier .feats li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-2);line-height:1.5;
  overflow-wrap:break-word;word-break:normal;hyphens:none}
.tier .feats li .ck{flex:none;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:#fff;background:var(--tc-grad);margin-top:2px}
.tier .feats li.muted{color:var(--ink-faint)}
.tier .feats li.muted .ck{background:var(--line-2);color:#fff}
.tier .feats li b{color:var(--ink-1);font-weight:700}
.tier .feats .head{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;line-height:1.4;padding-top:4px;margin:2px 0 0;white-space:normal}
.tier .feats .head:first-child{padding-top:0}

/* accent wiring per tier (mirrors .tcard[data-accent]) */
.tier[data-accent="mint"]  {--tc:#0e8f78;      --tc-soft:var(--mint-soft);  --tc-grad:var(--grad-mint)}
.tier[data-accent="blue"]  {--tc:var(--blue);  --tc-soft:var(--blue-soft);  --tc-grad:linear-gradient(120deg,#4c8dff,#34e5c4)}
.tier[data-accent="grape"] {--tc:var(--grape); --tc-soft:var(--grape-soft); --tc-grad:var(--grad-candy)}
.tier[data-accent="pink"]  {--tc:var(--pink);  --tc-soft:var(--pink-soft);  --tc-grad:var(--grad-warm)}
.tier[data-accent="orange"]{--tc:var(--orange);--tc-soft:var(--orange-soft);--tc-grad:linear-gradient(120deg,#ff9f43,#ffcf33)}

/* the hero / "Most Popular" tier — V-Suite Tier 1 */
.tier.featured{border:2px solid var(--grape);box-shadow:var(--sh-md);transform:translateY(-6px)}
.tier.featured:hover{transform:translateY(-10px)}
@media(max-width:1080px){.tier.featured,.tier.featured:hover{transform:none}}
.tier .ribbon{position:absolute;top:14px;right:-36px;transform:rotate(45deg);width:150px;text-align:center;z-index:2;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;
  color:#fff;padding:5px 0;background:var(--grad-candy);box-shadow:var(--sh-sm)}

/* ---- the 3-day free-trial banner ---- */
#trial{position:relative}
.trial-card{position:relative;border-radius:var(--r-xl);padding:46px 38px;text-align:center;overflow:hidden;margin-top:8px;
  background:linear-gradient(135deg,#fff,var(--grape-soft) 52%,var(--blue-soft));border:2px solid var(--grape);box-shadow:var(--sh-lg)}
.trial-card .blob{position:absolute;border-radius:50%;filter:blur(48px);opacity:.5;pointer-events:none}
.trial-card .blob.a{width:240px;height:240px;left:-60px;top:-60px;background:var(--pink);animation:drift 13s ease-in-out infinite}
.trial-card .blob.b{width:260px;height:260px;right:-70px;bottom:-70px;background:var(--blue);animation:drift 15s ease-in-out infinite reverse}
.trial-card > *{position:relative;z-index:1}
.trial-card .lockchip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--grad-candy);border-radius:var(--r-pill);padding:7px 14px;font-weight:700;box-shadow:var(--sh-pink)}
.trial-card h2{font-size:clamp(26px,4.4vw,42px);margin:16px 0 0;line-height:1.04}
.trial-card .big-3{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.trial-card .cheeky{max-width:54ch;margin:16px auto 0;font-size:15.5px;color:var(--ink-2);line-height:1.6}
.trial-card .cheeky i{color:var(--ink-1);font-style:italic}
.trial-card .cta-row{margin-top:26px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.trial-card .fine{margin-top:16px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-3)}

/* ---- compare strip / what unlocks as you climb ---- */
.climb{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px;text-align:left}
@media(max-width:860px){.climb{grid-template-columns:1fr}}
.climb .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm);transition:var(--med);overflow:hidden}
.climb .step:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.climb .step .glow{position:absolute;inset:auto -30px -40px auto;width:140px;height:140px;border-radius:50%;filter:blur(40px);opacity:.45}
.climb .step .em{font-size:30px;margin-bottom:8px}
.climb .step .lab{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.climb .step h3{font-size:19px;margin:4px 0 8px}
.climb .step p{font-size:14px;color:var(--ink-2);line-height:1.55}
.climb .step.a .glow{background:var(--orange)} .climb .step.a .lab b{color:var(--orange)}
.climb .step.b .glow{background:var(--grape)} .climb .step.b .lab b{color:var(--grape)}
.climb .step.c .glow{background:var(--blue)}   .climb .step.c .lab b{color:var(--blue)}

/* ---- add-ons row ---- */
.addons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.addons .ao{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 16px;box-shadow:var(--sh-sm);font-size:13px;color:var(--ink-2);font-weight:600;transition:var(--med)}
.addons .ao:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.addons .ao b{color:var(--ink-1);font-weight:800}
.addons .ao .px{font-family:var(--font-mono);font-size:12px;color:var(--grape);font-weight:700;
  background:var(--grape-soft);border-radius:var(--r-pill);padding:3px 9px}
.addons .ao .inc{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:#0e8f78;
  background:var(--mint-soft);border-radius:var(--r-pill);padding:3px 9px;font-weight:700}

/* ---- pricing FAQ ---- */
.pfaq{max-width:760px;margin:40px auto 0;text-align:left;display:flex;flex-direction:column;gap:12px}
.pfaq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:0 20px;transition:var(--med)}
.pfaq details[open]{border-color:var(--line-2);box-shadow:var(--sh-md)}
.pfaq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;font-size:15.5px;color:var(--ink-1);
  display:flex;align-items:center;gap:12px}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary::before{content:"+";flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:16px;font-weight:800;color:#fff;background:var(--grad-candy);transition:transform var(--med)}
.pfaq details[open] summary::before{content:"–";transform:rotate(180deg)}
.pfaq p{font-size:14.5px;color:var(--ink-2);line-height:1.6;padding:0 0 18px 36px;margin:0}

/* nav: make the active page link read as current */
.nav .links a.here{color:var(--ink-1);background:#fff;box-shadow:var(--sh-sm)}