/*==========================================================
    REVLO — DASHBOARD SHOWCASE
    Scoped under .rd-section so nothing here can leak into or
    be overridden by the rest of the page's CSS.
==========================================================*/

.rd-section{
    /* ---- design tokens (brand red kept from the original) ---- */
    --rd-brand:#FF3B3B;
    --rd-brand-dark:#E5342E;
    --rd-brand-light:#FF6A5A;
    --rd-brand-soft:#FFF1F0;
    --rd-ink:#17130F;
    --rd-ink-soft:#6B6560;
    --rd-line:rgba(23,19,15,.08);
    --rd-paper:#FFFFFF;
    --rd-surface:#FCFAF8;

    --rd-font-display:'Fraunces', Georgia, 'Times New Roman', serif;
    --rd-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rd-font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    position:relative;
    background:var(--rd-surface);
    padding:clamp(64px, 9vw, 140px) 0;
    overflow:hidden;
    color:var(--rd-ink);
}

.rd-section *{
    box-sizing:border-box;
}

/* ---- ambient background blobs ---- */
.rd-blob{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}
.rd-blob--a{
    top:-220px;
    right:-160px;
    width:600px;
    height:600px;
    background:radial-gradient(circle, rgba(255,59,59,.08), transparent 70%);
}
.rd-blob--b{
    bottom:-240px;
    left:-200px;
    width:520px;
    height:520px;
    background:radial-gradient(circle, rgba(255,59,59,.05), transparent 70%);
}

.rd-container{
    position:relative;
    z-index:2;
    max-width:1320px;
    margin:0 auto;
    padding:0 24px;
}

/*==================================
    GRID
    - Both columns are top-aligned.
    - Right column's callouts live
      entirely inside its own box,
      so column mismatch can never
      turn into a sideways overlap.
==================================*/

.rd-grid{
    display:grid;
    grid-template-columns:minmax(0,480px) minmax(0,1fr);
    gap:clamp(40px, 5vw, 90px);
    align-items:start;
}

/*==================================
    LEFT — INTRO
==================================*/

.rd-intro{
    min-width:0;
}

