/* ============================================================
   Riviant — The Business App Store (pricing experience)
   Scoped under .riv so it never bleeds into the rest of the site.
   Layers a Riviant-blue accent over the site's white/Inter base.
   ============================================================ */

.riv {
    --rb: #2f6bff;              /* Riviant blue */
    --rb-deep: #1e40e0;
    --rb-rgb: 47, 107, 255;
    --rb-050: #f2f6ff;
    --rb-100: #e6eeff;
    --rb-ring: rgba(47, 107, 255, 0.16);

    /* App-tier accents */
    --t-ess: #2f6bff;   --t-ess-bg: #eef3ff;
    --t-gro: #0d9488;   --t-gro-bg: #e5f6f3;
    --t-pre: #7c3aed;   --t-pre-bg: #f3ecfe;
    --pos: #12a150;     --pos-bg: #e7f7ee;

    --ink-0: #ffffff;
    --ink-50: #f7f8fa;
    --ink-100: #f0f2f6;
    --ink-200: #e4e7ee;
    --ink-500: #6b7280;
    --ink-700: #384152;
    --ink-900: #0b1220;

    --line: #e7eaf1;
    --line-soft: #eef0f5;

    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;

    --sh-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --sh-md: 0 10px 30px -12px rgba(16, 24, 40, 0.18);
    --sh-lg: 0 24px 60px -20px rgba(16, 24, 40, 0.28);
    --sh-blue: 0 18px 44px -18px rgba(var(--rb-rgb), 0.55);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    color: var(--ink-900);
}

/* ---------- Hero ---------- */
.riv-hero {
    position: relative;
    text-align: center;
    padding: 84px 20px 40px;
    overflow: hidden;
}
.riv-hero::before {
    content: "";
    position: absolute;
    top: -160px;
    left: 50%;
    width: 900px;
    height: 500px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(var(--rb-rgb), 0.14), transparent 70%);
    pointer-events: none;
}
.riv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rb-deep);
    background: var(--rb-050);
    border: 1px solid var(--rb-100);
    padding: 7px 14px;
    border-radius: 100px;
}
.riv-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rb); box-shadow: 0 0 0 4px var(--rb-ring); }
.riv-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 22px auto 14px;
    max-width: 16ch;
    text-wrap: balance;
}
.riv-hero h1 .grad {
    background: linear-gradient(120deg, var(--rb), var(--rb-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.riv-hero p {
    font-size: clamp(1rem, 2vw, 1.18rem);
    color: var(--ink-500);
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---------- Progress rail ---------- */
.riv-progress {
    position: sticky;
    top: var(--nav-height, 80px);
    z-index: 30;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
}
.riv-progress button {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-500);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s var(--ease);
    white-space: nowrap;
}
.riv-progress button .n {
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    font-size: 0.72rem;
    background: var(--ink-100);
    color: var(--ink-500);
    transition: all 0.2s var(--ease);
}
.riv-progress button:hover { color: var(--ink-900); background: var(--ink-50); }
.riv-progress button.active { color: var(--rb-deep); background: var(--rb-050); border-color: var(--rb-100); }
.riv-progress button.active .n { background: var(--rb); color: #fff; }
.riv-progress button.done .n { background: var(--rb); color: #fff; }

/* ---------- Layout ---------- */
.riv-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 100px;
    align-items: start;
}
.riv-main { min-width: 0; }

/* ---------- Steps ---------- */
.riv-step { scroll-margin-top: calc(var(--nav-height, 80px) + 62px); }
.riv-step + .riv-step { margin-top: 64px; }
.riv-step-head { margin-bottom: 26px; }
.riv-step-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rb-deep);
    margin-bottom: 12px;
}
.riv-step-kicker .s {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--rb);
    color: #fff;
    font-size: 0.82rem;
    box-shadow: var(--sh-blue);
}
.riv-step-head h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 0 0 8px;
}
.riv-step-head p { color: var(--ink-500); font-size: 1rem; margin: 0; max-width: 60ch; }

