/* ── /affiliates (Partner Program) ──
   Built from the Claude Design affiliates handoff (styles.css). Every rule is
   scoped under main.aff so nothing reaches the shared header, mobile menu or
   v3 footer; base resets use :where() so they carry no specificity and never
   beat the shared clip player (v3-player.css). The handoff's stand-in header,
   footer, ticker, form and photo-placeholder rules are not carried over.
   Fonts come from the page's single Google Fonts link (Bebas Neue, DM Sans,
   JetBrains Mono), the same families the handoff names. */
.aff{--bg:#F8F6F2; --bg-alt:#EFEDE9; --card:#FFFFFF; --line:#E3E0DA; --line-strong:#D4D0C9;
  --ink:#0A0A0A; --ink-2:#3B3B3B; --ink-3:#6B6B6B;
  --dark:#0A0A0A; --dark-2:#141414; --dark-line:#262626; --on-dark:#F8F6F2; --on-dark-2:#A3A3A3;
  --blue:#2F7BFF; --green:#2ED3A0;
  --display:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --sans:"DM Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --wrap:1320px; --gutter:40px; --sec-pad:128px; --gap:24px;}
:where(.aff) *{box-sizing:border-box;margin:0;padding:0}
:where(.aff) a{color:var(--blue);text-decoration:none}
:where(.aff) a:hover{color:var(--ink)}
:where(.aff) img,:where(.aff) svg{display:block}
:where(.aff) button{font:inherit;color:inherit}
.aff .wrap{max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.aff .wrap--narrow{max-width:calc(1000px + var(--gutter)*2)}
.aff .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.aff .eyebrow{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
.aff .eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.aff .eyebrow--box{display:inline-flex;border:1px solid var(--blue);padding:6px 12px;letter-spacing:.24em;font-size:11px}
.aff .eyebrow--box::before{display:none}
.aff .on-dark .eyebrow{color:var(--green)}
.aff .title{font:400 clamp(48px,5.4vw,80px)/.92 var(--display);text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.aff .title em,.aff .h1 em{font-style:normal;color:var(--blue)}
.aff .on-dark .title em{color:var(--green)}
.aff .h3{font:400 30px/1 var(--display);text-transform:uppercase;letter-spacing:.005em}
.aff .lede{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:560px;text-wrap:pretty}
.aff .on-dark .lede{color:var(--on-dark-2)}
.aff .meta{font:500 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.aff .on-dark .meta{color:var(--on-dark)}
.aff .textlink{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);padding-bottom:6px;border-bottom:1px solid currentColor}
.aff .textlink:hover{color:var(--ink)}
.aff .on-dark .textlink{color:var(--green)}
.aff .on-dark .textlink:hover{color:var(--on-dark)}
.aff .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:50px;padding:0 24px;border:0;border-radius:8px;background:var(--blue);color:#fff;font:700 15px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .15s,opacity .15s}
.aff .btn:hover{background:var(--ink);color:#fff}
.aff .arrow{font-family:var(--sans);font-weight:400}
.aff .sec{padding:var(--sec-pad) 0}
.aff .sec--alt{background:var(--bg-alt)}
.aff .sec--dark{background:var(--dark);color:var(--on-dark)}
.aff .sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:64px}
.aff .sec__head .lede{margin-top:20px}
.aff .hero{position:relative;padding:100px 0 96px;background-color:var(--bg);background-image:linear-gradient(rgba(10,10,10,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.045) 1px,transparent 1px);background-size:150px 150px;background-position:-1px -1px}
.aff .hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center;padding:0 var(--gutter)}
.aff .h1{font:400 clamp(56px,6vw,88px)/.9 var(--display);text-transform:uppercase;margin:22px 0 40px;text-wrap:balance}
.aff .hero__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:36px}
.aff .hero__cta .textlink{color:var(--ink);border-color:var(--ink)}
.aff .hero__cta .textlink:hover{color:var(--blue);border-color:var(--blue)}
.aff .hero__art{position:relative;justify-self:end;width:100%;max-width:620px}
.aff .partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.aff .partner{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:18px}
.aff .partner__top{display:flex;align-items:center;gap:16px}
.aff .partner__logo{flex:none;width:72px;height:72px;border-radius:8px;background:var(--bg-alt);display:grid;place-items:center}
.aff .partner__logo img{display:block;width:auto;height:auto;max-width:52px;max-height:52px;object-fit:contain}
.aff .partner__name{font:400 26px/1 var(--display);text-transform:uppercase}
.aff .tag{display:inline-block;margin-top:8px;padding:4px 7px;border-radius:4px;background:#EAF1FF;color:var(--blue);font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.aff .partner__desc{color:var(--ink-2);font-size:15px;line-height:1.55;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.aff .partner__foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.aff .partner__foot .textlink{border:0;padding:0}
.aff .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.aff .step{position:relative;padding:40px 32px 8px;border-left:1px solid var(--line-strong)}
.aff .step:first-child{border-left:0;padding-left:0}
.aff .step::before{content:"";position:absolute;top:-6px;left:-1px;width:11px;height:11px;background:var(--blue)}
.aff .step:first-child::before{left:0}
.aff .step__row{display:flex;justify-content:space-between;align-items:flex-start}
.aff .step__k{font:500 12px/1 var(--mono);letter-spacing:.22em;color:var(--blue);text-transform:uppercase}
.aff .step__n{font:400 96px/.8 var(--display);color:var(--line)}
.aff .step .h3{margin-top:28px;font-size:34px}
.aff .step p{margin-top:12px;color:var(--ink-2);max-width:300px;text-wrap:pretty}
.aff .sec__aside{text-align:right;font:500 12px/2 var(--mono);letter-spacing:.2em;color:var(--ink-2);text-transform:uppercase}
.aff .faq{border-top:1px solid var(--line-strong)}
.aff .faq__item{border-bottom:1px solid var(--line-strong)}
.aff .faq__q{width:100%;display:grid;grid-template-columns:98px 1fr 24px;align-items:center;gap:0;min-height:72px;padding:18px 0;background:none;border:0;cursor:pointer;text-align:left}
.aff .faq__num{font:500 11px/1 var(--mono);color:var(--ink-3);letter-spacing:.06em}
.aff .faq__q span:nth-child(2){font:400 28px/1.05 var(--display);text-transform:uppercase}
.aff .faq__q:hover span:nth-child(2){color:var(--blue)}
.aff .plus{position:relative;width:16px;height:16px;justify-self:end;transition:transform .2s}
.aff .plus::before,.aff .plus::after{content:"";position:absolute;left:0;top:7.5px;width:16px;height:1.5px;background:var(--ink)}
.aff .plus::after{transform:rotate(90deg)}
.aff .faq__q[aria-expanded="true"] .plus{transform:rotate(45deg)}
.aff .faq__a{display:none;padding:0 40px 28px 98px;color:var(--ink-2);max-width:820px;text-wrap:pretty}
.aff .faq__q[aria-expanded="true"] + .faq__a{display:block}
.aff .on-dark .faq,.aff .on-dark .faq__item{border-color:var(--dark-line)}
.aff .on-dark .faq__q{color:var(--on-dark)}
.aff .on-dark .faq__num{color:var(--on-dark-2)}
.aff .on-dark .faq__q:hover span:nth-child(2){color:var(--green)}
.aff .on-dark .plus::before,.aff .on-dark .plus::after{background:var(--on-dark)}
.aff .on-dark .faq__a{color:var(--on-dark-2)}
.aff .faq-sec{border-top:1px solid var(--dark-line)}
.aff .why{padding:72px 0}
.aff .why__head .eyebrow{margin-bottom:14px}
.aff .why__t{font-size:clamp(40px,3.8vw,56px)}
.aff .why .h3{font-size:28px}
.aff .why p{text-wrap:pretty}
.aff .why--a .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);gap:56px;align-items:center}
.aff .why-a__cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--dark-line)}
.aff .why-a__cell{padding:4px 28px;border-right:1px solid var(--dark-line)}
.aff .why-a__icon{width:52px;height:52px;border-radius:10px;background:var(--green);color:var(--ink);display:grid;place-items:center;margin-bottom:20px}
.aff .why-a__cell p{margin-top:8px;color:var(--on-dark-2);font-size:15px}
.aff .who-s{padding:64px 0}
.aff .who-s__wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);gap:56px;align-items:center}
.aff .who-s__t{font-size:clamp(36px,3.4vw,48px)}
.aff .who-s__list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.aff .who-s__list li{display:flex;flex-direction:column;gap:14px}
.aff .who-s__icon{flex:none;width:44px;height:44px;border-radius:10px;background:var(--dark-2);border:1px solid var(--dark-line);color:var(--green);display:grid;place-items:center}
.aff .who-s__list h3{font:400 22px/1.05 var(--display);text-transform:uppercase}
.aff .who-s__list p{margin-top:6px;font-size:14px;color:var(--on-dark-2);text-wrap:pretty}
@media (max-width:1100px){
  .aff{--sec-pad:104px}
  .aff .hero__grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .aff .hero__art{justify-self:start;max-width:560px}
  .aff .why--a .wrap,.aff .who-s__wrap{grid-template-columns:minmax(0,1fr);gap:36px}
  .aff .who-s__list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .aff .partners{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aff .partner:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:680px){
  .aff{--gutter:20px;--sec-pad:80px;--gap:16px}
  .aff .hero{padding:64px 0 72px;background-size:96px 96px}
  .aff .h1{font-size:54px;margin:20px 0 28px}
  .aff .lede{font-size:17px}
  .aff .hero__cta{flex-direction:column;align-items:stretch;gap:20px}
  .aff .hero__cta .btn{width:100%;height:56px}
  .aff .hero__cta .textlink{align-self:flex-start}
  .aff .sec__head{flex-direction:column;align-items:flex-start;margin-bottom:40px}
  .aff .sec__aside{text-align:left}
  .aff .title{font-size:48px}
  .aff .why,.aff .who-s{padding:56px 0}
  .aff .why-a__cells{grid-template-columns:1fr;border-left:0}
  .aff .why-a__cell{display:grid;grid-template-columns:52px 1fr;column-gap:16px;padding:18px 0;border-right:0;border-top:1px solid var(--dark-line)}
  .aff .why-a__icon{grid-row:span 2;margin:0}
  .aff .who-s__list{grid-template-columns:1fr;row-gap:20px}
  .aff .who-s__list li{flex-direction:row}
  .aff .partners{grid-template-columns:1fr}
  .aff .partner:last-child:nth-child(odd){grid-column:auto}
  .aff .steps{grid-template-columns:1fr;border-top:0;border-left:1.5px solid var(--ink);margin-left:5px}
  .aff .step,.aff .step:first-child{border-left:0;padding:0 0 44px 28px}
  .aff .step::before,.aff .step:first-child::before{top:0;left:-6.5px}
  .aff .step__n{font-size:64px}
  .aff .step .h3{margin-top:16px;font-size:30px}
  .aff .faq__q{grid-template-columns:40px 1fr 24px}
  .aff .faq__q span:nth-child(2){font-size:24px}
  .aff .faq__a{padding:0 0 24px 40px}
}

/* ---------- adaptations for the live site ---------- */
/* Grid tracks never grow past the viewport: a bare 1fr track has a
   min-content floor, and the clip player's capsule row (nowrap, scrolls on
   phones) is wider than a phone screen, which pushed the hero heading and
   Apply button off the right edge. minmax(0,1fr) plus min-width:0 keeps the
   track at the container width and lets the capsule row scroll as designed. */
.aff .hero__grid>*,.aff .why--a .wrap>*,.aff .who-s__wrap>*{min-width:0}
/* Page surface: the handoff set these on body. */
.aff{background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
/* The live header is fixed (60px, no ticker): the hero keeps the handoff's
   space under the header by adding the header height on top. */
.aff .hero{padding-top:160px}
/* Hero visual: the home page clip player in place of the photo oval. It fills
   the right column; the pill row's phone scroll bleeds to the page gutter. */
.aff .hero__art{--v3-gutter:var(--gutter)}
.aff .hero__art .v3-player{margin:0;max-width:none}
@media (max-width:680px){
  .aff .hero{padding-top:124px}
  .aff .hero__art{max-width:none}
}