/*! cwp-page 1.0.3 | /whitepaper/brand-intelligence to Figma "Whitepaper V3" (frame 4901:36275, 1920 x 1253).
   Loads after cfs-page + cfr-page + cdm-page (the /demo hero + form card): copy (H1, sub, 3 points) | form card, footer2. */

/* ---- left column: H1 + sub at the top, the 3 points pinned to the bottom of the row (Figma 180 / 298 / 508-588) ---- */
.cfh-page [data-cfh-sec="wp-hero"] .cdm-hero-copy{justify-content:flex-start}
.cfh-page .cwp-left{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.cfh-page .cwp-top{display:flex;flex-direction:column;align-items:flex-start}
/* Figma rounds the 105% line height to 34px per line (box 102 for 3 lines) */
.cfh-page .cwp-h1{margin:0;max-width:384px;font-family:'Artifictrial',var(--cfh-display);font-weight:500;font-size:32px;line-height:34px;letter-spacing:-0.5px;color:#1D0A05;font-variant-alternates:styleset(cdm-l)}
/* 1.0.3 (user 2026-10-22: "yes strike it"): "chase answers across teams and tools" struck through, as on the old page,
   so the headline reads "How modern CMOs ... operate with clarity"; Figma's 3 lines are kept, the line runs through each piece */
.cfh-page .cwp-strike{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:currentColor;text-decoration-skip-ink:none}
.cfh-page .cwp-sub{margin:16px 0 0;max-width:317px;font-family:var(--cfh-sans);font-weight:400;font-size:16px;line-height:21px;letter-spacing:-0.16px;color:#1D0A05}
/* 1.0.1: points wrap to 2 lines on small desktops, tablets and phones, so each line box is 20.8px (16px text, 1.3) and the gap
   11.2px: single lines keep Figma's 32px rhythm (text 16px box + 16px gap); -3.9px below puts the glyphs where Figma draws them */
.cfh-page .cwp-points{display:flex;flex-direction:column;gap:11.2px;margin:0 0 -3.9px;padding:0;list-style:none}
.cfh-page .cwp-point{position:relative;margin:0;padding:0 0 0 17px;font-family:var(--cfh-sans);font-weight:400;font-size:16px;line-height:20.8px;letter-spacing:-0.16px;color:#1D0A05}
/* orange diamond: a 4.57px square turned 45deg = Figma's 6.46px marker, centre 3.2px in and 8.9px below Figma's 16px line top (9.8 in the 20.8px box)
   (Figma's three markers sit 10.0 / 8.8 / 7.8px down, placed by hand; one even offset keeps them within 1.1px) */
.cfh-page .cwp-point::before{content:"";position:absolute;left:0.95px;top:7.5px;width:4.57px;height:4.57px;background-color:#FF5400;transform:rotate(45deg)}

@media (min-width:992px){
  /* row 531 + the hero's 1px border = Figma 88..620: copy 92 top / 31 bottom, card 120..588 (32 + 468 + 31) */
  .cfh-page [data-cfh-sec="wp-hero"] .cdm-hero-copy{padding-top:92px;padding-bottom:31px}
  .cfh-page [data-cfh-sec="wp-hero"] .cdm-hero-form{padding-bottom:31px}
  /* 120 between the hero and footer2 (Figma 620 -> 740; footer2's own top margin is 90 and would swallow a hero margin) */
  .cfh-page [data-cfh-sec="wp-hero"] + .cfh-foot{margin-top:120px}
}

/* ---- the form: Figma shows the required marks ("FIRST NAME*") that the /demo card hides ---- */
.cwp-hs .hs-form-required{display:inline}

/* 1.0.2: the page is shorter than tall screens (2560 x 1440): the body behind it is Figma's page colour, not white */
html,body{background-color:#FCFBF8}