/* ══ the public price grid ═════════════════════════════════════════
   Loaded by the four product pages. Its own file rather than a block
   inside each page, because site.css is not loaded by index.html and a
   rule that lives in only some of the pages that need it has already
   caused three bugs here. Shared behaviour, shared file, loaded by
   everything that uses it.

   Component names are .pr-* so nothing collides with the .bk-* booker
   rules still sitting in site.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── product-page hero ───────────────────────────────────────────
   What replaced the booker. No price on it: the product pages explain,
   /pricing quotes, so a figure exists in exactly one public place.
   Two actions — into the app, or to the numbers.
   ──────────────────────────────────────────────────────────────── */
.ph{max-width:760px;margin:0 auto;padding:8px 0 6px;text-align:center}
.ph h1{margin:12px 0 14px;font-size:clamp(32px,5.4vw,52px);line-height:1.06;letter-spacing:-.032em}
.ph-sub{margin:0 auto;max-width:640px;color:var(--muted-2);font-size:16.5px;line-height:1.68}
.ph .bk-eyebrow{justify-content:center}
.ph-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:26px 0 0}
.ph-nb{margin:14px 0 0;color:var(--muted);font-size:13px}
/* the storefront's .pill has no outlined variant — the secondary action here
   must not compete with the one that goes to the app */
.pill.gho{background:none;border:1px solid rgba(255,255,255,.22);color:var(--text)}
.pill.gho:hover{border-color:var(--green,#4ad6ff);color:var(--green,#4ad6ff);background:rgba(74,214,255,.06)}

/* the follower pages keep their two-column hero; centred text fights it */
.pdp-left .ph-cta{justify-content:flex-start}

/* ── /pricing page ──────────────────────────────────────────────── */
.pc-hero{padding-top:14px}
.pc-sec{max-width:1080px;margin:0 auto;padding:54px 0 0}
.pc-head{max-width:720px;margin:0 0 22px}
/* site.css styles .sec-q only inside .sec — these headings live in .pc-sec,
   so the eyebrow arrived as plain body text. Same treatment, stated here. */
.pc-head .sec-q{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.pc-head h2{margin:8px 0 10px;font-size:clamp(25px,3.4vw,34px);letter-spacing:-.028em;line-height:1.14}
.pc-lede{margin:0;color:var(--muted-2);font-size:15px;line-height:1.66}

/* platform switch — two options, so a segmented control rather than tabs */
.pr-plats{display:inline-flex;gap:4px;padding:4px;margin:0 0 16px;
  border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.03)}
.pr-plat{appearance:none;border:0;background:none;color:var(--muted-2);border-radius:999px;
  padding:9px 22px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;
  transition:background .16s,color .16s}
.pr-plat:hover{color:#fff}
.pr-plat.on{background:var(--green,#4ad6ff);color:#08080a}

/* ── monthly tier cards ─────────────────────────────────────────
   A tier is a claim about who it is for, so the card leads with the
   name and the sentence, and the tick list answers "what do I get"
   before the button asks for a decision.
   ──────────────────────────────────────────────────────────────── */
.pk2-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pk2{display:flex;flex-direction:column;padding:24px 22px;border-radius:20px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.028);
  transition:border-color .16s,background .16s}
.pk2:hover{border-color:rgba(74,214,255,.36);background:rgba(74,214,255,.04)}
.pk2-name{color:var(--green,#4ad6ff);font-size:14px;font-weight:700;letter-spacing:.01em}
.pk2-price{display:flex;align-items:baseline;gap:6px;margin:10px 0 0}
.pk2-price b{font-size:34px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pk2-price span{color:var(--muted);font-size:13px}
.pk2-blurb{margin:10px 0 0;color:var(--muted-2);font-size:13.5px;line-height:1.6}
.pk2-list{display:grid;gap:9px;margin:18px 0 22px}
.pk2-tick{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;color:var(--muted-2)}
.pk2-tick svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--green,#4ad6ff)}
.pk2-go{margin-top:auto;justify-content:center;text-align:center}

@media(max-width:560px){
  .ph-cta .pill{width:100%;justify-content:center}
  .pr-plats{display:flex;width:100%}
  .pr-plat{flex:1}
}

.pr{max-width:1080px;margin:0 auto;padding:0 0 8px}
.pr-head{max-width:720px;margin:0 0 26px}
.pr-head h1{margin:10px 0 12px;font-size:clamp(30px,4.6vw,46px);line-height:1.08;letter-spacing:-.03em}
.pr-sub{color:var(--muted-2);font-size:16px;line-height:1.65;margin:0}

/* ── duration tabs ──────────────────────────────────────────────── */
.pr-durs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pr-dur{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
  color:var(--muted-2);border-radius:999px;padding:9px 16px;font:inherit;font-size:14px;
  font-weight:600;cursor:pointer;transition:border-color .16s,background .16s,color .16s}
.pr-dur:hover{border-color:rgba(255,255,255,.24);color:#fff}
.pr-dur.on{background:var(--green,#4ad6ff);border-color:transparent;color:#08080a}

/* ── the cards ──────────────────────────────────────────────────────
   Six packages, so the track has to divide into six: at 300px minimum
   the 1080 wrapper fits three across and the grid runs 3+3. Letting it
   fit four left two cards alone on the second row beside two empty
   cells, which reads as a page that failed to load the rest. Below
   ~940px it steps to two (3+3 -> 2+2+2), then one. */
.pr-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.pr-card{display:flex;flex-direction:column;gap:14px;padding:20px;text-decoration:none;
  border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.028);
  color:inherit;transition:transform .16s,border-color .16s,background .16s}
.pr-card:hover{transform:translateY(-3px);border-color:rgba(74,214,255,.42);background:rgba(74,214,255,.05)}
.pr-card:focus-visible{outline:2px solid var(--green,#4ad6ff);outline-offset:3px}

.pr-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px}
.pr-n b{font-size:26px;letter-spacing:-.02em;line-height:1}
.pr-n > span{color:var(--muted-2);font-size:13.5px}
.pr-badge{border:1px solid rgba(74,214,255,.4);color:var(--green,#4ad6ff);border-radius:999px;
  padding:2px 8px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

.pr-p{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.pr-p b{font-size:23px;letter-spacing:-.02em}
.pr-p span{color:var(--muted-2);font-size:12.5px}

.pr-go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:650;
  color:var(--green,#4ad6ff)}
.pr-go::after{content:"→";transition:transform .16s}
.pr-card:hover .pr-go::after{transform:translateX(3px)}

/* ── the note under the grid ────────────────────────────────────── */
.pr-foot{margin:18px 0 0;color:var(--muted-2);font-size:13.5px;line-height:1.65}
.pr-foot a{color:var(--green,#4ad6ff)}

@media (prefers-reduced-motion:reduce){
  .pr-card,.pr-go::after{transition:none}
  .pr-card:hover{transform:none}
}

/* ══ the follower panel ═══════════════════════════════════════════
   Those pages keep their existing order-widget layout — only what it
   does changed. The package rows and the main action became anchors,
   so the few button-only assumptions in site.css need answering:
   links carry an underline and shrink-wrap, buttons do neither.
   ══════════════════════════════════════════════════════════════════ */
a.fp-pack{text-decoration:none}
a.buy-btn{display:block;text-align:center;text-decoration:none;box-sizing:border-box}
.fp-hand{margin:10px 0 0;color:var(--muted-2);font-size:13px;line-height:1.6;text-align:center}