/* Commissions page (web/preview/commissions/). Every class starts with cm- so the shell can change freely.
   Colours from the live amazingself.com look (as-site/css/as.css). */
.cm-page { --cm-navy: #062454; --cm-navy2: #0a3473; --cm-deep: #041a3d; --cm-blue: #0e71d2; --cm-blue-d: #0a5bb0; --cm-sky: #5faed3;
  --cm-tint: #eef6fd; --cm-line: #dbe7f3; --cm-coral: #ff4166; --cm-coral-d: #e3284f; --cm-gold: #f4b740; --cm-ink: #1b2a3d;
  --cm-body: #2f3d4f; --cm-muted: #5d6b7e;
  font-size: 18px; line-height: 1.7; color: var(--cm-body); padding: 8px 0 40px; }
.cm-page p { margin: 0 0 14px; }
.cm-page h2, .cm-page h3 { font-family: Montserrat, Roboto, Arial, sans-serif; color: var(--cm-ink); }
.cm-page a { color: var(--cm-blue-d); }
.cm-sec { margin: 52px 0; }
.cm-head { max-width: 820px; margin-bottom: 24px; }
.cm-head h2, .cm-pay h2, .cm-ask h2 { font-size: clamp(26px, 3vw, 32px); font-weight: 800; margin: 0 0 10px; line-height: 1.2; }
.cm-head p { color: var(--cm-body); }

/* Rate cards */
.cm-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cm-rate { position: relative; background: #fff; border: 1px solid var(--cm-line); border-radius: 18px; padding: 26px 24px 20px; box-shadow: 0 12px 32px rgba(6, 36, 84, .07); overflow: hidden; }
.cm-rate::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--cm-blue); }
.cm-rate-b::before { background: linear-gradient(90deg, var(--cm-blue), var(--cm-sky)); }
.cm-rate-c::before { background: var(--cm-coral); }
.cm-pct { font: 800 clamp(48px, 5vw, 60px)/1 Montserrat, Roboto, Arial, sans-serif; color: var(--cm-navy); margin: 4px 0 4px !important; letter-spacing: -.02em; }
.cm-rate-c .cm-pct { color: var(--cm-coral-d); }
.cm-rate h3 { font-size: 20px; font-weight: 700; margin: 0 0 12px; }
.cm-amt { background: var(--cm-tint); border-radius: 10px; padding: 8px 12px; color: var(--cm-ink); }
.cm-amt b { color: var(--cm-navy); font-size: 20px; }
.cm-rate p:last-child { margin-bottom: 0; }

/* Worked example */
.cm-ex { background: #fff; border: 1px solid var(--cm-line); border-radius: 18px; padding: 22px 26px 18px; box-shadow: 0 12px 32px rgba(6, 36, 84, .06); max-width: 900px; }
.cm-tag { display: inline-block; font-size: 16px; font-weight: 700; color: #7a4b00; background: #fff4d6; border: 1px solid #f4dca0; border-radius: 999px; padding: 4px 14px; margin: 0 0 12px !important; }
.cm-table { width: 100%; border-collapse: collapse; }
.cm-table thead th { text-align: left; font-size: 16px; font-weight: 700; color: var(--cm-muted); padding: 10px 10px 12px; border-bottom: 2px solid var(--cm-blue); line-height: 1.35; vertical-align: bottom; }
.cm-table thead th:nth-child(2), .cm-that { text-align: right; }
.cm-table tbody th, .cm-table td { padding: 16px 10px; border-bottom: 1px solid var(--cm-line); vertical-align: middle; }
.cm-table tbody tr:last-child th, .cm-table tbody tr:last-child td { border-bottom: 0; }
.cm-table tbody th { text-align: left; font-weight: 400; }
.cm-table tbody th b { display: block; font-size: 19px; color: var(--cm-ink); font-family: Montserrat, Roboto, Arial, sans-serif; }
.cm-table tbody th span { display: block; color: var(--cm-muted); font-size: 16px; line-height: 1.45; }
.cm-that { font-weight: 700; color: var(--cm-body); white-space: nowrap; }
.cm-total { width: 38%; }
.cm-total b { display: block; font: 800 22px/1.2 Montserrat, Roboto, Arial, sans-serif; color: var(--cm-navy); margin-bottom: 6px; }
.cm-bar { display: block; height: 10px; border-radius: 99px; background: var(--cm-tint); overflow: hidden; }
.cm-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cm-blue), var(--cm-sky)); }
.cm-src { font-size: 16px; color: var(--cm-muted); margin: 14px 0 0 !important; line-height: 1.55; }

