/*! ccpl-page 1.0.1 | /roles/creator-partnerships-lead to Figma 4637:101242 ("By Role - Creator Partnerships Lead V3", 1920 frame).
   Same build as HOCI (chci-page): "What our influencer marketing analytics do for creator teams" is 3 icon columns (section
   .cvoc-tells, classes shared with VoC/CA/TA/ID/camp/DSM/HOCI/HSM/BD/HMA), the tab accordion is hidden, band + carousel visuals are Figma
   statics (3 slides from the doc; Figma draws 2: slide 2 = the main frame, slide 3 = state frame "2"). Loads after crole-page 1.0.0.
   Widths below come from check/fitscan.py (real rendering, every width that gives the Figma breaks; the middle is used). */
/* Figma stats start at 2069: 121px under the 5-line columns (as TA/ID/DSM/HOCI) */
.cfh-page .cvoc-tells{position:relative;padding:120px 0 121px}
/* 48/48, Figma breaks after "marketing" (box 671; Geist keeps it between 662 and 872 + the 36px insets) */
.cfh-page .cvoc-tells-h2{margin:0 0 95px;padding:0 36px;max-width:839px;text-wrap:balance;font-family:var(--cfh-display);font-weight:400;font-size:48px;line-height:48px;letter-spacing:-0.96px;color:#1D0A05}
.cfh-page .cvoc-tells-em{font-weight:600}
.cfh-page .cvoc-tells-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cfh-page .cvoc-tells-col{padding:0 36px}
.cfh-page .cvoc-tells-ico{display:flex;align-items:flex-end;height:24px;margin:0 0 16px}
.cfh-page .cvoc-tells-svg{display:block;flex:none}
.cfh-page .cvoc-tells-title{margin:0 0 16px;max-width:301px;font-family:var(--cfh-display);font-weight:500;font-size:20px;line-height:24px;letter-spacing:-0.4px;color:#1D0A05;text-wrap:balance}
.cfh-page .cvoc-tells-text{margin:0;max-width:322px;font-family:var(--cfh-sans);font-weight:400;font-size:16px;line-height:1.3;letter-spacing:-0.16px;color:#1D0A05;text-wrap:pretty}
/* Figma title boxes 180 / 208 / 193 and copy boxes 257 / 251 / 248; Geist gives the same breaks at
   183-226, 213-222, 189-205 and 253-273, 244-270, 242-256 */
@media (min-width:992px){
  .cfh-page .cvoc-tells-col:nth-child(1) .cvoc-tells-title{max-width:204.5px;text-wrap:wrap}
  .cfh-page .cvoc-tells-col:nth-child(2) .cvoc-tells-title{max-width:217.5px;text-wrap:wrap}
  .cfh-page .cvoc-tells-col:nth-child(3) .cvoc-tells-title{max-width:197px;text-wrap:wrap}
  .cfh-page .cvoc-tells-col:nth-child(1) .cvoc-tells-text{max-width:263px;text-wrap:wrap}
  .cfh-page .cvoc-tells-col:nth-child(2) .cvoc-tells-text{max-width:257px;text-wrap:wrap}
  .cfh-page .cvoc-tells-col:nth-child(3) .cvoc-tells-text{max-width:249px;text-wrap:wrap}
}
@media (max-width:991px){
  .cfh-page .cvoc-tells{padding:64px 0}
  .cfh-page .cvoc-tells-h2{margin-bottom:40px;padding:0 32px;max-width:640px;font-size:40px;line-height:42px;letter-spacing:-0.8px;text-wrap:balance}
  .cfh-page .cvoc-tells-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .cfh-page .cvoc-tells-col{padding:0 32px}
  .cfh-page .cvoc-tells-title,.cfh-page .cvoc-tells-text{max-width:560px}
}
@media (max-width:767px){
  .cfh-page .cvoc-tells{padding:56px 0}
  .cfh-page .cvoc-tells-h2{margin-bottom:32px;padding:0 24px;font-size:30px;line-height:33px;letter-spacing:-0.6px}
  .cfh-page .cvoc-tells-grid{row-gap:32px}
  .cfh-page .cvoc-tells-col{padding:0 24px}
  .cfh-page .cvoc-tells-title{margin-bottom:12px;font-size:18px;line-height:23px;letter-spacing:-0.3px}
  .cfh-page .cvoc-tells-text{line-height:22px}
}
@media (max-width:479px){
  .cfh-page .cvoc-tells-h2,.cfh-page .cvoc-tells-col{padding-left:20px;padding-right:20px}
}

/* ---- hero (Figma: no eyebrow; "Get" regular + "higher influencer marketing ROI" bold on line 1; sub 738 wide, 2 lines).
   H1 text = the P-21 doc ("... from every creator you pay"); the Figma H1 ends "... that finds what is rising and what will last"
   (Trend Analysis copy), so the doc line breaks after "ROI" to keep the bold run on line 1 as drawn ---- */
.cfh-page .cfh-s02 .cfs-hero-eyebrow{display:none}
.cfh-page .cfh-s02 .cfh-s02-h1-em{display:inline}
.cfh-page .cfh-s02 .cfh-s02-h1-em::after{content:none}
@media (min-width:992px){
  /* Figma: H1 top 220 (21px lower than HOCI/HMA: the sub is 2 lines, buttons stay at 440), sub top 368 (20px under the 128px H1);
     "Get higher influencer marketing ROI" / "from every creator you pay" between 1050 and 1196 */
  .cfh-page .cfh-s02 .cfh-s02-h1{max-width:1123px;margin-top:42px;margin-bottom:20px;text-wrap:wrap}
  /* sub box 738: the same 2 breaks between 729 and 753 */
  .cfh-page .cfh-s02 .cfh-s02-sub{max-width:741px;text-wrap:wrap}
}

/* ---- band: the Figma creator card (same card as /solution/influencer-discovery: poster cid-band-card, Rive id-band-creator),
   1096 x 442 at 412/630 (107 from the left rail, 102 from the band top) on this Figma's brown grain texture ---- */
.cfh-page .cfh-s03 .cfh-s03-bg{background-image:url("https://cdn.prod.website-files.com/691ac89c63463f1a7f195c1a/6acc95b72c9cca4363e228d6_ccpl-band-texture-2x.webp");background-color:#987561}
.cfh-page .cfh-s03 .csl-band-card{aspect-ratio:1096/442}
.cfh-page .cfh-s03 .csl-band-poster{display:block;width:100%;height:100%;object-fit:contain}
@media (min-width:992px){
  .cfh-page .cfh-s03 .cfh-s03-card{aspect-ratio:1310/646}
  .cfh-page .cfh-s03 .csl-band-card{width:83.6641%;margin-top:7.7863%;margin-left:8.1679%}
}

/* ---- feature carousel (3 slides, doc order): slide 1 "posts with no tag" has no Figma (the Figma carousel has 2 slides), so it
   gets 2 + 4 lines like its neighbours; slide 2 = main frame (title box 438, copy 383), slide 3 = state frame "2" (title 428,
   copy 415); fitted in Geist (ranges 436-530, 442-545 and 371-399, 409-437; slide 1 426-491 and 431-450) ---- */
@media (min-width:768px){
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide-title{max-width:520px;text-wrap:wrap}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide:nth-child(1) .csl-slide-title{max-width:458.5px}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide:nth-child(2) .csl-slide-title{max-width:483px}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide:nth-child(3) .csl-slide-title{max-width:493.5px}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide-body{max-width:520px;text-wrap:wrap}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide:nth-child(1) .csl-slide-body{max-width:440.5px}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide:nth-child(2) .csl-slide-body{max-width:385px}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide:nth-child(3) .csl-slide-body{max-width:423px}
}
/* ---- CTA band: heading on one line as in Figma ("See which creators are worth renewing") ---- */
@media (min-width:992px){
  .cfh-page .cfh-s13 .cfh-s13-head{max-width:none}
}
/* ---- testimonial + FAQ (same geometry as the VoC, CA, TA, ID, campaign, DSM, HOCI and HMA frames) ---- */
@media (min-width:992px){
  .cfh-page .cfh-s10 .cfh-s10-quote{min-height:78px}
  /* this Figma's answer box is 571 wide (28 + 571 + 27 padding); Geist keeps its 3 breaks between 558 and 574 */
  .cfh-page .cfh-s12 .cfh-s12-panel-inner > .cfs-faq-answer{max-width:621px;text-wrap:wrap}
}

/* ---- phone layouts of the Rive cards (1.0.1): below 992 (band) / 768 (carousel) the desktop artboards (1096 / 756 wide) shrink
   to unreadable text, so 360 px phone artboards with the same content show there instead (.ccpl-band-m / .ccpl-slide-m, keys
   id-band-creator-m, hma-slide-video-m, cpl-slide-rivals-m, cpl-slide-roster-m). csl-page's [data-cfh-rive]{display:grid}
   would show both wrappers, hence the (0,3,0) rules. ---- */
.cfh-page .cfh-s03 .ccpl-band-m{display:none}
.cfh-page [data-cfh-sec="sl-carousel"] .ccpl-slide-m{display:none}
@media (max-width:991px){
  .cfh-page .cfh-s03 .cfh-s03-card{aspect-ratio:auto}
  .cfh-page .cfh-s03 .csl-band-stage{display:block;padding:40px 24px;overflow:visible}
  .cfh-page .cfh-s03 .csl-band-card{display:none}
  .cfh-page .cfh-s03 .ccpl-band-m{display:grid;width:100%;max-width:440px;aspect-ratio:360/994;margin:0 auto;background-color:#FCFBF8}
}
@media (max-width:479px){
  .cfh-page .cfh-s03 .csl-band-stage{padding:24px 16px}
}
@media (max-width:767px){
  /* all phone slides are 360 x 660, so the carousel row is the same height for each */
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide-visual{display:none}
  .cfh-page [data-cfh-sec="sl-carousel"] .ccpl-slide-m{display:grid;grid-row:2;align-self:start;width:100%;max-width:440px;aspect-ratio:360/660;margin-top:32px;background-color:#F4F2EE;overflow:hidden}
}