/**
 * Closo Wholesale — the three auction explainer pages (2026-08-20):
 * /wholesale/watching · /wholesale/bidding · /wholesale/winning.
 * `wag-` prefix, loaded ONLY by those documents, AFTER
 * wholesale-market-landing.css.
 *
 * Deliberately SMALL. The pages wear the approved landing vocabulary — hero,
 * stat strip, split panels with math rows, numbered steps, two-column yes/no
 * lists, FAQ accordion, closing band — the same tokens and rhythm as
 * /wholesale/insider, /wholesale/protection and /wholesale/refer. What lives
 * here is only what those three do not have: the cross-page nav and the hero
 * figure panel.
 */

/* ── The set's own nav. Three pages that never mention each other would be
 *    three orphans; this is what makes them a set. ── */
.wag-nav {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  max-width: 1120px; margin: 0 auto; padding: 22px 32px 0;
}
.wag-nav-i {
  font-size: 13px; font-weight: 600; color: #556070;
  padding: 7px 14px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wag-nav-i:hover { color: #452B90; background: #F4F2FA; }
.wag-nav-i.is-here { color: #1A202C; background: #fff; border-color: #E4E2EE; }

/* ── The hero figure. One panel, three faces: each page leads with the single
 *    number that page is about, so they read as a family without being copies. ── */
.wag-visual {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; min-height: 300px; border-radius: 20px; padding: 40px 32px;
  color: #fff; text-align: center;
}
.wag-visual-l { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.wag-visual-n {
  font-family: "JetBrains Mono", monospace; font-size: clamp(46px, 7vw, 76px);
  font-weight: 700; line-height: 1; letter-spacing: -0.03em;
}
.wag-visual-x { font-size: 13.5px; color: rgba(255,255,255,.78); max-width: 26ch; }

/* Watching — open, daylight. */
.wag-visual-watch {
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(255, 255, 255, .16), transparent 62%),
    linear-gradient(160deg, #3E2C7A 0%, #6A54B8 100%);
}
/* Bidding — the clock, tense. */
.wag-visual-bid {
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(255, 255, 255, .14), transparent 62%),
    linear-gradient(160deg, #1A202C 0%, #2B1A5E 100%);
}
/* Winning — settled. */
.wag-visual-win {
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(255, 255, 255, .15), transparent 62%),
    linear-gradient(160deg, #12603A 0%, #1D8B54 100%);
}

@media (max-width: 760px) {
  .wag-nav { padding: 18px 18px 0; }
  .wag-visual { min-height: 210px; padding: 30px 22px; }
}