/* Flow */
.cm-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cm-flow li { display: flex; gap: 16px; background: #fff; border: 1px solid var(--cm-line); border-radius: 16px; padding: 22px; }
.cm-flow h3 { font-size: 20px; margin: 2px 0 8px; line-height: 1.3; }
.cm-flow p { margin: 0; }
.cm-n { flex: none; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--cm-coral), #ce5099); color: #fff; font: 800 19px Montserrat, Roboto, Arial, sans-serif; display: flex; align-items: center; justify-content: center; }

/* Hoplink anatomy */
.cm-link { background: var(--cm-deep); border-radius: 16px; padding: 22px 24px; }
.cm-url { margin: 0 !important; font-family: ui-monospace, Consolas, monospace; font-size: 18px; color: #c9d6ea; overflow-wrap: anywhere; line-height: 1.9; }
.cm-url b { display: inline-block; max-width: 100%; font-weight: 700; padding: 0 6px; border-radius: 6px; line-height: 1.6; }
.cm-a { color: #2a1b00; background: var(--cm-gold); }
.cm-v { color: var(--cm-deep); background: #c9d6ea; }
.cm-t { color: var(--cm-deep); background: #9fd0ff; }
.cm-y { color: #fff; background: var(--cm-coral-d); }
.cm-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.cm-part { background: #fff; border: 1px solid var(--cm-line); border-radius: 14px; padding: 18px; }
.cm-part > b { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-size: 17px; padding: 2px 8px; border-radius: 6px; margin-bottom: 10px; }
.cm-part p { margin: 0; }
.cm-page code { font-family: ui-monospace, Consolas, monospace; font-size: 16px; background: var(--cm-tint); padding: 1px 6px; border-radius: 5px; color: var(--cm-ink); }
.cm-more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 22px 0 0 !important; }
.cm-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: var(--cm-coral); color: #fff !important; font: 700 17px Montserrat, Roboto, Arial, sans-serif; text-decoration: none; box-shadow: 0 8px 20px rgba(255, 65, 102, .28); }
.cm-btn:hover { background: var(--cm-coral-d); }
.cm-btn .ico, .cm-textlink .ico { width: 18px; height: 18px; }
.cm-textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }

/* Stops */
.cm-stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cm-stop { background: #fff; border: 1px solid var(--cm-line); border-radius: 16px; padding: 22px; }
.cm-stop h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 8px; }
.cm-stop h3 .ico { width: 24px; height: 24px; color: var(--cm-blue); flex: none; }
.cm-stop p { margin: 0; }
.cm-note { margin: 20px 0 0 !important; padding: 14px 18px; border-left: 4px solid var(--cm-blue); background: var(--cm-tint); border-radius: 0 12px 12px 0; max-width: 900px; }

/* ClickBank + Andrew */
.cm-pay { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: center; background: var(--cm-tint); border: 1px solid var(--cm-line); border-radius: 18px; padding: 30px; }
.cm-pay img { width: 100%; max-width: 280px; height: auto; justify-self: center; }
.cm-ask { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; background: linear-gradient(135deg, var(--cm-navy), var(--cm-navy2)); color: #dfe8f5; border-radius: 18px; padding: 30px; }
.cm-ask h2 { color: #fff; }
.cm-mgr { background: #fff; color: var(--cm-body); border-radius: 14px; padding: 18px; overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .cm-rates, .cm-stops { grid-template-columns: minmax(0, 1fr); }
  .cm-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-pay, .cm-ask { grid-template-columns: minmax(0, 1fr); }
  .cm-pay img { justify-self: start; }
}
@media (max-width: 700px) {
  .cm-page { font-size: 17px; }
  .cm-sec { margin: 38px 0; }
  .cm-flow, .cm-parts { grid-template-columns: minmax(0, 1fr); }
  .cm-ex { padding: 16px 14px 14px; }
  .cm-table thead th { padding: 8px 6px 10px; }
  .cm-table tbody th, .cm-table td { padding: 14px 6px; }
  .cm-table thead th:nth-child(2), .cm-that { display: none; }
  .cm-total { width: 46%; }
  .cm-total b { font-size: 20px; }
  .cm-url { font-size: 16px; }
  .cm-link { padding: 16px; }
  .cm-pay, .cm-ask { padding: 22px 18px; }
  .cm-flow li, .cm-stop { padding: 18px; }
  .cm-btn { width: 100%; justify-content: center; }
}

/* Andrew's card (shell markup) in a narrow box: one address per line, no "|" separator, stacked on phones. */
.cm-mgr .manager span:last-child:has(> a) { font-size: 0; margin-top: 4px; }
.cm-mgr .manager span:last-child:has(> a) a { display: block; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 700px) { .cm-mgr .manager { flex-direction: column; align-items: flex-start; } }