/**
 * Closo Wholesale — feature landing pages (stream L1, 2026-08-19; visual
 * elevation pass L2, 2026-08-19). `wml-` prefix, loaded ONLY by the landing
 * documents (/wholesale/insider, /wholesale/protection) via the chrome's
 * meta['css'] hook — the shared chrome keeps its own sheets.
 *
 * Same token vocabulary as wholesale-market.css (the approved rev-4 look):
 * #452B90 accent · #1A202C ink · #556070 muted · #E4E2EE hairlines ·
 * #FAFAFC panel bg · Poppins display / Inter text / JetBrains Mono numbers ·
 * NO scrims, generous whitespace.
 *
 * SIBLING ANATOMY (operator 2026-08-19): section shapes mirror the closo.co
 * Shopify marketing pages (/pages/for-liquidators `.cwl-*`, /pages/direct
 * `.cdl-*`) so a visitor moving closo.co → shop.closo.co sees one family:
 * gradient hero (their radial pair at 78%/-10% + 8%/0%), eyebrow pill with a
 * live dot, display type clamp(34px,5vw,54px), 64px section rhythm on a
 * hairline, section heads clamp(26px,3.4vw,36px), pill CTAs (radius 999,
 * 13px/26px padding), the lifted-card shadow 0 24px 48px -18px
 * rgba(69,43,144,·), the connected step timeline (.cwl-rst), green/red round
 * icon chips (.cwl-pi.y/.n), FAQ as bordered accordion cards (.cdl-faq),
 * and a brand closing band with inverted buttons (.cdl-final).
 *
 * Layout rule: every grid track is minmax(0, 1fr) and the page body must
 * never scroll horizontally — wide content wraps or stacks (360px-first).
 */

.wml {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 72px;
  color: #1A202C;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}
/* [hidden] must beat any display the classes below set (the surface's
 * known display-beats-hidden defect class — the .wmb-suggest lesson). */
.wml [hidden] { display: none !important; }

:where(.wml) a { color: inherit; } /* :where = zero specificity, so component
   colors (e.g. .wm-btn-solid's white) are never outranked — the exact bug
   class the catalog already fixed once (buttons unreadable until hover). */

/* CTA pills — the closo.co .cwl-btn shape, scoped over the chrome buttons. */
.wml .wm-btn-solid,
.wml .wm-btn-ghost {
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 15.5px;
  font-weight: 600;
}
.wml .wm-btn-solid { box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); }
.wml .wm-btn-solid:active { transform: translateY(1px); }

/* ── hero — layered gradient panel (the closo.co .cwl-hero pair) ────── */
.wml-hero {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  padding: 56px 48px 52px;
  border: 1px solid #E4E2EE;
  border-radius: 20px;
  background:
    radial-gradient(1000px 460px at 78% -10%, rgba(108, 64, 181, .14), transparent 60%),
    radial-gradient(700px 380px at 8% 0%, rgba(69, 43, 144, .08), transparent 55%),
    linear-gradient(180deg, #F4F2FA 0%, #FFFFFF 72%);
}
.wml-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
}
.wml-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #452B90;
  background: rgba(69, 43, 144, .06);
  border: 1px solid rgba(69, 43, 144, .16);
  border-radius: 999px;
  padding: 7px 15px;
  margin: 0 0 18px;
}
.wml-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #15803d;
}
.wml-hero h1 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0 0 14px;
  max-width: 640px;
}
.wml-hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: #556070;
  max-width: 560px;
  margin: 0 0 26px;
}
.wml-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.wml-note {
  font-size: 13px;
  color: #556070;
  margin: 14px 0 0;
}

/* hero media — photo card with floating stat chips */
.wml-hero-media {
  position: relative;
  margin: 0;
}
.wml-hero-media img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #E4E2EE;
  box-shadow: 0 24px 48px -18px rgba(69, 43, 144, .22), 0 4px 12px rgba(16, 24, 40, .06);
}
.wml-chip {
  position: absolute;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: #fff;
  border: 1px solid #E4E2EE;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12.5px;
  color: #556070;
  box-shadow: 0 8px 20px -8px rgba(16, 24, 40, .18);
  white-space: nowrap;
}
.wml-chip b {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 14px;
  color: #452B90;
}
.wml-chip-a { top: 18px; left: -18px; }
.wml-chip-b { bottom: 22px; right: -12px; }