.rd-eyebrow{
    display:inline-flex;
    align-items:center;
    padding:11px 20px;
    border-radius:100px;
    background:var(--rd-brand-soft);
    border:1px solid rgba(255,59,59,.18);
    color:var(--rd-brand-dark);
    font-family:var(--rd-font-mono);
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.rd-headline{
    margin:24px 0 20px;
    font-family:var(--rd-font-display);
    font-size:clamp(2.1rem, 3.2vw, 3.15rem);
    line-height:1.1;
    font-weight:500;
    letter-spacing:-.01em;
    color:var(--rd-ink);
}

.rd-lede{
    margin:0 0 36px;
    font-family:var(--rd-font-body);
    font-size:1.05rem;
    line-height:1.75;
    color:var(--rd-ink-soft);
    max-width:44ch;
}

/*==================================
    FEATURES — 2-col grid keeps this
    column roughly the same height
    as the dashboard panel, instead
    of a single tall stack.
==================================*/

.rd-features{
    list-style:none;
    margin:0 0 36px;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.rd-feature{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    background:var(--rd-paper);
    border:1px solid var(--rd-line);
    border-radius:14px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.rd-feature:hover{
    transform:translateY(-4px);
    border-color:rgba(255,59,59,.24);
    box-shadow:0 16px 32px rgba(255,59,59,.10);
}

.rd-feature__icon{
    flex-shrink:0;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:linear-gradient(135deg, var(--rd-brand), var(--rd-brand-light));
    color:#fff;
    font-size:.9rem;
    box-shadow:0 10px 18px rgba(255,59,59,.22);
}

.rd-feature__label{
    font-family:var(--rd-font-body);
    font-size:.88rem;
    font-weight:600;
    line-height:1.3;
    color:var(--rd-ink);
}

/*==================================
    CTA
==================================*/

.rd-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 28px;
    border-radius:12px;
    background:var(--rd-brand);
    color:#fff;
    font-family:var(--rd-font-body);
    font-weight:700;
    font-size:.96rem;
    text-decoration:none;
    box-shadow:0 16px 32px rgba(255,59,59,.28);
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.rd-cta:hover{
    transform:translateY(-3px);
    background:var(--rd-brand-dark);
    box-shadow:0 20px 40px rgba(255,59,59,.34);
}

.rd-cta:focus-visible{
    outline:2px solid var(--rd-brand-dark);
    outline-offset:3px;
}

.rd-cta i{
    transition:transform .25s ease;
}

.rd-cta:hover i{
    transform:translateX(3px);
}

/*==================================
    RIGHT — PANEL
    Padding here is what gives the
    callouts room to peek over the
    dash card's edge without ever
    leaving the panel's own box.
==================================*/

.rd-panel{
    position:relative;
    min-width:0;
    padding:30px 18px;
}

.rd-dash{
    position:relative;
    z-index:2;
    background:var(--rd-paper);
    border-radius:26px;
    border:1px solid var(--rd-line);
    overflow:hidden;
    box-shadow:
        0 30px 70px rgba(23,19,15,.10),
        0 10px 30px rgba(255,59,59,.08);
    transition:transform .4s ease, box-shadow .4s ease;
}

.rd-dash:hover{
    transform:translateY(-6px);
    box-shadow:
        0 40px 85px rgba(23,19,15,.13),
        0 16px 36px rgba(255,59,59,.14);
}

/*=============================
    DASH HEADER
=============================*/

.rd-dash__header{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:28px;
    background:linear-gradient(135deg, var(--rd-brand), var(--rd-brand-light));
    color:#fff;
    overflow:hidden;
}

.rd-dash__header::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    right:-100px;
    top:-100px;
    background:rgba(255,255,255,.08);
}

.rd-dash__title{
    position:relative;
    margin:0;
    font-family:var(--rd-font-display);
    font-size:1.55rem;
    font-weight:500;
}

.rd-dash__plate{
    position:relative;
    margin:6px 0 0;
    font-family:var(--rd-font-mono);
    font-size:.82rem;
    letter-spacing:.06em;
    opacity:.92;
}

.rd-dash__status{
    position:relative;
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(12px);
    font-family:var(--rd-font-body);
    font-size:.82rem;
    font-weight:700;
    white-space:nowrap;
}

.rd-dash__status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#8CFF8C;
    box-shadow:0 0 10px rgba(140,255,140,.8);
}

/*=============================
    STATS
=============================*/

.rd-dash__stats{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    padding:24px;
}

.rd-stat{
    position:relative;
    padding:16px 16px 16px 18px;
    background:var(--rd-surface);
    border-radius:14px;
    overflow:hidden;
}

.rd-stat::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:var(--rd-stat-color, var(--rd-brand));
}

.rd-stat__label{
    margin:0 0 8px;
    font-family:var(--rd-font-body);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--rd-ink-soft);
}

.rd-stat__value{
    margin:0;
    font-family:var(--rd-font-mono);
    font-size:1.18rem;
    font-weight:700;
    color:var(--rd-ink);
    white-space:nowrap;
}

.rd-stat__value--text{
    font-family:var(--rd-font-body);
    font-size:1.05rem;
}

/*=============================
    CHART
=============================*/

.rd-dash__chart{
    padding:6px 24px 26px;
}

.rd-chart__head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:22px;
}

.rd-chart__head h4{
    margin:0;
    font-family:var(--rd-font-body);
    font-size:.92rem;
    font-weight:700;
    color:var(--rd-ink);
}

.rd-chart__head span{
    font-family:var(--rd-font-body);
    font-size:.74rem;
    font-weight:600;
    color:var(--rd-ink-soft);
}

.rd-bars{
    height:180px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    padding-bottom:26px;
    position:relative;
}

