.elementor-14891 .elementor-element.elementor-element-4f3e95a{--display:flex;}.elementor-14891 .elementor-element.elementor-element-b2e07d5{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-14891 .elementor-element.elementor-element-d3f9fbb{--display:flex;}.elementor-14891 .elementor-element.elementor-element-51f0f92{--display:flex;}.elementor-14891 .elementor-element.elementor-element-8f2636f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-14891 .elementor-element.elementor-element-610a371{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-14891 .elementor-element.elementor-element-04ae7f2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:767px){.elementor-14891 .elementor-element.elementor-element-51f0f92{--padding-top:0px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS *//* ===================================================================== PN RECEPTIONIST — PAGE CSS (v1) --------------------------------------------------------------------- WHERE THIS GOES Elementor → edit the PNR page → Page Settings (bottom-left gear) → Advanced → Custom CSS. Paste this whole file in. Do NOT put it in Site Settings yet — see WHY below. --------------------------------------------------------------------- WHY :root, AND WHY IT'S HERE AND NOT SITE-WIDE A :root block declares custom properties — variables — on the document. Two properties of them matter for us: 1. THEY ARE INERT. A variable does nothing at all until some rule references it. Nothing on powerednow.com currently mentions --pn-h2, so this block cannot affect a single existing page. That is what makes it safe to eventually lift site-wide: it adds vocabulary, it doesn't change behaviour. 2. THEY CASCADE. Declared on :root, every element on the page can read them. So one value here moves the hero, the comparison panel, the step cards, pricing, the FAQ and the closing CTA together — instead of you hunting six font-size declarations across six HTML widgets and getting five of them consistent. The rules BELOW the token block are the opposite: they are the ones that actually change things. Every one is namespaced to a section we built (#himw-hero, .airvs, #himw-pnr-hiw, #himw-pnr-pricing, .air08, #himw-pnr-cta), so they can only match markup we control. THE PLAN, in order: - now: this whole file lives in the PNR page's Custom CSS - next: same pattern on PNC and the header rebuild - then: once PNR and PNC are both signed off, the :root block ONLY moves up to Site Settings → Custom CSS, and the duplicate :root is deleted from each page. The namespaced overrides stay page-level. Legacy pages are never swept globally. They get modernised a section at a time, as you reach them. ===================================================================== */ /* ===================================================================== 1 — TOKENS + TYPE SCALE ← the only block you should ever edit Fluid clamps: min = small phone, max = large desktop, middle is vw-based so there are no jumps at breakpoints. Sizes at 414px wide (iPhone XR): display 51.8 · h2 41.4 · h3 29.0 · h4 22.4 · lede 17.4 · body 16.1 ===================================================================== */ :root{ /* brand */ --pn-y:#FFBA00; --pn-k:#161616; --pn-w:#FFFFFF; /* display / headings (Bebas Neue) */ --pn-display: clamp(46px, 12.5vw, 76px); /* hero H1 only */ --pn-h2: clamp(36px, 10vw, 54px); /* section headings */ --pn-h3: clamp(26px, 7vw, 38px); /* panel + card titles */ --pn-h4: clamp(21px, 5.4vw, 26px); /* tab titles, step titles */ /* body (Barlow) */ --pn-lede: clamp(16.5px, 4.2vw, 19px); /* section sub-paragraph */ --pn-body: clamp(15.5px, 3.9vw, 17px); /* standard copy */ --pn-small: 14.5px; /* captions, sub-lines */ --pn-micro: 12.5px; /* eyebrows, pills */ --pn-btn: 16px; /* ALL buttons, all sizes */ /* rhythm */ --pn-lh-display: 0.92; --pn-lh-head: 0.98; --pn-lh-body: 1.55; /* layout */ --pn-nav: 84px; /* sticky header height + breathing room */ --pn-radius: 20px; /* shape lock: cards 20-24, buttons 12 */ } /* stop iOS inflating text in narrow blocks — a common cause of "why is this one paragraph bigger than the others" on iPhone */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* ===================================================================== 2 — APPLY THE SCALE !important is deliberate: each section widget carries its own inline