in the mockup ---------- .cfp-eyebrow carries its colour and 0.78rem size, and under Elementor that class lands on the Text Editor's wrapper while the text sits in a

inside it. Any rule that targets paragraphs in the same block then hits the eyebrow, which a

never was: .cfp-section-head p{color:var(--muted); font-size:var(--fs-body-lg)} turned it grey at body size, and .cfp-setup-copy's lede rule would tint it #dcefe9. Inheriting from the wrapper restores whatever the band intends — teal-dark on light sections, #a9ebdb on the hero and the setup band — without naming any of them. 0,2,1, the same weight as .cfp-setup-copy's own paragraph rule, so it has to sit AFTER that rule to win the tie — which is why this block lives down here rather than with the other 06 fixes. */ .cfp-eyebrow.elementor-widget p{color:inherit;font-size:inherit} /* ---------- 06: the Contact band ---------- Most of this band needs nothing. .cfp-contact{color:#dce8e4} sets a base the contact items inherit, and everything else names its own element at 0,3,0 — .cfp-contact-item b, .cfp-contact-item span — so Elementor's widget defaults lose without help. Deliberately NOT adding .cfp-contact to the blanket color:inherit list further down: that would sit above .cfp-contact .cfp-lede{color:#cfe0dc} and flatten the lede to the band's own #dce8e4. Two things do need restating. The lede's 26px bottom margin is a widget margin, so Elementor's 0,3,0 zeroes it — four classes here clears that. And the eyebrow's mint is an inline style="" in the mockup, the same problem as the three in the About column. */ .cfp-contact .cfp-eyebrow{color:var(--mint)} .cfp-contact .cfp-lede.elementor-widget.elementor-widget{margin-bottom:26px} /* ---------- 06: the About visual ---------- .cfp-about-visual is a flex box in the mockup that centres the quote in a 400px-tall gradient panel, and the two big + marks are absolutely positioned against it. Two things break under Elementor: Its align-items and justify-content are 0,1,0, under Elementor's .e-con-full.e-flex at 0,2,0 — so the quote would sit top-left instead of centred. Restated at 0,2,0, which wins on order. And the + marks live inside an HTML widget whose wrapper Elementor gives position:relative, so they would anchor to that zero-height wrapper rather than to the panel — the same fault as the arc artwork in §1. Handing the containing block back with position:static puts them in the corners, where overflow:hidden crops them as intended. min-height:400px needs nothing: it is 0,1,0 against Elementor's own .e-con{min-height:var(--min-height)} at 0,1,0, and wins on order. */ .cfp-about-visual.e-con{align-items:center;justify-content:center} .cfp-about-visual > [class*="elementor-widget-"]{position:static} /* ---------- 06: the About column's three inline styles ---------- The mockup sets font-size on the h2, colour and margin-top on the intro, and margin-top on the button with style="" attributes. Elementor's editor strips some inline attributes on save, which produces a section that looks right until someone reopens it, so they are restated here against two classes that exist only for this purpose — cfp-about-copy on the column and cfp-about-lede on the intro. Both are set in the panel; neither appears in the mockup. */ .cfp-about-copy .elementor-heading-title{font-size:2.15rem} .cfp-about-lede p{color:var(--muted);margin-top:14px} .cfp-about-copy .cfp-btn{margin-top:26px} /* ---------- 06: the video's aspect-ratio box inside a flex column ---------- .cfp-video is sized entirely by aspect-ratio:16/9 — its poster and its iframe are both position:absolute, so the box has no in-flow content and no intrinsic height of its own. In the mockup .cfp-setup-media is a plain block

, so the video takes its width from the column and derives its height, and the parent follows. Elementor makes every container a flex column. An aspect-ratio box with no in-flow children measures badly as a flex item: the grid row came out 199px while the video painted 403, so the poster spilled through the bottom curve into the next section and took the caption with it. It only shows between roughly 430 and 900, where the two columns have stacked but the video is still wide enough for the difference to be large. Restoring display:block makes it the plain div the mockup assumes. Measured after: the row grows to 451px at 764, 311 at 514 and 362 at 1440, each one containing its video. */ .cfp-setup-media.e-con{display:block} /* ---------- 06: Elementor zeroes every widget's bottom margin ---------- .e-con .elementor-widget.elementor-widget{margin-block-end:0} at 0,3,0 — the class is repeated deliberately to make it hard to override. Any mockup rule that spaces an element with margin-bottom loses it the moment that element becomes a widget wrapper. Two do: .cfp-eyebrow{margin-bottom:12px} 0,1,0 .cfp-step .cfp-step-num{margin-bottom:16px} 0,2,0 The eyebrow one has been wrong on every section since the hero — 12px missing under every eyebrow on the site. Repeating .elementor-widget here matches their 0,3,0 and wins on load order. Not affected: .cfp-features .cfp-icon and .cfp-setup-points sit inside HTML widgets rather than being wrappers themselves, and .cfp-filters and .cfp-section-head are containers, which carry .e-con and not .elementor-widget. */ .cfp-eyebrow.elementor-widget.elementor-widget{margin-bottom:12px} .cfp-step .cfp-step-num.elementor-widget.elementor-widget{margin-bottom:16px} /* ---------- 06: the step numeral ---------- .cfp-step .cfp-step-num paints the 42px tile and sets color:#fff on the WRAPPER, but the numeral itself is a

inside it — and .cfp-step p {color:var(--muted);font-size:.9rem} at 0,1,1 targets that paragraph directly, so the digit renders muted grey at body size on the teal tile. Same shape as the eyebrow: a rule written for the card's body copy, which the mockup's

never matched. */ .cfp-step .cfp-step-num p{color:inherit;font-size:inherit} /* ---------- 05/06: the grid gaps Elementor overwrites ---------- The mockup declares display:grid, grid-template-columns AND gap on every layout wrapper, so nothing about the grid needs setting in a panel. Two of those three survive contact with Elementor: it never sets grid-template-columns, and its .e-con{display:var(--display)} is 0,1,0, which the mockup's own rules match or beat. gap is the exception. Elementor's .e-con-full.e-flex{gap:var(--row-gap) var(--column-gap)} is 0,2,0, and with Widgets Space set to 0 in 03 those variables resolve to 0px. Any mockup gap declared with fewer than two classes loses and the layout closes up. The wrappers that already use two (.cfp-hero .cfp-wrap, .cfp-stats .cfp-wrap, .cfp-about, .cfp-contact, .cfp-setup, .cfp-detail) tie on specificity and win on order, so they are not listed here — only the ones that lose. Restated at 0,2,x rather than set in the panel, because --sp-gap is a clamp() and no panel field can express it. */ footer .cfp-wrap.e-con{gap:34px} .cfp-course-grid.e-con, .cfp-features.e-con, .cfp-steps.e-con{gap:var(--sp-gap)} /* ---------- 04: Hello Elementor's link hover colour ---------- reset.css sets a:active,a:hover{color:#336} at 0,1,1. The mockup gives links `color:inherit` and lets the component decide, so a colour that lives on the anchor's own class — .cfp-btn-primary at 0,1,0, with no hover rule of its own because it never needed one — is overridden the moment the pointer lands. #336 is a dark navy that reads as black on the teal button. The first rule restores the mockup's inheritance for ordinary links. It sits at 0,1,1 and loads later, so it clears reset.css while staying below every component rule that names its own hover colour: .cfp-topbar a:hover (0,2,1), footer a:hover (0,1,2) and .cfp-btn-ghost:hover (0,2,0) all still win. The variants below carry their colour on the anchor itself, so inheritance is not what they want — they need the value restating at 0,2,1. */ a:hover,a:focus,a:active{color:inherit} /* The variants restate BOTH colour and background, and are not qualified to . [cfp_enrol_button] emits a