/* ── on-page payment panel (Stripe Elements) ───────────────────────── */
.wml-pay {
  margin-top: 22px;
  max-width: 460px;
  background: #fff;
  border: 1px solid #E4E2EE;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 24px 48px -18px rgba(69, 43, 144, .22), 0 4px 12px rgba(16, 24, 40, .06);
}
.wml-pay-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #E4E2EE;
}
.wml-pay-head b {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
}
.wml-pay-price {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 17px;
  color: #452B90;
  white-space: nowrap;
}
#wml-pay-el { margin: 0 0 16px; }
.wml-pay .wm-btn-solid {
  display: block;
  width: 100%;
  text-align: center;
}
.wml-pay-err {
  margin: 12px 0 0;
  font-size: 13px;
  color: #B14A4A;
}
.wml-pay-fine {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #556070;
}
.wml-pay-success { text-align: left; }
.wml-pay-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #15803d;
  margin-bottom: 10px;
}
.wml-pay-success b {
  display: block;
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 6px;
}
.wml-pay-success p {
  font-size: 14px;
  line-height: 1.6;
  color: #556070;
  margin: 0 0 16px;
}

/* ── big honest numbers strip ───────────────────────────────────────── */
.wml-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  border-bottom: 1px solid #E4E2EE;
  padding: 56px 0;
  text-align: center;
}
.wml-stat b {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 42px);
  letter-spacing: -.02em;
  color: #452B90;
}
.wml-stat span {
  display: block;
  margin: 8px auto 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #556070;
  max-width: 270px;
}

/* ── content sections — the closo.co 64px hairline rhythm ──────────── */
.wml-section {
  padding: 64px 0;
  border-bottom: 1px solid #E4E2EE;
}
.wml-section:last-of-type { border-bottom: 0; }
.wml-section h2 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  max-width: 760px;
}
.wml-section > p,
.wml-split-copy p {
  font-size: 15.5px;
  line-height: 1.65;
  color: #556070;
  margin: 0 0 12px;
  max-width: 640px;
}
.wml-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
/* Alternation: even sections put the panel first (the closo.co rhythm). */
.wml-section:nth-of-type(even) .wml-split-panel { order: -1; }

/* Figure panel — flat card, hairline, no scrim. */
.wml-split-panel {
  background: #FAFAFC;
  border: 1px solid #E4E2EE;
  border-radius: 16px;
  padding: 26px 28px;
}
/* Lifted variant — the closo.co auction-mock / highlighted-plan shadow. */
.wml-panel-lift {
  background: #fff;
  box-shadow: 0 24px 48px -18px rgba(69, 43, 144, .22), 0 4px 12px rgba(16, 24, 40, .06);
}
.wml-math-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #E4E2EE;
  font-size: 14px;
  color: #556070;
}
.wml-math-row b {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 16px;
  color: #1A202C;
  white-space: nowrap;
}
.wml-math-row.wml-math-net { border-bottom: 0; padding-top: 14px; }
.wml-math-row.wml-math-net b {
  color: #452B90;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.wml-foot {
  font-size: 12.5px;
  line-height: 1.55;
  color: #556070;
  margin: 14px 0 0;
}

/* ── steps — connected timeline (the closo.co .cwl-rst anatomy) ─────── */
.wml-steps {
  margin-top: 30px;
  max-width: 720px;
}
.wml-step {
  position: relative;
  display: flex;
  gap: 20px;
  padding-bottom: 34px;
}
.wml-step:last-child { padding-bottom: 0; }
/* the connecting line between numbered nodes */
.wml-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 44px;
  bottom: 8px;
  width: 2px;
  background: #E4E2EE;
}
.wml-step-n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #452B90;
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
}
.wml-step-c { min-width: 0; }
.wml-step h3 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  font-size: 17px;
  margin: 7px 0 5px;
}
.wml-step p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #556070;
  margin: 0;
  max-width: 560px;
}

