/* Affiliate program: how the program works, why to promote HumanBlend and the program terms,
   built on base.css tokens. Everything is scoped to .haf. The stat drawings are plain CSS; their
   motion only runs once motion.js arms html.hb-motion, which it skips for reduced motion. */

@property --haf-pie { syntax: "<percentage>"; inherits: false; initial-value: 25%; }

.haf {
  --haf-top: 104px;
  --haf-rule: #d6cfc2;
  --haf-tint: #efe8dc;
}

.haf ul,
.haf ol { margin: 0; padding: 0; list-style: none; }
.haf .haf-i { flex: none; }

.haf .hb-h2,
.haf .haf-step-t,
.haf .haf-term-t { text-wrap: balance; }
.haf .haf-head { max-width: 760px; }
.haf .haf-head .hb-h2 { margin-top: 20px; }
.haf .haf-head-p { margin-top: 18px; }

/* Hero */
.haf .haf-hero-slab { padding-bottom: 96px; }
.haf .haf-hero-slab > .hb-wrap { z-index: 1; }
.haf .haf-hero-field {
  top: -4%; right: -4%; bottom: 30%; left: 34%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%);
  mask-image: linear-gradient(90deg, transparent, #000 42%);
}
.haf .haf-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 72px; align-items: center; }
.haf .haf-hero-copy { max-width: 680px; }
.haf .haf-h1 { margin-top: 22px; }
.haf .haf-h1 span { color: var(--lime); }
.haf .haf-sub { margin-top: 22px; font-size: clamp(21px, 1.9vw, 26px); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; color: var(--paper); }
.haf .haf-lead { margin-top: 16px; font-size: 19px; color: var(--mist); }
.haf .haf-hero-actions { margin-top: 32px; }

.haf .haf-stats { display: grid; gap: 14px; }
.haf .haf-stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 18px;
  padding: 20px 22px; border: 1px solid var(--line-dark); border-radius: 14px; background: rgba(17, 20, 26, 0.88);
}
.haf .haf-stat-icon {
  grid-row: 1 / 3; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(211, 186, 136, 0.14); color: var(--lime);
}
.haf .haf-stat-v { grid-column: 2; font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: var(--paper); }
.haf .haf-stat-k { grid-column: 2; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
.haf .haf-stat-art { grid-column: 3; grid-row: 1 / 3; }

/* 25%: a quarter of the ring */
.haf .haf-pie {
  --haf-pie: 25%;
  width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(var(--lime) 0 var(--haf-pie), rgba(247, 244, 238, 0.14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  transition: --haf-pie 1.1s var(--ease) 0.25s;
}
/* 60 days: ten columns of six */
.haf .haf-days {
  width: 80px; height: 48px;
  background-image: radial-gradient(circle, var(--lime) 0 1.6px, transparent 2.1px); background-size: 8px 8px;
  transition: clip-path 1.1s var(--ease) 0.35s;
}
/* 12 months: one bar a month */
.haf .haf-months { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.haf .haf-months i {
  display: block; width: 6px; height: 100%; border-radius: 2px; background: var(--lime);
  transform-origin: bottom; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.haf .haf-months i:nth-child(2) { transition-delay: 0.05s; }
.haf .haf-months i:nth-child(3) { transition-delay: 0.1s; }
.haf .haf-months i:nth-child(4) { transition-delay: 0.15s; }
.haf .haf-months i:nth-child(5) { transition-delay: 0.2s; }
.haf .haf-months i:nth-child(6) { transition-delay: 0.25s; }
.haf .haf-months i:nth-child(7) { transition-delay: 0.3s; }
.haf .haf-months i:nth-child(8) { transition-delay: 0.35s; }
.haf .haf-months i:nth-child(9) { transition-delay: 0.4s; }
.haf .haf-months i:nth-child(10) { transition-delay: 0.45s; }
.haf .haf-months i:nth-child(11) { transition-delay: 0.5s; }
.haf .haf-months i:nth-child(12) { transition-delay: 0.55s; }

/* How it works */
.haf .haf-how { padding: 112px 0 104px; }
.haf .haf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
.haf .haf-step {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 28px;
  border: 1px solid var(--stone); border-radius: var(--radius-card); background: var(--paper);
}
.haf .haf-step:not(:last-child)::after {
  content: ""; position: absolute; top: 50px; right: -22px; width: 16px; height: 1.5px; background: var(--warm-taupe);
}
.haf .haf-step-top { display: flex; align-items: center; justify-content: space-between; align-self: stretch; }
.haf .haf-step-icon,
.haf .haf-cap-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--ink); color: var(--lime);
}
.haf .haf-step-n { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--haf-rule); }
.haf .haf-step-t { margin-top: 24px; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.haf .haf-step-p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--slate); }
.haf .haf-step.is-earn { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.haf .haf-step.is-earn .haf-step-icon { background: var(--lime); color: var(--ink); }
.haf .haf-step.is-earn .haf-step-n { color: rgba(247, 244, 238, 0.2); }
.haf .haf-step.is-earn .haf-step-p { color: var(--mist); }

/* Why promote */
.haf .haf-why { padding: 0; }
.haf .haf-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.haf .haf-why-copy .hb-h2 { margin-top: 20px; }
.haf .haf-why-copy .hb-p { margin-top: 20px; }
.haf .haf-why-copy .hb-p + .hb-p { margin-top: 14px; }
.haf .haf-why-copy .hb-actions { margin-top: 32px; }
.haf .haf-platform { padding: 26px 28px 28px; border-radius: 14px; background: var(--paper); color: var(--ink); }
.haf .haf-platform-k { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-deep); }
.haf .haf-platform-k.is-split { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--haf-rule); }
.haf .haf-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.haf .haf-cap {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px;
  border-radius: 12px; background: var(--haf-tint); font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em;
}
.haf .haf-cap-icon { width: 38px; height: 38px; border-radius: 10px; }
.haf .haf-aud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.haf .haf-aud li { padding: 6px 12px; border: 1px solid var(--haf-rule); border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.3; }