/* ---------- Card grids ---------- */
.riv-grid { display: grid; gap: 16px; }
.riv-grid.cols-plan { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.riv-grid.cols-app { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.riv-grid.cols-option { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---------- Base selectable card ---------- */
.riv-card {
    position: relative;
    background: var(--ink-0);
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px;
    cursor: pointer;
    transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
    text-align: left;
    box-shadow: var(--sh-sm);
    will-change: transform;
}
.riv-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
    border-color: var(--ink-200);
}
.riv-card:focus-visible { outline: 2px solid var(--rb); outline-offset: 3px; }
.riv-card.is-selected {
    border-color: var(--rb);
    background: var(--rb-050);
    box-shadow: 0 0 0 4px var(--rb-ring), var(--sh-md);
}
.riv-card .riv-check {
    position: absolute;
    top: 14px; right: 14px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--rb);
    color: #fff;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(0.4);
    transition: all 0.25s var(--ease);
    z-index: 2;
}
.riv-card.is-selected .riv-check { opacity: 1; transform: scale(1); }
.riv-card .riv-check svg { width: 14px; height: 14px; }

/* Icon tile */
.riv-ico {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 13px;
    background: linear-gradient(150deg, var(--rb-050), var(--rb-100));
    color: var(--rb-deep);
    margin-bottom: 14px;
    transition: all 0.25s var(--ease);
}
.riv-ico svg { width: 24px; height: 24px; }
.riv-card.is-selected .riv-ico { background: linear-gradient(150deg, var(--rb), var(--rb-deep)); color: #fff; box-shadow: var(--sh-blue); }

/* ---------- Plan card ---------- */
.riv-card.plan { padding: 26px; display: flex; flex-direction: column; }
.riv-card.plan .fname { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 2px; }
.riv-card.plan .fprice { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 2px; }
.riv-card.plan .fprice small { font-size: 0.82rem; font-weight: 600; color: var(--ink-500); }
.riv-card.plan .ffor { font-size: 0.9rem; color: var(--ink-500); line-height: 1.55; margin: 10px 0 16px; }
.riv-card.plan ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; }
.riv-card.plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; color: var(--ink-700); line-height: 1.4; }
.riv-card.plan li svg { width: 16px; height: 16px; color: var(--rb); flex-shrink: 0; margin-top: 1px; }
.riv-card.plan.pop { border-color: var(--rb-100); }

