body.inner-page { background: var(--Royal-Blue-Blue-900,#051A3C); color: var(--Base-White,#fcfcfc); }

/* Container — matches index.html breakpoint ladder (capped at 1320px) */
.container { width: 100%; max-width: 100%; margin-right: auto; margin-left: auto; padding-right: 1rem; padding-left: 1rem; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ── HERO ── */
.pr-hero { position:relative; overflow:hidden; padding:104px 0 112px; }
.pr-hero .hero-grid { -webkit-mask-image:radial-gradient(ellipse 120% 100% at 50% 0%,#000 0%,rgba(0,0,0,.6) 55%,transparent 85%); mask-image:radial-gradient(ellipse 120% 100% at 50% 0%,#000 0%,rgba(0,0,0,.6) 55%,transparent 85%); }
.pr-hero .hero-orbs { overflow:visible; }
.pr-hero .orb-violet { left:-2%; top:10%; bottom:auto; width:500px; height:500px; }
.pr-hero .orb-cyan   { left:50%; top:20%; bottom:auto; transform:translateX(-50%); width:600px; height:500px; }
.pr-hero .orb-blue   { right:-2%; top:10%; bottom:auto; width:500px; height:500px; }
.pr-hero__glow { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:860px; height:400px; background:radial-gradient(50% 50% at 50% 50%,rgba(28,169,201,.30) 0%,rgba(40,99,195,.14) 55%,transparent 100%); filter:blur(56px); pointer-events:none; z-index:2; }
.pr-hero__glow--2 { top:auto; bottom:-160px; width:640px; height:320px; background:radial-gradient(50% 50% at 50% 50%,rgba(119,71,182,.24) 0%,rgba(232,121,249,.10) 55%,transparent 100%); filter:blur(64px); }
/* z-index 12, not 4: a late rule in style.css lifts .hero-orbs to z-index 10,
   so at 4 the three mix-blend-mode:screen orbs painted *over* the copy and
   CTAs and lightened them — the "Watch a Demo" navy fill measured
   rgb(6,31,66) against its rgb(5,26,60) design value, which is what read as
   a faded hero. Sits above .hero-orbs and .hero-grid (both 10). */
.pr-hero__layout { position:relative; z-index:12; display:grid; grid-template-columns:1fr 1.1fr; gap:16px; align-items:center; }
.pr-hero__inner { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.pr-hero__eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border:1px solid rgba(255,255,255,.14); border-radius:50px; background:rgba(255,255,255,0.06); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:11px; letter-spacing:1.6px; text-transform:uppercase; font-family:'Inter',sans-serif; font-weight:500; color:#67d3ff; margin:0; }
.pr-hero__eyebrow .het-dot { width:6px; height:6px; border-radius:50%; background:var(--Turquoise-SkyBlue-500,#1ca9c9); box-shadow:0 0 8px rgba(28,169,201,.8); flex-shrink:0; animation:heroDotPulse 2.5s ease-in-out infinite; }
@keyframes heroDotPulse { 0%,100% { box-shadow:0 0 8px rgba(28,169,201,.8); } 50% { box-shadow:0 0 22px rgba(28,169,201,1),0 0 44px rgba(28,169,201,.5); } }
.pr-hero__title { font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:56px; line-height:64px; letter-spacing:-0.8px; color:var(--Base-White,#fcfcfc); margin:0; }
.pr-gradient { font-style:normal; background:linear-gradient(110deg,#4AE7FF 0%,#4075C9 25%,#E879F9 55%,#4AE7FF 80%,#4075C9 100%); background-size:260% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:heroShimmer 5s linear infinite; }
@keyframes heroShimmer { 0% { background-position:0% center; } 100% { background-position:260% center; } }
.pr-hero__sub { font-family:'Inter',sans-serif; font-size:17px; line-height:27px; color:rgba(252,252,252,0.72); max-width:540px; margin:0; }
.pr-hero__ctas { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-start; margin-top:4px; }
/* "Watch a Demo" — mirrors the shared header's Request-a-Demo button
   (gradient cyan→violet border, solid navy fill, bold white label).
   Quadruple-class selector outranks style.css's .btn-primary--ghost rule. */
.pr-hero__ctas .btn-primary.btn-primary.btn-primary--ghost {
    background:
        linear-gradient(var(--Royal-Blue-Blue-900,#051A3C), var(--Royal-Blue-Blue-900,#051A3C)) padding-box,
        var(--Explore-Button, linear-gradient(270deg,#7747b6 0%,#4075c9 50.7%,#1ca9c9 100%)) border-box;
    border: 2px solid transparent;
    color: var(--Base-White,#fcfcfc);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pr-hero__ctas .btn-primary.btn-primary.btn-primary--ghost::before { display:none; }
.pr-hero__ctas .btn-primary.btn-primary.btn-primary--ghost:hover {
    background:
        linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) padding-box,
        var(--Explore-Button, linear-gradient(270deg,#7747b6 0%,#4075c9 50.7%,#1ca9c9 100%)) border-box;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px rgba(64,117,201,.55), 0 2px 10px -2px rgba(119,71,182,.4);
}

/* Right — hero visual */
.pr-hero__photos { display:flex; align-items:center; justify-content:center; }
.pr-hero__img { width:100%; height:auto; }

/* ── EYEBROW (light sections) ── */
.pr-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:50px; border:1px solid rgba(14,72,165,.14); background:rgba(14,72,165,.08); font-family:'Inter',sans-serif; font-size:11px; font-weight:500; letter-spacing:1.6px; text-transform:uppercase; color:var(--Royal-Blue-Blue-500,#0e48a5); margin-bottom:24px; }

/* ── PLANS SECTION ── */
.pr-plans {
    background:#fcfcfc;
    padding:96px 0;
    position:relative;
    overflow:hidden;
}
.pr-plans::before {
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(40,99,195,.14) 1px,transparent 1px);
    background-size:24px 24px;
    z-index:0;
    pointer-events:none;
}
.pr-plans__head { text-align:center; margin-bottom:60px; position:relative; z-index:1; }
.pr-plans__title { font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:44px; line-height:54px; letter-spacing:-0.6px; color:var(--Royal-Blue-Blue-900,#051A3C); margin:0 0 14px; }
.pr-plans__sub { font-family:'Inter',sans-serif; font-size:16px; line-height:26px; color:#4a5568; margin:0 auto; max-width:540px; }

/* ── TOGGLE ── */
.pr-toggle-wrap { display:inline-flex; align-items:center; gap:12px; background:#fcfcfc; border:1px solid rgba(226,232,240,.9); border-radius:50px; padding:6px 18px; margin-top:28px; box-shadow:0 2px 14px rgba(0,0,0,.07); }
.pr-toggle-lbl { font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:var(--blueGray-400,#94A3B8); cursor:pointer; transition:color .2s; }
.pr-toggle-lbl.is-active { color:var(--Royal-Blue-Blue-500,#0e48a5); font-weight:600; }
.pr-toggle-switch { position:relative; width:44px; height:24px; cursor:pointer; flex-shrink:0; }
.pr-toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.pr-toggle-track { position:absolute; inset:0; background:var(--blueGray-200,#E2E8F0); border-radius:50px; transition:background .25s; }
.pr-toggle-track::after { content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:transform .25s cubic-bezier(.22,.61,.36,1); }
.pr-toggle-switch input:checked ~ .pr-toggle-track { background:linear-gradient(135deg,#4075c9,#7747b6); }
.pr-toggle-switch input:checked ~ .pr-toggle-track::after { transform:translateX(20px); }
.pr-annual-badge { font-family:'Inter',sans-serif; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#1ca9c9,#4075c9); padding:3px 10px; border-radius:50px; white-space:nowrap; box-shadow:0 2px 8px rgba(28,169,201,.4); }

/* ── CARDS GRID ── */
.pr-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:center; position:relative; z-index:1; }

/* Base card */
.pr-card {
    background:#fcfcfc;
    border:1px solid rgba(215,225,240,.9);
    border-radius:24px;
    padding:36px 30px 42px;
    position:relative;
    transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s;
    box-shadow:var(--Card-Shadow-Soft,0 2px 6px rgba(0,0,0,.08));
}
.pr-card:hover { transform:translateY(-4px); box-shadow:var(--Card-Shadow,0 4px 24px rgba(0,0,0,.12)); }

/* Essentials — featured with gradient border, white inside */
.pr-card--featured {
    border:1.5px solid transparent;
    background:linear-gradient(#fcfcfc,#fcfcfc) padding-box,
               linear-gradient(160deg,#4AE7FF 0%,#4075C9 45%,#7747b6 100%) border-box;
    box-shadow:0 10px 36px -8px rgba(64,117,201,.18);
    padding:50px 30px 54px;
    transform:translateY(-12px);
    border-radius:24px;
    z-index:2;
}
.pr-card--featured::after { display:none; }
.pr-card--featured:hover { transform:translateY(-16px); box-shadow:0 20px 52px -12px rgba(64,117,201,.26); }

/* Custom — clean white, same as base */
.pr-card--dark {
    background:#fcfcfc;
    border-color:#e2e8f0;
    color:inherit;
    box-shadow:var(--Card-Shadow-Soft,0 2px 6px rgba(0,0,0,.08));
}
.pr-card--dark:hover { transform:translateY(-4px); box-shadow:var(--Card-Shadow,0 4px 24px rgba(0,0,0,.12)); }

/* Most Popular badge */
.pr-popular {
    position:absolute; top:-19px; left:50%; transform:translateX(-50%);
    background:linear-gradient(135deg,#4075c9 0%,#7747b6 100%);
    color:#fff;
    font-family:'Inter',sans-serif; font-size:10px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase;
    padding:5px 24px; border-radius:50px; white-space:nowrap;
    box-shadow:0 4px 18px rgba(64,117,201,.5);
}

/* Plan label */
.pr-card__plan { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--Turquoise-SkyBlue-500,#1ca9c9); margin:0 0 20px; }
.pr-card--dark .pr-card__plan { color:var(--Turquoise-SkyBlue-500,#1ca9c9); }

/* Price */
.pr-card__price-row { display:flex; align-items:flex-end; gap:4px; margin-bottom:6px; }
.pr-card__amount { font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(44px,5vw,64px); line-height:1; letter-spacing:-.03em; color:var(--Royal-Blue-Blue-900,#051A3C); }
.pr-card--featured .pr-card__amount { background:linear-gradient(135deg,#0a2456 30%,#2863c3 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pr-card--dark .pr-card__amount { color:var(--Royal-Blue-Blue-900,#051A3C); -webkit-text-fill-color:var(--Royal-Blue-Blue-900,#051A3C); }
/* Word-instead-of-number prices ("Free Forever", "Get a Quote") — these were
   inline styles on the spans, which no media query could reach. */
.pr-card__amount--free { font-size:38px; letter-spacing:-.01em; }
.pr-card__amount--quote { font-size:40px; padding-bottom:4px; }
.pr-card__amount-sup { font-family:'Inter',sans-serif; font-size:20px; font-weight:600; color:var(--Royal-Blue-Blue-900,#051A3C); padding-bottom:10px; }
.pr-card--dark .pr-card__amount-sup { color:var(--Royal-Blue-Blue-900,#051A3C); }
.pr-card__amount-per { font-family:'Inter',sans-serif; font-size:13px; color:var(--blueGray-400,#94A3B8); padding-bottom:10px; display:flex; flex-direction:column; justify-content:flex-end; line-height:1.5; }
.pr-card--dark .pr-card__amount-per { color:var(--blueGray-400,#94A3B8); }

.pr-card__billing { font-family:'Inter',sans-serif; font-size:12.5px; color:var(--blueGray-400,#94A3B8); min-height:20px; margin:0 0 18px; }
.pr-card--dark .pr-card__billing { color:var(--blueGray-400,#94A3B8); }

/* Description */
.pr-card__desc { font-family:'Inter',sans-serif; font-size:14px; line-height:22px; color:#4a5568; margin:0 0 26px; padding-bottom:26px; border-bottom:1px solid rgba(226,232,240,.8); }
.pr-card--dark .pr-card__desc { color:#4a5568; border-color:rgba(226,232,240,.8); }

/* CTA */
.pr-card__cta { margin-bottom:28px; }
.pr-card__cta a { display:block; text-align:center; padding:13px 22px; border-radius:6px; font-family:'Inter',sans-serif; font-size:15px; font-weight:700; letter-spacing:-.1px; text-decoration:none; transition:all .25s cubic-bezier(.22,.61,.36,1); }
.pr-card__cta a:hover { transform:translateY(-2px); }

/* Button variants */
.pr-btn-outline { background:transparent; border:1.5px solid rgba(64,117,201,.35); color:var(--Royal-Blue-Blue-600,#0a3578) !important; }
.pr-btn-outline:hover { background:var(--Royal-Blue-Blue-50,#e7eef8); border-color:var(--Royal-Blue-Blue-400,#4075c9); }
.pr-btn-gradient { background:var(--Explore-Button,linear-gradient(270deg,#7747b6 0%,#4075c9 50.7%,#1ca9c9 100%)); color:#fff !important; border:none; box-shadow:0 8px 28px -8px rgba(64,117,201,.65),inset 0 1px 0 rgba(255,255,255,.2); }
.pr-btn-gradient:hover { filter:brightness(1.1); transform:translateY(-1px); }
.pr-btn-ghost { background:transparent; border:1.5px solid rgba(64,117,201,.35); color:var(--Royal-Blue-Blue-600,#0a3578) !important; }
.pr-btn-ghost:hover { background:var(--Royal-Blue-Blue-50,#e7eef8); border-color:var(--Royal-Blue-Blue-400,#4075c9); }

/* Feature head */
.pr-card__feat-head { font-family:'Inter',sans-serif; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blueGray-400,#94A3B8); margin:0 0 14px; }
.pr-card--dark .pr-card__feat-head { color:var(--blueGray-400,#94A3B8); }

/* Feature list */
.pr-card__feats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.pr-card__feats li { display:flex; align-items:flex-start; gap:10px; font-family:'Inter',sans-serif; font-size:13.5px; line-height:20px; color:#1e2d42; }
.pr-card--dark .pr-card__feats li { color:#1e2d42; }

/* Gradient checkmark */
.pr-ck {
    flex-shrink:0; width:18px; height:18px; border-radius:50%;
    background:linear-gradient(135deg,#1ca9c9 0%,#4075c9 100%);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    margin-top:1px;
    box-shadow:0 2px 6px rgba(28,169,201,.4);
}
.pr-card--dark .pr-ck { background:linear-gradient(135deg,#1ca9c9 0%,#4075c9 100%); box-shadow:0 2px 6px rgba(28,169,201,.4); }
.pr-ck svg { width:10px; height:10px; }

/* ── COMPARISON TABLE ── */
.pr-table-sec { background:var(--Royal-Blue-Blue-50,#e7eef8); padding:96px 0; position:relative; }
.pr-table-sec::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(40,99,195,.10) 1px,transparent 1px); background-size:24px 24px; z-index:0; pointer-events:none; }
.pr-table-head { text-align:center; max-width:680px; margin:0 auto 60px; position:relative; z-index:1; }
.pr-table-head h2 { font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:44px; line-height:54px; letter-spacing:-0.6px; color:var(--Royal-Blue-Blue-900,#051A3C); margin:0; }

.pr-tbl-wrap { background:#fcfcfc; border:1px solid var(--blueGray-200,#E2E8F0); border-radius:20px; box-shadow:var(--Card-Shadow,0 4px 24px rgba(0,0,0,.12)); position:relative; }
.pr-tbl-row { display:grid; grid-template-columns:2.4fr 1fr 1fr 1fr; border-bottom:1px solid var(--blueGray-100,#F1F5F9); }
.pr-tbl-row:last-child { border-bottom:none; border-radius:0 0 20px 20px; }
.pr-tbl-row--head { background:#fcfcfc; border-radius:20px 20px 0 0; box-shadow:0 2px 10px rgba(14,36,80,.07); }
.pr-tbl-row--head .pr-tbl-cell { background:#fcfcfc; }

/* Fixed clone shown by JS when header scrolls out of view */
.pr-tbl-head-fixed {
    display: none;
    position: fixed;
    /* Below .site-top (z-index 200 in components/header.css), which is the
       stacking context the nav mega-menus live in — at 500 this clone drew
       over an open dropdown. It is positioned just under the header anyway,
       so it never needs to outrank it. */
    z-index: 150;
    background: #fcfcfc;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 4px 16px rgba(14,36,80,.13);
    border: 1px solid var(--blueGray-200,#E2E8F0);
    border-bottom: none;
    grid-template-columns: 2.4fr 1fr 1fr 1fr;
}
.pr-tbl-head-fixed.is-visible { display: grid; }
.pr-tbl-head-fixed .pr-tbl-cell { background: #fcfcfc; }
.pr-tbl-head-fixed .pr-tbl-cell--ess { border-top: 3px solid #4075c9; background: linear-gradient(180deg,#ddeafc 0%,#e7eef8 100%); }
.pr-tbl-row--group { background:linear-gradient(90deg,#f0f5ff 0%,#f8fafc 100%); border-bottom:1px solid var(--blueGray-100,#F1F5F9); }
.pr-tbl-group-label { grid-column:1/-1; padding:11px 24px; font-family:'Inter',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--Royal-Blue-Blue-500,#0e48a5); display:flex; align-items:center; gap:9px; }
.pr-tbl-group-icon { flex-shrink:0; width:16px; height:16px; opacity:.75; }

.pr-tbl-row:not(.pr-tbl-row--head):not(.pr-tbl-row--group):hover { background:rgba(240,246,255,.55); }
.pr-tbl-row:not(.pr-tbl-row--head):not(.pr-tbl-row--group):hover .pr-tbl-cell--ess { background:#d8e7fb; }

.pr-tbl-cell { padding:14px 24px; font-family:'Inter',sans-serif; font-size:13.5px; line-height:22px; }
.pr-tbl-cell--feat { font-weight:500; color:var(--cool-101828,#101828); display:flex; align-items:center; }
.pr-tbl-cell--featlbl { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blueGray-400,#94A3B8); align-items:center; }
.pr-tbl-cell--head { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 16px 20px; gap:0; }
.pr-tbl-cell--val { display:flex; align-items:center; justify-content:center; text-align:center; font-size:13px; color:#4a5568; }
.pr-tbl-cell--ess { background:var(--Royal-Blue-Blue-50,#e7eef8); border-left:1.5px solid var(--Royal-Blue-Blue-150,#b8d0fd); border-right:1.5px solid var(--Royal-Blue-Blue-150,#b8d0fd); transition:background .15s; }
.pr-tbl-cell--ess.pr-tbl-cell--val { font-weight:600; color:var(--Royal-Blue-Blue-700,#072b6b); }
.pr-tbl-row--head .pr-tbl-cell--ess { border-top:3px solid #4075c9; background:linear-gradient(180deg,#ddeafc 0%,#e7eef8 100%); }

/* Plan mini-cards in header */
.pr-tbl-plan { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; height:100%; }
.pr-tbl-plan__badge { font-family:'Inter',sans-serif; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#4075c9,#7747b6); padding:3px 10px; border-radius:50px; margin-bottom:2px; }
.pr-tbl-plan__name { font-family:'Inter',sans-serif; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blueGray-400,#94A3B8); }
.pr-tbl-cell--ess .pr-tbl-plan__name { color:var(--Royal-Blue-Blue-500,#0e48a5); }
.pr-tbl-plan__price { font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:400; color:var(--Royal-Blue-Blue-900,#051A3C); line-height:1.1; letter-spacing:-.02em; margin:4px 0 2px; }
.pr-tbl-plan__price small { font-family:'Inter',sans-serif; font-size:12px; font-weight:400; color:var(--blueGray-400,#94A3B8); letter-spacing:0; }
.pr-tbl-plan__price--sm { font-size:18px; }
.pr-tbl-plan__cta { display:block; width:100%; text-align:center; padding:8px 10px; border-radius:6px; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; text-decoration:none; transition:all .2s; margin-top:auto; letter-spacing:-.1px; }

.tbl-check { width:20px; height:20px; border-radius:50%; background:var(--Turquoise-SkyBlue-50,#e8f6fa); color:var(--Turquoise-SkyBlue-500,#1ca9c9); display:inline-flex; align-items:center; justify-content:center; }
.tbl-check svg { width:11px; height:11px; }
.tbl-dash { width:16px; height:2px; background:var(--blueGray-200,#E2E8F0); border-radius:2px; }
.tbl-cross { width:20px; height:20px; border-radius:50%; background:var(--blueGray-100,#F1F5F9); color:var(--blueGray-400,#94A3B8); display:inline-flex; align-items:center; justify-content:center; }
.tbl-cross svg { width:11px; height:11px; }
.pr-footnote { font-family:'Inter',sans-serif; font-size:12px; color:var(--blueGray-400,#94A3B8); text-align:center; margin-top:20px; }

/* Mobile-only plan switcher — see the max-width:767px block below. */
.pr-plan-switch { display:none; }

/* ── DARK FAQ ── */
.pr-dark-faq {
    position:relative;
    background:linear-gradient(160deg,#1d0b42 0%,#0d1e49 45%,#051A3C 100%);
    padding:96px 0;
    overflow:hidden;
    color:#fcfcfc;
}
.pr-dark-faq::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 70% 80% at 15% 50%,rgba(85,41,142,.40) 0%,transparent 65%);
    pointer-events:none;
}

/* ── RESPONSIVE ── */
@media (max-width:1199px) {
    .pr-cards { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
    /* Only there to keep the three desktop columns aligned — dead space once stacked. */
    .pr-card__billing--spacer { display:none; }
    .pr-tbl-row { grid-template-columns:1.8fr 1fr 1fr 1fr; }
    .pr-tbl-head-fixed { grid-template-columns:1.8fr 1fr 1fr 1fr; }
}
@media (max-width:991px) {
    .pr-hero__title { font-size:44px; line-height:54px; }
    .pr-plans__title, .pr-table-head h2 { font-size:34px; line-height:44px; }
    .pr-hero { padding:80px 0 72px; }
    .pr-hero__layout { grid-template-columns:1fr; text-align:center; gap:40px; }
    .pr-hero__inner { align-items:center; }
    .pr-hero__sub { max-width:100%; }
    .pr-hero__ctas { justify-content:center; }
    .pr-hero__img { max-width:480px; margin:0 auto; }
    .pr-plans { padding:72px 0; }
    .pr-table-sec { padding:72px 0; }
    .pr-dark-faq { padding:72px 0; }
    /* Plans head spacing */
    .pr-plans__head { margin-bottom:40px; }
    .pr-table-head { margin-bottom:40px; }
}
@media (max-width:767px) {
    /* Hero */
    .pr-hero { padding:64px 0 56px; }
    .pr-hero__sub { font-size:15px; line-height:24px; color:rgba(252,252,252,.86); }

    /* The hero decorations are fixed pixel sizes tuned for a ~1200px stage:
       an 860px glow plus three ~510px orbs. At 390px they all pile up behind
       the headline instead of sitting at the edges, and because the orbs are
       mix-blend-mode:screen they lift the background there about a third
       brighter than on desktop — which is what reads as a washed-out hero.
       Scale them down and push them back out to the corners. */
    .pr-hero__glow { width:330px; height:200px; filter:blur(48px); opacity:.6; }
    .pr-hero__glow--2 { width:260px; height:160px; bottom:-70px; filter:blur(52px); opacity:.5; }
    .pr-hero .hero-orb { filter:blur(54px); }
    .pr-hero .orb-violet { width:230px; height:230px; left:-26%; top:1%; }
    .pr-hero .orb-cyan   { width:250px; height:210px; top:-7%; }
    .pr-hero .orb-blue   { width:230px; height:230px; right:-26%; top:auto; bottom:4%; }

    /* Plans section */
    .pr-plans__sub { font-size:15px; }
    .pr-plans__head { margin-bottom:32px; }

    /* Cards — single column, remove featured lift */
    .pr-card { padding:28px 22px 34px; }
    .pr-card--featured { padding:36px 22px 40px; transform:none; }
    .pr-card--featured:hover { transform:translateY(-4px); }

    /* Table heading */
    .pr-table-head { margin-bottom:32px; }

    /* Table rows & cells */
    .pr-tbl-row { grid-template-columns:1.5fr 1fr 1fr 1fr; }
    .pr-tbl-head-fixed { grid-template-columns:1.5fr 1fr 1fr 1fr; }
    .pr-tbl-cell { padding:10px 8px; font-size:11px; line-height:18px; }
    .pr-tbl-cell--head { padding:16px 6px 12px; }
    .pr-tbl-plan__price { font-size:20px; margin:2px 0; }
    .pr-tbl-plan__price small { font-size:10px; }
    .pr-tbl-plan__name { font-size:9px; letter-spacing:.10em; }
    .pr-tbl-plan__badge { font-size:8px; padding:2px 7px; }
    .pr-tbl-plan__cta { padding:6px 4px; font-size:10px; border-radius:4px; }
    .pr-tbl-plan { gap:4px; }

    /* ── Comparison table: one plan at a time ──
       Four columns cannot fit a phone — the old fallback pushed the whole
       Custom column off-screen behind a horizontal scroller with no
       affordance. Instead the switcher above picks a plan and the table
       shows Feature + that plan only.

       Every rule here is gated on [data-active-plan], which pricing.js sets
       only after it has tagged the value cells with data-plan. With JS off,
       none of this applies and the scrollable 4-column fallback in the
       max-width:575px block still stands. */
    /* Sticky band + pill. The band is the sticky element and carries an
       opaque, full-bleed background; the pill lives inside it. Doing it the
       other way round does not work — position:sticky makes its own stacking
       context, so a z-index:-1 pseudo-element paints over the pill's own
       background instead of behind it. Negative margins cancel .container's
       16px padding so the band reaches the screen edges, and the lower strip
       fades so rows dissolve under it rather than meeting a hard line. */
    .pr-plan-switch {
        display:block;
        position:sticky;
        /* --pr-nav-h is kept in sync by pricing.js, which already measures
           the site header's live (animating) bottom edge. */
        top:var(--pr-nav-h,65px);
        z-index:60;
        margin:0 -16px 4px;
        padding:10px 16px 14px;
        background:linear-gradient(180deg,
            var(--Royal-Blue-Blue-50,#e7eef8) 0%,
            var(--Royal-Blue-Blue-50,#e7eef8) 74%,
            rgba(231,238,248,0) 100%);
    }
    .pr-plan-switch__inner {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:4px;
        background:#fcfcfc;
        border:1px solid var(--blueGray-200,#E2E8F0);
        border-radius:50px;
        padding:4px;
        box-shadow:0 2px 12px rgba(14,36,80,.10);
    }
    .pr-plan-switch__btn {
        -webkit-appearance:none; appearance:none; border:0; background:transparent;
        cursor:pointer; font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
        letter-spacing:.03em; color:var(--blueGray-400,#94A3B8);
        padding:9px 4px; border-radius:50px; white-space:nowrap;
        transition:background .2s, color .2s, box-shadow .2s;
    }
    .pr-plan-switch__btn.is-active {
        background:linear-gradient(135deg,#4075c9,#7747b6);
        color:#fff;
        box-shadow:0 2px 8px rgba(64,117,201,.35);
    }

    .pr-tbl-wrap[data-active-plan] { overflow:hidden; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-row { grid-template-columns:1fr minmax(96px,36%); min-width:0; }
    /* Header row becomes a single full-width plan card, so the "Most
       Popular" badge and the CTA get the whole width instead of a
       107px sliver. */
    .pr-tbl-wrap[data-active-plan] .pr-tbl-row--head { grid-template-columns:1fr; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-row--head .pr-tbl-cell--feat { display:none; }
    .pr-tbl-wrap[data-active-plan="grow"]   .pr-tbl-cell[data-plan]:not([data-plan="grow"]),
    .pr-tbl-wrap[data-active-plan="ess"]    .pr-tbl-cell[data-plan]:not([data-plan="ess"]),
    .pr-tbl-wrap[data-active-plan="custom"] .pr-tbl-cell[data-plan]:not([data-plan="custom"]) { display:none; }

    /* The plan column now sits flush against the container edge, so the
       Essentials outline reduces to a single divider on its inner side;
       Grow and Custom get a plain one so the two columns still read apart. */
    .pr-tbl-wrap[data-active-plan] .pr-tbl-cell--ess { border-right:0; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-row--head .pr-tbl-cell--ess { border-left:0; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-cell[data-plan]:not(.pr-tbl-cell--ess) { border-left:1px solid var(--blueGray-100,#F1F5F9); }

    /* Feature groups collapse to accordions. 59 rows is a long scroll on a
       phone, so each group heading becomes a tap target and only the open
       one renders its rows. Wired in pricing.js, which also restores the
       fully-expanded table above 768px. */
    .pr-tbl-wrap[data-active-plan] .pr-tbl-group-label {
        cursor:pointer;
        padding:15px 14px;
        -webkit-tap-highlight-color:transparent;
        -webkit-user-select:none; user-select:none;
        transition:background .15s ease;
    }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-group-label:active { background:rgba(64,117,201,.07); }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-group-label::after {
        content:'';
        margin-left:auto; margin-right:5px; flex-shrink:0;
        width:8px; height:8px;
        border-right:2px solid currentColor;
        border-bottom:2px solid currentColor;
        border-radius:0 0 2px 0;
        opacity:.6;
        transform:translateY(-2px) rotate(45deg);
        transition:transform .25s ease, opacity .2s ease;
    }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-row--group.is-open .pr-tbl-group-label::after {
        transform:translateY(2px) rotate(-135deg);
        opacity:.9;
    }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-row--group.is-open { background:linear-gradient(90deg,#e2ecff 0%,#f1f6fd 100%); }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-row.is-collapsed { display:none; }

    .pr-tbl-wrap[data-active-plan] .pr-tbl-cell { padding:12px 14px; font-size:12.5px; line-height:19px; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-cell--val { font-size:12.5px; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-cell--head { padding:20px 16px 18px; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-group-label { padding:10px 14px; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-plan { gap:6px; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-plan__name { font-size:10px; letter-spacing:.16em; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-plan__badge { font-size:9px; padding:3px 10px; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-plan__price { font-size:26px; margin:4px 0 2px; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-plan__price small { font-size:12px; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-plan__price--sm { font-size:19px; }
    .pr-tbl-wrap[data-active-plan] .pr-tbl-plan__cta { font-size:13px; padding:10px 12px; border-radius:6px; max-width:280px; margin-left:auto; margin-right:auto; }
}
@media (max-width:575px) {
    .pr-hero__title { font-size:34px; line-height:44px; }

    /* Billing toggle — at 14px the two labels wrapped onto two lines each
       and shoved the "20% Off" badge against the edge. */
    .pr-toggle-wrap { gap:8px; padding:6px 12px; margin-top:22px; flex-wrap:nowrap; max-width:100%; }
    .pr-toggle-lbl { font-size:12.5px; white-space:nowrap; }
    .pr-toggle-switch { width:38px; height:21px; }
    .pr-toggle-track::after { width:15px; height:15px; }
    .pr-toggle-switch input:checked ~ .pr-toggle-track::after { transform:translateX(17px); }
    .pr-annual-badge { font-size:9px; padding:3px 8px; }

    .pr-plans__title, .pr-table-head h2 { font-size:26px; line-height:36px; }
    /* Section paddings */
    .pr-hero { padding:56px 0 48px; }
    .pr-plans { padding:56px 0; }
    .pr-table-sec { padding:56px 0; }
    .pr-dark-faq { padding:56px 0; }

    /* Cards */
    .pr-card { padding:24px 18px 28px; }
    .pr-card--featured { padding:30px 18px 34px; }
    .pr-card__amount { font-size:42px; }
    .pr-card__amount--free, .pr-card__amount--quote { font-size:32px; padding-bottom:0; }
    .pr-card__amount-sup { font-size:18px; padding-bottom:8px; }

    /* Table — allow horizontal scroll on very small phones */
    .pr-tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .pr-tbl-row { min-width:480px; }
    .pr-tbl-plan__price { font-size:18px; }
    .pr-tbl-plan__cta { font-size:9px; padding:5px 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .pr-gradient { animation:none; }
    .pr-hero__eyebrow .het-dot { animation:none; }
}

/* ==== CTA & BUTTON STANDARD (site-wide) ==== */
/* Every action button on the site shares one size: 48px tall, 30px side
   padding, 16px label. The height comes from min-height plus centring,
   not vertical padding, so 0/1/2px borders all land on exactly 48px.
   The header and the mobile nav keep their compact buttons. The same
   block is copied into every page bundle; keep the copies identical. */
body :is(.btn-primary:not(.btn-primary--sm), .btn-demo--lg, .au-btn-demo--lg,
    .btn-ghost, .ab-btn-ghost, .ld-btn-ghost, .ld-btn-outline, .ind-btn-ghost,
    .fi-btn-ghost, .hr-btn-ghost, .mk-btn-ghost, .sl-btn-ghost,
    .hero-btn-outline, .hero-btn-demo, .dm2-ghost-btn, .explore-btn,
    .pr-btn-gradient, .pr-btn-outline, .pr-btn-ghost, .pr-tbl-plan__cta,
    .cs-form__submit, .ct-form__submit, .rd-form__submit, .pt-form__submit,
    .rls-signin, .footer-cta-button):not(.site-header *, header *, .mobile-nav-panel *){
    box-sizing: border-box;
    height: auto;
    min-height: 48px;
    padding: 0 30px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;   /* one weight for every CTA — matches the homepage */
    align-items: center;
    justify-content: center;
}
/* Buttons that were plain blocks need flex so the label centres vertically. */
body :is(.btn-ghost, .pr-btn-gradient, .pr-btn-outline, .pr-btn-ghost, .pr-tbl-plan__cta):not(.site-header *, header *, .mobile-nav-panel *){
    display: flex;
}

/* End-of-page CTA card: one height on every page (460px on desktop, 570px
   on tablet where the copy wraps more), copy centred vertically, width
   follows the container. */
@media (min-width: 768px){
    .mcp-cta-card, .au-cta__card, .di-final-cta__card, .ld-cta__card{
        box-sizing: border-box;
        min-height: 460px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
@media (min-width: 768px) and (max-width: 1023px){
    .mcp-cta-card, .au-cta__card, .di-final-cta__card, .ld-cta__card{ min-height: 570px; }
}

/* Secondary CTA appearance — the geometry above only unified SIZE, which is
   why these still looked different page to page. The gradient border uses the
   padding-box / border-box layer pair so it respects border-radius.
   --cta-surface is the colour the button sits ON; set it (and --cta-ink) on a
   light section so the inner fill and label stay legible there. */
body :is(.btn-demo--lg, .au-btn-demo--lg, .btn-ghost, .ab-btn-ghost, .ld-btn-ghost,
    .ind-btn-ghost, .fi-btn-ghost, .hr-btn-ghost, .mk-btn-ghost, .sl-btn-ghost,
    .hero-btn-outline, .hero-btn-demo, .dm2-ghost-btn):not(.site-header *, header *, .mobile-nav-panel *,
    .au-cta__card *, .di-final-cta__card *, .dm2-res-cta *, .mcp-cta-card *) {
    border: 2px solid transparent;
    border-radius: 6px;
    background:
        linear-gradient(var(--cta-surface, #051A3C), var(--cta-surface, #051A3C)) padding-box,
        var(--Explore-Button, linear-gradient(270deg, #7747b6 0%, #4075c9 50.7%, #1ca9c9 100%)) border-box;
    color: var(--cta-ink, #fcfcfc);
    font-family: 'Inter', sans-serif;
    font-weight: 600;   /* matches the primary — homepage CTA is the source of truth */
    text-decoration: none;
    transition: filter .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
body :is(.btn-demo--lg, .au-btn-demo--lg, .btn-ghost, .ab-btn-ghost, .ld-btn-ghost,
    .ind-btn-ghost, .fi-btn-ghost, .hr-btn-ghost, .mk-btn-ghost, .sl-btn-ghost,
    .hero-btn-outline, .hero-btn-demo, .dm2-ghost-btn):not(.site-header *, header *, .mobile-nav-panel *,
    .au-cta__card *, .di-final-cta__card *, .dm2-res-cta *, .mcp-cta-card *):hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
/* ==== /CTA & BUTTON STANDARD ==== */