/* Terms */
.haf .haf-terms { padding: 120px 0 112px; }
.haf .haf-terms-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 64px; align-items: start; margin-top: 56px; }
.haf .haf-index { position: sticky; top: var(--haf-top); }
.haf .haf-index-list { padding-left: 10px; border-left: 1px solid var(--lime); }
.haf .haf-index-list a {
  display: flex; gap: 10px; padding: 7px 8px; border-radius: 6px; font-size: 15px; font-weight: 500; line-height: 1.35;
  color: var(--ink); transition: background-color var(--t-respond) var(--ease);
}
.haf .haf-index-list a:hover { background: rgba(31, 42, 55, 0.07); }
.haf .haf-index-list a span { flex: none; padding-top: 1px; font-family: var(--mono); font-size: 12px; color: var(--slate); }
.haf .haf-term-list { max-width: 820px; }
.haf .haf-term { position: relative; padding: 32px 0 32px 76px; border-top: 1px solid var(--haf-rule); scroll-margin-top: var(--haf-top); }
.haf .haf-term:first-child { padding-top: 0; border-top: 0; }
.haf .haf-term:last-child { padding-bottom: 0; }
.haf .haf-term-t { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.haf .haf-term-n {
  position: absolute; top: 30px; left: 0; font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--warm-taupe);
}
.haf .haf-term:first-child .haf-term-n { top: -2px; }
.haf .haf-term-p { max-width: 68ch; margin-top: 12px; font-size: 16.5px; line-height: 1.7; color: var(--slate); }
.haf .haf-term-t + .haf-term-p { margin-top: 10px; }
.haf .haf-term-p a {
  font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--warm-taupe); text-underline-offset: 3px;
}
.haf .haf-term-p a:hover { text-decoration-color: currentColor; }
.haf .haf-term-p strong { font-weight: 600; }
.haf .haf-sign { margin-top: 20px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-deep); }

/* Closing call to action */
.haf .haf-close { padding: 0; }
.haf .haf-close-slab { padding: 112px 0 120px; }
.haf .haf-close-field {
  top: 4%; right: -4%; bottom: 0; left: 46%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.haf .haf-close-slab > .hb-wrap { z-index: 1; }
.haf .haf-close-copy { max-width: 760px; }
.haf .haf-close-copy .hb-h2 { margin-top: 22px; font-size: clamp(34px, 4vw, 54px); }
.haf .haf-close-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.haf .haf-close-facts li {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 15px; border: 1px solid var(--line-dark-strong); border-radius: 999px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mist);
}
.haf .haf-close-facts b { font-weight: 600; color: var(--lime); }
.haf .haf-close-copy .hb-actions { margin-top: 34px; }

