/* /pricing — hand-written on purpose: the marketing Tailwind build is
   precompiled, so utility classes it never saw would do nothing here. */
.pr {
    --pr-ink:#0b1220; --pr-ink2:#334155; --pr-muted:#5b6677; --pr-line:#e6e9ef; --pr-soft:#f5f7fa; --pr-card:#ffffff;
    --pr-brand:#08a05a; --pr-brand2:#0fad85; --pr-mint:#34d399; --pr-tint:#e9f7ef;
    --pr-glass:rgba(255,255,255,.72);
    --pr-shadow:0 1px 2px rgba(10,14,26,.05), 0 28px 60px -34px rgba(10,14,26,.38);
    --pr-glow:0 30px 80px -30px rgba(8,160,90,.55);
    color:var(--pr-ink); overflow:hidden;
}
html.dark .pr, [data-theme="dark"] .pr {
    --pr-ink:#eef2f8; --pr-ink2:#c9d2df; --pr-muted:#9aa6b8; --pr-line:rgba(255,255,255,.09); --pr-soft:rgba(255,255,255,.03); --pr-card:#0e1420;
    --pr-brand:#16c47c; --pr-brand2:#22d3a0; --pr-tint:rgba(22,196,124,.12);
    --pr-glass:rgba(14,20,32,.72);
    --pr-shadow:0 1px 2px rgba(0,0,0,.4), 0 28px 60px -34px rgba(0,0,0,.85);
    --pr-glow:0 30px 90px -30px rgba(22,196,124,.45);
}
.pr a { color:var(--pr-brand); text-decoration:none; font-weight:600; }
.pr a:hover { text-decoration:underline; }
.pr h1, .pr h2, .pr h3 { letter-spacing:-.025em; color:var(--pr-ink); margin:0; }
.pr-ico { width:22px; height:22px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.pr-hero { position:relative; padding:88px 20px 56px; text-align:center; isolation:isolate; }
.pr-hero-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.pr-orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.pr-orb-a { width:520px; height:520px; left:50%; top:-260px; transform:translateX(-80%); background:radial-gradient(circle, rgba(8,160,90,.55), transparent 70%); animation:pr-float 14s ease-in-out infinite; }
.pr-orb-b { width:420px; height:420px; left:50%; top:-160px; transform:translateX(10%); background:radial-gradient(circle, rgba(52,211,153,.45), transparent 70%); animation:pr-float 18s ease-in-out infinite reverse; }
.pr-grid { position:absolute; inset:0; background-image:linear-gradient(var(--pr-line) 1px, transparent 1px), linear-gradient(90deg, var(--pr-line) 1px, transparent 1px);
    background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 20%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 50% 20%, #000 30%, transparent 75%); }
.pr-hero-in { max-width:820px; margin:0 auto; }
.pr-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.02em;
    color:var(--pr-brand); background:var(--pr-glass); border:1px solid rgba(8,160,90,.3); backdrop-filter:blur(8px); box-shadow:0 8px 24px -16px rgba(8,160,90,.6); }
.pr-dot { width:8px; height:8px; border-radius:50%; background:var(--pr-brand); box-shadow:0 0 0 0 rgba(8,160,90,.6); animation:pr-pulse 2s infinite; }
.pr-h1 { margin-top:22px !important; font-size:clamp(38px, 6vw, 72px); line-height:1.02; font-weight:800; }
.pr-lead { margin:22px auto 0; max-width:640px; font-size:18.5px; line-height:1.65; color:var(--pr-muted); }

/* ── Sections ─────────────────────────────────────────────────────── */
.pr-wrap { max-width:1120px; margin:0 auto; padding:44px 20px; position:relative; }
.pr-head { max-width:700px; margin:0 auto 34px; text-align:center; }
.pr-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 8px; border-radius:999px; font:700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing:.08em; color:var(--pr-brand); background:var(--pr-tint); margin-bottom:14px; }
.pr-eyebrow-ico { width:16px; height:16px; }
.pr-head h2, .pr-free h2, .pr-cta h2 { font-size:clamp(26px, 3.4vw, 38px); font-weight:800; }
.pr-head p { margin:14px 0 0; color:var(--pr-muted); line-height:1.65; font-size:16px; }

/* Volume track above the tier cards */
.pr-track { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:0 0 18px; }
.pr-track-seg { position:relative; height:6px; border-radius:999px; background:linear-gradient(90deg, rgba(8,160,90,.25), rgba(8,160,90,.55)); }
.pr-track-1 { background:linear-gradient(90deg, rgba(8,160,90,.55), rgba(15,173,133,.8)); }
.pr-track-2 { background:linear-gradient(90deg, rgba(15,173,133,.8), var(--pr-mint)); }
.pr-track-seg::before { content:""; position:absolute; inset-inline-start:-2px; top:50%; width:14px; height:14px; border-radius:50%; transform:translateY(-50%);
    background:var(--pr-card); border:3px solid var(--pr-brand); box-shadow:0 0 0 4px var(--pr-tint); }
