/*! cci-page 1.0.1 | /product/competitive-intelligence to Figma "Product - Competitive Intelligence V3" (canvas 4753:20859,
   frame 4753:20860, tab states 4759:53 / 4759:168, capability tab states 4778:4135 / 4784:4630 / 4779:67840 / 4777:58666).
   Loads last, after cfs-page 1.0.4 + cfr-page 1.0.1. 1.0.1 = 1.0.0 + the Rive phone cards: below 768 every section-3 card and
   every tab card swaps to its 360 x 660 phone card (.cci-m wrappers next to the desktop ones), and the band phone card takes
   its own artboard size.
   - band: green clay band (texture exported from group 4753:20918) behind the "ratings across stores" card 4753:29925;
     phones get the same card with its three panels stacked (cci-band-card-m-2x, 415 x 1632)
   - capability tabs: all five panels = the shared light clay (brightness .585, contrast 5.8, 26%) over the cfs-page
     base colours, as in Figma (modelled against the five Figma texture exports: mean error <= 2 levels); the AD ACTIVITY
     and PRODUCT GAPS panels had their own full textures on the old page, so they are switched back to the clay
     treatment; every card 519 x 531 at the Figma left offset 177/873
   - hero: the sub breaks into the Figma two lines (802 = middle of the 783..822 range that keeps that break)
   - stories + tab copy: greedy wrapping and measures picked from the middle of the range that keeps every Figma line
     break at 992+ (check/lines.py prints the ranges), so small font-rendering differences do not move a word
   - tabs heading: only "Five Ways" is bold (span added on the page)
   - demo band: Figma has only the heading and one button (band 294 = 90 + 48 + 30 + 36 + 90) */

/* ---- hero ---- */
@media (min-width:992px){
  .cfh-page .cfh-s02 .cfh-s02-sub{max-width:802px}
}

/* ---- band ---- */
.cfh-page .cfh-s03 .cfh-s03-bg{background-image:url("https://cdn.prod.website-files.com/691ac89c63463f1a7f195c1a/6ad1edf7fb3530fd0faa9909_cci-band-texture-2x.webp");background-color:#4A513B}
.cfh-page .cfh-s03 .cfs-media-dash-m{aspect-ratio:360/1298;width:min(100% - 48px,360px)}

/* ---- stories: measures that give the Figma line breaks (midpoint of the range that keeps every break) ---- */
@media (min-width:992px){
  .cfh-page [data-cfh-sec="si-case-forums"] .cfs-case-copy{max-width:517px}
  .cfh-page [data-cfh-sec="si-case-forums"] .cfs-case-quote-text{max-width:478px}
  .cfh-page [data-cfh-sec="si-case-ambassador"] .cfs-case-copy{max-width:513px}
  .cfh-page [data-cfh-sec="si-case-ambassador"] .cfs-case-quote-text{max-width:510px}
}

/* ---- capability tabs heading: "Five Ways" bold, the rest regular ---- */
.cfh-page .cfh-s06 .cfh-s06-title-a{font-weight:400}
.cfh-page .cfh-s06 .cfh-s06-title-a > span{font-weight:600}

/* ---- capability tabs copy: per-tab measures that give the Figma line breaks (midpoint of the safe range) ---- */
@media (min-width:992px){
  .cfh-page .cfh-s06 :is(.cfh-s06-copy-title,.cfh-s06-copy-body){text-wrap:wrap}
  .cfh-page .cfh-s06 [data-cfh-panel="video-intelligence"] .cfh-s06-copy-body{max-width:319px}
  .cfh-page .cfh-s06 [data-cfh-panel="creator-watchlist"] .cfh-s06-copy-title{max-width:196px}
  .cfh-page .cfh-s06 [data-cfh-panel="creator-watchlist"] .cfh-s06-copy-body{max-width:252px}
  .cfh-page .cfh-s06 [data-cfh-panel="competitor-tracking"] .cfh-s06-copy-title{max-width:268px}
  .cfh-page .cfh-s06 [data-cfh-panel="competitor-tracking"] .cfh-s06-copy-body{max-width:245px}
  .cfh-page .cfh-s06 [data-cfh-panel="cross-channel"] .cfh-s06-copy-title{max-width:227px}
  .cfh-page .cfh-s06 [data-cfh-panel="cross-channel"] .cfh-s06-copy-body{max-width:242px}
  .cfh-page .cfh-s06 [data-cfh-panel="theme-clustering"] .cfh-s06-copy-title{max-width:289px}
  .cfh-page .cfh-s06 [data-cfh-panel="theme-clustering"] .cfh-s06-copy-body{max-width:325px}
}

/* ---- capability tabs: the light clay treatment on all five panels (base colours stay those of cfs-page) ---- */
.cfh-page .cfh-s06 .cfh-s06-panel[data-cfh-panel] .cfh-s06-clay{opacity:.26;filter:brightness(.585) contrast(5.8)}
.cfh-page .cfh-s06 .cfh-s06-panel[data-cfh-panel] .cfh-s06-clay[data-cfh-anim]{opacity:.26!important}
@media (min-width:992px){
  .cfh-page .cfh-s06 .cfh-s06-panel[data-cfh-panel="video-intelligence"] .cfh-s06-rive{left:20.27%}
}

/* ---- demo band: heading + one button ---- */
.cfh-page .cfh-s13 .cfh-s13-sub{display:none}
.cfh-page .cfh-s13 .cfh-s02-btn-outline{display:none}
.cfh-page .cfh-s13 .cfh-s13-head{margin-bottom:30px}
@media (min-width:992px){
  .cfh-page .cfh-s13 .cfh-s13-band{padding:90px 24px}
}
@media (max-width:479px){
  .cfh-page .cfh-s13 .cfh-s13-head{margin-bottom:24px}
}

/* ---- Rive phone cards (< 768): section-3 + tab cards swap to their 360 x 660 versions.
   cfs-page shows every [data-cfh-rive] as a grid at (0,2,0), so the phone wrappers are hidden at (0,4,0) by default. ---- */
.cfh-page .cfh-sec [data-cfh-rive].cci-m{display:none}
@media (max-width:767px){
  .cfh-page .cfh-s08 .cfh-s08-visual{aspect-ratio:auto;padding:16px}
  .cfh-page .cfh-s08 .cfh-s08-visual [data-cfh-rive].cfh-s08-rive{display:none}
  .cfh-page .cfh-s08 .cfh-s08-visual [data-cfh-rive].cci-m{display:grid;position:relative;width:100%;max-width:360px;aspect-ratio:360/660;margin:0 auto}
  .cfh-page .cfh-s06 .cfh-s06-media::before{display:none}
  .cfh-page .cfh-s06 .cfh-s06-media{padding:16px}
  .cfh-page .cfh-s06 .cfh-s06-panel[data-cfh-panel] [data-cfh-rive].cfh-s06-rive{display:none}
  .cfh-page .cfh-s06 .cfh-s06-media [data-cfh-rive].cci-m{display:grid;position:relative;z-index:1;width:100%;max-width:360px;aspect-ratio:360/660;margin:0 auto}
  .cfh-page .cfh-s06 .cfh-s06-panel[data-cfh-panel-active="false"] [data-cfh-rive].cci-m{display:none}
}