/* Decorative reveal, armed only by motion.js */
.haf .haf-stat,
.haf .haf-cap { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.haf :is(.haf-stats, .haf-caps) > :nth-child(2) { transition-delay: 0.1s; }
.haf :is(.haf-stats, .haf-caps) > :nth-child(3) { transition-delay: 0.2s; }
.haf :is(.haf-stats, .haf-caps) > :nth-child(4) { transition-delay: 0.3s; }
html.hb-motion .haf .haf-stats:not(.in) .haf-stat,
html.hb-motion .haf .haf-platform:not(.in) .haf-cap { opacity: 0; transform: translateY(12px); }
html.hb-motion .haf .haf-stats:not(.in) .haf-pie { --haf-pie: 0%; }
html.hb-motion .haf .haf-stats:not(.in) .haf-days { clip-path: inset(0 100% 0 0); }
html.hb-motion .haf .haf-stats:not(.in) .haf-months i { opacity: 0.25; transform: scaleY(0.3); }

@media (max-width: 1279px) {
  .haf .haf-hero-slab { padding-bottom: 64px; }
  .haf .haf-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .haf .haf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .haf .haf-stat { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
  .haf .haf-stat-icon { grid-row: 1; margin-bottom: 14px; }
  .haf .haf-stat-art { grid-column: 2; grid-row: 1; justify-self: end; margin-bottom: 14px; }
  .haf .haf-stat-v,
  .haf .haf-stat-k { grid-column: 1 / -1; }
  .haf .haf-terms-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; }
}

@media (max-width: 1023px) {
  .haf { --haf-top: 92px; }
  .haf .haf-hero-field { inset: auto -8% 24px; height: 46%; -webkit-mask-image: none; mask-image: none; }
  .haf .haf-how { padding: 88px 0 88px; }
  .haf .haf-why-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .haf .haf-terms { padding: 88px 0 96px; }
  .haf .haf-terms-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .haf .haf-index { display: none; }
  .haf .haf-close-slab { padding: 88px 0 220px; }
  .haf .haf-close-field { inset: auto -2% -10px; height: 190px; -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 859px) {
  .haf .haf-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .haf .haf-step:not(:last-child)::after { top: 100%; right: auto; left: 49px; width: 1.5px; height: 14px; }
}

@media (max-width: 639px) {
  .haf .haf-hero-slab { padding-bottom: 40px; }
  .haf .haf-lead { font-size: 18px; }
  .haf .haf-hero-actions .hb-btn { flex: 1 1 100%; }
  .haf .haf-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .haf .haf-stat { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 14px; padding: 16px 18px; }
  .haf .haf-stat-icon { grid-row: 1 / 3; margin-bottom: 0; }
  .haf .haf-stat-art { grid-column: 3; grid-row: 1 / 3; margin-bottom: 0; }
  .haf .haf-stat-v,
  .haf .haf-stat-k { grid-column: 2; }
  .haf .haf-stat-v { font-size: 28px; }
  .haf .haf-how { padding: 72px 0 72px; }
  .haf .haf-steps { margin-top: 32px; }
  .haf .haf-step { padding: 24px 22px; }
  .haf .haf-platform { padding: 22px 20px 24px; }
  .haf .haf-terms { padding: 72px 0 80px; }
  .haf .haf-term { padding: 26px 0; }
  .haf .haf-term-n { position: static; display: block; margin-bottom: 10px; font-size: 24px; }
  .haf .haf-term-t { font-size: 20px; }
  .haf .haf-term-p { font-size: 16px; }
  .haf .haf-close-slab { padding: 72px 0 196px; }
  .haf .haf-close-field { height: 160px; }
  .haf .haf-close-copy .hb-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 479px) {
  .haf .haf-caps { grid-template-columns: minmax(0, 1fr); }
  .haf .haf-cap { flex-direction: row; align-items: center; padding: 14px 16px; }
  .haf .haf-days { width: 64px; height: 40px; background-size: 6.4px 6.67px; }
}