.pr-track-seg b { position:absolute; inset-inline-start:0; top:-26px; font:700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--pr-muted); white-space:nowrap; }

/* ── Tier cards ───────────────────────────────────────────────────── */
.pr-tiers { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; align-items:stretch; }
.pr-tier { position:relative; display:flex; flex-direction:column; padding:28px 26px 26px; border-radius:22px; background:var(--pr-card);
    border:1px solid var(--pr-line); box-shadow:var(--pr-shadow); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pr-tier:hover { transform:translateY(-6px); border-color:rgba(8,160,90,.45); box-shadow:var(--pr-glow); }
.pr-tier-top { display:flex; align-items:center; gap:12px; }
.pr-tier-ico, .pr-addon-ico, .pr-free-ico { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:13px; color:var(--pr-brand);
    background:var(--pr-tint); border:1px solid rgba(8,160,90,.22); flex:0 0 auto; }
.pr-tier h3 { font-size:17px; font-weight:700; }
.pr-rate { margin-top:22px; font-size:clamp(52px, 6vw, 68px); line-height:1; font-weight:800; letter-spacing:-.04em;
    background:linear-gradient(120deg, var(--pr-brand) 0%, var(--pr-brand2) 55%, var(--pr-mint) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pr-fixed { margin:12px 0 0; font-size:14px; color:var(--pr-ink2); font-weight:600; }
.pr-bar { margin:22px 0 0; height:6px; border-radius:999px; background:var(--pr-soft); border:1px solid var(--pr-line); overflow:hidden; }
.pr-bar span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--pr-brand), var(--pr-mint)); }
.pr-vol { margin:12px 0 0; font-size:14px; color:var(--pr-muted); font-weight:500; }

