/*==========================================================
    REVLO — OUR DIFFERENCE (premium dark treatment)
    Scoped under .df-section so nothing here can leak into or
    be overridden by the rest of the page's CSS.
    Same class names as before — HTML is unchanged.
==========================================================*/

.df-section{
    --df-brand:#FF3B3B;
    --df-brand-dark:#E5342E;
    --df-brand-light:#FF6A5A;
    --df-brand-soft:#FFF1F0;

    /* dark stage so the Revlo card can pop off the page */
    --df-bg:#0C0A09;
    --df-bg-soft:#151210;
    --df-ink:#F5F1EC;
    --df-ink-soft:rgba(245,241,236,.58);
    --df-ink-faint:rgba(245,241,236,.34);
    --df-line:rgba(245,241,236,.10);
    --df-paper:#FFFFFF;

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

    position:relative;
    background:
        radial-gradient(circle at 18% 20%, rgba(255,59,59,.16), transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(255,59,59,.10), transparent 45%),
        linear-gradient(180deg, var(--df-bg), var(--df-bg-soft));
    padding:clamp(64px, 9vw, 140px) 0;
    color:var(--df-ink);
    overflow:hidden;
}

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

/* faint dot grid for texture — very premium-SaaS-at-night feel */
.df-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:26px 26px;
    mask-image:radial-gradient(circle at 50% 30%, black 0%, transparent 72%);
    pointer-events:none;
}

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

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

.df-header{
    max-width:640px;
    margin:0 auto 84px;
    text-align:center;
}

.df-eyebrow{
    display:inline-flex;
    align-items:center;
    padding:11px 22px;
    border-radius:100px;
    background:rgba(255,59,59,.10);
    border:1px solid rgba(255,59,59,.30);
    color:#FF8A7E;
    font-family:var(--df-font-mono);
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    box-shadow:0 0 24px rgba(255,59,59,.18);
}

.df-heading{
    margin:24px 0 18px;
    font-family:var(--df-font-display);
    font-size:clamp(2.1rem, 3.6vw, 3.1rem);
    line-height:1.15;
    font-weight:500;
    letter-spacing:-.01em;
    color:var(--df-ink);
}

.df-sub{
    margin:0;
    font-family:var(--df-font-body);
    font-size:1.06rem;
    line-height:1.75;
    color:var(--df-ink-soft);
}

/*==========================================================
    COMPARE TABLE
    Three columns (label / traditional / revlo) built as a
    grid of grids: the outer grid defines the row tracks once,
    each column subgrids those exact rows, so every category
    lines up perfectly with zero manual height math.
==========================================================*/

.df-compare{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: minmax(140px, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
    grid-template-rows: auto repeat(6, auto);
    column-gap:20px;
}

.df-col{
    display:grid;
    grid-row:1 / -1;
    grid-template-rows:subgrid;
    row-gap:0;
}

/* Explicit column placement for all three — required because the
   VS badge below also explicitly occupies column 3's full row
   span; without this, auto-placement would have no free cell for
   the Revlo column in row 1 and would silently create an extra
   implicit 4th column to fit it instead. */
.df-col--label{ grid-column:1; }
.df-col--old{ grid-column:2; }
.df-col--revlo{ grid-column:3; }

/* Fallback for browsers without subgrid: rows just size to their
   own content — slightly less perfect alignment, still fully usable. */
@supports not (grid-template-rows: subgrid){
    .df-col{ grid-template-rows:auto; }
}

.df-cell{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--df-font-body);
    font-size:.96rem;
}

.df-cell--head{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding-bottom:22px;
}

.df-cell--head h3{
    margin:0;
    font-family:var(--df-font-display);
    font-size:1.5rem;
    font-weight:500;
}

/*==================================
    LABEL COLUMN
==================================*/

.df-col--label .df-cell{
    padding:17px 0;
    border-bottom:1px solid transparent;
    font-family:var(--df-font-mono);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--df-ink-faint);
}

/*==================================
    TRADITIONAL COLUMN
    Deliberately flat and washed out —
    barely lifts off the background,
    exactly the point being made.
==================================*/

.df-col--old{
    background:rgba(255,255,255,.025);
    border:1px solid var(--df-line);
    border-radius:22px;
    padding:28px 26px;
}

.df-col--old .df-cell--head h3{
    color:var(--df-ink-faint);
}

.df-col--old .df-cell{
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:var(--df-ink-faint);
}

.df-col--old .df-cell:last-child{
    border-bottom:none;
}

.df-col--old .df-cell i{
    flex-shrink:0;
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    color:var(--df-ink-faint);
    font-size:.68rem;
}

.df-col-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:13px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--df-line);
    color:var(--df-ink-faint);
    font-size:1rem;
}

/*==================================
    REVLO COLUMN — the premium card
    Bright, glass, glowing rotating
    gradient ring, floats above the
    traditional column.
==================================*/

.df-col--revlo{
    position:relative;
    isolation:isolate;
    z-index:2;
    border-radius:26px;
    padding:32px 28px;
    margin:-18px -8px;
    color:#17130F;
}

/* Layer 1 (bottom): the animated rotating gradient ring. Sized
   2px larger than the card on every side. */
