/*
 * Motion system — Easy Quran Classes.
 * Timing vocabulary lives in tokens.css. This file defines the reveal
 * primitives that assets/js/eqc.js toggles via IntersectionObserver, plus
 * the small set of always-on CSS transitions/keyframes. See DESIGN.md §20.
 *
 * Contract: every element gets `[data-eqc-reveal]` in markup. JS adds
 * `is-visible` when it enters the viewport. Without JS (or before it runs)
 * elements must already be visible — see the progressive-enhancement rule
 * below — so content is never hidden behind a script failure.
 */

/* Progressive enhancement: only hide reveal elements once JS proves it can
   toggle them back. `html.eqc-js` is set immediately by an inline script
   in header.php, before paint. */
html:not(.eqc-js) [data-eqc-reveal] {
	opacity: 1;
	transform: none;
}

html.eqc-js [data-eqc-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--eqc-motion-reveal) var(--eqc-ease-soft),
		transform var(--eqc-motion-reveal) var(--eqc-ease-soft);
}

html.eqc-js [data-eqc-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Staggered groups: children declare data-eqc-reveal-index="0..n" and this
   sets the transition-delay in steps of --eqc-motion-stagger.

   These selectors carry `html.eqc-js [data-eqc-reveal]` for a reason, and it is
   not decoration. Written bare as `[data-eqc-reveal-index="1"]` they are
   (0,1,0), while the base reveal rule above is (0,2,1) -- and that rule sets
   the `transition` SHORTHAND, which writes `transition-delay: 0s` along with
   everything else. The more specific shorthand therefore beat every stagger
   rule on the delay property, at every index, on every page: measured with
   getComputedStyle, all of them resolved to "0s, 0s" and the whole site's
   staggered reveals fired as one block. Source order could never have fixed it;
   only specificity can. */
html.eqc-js [data-eqc-reveal][data-eqc-reveal-index="1"] { transition-delay: calc(var(--eqc-motion-stagger) * 1); }
html.eqc-js [data-eqc-reveal][data-eqc-reveal-index="2"] { transition-delay: calc(var(--eqc-motion-stagger) * 2); }
html.eqc-js [data-eqc-reveal][data-eqc-reveal-index="3"] { transition-delay: calc(var(--eqc-motion-stagger) * 3); }
html.eqc-js [data-eqc-reveal][data-eqc-reveal-index="4"] { transition-delay: calc(var(--eqc-motion-stagger) * 4); }
html.eqc-js [data-eqc-reveal][data-eqc-reveal-index="5"] { transition-delay: calc(var(--eqc-motion-stagger) * 5); }
html.eqc-js [data-eqc-reveal][data-eqc-reveal-index="6"] { transition-delay: calc(var(--eqc-motion-stagger) * 6); }

/* Gold divider line-draw, used under section headings. */
.eqc-heading-rule--draw {
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform var(--eqc-motion-slow) var(--eqc-ease-standard);
}
html.eqc-js .is-visible .eqc-heading-rule--draw { transform: scaleX(1); }

/* Sticky header state change. */
.eqc-header {
	transition: box-shadow var(--eqc-motion-base) var(--eqc-ease-standard),
		background-color var(--eqc-motion-base) var(--eqc-ease-standard);
}
.eqc-header.is-scrolled { box-shadow: 0 8px 24px rgba(20, 35, 27, 0.08); }

/* Default ornament drift — a slow, subtle translate, never distracting. The
   per-corner variants below are what actually run on the corner motifs; this
   one remains the fallback for any ornament without a corner modifier. */
@keyframes eqc-drift {
	from { translate: 0 0; }
	to { translate: -16px -10px; }
}

/* One shared translate cannot serve four corners: -16px/-10px carries the
   top-right motif up and out of its section while carrying the bottom-left one
   inward, so the pair never reads as a matched set. Each corner drifts along
   its OWN diagonal, toward the section's middle, at half the amplitude — the
   ornaments stay anchored to their corners and breathe together.
   `translate` is its own property, so this composes with the flips and
   rotations `transform` carries on --bl/--tl/--br.
   Amplitude 4px/3px (round 10; was 7px/5px) — the motif now starts flush
   against the section edge (--_motif-inset: 0), and since every one of these
   keyframes moves inward only, never back out past 0 0, the amplitude is the
   full size of the gap the motif ever shows. Kept small so it still reads as
   flush throughout the cycle rather than opening the gap the client asked to
   have removed. */
@keyframes eqc-drift-tl { from { translate: 0 0; } to { translate: 4px 3px; } }
@keyframes eqc-drift-tr { from { translate: 0 0; } to { translate: -4px 3px; } }
@keyframes eqc-drift-bl { from { translate: 0 0; } to { translate: 4px -3px; } }
@keyframes eqc-drift-br { from { translate: 0 0; } to { translate: -4px -3px; } }
html.eqc-js .eqc-corner-motif--tl { animation-name: eqc-drift-tl; }
html.eqc-js .eqc-corner-motif--tr { animation-name: eqc-drift-tr; }
html.eqc-js .eqc-corner-motif--bl { animation-name: eqc-drift-bl; }
html.eqc-js .eqc-corner-motif--br { animation-name: eqc-drift-br; }
/* Mobile nav drawer */
.eqc-nav-drawer {
	transform: translateX(100%);
	transition: transform var(--eqc-motion-base) var(--eqc-ease-standard), box-shadow var(--eqc-motion-base) var(--eqc-ease-standard);
}
/* Shadow only while open -- see shell.css .eqc-nav-drawer. */
.eqc-nav-drawer.is-open { transform: translateX(0); box-shadow: -12px 0 32px rgba(20, 35, 27, 0.18); }
.eqc-nav-scrim {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--eqc-motion-base) var(--eqc-ease-standard);
}
.eqc-nav-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Round 20 motion layer. DESIGN.md §20: soft, confident, one-shot. Nothing
   here loops -- the only continuous motion on the site stays the corner-motif
   drift above, which keeps every viewport inside the "1-2 continuous
   animations" cap however many cards are on screen.
   ========================================================================== */