/* Enterprise plan card (dark) */
.riv-card.plan.enterprise { background: linear-gradient(160deg, var(--ink-900), #111a2e); border-color: transparent; color: #fff; }
.riv-card.plan.enterprise:hover { border-color: rgba(255,255,255,0.18); }
.riv-card.plan.enterprise .riv-ico { background: rgba(255,255,255,0.1); color: #fff; }
.riv-card.plan.enterprise .fprice { color: #fff; }
.riv-card.plan.enterprise .ffor { color: #b7c2da; }
.riv-card.plan.enterprise ul { border-top-color: rgba(255,255,255,0.12); }
.riv-card.plan.enterprise li { color: #cdd7ec; }
.riv-card.plan.enterprise li svg { color: #7ea2ff; }
.riv-card.plan.enterprise.is-selected { background: linear-gradient(160deg, #0d1526, #16233f); box-shadow: 0 0 0 4px var(--rb-ring), var(--sh-lg); }
.riv-card.plan.enterprise.is-selected .riv-ico { background: linear-gradient(150deg, var(--rb), var(--rb-deep)); }

/* Plan / detail "what's included" panel */
.riv-detail {
    margin-top: 22px;
    background: linear-gradient(160deg, var(--rb-050), var(--ink-0));
    border: 1.5px solid var(--rb-100);
    border-radius: var(--r-lg);
    padding: 24px 26px;
    box-shadow: var(--sh-sm);
    animation: rivLineIn 0.4s var(--ease) both;
}
.riv-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.riv-detail-ico { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(150deg, var(--rb), var(--rb-deep)); color: #fff; display: grid; place-items: center; box-shadow: var(--sh-blue); flex-shrink: 0; }
.riv-detail-ico svg { width: 24px; height: 24px; }
.riv-detail-head .dk { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; }
.riv-detail-head .dn { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; margin-top: 2px; }
.riv-detail-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 11px 22px; }
.riv-detail-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--ink-700); line-height: 1.4; }
.riv-detail-list li svg { width: 16px; height: 16px; color: var(--rb); flex-shrink: 0; margin-top: 1px; }
.riv-detail-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px dashed var(--rb-100); font-size: 0.86rem; color: var(--ink-700); font-weight: 500; }
.riv-detail-note svg { width: 16px; height: 16px; color: var(--rb); flex-shrink: 0; }

/* Ribbon (popular) */
.riv-ribbon {
    position: absolute;
    top: 16px; right: 16px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rb-deep);
    background: var(--rb-100);
    padding: 4px 9px;
    border-radius: 100px;
    z-index: 1;
}

/* ---------- App Store: tiers ---------- */
.riv-tier + .riv-tier { margin-top: 48px; }
.riv-tier-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.riv-tier-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.riv-tier-ico svg { width: 23px; height: 23px; }
.riv-tier-meta { flex: 1; min-width: 180px; }
.riv-tier-title { display: flex; align-items: center; gap: 10px; }
.riv-tier-title h3 { font-size: 1.24rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.riv-tier-head p { font-size: 0.86rem; color: var(--ink-500); margin: 3px 0 0; }
.riv-tier-badge { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 100px; }

.riv-tier-ico.tier-essential, .riv-app-ico.tier-essential { background: var(--t-ess-bg); color: var(--t-ess); }
.riv-tier-ico.tier-growth,    .riv-app-ico.tier-growth    { background: var(--t-gro-bg); color: var(--t-gro); }
.riv-tier-ico.tier-premium,   .riv-app-ico.tier-premium   { background: var(--t-pre-bg); color: var(--t-pre); }
.riv-tier-badge.tier-essential { background: var(--t-ess-bg); color: var(--t-ess); }
.riv-tier-badge.tier-growth    { background: var(--t-gro-bg); color: var(--t-gro); }
.riv-tier-badge.tier-premium   { background: var(--t-pre-bg); color: var(--t-pre); }

/* live tier status */
.riv-tier-status { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 700; }
.riv-tier-status .ts-inc { display: inline-flex; align-items: center; gap: 6px; color: var(--pos); }
.riv-tier-status .ts-inc svg { width: 15px; height: 15px; }
.riv-tier-status .ts-inc b { color: var(--ink-900); }
.riv-tier-status .ts-over { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; background: var(--rb-050); color: var(--rb-deep); }
.riv-tier-status .ts-over b { color: var(--rb-deep); }
.riv-tier-status .ts-muted { color: var(--ink-500); font-weight: 600; }

/* ---------- App card ---------- */
.riv-card.app { display: flex; flex-direction: column; padding: 18px; }
.riv-app-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.riv-app-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; transition: all 0.25s var(--ease); }
.riv-app-ico svg { width: 21px; height: 21px; }
.riv-card.app.is-selected .riv-app-ico { background: var(--rb); color: #fff; }
.riv-card.app h4 { font-size: 0.98rem; font-weight: 700; margin: 0 0 5px; letter-spacing: -0.01em; }
.riv-card.app .blurb { font-size: 0.84rem; color: var(--ink-500); line-height: 1.5; margin: 0 0 16px; flex: 1; }
.riv-pop {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    background: linear-gradient(120deg, var(--rb), var(--rb-deep));
    padding: 3px 8px;
    border-radius: 100px;
    text-transform: uppercase;
}
.riv-app-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ap-price { font-size: 0.9rem; font-weight: 800; color: var(--ink-900); display: inline-flex; align-items: center; gap: 5px; }
.ap-price svg { width: 14px; height: 14px; }
.ap-price.inc { color: var(--pos); }
.ap-price.over { color: var(--rb-deep); }
.riv-add {
    appearance: none;
    border: 1.5px solid var(--rb);
    background: transparent;
    color: var(--rb-deep);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 7px 15px;
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s var(--ease);
    pointer-events: none; /* card handles the click */
}
.riv-add svg { width: 13px; height: 13px; }
.riv-card.app.is-selected .riv-add { background: var(--rb); color: #fff; }
.riv-card.app.is-selected .riv-add .lbl-add { display: none; }
.riv-card.app:not(.is-selected) .riv-add .lbl-added { display: none; }

/* ---------- Option pill card (design / branding) ---------- */
.riv-card.option { text-align: left; }
.riv-card.option h4 { font-size: 0.98rem; font-weight: 700; margin: 0 0 5px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.riv-card.option p { font-size: 0.83rem; color: var(--ink-500); line-height: 1.5; margin: 0; }
.riv-card.option .mult { display: inline-block; margin-top: 10px; font-size: 0.74rem; font-weight: 600; color: var(--rb-deep); background: var(--rb-050); padding: 3px 9px; border-radius: 100px; }
.riv-card.option .price { display: inline-block; margin-top: 10px; font-size: 0.82rem; font-weight: 700; color: var(--ink-900); }

.riv-subhead { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ink-700); margin: 30px 0 14px; }
.riv-subhead:first-child { margin-top: 0; }

/* ---------- Sticky summary ---------- */
.riv-aside { position: sticky; top: calc(var(--nav-height, 80px) + 66px); }
.riv-summary {
    background: var(--ink-0);
    border: 1.5px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.riv-summary-top {
    padding: 22px 22px 20px;
    background: linear-gradient(160deg, var(--ink-900), #10182b);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.riv-summary-top::before {
    content: "";
    position: absolute;
    top: -60%; right: -30%;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(var(--rb-rgb), 0.5), transparent 65%);
}
.riv-summary-top .lbl { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9aa6c2; font-weight: 600; position: relative; }
.riv-invest { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 8px 0 4px; position: relative; font-variant-numeric: tabular-nums; }
.riv-invest.empty { color: #64748b; font-size: 1.6rem; }
.riv-invest.custom { color: #fff; font-size: 2rem; }
.riv-meta-row { display: flex; gap: 22px; margin-top: 16px; position: relative; }
.riv-meta-row .m .k { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8ea0c0; font-weight: 600; }
.riv-meta-row .m .v { font-size: 0.92rem; font-weight: 700; margin-top: 3px; }

.riv-summary-body { padding: 18px 22px 22px; }
.riv-plat-title { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; margin-bottom: 12px; }
.riv-lines { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.riv-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    font-size: 0.85rem;
    border-bottom: 1px dashed var(--line-soft);
    animation: rivLineIn 0.35s var(--ease) both;
}
.riv-line:last-child { border-bottom: 0; }
.riv-line .name { color: var(--ink-700); font-weight: 500; }
.riv-line .name.lead { font-weight: 700; color: var(--ink-900); }
.riv-line .val { color: var(--ink-500); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.riv-line .val.mult { color: var(--rb-deep); }
.riv-line.inc .name { color: var(--pos); font-weight: 600; }
.riv-line.inc .val { color: var(--pos); }
.riv-empty { color: var(--ink-500); font-size: 0.88rem; padding: 8px 0 14px; line-height: 1.5; }

.riv-care {
    display: flex; align-items: center; gap: 12px;
    margin-top: 16px; padding: 14px;
    background: var(--rb-050);
    border: 1px solid var(--rb-100);
    border-radius: var(--r-md);
}
.riv-care .ci { width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--rb-deep); display: grid; place-items: center; flex-shrink: 0; }
.riv-care .ci svg { width: 18px; height: 18px; }
.riv-care .k { font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; }
.riv-care .v { font-size: 0.92rem; font-weight: 700; color: var(--ink-900); }
.riv-care .v b { color: var(--rb-deep); }

/* Cross-sell suggestions */
.riv-suggest {
    margin-top: 16px;
    border: 1px dashed var(--rb-100);
    border-radius: var(--r-md);
    padding: 14px;
    background: #fff;
    animation: rivLineIn 0.35s var(--ease) both;
}
.riv-suggest .st { font-size: 0.74rem; font-weight: 700; color: var(--ink-700); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.riv-suggest .st svg { width: 15px; height: 15px; color: var(--rb); }
.riv-sug-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%;
    appearance: none; border: 0; background: transparent; font: inherit; text-align: left;
    padding: 8px 8px; margin: 0 -8px; border-radius: 9px; cursor: pointer;
    transition: background 0.15s var(--ease);
}
.riv-sug-item:hover { background: var(--rb-050); }
.riv-sug-item .sl { font-size: 0.84rem; font-weight: 600; color: var(--ink-900); }
.riv-sug-item .sr { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; color: var(--rb-deep); white-space: nowrap; }
.riv-sug-item .sr svg { width: 15px; height: 15px; }

.riv-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 18px;
    padding: 15px 20px;
    border-radius: var(--r-md);
    background: linear-gradient(120deg, var(--rb), var(--rb-deep));
    color: #fff;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: var(--sh-blue);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.riv-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -18px rgba(var(--rb-rgb), 0.7); color: #fff; }
.riv-fine { font-size: 0.72rem; color: var(--ink-500); text-align: center; margin: 10px 0 0; line-height: 1.4; }

/* ---------- Blueprint (final) ---------- */
.riv-blueprint {
    max-width: 1000px;
    margin: 20px auto 0;
    padding: 0 20px 100px;
}
.riv-bp-card {
    background: linear-gradient(160deg, var(--ink-900), #101a30);
    color: #fff;
    border-radius: var(--r-xl);
    padding: clamp(28px, 5vw, 52px);
    position: relative;
    overflow: hidden;
    box-shadow: var(--sh-lg);
}
.riv-bp-card::before {
    content: "";
    position: absolute; top: -40%; left: -10%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(var(--rb-rgb), 0.35), transparent 62%);
}
.riv-bp-card > * { position: relative; }
.riv-bp-card .bk { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #93a3c6; font-weight: 600; }
.riv-bp-card h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 6px; }
.riv-bp-card .sub { color: #b7c2da; font-size: 1rem; max-width: 60ch; line-height: 1.6; margin: 0 0 28px; }
.riv-bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin-bottom: 28px; }
.riv-bp-stat { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md); padding: 18px; }
.riv-bp-stat .k { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8ea0c0; font-weight: 600; }
.riv-bp-stat .v { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.riv-bp-stat .v small { font-size: 0.8rem; color: #93a3c6; font-weight: 600; }
.riv-bp-features { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.riv-chip { font-size: 0.82rem; font-weight: 600; color: #dbe3f4; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); padding: 7px 13px; border-radius: 100px; display: inline-flex; align-items: center; gap: 7px; }
.riv-chip svg { width: 13px; height: 13px; color: var(--rb); }
.riv-bp-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.riv-bp-primary {
    background: #fff; color: var(--ink-900);
    padding: 15px 28px; border-radius: var(--r-md);
    font-weight: 700; font-size: 1rem; text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    box-shadow: 0 16px 40px -16px rgba(0,0,0,0.5);
}
.riv-bp-primary:hover { transform: translateY(-2px); color: var(--ink-900); }
.riv-bp-primary svg { width: 18px; height: 18px; }
.riv-bp-secondary { color: #cdd7ec; text-decoration: none; font-weight: 600; font-size: 0.95rem; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.riv-bp-secondary:hover { border-color: #cdd7ec; color: #fff; }

/* ---------- Reveal-on-scroll ---------- */
.riv-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.riv-reveal.in { opacity: 1; transform: none; }

@keyframes rivLineIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rivPop { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
.riv-card.pulse { animation: rivPop 0.32s var(--ease); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
    .riv-layout { grid-template-columns: 1fr; gap: 0; padding-bottom: 40px; }
    .riv-aside { position: static; margin-top: 56px; }
    .riv-summary { box-shadow: var(--sh-md); }
}

@media (max-width: 520px) {
    .riv-hero { padding-top: 60px; }
    .riv-grid.cols-app { grid-template-columns: 1fr; }
    .riv-tier-status { margin-left: 0; width: 100%; }
    .riv-progress { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .riv-reveal { opacity: 1; transform: none; transition: none; }
    .riv-card, .riv-cta, .riv-bp-primary { transition: none; }
    .riv-card:hover, .riv-cta:hover, .riv-bp-primary:hover { transform: none; }
    .riv-card.pulse { animation: none; }
    .riv-line, .riv-suggest { animation: none; }
}