/*! chec-page 1.0.1 | /roles/head-of-ecommerce to Figma 4652:128983 ("By Role - Head of Ecommerce V3", 1920 frame).
   Same build as HOCI (chci-page): "What our ecommerce analytics tools do for ecommerce 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: slide 1 = the main frame, slides 2 and 3 = state frames "2" and "4"). 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 "analytics" (box 682; Geist keeps it between 674 and 789 + the 36px insets) */
.cfh-page .cvoc-tells-h2{margin:0 0 95px;padding:0 36px;max-width:803.5px;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 224 / 180 / 253 and copy boxes 255 / 260 / 239; Geist gives the same breaks at
   200-255, 186-233, 209-264 and 248-260, 259-281, 226-239 */
@media (min-width:992px){
  .cfh-page .cvoc-tells-col:nth-child(1) .cvoc-tells-title{max-width:227.5px;text-wrap:wrap}
  .cfh-page .cvoc-tells-col:nth-child(2) .cvoc-tells-title{max-width:209.5px;text-wrap:wrap}
  .cfh-page .cvoc-tells-col:nth-child(3) .cvoc-tells-title{max-width:236.5px;text-wrap:wrap}
  .cfh-page .cvoc-tells-col:nth-child(1) .cvoc-tells-text{max-width:254px;text-wrap:wrap}
  .cfh-page .cvoc-tells-col:nth-child(2) .cvoc-tells-text{max-width:270px;text-wrap:wrap}
  .cfh-page .cvoc-tells-col:nth-child(3) .cvoc-tells-text{max-width:232.5px;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; "Ecommerce analytics" bold inline, line 1 ends after "helps"; sub 626 wide, 3 lines) ---- */
.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 199, sub top 347 (20px under the 128px H1) as HOCI / HMA; breaks after "helps" between 925 and 1063 */
  .cfh-page .cfh-s02 .cfh-s02-h1{max-width:994px;margin-top:21px;margin-bottom:20px;text-wrap:wrap}
  /* sub box 626: the same 3 breaks between 608 and 650 */
  .cfh-page .cfh-s02 .cfh-s02-sub{max-width:629px;text-wrap:wrap}
}

/* ---- band: the Figma reviews + prices card (same card as /solution/digital-shelf-monitoring: poster cdsm-band-card, Rive
   dsm-band-reviews), 1096 x 442 at 412/630 (107 from the left rail, 102 from the band top) on the olive grain texture this Figma
   shares with /roles/head-of-social-media (same image, chsm-band-texture) ---- */
.cfh-page .cfh-s03 .cfh-s03-bg{background-image:url("https://cdn.prod.website-files.com/691ac89c63463f1a7f195c1a/6ac8c297c28f2b9bca5a194c_chsm-band-texture-2x.webp");background-color:#5A604C}
.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): slide 1 = main frame (title box 552, copy 470), slides 2 and 3 = state frames "2" and "4"
   (titles 428 / 497, copy 415 / 435); fitted in Geist (ranges 552-684, 391-456 and 468-479, 381-422, 428-437). Slide 3's
   Figma title sets "that" on line 2 although line 2 is then wider than line 1 + "that" (0.7 px in Geist), so its word gaps
   are 2px tighter to make room for the Figma break (503-505) ---- */
@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:618px}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide:nth-child(2) .csl-slide-title{max-width:423.5px}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide:nth-child(3) .csl-slide-title{max-width:504px;word-spacing:-2px}
  .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:473.5px}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide:nth-child(2) .csl-slide-body{max-width:401.5px}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide:nth-child(3) .csl-slide-body{max-width:432.5px}
}
/* ---- CTA band: heading on one line as in Figma ("See what your reviews are telling you to fix") ---- */
@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, HMA and CPL 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 564 and 580 */
  .cfh-page .cfh-s12 .cfh-s12-panel-inner > .cfs-faq-answer{max-width:627px;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 (.chec-band-m / .chec-slide-m, keys
   dsm-band-reviews-m, hec-slide-stores-m, hec-slide-video-m, hec-slide-timeline-m). csl-page's [data-cfh-rive]{display:grid}
   would show both wrappers, hence the (0,3,0) rules. ---- */
.cfh-page .cfh-s03 .chec-band-m{display:none}
.cfh-page [data-cfh-sec="sl-carousel"] .chec-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 .chec-band-m{display:grid;width:100%;max-width:440px;aspect-ratio:360/878;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"] .chec-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}
}