/* ---- Elementor entrance animation "Soft Rise" --------------------------
   Registered in the editor's Motion Effects > Entrance Animation list by
   functions.php (eqc_elementor_animations), so an editor can apply, change or
   remove it per element. Elementor's own Fade In Up travels 100% of the
   element's height -- ~300px for a card -- which is not this site's motion;
   this travels 26px. Elementor only ships stylesheets for its built-in
   animations, so the keyframes live here. No fill-mode: once it ends, the
   card's own hover lift works again. */
@keyframes eqcSoftRise {
	from { opacity: 0; transform: translate3d(0, 26px, 0); }
	to { opacity: 1; transform: none; }
}
.eqcSoftRise {
	animation-name: eqcSoftRise;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* "Soft Settle": a quiet scale-in for single blocks (images, panels). */
@keyframes eqcSoftSettle {
	from { opacity: 0; transform: scale(0.965); }
	to { opacity: 1; transform: none; }
}
.eqcSoftSettle {
	animation-name: eqcSoftSettle;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ---- Photos slide in from their own side of the screen ------------------
   A photo column carrying `eqc-slide-from-left` or `eqc-slide-from-right`
   (Elementor: Advanced > CSS Classes on the column container) glides in from
   that edge of the screen EVERY time it scrolls into view, not just once
   (client, 2026-09-17). eqc.js initSideSlides() measures how far the column is
   from that edge and sets --eqc-slide-x; the column's children move, the
   column itself never does, so the observer measures a box that is not
   transformed. Remove the class to switch the effect off for one photo.
   - Out of view: parked off-screen and transparent, with no transition, so
     leaving the viewport never plays a reverse animation.
   - Already on screen at load (the hero): starts only a short distance out and
     fully opaque, so the LCP image is never hidden waiting for JavaScript.
   - No JS, no IntersectionObserver or reduced motion: eqc.js never adds
     .eqc-slide, so nothing here applies and the photo simply shows.
   body has overflow-x: clip, so a parked photo never adds a sideways
   scrollbar; do not clip the media rows themselves -- the arch and portrait
   backdrops deliberately extend past them. */
/* A long glide (the photo starts past the screen edge) needs a long, soft
   deceleration: 1.4s on an ease that spends its second half settling, with a
   slight scale-up so the photo arrives rather than stops. Opacity finishes
   early, so the photo is solid for most of the travel. */
html.eqc-js .eqc-slide > * {
	transition:
		transform 1400ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 900ms cubic-bezier(0.33, 1, 0.68, 1);
}
html.eqc-js .eqc-slide:not(.is-in) > * {
	opacity: 0;
	transform: translate3d(var(--eqc-slide-x, 0px), 0, 0) scale(0.94);
	transition: none;
}
html.eqc-js .eqc-slide.eqc-slide--solid:not(.is-in) > * { opacity: 1; }
/* A parked photo sits past the screen edge, which would widen the document
   (body's overflow-x: clip propagates to the viewport and does not stop the
   page from measuring wider; mobile browsers can still pan into it). Clip
   sideways at the full-width section instead: it spans the viewport, so the
   arch and portrait backdrops that extend past their row stay whole. */
.e-con.eqc-section:has(.eqc-slide-from-left, .eqc-slide-from-right) { overflow-x: clip; }

/* ---- Headings: word-by-word rise ---------------------------------------
   eqc.js splits the heading's words into .eqc-w spans (text only -- the
   accessible name is unchanged) and adds .is-in on view. Applied to section
   H2s and the hero H1 by default; any Elementor Heading can opt in with the
   CSS class `eqc-anim-words`, or out with `eqc-anim-none`. */
html.eqc-js .eqc-anim-words .eqc-w {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.42em);
	transition: opacity 520ms var(--eqc-ease-soft), transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
	/* Capped at the 10th word: a long headline must not trail for seconds. */
	transition-delay: calc(min(var(--eqc-w-i, 0), 10) * 55ms + var(--eqc-anim-delay, 0ms));
}
html.eqc-js .eqc-anim-words.is-in .eqc-w {
	opacity: 1;
	transform: none;
}
/* Headings over 16 words: one soft fade instead of a long cascade. */
html.eqc-js .eqc-anim-fade-block {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 700ms var(--eqc-ease-soft), transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.eqc-js .eqc-anim-fade-block.is-in { opacity: 1; transform: none; }
/* No underline under the accent phrase: tried in Round 20 and removed at the
   client's request -- every heading already has the gold divider beneath it,
   and a second gold line under the accent read as clutter. */

/* ---- Hero: staged entrance ----------------------------------------------
   Pill, headline words, rule, lede, chips, buttons, trust line -- one
   sequence rather than a block appearing at once. Home and kids heroes
   (.eqc-hero-text) and every eqc_page_hero() page plus /career/
   (.eqc-anim-hero) -- eqc.js stages the first one on the page. Short, because this is
   the LCP area: the whole sequence is done in about 1.1s.
   Every hidden starting state in this layer hangs off a class eqc.js adds
   (.eqc-anim-stage here, .eqc-anim-shape/-frame/-fade below), never off
   html.eqc-js alone: if the script fails or IntersectionObserver is missing,
   nothing is left invisible. */
html.eqc-js .eqc-anim-stage > .elementor-element {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 600ms var(--eqc-ease-soft), transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.eqc-js .eqc-anim-stage.is-in > .elementor-element { opacity: 1; transform: none; }
html.eqc-js .eqc-anim-stage > .elementor-element:nth-child(3) { transition-delay: 380ms; }
html.eqc-js .eqc-anim-stage > .elementor-element:nth-child(4) { transition-delay: 480ms; }
html.eqc-js .eqc-anim-stage > .elementor-element:nth-child(5) { transition-delay: 580ms; }
html.eqc-js .eqc-anim-stage > .elementor-element:nth-child(6) { transition-delay: 680ms; }
html.eqc-js .eqc-anim-stage > .elementor-element:nth-child(n+7) { transition-delay: 780ms; }
/* The H1's own wrapper shows at once; its words carry the motion, starting
   just after the pill. */
html.eqc-js .eqc-anim-stage > .elementor-element:has(h1) { opacity: 1; transform: none; }
.eqc-anim-stage h1 { --eqc-anim-delay: 160ms; }

/* ---- Shapes -------------------------------------------------------------
   Seals, discs and rosettes settle in with a quarter turn when their card
   comes into view. `rotate`/`scale` are individual properties, so they
   compose with the transforms these elements already use for layout and
   hover (e.g. the pricing medallion's translateX(-50%)). */
html.eqc-js .eqc-anim-shape {
	opacity: 0;
	rotate: -60deg;
	scale: 0.72;
	transition: opacity 480ms var(--eqc-ease-soft), rotate 1000ms cubic-bezier(0.2, 0.8, 0.25, 1), scale 760ms cubic-bezier(0.34, 1.4, 0.64, 1);
	transition-delay: var(--eqc-anim-delay, 0ms);
}
html.eqc-js .eqc-anim-shape.is-in { opacity: 1; rotate: 0deg; scale: 1; }
/* The step numeral pops in after the seal has turned in. */
html.eqc-js .eqc-card--step .eqc-card-index.eqc-anim-shape { --eqc-anim-delay: 320ms; }
/* :not(.is-in) -- this selector outweighs the shared .is-in rule, and without
   it would hold the chip at 30% after it had arrived. */
html.eqc-js .eqc-card--step .eqc-card-index.eqc-anim-shape:not(.is-in) { rotate: 0deg; scale: 0.3; }
.eqc-card--step:hover .eqc-card-index {
	background: var(--eqc-gold-500);
	color: var(--eqc-green-900);
	transition: background-color var(--eqc-motion-base) var(--eqc-ease-standard), color var(--eqc-motion-base) var(--eqc-ease-standard);
}
/* The award badge swings once from its top, like a hung ribbon settling. */
@keyframes eqc-badge-swing {
	0% { opacity: 0; rotate: -16deg; }
	35% { opacity: 1; rotate: 9deg; }
	62% { rotate: -4deg; }
	84% { rotate: 1.5deg; }
	100% { opacity: 1; rotate: 0deg; }
}
html.eqc-js .eqc-pricing-badge.eqc-anim-shape { opacity: 0; rotate: 0deg; scale: 1; transition: none; }
/* opacity: 1 is stated, not left to the keyframes: if animations are off or
   overridden, the badge must still be there. */
html.eqc-js .eqc-pricing-badge.eqc-anim-shape.is-in { opacity: 1; animation: eqc-badge-swing 1300ms cubic-bezier(0.3, 0.7, 0.4, 1) 350ms both; }

/* ---- Section tags unfurl from the centre --------------------------------
   The cartouche opens outward like a scroll being unrolled. */
html.eqc-js .eqc-eyebrow.eqc-anim-frame {
	clip-path: inset(0 50% 0 50%);
	transition: clip-path 820ms cubic-bezier(0.65, 0, 0.35, 1);
}
html.eqc-js .eqc-eyebrow.eqc-anim-frame.is-in { clip-path: inset(0 0 0 0); }

/* ---- Teacher cards: lace corners fade in after the card ---------------- */
html.eqc-js .eqc-teacher-ornament.eqc-anim-fade .eqc-teacher-ornament__corner {
	opacity: 0;
	transition: opacity 1200ms var(--eqc-ease-soft) 400ms;
}
html.eqc-js .eqc-teacher-ornament.eqc-anim-fade.is-in .eqc-teacher-ornament__corner { opacity: 0.34; }

/* ---- CTA banner ("Book Free Trial Class!") --------------------------------
   The site's primary conversion point, so it is the one place motion is
   allowed to be loud. Every time the bar enters the viewport (eqc.js
   initCtaBanner toggles .is-live; .is-armed means JS is running):
   1. the title slides in from the left and its gold rule draws;
   2. Name, Phone, then the button snap in from the right -- fast out, a
      slight lean, then a short damped oscillation (-14 / +7 / -3 / +1px) so
      they land like something physical rather than fade into place;
   3. the Name box pulses a gold ring twice -- "start here";
   4. the button rings outward and a light sheen crosses it a few times.
   Everything is transform/opacity/box-shadow on three small elements, and
   the bar clips its own overflow, so nothing reaches the page's scroll
   width. A visitor who has started typing is never animated again (JS). */
@keyframes eqc-cta-orbit {
	0%, 100% { transform: translate3d(-8%, -12%, 0) rotate(0deg); opacity: 0.58; }
	50% { transform: translate3d(6%, 4%, 0) rotate(18deg); opacity: 0.9; }
}
@keyframes eqc-cta-line {
	from { transform: scaleX(0); opacity: 0.2; }
	to { transform: scaleX(1); opacity: 1; }
}
@keyframes eqc-cta-title-in {
	from { transform: translateX(-2.5rem); opacity: 0; }
	to { transform: none; opacity: 1; }
}
@keyframes eqc-cta-field-in {
	0% {
		transform: translateX(calc(100% + 2rem)) skewX(-8deg);
		opacity: 0;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	}
	46% { transform: translateX(-14px) skewX(3deg); opacity: 1; animation-timing-function: ease-in-out; }
	63% { transform: translateX(7px) skewX(-1.5deg); animation-timing-function: ease-in-out; }
	78% { transform: translateX(-3px) skewX(0.5deg); animation-timing-function: ease-in-out; }
	90% { transform: translateX(1px); animation-timing-function: ease-out; }
	100% { transform: none; opacity: 1; }
}
@keyframes eqc-cta-invite {
	0%, 100% { box-shadow: 0 3px 0 rgba(20, 49, 38, 0.08), 0 0 0 0 rgba(20, 49, 38, 0); }
	40% { box-shadow: 0 3px 0 rgba(20, 49, 38, 0.08), 0 0 0 5px rgba(20, 49, 38, 0.18); border-color: var(--eqc-green-700); }
}
@keyframes eqc-cta-ring {
	0% { box-shadow: 0 8px 18px rgba(122, 67, 42, 0.2), 0 0 0 0 rgba(169, 130, 53, 0.6); }
	70%, 100% { box-shadow: 0 8px 18px rgba(122, 67, 42, 0.2), 0 0 0 14px rgba(169, 130, 53, 0); }
}
@keyframes eqc-cta-btn-sheen {
	0%, 55% { transform: translateX(-120%) skewX(-20deg); }
	85%, 100% { transform: translateX(260%) skewX(-20deg); }
}

/* Parked: only while armed and out of view, so no-JS never hides the form. */
html.eqc-js .eqc-cta-banner.is-armed:not(.is-live) .eqc-cta-banner-title,
html.eqc-js .eqc-cta-banner.is-armed:not(.is-live) .ff-el-group { opacity: 0; }
html.eqc-js .eqc-cta-banner.is-armed .eqc-cta-banner-title::after { transform: scaleX(0); animation: none; }

html.eqc-js .eqc-cta-banner.is-live .eqc-cta-banner-title {
	animation: eqc-cta-title-in 650ms var(--eqc-ease-standard) both;
}
html.eqc-js .eqc-cta-banner.is-live .eqc-cta-banner-title::after {
	animation: eqc-cta-line 800ms var(--eqc-ease-standard) 350ms forwards;
}
html.eqc-js .eqc-cta-banner.is-live .ff-el-group {
	animation: eqc-cta-field-in 1150ms linear both;
	animation-delay: calc(180ms + var(--eqc-cta-i, 0) * 160ms);
}
html.eqc-js .eqc-cta-banner.is-live .eqc-cta-first .ff-el-form-control {
	animation: eqc-cta-invite 1100ms var(--eqc-ease-soft) 1300ms 2;
}
.eqc-cta-banner .ff_submit_btn_wrapper .ff-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.eqc-cta-banner .ff_submit_btn_wrapper .ff-btn::after {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	inline-size: 40%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
	transform: translateX(-120%) skewX(-20deg);
	pointer-events: none;
	z-index: -1;
}
html.eqc-js .eqc-cta-banner.is-live .ff_submit_btn_wrapper .ff-btn {
	animation: eqc-cta-ring 1500ms var(--eqc-ease-soft) 1700ms 3;
}
html.eqc-js .eqc-cta-banner.is-live .ff_submit_btn_wrapper .ff-btn::after {
	animation: eqc-cta-btn-sheen 3200ms var(--eqc-ease-soft) 1500ms 4;
}
/* Background: two brand-green ring sets drifting in opposite corners
   (client, 2026-09-19: "make the background motion graphics green"). Green
   carries on the cream card where the earlier gold barely registered; the
   gold hairline inside each set ties it back to the palette. */
.eqc-cta-banner::before,
.eqc-cta-banner::after {
	content: '';
	position: absolute;
	aspect-ratio: 1;
	border: 2px solid rgba(20, 49, 38, 0.5);
	border-radius: 50%;
	box-shadow:
		0 0 0 10px rgba(20, 49, 38, 0.07),
		0 0 0 12px rgba(169, 130, 53, 0.35),
		0 0 0 26px rgba(20, 49, 38, 0.05),
		inset 0 0 0 9px rgba(20, 49, 38, 0.06);
	pointer-events: none;
	z-index: 0;
}
.eqc-cta-banner::before {
	inset: -42% auto auto -8%;
	width: min(28rem, 48%);
	animation: eqc-cta-orbit 10s var(--eqc-ease-soft) infinite alternate;
}
.eqc-cta-banner::after {
	inset: auto -6% -48% auto;
	width: min(20rem, 34%);
	animation: eqc-cta-orbit 12s var(--eqc-ease-soft) -6s infinite alternate-reverse;
}
.eqc-cta-banner > * { position: relative; z-index: 1; }
/* Reduced motion: reveal everything immediately, keep only essential,
   non-parallax state changes. DESIGN.md §20 Accessibility. */
@media (prefers-reduced-motion: reduce) {
	html.eqc-js [data-eqc-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
	/* Matches the stagger selectors' specificity above: `transition: none`
	   alone is (0,2,1) and would lose the delay property to them. */
	html.eqc-js [data-eqc-reveal][data-eqc-reveal-index] { transition-delay: 0s; }
	/* The drawer still opens and closes, just without the slide. */
	.eqc-nav-drawer { transition: none; }
	.eqc-heading-rule--draw {
		transition: none;
		transform: none;
		stroke-dashoffset: 0;
	}
	.eqc-heading-rule--ornate::before,
	.eqc-heading-rule--ornate::after {
		transition: none;
		transform: scaleX(1);
		opacity: 1;
	}
	html.eqc-js .eqc-corner-motif { animation: none; }
	.eqc-cta-banner::before,
	.eqc-cta-banner::after,
	.eqc-cta-banner-title::after,
	.eqc-cta-banner .ff_submit_btn_wrapper .ff-btn::after { animation: none; }
	.eqc-cta-banner-title::after { transform: scaleX(1); }
	/* Round 20 layer: every element shown in its final state. */
	html.eqc-js .eqc-anim-words .eqc-w,
	html.eqc-js .eqc-anim-stage > .elementor-element,
	html.eqc-js .eqc-anim-fade-block,
	html.eqc-js .eqc-anim-shape,
	html.eqc-js .eqc-pricing-badge.eqc-anim-shape.is-in,
	html.eqc-js .eqc-teacher-ornament.eqc-anim-fade .eqc-teacher-ornament__corner {
		opacity: 1;
		transform: none;
		rotate: 0deg;
		scale: 1;
		transition: none;
		animation: none;
	}
	html.eqc-js .eqc-teacher-ornament.eqc-anim-fade .eqc-teacher-ornament__corner { opacity: 0.34; }
	html.eqc-js .eqc-eyebrow.eqc-anim-frame { clip-path: none; transition: none; }
	/* Elementor already drops its animations under reduce; this makes sure an
	   element waiting for its entrance is not left hidden. */
	.elementor-invisible { visibility: visible !important; }
	.eqc-carousel-track { transition: none; }
	.eqc-btn:hover,
	.eqc-card:hover,
	.eqc-card--pricing:hover,
	.eqc-card:hover .eqc-card-index,
	.eqc-trust-tile:hover .eqc-icon { transform: none; }
	/* The medallion's transform is doing two jobs: translateX(-50%) is layout
	   (it is what centres an absolutely-positioned element on the card's axis)
	   and scale() is the motion. `transform: none` here would un-centre it, so
	   the layout half is kept and only the scale dropped. */
	.eqc-card--pricing:hover .eqc-pricing-icon { transform: translateX(-50%); }
	/* The featured plan no longer carries a resting scale (it matches its
	   siblings' size, per Assests/pricing.jpeg), so there is nothing left to
	   preserve here — the `transform: none` above covers the card itself. */
	* { scroll-behavior: auto !important; }
}