/* ===========================================================================
   Why now — RD round 7, note 7. One eyebrow, one line, one paragraph.

   This file used to be 290 lines driving a wall of placement tiles and a
   scanner across it. The artwork is gone (see whynow.html): what is left is
   type, centred like every other section title on the page, at the shared
   --gv-h2 size so the headers all match.
   =========================================================================== */

/* RD round 7, in three passes: plain type on the pale ground had nothing to
   stand on, so this became a dark band; then the band was too tall; and then
   full-bleed put it hard against the (also dark) logo strip above it with a
   lot of empty ground below the copy.

   So it is a CARD now, not a band: inset from both edges with the site's own
   light ground showing equally left and right, rounded, and separated from the
   logo strip above by that same light gap. The section owns the gap, the card
   owns the dark. Ink and blooms are the hero's, so the two read as one system.
   =========================================================================== */
.whynow{
 --wn-ease:cubic-bezier(.16,1,.3,1);
 position:relative;
 z-index:2;
 background:transparent;              /* the site ground is the fixed .gv-aurora field */
 /* one value, so the light above and below the card is identical by construction */
 padding-block:clamp(32px,4vw,64px);
 padding-inline:clamp(20px,4vw,72px);
}

.wn-card{
 position:relative;
 max-width:1500px;
 margin:0 auto;
 border-radius:clamp(20px,2vw,30px);
 overflow:hidden;
 color:#fff;
 background:
  radial-gradient(ellipse 62% 74% at 6% -16%,#8b5cf647 0%,#6d34d41f 40%,transparent 72%),
  radial-gradient(ellipse 58% 70% at 96% 116%,#8b5cf63d 0%,#6d34d41a 42%,transparent 74%),
  linear-gradient(162deg,#1a1230 0%,#100b20 44%,#0a0717 100%);
 box-shadow:0 30px 80px -40px #17122099;
 /* the copy's own room inside the card: equal top and bottom again */
 padding-block:clamp(44px,5vw,76px);
 padding-inline:clamp(26px,4vw,72px);
}
/* the same still frame of grain as the hero, for the same reason: a large flat
   gradient on an 8-bit panel reads as plastic. Clipped to the card. */
.wn-card::after{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 opacity:.05;mix-blend-mode:soft-light;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
 background-size:180px 180px;
}

/* RD round 7: left-aligned, on the card's own left edge. The heading and the
   paragraph carry their own measures so neither runs to the full width. */
.wn-inner{position:relative;z-index:1;max-width:1180px;text-align:left}

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

.wn-eyebrow{margin:0 0 clamp(20px,2.4vw,30px)}

.wn-pill{
 display:inline-block;
 padding:8px 16px;
 border-radius:999px;
 font-size:var(--gv-eyebrow);        /* RD: the old 10px pill could not be read */
 font-weight:600;
 letter-spacing:.18em;
 text-transform:uppercase;
 color:#c9a6ff;
 background:#ffffff0f;
 box-shadow:inset 0 0 0 1px #ffffff26;
}

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

.wn-h{
 margin:0;
 max-width:min(100%,940px);   /* keeps the statement on two lines */
 font-size:var(--gv-h2);
 font-weight:700;
 letter-spacing:-.04em;
 line-height:1.06;
 color:#fff;
 text-wrap:balance;
}

.wn-body{
 margin:clamp(20px,2.2vw,28px) 0 0;
 max-width:64ch;
 font-size:clamp(15px,1.25vw,19px);
 line-height:1.6;
 color:#cbbfe0;
 text-wrap:pretty;
}

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

.whynow .wn-pill,
.whynow .wn-h,
.whynow .wn-body{
 opacity:0;
 transform:translateY(14px);
 transition:opacity .7s ease var(--wn-d,0s),transform .8s var(--wn-ease) var(--wn-d,0s);
}
.whynow .wn-h{--wn-d:.08s}
.whynow .wn-body{--wn-d:.16s}
.whynow.wn-in .wn-pill,
.whynow.wn-in .wn-h,
.whynow.wn-in .wn-body{opacity:1;transform:none}

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