/* =====================================================================
   Affiliate Marketing page — extends style.css, crm.css, quickonline.css
   ===================================================================== */
.aff-hero .hero-title { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }

/* Hero visual */
.aff-hero-visual { position: relative; width: 100%; aspect-ratio: 1 / 0.86; }
.aff-hero-visual .blob { right: 2%; top: 0; width: 70%; }
.aff-dash { position: absolute; margin: 0; left: -2%; top: 14%; width: 104%; z-index: 2; }
.aff-dash img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(28, 49, 35, 0.22)); }
.aff-chip-a { left: 0; bottom: 4%; z-index: 4; animation-delay: 1200ms; }
.aff-chip-b { right: 0; top: 2%; z-index: 4; animation-delay: 1350ms; }
.aff-dot { background: var(--mustard); color: var(--green); }

/* Outcome grid */
.goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.goal { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 2.8vw, 32px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: transform var(--t-card) var(--ease), border-color var(--t-card); }
.goal:hover { transform: translateY(-4px); border-color: var(--mustard); }
.goal h3 { font-size: 1.2rem; }
.goal p { color: var(--muted); font-size: 0.95rem; flex: 1; }
.goal-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--green); color: var(--mustard); margin-bottom: 8px; transition: transform var(--t-card) var(--ease); }
.goal:hover .goal-ico { transform: rotate(-8deg); }
.goal-ico .ico { width: 24px; height: 24px; stroke-width: 1.8; }
.goal-model { align-self: flex-start; margin-top: 6px; padding: 6px 12px; border-radius: 99px; background: var(--mustard-tint); color: #8A5F05; font-size: 0.78rem; font-weight: 700; font-family: var(--f-head); }
.goal-feature { background: var(--green); border-color: var(--green); }
.goal-feature h3 { color: var(--white); }
.goal-feature p { color: rgba(250, 250, 247, 0.78); }
.goal-feature .goal-ico { background: var(--mustard); color: var(--green); }
.goal-feature .goal-model { background: rgba(245, 184, 46, 0.16); color: var(--mustard); }
.goal-accent { background: var(--mustard); border-color: var(--mustard); }
.goal-accent p { color: #4A3A12; }
.goal-accent .goal-model { background: var(--green); color: var(--mustard); }
.goal-accent:hover { border-color: var(--green); }
.goal-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 24px; background: var(--grey); }
.goal-wide > div { flex: 1; }
.goal-wide p { margin-top: 6px; }
.goal-wide .goal-ico { margin-bottom: 0; flex-shrink: 0; }
.goal-wide .goal-model { align-self: center; margin-top: 0; white-space: nowrap; }

/* Partner types */
.ptype-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 18px); }
.ptype { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: transform var(--t-card) var(--ease), border-color var(--t-card); }
.ptype:hover { transform: translateY(-3px); border-color: var(--mustard); }
.pt-ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--mustard-tint); color: #8A5F05; }
.ptype b { font-family: var(--f-head); font-size: 1.02rem; }
.ptype small { color: var(--muted); font-size: 0.85rem; }
.aff-fit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.aff-fit b { font-family: var(--f-head); }
.aff-fit .svc-tags li { background: #fff; border: 1px solid var(--line); }

.page-aff .wordmark { font-size: clamp(3.6rem, 16vw, 15rem); }

@media (max-width: 1023px) {
  .aff-hero-visual { max-width: 680px; margin-inline: auto; }
  .goal-grid, .ptype-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .aff-hero-visual { aspect-ratio: 1 / 0.9; }
  .aff-dash { left: 0; width: 100%; top: 16%; }
  .aff-chip-a { transform: scale(0.86); transform-origin: left bottom; bottom: 0; }
  .aff-chip-b { transform: scale(0.86); transform-origin: right top; }
  .goal-grid, .ptype-grid { grid-template-columns: 1fr; }
  .goal-wide { flex-direction: column; align-items: flex-start; }
  .goal-wide .goal-model { align-self: flex-start; }
}