/* ============================================================
   HOMEPAGE — COUNT → TRACK → OPERATE PILLAR BAND
   ------------------------------------------------------------
   Three editorial cards naming the product's three-depth arc.
   Uses v2-editorial tokens (--ink / --cream / --accent / --rule …)
   so it themes in light + dark automatically.
   ============================================================ */
.v2-pillars{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.25rem;
    margin-top:2.5rem;
}

.v2-pillar{
    position:relative;
    display:flex;flex-direction:column;
    padding:1.6rem 1.6rem 1.75rem;
    background:var(--cream);
    border:1px solid var(--rule-strong);
    box-shadow:8px 8px 0 color-mix(in srgb, var(--ink) 6%, transparent);
    transition:transform .18s ease, box-shadow .18s ease;
}
.v2-pillar:hover{
    transform:translate(-3px,-3px);
    box-shadow:11px 11px 0 color-mix(in srgb, var(--ink) 9%, transparent);
}

/* Connector arrows between the three cards (desktop only). */
.v2-pillar + .v2-pillar::before{
    content:"→";
    position:absolute;left:-1.05rem;top:2.1rem;
    transform:translateX(-50%);
    font-family:'Fraunces',Georgia,serif;font-size:1.1rem;
    color:var(--muted);
    z-index:2;
}

.v2-pillar-top{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:1.1rem;
}
.v2-pillar-num{
    font-size:1.5rem;font-weight:800;line-height:1;
    color:var(--rule-strong);letter-spacing:-.02em;
}
.v2-pillar-ic{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 44px;
    color:var(--accent-deep);
    background:var(--accent-soft);
    border-radius:10px;
}
.v2-pillar-ic svg{width:24px;height:24px;display:block}

.v2-pillar-name{
    font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1;
    color:var(--ink);margin:0 0 .35rem;
}
.v2-pillar-slogan{
    font-style:italic;font-family:'Fraunces',Georgia,serif;
    font-size:1.0625rem;color:var(--accent-deep);
    margin:0 0 1.1rem;
}

.v2-pillar-list{
    list-style:none;margin:0 0 1.5rem;padding:0;
    display:flex;flex-direction:column;gap:.6rem;
    flex:1 1 auto;
}
.v2-pillar-list li{
    position:relative;padding-left:1.4rem;
    font-size:.9375rem;line-height:1.4;color:var(--muted);
}
.v2-pillar-list li::before{
    content:"";position:absolute;left:0;top:.5rem;
    width:8px;height:2px;background:var(--accent);
}

.v2-pillar-link{
    display:inline-flex;align-items:center;gap:.4rem;
    align-self:flex-start;
    font-family:'Inter',sans-serif;font-size:.9375rem;font-weight:600;
    color:var(--ink);text-decoration:none;
    padding-bottom:2px;border-bottom:2px solid var(--accent);
    transition:gap .15s ease, color .15s ease;
}
.v2-pillar-link:hover{gap:.7rem;color:var(--accent-deep)}

/* Operate is the pillar the rebrand wants to elevate — give it the accent frame. */
.v2-pillar-operate{
    background:linear-gradient(180deg, var(--accent-soft) 0%, var(--cream) 55%);
    border-color:var(--accent);
}
.v2-pillar-operate .v2-pillar-num{color:color-mix(in srgb, var(--accent) 55%, transparent)}
.v2-pillar-link-strong{
    background:var(--ink);color:var(--cream);
    border-bottom:0;padding:.7rem 1.15rem;
}
.v2-pillar-link-strong:hover{background:var(--accent-deep);color:#fff;gap:.7rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
    .v2-pillars{grid-template-columns:1fr;gap:1rem;margin-top:2rem}
    .v2-pillar{padding:1.35rem 1.35rem 1.5rem;box-shadow:6px 6px 0 color-mix(in srgb, var(--ink) 6%, transparent)}
    /* Stack vertically → arrows point down between cards. */
    .v2-pillar + .v2-pillar::before{
        content:"↓";left:2.1rem;top:-1rem;transform:translateY(-50%);
    }
    .v2-pillar-list{margin-bottom:1.25rem}
}

@media(max-width:420px){
    .v2-pillar-name{font-size:1.5rem}
}