/* Dig Virtual — pricing-details.html
   Same rail + drawer chrome as about-us.html/index.html (index-sidebar.css/js)
   and the same design tokens as the homepage (index-horizontal.css's :root
   variables, body.dv-editorial-home base). No header, no footer. Unlike
   about-us.html this page's content (the plans grid) is data-driven and can
   vary in height/count, so — unlike the About page — this one scrolls
   normally within its content area; only the rail/drawer stay fixed. */

.dv-pricing-main {
    margin-left: var(--dv-rail-w);
    min-height: 100dvh;
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
    /* Same soft blue/mint radial-gradient background as index.html's
       Panel 1 hero, for a consistent brand backdrop across every
       top-level page. Light background, so this page uses the same
       dark-ink text as before — no colour overrides needed. */
    background:
        radial-gradient(1100px circle at 6% -8%, rgba(0,110,195,0.32), transparent 52%),
        radial-gradient(950px circle at 102% -4%, rgba(63,196,140,0.30), transparent 50%),
        radial-gradient(800px circle at 10% 62%, rgba(63,196,140,0.24), transparent 48%),
        radial-gradient(1000px circle at 96% 92%, rgba(0,110,195,0.26), transparent 50%),
        radial-gradient(650px circle at 55% 28%, rgba(63,196,140,0.16), transparent 45%),
        linear-gradient(180deg, #eef6fd 0%, #eefbf3 100%);
    color: var(--dv-ink);
}

/* The circles above are sized in fixed px for desktop — on a narrow
   phone viewport they overlap each other far more within the small
   width, stacking the translucent colour layers into a visibly
   darker/muddier background than the same page on laptop. Sizing them
   in vw instead keeps the gradient coverage proportional across
   viewport widths, so mobile matches laptop. */
@media (max-width: 767px) {
    .dv-pricing-main {
        background:
            radial-gradient(76vw circle at 6% -8%, rgba(0,110,195,0.32), transparent 52%),
            radial-gradient(66vw circle at 102% -4%, rgba(63,196,140,0.30), transparent 50%),
            radial-gradient(56vw circle at 10% 62%, rgba(63,196,140,0.24), transparent 48%),
            radial-gradient(69vw circle at 96% 92%, rgba(0,110,195,0.26), transparent 50%),
            radial-gradient(45vw circle at 55% 28%, rgba(63,196,140,0.16), transparent 45%),
            linear-gradient(180deg, #eef6fd 0%, #eefbf3 100%);
    }
}

.dv-pricing-head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.dv-pricing-eyebrow {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4338CA;
}

.dv-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .dv-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .dv-pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

.dv-pricing-card {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(21, 21, 21, 0.08);
    border-radius: 1.5rem;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Pinned to dark ink regardless of the page's own ambient text colour
       — this is a near-white card, not part of the gradient's text layer. */
    color: var(--dv-ink);
}
.dv-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -24px rgba(21, 21, 21, 0.25);
}

.dv-pricing-badge {
    position: absolute;
    top: -0.75rem;
    right: 1.25rem;
    background: #DC2626;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 6px 14px -6px rgba(220, 38, 38, 0.6);
}

/* The loading-state skeleton cards have no background of their own
   (design-system.css only gives them a border) — give them the same
   translucent white treatment as the loaded plan cards for consistency. */
.dv-pricing-grid .dv-skeleton-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
}

@media (max-width: 640px) {
    .dv-pricing-main { margin-left: var(--dv-rail-w); }
}