/* Why Choose Neo.
 *
 * A plain grid: three across, two rows. No pin, no scroll animation — the
 * section is read, not performed.
 *
 * Accent colours are drawn only from the brand palette. An earlier version
 * used a teal and a yellow to differentiate the cards; neither appears
 * anywhere else on the site, and introducing colours for the sake of variety
 * is how a palette stops meaning anything.
 */
.whyp{
  position:relative;
  background:var(--night,#0B0410);
  color:#FBF7FE;
  background-image:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(101,45,134,.22),transparent 62%);
  padding:clamp(52px,7vw,96px) 0;
}
.whyp-stage{position:relative}

/* No section-header overrides.
 *
 * The theme already defines .section-head, .section-label and h2.section-h2
 * globally — 96px bottom margin, left aligned, a 0.32em label in orange and
 * a heading that scales to 82px. This section previously restated all three
 * at roughly half the size and centred, so it did not match any other band
 * on the page. Inheriting is the fix; the only thing worth stating here is
 * the accent colour inside the heading. */
.whyp .section-h2 .accent{color:var(--nc-magenta,#F64477)}

.whyp-deck{
  width:min(1180px,92%);margin:0 auto;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
  align-items:stretch;
}
.whyp-deck > .wcp{grid-column:span 2}
.whyp-deck > .wcp:nth-child(4),
.whyp-deck > .wcp:nth-child(5){grid-column:span 3}

/* The wider pair has room for a two-column interior, so the extra width
   goes to content rather than to longer lines. */
.wcp:nth-child(4) .wcp-more,
.wcp:nth-child(5) .wcp-more{grid-template-columns:1fr 1fr;gap:8px 22px}

.wcp{
  --acc:var(--nc-magenta,#F64477);
  /* On a near-black page a card is defined by its EDGE, not its fill.
     Any fill dark enough to sit in this palette lands within ~1.1:1 of the
     background — imperceptible. So the border does the work: a visible
     hairline plus a lighter surface, together giving the card a readable
     boundary. */
  background:#241634;
  border:1px solid rgba(251,247,254,.28);
  border-radius:16px;
  box-shadow:0 20px 46px -24px rgba(0,0,0,.85);
  padding:clamp(22px,2.2vw,28px);
  display:flex;flex-direction:column;
  transition:border-color .3s ease, background .3s ease;
}
.wcp:hover{border-color:var(--acc);background:#2C1B40}
@supports not (border-color: color-mix(in srgb, red 50%, blue)){
  .wcp:hover{border-color:rgba(251,247,254,.32)}
}

/* Only brand colours. Magenta, purple and the dawn orange — the three that
   already appear across the site. */
.wcp:nth-child(1){--acc:var(--nc-magenta,#F64477)}
.wcp:nth-child(2){--acc:#B983E0}
.wcp:nth-child(3){--acc:var(--nc-orange,#FF9E6B)}
.wcp:nth-child(4){--acc:var(--nc-magenta,#F64477)}
.wcp:nth-child(5){--acc:#B983E0}

.wcp-ic{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:rgba(251,247,254,.10);color:var(--acc);margin-bottom:18px;flex:none;
}
.wcp-ic svg{width:19px;height:19px}

.wcp-lbl{
  font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(251,247,254,.42);
}
.wcp h3{
  font-family:var(--font-display,"Poppins",sans-serif);font-weight:600;
  letter-spacing:-.02em;font-size:1.06rem;line-height:1.26;
  margin:9px 0 10px;color:#fff;              /* headings stay white */
}
.wcp p{margin:0 0 18px;font-size:13px;line-height:1.62;color:rgba(251,247,254,.62);flex:1}

/* The lead figure carries the accent; everything else is white or grey. */
.wcp-lead{padding-top:15px;border-top:1px solid rgba(251,247,254,.16)}
.wcp-lead b{
  display:block;font-family:var(--font-display,"Poppins",sans-serif);font-weight:700;
  letter-spacing:-.03em;line-height:1;font-size:clamp(1.5rem,2.2vw,1.85rem);
  color:var(--acc);font-variant-numeric:tabular-nums;
}
.wcp-lead span{
  display:block;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(251,247,254,.5);margin-top:7px;
}

.wcp-more{margin-top:14px;display:grid;gap:8px}
.wcp-row{display:flex;align-items:baseline;gap:10px}
.wcp-rn{
  font-family:var(--font-display,"Poppins",sans-serif);font-weight:600;
  font-size:.9rem;color:#fff;flex:none;font-variant-numeric:tabular-nums;
}
.wcp-rl{font-size:11.5px;line-height:1.45;color:rgba(251,247,254,.48)}

.whyp-count{display:none}   /* the deal counter has no job in a static grid */

@media (max-width:940px){
  .whyp-deck{grid-template-columns:repeat(2,minmax(0,1fr))}
  .whyp-deck > .wcp,
  .whyp-deck > .wcp:nth-child(4),
  .whyp-deck > .wcp:nth-child(5){grid-column:span 1}
  /* Five cards over two columns leaves one alone on the last row —
     let it take the full width rather than sit half-empty. */
  .whyp-deck > .wcp:nth-child(5){grid-column:span 2}
  .wcp:nth-child(5) .wcp-more{grid-template-columns:1fr 1fr;gap:8px 22px}
}
@media (max-width:600px){
  .whyp-deck{grid-template-columns:1fr;gap:12px}
  .whyp-deck > .wcp,
  .whyp-deck > .wcp:nth-child(4),
  .whyp-deck > .wcp:nth-child(5){grid-column:span 1}
  .wcp:nth-child(5) .wcp-more{grid-template-columns:1fr}
  .wcp{padding:22px}
}