/* The affiliate page, part "why": six reasons as cards on the warm ground. The section, the head, the tiles and the
   buttons are the kit's (.k-sec, .k-head-c, .k-tile, .k-btns); this file holds the grid of cards (each on the kit's
   card ground, --k-card and --k-card-sh, as the FAQ's questions are) and the sample referral link in the sixth card.
   Three across from 1000 px, two to 640, one under it. Nothing moves. */

.pg-affiliate .af-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.pg-affiliate .af-why-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:28px 28px 30px;border-radius:20px;background:var(--k-card);box-shadow:var(--k-card-sh)}
.pg-affiliate .af-why-h{margin:22px 0 0;font:600 20px/1.3 var(--display);letter-spacing:-.015em;color:var(--ink2);text-wrap:balance}
.pg-affiliate .af-why-p{margin:10px 0 0;font:400 16px/1.58 var(--sans);color:var(--k-text);text-wrap:pretty}
/* the sample link's card carries the Sample chip in its corner, as a picture's stage does (.k-pic > .k-sample) */
.pg-affiliate .af-why-ref{position:relative}
.pg-affiliate .af-why-ref>.k-sample{position:absolute;top:24px;right:24px}
.pg-affiliate .af-ref{
  display:flex;align-items:center;gap:9px;width:100%;min-width:0;margin:20px 0 0;padding:0 8px 0 12px;height:44px;
  border-radius:12px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}
.pg-affiliate .af-ref-i,.pg-affiliate .af-ref-c{display:block;flex:none;width:16px;height:16px;color:var(--mute)}
.pg-affiliate .af-ref-i{color:var(--ai)}
.pg-affiliate .af-ref-u{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13.5px/1 var(--mono);color:var(--ink)}
.pg-affiliate .af-why .k-btns{margin-top:48px}
.pg-affiliate .af-why .k-btn{gap:9px}

@media (max-width:1000px){
  .pg-affiliate .af-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .pg-affiliate .af-why-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:40px}
  .pg-affiliate .af-why-card{padding:22px 20px 24px}
  .pg-affiliate .af-why-ref>.k-sample{top:20px;right:18px}
  .pg-affiliate .af-why-h{margin-top:18px;font-size:19px}
  .pg-affiliate .af-why .k-btns{margin-top:36px}
}