/* ── included / not included — elevated cards with icon chips ───────── */
.wml-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  margin-top: 30px;
}
.wml-col {
  background: #fff;
  border: 1px solid #E4E2EE;
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}
.wml-col h3 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 14px;
}
.wml-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wml-col li {
  position: relative;
  padding: 10px 0 10px 32px;
  font-size: 14px;
  line-height: 1.55;
  color: #556070;
  border-top: 1px solid #FAFAFC;
}
.wml-col li:first-child { border-top: 0; }
/* round icon chips — the closo.co .cwl-pi.y / .cwl-pi.n pair */
.wml-pi {
  position: absolute;
  left: 0;
  top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.wml-pi svg { display: block; }
.wml-pi-y { background: #DCFCE7; color: #15803d; }
.wml-pi-n { background: #FBEAEA; color: #B14A4A; }
/* legacy fallback if a row carries a bare svg (no chip wrapper) */
.wml-li-yes > svg, .wml-li-no > svg { position: absolute; left: 3px; top: 13px; }
.wml-li-yes > svg { color: #15803d; }
.wml-li-no > svg { color: #B14A4A; }

/* ── FAQ — accordion cards (the closo.co .cdl-faq anatomy) ─────────── */
.wml-faq {
  /* ⛔ NO max-width HERE. It carried 820px while every sibling block —
   *    .wml-cols, .wml-split — fills the band, so the accordion sat visibly
   *    narrower than the section above it on every landing page (operator
   *    2026-08-20). The ROW is full width; the ANSWER keeps a readable measure
   *    of its own below, which is where the constraint actually belongs. */
  margin-top: 22px;
}
.wml-faq details {
  background: #fff;
  border: 1px solid #E4E2EE;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}
.wml-faq summary {
  cursor: pointer;
  padding: 17px 22px;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}
.wml-faq summary::-webkit-details-marker { display: none; }
.wml-faq summary::after {
  content: "+";
  float: right;
  font-family: "JetBrains Mono", monospace;
  font-size: 17px;
  color: #556070;
  transition: transform .18s ease;
}
.wml-faq details[open] summary::after { transform: rotate(45deg); }
.wml-faq details p {
  margin: 0;
  padding: 0 22px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #556070;
  max-width: 680px;
}

/* ── closing CTA — brand band (the closo.co .cdl-final anatomy) ─────── */
/* ⛔ text-align CANNOT CENTRE THE BUTTON ROW. `.wml-cta-row` is a flex
 *    container, and flex item placement answers to justify-content, not to an
 *    inherited text-align — so the closing band centred its headline and left
 *    its two CTAs hard against the left edge, on every landing page that uses
 *    it (referral, Insider, protection). The hero's own cta-row keeps its
 *    left alignment: this is scoped to the closing band deliberately. */
.wml-cta .wml-cta-row { justify-content: center; }
.wml-cta {
  text-align: center;
  margin-top: 64px;
  padding: 64px 32px;
  border-radius: 20px;
  background:
    radial-gradient(700px 320px at 82% -20%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(135deg, #452B90 0%, #321F69 100%);
  color: #fff;
}
.wml-cta h2 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 38px);
  letter-spacing: -.02em;
  margin: 0 0 22px;
}
.wml-cta .wm-btn-solid {
  background: #fff;
  color: #452B90;
  border-color: #fff;
}
.wml-cta .wm-btn-solid:hover { background: #F1F5F9; color: #321F69; }
.wml-cta .wm-btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
  background: transparent;
}
.wml-cta .wm-btn-ghost:hover { border-color: #fff; color: #fff; }

/* ── responsive: 360px-first, no horizontal scroll ──────────────────── */
@media (max-width: 860px) {
  .wml-hero { padding: 40px 28px 40px; }
  .wml-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .wml-hero-media { margin: 0 6px; }
  .wml-hero-media img { height: 240px; }
  .wml-chip-a { left: -6px; }
  .wml-chip-b { right: -6px; }
  .wml-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .wml-section:nth-of-type(even) .wml-split-panel { order: 0; }
  .wml-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .wml { padding: 0 16px 48px; }
  .wml-hero { margin-top: 12px; padding: 30px 18px 30px; border-radius: 16px; }
  .wml-hero h1 { font-size: 30px; }
  .wml-hero-sub { font-size: 15.5px; }
  .wml-hero-media { margin: 0; }
  .wml-hero-media img { height: 200px; }
  .wml-chip { padding: 7px 12px; font-size: 11.5px; }
  .wml-chip b { font-size: 12.5px; }
  .wml-chip-a { top: 10px; left: 8px; }
  .wml-chip-b { bottom: 12px; right: 8px; }
  .wml-pay { max-width: none; padding: 18px 16px; }
  .wml-stats { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 0; }
  .wml-section { padding: 40px 0; }
  .wml-step { gap: 14px; }
  .wml-step:not(:last-child)::before { left: 15px; }
  .wml-step-n { width: 32px; height: 32px; font-size: 12px; }
  .wml-faq summary { padding: 14px 16px; }
  .wml-faq details p { padding: 0 16px 14px; }
  .wml-cta { margin-top: 40px; padding: 44px 20px; border-radius: 16px; }
}

/* ── payment MODAL (operator 2026-08-19: popup, not in-page panel) ────── */
.wml-pay-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26, 32, 44, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wml-pay-overlay[hidden] { display: none !important; }
.wml-pay-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px -12px rgba(26, 32, 44, 0.35);
  padding: 26px;
}
.wml-pay-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #556070;
  cursor: pointer;
  border-radius: 8px;
}
.wml-pay-close:hover { background: #F4F2FA; color: #1A202C; }