/*! ccon-page 1.0.2 | /product/consumer-intelligence to Figma "Product - Consumer Intelligence V3" (frame 4757:30152).
   Loads last, after cfs-page 1.0.4 + cfr-page 1.0.1 + cpf-form 1.0.0. Visuals are static posters from the Figma frames.
   - band: blue clay band (texture exported from the band group) behind the "what recent customers say" card;
     phones get the same card restacked (ccon-band-card-m-2x, 720 x 2977 = 360 x 1489 css px)
   - how it works: four compact steps (Figma rows 93px: 36 + 21px title + 35 + 1px rule), titles on one line at 20px;
     the open step's text stays pinned to the column bottom (column 752 tall, as the 3-step pages)
   - stories + tab copy + hero sub: measures from the middle of the range that keeps every Figma line break at 992+
     (ccon/check/lines.py prints the ranges), greedy wrapping where a measure is set
   - tabs heading: only "Five Reasons" is bold (span added on the page); all five panels = the shared light clay
   - the old demo band is hidden on the page; the Figma form section (cpf-form) replaces it */

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

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

/* ---- how it works: compact one-line steps ---- */
.cfh-page .cfh-s08[data-cfh-sec="s08-video"] .cfh-s08-ln{display:inline}
.cfh-page .cfh-s08[data-cfh-sec="s08-video"] .cfh-s08-ln+.cfh-s08-ln::before{content:" "}
.cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-title]{font-size:20px;line-height:21px;letter-spacing:-0.2px}
@media (min-width:992px){
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-item][data-cfh-acc-open]{padding:36px 36px 35px 35px}
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-title]{white-space:nowrap}
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-panel] .cfh-s08-p{text-wrap:wrap}
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-panel="1"] .cfh-s08-p{max-width:389.2px}
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-panel="2"] .cfh-s08-p{max-width:389px}
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-panel="3"] .cfh-s08-p{max-width:383px}
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-panel="4"] .cfh-s08-p{max-width:356px}
}
@media (max-width:991px){
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-title]{line-height:1.15;text-wrap:pretty}
}

/* ---- stories ---- */
@media (min-width:992px){
  /* ccase (linked from inside the page) balances titles; greedy here so the Figma break holds */
  .cfh-page .cfh-sec .cfs-case-title{text-wrap:wrap}
  .cfh-page [data-cfh-sec="si-case-forums"] .cfs-case-title{max-width:392px}
  .cfh-page [data-cfh-sec="si-case-forums"] .cfs-case-copy{max-width:418px}
  .cfh-page [data-cfh-sec="si-case-forums"] .cfs-case-quote-text{max-width:392px}
  .cfh-page [data-cfh-sec="si-case-ambassador"] .cfs-case-title{max-width:425px}
  .cfh-page [data-cfh-sec="si-case-ambassador"] .cfs-case-copy{max-width:494px}
  /* Figma breaks this quote after "well" although line 1 is wider than line 2 + "enough": the text carries a
     newline there, honoured only here (pre-line); smaller screens wrap it normally */
  .cfh-page [data-cfh-sec="si-case-ambassador"] .cfs-case-quote-text{max-width:486px;white-space:pre-line}
}

/* ---- tabs heading: "Five Reasons" 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}
@media (min-width:992px){
  .cfh-page .cfh-s06 .cfh-s06-intro{max-width:520px;text-wrap:wrap}
}

/* ---- tab copy: per-tab measures that give the Figma line breaks ---- */
@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-title{max-width:233px}
  .cfh-page .cfh-s06 [data-cfh-panel="video-intelligence"] .cfh-s06-copy-body{max-width:336px}
  .cfh-page .cfh-s06 [data-cfh-panel="creator-watchlist"] .cfh-s06-copy-title{max-width:227px}
  .cfh-page .cfh-s06 [data-cfh-panel="creator-watchlist"] .cfh-s06-copy-body{max-width:262.6px}
  .cfh-page .cfh-s06 [data-cfh-panel="competitor-tracking"] .cfh-s06-copy-title{max-width:242px}
  .cfh-page .cfh-s06 [data-cfh-panel="competitor-tracking"] .cfh-s06-copy-body{max-width:294.5px}
  .cfh-page .cfh-s06 [data-cfh-panel="cross-channel"] .cfh-s06-copy-title{max-width:234px}
  .cfh-page .cfh-s06 [data-cfh-panel="cross-channel"] .cfh-s06-copy-body{max-width:304.6px}
  .cfh-page .cfh-s06 [data-cfh-panel="theme-clustering"] .cfh-s06-copy-title{max-width:198px}
  .cfh-page .cfh-s06 [data-cfh-panel="theme-clustering"] .cfh-s06-copy-body{max-width:317.8px}
}

/* ---- 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%}
}

/* ---- form section: Figma heading + sub measures ---- */
@media (min-width:992px){
  .cfh-page .cpf-h2{max-width:600.3px}
  .cfh-page .cpf-sub{max-width:594.8px}
}

/* ---- step links below 480: 14px, the arrow stays on the last text line instead of wrapping alone (1.0.1) ---- */
@media (max-width:479px){
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-panel] .cfh-s08-link{display:inline-flex;align-items:center;max-width:100%;font-size:14px}
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-panel] .cfh-s08-link-t{min-width:0}
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-panel] .cfh-s08-arrow{flex:none}
}

/* ---- 1.0.2: Rive cards. Same phone swap as cci-page 1.0.1 (the .cci-m class is shared). ---- */
/* ---- 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}
}