/* The affiliate page, part "levels": the three levels side by side and the path under them. The section, the head and
   the buttons are the kit's (.k-sec, .k-head-c, .k-btn, .k-btn-dark, .k-btn-light); this file holds the cards. Each is
   a column on the kit's card ground (--k-card, --k-card-sh): the level and its pill, the name, who it is for, the two
   terms as a definition list (the figure large, its period beside it, the note under both), the two lists and the foot
   with the Apply and its note, held at the bottom so the three calls line up. Level 2 wears the primary's ring (the
   live page's sweet spot), level 3 the finale's night, fixed in both themes (the kit's navy tokens), its pill in the
   board's amber. Three across from 1100 px, one column under it. The path is three steps on hairline cards with an
   arrow between them, stacked on a phone. Nothing moves. */

.pg-affiliate .af-lv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;margin-top:56px}
.pg-affiliate .af-lv-card{
  --af-lv-line:var(--line);--af-lv-sub:var(--mute);--af-lv-head:var(--ink2);--af-lv-body:var(--k-text);
  display:flex;flex-direction:column;min-width:0;padding:30px 28px 26px;border-radius:22px;background:var(--k-card);box-shadow:var(--k-card-sh);color:var(--af-lv-body);
}
.pg-affiliate .af-lv-pick{box-shadow:0 0 0 2px var(--ai),var(--k-sh)}
.pg-affiliate .af-lv-top{
  --af-lv-line:var(--k-navy-line);--af-lv-sub:var(--k-navy-mute);--af-lv-head:#FFFFFF;--af-lv-body:var(--k-on-navy);
  background:radial-gradient(120% 60% at 50% 0%,rgba(75,100,255,.22),rgba(75,100,255,0) 70%),linear-gradient(180deg,var(--k-navy-2),var(--k-navy-1));
  box-shadow:0 0 0 1px var(--k-navy-line),0 30px 60px -30px rgba(3,4,18,.7);
}
.pg-affiliate .af-lv-tag{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:24px;margin:0;font:500 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--k-ai-ink)}
.pg-affiliate .af-lv-top .af-lv-tag{color:var(--k-navy-eye)}
.pg-affiliate .af-lv-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--k-ai-soft);font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--k-ai-ink);white-space:nowrap}
.pg-affiliate .af-lv-top .af-lv-pill{background:rgba(242,196,107,.14);color:var(--k-amber)}
.pg-affiliate .af-lv-name{margin:18px 0 0;font:600 27px/1.12 var(--display);letter-spacing:-.025em;color:var(--af-lv-head);text-wrap:balance}
.pg-affiliate .af-lv-for{margin:10px 0 0;font:400 15.5px/1.55 var(--sans);color:var(--af-lv-sub);text-wrap:pretty}

.pg-affiliate .af-lv-terms{margin:24px 0 0;border-top:1px solid var(--af-lv-line)}
.pg-affiliate .af-lv-term{padding:18px 0 20px;border-bottom:1px solid var(--af-lv-line)}
.pg-affiliate .af-lv-term dt{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--af-lv-sub)}
.pg-affiliate .af-lv-term dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:12px 0 0}
.pg-affiliate .af-lv-term dd>b{display:inline-flex;align-items:baseline;gap:8px;font:600 40px/1 var(--display);letter-spacing:-.035em;color:var(--af-lv-head)}
.pg-affiliate .af-lv-term dd>b small{font:500 14px/1 var(--sans);letter-spacing:0;color:var(--af-lv-sub)}
.pg-affiliate .af-lv-term dd>span{font:500 15.5px/1.3 var(--sans);color:var(--af-lv-head)}
.pg-affiliate .af-lv-term dd>small{flex-basis:100%;margin-top:8px;font:400 14.5px/1.5 var(--sans);color:var(--af-lv-sub);text-wrap:pretty}
.pg-affiliate .af-lv-term dd a{color:var(--k-ai-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

.pg-affiliate .af-lv-h{margin:24px 0 12px;font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--af-lv-sub)}
.pg-affiliate .af-lv-list{display:grid;gap:10px}
.pg-affiliate .af-lv-list li{display:flex;align-items:flex-start;gap:10px;font:500 15.5px/1.45 var(--sans);color:var(--af-lv-head);text-wrap:pretty}
.pg-affiliate .af-lv-list svg{display:block;flex:none;width:20px;height:20px;margin-top:1px;padding:4px;border-radius:50%;background:var(--k-ai-soft);color:var(--ai)}
.pg-affiliate .af-lv-top .af-lv-list svg{background:rgba(150,165,255,.16);color:var(--k-navy-eye)}

.pg-affiliate .af-lv-foot{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:auto;padding-top:30px}
.pg-affiliate .af-lv-foot .k-btn{gap:9px;width:100%}
.pg-affiliate .af-lv-note{margin:0;font:400 13.5px/1.4 var(--sans);color:var(--af-lv-sub);text-align:center;text-wrap:balance}
.pg-affiliate .af-lv-top .k-btn-light:focus-visible{outline-color:#FFFFFF}

/* the path under the cards */
.pg-affiliate .af-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin:40px auto 0;max-width:1060px;counter-reset:af-path}
.pg-affiliate .af-path li{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 22px;border-radius:16px;background:var(--k-card);box-shadow:var(--k-card-sh);counter-increment:af-path}
.pg-affiliate .af-path li+li::before{
  content:"";position:absolute;left:-34px;top:50%;width:24px;height:24px;margin-top:-12px;background:var(--mute);opacity:.7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pg-affiliate .af-path b{font:600 16px/1.3 var(--sans);color:var(--ink2)}
.pg-affiliate .af-path span{font:400 14.5px/1.4 var(--sans);color:var(--mute)}

@media (max-width:1100px){
  .pg-affiliate .af-lv-grid{grid-template-columns:minmax(0,1fr);gap:20px;max-width:560px;margin-inline:auto}
  .pg-affiliate .af-path{grid-template-columns:minmax(0,1fr);gap:34px;max-width:560px}
  .pg-affiliate .af-path li+li::before{left:50%;top:-29px;margin:0 0 0 -12px;transform:rotate(90deg)}
}
@media (max-width:760px){
  .pg-affiliate .af-lv-grid{margin-top:40px}
  .pg-affiliate .af-lv-card{padding:24px 20px 22px}
  .pg-affiliate .af-lv-name{font-size:24px}
  .pg-affiliate .af-lv-term dd>b{font-size:36px}
  .pg-affiliate .af-path li{padding:16px 18px}
}