@media (max-width: 767px) {
footer .e-con:has(> .elementor-widget-image img[src*="math-kangaroo-badge"])
	> .elementor-widget-image img { width: 85px !important; height: auto; display: block; }
}
/*
Theme Name: Hello Elementor Child
Author:
Description: Your description goes here
Version: 1.0
Template: hello-elementor

This is the child theme for Hello Elementor theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

/* =====================================================================
   2PI Mind Math — Figma "Homepage" (node 1:2884)

   Everything that CAN be done with Elementor widget settings IS done
   there. What remains below is only what Elementor Pro has no control
   for. Each block notes why it is needed.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Two-tone headings.
   Figma splits single headings across two colours mid-sentence (e.g.
   "Real Results From |Real Students|"). Elementor styles a heading as
   one colour, so the split is expressed with spans + these classes
   rather than inline style attributes.
   --------------------------------------------------------------------- */
.pi-lime   { color: #D9ED92; }
.pi-green  { color: #00A539; }
.pi-purple { color: #29166F; }
.pi-white  { color: #FFFFFF; }
.pi-black  { color: #1B1F10; }

/* ---------------------------------------------------------------------
   2. Offset backing pills are now native.
   Figma stacks a second pill behind each primary button (purple, or white
   on the hero). That is Elementor's `button_box_shadow` group, and the
   hover wrap is `button_hover_box_shadow` — both set in the widget, so no
   CSS is needed here any more. Only the easing below remains.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   3. Buttons — shared easing.
   The colour/border inversion is configured in the widget itself; only
   Figma's easing curve and duration are applied here.
   --------------------------------------------------------------------- */
.pi-btn-primary .elementor-button,
.pi-btn-ghost .elementor-button,
.pi-call-link .elementor-button,
.pi-readmore .elementor-button {
	transition: background-color .3s ease-out, color .3s ease-out,
	            border-color .3s ease-out, transform .3s ease-out;
}
.pi-readmore .elementor-button-icon { transition: transform .3s ease-out; }
.pi-readmore .elementor-button:hover .elementor-button-icon {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------------
   4. AAA cards — seal and title turn green on hover.
   Figma variant 1:7592 -> 1:2574 (SMART_ANIMATE / GENTLE / 1.02s): the
   purple seal and purple title both become #00A539. One element cannot
   cross-fade between two images through widget settings, so the green
   seal is layered on top and revealed.
   --------------------------------------------------------------------- */
/* The card lifts on hover alongside the seal/title colour change, matching
   the buttons' motion. Transform gets the buttons' 250ms ease-out rather
   than the seal's slower 1.02s curve — a lift that slow reads as lag. */
.pi-aaa-card {
	transition: box-shadow 1.02s cubic-bezier(.34,1.56,.64,1),
	            transform .25s ease-out;
}
.pi-aaa-card:hover { transform: translateY(-3px); }
.pi-aaa-card:hover { box-shadow: 0 0 12px 0 rgba(255,255,255,.4); }

.pi-aaa-card .pi-seal img { position: relative; }
.pi-aaa-card .pi-seal { position: relative; display: inline-block; }
.pi-aaa-card .pi-seal { position: relative; display: inline-block; }
/* on .pi-seal itself — this image widget renders no
   .elementor-widget-container, so the old selector matched nothing and the
   green seal never appeared */
.pi-aaa-card .pi-seal::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("https://2pimindmath.com/wp-content/uploads/2026/08/seal-green.webp")
	            center / contain no-repeat;
	opacity: 0;
	transition: opacity 1.02s cubic-bezier(.34,1.56,.64,1);
	pointer-events: none;
}
.pi-aaa-card:hover .pi-seal::after { opacity: 1; }
.pi-aaa-card h3 { transition: color 1.02s cubic-bezier(.34,1.56,.64,1); }
.pi-aaa-card:hover h3 { color: #00A539; }

/* ---------------------------------------------------------------------
   5. Card hovers — each taken from its Figma variant pair, not invented.
   Only cards that actually carry an ON_HOVER interaction get one; the
   stat, blog and "Where We Serve" cards have no hover in the file and
   deliberately have none here.
   --------------------------------------------------------------------- */

/* "Getting Started" steps — 1:7617 -> 1:2782: border grey turns green.
   Nothing else moves. (EASE_IN_AND_OUT / 0.3s) */
.pi-step-card { transition: border-color .3s ease-in-out; }
.pi-step-card:hover { border-color: #00A539; }

/* /new-home/ only: hovering a step card spins its number seal a full turn and
   lifts the card. Scoped to page 83 so pages 56/72/77 keep the approved
   border-only hover.

   Elementor has no control for "parent hover changes a child", which is why
   this lives here rather than in the widget panel.

   Taken frame by frame off the Figma prototype recording
   (2PI-Mind-Math-Homepage-Page-1.mp4): the seal turns a full circle while the
   digit stays upright the whole way round — it never tumbles with it.

   The seal is the badge's background, and the digit is a child, so rotating the
   badge would carry the digit with it. Counter-rotating the digit by the same
   amount over the same duration and easing cancels it out at every frame, so it
   holds still while the seal spins under it. */
.elementor-83 .pi-step-num,
.elementor-83 .pi-step-num > .elementor-widget-heading {
	/* one number controls the whole spin — the digit's counter-rotation has to
	   stay on the same duration and easing or it stops cancelling out and the
	   number drifts mid-turn */
	transition: transform 1.2s ease-in-out;
}
.elementor-83 .pi-step-card:hover .pi-step-num { transform: rotate(360deg); }
.elementor-83 .pi-step-card:hover .pi-step-num > .elementor-widget-heading {
	transform: rotate(-360deg);
}

/* Same recording: green border, soft shadow, and the card lifts. Page 56
   already carries this (section 17) but scoped to itself, so the new section
   never inherited it. Same values, so the two pages behave identically.

   Written one class deeper than it looks like it needs to be, deliberately:
   Elementor emits `border-color: #E8E8E8` for this card as
   `.elementor-83 .elementor-element.elementor-element-<id>`, which outweighs a
   plain `.pi-step-card:hover` and loads after this file — so the shorter
   selector set the shadow and the lift but the green border silently never
   arrived. Matching Elementor's `.elementor-element` in the selector wins it
   back. Same reason section 17 is written the way it is. */
body .elementor-83 .elementor-element.pi-step-card {
	transition: border-color .3s ease-in-out, box-shadow .3s ease-in-out,
	            transform .25s ease-out;
}
body .elementor-83 .elementor-element.pi-step-card:hover {
	border-color: #00A539;
	box-shadow: 0 10px 24px rgba(41, 22, 111, .14);
	transform: translateY(-6px);
}

/* "Real Results" — 1:2917 -> 1:2348: the card holds still and the
   illustration scales up. (EASE_OUT / 0.3s) */
.pi-res-card .pi-res-icon img {
	transition: transform .3s ease-out;
	transform-origin: bottom right;
	will-change: transform;
}
.pi-res-card:hover .pi-res-icon img { transform: scale(1.1); }

/* "Why Parents Choose" — 1:12833 -> 1:2820: the green gradient becomes
   solid purple. (EASE_IN_AND_OUT / 0.3s) */
.pi-why-card { transition: background-color .3s ease-in-out; }
body .elementor-56 .elementor-element.pi-why-card:hover {
	background-image: none;
	background-color: #29166F;
}

/* Programs carousel hover — taken from the client's prototype recording
   (design-refrence/, ~38.8s / 40.8s / 42.4s).

   The Figma component's hover variant is an empty stub, so this was previously
   left with no delta. The recording shows what the stub stands for: on hover
   the photo grows upward, the body copy fades out behind it, and a purple
   "Learn More" pill fades in over the lower part of the photo. Measured across
   four separate hover in/out transitions in the clip: 250-350ms, so 300ms.

   The photo is anchored at the card's bottom and grows by height rather than
   transform — a scaleY would stretch the faces, and translateY would push the
   image out of the card. object-fit keeps the crop honest as it grows. */
.pi-prog-card {
	position: relative;
	overflow: hidden;
}
.pi-prog-card .pi-prog-body {
	transition: opacity .3s ease-out;
}
.pi-prog-card:hover .pi-prog-body {
	opacity: 0;
}
.pi-prog-card .pi-prog-img img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
	object-position: center top;
	transition: height .3s ease-out;
}
.pi-prog-card:hover .pi-prog-img img {
	height: 400px;
}

/* The pill sits over the photo, so it is taken out of flow — otherwise it
   would add its own height to the card and shift the layout on hover. */
.pi-prog-card .pi-prog-more {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 34px;
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease-out, transform .3s ease-out;
	pointer-events: none;
}
.pi-prog-card:hover .pi-prog-more {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
/* Keyboard users never trigger :hover — without this the link is reachable by
   tab but invisible while focused. */
.pi-prog-card:focus-within .pi-prog-body { opacity: 0; }
.pi-prog-card:focus-within .pi-prog-img img { height: 400px; }
.pi-prog-card:focus-within .pi-prog-more {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.pi-prog-card .pi-prog-body,
	.pi-prog-card .pi-prog-img img,
	.pi-prog-card .pi-prog-more { transition: none; }
}

/* ---------------------------------------------------------------------
   1b. Announcement ticker.
   Figma Component 945 holds two identical copies of the strip behind
   masked edges, with an AFTER_TIMEOUT interaction (2.0s dwell, 1.6s
   EASE_OUT) — i.e. a looping ticker. Elementor has no marquee widget, so
   the two copies are real widgets and the track is translated here. A
   continuous linear scroll is used rather than Figma's stepped timing;
   it reads smoother and never leaves a gap.
   --------------------------------------------------------------------- */
/* The strip does not loop. It glides in once when the page loads and then sits
   still at its resting position — a single copy, left-aligned in the boxed
   1300px container (so it starts ~310px in at 1920, as in the reference).

   Note the copy is NOT a direct child of .pi-ticker: it is a boxed container,
   so Elementor wraps it in .e-con-inner. An earlier `.pi-ticker > .pi-ticker-copy`
   rule matched nothing, which is why the strip was inert. */
.pi-ticker {
	overflow: hidden;
	max-width: 100%;
	/* the fade lives on the static frame — on the moving copy it would travel
	   with the text instead of staying at the header's edges */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.pi-ticker.e-con > .e-con-inner {
	flex-wrap: nowrap !important;
	justify-content: flex-start;
}
.pi-ticker .pi-ticker-copy {
	flex: 0 0 auto;
	white-space: nowrap;
	/* 100vw starts it just past the right edge whatever the viewport, so it
	   always travels in from off-screen rather than popping in mid-strip.
	   `both` holds the final frame — it must not snap back or replay. */
	animation: pi-ticker-in 1.6s cubic-bezier(.22, .61, .36, 1) .25s both;
}
.pi-ticker .pi-ticker-copy .elementor-icon-list-items { flex-wrap: nowrap; }
@keyframes pi-ticker-in {
	from { transform: translateX(100vw); }
	to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.pi-ticker .pi-ticker-copy { animation: none; }
}

/* ---------------------------------------------------------------------
   5a. Programs carousel — disabled arrow.
   Figma Component 989 draws the unavailable arrow as a #6F6E72 circle with
   a #5A5A5C glyph. Elementor's carousel exposes normal and hover states
   only, so the disabled state is set here.
   --------------------------------------------------------------------- */
.pi-prog-carousel .swiper-button-disabled {
	background-color: #6F6E72 !important;
	opacity: 1;
}
.pi-prog-carousel .swiper-button-disabled svg,
.pi-prog-carousel .swiper-button-disabled i {
	color: #5A5A5C;
	fill: #5A5A5C;
}

/* ---------------------------------------------------------------------
   5b. FAQ toggle icon.
   Figma variant 1:2407 is the only hover state defined with real style
   data: a 1px #00A539 ring (r200) appears around the +/x glyph.
   --------------------------------------------------------------------- */
.pi-faq .elementor-accordion-icon {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 200px;
	transition: border-color .3s ease-out;
}
.pi-faq .elementor-tab-title:hover .elementor-accordion-icon {
	border-color: #00A539;
}

/* ---------------------------------------------------------------------
   5c. Hero purple blend.
   Figma "Rectangle 11": 1650x1411 at (-741, -189), #29166F, Layer blur 240.
   That blurred slab is what feathers the purple into the photo — the previous
   build approximated it with a 74%-wide background image plus a hard-stop
   gradient overlay, which left a visible vertical seam at ~26%.

   The photo is now a normal cover background on the section, and this element
   reproduces the slab: same size, same offset, same colour, same 240px blur.
   It is a pseudo-element rather than a real div so no markup changes, and
   pointer-events stay with the content above it.
   --------------------------------------------------------------------- */
/* .e-con qualifier: Elementor's own container rule sets overflow and would
   tie/beat a bare .pi-hero, letting the blurred slab escape upward into the
   header and wash the nav bar purple. */
.e-con.pi-hero { position: relative; overflow: hidden; }
/* ::after, not ::before — Elementor's container already owns ::before for its
   own background-overlay layer, and its rules load after this file. */
.e-con.pi-hero::after {
	content: "";
	position: absolute;
	left: -741px;
	top: -189px;
	width: 1650px;
	height: 1411px;
	background: #29166F;
	filter: blur(240px);
	pointer-events: none;
	z-index: 0;
}
/* Keep the copy and buttons above the slab. This must target the hero's direct
   children, not `.e-con-inner`: that wrapper only exists on *boxed* containers
   and the hero is full-width, so the earlier `.pi-hero > .e-con-inner` rule
   matched nothing and the blurred slab painted over the heading. */
.e-con.pi-hero > * { position: relative; z-index: 1; }

@media (max-width: 1024px) {
	/* at narrow widths the slab would swamp the photo entirely */
	.e-con.pi-hero::after { left: -60%; width: 160%; filter: blur(160px); }
}

/* ---------------------------------------------------------------------
   5d. Header "Register Now" — hover lifts, nothing else moves.
   Figma has no ring or colour change on hover; the border-colour swap that
   produced a blue outline is now pinned to the normal colour in the widget,
   and the only hover delta is this small rise.
   --------------------------------------------------------------------- */
/* Every button lifts slightly on hover — the one shared motion across the
   site. Declared once here rather than per-widget so the distance and easing
   cannot drift apart between sections. */
.pi-btn-stack .elementor-button,
.pi-btn-primary .elementor-button,
.pi-btn-ghost .elementor-button,
.pi-prog-more .elementor-button,
.pi-readmore .elementor-button,
.pi-call-link .elementor-button {
	transition: transform .25s ease-out, background-color .3s ease-out,
	            color .3s ease-out, border-color .3s ease-out,
	            box-shadow .3s ease-out;
	will-change: transform;
}
.pi-btn-stack .elementor-button:hover,
.pi-btn-primary .elementor-button:hover,
.pi-btn-ghost .elementor-button:hover,
.pi-prog-more .elementor-button:hover,
.pi-readmore .elementor-button:hover,
.pi-call-link .elementor-button:hover {
	transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
	.pi-btn-stack .elementor-button:hover,
	.pi-btn-primary .elementor-button:hover,
	.pi-btn-ghost .elementor-button:hover,
	.pi-prog-more .elementor-button:hover,
	.pi-readmore .elementor-button:hover,
	.pi-call-link .elementor-button:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   5e. Phone number in the header gets the same underline as the nav items.
   It is a button widget, not a menu item, so Elementor's pointer never
   applied to it — in Figma it underlines on hover like everything else.
   --------------------------------------------------------------------- */
.pi-call-link .elementor-button {
	position: relative;
}
.pi-call-link .elementor-button::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 2px;
	background: #00A539;
	transform: scaleX(0);
	transition: transform .3s ease-out;
}
.pi-call-link .elementor-button:hover::after {
	transform: scaleX(1);
}

/* ---------------------------------------------------------------------
   6. Header nav underline offset.
   Elementor's "underline" pointer sits flush to the label; the reference
   leaves a clear gap between the word and the rule beneath it.

   Elementor Pro's own `.e--pointer-underline .elementor-item::after
   { bottom: 0 }` is the same weight and loads later, so it was winning and the
   rule below did nothing — the underline sat flush against the label. Adding
   the pointer class to the first compound outranks it. */
.elementor-nav-menu--main.e--pointer-underline .elementor-item::after,
.elementor-nav-menu--main.e--pointer-double-line .elementor-item::after {
	bottom: -8px;
}

/* ---------------------------------------------------------------------
   6b. Programs dropdown panel.
   The reference draws a 2px #00A539 outline around the white panel with a
   ~14px radius. Elementor Pro's nav-menu exposes dropdown radius and box
   shadow but no border control, so the outline is set here. Item colour and
   weight ARE widget settings (#29166F / 700) and stay there.
   --------------------------------------------------------------------- */
/* Elementor Pro ships `.elementor-nav-menu--main .elementor-nav-menu ul
   { border-width: 0 }` and loads it after this file. The submenu itself is
   `ul.sub-menu.elementor-nav-menu--dropdown` — it does NOT carry
   .elementor-nav-menu — so mirror Pro's descendant path and add the dropdown
   class to outrank it. */
.elementor-nav-menu--main .elementor-nav-menu ul.elementor-nav-menu--dropdown {
	border: 2px solid #00A539;
	border-radius: 14px;
	overflow: hidden;
	padding: 6px 0;
	/* Elementor sizes the panel to the parent label (156px here), which clipped
	   every item — "Elementary Sch…". Size it to the longest label instead. */
	width: max-content;
	min-width: 100%;
	/* The reference detaches the panel from the bar. Elementor Pro drives this
	   menu with SmartMenus, which writes `margin-top: 0px` as an INLINE style
	   every time it opens the panel — a plain rule here was set but never won,
	   so the gap silently did nothing. !important is the override that beats an
	   inline style; there is no settings-level control for this distance. */
	margin-top: 14px !important;
}
/* That 14px gap is dead space: the pointer leaves the <li> crossing it and the
   panel closes before it can be reached. This invisible bridge keeps the hover
   continuous. It hangs off the <li>, not the panel — the panel clips its own
   overflow to keep the rounded corners, which would have cut a bridge there. */
.elementor-nav-menu--main li.menu-item-has-children {
	position: relative;
}
.elementor-nav-menu--main li.menu-item-has-children::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 16px;
	background: transparent;
}
.elementor-nav-menu--main .elementor-nav-menu ul.elementor-nav-menu--dropdown a {
	white-space: nowrap;
}
/* Elementor offsets the panel to sit flush under the label; the 2px border
   would otherwise clip the first and last item's rounded corners. */
.elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item {
	border: 0;
}

/* ---------------------------------------------------------------------
   7. Dashed connectors between the three "Getting Started" steps.
   Figma draws a dashed rule between cards 1-2 and 2-3 (Line 45 / Line 46,
   140px wide at y=441). Elementor has no control for a connector drawn
   between flex children.

   The cards are NOT direct children of .pi-step-row: it is a boxed
   container, so Elementor wraps its children in .e-con-inner. Matching on
   `.pi-step-row > .e-con` therefore selected nothing and the connectors
   never drew. Select the cards themselves instead.
   --------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.pi-step-row .pi-step-card { position: relative; }
	.pi-step-row .pi-step-card:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: -50px;
		width: 50px;
		border-top: 2px dashed #29166F;
		opacity: .45;
	}
}

/* ---------------------------------------------------------------------
   10. Eyebrow pills ("Our Programs", "Getting Started", ...).
   Figma draws each as a pill that hugs its label. The containers are
   content_width:full, which resolves to width:100%, so they overrode the
   centring their parent already applies and stretched the full 1300px.
   Elementor's width control takes a number, not fit-content, so the hug
   is expressed here.

   Elementor renders `.e-con { width: var(--width) }` with --width:100%, and
   that stylesheet loads after this one, so a plain `.pi-eyebrow` rule lost on
   equal specificity. Override the custom property itself and qualify with
   .e-con so the selector outranks Elementor's without needing !important.
   --------------------------------------------------------------------- */
.e-con.pi-eyebrow {
	--width: fit-content;
	width: fit-content;
	max-width: 100%;
	align-self: center;
}

/* ---------------------------------------------------------------------
   11. FAQ open row.
   Figma variant: the expanded question sits on the same #00A539 green as
   its answer, with white label and glyph. Elementor's classic accordion
   exposes a single `title_background` shared by every state, so the open
   state is set here. The white text/icon come from the widget's own
   `tab_active_color` / `icon_active_color` — without this rule they were
   white-on-white and the open question read as an empty bar.

   Elementor writes the flat title_background into post-56.css as
   `.elementor-56 .elementor-element.elementor-element-<id> .elementor-tab-title`
   — four classes, and that file is enqueued after this one, so a four-class
   selector here ties and loses. Adding .elementor-widget-accordion takes it to
   five so the open row wins without !important.
   --------------------------------------------------------------------- */
.pi-faq.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title.elementor-active {
	background-color: #00A539;
}
.pi-faq.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title.elementor-active,
.pi-faq.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title.elementor-active a {
	color: #FFFFFF;
}

/* ---------------------------------------------------------------------
   8. Respect prefers-reduced-motion for every transition declared above.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pi-btn-stack .elementor-button,
	.pi-aaa-card, .pi-aaa-card h3,
	.pi-aaa-card .pi-seal::after,
	.pi-step-card, .pi-why-card, .pi-prog-card,
	.pi-res-card .pi-res-icon img,
	.pi-readmore .elementor-button-icon {
		transition: none !important;
	}
	.pi-res-card:hover .pi-res-icon img { transform: none; }
	.pi-readmore .elementor-button:hover .elementor-button-icon { transform: none; }
	body .elementor-83 .elementor-element.pi-step-card,
	.elementor-83 .pi-step-num,
	.elementor-83 .pi-step-num > .elementor-widget-heading { transition: none; }
	body .elementor-83 .elementor-element.pi-step-card:hover,
	.elementor-83 .pi-step-card:hover .pi-step-num,
	.elementor-83 .pi-step-card:hover .pi-step-num > .elementor-widget-heading {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
   9. Trailing paragraph margin.
   Figma lays text out with no paragraph spacing — a 30px line-height block
   is 30px tall. Hello Elementor's default `p { margin-bottom }` adds ~14px
   under every text-editor widget, which compounded into 40-80px of extra
   section height across the page. Only the final paragraph is zeroed, so
   multi-paragraph copy keeps its internal rhythm.
   --------------------------------------------------------------------- */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor p:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------
   12. Stat cards — align the numbers and descriptions across all four.
   Figma pins an 86x86 icon at top:24 / right:21 and keeps every number on one
   baseline, with every description starting at the same y. Live, the icon sat
   in the normal flow, so each card's differing icon height pushed its number
   and description to a different y and the row read as ragged.

   Taking the icon out of flow fixes both at once: the remaining children start
   from a fixed padding-top (24 + 86 + 24), and since all four numbers share a
   font-size and line-height they land on one baseline — which in turn puts all
   four descriptions on one line too, regardless of whether they wrap to two.
   --------------------------------------------------------------------- */
/* Elementor writes the card padding as `.elementor-56 .elementor-element.
   elementor-element-<id>` (three classes) into post-56.css, which loads after
   this file — a three-class selector here ties and loses. Prefixing with the
   body element takes it to (0,3,1) so the icon clearance actually applies. */
body .elementor-56 .e-con.pi-stat-card {
	position: relative;
	padding-top: 134px;
	/* The card was justify-content:space-between, which pinned the copy to the
	   card's bottom edge — so a two-line description started higher than a
	   one-line one and the row read ragged. Figma flows number then copy from
	   the top with a fixed gap; longer copy simply extends further down. */
	justify-content: flex-start;
	row-gap: 8px;
}
.pi-stat-card .pi-stat-icon {
	position: absolute;
	top: 24px;
	right: 21px;
	width: 86px;
	height: 86px;
	margin: 0;
}
.pi-stat-card .pi-stat-icon img {
	width: 86px;
	height: 86px;
	object-fit: contain;
	display: block;
}
/* the number and copy hug the left edge, as in the design */
.pi-stat-card .elementor-heading-title,
.pi-stat-card .elementor-widget-text-editor { text-align: left; }

@media (max-width: 1024px) {
	body .elementor-56 .e-con.pi-stat-card { padding-top: 108px; }
	.pi-stat-card .pi-stat-icon { width: 64px; height: 64px; top: 20px; right: 16px; }
	.pi-stat-card .pi-stat-icon img { width: 64px; height: 64px; }
}

/* ---------------------------------------------------------------------
   13. AAA cards — spacing and hover, to the values given for the design.
   Card padding top/bottom 40, icon->heading 28, heading->copy 14. Elementor's
   flex gap is a single value for every child, so the two different gaps are
   set as margins with the container gap zeroed.

   The title's green-on-hover was declared as `.pi-aaa-card:hover h3` — the tag
   was right (it IS an h3), but at (0,2,1) it lost to Elementor's per-widget
   colour in post-56.css, which carries four classes. Specificity, not the
   selector's tag, is why the colour "was not set".
   --------------------------------------------------------------------- */
body .elementor-56 .e-con.pi-aaa-card {
	padding-top: 40px;
	padding-bottom: 40px;
	row-gap: 0;
}
body .elementor-56 .e-con.pi-aaa-card > .elementor-widget-heading { margin-top: 28px; }
body .elementor-56 .e-con.pi-aaa-card > .elementor-widget-text-editor { margin-top: 14px; }

body .elementor-56 .pi-aaa-card .elementor-heading-title {
	transition: color 1.02s cubic-bezier(.34,1.56,.64,1);
}
body .elementor-56 .pi-aaa-card:hover .elementor-heading-title {
	color: #00A539;
}

/* the seal zooms with the colour change */
.pi-aaa-card .pi-seal img,
/* on .pi-seal itself — this image widget renders no
   .elementor-widget-container, so the old selector matched nothing and the
   green seal never appeared */
.pi-aaa-card .pi-seal::after {
	transition: transform .3s ease-out, opacity 1.02s cubic-bezier(.34,1.56,.64,1);
}
.pi-aaa-card:hover .pi-seal img,
.pi-aaa-card:hover .pi-seal::after {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.pi-aaa-card:hover .pi-seal img,
	.pi-aaa-card:hover .pi-seal::after { transform: none; }
}

/* ---------------------------------------------------------------------
   14. Buttons on light sections invert the other way.
   The shared hover (white fill / green text) reads correctly on the purple
   hero, but on a white or #F5F5F5 section a white fill has nothing to sit
   against and the button appears to vanish. On those sections the hover goes
   the opposite way: purple fill, white text, green offset pill.
   --------------------------------------------------------------------- */
/* Elementor's own rule is
   `.elementor-56 .elementor-element.elementor-element-<id> .elementor-button:hover`
   — five classes. Class count beats an element prefix, so `body .elementor-56
   .pi-on-light ...` (four classes) still lost. Adding .elementor-element makes
   it five classes plus the body element, which finally wins. */
body .elementor-56 .elementor-element.pi-on-light .elementor-button:hover {
	background-color: #29166F;
	border-color: #29166F;
	color: #FFFFFF;
	box-shadow: -5px 4px 0 0 #00A539;
}

/* ---------------------------------------------------------------------
   15. Result-card illustrations sit flush to the card's bottom edge.
   Figma runs each illustration into the bottom of its card; they were
   floating with a gap, and the three did not share a baseline.

   EXCLUDES /new-home/ (page 83). There the same result is now built from
   the image widgets' own Height / Width / Position controls, so the client
   can resize the art and retune the gap from the Elementor panel. The
   `width: auto !important` below silently beat every Width value typed into
   the editor, which is exactly what made those blocks feel uneditable.

   The guard is wrapped in :where() so it adds ZERO specificity — pages 56,
   72 and 77 keep these rules at their original weight and are untouched.
   --------------------------------------------------------------------- */
:where(body:not(.page-id-83)) .pi-res-card .pi-res-icon {
	bottom: 0 !important;
	top: auto !important;
	left: auto !important;
	right: 0 !important;
	margin-bottom: 0;
	/* the three source images differ in natural size (300 / 358 / 245 wide) and
	   each sat at its own offset, so they neither shared a baseline nor stayed
	   inside the card. Cap the height and pin them bottom-right instead. */
	max-height: 190px;
	width: auto;
}
:where(body:not(.page-id-83)) .pi-res-card .pi-res-icon img {
	display: block;
	height: 190px;
	/* the source files are now trimmed flush, so the image must size from its own
	   aspect ratio — Elementor writes width/height attributes from the old padded
	   dimensions, and object-fit:contain against those would letterbox the art and
	   put the transparent gap straight back */
	width: auto !important;
	max-width: none;
}

/* /new-home/ only, and the single line of CSS this section still needs there.
   The art is no longer absolutely positioned — it is an ordinary flex item at
   the bottom of the card — so it rides a text baseline, and Elementor's default
   `vertical-align: middle` leaves a few stray pixels of descender space beneath
   it, which stops it sitting flush on the card's bottom edge. This is a
   typographic correction, not a design value: size, alignment and spacing all
   come from the widget panel now. */
.elementor-83 .pi-res-card .pi-res-icon img { vertical-align: bottom; }

/* =====================================================================
   V1 (Approved) handoff — page-72 only (/home-v1-test/).

   Two FAQ states in the approved spec have no Elementor control, and the
   rules that would carry them (.pi-faq, above) are shared with the live
   homepage. Scoping to .elementor-72 keeps the test page free to diverge
   until these are signed off. Elementor Pro's per-page Custom CSS is
   license-gated on this install, which is why this lives here and not in
   the page's own settings.

   Every selector below runs one class higher than the .pi-faq rules in
   section 7 so it wins on specificity, not on stylesheet order.
   ===================================================================== */

/* The open row is one continuous gradient across question AND answer in
   Figma, so it is painted on the accordion item. The flat per-panel pair
   below it is the fallback where :has() is unsupported. */
.elementor-72 .pi-faq.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title.elementor-active,
.elementor-72 .pi-faq.elementor-widget-accordion .elementor-accordion-item .elementor-tab-content {
	background-color: transparent;
	background-image: linear-gradient(-73.24deg, #51A26D 8.74%, #008C31 60.26%);
}
.elementor-72 .pi-faq.elementor-widget-accordion .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
	background-image: linear-gradient(-73.24deg, #51A26D 8.74%, #008C31 60.26%);
}
.elementor-72 .pi-faq.elementor-widget-accordion .elementor-accordion-item:has(.elementor-tab-title.elementor-active) .elementor-tab-title.elementor-active,
.elementor-72 .pi-faq.elementor-widget-accordion .elementor-accordion-item:has(.elementor-tab-title.elementor-active) .elementor-tab-content {
	background-image: none;
	background-color: transparent;
}

/* The rule dividing question from answer on the open row is #82C097 — the
   #E2E4E3 set on the widget is for the closed rows' outline only. */
.elementor-72 .pi-faq.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title.elementor-active {
	border-block-end-color: #82C097;
}
.elementor-72 .pi-faq.elementor-widget-accordion .elementor-accordion-item .elementor-tab-content {
	border-block-start-color: #82C097;
}

/* Closed rows carry a soft ambient shadow the build left out entirely. */
.elementor-72 .pi-faq.elementor-widget-accordion .elementor-accordion-item {
	box-shadow: 2px 2px 8px rgba(148, 155, 163, 0.4);
}

/* ---------------------------------------------------------------------
   16. "Why Parents Choose" — per the Figma Dev Mode panels.

   The card is built in layers so the hover can CROSS-FADE instead of snapping:
   background-image cannot be transitioned, so the old rule swapping it to
   `none` on hover produced the blink. Now the green gradient lives on ::before
   and only its opacity animates, over a background-color that goes blue.

   ::after carries the tiled paper texture (Figma: cardboard.png, Tile,
   "Plus darker", 48%). CSS has no plus-darker; multiply is the nearest
   standard blend. The tile is the existing paper asset — cardboard.png could
   not be exported (Figma MCP quota exhausted on the View seat).
   --------------------------------------------------------------------- */
body .elementor-56 .elementor-element.pi-why-card {
	position: relative;
	isolation: isolate;
	background-image: none;
	background-color: #00A539;
	transition: background-color .3s ease-in-out, transform .3s ease-in-out;
}
/* green gradient layer — fades out on hover */
body .elementor-56 .elementor-element.pi-why-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(-18deg, #51A26D 16.09%, #00A539 75.12%);
	opacity: 1;
	transition: opacity .3s ease-in-out;
	pointer-events: none;
	z-index: -2;
}
/* tiled paper texture at 48% */
body .elementor-56 .elementor-element.pi-why-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: url("/2pimindmath/wp-content/uploads/2026/08/serve-bg-paper.webp") repeat;
	background-size: 240px auto;
	opacity: .48;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: -1;
}
body .elementor-56 .elementor-element.pi-why-card:hover {
	background-color: #29166F;
	transform: translateY(-10px);
}
body .elementor-56 .elementor-element.pi-why-card:hover::before { opacity: 0; }

/* divider inverts blue -> green */
.pi-why-card .elementor-divider-separator {
	border-top-color: #29166F !important;
	border-top-width: 1px !important;
	transition: border-color .3s ease-in-out;
}
.pi-why-card:hover .elementor-divider-separator { border-top-color: #00A539 !important; }

/* 30px between the three cards */
body .elementor-56 .elementor-element.pi-why-col { gap: 30px; row-gap: 30px; }

.pi-founder { color: #29166F; font-weight: 600; font-size: 22px; }
body .elementor-56 .pi-why-img img { border-radius: 16px; display: block; }

@media (prefers-reduced-motion: reduce) {
	body .elementor-56 .elementor-element.pi-why-card:hover { transform: none; }
}

/* Figma frame 1707482536: 1300x702 at top 5181, with 100px below the section.
   The left column uses space-between so the founder photo's bottom edge lands
   level with the last card's bottom, rather than sitting wherever the copy
   happens to end. */
body .elementor-56 .elementor-element.pi-why-section { padding-bottom: 100px; }
body .elementor-56 .elementor-element.pi-why-left {
	/* space-between spread every child apart. The gap belongs only between the
	   copy and the photo, so push the photo down with auto margin instead and
	   leave the heading/paragraph rhythm untouched. */
	min-height: 702px;
}
body .elementor-56 .elementor-element.pi-why-left > .elementor-widget-image {
	margin-top: auto;
}
/* Figma icons. Elementor's SVG library can only inline real .svg files and WP
   core blocks SVG upload, so the artwork is painted as a background on the icon
   box and the Font Awesome glyph underneath is hidden. The FA value is kept so
   the widget still renders its container. */
.pi-why-icon .elementor-icon {
	display: block;
	width: 42px;
	height: 42px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	font-size: 0;
}
.pi-why-icon .elementor-icon svg,
.pi-why-icon .elementor-icon i { display: none !important; }
.pi-why-icon-1 .elementor-icon { background-image: url("/2pimindmath/wp-content/uploads/2026/08/icon-target.webp"); }
.pi-why-icon-2 .elementor-icon { background-image: url("/2pimindmath/wp-content/uploads/2026/08/icon-brain.webp"); }
.pi-why-icon-3 .elementor-icon { background-image: url("/2pimindmath/wp-content/uploads/2026/08/icon-chart.webp"); }
body .elementor-56 .pi-why-img img { width: 610px; max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------
   17. "Getting Started" step cards — values off the Figma Dev Mode panels.
   Card 340x332, radius 20, 2px #E8E8E8 on #FFFFFF. Badge 84x84, 32px below it
   to the title, 16px title to body, 16px horizontal inset (340 - 308 title
   width, halved). Hover: green border, soft shadow, and the same lift the
   buttons use.
   --------------------------------------------------------------------- */
body .elementor-56 .elementor-element.pi-step-card {
	width: 340px;
	max-width: 100%;
	min-height: 332px;
	border-radius: 20px;
	border: 2px solid #E8E8E8;
	background-color: #FFFFFF;
	padding: 40px 16px 32px;
	row-gap: 0;
	transition: border-color .3s ease-in-out, box-shadow .3s ease-in-out,
	            transform .25s ease-out;
}
body .elementor-56 .elementor-element.pi-step-card:hover {
	border-color: #00A539;
	box-shadow: 0 10px 24px rgba(41, 22, 111, .14);
	transform: translateY(-6px);
}
/* badge is the inner container carrying the seal background */
body .elementor-56 .elementor-element.pi-step-card > .e-con {
	width: 84px;
	min-width: 84px;
	height: 84px;
	flex: 0 0 84px;
	margin: 0 auto;
	background-size: contain;
}
/* 32px badge -> title, 16px title -> body */
body .elementor-56 .elementor-element.pi-step-card > .elementor-widget-heading {
	margin-top: 32px;
}
body .elementor-56 .elementor-element.pi-step-card > .elementor-widget-text-editor {
	margin-top: 16px;
}
@media (prefers-reduced-motion: reduce) {
	body .elementor-56 .elementor-element.pi-step-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   18. "Where We Serve" — Figma frame 1707482534, 1920x630 on #29166F.
   Three corrections:
   1. Both cards are the same height in the design (246 / 245). Live they sized
      to their own content, so "Online" (2 rows) came up short against
      "In-Person" (3 rows). Stretch the row so they match.
   2. The section is not flat purple — a dotted world-map / desk illustration
      sits over it. The existing paper asset stands in; the real export needs
      Dev Mode access.
   3. The separator dots belong BETWEEN locations, not in front of each one.
      Elementor's inline icon-list puts an icon on every item, so the first in
      each row is hidden.
   --------------------------------------------------------------------- */
/* pi-serve-row is a BOXED container, so Elementor wraps the two cards in
   .e-con-inner — `> .e-con` matched nothing, which is why the heights never
   equalised. Stretch the inner wrapper and let the cards fill it. */
body .elementor-56 .elementor-element.pi-serve-row > .e-con-inner {
	align-items: stretch;
}
body .elementor-56 .elementor-element.pi-serve-row .e-con-inner > .e-con {
	align-self: stretch;
	height: auto;
}

/* Three layers composited, per the Dev Mode panels:
     1. retro desk illustration, 1160x1160, right side, Soft light @ 76%
     2. dotted map group, white @ 10%, layer opacity 60% — rebuilt as a CSS dot
        grid because the vector group cannot be exported (Figma quota spent)
     3. #29166F base
   CSS cannot set per-layer opacity, so the blend modes carry the weight:
   soft-light on the illustration reproduces Figma's own blend, and the dot
   alpha is pre-multiplied (10% x 60% = 6%). */
body .elementor-56 .elementor-element.pi-serve-section {
	background-image:
		url("/2pimindmath/wp-content/uploads/2026/08/serve-bg-paper.webp"),
		radial-gradient(circle, rgba(255,255,255,.06) 1.6px, transparent 1.7px);
	background-repeat: no-repeat, repeat;
	background-position: right -60px center, left top;
	background-size: 1160px auto, 15px 15px;
	background-blend-mode: soft-light, normal;
	background-color: #29166F;
}

/* Figma trails the dot AFTER each location; Elementor's icon-list draws it
   BEFORE, so on a wrapped line the dot fell to the start of the next row.
   Drop the built-in icon and emit a trailing separator instead. */
.pi-serve-section .elementor-icon-list-icon { display: none !important; }
.pi-serve-section .elementor-icon-list-item {
	position: relative;
	margin-right: 0;
}
.pi-serve-section .elementor-icon-list-item:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #B7E2C6;
	margin: 0 10px 2px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------
   19. FAQ rows — Dev Mode panel values.
   Row: 1109 wide, radius 12, 1px #E2E4E3, padding 26/24, #FFFFFF,
   drop shadow X2 Y2 blur16 spread0 #949BA3 @40%.
   Open row: the WHOLE item (question + answer) becomes the green gradient,
   not just the question strip. Elementor styles the title and the content
   panel separately, so both are set here and the item carries the radius.

   Selectors are body + five classes: Elementor's own accordion rules in
   post-56.css carry four to five classes and load after this file.
   --------------------------------------------------------------------- */
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-accordion-item {
	border: 1px solid #E2E4E3;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 2px 2px 16px 0 rgba(148, 155, 163, .4);
	background: #FFFFFF;
	transition: box-shadow .3s ease-out;
}
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-tab-title {
	padding: 26px 24px;
	border: 0;
	background: transparent;
}
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-tab-content {
	padding: 0 24px 26px;
	border: 0;
	background: transparent;
}
/* whole row goes green when open */
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
	background: linear-gradient(-73.24deg, #51A26D 8.74%, #008C31 60.26%);
	border-color: transparent;
}
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-tab-title.elementor-active,
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-tab-title.elementor-active a,
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-tab-content.elementor-active {
	background: transparent;
	color: #FFFFFF;
}
/* divider under the open question */
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-tab-title.elementor-active {
	border-bottom: 1px solid #82C097;
}

/* ---------------------------------------------------------------------
   20. FAQ gap + icon.
   24px between rows (Figma annotation). The toggle is a circled glyph in the
   design — a 1px ring at rest, not only on hover; on the open row the ring
   and glyph go white so they read against the green.
   --------------------------------------------------------------------- */
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-accordion {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-accordion-item {
	margin: 0;
}
.pi-faq .elementor-accordion-icon {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #29166F;
	border-radius: 50%;
	transition: border-color .3s ease-out, color .3s ease-out;
}
.pi-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
	border-color: #FFFFFF;
	color: #FFFFFF;
}
.pi-faq .elementor-tab-title.elementor-active .elementor-accordion-icon svg { fill: #FFFFFF; }

/* ---------------------------------------------------------------------
   21. FAQ toggle icons — the real Figma assets, inlined as data URIs.
   WP core blocks .svg upload and Elementor's SVG library needs a real file,
   so the artwork is embedded here instead. It stays vector this way, unlike
   the rasterised WebP fallback used for the "why" card icons.
   Closed: #29166F ring + plus. Open: white ring + cross.
   Elementor's own glyph is hidden underneath.
   --------------------------------------------------------------------- */
body .elementor-56 .pi-faq .elementor-accordion-icon {
	width: 30px;
	height: 30px;
	min-width: 30px;
	border: 0;
	background-image: url("data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="29" height="29" rx="14.5" stroke="%2329166F"/><path d="M15 8V22M8 15H22" stroke="%2329166F" stroke-linecap="round" stroke-linejoin="round"/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px 30px;
	font-size: 0;
}
body .elementor-56 .pi-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
	background-image: url("data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="29" height="29" rx="14.5" stroke="white"/><path d="M9.55131 10.0503L19.4508 19.9497M9.55131 19.9497L19.4508 10.0503" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>");
	border: 0;
}
body .elementor-56 .pi-faq .elementor-accordion-icon svg,
body .elementor-56 .pi-faq .elementor-accordion-icon i { display: none !important; }

/* divider spans the full content width (1109 row - 24 left - 24 right = 1061) */
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-tab-title.elementor-active {
	border-bottom: 1px solid #82C097;
	margin: 0 24px;
	padding-left: 0;
	padding-right: 0;
}
body .elementor-56 .pi-faq.elementor-widget-accordion .elementor-tab-content {
	margin: 0 24px;
	padding-left: 0;
	padding-right: 0;
}

/* =====================================================================
   22. GLOBAL RESPONSIVE LAYER — applies to every section on the page.

   Rule set by the client:
     vertical padding   100 desktop / 70 tablet / 50 mobile
     horizontal padding 20 on every device
     type and gaps step down proportionally per breakpoint

   Written as one global layer rather than per-section so the scale cannot
   drift as sections are edited. Breakpoints follow Elementor's own:
   tablet <=1024, mobile <=767.

   Specificity: body + .elementor-56 + .elementor-element beats the per-widget
   padding Elementor writes into post-56.css (four classes, loaded later).
   ===================================================================== */

/* ---- section rhythm ---- */
body .elementor-56.elementor > .e-con.e-parent {
	padding-top: 100px;
	padding-bottom: 100px;
	padding-left: 20px;
	padding-right: 20px;
}
/* the hero and ticker are full-bleed by design — they keep their own padding */
body .elementor-56 .pi-hero,
body .elementor-56 .pi-ticker { padding-left: 0; padding-right: 0; }

@media (max-width: 1024px) {
	body .elementor-56.elementor > .e-con.e-parent {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}
@media (max-width: 767px) {
	body .elementor-56.elementor > .e-con.e-parent {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

/* ---- type scale ----
   Desktop values are the Figma spec; tablet ~0.75x, mobile ~0.6x, rounded to
   whole px and floored so body copy never drops below a readable 15px. */
@media (max-width: 1024px) {
	body .elementor-56 h1, body .elementor-56 .elementor-widget-heading h1 { font-size: 44px; line-height: 52px; }
	body .elementor-56 h2, body .elementor-56 .elementor-widget-heading h2 { font-size: 36px; line-height: 42px; }
	body .elementor-56 h3, body .elementor-56 .elementor-widget-heading h3 { font-size: 24px; line-height: 32px; }
	body .elementor-56 .elementor-widget-text-editor { font-size: 18px; line-height: 26px; }
	body .elementor-56 .elementor-button { font-size: 15px; }
	body .elementor-56 .pi-eyebrow .elementor-heading-title { font-size: 20px; }
}
@media (max-width: 767px) {
	body .elementor-56 h1, body .elementor-56 .elementor-widget-heading h1 { font-size: 32px; line-height: 40px; }
	body .elementor-56 h2, body .elementor-56 .elementor-widget-heading h2 { font-size: 28px; line-height: 34px; }
	body .elementor-56 h3, body .elementor-56 .elementor-widget-heading h3 { font-size: 20px; line-height: 28px; }
	body .elementor-56 .elementor-widget-text-editor { font-size: 16px; line-height: 24px; }
	body .elementor-56 .elementor-button { font-size: 15px; }
	body .elementor-56 .pi-eyebrow .elementor-heading-title { font-size: 18px; }
}

/* ---- gaps step down with the type ---- */
@media (max-width: 1024px) {
	body .elementor-56 .e-con { --gap: 24px; }
	body .elementor-56 .pi-why-col { gap: 22px; }
	body .elementor-56 .pi-step-card { width: 100%; min-height: 0; }
}
@media (max-width: 767px) {
	body .elementor-56 .e-con { --gap: 16px; }
	body .elementor-56 .pi-why-col { gap: 16px; }
	body .elementor-56 .pi-why-card,
	body .elementor-56 .pi-prog-card,
	body .elementor-56 .pi-res-card { width: 100%; }
	body .elementor-56 .pi-why-img img { width: 100%; }
	/* the founder name run is oversized against 16px body copy on a phone */
	.pi-founder { font-size: 18px; }
}

/* ---- nothing may cause a horizontal scrollbar ---- */
@media (max-width: 1024px) {
	body .elementor-56 .pi-serve-section,
	body .elementor-56 .pi-hero { background-attachment: scroll; }
	html, body { overflow-x: hidden; }
	/* the hero's blurred slab is sized in px and would overhang */
	.e-con.pi-hero::after { left: -40%; width: 140%; filter: blur(140px); }
}

/* =====================================================================
   23. RESPONSIVE — corrected to Elementor's custom properties.

   Elementor containers resolve their padding from
   `padding: var(--padding-top) var(--padding-right) ...`, and post-56.css sets
   those vars per breakpoint (e.g. --padding-top:43px at <=767). Setting the
   `padding` shorthand here never won, because the var kept feeding Elementor's
   own declaration. Overriding the VARS is what actually takes effect.
   ===================================================================== */
body .elementor-56.elementor > .e-con.e-parent {
	--padding-top: 100px;
	--padding-bottom: 100px;
	--padding-left: 20px;
	--padding-right: 20px;
}
@media (max-width: 1024px) {
	body .elementor-56.elementor > .e-con.e-parent {
		--padding-top: 70px;
		--padding-bottom: 70px;
		--padding-left: 20px;
		--padding-right: 20px;
	}
}
@media (max-width: 767px) {
	body .elementor-56.elementor > .e-con.e-parent {
		--padding-top: 50px;
		--padding-bottom: 50px;
		--padding-left: 20px;
		--padding-right: 20px;
	}
}
/* full-bleed sections keep zero horizontal inset */
body .elementor-56 .pi-hero,
body .elementor-56 .pi-ticker { --padding-left: 0px; --padding-right: 0px; }

/* ---- header stays on one row at every width ---- */
@media (max-width: 1024px) {
	header .e-con > .e-con-inner,
	header .e-con.e-con-full {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	header .pi-logo img { max-width: 150px; height: auto; }
	header .pi-btn-stack .elementor-button { padding: 8px 14px; font-size: 14px; }
}
@media (max-width: 767px) {
	header .pi-logo img { max-width: 120px; }
	header .pi-btn-stack .elementor-button { padding: 7px 12px; font-size: 13px; }
}

/* =====================================================================
   24. Padding + header, forced.

   The var override in block 23 still lost to post-56.css, so the values are
   pinned with !important. Not elegant, but Elementor regenerates that file on
   every save and will keep reclaiming the vars otherwise.
   ===================================================================== */
body .elementor-56.elementor > .e-con.e-parent {
	--padding-top: 100px !important;
	--padding-bottom: 100px !important;
	--padding-left: 20px !important;
	--padding-right: 20px !important;
	padding: 100px 20px !important;
}
@media (max-width: 1024px) {
	body .elementor-56.elementor > .e-con.e-parent {
		--padding-top: 70px !important;
		--padding-bottom: 70px !important;
		padding: 70px 20px !important;
	}
}
@media (max-width: 767px) {
	body .elementor-56.elementor > .e-con.e-parent {
		--padding-top: 50px !important;
		--padding-bottom: 50px !important;
		padding: 50px 20px !important;
	}
}
/* hero and ticker stay edge-to-edge */
body .elementor-56 .pi-hero,
body .elementor-56 .pi-ticker {
	--padding-left: 0px !important;
	--padding-right: 0px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ---- header: logo, menu toggle and Register Now all on one row ---- */
@media (max-width: 1024px) {
	header .e-con.e-parent > .e-con-inner,
	header .e-con.e-con-full {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 10px;
	}
	header .pi-logo img { max-width: 140px; height: auto; }
	header .pi-btn-stack { display: block !important; }
	header .pi-btn-stack .elementor-button {
		padding: 9px 16px;
		font-size: 14px;
		white-space: nowrap;
	}
	header .elementor-menu-toggle { margin: 0 4px; }
}
@media (max-width: 767px) {
	header .pi-logo img { max-width: 118px; }
	header .pi-btn-stack .elementor-button { padding: 8px 13px; font-size: 13px; }
}

/* ---------------------------------------------------------------------
   25. CTA banner card is centred.
   The section is a column flex with justify-content:center (which centres it
   VERTICALLY). Horizontal centring in a column flex needs align-items, which
   was never set, so the 740px card sat hard left. Targeted by element id
   class because the section carries no pi- class of its own.
   --------------------------------------------------------------------- */
body .elementor-56 .elementor-element.elementor-element-1d408d9 {
	align-items: center;
}
body .elementor-56 .elementor-element.elementor-element-ba3fe05 {
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------
   26. Footer — Figma frame 1618873399, 1920x669, bg #F0F1F0.
   "Privacy Policy" was rendering in the theme's default link colour (red);
   the bottom bar is #29166F so it must be white. Spacing is also much looser
   than the design: per the spec the column heading -> list gap is 8px and
   list items sit 7px apart, against Elementor's larger defaults.
   --------------------------------------------------------------------- */
footer .elementor-widget-text-editor a,
footer .elementor-widget-text-editor a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
footer .elementor-widget-text-editor a:hover { color: #00A539; }

/* column rhythm: 8px heading -> list, 7px between items */
footer .elementor-widget-heading { margin-bottom: 8px; }
footer .elementor-icon-list-items .elementor-icon-list-item:not(:last-child) {
	margin-bottom: 7px;
}
footer .elementor-icon-list-item { line-height: 26px; }

/* social icons: 30px glyphs, evenly spaced as in the design */
footer .elementor-social-icon {
	width: 30px;
	height: 30px;
	font-size: 16px;
}
footer .elementor-grid { gap: 10px; }

/* ---------------------------------------------------------------------
   27. Footer Math Kangaroo badge sits INSIDE the white card.
   Figma: one 261x136 white container holding the label and the seal side by
   side. Live had the white fill on the text widget only, so the seal sat
   outside it to the right. Move the card styling up to the container that
   holds both, and clear it off the text.
   --------------------------------------------------------------------- */
footer .e-con:has(> .elementor-widget-image img[src*="math-kangaroo-badge"]) {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	background: #FFFFFF;
	border: 1px solid #E4E4E4;
	border-radius: 8px;
	padding: 14px 16px;
	width: fit-content;
	max-width: 100%;
}
footer .e-con:has(> .elementor-widget-image img[src*="math-kangaroo-badge"])
	> .elementor-widget-text-editor {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	flex: 1 1 auto;
}
footer .e-con:has(> .elementor-widget-image img[src*="math-kangaroo-badge"])
	> .elementor-widget-image { flex: 0 0 auto; margin: 0; }
footer .e-con:has(> .elementor-widget-image img[src*="math-kangaroo-badge"])
	> .elementor-widget-image img { width: 72px; height: auto; display: block; }


/* ---------------------------------------------------------------------
   28. Achievements pagination — SIZE ONLY.
   The circles were sized by padding around each glyph, so "1" produced a
   wider box than "‹". This gives every item the same square box and centres
   its glyph. Nothing else is touched: colour, border, background, hover,
   transition and the nav's own layout stay exactly as they were.
   box-sizing keeps any existing padding inside the fixed box.
   The prev/next arrows need !important because JS in an HTML widget on the
   page writes inline styles onto them at runtime.
   --------------------------------------------------------------------- */
.dk-page-set .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
}
.dk-page-set .page-numbers.prev,
.dk-page-set .page-numbers.next {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 48px !important;
	height: 48px !important;
	/* the arrows carry padding: 14px 21px; with border-box that plus the 2px
	   border sets a 46px floor, so 42/38 could never be reached. Flex centring
	   already positions the glyph, so the horizontal padding is redundant. */
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* the ellipsis is a text separator, not a circle — leave its width natural */
.dk-page-set .page-numbers.dots { width: auto; }

@media (min-width: 768px) and (max-width: 1024px) {
	.dk-page-set .page-numbers { width: 42px; height: 42px; }
	.dk-page-set .page-numbers.prev,
	.dk-page-set .page-numbers.next { width: 42px !important; height: 42px !important; }
	.dk-page-set .page-numbers.dots { width: auto; }
}
@media (max-width: 767px) {
	.dk-page-set .page-numbers { width: 38px; height: 38px; }
	.dk-page-set .page-numbers.prev,
	.dk-page-set .page-numbers.next { width: 38px !important; height: 38px !important; }
	.dk-page-set .page-numbers.dots { width: auto; }
}

/* Remove hero purple overlay on mobile only */
@media (max-width: 767px) {
	.e-con.pi-hero::after {
		content: none !important;
	}
}