/* ===========================================================================
   Why now — a connective, one-screen contrast.
   Left: the signal was there, dense and unread, going dark.
   Right: one signal resolves, and a human sets the direction.
   Every selector is namespaced .wn-* and lives under .whynow.
   =========================================================================== */

.whynow{
 --wn-ease:cubic-bezier(.16,1,.3,1);
 --wn-ink:#24202d;
 --wn-ink-dim:#5f566f;
 --wn-muted:#91889d;
 --wn-hair:#e8e5ed;
 --wn-purple:#7c3aed;
 position:relative;
 z-index:2;
 background:#f7f6fa;
 padding:clamp(72px,9vw,128px) 5vw;
 overflow:hidden;
 isolation:isolate;
}

.wn-inner{
 position:relative;
 z-index:1;
 width:100%;
 max-width:1500px;
 margin:0 auto;
}

/* accessible section heading; the pill carries it visually */
.wn-sr{
 position:absolute;
 width:1px;height:1px;
 padding:0;margin:-1px;
 overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
 white-space:nowrap;border:0;
}

/* ---------- eyebrow ---------- */

.wn-eyebrow{margin:0 0 clamp(34px,4vw,52px);overflow:hidden}

.wn-pill{
 display:inline-block;
 padding:6px 12px;
 border-radius:999px;
 font-size:10px;
 font-weight:600;
 letter-spacing:.2em;
 text-transform:uppercase;
 color:#6b3fd6;
 background:#fff;
 box-shadow:inset 0 0 0 1px #7c3aed22,0 1px 0 #fff;
}

/* ---------- the two columns ---------- */

.wn-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:clamp(40px,5.5vw,88px);
 align-items:start;
}

.wn-col{
 position:relative;
 min-width:0;
}

/* hairline between the two statements */
.wn-col-b::before{
 content:"";
 position:absolute;
 left:calc(-1 * clamp(20px,2.75vw,44px));
 top:6px;
 bottom:6px;
 width:1px;
 background:linear-gradient(180deg,#e8e5ed00,#ddd7e6 22%,#ddd7e6 78%,#e8e5ed00);
}

/* ---------- the artwork ---------- */

.wn-art{
 position:relative;
 max-width:640px;
 margin:0 0 clamp(26px,2.6vw,34px);
 border-radius:12px;
}

.wn-svg{
 display:block;
 width:100%;
 height:auto;
 overflow:visible;
}

/* the ad wall: one card per ad, aspect ratio tells the platform apart */
.wn-cd{
 fill:none;
 stroke:#d9d3e4;
 stroke-width:1;
}

.wn-card{color:#a398b1}
.wn-card-brand .wn-cd{fill:#e4dfee}
.wn-card-brand{color:#8d81a1}

.wn-ic{
 fill:none;
 stroke:currentcolor;
 stroke-width:1.2;
 stroke-linecap:round;
 stroke-linejoin:round;
 opacity:.85;
}

.wn-ic .wn-fill{fill:currentcolor;stroke:none}

/* right: the same wall, read. Green worked, red didn't. */
.wn-col-b .wn-cd{stroke:#eae7ef}
.wn-col-b .wn-card{color:#cdc7d6}
.wn-col-b .wn-card-brand .wn-cd{fill:#f1eef6}
.wn-col-b .wn-card-brand{color:#c0b9cc}

.wn-card-win .wn-cd{fill:#e7f6f1;stroke:#1e9678}
.wn-col-b .wn-card-win{color:#1e9678}

.wn-card-lose .wn-cd{fill:#fdeaee;stroke:#d9435e}
.wn-col-b .wn-card-lose{color:#d9435e}

.wn-bloom{
 position:absolute;
 z-index:0;
 left:50%;
 top:46%;
 width:62%;
 aspect-ratio:1.6;
 transform:translate(-50%,-50%);
 border-radius:50%;
 background:radial-gradient(circle,#a78bfa38,transparent 66%);
 filter:blur(30px);
 pointer-events:none;
}

/* ---------- key ---------- */

.wn-key{
 display:flex;
 flex-wrap:wrap;
 gap:6px 18px;
 margin:14px 0 0;
 font-family:ui-monospace,Menlo,monospace;
 font-size:10px;
 letter-spacing:.12em;
 text-transform:uppercase;
 color:#8f849d;
}

.wn-k{display:inline-flex;align-items:center;gap:7px}

.wn-k::before{
 content:"";
 width:10px;
 height:10px;
 border-radius:2px;
 background:#e4dfee;
 box-shadow:inset 0 0 0 1px #d9d3e4;
}

.wn-k-comp::before{background:#fff}
.wn-k-win::before{background:#e7f6f1;box-shadow:inset 0 0 0 1px #1e9678}
.wn-k-lose::before{background:#fdeaee;box-shadow:inset 0 0 0 1px #d9435e}

/* ---------- copy ---------- */

.wn-h{
 margin:0;
 font-size:clamp(21px,2.05vw,29px);
 font-weight:600;
 letter-spacing:-.035em;
 line-height:1.14;
 color:#5a5268;
 text-wrap:balance;
}

.wn-h-lit{color:var(--wn-ink)}

.wn-p{
 margin:14px 0 0;
 font-size:clamp(14px,1vw,16px);
 line-height:1.6;
 color:var(--wn-muted);
 max-width:44ch;
}

.wn-col-b .wn-p{color:var(--wn-ink-dim)}

/* ---------- entry reveal ---------- */

.whynow .wn-pill,
.whynow .wn-art,
.whynow .wn-h,
.whynow .wn-p{
 opacity:0;
 transform:translateY(14px);
 transition:opacity .7s ease var(--wn-d,0s),transform .8s var(--wn-ease) var(--wn-d,0s);
}

.whynow .wn-pill{transform:translateY(110%)}

.whynow.wn-in .wn-pill,
.whynow.wn-in .wn-art,
.whynow.wn-in .wn-h,
.whynow.wn-in .wn-p{opacity:1;transform:none}

.whynow .wn-col-a .wn-art{--wn-d:.12s}
.whynow .wn-col-a .wn-h{--wn-d:.20s}
.whynow .wn-col-a .wn-p{--wn-d:.28s}
.whynow .wn-col-b .wn-art{--wn-d:.30s}
.whynow .wn-col-b .wn-h{--wn-d:.38s}
.whynow .wn-col-b .wn-p{--wn-d:.46s}

/* ---------- responsive ---------- */

@media(max-width:900px){
 .wn-grid{grid-template-columns:1fr;gap:clamp(44px,8vw,64px)}
 .wn-col-b::before{
  left:0;right:0;top:calc(-1 * clamp(22px,4vw,32px));bottom:auto;
  width:auto;height:1px;
  background:linear-gradient(90deg,#e8e5ed00,#ddd7e6 18%,#ddd7e6 82%,#e8e5ed00);
 }
 .wn-h{font-size:clamp(22px,5.6vw,28px)}
 .wn-p{max-width:52ch}
}

@media(prefers-reduced-motion:reduce){
 .whynow .wn-pill,
 .whynow .wn-art,
 .whynow .wn-h,
 .whynow .wn-p{opacity:1;transform:none;transition:none}
}