.rd-bars::before{
    content:"";
    position:absolute;
    inset:0 0 26px 0;
    background:repeating-linear-gradient(
        to top,
        rgba(23,19,15,.05) 0,
        rgba(23,19,15,.05) 1px,
        transparent 1px,
        transparent 36px
    );
    pointer-events:none;
}

.rd-bar{
    position:relative;
    flex:1;
    height:var(--rd-h);
    min-width:0;
    border-radius:10px 10px 4px 4px;
    background:linear-gradient(180deg, var(--rd-brand-light), var(--rd-brand));
    transform:scaleY(0);
    transform-origin:bottom;
    transition:transform .7s cubic-bezier(.16,1,.3,1), filter .25s ease;
    transition-delay:calc(var(--rd-i, 0) * 70ms);
}

.rd-section.rd-inview .rd-bar{
    transform:scaleY(1);
}

.rd-bar:hover{
    filter:brightness(1.08);
}

.rd-bar__month{
    position:absolute;
    bottom:-24px;
    left:50%;
    transform:translateX(-50%);
    font-family:var(--rd-font-body);
    font-size:.72rem;
    font-weight:600;
    color:var(--rd-ink-soft);
    white-space:nowrap;
}

/*=============================
    CALLOUTS
    Positioned relative to .rd-panel
    (not .rd-dash) with only positive
    inset values horizontally, so
    they can never cross into the
    left column.
=============================*/

.rd-callout{
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    gap:12px;
    max-width:200px;
    padding:16px 18px;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.7);
    border-radius:18px;
    box-shadow:
        0 20px 45px rgba(23,19,15,.10),
        0 8px 18px rgba(255,59,59,.08);
    transition:transform .3s ease, box-shadow .3s ease;
}

.rd-callout:hover{
    transform:translateY(-5px);
    box-shadow:0 26px 55px rgba(255,59,59,.16);
}

.rd-callout__icon{
    flex-shrink:0;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--rd-brand-soft);
    color:var(--rd-brand);
    font-size:.9rem;
}

.rd-callout__label{
    margin:0 0 4px;
    font-family:var(--rd-font-body);
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--rd-ink-soft);
}

.rd-callout__value{
    margin:0;
    font-family:var(--rd-font-mono);
    font-size:1.15rem;
    font-weight:700;
    color:var(--rd-ink);
    white-space:nowrap;
}

.rd-callout--mileage{
    top:0;
    left:24px;
    transform:translateY(-42%);
}

.rd-callout--savings{
    bottom:0;
    right:24px;
    transform:translateY(42%);
}

.rd-callout--savings .rd-callout__icon{
    color:#00A876;
    background:#E8FBF4;
}

.rd-callout--savings:hover{
    transform:translateY(calc(42% - 5px));
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media (max-width:1100px){
    .rd-grid{
        grid-template-columns:1fr;
    }
    .rd-intro{
        max-width:640px;
        margin:0 auto;
        text-align:center;
    }
    .rd-lede{
        margin-left:auto;
        margin-right:auto;
    }
    .rd-features{
        text-align:left;
        max-width:520px;
        margin-left:auto;
        margin-right:auto;
    }
    .rd-panel{
        max-width:640px;
        margin:0 auto;
    }
}

@media (max-width:640px){
    .rd-headline{ font-size:1.9rem; }
    .rd-features{ grid-template-columns:1fr; }
    .rd-dash__stats{ grid-template-columns:repeat(2, 1fr); }
    .rd-callout{
        max-width:150px;
        padding:12px 14px;
    }
    .rd-callout__value{ font-size:.98rem; }
    .rd-callout--mileage{ left:12px; }
    .rd-callout--savings{ right:12px; }
}

@media (max-width:420px){
    .rd-callout{ display:none; }
    .rd-panel{ padding:0; }
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion: reduce){
    .rd-bar{
        transition:none;
        transform:scaleY(1);
    }
    .rd-dash, .rd-feature, .rd-cta, .rd-callout{
        transition:none;
    }
}