/* Featured (middle) card: dark, glowing, gradient border */
.pr-tier.is-featured { color:#eef2f8; border:1px solid transparent; transform:translateY(-10px);
    background:linear-gradient(160deg, #0d1a2b, #0a1320 60%, #082a1f) padding-box, linear-gradient(140deg, var(--pr-mint), rgba(8,160,90,.2) 45%, var(--pr-brand2)) border-box;
    box-shadow:0 40px 90px -36px rgba(8,160,90,.75), 0 0 0 1px rgba(52,211,153,.08); }
.pr-tier.is-featured:hover { transform:translateY(-16px); }
.pr-tier.is-featured::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:radial-gradient(70% 50% at 50% 0%, rgba(52,211,153,.18), transparent 70%); }
.pr-tier.is-featured h3 { color:#fff; }
.pr-tier.is-featured .pr-fixed { color:#cfe9dc; }
.pr-tier.is-featured .pr-vol { color:#9fb3c8; }
.pr-tier.is-featured .pr-tier-ico { color:#34d399; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.3); }
.pr-tier.is-featured .pr-bar { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); }
.pr-tier.is-featured .pr-rate { background:linear-gradient(120deg, #6ee7b7, #34d399 50%, #a7f3d0); -webkit-background-clip:text; background-clip:text; }
.pr-ribbon { position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:6px 14px; border-radius:999px; font-size:11.5px; font-weight:800;
    letter-spacing:.05em; text-transform:uppercase; color:#04261a; background:linear-gradient(90deg, #6ee7b7, #34d399); box-shadow:0 10px 24px -10px rgba(52,211,153,.8); white-space:nowrap; z-index:1; }

.pr-note { display:flex; align-items:center; justify-content:center; gap:10px; margin:30px auto 0; padding:12px 18px; max-width:max-content;
    border-radius:999px; font-size:14px; color:var(--pr-muted); background:var(--pr-glass); border:1px dashed var(--pr-line); }
.pr-note-ico { width:18px; height:18px; color:var(--pr-brand); flex:0 0 auto; }

/* ── Add-ons ──────────────────────────────────────────────────────── */
.pr-addons { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.pr-addon { position:relative; display:flex; flex-direction:column; padding:24px; border-radius:20px; background:var(--pr-card); border:1px solid var(--pr-line);
    box-shadow:var(--pr-shadow); overflow:hidden; transition:transform .25s ease, border-color .25s ease; }
.pr-addon::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, var(--pr-brand), var(--pr-mint)); opacity:0; transition:opacity .25s ease; }
.pr-addon:hover { transform:translateY(-4px); border-color:rgba(8,160,90,.35); }
.pr-addon:hover::before { opacity:1; }
.pr-addon-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pr-addon-pill { font-size:22px; font-weight:800; letter-spacing:-.02em; padding:6px 14px; border-radius:12px; color:var(--pr-brand);
    background:var(--pr-tint); border:1px solid rgba(8,160,90,.22); }
.pr-addon h3 { font-size:17px; font-weight:700; }
.pr-addon p { margin:8px 0 0; font-size:14.5px; line-height:1.62; color:var(--pr-muted); flex:1; }
.pr-addon-unit { margin-top:16px; font:600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--pr-muted); }

/* ── Always free ──────────────────────────────────────────────────── */
.pr-free { position:relative; padding:34px; border-radius:24px; background:linear-gradient(180deg, var(--pr-card), var(--pr-soft)); border:1px solid var(--pr-line); box-shadow:var(--pr-shadow); }
.pr-free-head { display:flex; align-items:center; gap:14px; }
.pr-free-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-top:24px; }
.pr-free-item { display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:16px; background:var(--pr-card); border:1px solid var(--pr-line);
    font-size:14.5px; font-weight:600; color:var(--pr-ink2); line-height:1.4; transition:border-color .2s ease, transform .2s ease; }
.pr-free-item:hover { border-color:rgba(8,160,90,.35); transform:translateY(-2px); }
.pr-free-item span { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--pr-brand); background:var(--pr-tint); }
.pr-free-item .pr-ico { width:20px; height:20px; }
.pr-legacy { display:flex; align-items:flex-start; gap:10px; margin:22px 0 0; padding-top:18px; border-top:1px solid var(--pr-line); font-size:13.5px; color:var(--pr-muted); line-height:1.55; }
.pr-legacy-ico { width:18px; height:18px; flex:0 0 auto; color:var(--pr-brand); margin-top:1px; }

/* ── CTA ──────────────────────────────────────────────────────────── */
.pr-cta-wrap { padding-bottom:96px; }
.pr-cta { position:relative; overflow:hidden; isolation:isolate; text-align:center; padding:64px 24px; border-radius:28px;
    background:linear-gradient(135deg, #0a1422 0%, #0b2a20 55%, #08a05a 140%); color:#e8f5ee; box-shadow:0 40px 100px -40px rgba(8,160,90,.7); }
.pr-cta-grid { position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:36px 36px; -webkit-mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%); }
.pr-cta-orb { position:absolute; z-index:-1; width:460px; height:460px; right:-120px; top:-200px; border-radius:50%; background:radial-gradient(circle, rgba(52,211,153,.45), transparent 70%); filter:blur(30px); }
.pr .pr-cta h2 { color:#fff; }
.pr-cta p { margin:12px auto 28px; max-width:520px; color:#a9c4b8; font-size:16.5px; }
.pr .pr-btn { display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:14px; font-weight:800; font-size:15.5px; color:#04261a;
    background:linear-gradient(90deg, #6ee7b7, #34d399); box-shadow:0 14px 34px -12px rgba(52,211,153,.8); transition:transform .2s ease, box-shadow .2s ease; }
.pr .pr-btn svg { width:18px; height:18px; transition:transform .2s ease; }
.pr .pr-btn:hover { text-decoration:none; transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(52,211,153,.9); }
.pr .pr-btn:hover svg { transform:translateX(3px); }

/* ── Motion ───────────────────────────────────────────────────────── */
.pr-rise { animation:pr-rise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d, 0ms); }
.pr-tier.is-featured.pr-rise { animation-name:pr-rise-feat; }
@keyframes pr-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes pr-rise-feat { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(-10px); } }
@keyframes pr-float { 0%, 100% { margin-top:0; } 50% { margin-top:30px; } }
@keyframes pr-pulse { 0% { box-shadow:0 0 0 0 rgba(8,160,90,.55); } 70% { box-shadow:0 0 0 9px rgba(8,160,90,0); } 100% { box-shadow:0 0 0 0 rgba(8,160,90,0); } }
@media (prefers-reduced-motion: reduce) {
    .pr-rise, .pr-orb, .pr-dot { animation:none !important; }
    .pr-tier, .pr-addon, .pr-free-item, .pr .pr-btn { transition:none; }
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pr-tiers, .pr-addons { grid-template-columns:1fr; gap:22px; }
    .pr-track { display:none; }
    .pr-tier.is-featured, .pr-tier.is-featured:hover { transform:none; }
    .pr-tier.is-featured.pr-rise { animation-name:pr-rise; }
    .pr-free-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .pr-hero { padding-top:72px; }
}
@media (max-width: 520px) {
    .pr-free { padding:24px 18px; }
    .pr-free-grid { grid-template-columns:1fr; }
    .pr-note { border-radius:16px; text-align:left; }
    .pr-cta { padding:48px 18px; }
}