/* redesign.css — SHARED design-system layer for the v5 redesign rollout.
   Loaded ONLY on redesigned pages, which carry <body class="rd ...">.
   Carries the cross-page DNA established on the homepage (Phase 1): cool
   blue-neutral surfaces, navy primary CTAs, deep-navy footer + motif, and the
   product-UI component library. style.v5.css stays byte-identical so the
   not-yet-redesigned pages are unaffected and no cache-bump is required.
   Page-specific layout lives in pricing-redesign.css / features-redesign.css. */

body.rd { --hero-bg: #F2F6FB; }  /* cool blue-neutral, redesigned pages only */

/* --- primary CTAs go blue; orange stays accent/secondary only --- */
body.rd .btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
body.rd .btn-primary:hover { background: #143049; border-color: #143049; }

/* --- PAGE HERO — cool surface, refined type, faint geometric motif --- */
body.rd .page-hero {
    position: relative;
    background: linear-gradient(180deg, #F2F6FB 0%, #FFFFFF 100%);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
body.rd .page-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: .6;
    background-image:
        linear-gradient(to right, rgba(26,60,94,0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26,60,94,0.045) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: radial-gradient(110% 90% at 50% 0%, #000, transparent 72%);
            mask-image: radial-gradient(110% 90% at 50% 0%, #000, transparent 72%);
    pointer-events: none;
}
body.rd .page-hero > .container { position: relative; z-index: 1; }
body.rd .page-hero h1 { color: var(--navy); letter-spacing: -0.02em; }
body.rd .page-hero .subline { color: var(--muted); }

/* --- section headers, shared polish --- */
body.rd .section-header h2 { color: var(--navy); letter-spacing: -0.01em; }
body.rd .section-header p { color: var(--muted); }

/* --- CLOSING CTA — full-width deep navy, high contrast, motif --- */
body.rd .final-cta { position: relative; background: var(--navy); overflow: hidden; }
body.rd .final-cta::before {
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: .6;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(90% 120% at 50% 0%, #000, transparent 72%);
            mask-image: radial-gradient(90% 120% at 50% 0%, #000, transparent 72%);
}
body.rd .final-cta > .container { position: relative; z-index: 1; }
body.rd .final-cta h2 { color: #fff; }
body.rd .final-cta p, body.rd .final-cta .final-cta-extra a { color: rgba(255,255,255,.85); }
body.rd .final-cta .btn-primary { background: #fff; color: var(--navy); border-color: #fff; }
body.rd .final-cta .btn-primary:hover { background: rgba(255,255,255,.9); }
body.rd .final-cta .btn-outline { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
body.rd .final-cta .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* --- FOOTER — deepest navy + faint motif, matches the homepage --- */
body.rd .site-footer { position: relative; background: #12283D; overflow: hidden; }
body.rd .site-footer::before {
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(100% 100% at 20% 0%, #000, transparent 75%);
            mask-image: radial-gradient(100% 100% at 20% 0%, #000, transparent 75%);
}
body.rd .site-footer > .container { position: relative; z-index: 1; }

/* ============================================================
   PRODUCT-UI COMPONENT LIBRARY (namespaced .card-ui / .cui-*)
   Shared with the homepage; reused here for embedded mini UIs.
   Only loaded on rd pages, so safe to leave unscoped.
   ============================================================ */
.card-ui { background: #F6F8FC; border: 1px solid #E7ECF3; border-radius: 12px; padding: 12px 14px; margin-top: 18px; font-family: 'DM Sans', sans-serif; }
.cui-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #EBEFF5; font-size: 12.5px; color: var(--muted); }
.cui-row:last-of-type { border-bottom: 0; }
.cui-v { color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.cui-tag { font-size: 10.5px; font-weight: 600; color: var(--green); background: var(--green-bg); padding: 3px 8px; border-radius: 12px; }
.cui-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--navy); }
.cui-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* nav bar follows the cool hero on redesigned pages (was hard-coded warm) */
body.rd .site-nav { background: rgba(242, 246, 251, 0.92); }