/*! ctii-page 1.0.2 | /product/trend-innovation-intelligence to Figma "Product - Trend and Innovation Intelligence V3" (frame 4757:39389).
   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: clay band (texture exported from the band group) behind the "brand against ingredient" heat map;
     phones get the same card restacked in three groups of three ingredients (ctii-band-card-m-2x, 720 x 2319)
   - how it works: four compact steps (Figma rows 93px, step 1 on two lines = 114px), titles at 20px;
     the open step's text stays pinned to the column bottom (column 752 tall)
   - stories + tab copy + hero sub: measures from the middle of the range that keeps every Figma line break at 992+
     (ccon/check/lines.py with ctii/check/fig-lines.json prints the ranges), greedy wrapping where a measure is set
   - tabs heading: only "Clayface Trend Intelligence" is bold (span added on the page); all five panels = the 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:635.7px}
  .cfh-page .cfh-s02 .cfh-s02-h1{max-width:942.8px;margin-left:auto;margin-right:auto;text-wrap:wrap}
}

/* ---- band ---- */
.cfh-page .cfh-s03 .cfh-s03-bg{background-image:url("https://cdn.prod.website-files.com/691ac89c63463f1a7f195c1a/6ad615dff1c2fec9d2c77ddc_ctii-band-texture-2x.webp");background-color:#A07965}
.cfh-page .cfh-s03 .cfs-media-dash-m{aspect-ratio:360/1160;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}
  /* step 1 keeps the Figma two lines (its title box is 259 wide); the others sit on one line */
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-title="1"] .cfh-s08-ln{display:block}
  .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:409px}
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-panel="2"] .cfh-s08-p{max-width:409px}
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-panel="3"] .cfh-s08-p{max-width:403px}
  .cfh-page .cfh-s08[data-cfh-sec="s08-video"] [data-cfh-acc-panel="4"] .cfh-s08-p{max-width:381px}
}
@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:325px}
  .cfh-page [data-cfh-sec="si-case-forums"] .cfs-case-copy{max-width:501.8px}
  .cfh-page [data-cfh-sec="si-case-forums"] .cfs-case-quote-text{max-width:498.7px}
  .cfh-page [data-cfh-sec="si-case-ambassador"] .cfs-case-title{max-width:334.6px}
  .cfh-page [data-cfh-sec="si-case-ambassador"] .cfs-case-copy{max-width:506.5px}
  .cfh-page [data-cfh-sec="si-case-ambassador"] .cfs-case-quote-text{max-width:519px}
}

/* ---- 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:653.5px;text-wrap:wrap}
  .cfh-page .cfh-s06 .cfh-s06-title{max-width:766.8px}
}

/* ---- 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:360px}
  .cfh-page .cfh-s06 [data-cfh-panel="video-intelligence"] .cfh-s06-copy-body{max-width:362.7px}
  .cfh-page .cfh-s06 [data-cfh-panel="creator-watchlist"] .cfh-s06-copy-title{max-width:197.4px}
  .cfh-page .cfh-s06 [data-cfh-panel="creator-watchlist"] .cfh-s06-copy-body{max-width:340px}
  .cfh-page .cfh-s06 [data-cfh-panel="competitor-tracking"] .cfh-s06-copy-title{max-width:213px}
  .cfh-page .cfh-s06 [data-cfh-panel="competitor-tracking"] .cfh-s06-copy-body{max-width:295.7px}
  .cfh-page .cfh-s06 [data-cfh-panel="cross-channel"] .cfh-s06-copy-title{max-width:225.6px}
  .cfh-page .cfh-s06 [data-cfh-panel="cross-channel"] .cfh-s06-copy-body{max-width:298.5px}
  .cfh-page .cfh-s06 [data-cfh-panel="theme-clustering"] .cfh-s06-copy-title{max-width:223.9px}
  .cfh-page .cfh-s06 [data-cfh-panel="theme-clustering"] .cfh-s06-copy-body{max-width:325.6px}
}

/* ---- 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:553px}
  .cfh-page .cpf-sub{max-width:502px}
  .cfh-page .cpf-stats{margin-top:56px}   /* Figma keeps the stats at 5577 under a three-line sub */
}

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