.df-col--revlo::before{
    content:"";
    position:absolute;
    inset:-2px;
    z-index:-2;
    border-radius:inherit;
    background:conic-gradient(
        from 0deg,
        var(--df-brand),
        var(--df-brand-light),
        #FFD1CC,
        var(--df-brand-light),
        var(--df-brand)
    );
    animation:df-ring-spin 7s linear infinite;
}

/* Layer 2: the actual opaque card face, flush with the card's own
   edges (inset:0) — this sits on top of the ring and hides all of
   it except the 2px it overhangs by. Real content (headings, cells,
   icons, badge) are ordinary children, so they paint above both
   of these pseudo-elements regardless. */
.df-col--revlo::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,.7), transparent 40%),
        #FFFFFF;
    box-shadow:
        0 40px 90px rgba(0,0,0,.45),
        0 14px 34px rgba(255,59,59,.20),
        inset 0 1px 0 rgba(255,255,255,.6);
}

@keyframes df-ring-spin{
    to{ transform:rotate(360deg); }
}

.df-col--revlo .df-cell--head h3{
    font-family:var(--df-font-display);
    color:#17130F;
}

.df-col--revlo .df-cell{
    padding:12px 0;
    border-bottom:1px solid rgba(23,19,15,.08);
    font-weight:600;
    color:#17130F;
}

.df-col--revlo .df-cell:last-child{
    border-bottom:none;
}

.df-col--revlo .df-cell i{
    flex-shrink:0;
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg, var(--df-brand), var(--df-brand-light));
    color:#fff;
    font-size:.72rem;
    box-shadow:0 4px 10px rgba(255,59,59,.35);
}

.df-col-icon--revlo{
    background:linear-gradient(135deg, var(--df-brand), var(--df-brand-light));
    color:#fff;
    box-shadow:0 12px 24px rgba(255,59,59,.4);
}

.df-badge{
    position:absolute;
    top:-15px;
    right:26px;
    padding:8px 16px;
    border-radius:100px;
    background:linear-gradient(135deg, var(--df-brand), var(--df-brand-light));
    color:#fff;
    font-family:var(--df-font-mono);
    font-size:.64rem;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    box-shadow:0 14px 28px rgba(255,59,59,.45);
    z-index:3;
}

/*==================================
    VS BADGE
    Grid-line placed (not calc'd),
    so it always sits exactly on the
    boundary between the traditional
    and Revlo columns.
==================================*/

.df-vs{
    grid-column:3;
    grid-row:1 / -1;
    justify-self:start;
    align-self:center;
    transform:translate(-50%, 0);
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--df-bg-soft);
    border:1px solid rgba(255,59,59,.35);
    color:#fff;
    font-family:var(--df-font-mono);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.04em;
    box-shadow:
        0 0 0 6px var(--df-bg),
        0 10px 30px rgba(255,59,59,.35);
}

/*==================================
    SCROLL-REVEAL STATE
==================================*/

.df-col--revlo .df-cell i,
.df-col--old .df-cell i{
    opacity:0;
    transform:scale(.4);
    transition:opacity .4s ease, transform .4s ease;
}

.df-section.df-inview .df-cell i{
    opacity:1;
    transform:scale(1);
}

.df-col--old .df-cell:nth-child(2) i, .df-col--revlo .df-cell:nth-child(2) i{ transition-delay:0ms; }
.df-col--old .df-cell:nth-child(3) i, .df-col--revlo .df-cell:nth-child(3) i{ transition-delay:90ms; }
.df-col--old .df-cell:nth-child(4) i, .df-col--revlo .df-cell:nth-child(4) i{ transition-delay:180ms; }
.df-col--old .df-cell:nth-child(5) i, .df-col--revlo .df-cell:nth-child(5) i{ transition-delay:270ms; }
.df-col--old .df-cell:nth-child(6) i, .df-col--revlo .df-cell:nth-child(6) i{ transition-delay:360ms; }
.df-col--old .df-cell:nth-child(7) i, .df-col--revlo .df-cell:nth-child(7) i{ transition-delay:450ms; }

/*==========================================================
    RESPONSIVE
    Below 860px the three-column table becomes a stack of
    per-category comparison cards — each one shows the label,
    then the traditional value, then the Revlo value.
    Above 860px the two cards always stay in one row.
==========================================================*/

@media (max-width:860px){

    .df-compare{
        display:flex;
        flex-direction:column;
        gap:16px;
    }

    .df-vs{ display:none; }

    .df-col--label{ display:none; }

    .df-col{
        display:block;
    }

    .df-col--old,
    .df-col--revlo{
        margin:0;
        border-radius:20px;
    }

    .df-col--revlo{
        order:-1; /* show Revlo first on mobile */
    }
}

@media (max-width:480px){
    .df-col--old, .df-col--revlo{
        padding:22px 20px;
    }
}

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

@media (prefers-reduced-motion: reduce){
    .df-col--revlo .df-cell i,
    .df-col--old .df-cell i{
        transition:none;
        opacity:1;
        transform:none;
    }
    .df-col--revlo::before{
        animation:none;
    }
}