/* BUILD 1.8.3 — 2026-08-17 · Famio (فايميو) — Elementor widgets plugin (source: Ayman-DS famio-preview-66) */
/* =====================================================================
   180D BASE — the invariant layer.
   Extracted from the ten delivered plugins (Fulaz, ENGR FIX, Boscoo,
   SANA, SAT, LJS1, Super Mentality, KFSH-J, Lolita, Auto-Gate).
   Every one of them contained this layer, modulo the prefix.

   HOW TO USE: replace every famio with the project prefix (kfshj, sat,
   boscoo…). Never edit this file's rules to fix a component — add a
   component rule instead. This layer is the contract that survives the
   HTML → Elementor conversion untouched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. TOKENS — fill in per project. See references/tokens.md.
   Keep the NAMES exactly; only the VALUES change per project.
   --------------------------------------------------------------------- */
:root {
	/* surfaces */
	--famio-bg:          #F7FAFF;
	--famio-bg-deep:     #ECF3FC;
	--famio-cream:       #FBF6EC;
	--famio-fg:          #0F2136;
	--famio-card:        #FFFFFF;
	--famio-card-fg:     #0F2136;
	--famio-muted:       #E9F1FA;
	--famio-muted-fg:    #5A6B80;
	--famio-border:      #DCE6F3;

	/* brand — pulled from the logo */
	--famio-primary:      #0D3D7C;
	--famio-primary-fg:   #FFFFFF;
	--famio-primary-glow: #1A5AAE;
	--famio-accent:       #1FA65B;
	--famio-accent-fg:    #FFFFFF;
	--famio-accent-glow:  #35C878;

	/* type */
	--famio-font:         "Almarai", "Segoe UI", Tahoma, system-ui, sans-serif;
	--famio-font-display: "El Messiri", "Almarai", system-ui, sans-serif;

	/* geometry — personality: WARM */
	--famio-radius:      1rem;
	--famio-radius-lg:   1.75rem;
	--famio-max:         80rem;
	--famio-max-narrow:  64rem;
	--famio-pad:         1rem;
	--famio-pad-lg:      2rem;

	/* elevation — warm-tinted */
	--famio-shadow-sm:   0 1px 3px rgba(13,61,124,.08);
	--famio-shadow-md:   0 4px 14px -4px rgba(13,61,124,.16);
	--famio-shadow-card: 0 16px 38px -16px rgba(13,61,124,.28);
	--famio-shadow-glow: 0 0 45px rgba(31,166,91,.28), 0 18px 42px -14px rgba(13,61,124,.32);

	/* gradients */
	--famio-gradient-primary: linear-gradient(135deg, #0D3D7C, #1A5AAE);
	--famio-gradient-accent:  linear-gradient(135deg, #1FA65B, #35C878);
	--famio-gradient-deep:    linear-gradient(115deg, #0A3068 0%, #0C4A73 48%, #0E6B4E 100%);
	/* horizontal on purpose: every horizontal line is identical, so a wave
	   strip and the footer below it meet with no visible seam */
	--famio-gradient-end:     linear-gradient(to right, #0A3068 0%, #0C4A73 55%, #0E6B4E 100%);
	--famio-gradient-hero:    radial-gradient(122% 82% at 50% 0%, #EFF5FF 0%, #DCE8FA 46%, #C6DAF3 100%);

	/* signature: the orbit */
	--famio-orx: min(42vw, 30rem);   /* orbit radius X */
	--famio-ory: 5.5rem;             /* orbit radius Y (arc depth) */
	--famio-orbit-time: 26s;


	--famio-transition:  all .3s cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------------
   1. HORIZONTAL-SCROLL DEFENSE — mandatory, nine layers.
   This block shipped in 10/10 projects. Do not trim it.
   --------------------------------------------------------------------- */
[class^="famio-"], [class*=" famio-"],
[class^="famio-"] *, [class*=" famio-"] *,
[class^="famio-"] *::before, [class*=" famio-"] *::before,
[class^="famio-"] *::after,  [class*=" famio-"] *::after { box-sizing: border-box; }

/* 1b — section-level clip. Add every top-level wrapper class here. */
.famio-section, .famio-hero, .famio-page-hero, .famio-header, .famio-footer,
.famio-cta-banner, .famio-contact, .famio-marquee, .famio-topbar, .famio-ticker,
.famio-journey, .famio-flip, .famio-join, .famio-getapp, .famio-orbit-stage,
.famio-joinform, .famio-story, .famio-values, .famio-goals, .famio-sfaq,
.famio-video, .famio-dishes, .famio-occ {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}
/* the goal stack is deliberately NOT clipped: its back cards are rotated
   and offset, and each card carries a wide soft shadow. Clipping it cut
   the corners off at the sides and the shadow off at the bottom.
   The .famio-goals section already clips at page level. */
.famio-stack { overflow: visible !important; }
/* nothing may push the page sideways — a horizontal scrollbar leaves a
   white strip beside every full-bleed section */
/* the browser's default 8px body margin was showing as a white strip
   down both sides of every full-bleed section */
html, body {
	margin: 0; padding: 0;
	max-width: 100%; width: 100%;
	overflow-x: clip;
}

/* 1c — grid/flex children must be allowed to shrink below intrinsic width */
[class^="famio-"][class*="-grid"] > *,
[class^="famio-"][class*="-row"]  > *,
.famio-form-row > *, .famio-form-field { min-width: 0; max-width: 100%; }

/* 1d — media */
[class^="famio-"] img,    [class*=" famio-"] img,
[class^="famio-"] svg,    [class*=" famio-"] svg,
[class^="famio-"] video,  [class*=" famio-"] video,
[class^="famio-"] iframe, [class*=" famio-"] iframe { max-width: 100%; }
[class^="famio-"] img, [class^="famio-"] iframe { height: auto; }

/* 1e — form controls */
[class^="famio-"] input, [class^="famio-"] textarea,
[class^="famio-"] select, [class^="famio-"] button { max-width: 100%; }
[class^="famio-"] input[type="text"],  [class^="famio-"] input[type="email"],
[class^="famio-"] input[type="tel"],   [class^="famio-"] input[type="number"],
[class^="famio-"] textarea, [class^="famio-"] select { width: 100%; }

/* 1f — long unbroken strings (emails, phones, URLs) */
[class^="famio-"] p, [class^="famio-"] a, [class^="famio-"] span,
[class^="famio-"] li, [class^="famio-"] dd { overflow-wrap: anywhere; word-break: break-word; }

/* 1g — honeypot (spam trap, never visible, never pushes layout) */
.famio-honeypot {
	position: absolute !important; left: -10000px !important;
	width: 1px !important; height: 1px !important; overflow: hidden !important;
}

/* ---------------------------------------------------------------------
   2. TYPOGRAPHY BASELINE
   Arabic needs a taller line-height than Latin — this is not optional.
   --------------------------------------------------------------------- */
[class^="famio-"], [class*=" famio-"] { font-family: var(--famio-font); }

[class^="famio-"] h1, [class^="famio-"] h2,
[class^="famio-"] h3, [class^="famio-"] h4,
[class^="famio-"][class*="-title"],
[class^="famio-"][class*="-headline"] {
	font-family: var(--famio-font-display);
	line-height: 1.25;
	margin: 0;
}

[class^="famio-"] p, [class^="famio-"] li,
[class^="famio-"][class*="-desc"] { line-height: 1.75; }

body.rtl      [class^="famio-"] p, body.rtl      [class^="famio-"] li,
html[lang^="ar"] [class^="famio-"] p, html[lang^="ar"] [class^="famio-"] li,
body.rtl      [class^="famio-"][class*="-desc"],
html[lang^="ar"] [class^="famio-"][class*="-desc"] { line-height: 1.9; }

/* Latin runs inside RTL (phone numbers, emails, prices) */
.famio-ltr, [dir="ltr"] { direction: ltr; unicode-bidi: embed; }

/* ---------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
.famio-container {
	width: 100%;
	max-width: var(--famio-max);
	margin-inline: auto;
	padding-inline: var(--famio-pad);
}
.famio-container-narrow { max-width: var(--famio-max-narrow); }
@media (min-width: 768px) { .famio-container { padding-inline: var(--famio-pad-lg); } }

.famio-section { position: relative; padding-block: 4rem; background: var(--famio-bg); }
@media (min-width: 768px) { .famio-section { padding-block: 6rem; } }

/* Responsive grid helper — mobile 1col, tablet 2, desktop N.
   Use .famio-cols-2/3/4 on the same element. */
.famio-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
	.famio-cols-2, .famio-cols-3, .famio-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.famio-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.famio-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   4. SECTION-HEAD RHYTHM
   Doubled class = specificity 0,2,0, which beats Elementor's
   `h1..h6 { margin: 0 }` reset. This was the #1 round-two complaint
   before it was single-sourced. Never set head spacing per component.
   --------------------------------------------------------------------- */
.famio-section-head.famio-section-head { margin-bottom: 3rem; }
.famio-section-head.famio-section-head .famio-eyebrow {
	display: block;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--famio-accent);
}
.famio-section-head.famio-section-head .famio-section-title { margin: 0 0 1rem; }
.famio-section-head.famio-section-head .famio-head-rule {
	display: flex; align-items: center; justify-content: center;
	width: 13rem; max-width: 100%; height: 1.6rem; gap: .75rem;
	margin: 0 auto 1.25rem; border-radius: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231FA65B'%3E%3Cpath d='M12 2C5 5 2 10 2 15c0 4 3 7 7 7 1-6 4-11 9-15-4 2-7 5-9 10-1-5-1-11 3-15z'/%3E%3C/svg%3E") center / 1.3rem no-repeat;
	background-position-y: center;
}
.famio-head-rule::before, .famio-head-rule::after {
	content: ""; flex: 1; height: 2px; border-radius: 999px;
	transform: scaleX(0);
	transition: transform 1.15s cubic-bezier(.22,.8,.24,1) .15s;
}
.famio-head-rule::before {
	background: linear-gradient(to left, var(--famio-accent), rgba(31,166,91,0));
	transform-origin: right center;
}
.famio-head-rule::after {
	background: linear-gradient(to right, var(--famio-primary), rgba(13,61,124,0));
	transform-origin: left center;
}
.famio-reveal.is-visible .famio-head-rule::before,
.famio-reveal.is-visible .famio-head-rule::after,
html:not(.famio-js) .famio-head-rule::before,
html:not(.famio-js) .famio-head-rule::after { transform: scaleX(1); }
.famio-on-dark .famio-head-rule::after, .famio-flip .famio-head-rule::after,
.famio-sfaq .famio-head-rule::after, .famio-goals .famio-head-rule::after,
.famio-page-hero .famio-head-rule::after, .famio-getapp .famio-head-rule::after {
	background: linear-gradient(to right, rgba(255,255,255,.85), rgba(255,255,255,0));
}
.famio-on-dark .famio-head-rule::before, .famio-flip .famio-head-rule::before,
.famio-sfaq .famio-head-rule::before, .famio-goals .famio-head-rule::before,
.famio-page-hero .famio-head-rule::before, .famio-getapp .famio-head-rule::before {
	background: linear-gradient(to left, var(--famio-accent-glow), rgba(53,200,120,0));
}
.famio-section-head.famio-section-head .famio-section-desc {
	margin: 0 auto; max-width: 40rem; color: var(--famio-muted-fg);
}
.famio-align-center { text-align: center; }
.famio-align-center h1, .famio-align-center h2, .famio-align-center h3,
.famio-align-center p,  .famio-align-center span { text-align: center; }
/* the rule under a heading follows that heading's alignment */
.famio-section-head.famio-section-head .famio-head-rule { margin-inline: 0; }
.famio-section-head.famio-section-head.famio-align-center .famio-head-rule { margin-inline: auto; }
.famio-section-head.famio-section-head.famio-align-start .famio-head-rule { margin-inline: 0; }

/* ---------------------------------------------------------------------
   5. ICON CONTAINER — SIZE AND LAYOUT ONLY.
   Colour is declared PER COMPONENT against its own chip background.
   This selector is 0,2,0 and silently beat per-component colours in
   three builds, shipping invisible icons. Never add `color` here.
   --------------------------------------------------------------------- */
[class^="famio-"][class*="-icon"],
[class*=" famio-"][class*="-icon"] {
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0; line-height: 1;
}
[class^="famio-"][class*="-icon"] svg,
[class*=" famio-"][class*="-icon"] svg {
	width: 1.5rem; height: 1.5rem; display: block;
	color: inherit; fill: none; stroke: currentColor;
}
[class^="famio-"][class*="-icon"] i,
[class*=" famio-"][class*="-icon"] i { font-size: 1.1rem; color: inherit; line-height: 1; }

/* Icon chip — the recurring "coloured square behind an icon" pattern.
   Set the colour on the chip; the icon inherits it. */
.famio-icon-chip {
	width: 3.5rem; height: 3.5rem;
	border-radius: var(--famio-radius);
	background: var(--famio-gradient-accent);
	color: var(--famio-primary-fg);              /* ← per-component override */
	box-shadow: var(--famio-shadow-md);
	transition: var(--famio-transition);
}

/* ---------------------------------------------------------------------
   6. BUTTON SYSTEM — three-layer defense against theme resets.
   Layer 1 (here): shape. Layer 2: element+class selectors with
   !important on colour. Layer 3: descendant colour lock.
   --------------------------------------------------------------------- */
.famio-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	font-family: var(--famio-font); font-weight: 700; font-size: 1rem; line-height: 1.2;
	padding: 0.85rem 2rem;
	border-radius: 9999px;
	border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: var(--famio-transition);
}
a.famio-btn.famio-btn-primary, a.famio-btn.famio-btn-primary:link,
a.famio-btn.famio-btn-primary:visited, button.famio-btn.famio-btn-primary,
.famio-btn.famio-btn-primary[class] {
	background: var(--famio-gradient-primary) !important;
	color: var(--famio-primary-fg) !important;
	text-decoration: none !important;
	box-shadow: var(--famio-shadow-md);
}
a.famio-btn.famio-btn-primary:hover, button.famio-btn.famio-btn-primary:hover,
.famio-btn.famio-btn-primary[class]:hover {
	color: var(--famio-primary-fg) !important;
	transform: translateY(-2px);
	box-shadow: var(--famio-shadow-glow);
}
.famio-btn.famio-btn-primary * { color: var(--famio-primary-fg) !important; }

a.famio-btn.famio-btn-outline, button.famio-btn.famio-btn-outline,
.famio-btn.famio-btn-outline[class] {
	background: transparent !important;
	color: var(--famio-fg) !important;
	border: 1px solid var(--famio-border) !important;
}
a.famio-btn.famio-btn-outline:hover, .famio-btn.famio-btn-outline[class]:hover {
	border-color: var(--famio-accent) !important;
	color: var(--famio-accent) !important;
}
.famio-btn-block { width: 100%; }

/* ---------------------------------------------------------------------
   7. CARD
   --------------------------------------------------------------------- */
.famio-card {
	position: relative;
	display: flex; flex-direction: column; gap: 1rem;
	padding: 1.75rem;
	border-radius: var(--famio-radius-lg);
	border: 1px solid var(--famio-border);
	background: var(--famio-card);
	color: var(--famio-card-fg);
	box-shadow: var(--famio-shadow-card);
	transition: var(--famio-transition);
	height: 100%;
}
.famio-card:hover { transform: translateY(-6px); box-shadow: var(--famio-shadow-glow); }
.famio-card-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.famio-card-desc  { color: var(--famio-muted-fg); margin: 0; }

/* ---------------------------------------------------------------------
   8. FORM
   --------------------------------------------------------------------- */
.famio-form-row { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .famio-form-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.famio-form-field { margin-bottom: 1.25rem; }
.famio-form-field label {
	display: block; margin-bottom: 0.5rem;
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--famio-muted-fg);
}
.famio-form-field input, .famio-form-field textarea, .famio-form-field select {
	width: 100%; max-width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--famio-border);
	border-radius: var(--famio-radius);
	background: var(--famio-card);
	color: var(--famio-fg);
	font: inherit; font-size: 0.9375rem;
	transition: border-color .3s;
}
.famio-form-field textarea { min-height: 8rem; resize: vertical; }
.famio-form-field :is(input, textarea, select):focus {
	outline: 0; border-color: var(--famio-accent);
}
/* Native <select> popup is painted by the OS. On dark themes the option
   text renders white-on-white without these two lines. */
.famio-form-field select {
	-webkit-appearance: none; appearance: none;
	/* dark themes only: color-scheme: dark; background-color: <solid dark>; */
}
.famio-form-notice { display: none; margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--famio-radius); font-size: 0.9rem; }
.famio-form-notice.is-ok   { display: block; background: rgba(22,163,74,.12); color: #16A34A; }
.famio-form-notice.is-err  { display: block; background: rgba(220,38,38,.12); color: #DC2626; }

/* 8b — FORM-SECTION CONTAINMENT (v7.1 layer 9).
   The contact section is where horizontal scroll came back three times. */
.famio-contact, .famio-contact * { min-width: 0; }
.famio-contact { overflow-x: clip; }

/* ---------------------------------------------------------------------
   9. MOTION — see references/motion.md for the full keyframe set.
   --------------------------------------------------------------------- */
@keyframes famio-fade-up   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes famio-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes famio-slide-l   { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes famio-slide-r   { from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: none; } }
@keyframes famio-float     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes famio-marquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.famio-anim-fade  { animation: famio-fade-up .7s cubic-bezier(.2,.8,.2,1) both; }
.famio-anim-left  { animation: famio-slide-l .75s cubic-bezier(.2,.8,.2,1) both; }
.famio-anim-right { animation: famio-slide-r .75s cubic-bezier(.2,.8,.2,1) both; }
.famio-anim-float { animation: famio-float 4s ease-in-out infinite; }

/* Scroll reveal — JS adds .is-visible. NEVER apply .famio-reveal to
   dynamic content (filtered grids, AJAX lists, WooCommerce archives):
   re-rendered nodes never receive .is-visible and stay invisible. */
.famio-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.famio-reveal.is-visible { opacity: 1; transform: none; }

/* Editor preview + reduced motion — force final state so the canvas is
   never blank while an animation delay is pending. */
.elementor-editor-active [class*="famio-anim-"],
.elementor-editor-active .famio-reveal,
body.elementor-editor-preview [class*="famio-anim-"],
body.elementor-editor-preview .famio-reveal {
	opacity: 1 !important; transform: none !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
	[class*="famio-anim-"], .famio-reveal {
		opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
	}
}

/* ---------------------------------------------------------------------
   10. MOBILE PERFORMANCE BUDGET
   Blur/backdrop-filter and large shadows repaint every scroll frame.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	[class^="famio-"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
	.famio-anim-float { animation: none !important; }
	.famio-card { box-shadow: 0 4px 12px -6px rgba(0,0,0,.35) !important; }
}

/* ---------------------------------------------------------------------
   11. WORDPRESS/ELEMENTOR NEUTRALISATION
   Keep this block even in the HTML build — it is dead weight in the
   browser and load-bearing after conversion.
   --------------------------------------------------------------------- */
.elementor-widget-container > [class^="famio-"] { width: 100%; }
[class^="famio-"] a { text-decoration: none; }
[class^="famio-"] ul, [class^="famio-"] ol { list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------------
   12. IMAGE SLOTS
   Class B (factual: projects, gallery, real products) ships as a visible
   placeholder that reserves the final dimensions, so nothing reflows when
   the client uploads the real image in WordPress.
   See references/imagery.md.
   --------------------------------------------------------------------- */
.famio-media { position: relative; overflow: hidden; border-radius: var(--famio-radius-lg); }
.famio-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.famio-media:hover img { transform: scale(1.05); }

.famio-placeholder {
	display: grid; place-items: center; min-height: 12rem;
	border: 1px dashed var(--famio-border);
	border-radius: var(--famio-radius-lg);
	background:
		repeating-linear-gradient(45deg, var(--famio-muted) 0 12px, transparent 12px 24px),
		var(--famio-bg-deep);
}
.famio-placeholder-label {
	font-size: .8rem; letter-spacing: .15em; color: var(--famio-muted-fg);
}

/* =====================================================================
   PROJECT LAYER — Famio. Sections in page order.
   Signature move: THE ORBIT (motion-led, distinctiveness.md §4F)
   + drifting produce photography on the canvas (§4B atmosphere).
   ===================================================================== */

/* 19. ARABIC OVERRIDES on the shared helpers (base §4 is Latin-shaped) */
.famio-section-head.famio-section-head .famio-eyebrow {
	letter-spacing: 0; text-transform: none;
	font-size: .875rem; font-weight: 800; color: var(--famio-accent);
}
.famio-reveal { transition-delay: calc(var(--i, 0) * 80ms); }
.famio-section-head.famio-section-head .famio-section-title {
	font-size: 1.875rem; font-weight: 700; color: var(--famio-primary);
}
@media (min-width: 768px) {
	.famio-section-head.famio-section-head .famio-section-title { font-size: 2.25rem; }
}
.famio-on-dark .famio-section-head.famio-section-head .famio-section-title { color: #fff; }

/* ---------------------------------------------------------------------
   20. GLOBAL ATMOSPHERE
   The ONLY cross-section decoration allowed: the fixed body wash.
   --------------------------------------------------------------------- */
html, body {
	background-color: var(--famio-bg);
	color: var(--famio-fg);
}
body {
	background-image:
		radial-gradient(circle at 12% 6%,  rgba(31,166,91,.10), transparent 46%),
		radial-gradient(circle at 88% 14%, rgba(13,61,124,.10), transparent 48%),
		radial-gradient(circle at 50% 96%, rgba(31,166,91,.08), transparent 52%);
	background-attachment: fixed;
	background-repeat: no-repeat;
}

/* 20b — floating produce (leaves / herbs). Lives INSIDE its section. */
.famio-leaves {
	position: absolute; inset: 0;
	pointer-events: none; overflow: clip; z-index: 0;
}
.famio-leaf {
	position: absolute;
	width: var(--famio-leaf-w, 4.5rem);
	opacity: var(--famio-leaf-o, .16);
	color: var(--famio-accent);
	animation: famio-drift var(--famio-leaf-t, 16s) ease-in-out infinite;
	animation-delay: var(--famio-leaf-d, 0s);
	will-change: transform;
}
.famio-leaf svg, .famio-leaf img { width: 100%; height: auto; display: block; }
.famio-leaf img { filter: drop-shadow(0 10px 16px rgba(13,61,124,.14)); }
@keyframes famio-drift {
	0%,100% { transform: translate3d(0,0,0) rotate(var(--famio-leaf-r, 0deg)); }
	33%     { transform: translate3d(-14px,-22px,0) rotate(calc(var(--famio-leaf-r, 0deg) + 14deg)); }
	66%     { transform: translate3d(12px,-10px,0) rotate(calc(var(--famio-leaf-r, 0deg) - 10deg)); }
}


/* 20d — the orbit ring, reused as a decorative motif */
.famio-ring {
	position: absolute; border: 1px dashed rgba(13,61,124,.18);
	border-radius: 50%; pointer-events: none;
}

/* ---------------------------------------------------------------------
   20d. HEADINGS — words arrive one after another. Arabic is split on
   SPACES only; never per letter, which would break the glyph joins.
   --------------------------------------------------------------------- */
.famio-word {
	display: inline-block;
	opacity: 0; transform: translateY(.5em);
	transition: opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1);
	transition-delay: calc(var(--w, 0) * 90ms);
	will-change: opacity, transform;
}
.is-words-in .famio-word { opacity: 1; transform: none; }

/* variable-weight "breath" — El Messiri is loaded on the wght axis.
   Arabic is animated per WORD: splitting per letter would break the
   glyph joins entirely. */
.famio-hero-title .famio-word, .famio-ph-title .famio-word {
	font-variation-settings: "wght" 520;
	animation: famio-breath 2.8s alternate cubic-bezier(.37,0,.63,1) infinite both;
	animation-delay: var(--famio-breath, 0s);
}
@keyframes famio-breath {
	0%   { font-variation-settings: "wght" 440; }
	100% { font-variation-settings: "wght" 700; }
}
.famio-hero-title .famio-hl, .famio-ph-title .famio-hl {
	position: relative;
}
.famio-hero-title .famio-hl .famio-word {
	text-shadow: 0 0 26px rgba(31,166,91,.28);
}
.famio-ph-title .famio-hl .famio-word {
	text-shadow: 0 0 30px rgba(53,200,120,.45);
}
@media (prefers-reduced-motion: reduce) {
	.famio-hero-title .famio-word, .famio-ph-title .famio-word { animation: none !important; }
}
.elementor-editor-active .famio-word, body.elementor-editor-preview .famio-word,
html:not(.famio-js) .famio-word { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
	.famio-word { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------
   20e. BUTTONS — clean pill in the brand palette. The crooked ribbon
   silhouette is gone: no clip-path, no outline layer, one flat shape.
   --------------------------------------------------------------------- */
a.famio-btn, button.famio-btn, .famio-btn[class], a.famio-store, .famio-store {
	position: relative; z-index: 0; overflow: visible;
	border: 0 !important; border-radius: 999px;
	padding: .95rem 2.1rem;
	clip-path: none !important;
	transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease,
	            background .3s ease, color .3s ease;
}
.famio-btn::before, .famio-btn::after,
.famio-store::before, .famio-store::after { content: none !important; }
a.famio-btn:hover, button.famio-btn:hover, .famio-btn[class]:hover, a.famio-store:hover {
	transform: translateY(-3px);
}

/* solid navy */
a.famio-btn.famio-btn-primary, .famio-btn.famio-btn-primary[class] {
	background: var(--famio-gradient-primary) !important;
	color: var(--famio-primary-fg) !important;
	box-shadow: 0 12px 26px -12px rgba(13,61,124,.6) !important;
}
a.famio-btn.famio-btn-primary:hover, .famio-btn.famio-btn-primary[class]:hover {
	box-shadow: 0 18px 34px -12px rgba(13,61,124,.7) !important;
	filter: brightness(1.06);
}
.famio-btn.famio-btn-primary * { color: var(--famio-primary-fg) !important; }

/* solid green */
a.famio-btn.famio-btn-accent, .famio-btn.famio-btn-accent[class] {
	background: var(--famio-gradient-accent) !important;
	color: var(--famio-accent-fg) !important;
	box-shadow: 0 12px 26px -12px rgba(31,166,91,.65) !important;
}
a.famio-btn.famio-btn-accent:hover, .famio-btn.famio-btn-accent[class]:hover {
	box-shadow: 0 18px 34px -12px rgba(31,166,91,.75) !important;
	filter: brightness(1.06);
}
.famio-btn.famio-btn-accent * { color: var(--famio-accent-fg) !important; }

/* outlined navy */
a.famio-btn.famio-btn-ghost, .famio-btn.famio-btn-ghost[class],
a.famio-btn.famio-btn-line, .famio-btn.famio-btn-line[class] {
	background: #FFFFFF !important;
	color: var(--famio-primary) !important;
	box-shadow: inset 0 0 0 2px var(--famio-primary) !important;
}
a.famio-btn.famio-btn-ghost:hover, .famio-btn.famio-btn-ghost[class]:hover,
a.famio-btn.famio-btn-line:hover, .famio-btn.famio-btn-line[class]:hover {
	background: var(--famio-gradient-primary) !important; color: #fff !important;
	box-shadow: 0 18px 34px -12px rgba(13,61,124,.6) !important;
}
.famio-btn-ghost:hover *, .famio-btn-line:hover * { color: #fff !important; }

/* outlined green */
a.famio-btn.famio-btn-outline, .famio-btn.famio-btn-outline[class] {
	background: #FFFFFF !important; color: #0E7A42 !important;
	box-shadow: inset 0 0 0 2px var(--famio-accent) !important;
}
a.famio-btn.famio-btn-outline:hover, .famio-btn.famio-btn-outline[class]:hover {
	background: var(--famio-gradient-accent) !important; color: #fff !important;
	box-shadow: 0 18px 34px -12px rgba(31,166,91,.6) !important;
}
.famio-btn-outline:hover * { color: #fff !important; }

/* app-store badges keep the solid navy plate */
a.famio-store, .famio-store {
	display: flex; align-items: center; justify-content: flex-start; gap: 1rem;
	border-radius: 1.1rem; padding: .95rem 1.5rem;
	background: var(--famio-gradient-primary) !important; color: #fff !important;
	box-shadow: 0 16px 32px -14px rgba(13,61,124,.55) !important;
}
a.famio-store:hover { filter: brightness(1.08); box-shadow: 0 22px 42px -14px rgba(13,61,124,.65) !important; }

.famio-btn-block { width: 60%; min-width: 15rem; margin-inline: auto; display: flex; }
@media (max-width: 640px) { .famio-btn-block { width: 100%; min-width: 0; } }
.famio-header .famio-btn { padding: .7rem 1.5rem; font-size: .875rem; }

/* --- edible sparks: leaves and seeds puff out of a button on hover --- */
.famio-spark {
	position: absolute; z-index: 3; top: 50%; inset-inline-start: 50%;
	width: var(--famio-spark-size, .7rem); height: var(--famio-spark-size, .7rem);
	pointer-events: none; opacity: 0;
	animation: famio-spark-fly var(--famio-spark-dur, 1s) cubic-bezier(.2,.7,.3,1) forwards;
	will-change: transform, opacity;
}
.famio-spark svg { width: 100%; height: 100%; display: block; }
@keyframes famio-spark-fly {
	0%   { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0deg); }
	18%  { opacity: 1; }
	100% { opacity: 0;
	       transform: translate(calc(-50% + var(--famio-spark-x)), calc(-50% + var(--famio-spark-y)))
	                  scale(1) rotate(var(--famio-spark-r)); }
}
.famio-btn-leaf {            /* the little leaf that lives inside the label */
	display: inline-block; width: 1.05rem; height: 1.05rem; flex-shrink: 0;
	animation: famio-leaf-twinkle 3.2s ease-in-out infinite;
}
.famio-btn-leaf svg { width: 100%; height: 100%; display: block; }
@keyframes famio-leaf-twinkle {
	0%,100% { transform: scale(1) rotate(0deg); opacity: 1; }
	45%     { transform: scale(.8) rotate(-14deg); opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
	.famio-spark { display: none !important; }
	.famio-btn-leaf { animation: none !important; }
}

/* ---------------------------------------------------------------------
   33. QR DOCK — slides up once the visitor has scrolled into the page
   --------------------------------------------------------------------- */
.famio-qr {
	position: fixed; z-index: 80;
	inset-inline-end: 1.5rem; bottom: 1.5rem;
	width: 19rem; max-width: calc(100vw - 3rem);
	direction: rtl; text-align: right;
	background: #FFFFFF;
	border-radius: 1.5rem;
	box-shadow: 0 26px 60px -22px rgba(13,61,124,.45), 0 0 0 1px var(--famio-border);
	padding: 1.15rem 1.25rem;
	display: flex; align-items: center; gap: 1rem;
	transform: translateY(150%); opacity: 0; pointer-events: none;
	transition: transform 1.35s cubic-bezier(.22,.75,.25,1), opacity 1.2s ease, box-shadow .6s ease;
}
.famio-qr.is-on { transform: translateY(0); opacity: 1; pointer-events: auto; }
.famio-qr::before {
	content: ""; position: absolute; inset-inline-start: 1.25rem; top: 0; height: 4px;
	width: calc((100% - 2.5rem) * var(--famio-qr-p, 0));
	border-radius: 0 0 999px 999px; background: var(--famio-gradient-accent);
	transition: width .35s cubic-bezier(.22,.8,.24,1);
}
.famio-qr:hover { box-shadow: 0 32px 70px -22px rgba(13,61,124,.5), 0 0 0 1px rgba(31,166,91,.35); }
.famio-qr-code {
	width: 6rem; height: 6rem; flex-shrink: 0; border-radius: .85rem;
	padding: .3rem; background: #fff;
	box-shadow: 0 0 0 1px var(--famio-border);
}
.famio-qr-code img { width: 100%; height: 100%; display: block; }
.famio-qr-body b {
	display: block; font-family: var(--famio-font-display);
	font-size: 1.0625rem; font-weight: 700; color: var(--famio-primary); margin-bottom: .2rem;
}
.famio-qr-body p { margin: 0; font-size: .8125rem; color: var(--famio-muted-fg); line-height: 1.7; }
.famio-qr-close {
	position: absolute; top: .5rem; inset-inline-end: .5rem;   /* away from the code */
	width: 1.55rem; height: 1.55rem; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer;
	border: 0; background: var(--famio-muted); color: var(--famio-muted-fg);
	transition: var(--famio-transition);
}
.famio-qr-close:hover { background: var(--famio-primary); color: #fff; }
.famio-qr-close svg { width: .7rem; height: .7rem; }
.famio-qr-stores { display: none; gap: .5rem; }
.famio-qr-stores a {
	flex: 1; text-align: center; padding: .55rem .5rem; border-radius: .75rem;
	background: var(--famio-gradient-primary); color: #fff;
	font-size: .75rem; font-weight: 800;
}
@media (max-width: 767px) {
	/* nobody scans a QR with the phone that shows it — links instead */
	.famio-qr { inset-inline: 1rem; bottom: 1rem; width: auto; gap: .75rem; padding: .9rem 2.4rem .9rem 1rem; }
	.famio-qr-close { width: 1.35rem; height: 1.35rem; top: .45rem; inset-inline-end: .45rem; }
	.famio-qr-code { display: none; }
	.famio-qr-body { flex: 1; }
	.famio-qr-body p { display: none; }
	.famio-qr-stores { display: flex; }
}

/* ---------------------------------------------------------------------
   34. PANEL SWITCH — form on one face, direct channels on the other
   --------------------------------------------------------------------- */
.famio-switch { position: relative; }
.famio-switch-tabs {
	position: relative; display: grid; grid-template-columns: 1fr 1fr;
	background: var(--famio-muted); border-radius: 999px;
	padding: .3rem; margin-bottom: 1.75rem;
}
.famio-switch-tabs::before {
	content: ""; position: absolute; z-index: 0;
	top: .3rem; bottom: .3rem; inset-inline-start: .3rem;
	width: calc(50% - .3rem); border-radius: 999px;
	background: var(--famio-gradient-primary);
	box-shadow: 0 8px 18px -10px rgba(13,61,124,.7);
	transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.famio-switch[data-face="1"] .famio-switch-tabs::before { transform: translateX(-100%); }
[dir="ltr"] .famio-switch[data-face="1"] .famio-switch-tabs::before { transform: translateX(100%); }
.famio-switch-tab {
	position: relative; z-index: 1;
	padding: .7rem .5rem; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: .9375rem; font-weight: 800;
	color: var(--famio-muted-fg); transition: color .3s ease;
}
.famio-switch-tab[aria-selected="true"] { color: #fff; }
.famio-switch-faces { display: grid; }
.famio-switch-face {
	grid-area: 1 / 1;
	transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.famio-switch-face[hidden] {
	display: block; opacity: 0; transform: translateY(12px);
	pointer-events: none; visibility: hidden;
}
.famio-channels { display: grid; gap: .75rem; }
.famio-channel {
	display: flex; align-items: center; gap: .9rem;
	padding: .95rem 1.1rem; border-radius: var(--famio-radius);
	border: 1px solid var(--famio-border); background: #fff;
	color: var(--famio-fg); transition: var(--famio-transition);
}
.famio-channel:hover { transform: translateY(-3px); border-color: rgba(31,166,91,.45); box-shadow: var(--famio-shadow-md); }
.famio-channel .famio-ch-icon {
	width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: .9rem;
	background: rgba(31,166,91,.12); color: #157A43;
	transition: var(--famio-transition);
}
.famio-channel:hover .famio-ch-icon { background: var(--famio-gradient-accent); color: #fff; }
.famio-channel .famio-ch-icon svg { width: 1.15rem; height: 1.15rem; }
.famio-channel b { display: block; font-size: .9375rem; color: var(--famio-primary); }
.famio-channel span { font-size: .8125rem; color: var(--famio-muted-fg); }

/* ---------------------------------------------------------------------
   21. HEADER
   --------------------------------------------------------------------- */
.famio-header {
	direction: rtl; text-align: right;
	position: relative; z-index: 1;
	background: rgba(247,250,255,.86);
	border-bottom: 1px solid transparent;
	transition: var(--famio-transition);
}
.famio-header.is-scrolled {
	background: rgba(255,255,255,.96);
	border-bottom-color: var(--famio-border);
	box-shadow: var(--famio-shadow-sm);
}
.famio-header-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; min-height: 4.75rem;
}
.famio-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.famio-logo img { height: 2.6rem; width: auto; }
.famio-nav { display: none; align-items: center; gap: 1.75rem; }
.famio-nav-link {
	position: relative; font-size: .9375rem; font-weight: 700;
	color: var(--famio-fg); padding-block: .5rem; white-space: nowrap;
	transition: var(--famio-transition);
}
.famio-nav-link::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
	border-radius: 999px; background: var(--famio-gradient-accent);
	transform: scaleX(0); transform-origin: inline-start;
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.famio-nav-link:hover, .famio-nav-link.is-active { color: var(--famio-primary); }
.famio-nav-link:hover::after, .famio-nav-link.is-active::after { transform: scaleX(1); }
.famio-header-actions { display: none; align-items: center; gap: .625rem; }

a.famio-btn.famio-btn-ghost, .famio-btn.famio-btn-ghost[class] {
	background: #fff !important; color: var(--famio-primary) !important;
	border: 1.5px solid var(--famio-primary) !important;
}
a.famio-btn.famio-btn-ghost:hover, .famio-btn.famio-btn-ghost[class]:hover {
	background: var(--famio-primary) !important; color: #fff !important;
}
.famio-burger {
	display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
	width: 2.75rem; height: 2.75rem; padding: 0 .6rem;
	border: 1px solid var(--famio-border); border-radius: .75rem;
	background: #fff; cursor: pointer;
}
.famio-burger span {
	display: block; height: 2px; border-radius: 2px;
	background: var(--famio-primary); transition: var(--famio-transition);
}
.famio-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.famio-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.famio-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.famio-mobile-menu {
	direction: rtl; text-align: right;
	border-top: 1px solid var(--famio-border);
	background: #fff; padding: 1rem var(--famio-pad) 1.5rem;
}
.famio-mobile-menu[hidden] { display: none; }
.famio-mobile-menu a {
	display: block; padding: .8rem .25rem; font-weight: 700;
	color: var(--famio-fg); border-bottom: 1px solid var(--famio-border);
}
.famio-mobile-menu .famio-btn {
	margin-top: 1rem; width: 100%;
	justify-content: center; text-align: center;
}
@media (min-width: 1024px) {
	.famio-nav, .famio-header-actions { display: flex; }
	.famio-burger { display: none; }
}

/* ---------------------------------------------------------------------
   22. HERO — orbital carousel (signature)
   --------------------------------------------------------------------- */
.famio-hero {
	direction: rtl; text-align: right;
	position: relative; isolation: isolate;
	background: var(--famio-gradient-hero);
	padding-block: 2.5rem 0;
	min-height: 88svh;
	overflow: clip;
	display: flex; flex-direction: column;
	--famio-phone-w: clamp(12rem, 21vw, 15.5rem);
	--famio-orx: min(41vw, 28rem);
	--famio-ory: 8.5rem;
}
.famio-hero-body { position: relative; z-index: 4; text-align: center; }
.famio-hero .famio-eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .4rem 1rem; border-radius: 999px;
	background: rgba(31,166,91,.12); color: #157A43;
	font-size: .8125rem; font-weight: 700; margin-bottom: 1rem;
}
.famio-hero-title {
	font-family: var(--famio-font-display);
	font-size: 2.25rem; font-weight: 700; line-height: 1.28;
	color: var(--famio-primary); margin: 0 0 1.25rem;
}
@media (min-width: 768px)  { .famio-hero-title { font-size: 3.25rem; } }
@media (min-width: 1024px) { .famio-hero-title { font-size: 3.75rem; } }
@media (min-width: 768px)  { .famio-hero-sub { font-size: 1.125rem; } }
.famio-hero-title .famio-hl { color: var(--famio-accent); }
.famio-hero-sub {
	max-width: 34rem; margin: 0 auto; color: var(--famio-muted-fg);
	font-size: 1rem;
}
.famio-hero-actions {
	display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center;
	margin-top: 2.25rem;
}
a.famio-btn.famio-btn-accent, .famio-btn.famio-btn-accent[class] {
	background: var(--famio-gradient-accent) !important;
	color: var(--famio-accent-fg) !important;
	box-shadow: 0 10px 26px -10px rgba(31,166,91,.65);
}
a.famio-btn.famio-btn-accent:hover, .famio-btn.famio-btn-accent[class]:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px rgba(31,166,91,.75);
}
.famio-btn.famio-btn-accent * { color: var(--famio-accent-fg) !important; }

/* 22b — the stage that holds the phone + the orbit */
.famio-orbit-stage {
	position: relative; z-index: 2;
	flex: 1 1 auto;
	min-height: calc(var(--famio-phone-w) * 1.55);
	margin-top: 2rem;
}
.famio-orbit-track {
	position: absolute; inset-inline: 0; height: 0; z-index: 5;
	bottom: calc(var(--famio-phone-w) * .70);   /* apex lands on the screen */
}
.famio-orbit-item {
	position: absolute; left: 50%; top: 0;
	width: calc(var(--famio-phone-w) * .82);    /* can never exceed the frame */
	aspect-ratio: 1;
	animation: famio-orbit var(--famio-orbit-time) linear infinite;
	will-change: transform, opacity;
}
.famio-orbit-item img {
	width: 100%; height: 100%; display: block; object-fit: contain;
	filter: drop-shadow(0 22px 30px rgba(13,61,124,.28));
}
.famio-orbit-item:nth-child(1) { animation-delay: calc(var(--famio-orbit-time) / -6 * 0); }
.famio-orbit-item:nth-child(2) { animation-delay: calc(var(--famio-orbit-time) / -6 * 1); }
.famio-orbit-item:nth-child(3) { animation-delay: calc(var(--famio-orbit-time) / -6 * 2); }
.famio-orbit-item:nth-child(4) { animation-delay: calc(var(--famio-orbit-time) / -6 * 3); }
.famio-orbit-item:nth-child(5) { animation-delay: calc(var(--famio-orbit-time) / -6 * 4); }
.famio-orbit-item:nth-child(6) { animation-delay: calc(var(--famio-orbit-time) / -6 * 5); }
.famio-orbit-stage:hover .famio-orbit-item { animation-play-state: paused; }

/* 22c — the phone sits ON TOP of the orbit; the arriving dish is echoed
   inside the screen so it can never spill outside the frame. */
.famio-hero-phone {
	position: relative; z-index: 3;
	position: absolute; left: 50%; z-index: 3;
	width: var(--famio-phone-w);
	bottom: calc(var(--famio-phone-w) * -.517);  /* exactly a quarter clipped */
	transform: translateX(-50%)
	           translateY(calc(var(--famio-hp, 0) * 52vh))
	           scale(calc(1 - var(--famio-hp, 0) * .28));
	opacity: calc(1 - var(--famio-hp, 0) * 1.6);
	transition: transform .16s cubic-bezier(.3,.9,.3,1), opacity .16s linear;
	will-change: transform, opacity;
}
.famio-orbit-track {
	opacity: calc(1 - var(--famio-hp, 0) * 1.6);
	transition: opacity .28s ease;
}

/* ---------------------------------------------------------------------
   23. DEVICE MOCKUP — shared by hero, journey and the footer block
   --------------------------------------------------------------------- */
.famio-device {
	position: relative; width: 100%; aspect-ratio: 9 / 18.6;
	border-radius: 2.75rem; padding: .5rem;
	background: linear-gradient(160deg, #16263D, #050C17);
	box-shadow:
		0 32px 60px -22px rgba(9,25,48,.55),
		inset 0 1px 0 rgba(255,255,255,.22);
}
.famio-device-screen {
	position: relative; width: 100%; height: 100%;
	border-radius: 2.35rem; overflow: hidden;
	background: #FFFFFF;
	display: flex; flex-direction: column;
}
.famio-device-notch {
	position: absolute; z-index: 6; top: .75rem; left: 50%;
	transform: translateX(-50%);
	width: 34%; height: 1.4rem; border-radius: 999px; background: #050C17;
}
.famio-screen-brand {
	position: relative; z-index: 3;
	padding: 2.9rem 1rem .5rem; text-align: center;
}
.famio-screen-brand img { height: 1.5rem; width: auto; margin-inline: auto; }
.famio-screen-dish {
	position: relative; flex: 1 1 auto;
	display: grid; place-items: center; padding: .75rem;
}
.famio-screen-dish img {
	width: 84%; max-width: 84%; height: auto; object-fit: contain;
	filter: drop-shadow(0 14px 20px rgba(13,61,124,.25));
}
/* the hero screen is left empty — the orbiting dish lands on this plate */
.famio-screen-plate {
	position: relative; flex: 1 1 auto;
	display: grid; place-items: center; padding: .75rem;
}
.famio-screen-dots {
	display: flex; justify-content: center; gap: .4rem; padding: 0 0 1.5rem;
}
.famio-screen-dots i {
	width: .4rem; height: .4rem; border-radius: 999px;
	background: rgba(13,61,124,.22); display: block;
}
.famio-screen-dots i:first-child { width: 1.4rem; background: var(--famio-accent); }

/* App-UI mock used inside the journey phone */
.famio-appui { direction: rtl; padding: 2.9rem .75rem .9rem; display: grid; gap: .55rem;
	background: var(--famio-cream); height: 100%; }
.famio-appui-bar {
	display: flex; align-items: center; justify-content: space-between;
	font-size: .6rem; font-weight: 800; color: var(--famio-primary);
}
.famio-appui-bar span:last-child {
	width: 1.4rem; height: 1.4rem; border-radius: .45rem; background: var(--famio-gradient-accent);
}
.famio-appui-search { height: 1.5rem; border-radius: 999px; background: #fff; box-shadow: var(--famio-shadow-sm); }
.famio-appui-banner {
	height: 4.2rem; border-radius: 1rem; background: var(--famio-gradient-accent);
	position: relative; overflow: hidden;
}
.famio-appui-banner::after {
	content: ""; position: absolute; inset-inline-end: -1.2rem; top: -1.2rem;
	width: 4rem; height: 4rem; border-radius: 50%; border: 2px dashed rgba(255,255,255,.45);
}
.famio-appui-chips { display: flex; gap: .35rem; }
.famio-appui-chips i { flex: 1; height: 1.15rem; border-radius: 999px; background: #fff; display: block; }
.famio-appui-chips i:last-child { background: var(--famio-primary); flex: 0 0 32%; }
.famio-appui-row {
	display: flex; align-items: center; gap: .45rem;
	background: #fff; border-radius: .8rem; padding: .4rem; box-shadow: var(--famio-shadow-sm);
}
.famio-appui-row b { flex: 0 0 1.9rem; height: 1.9rem; border-radius: .55rem; background: var(--famio-gradient-accent); }
.famio-appui-row s { flex: 1; height: .38rem; border-radius: 999px; background: #E4EAF2; display: block; text-decoration: none; }
.famio-appui-cta {
	margin-top: auto; height: 1.9rem; border-radius: 999px;
	background: var(--famio-primary); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: .58rem; font-weight: 800;
}

.famio-phone-hover { position: relative; display: block; }
.famio-phone-hint {
	position: absolute; z-index: 8; inset-inline-start: 50%; top: -1.25rem;
	transform: translate(-50%, .5rem) scale(.9);
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .6rem 1.15rem; border-radius: 999px;
	background: var(--famio-gradient-accent); color: #fff;
	font-weight: 800; font-size: .875rem; white-space: nowrap;
	box-shadow: 0 14px 30px -12px rgba(31,166,91,.8);
	opacity: 0; pointer-events: none;
	transition: opacity .3s ease, transform .35s cubic-bezier(.2,1.4,.4,1);
}
.famio-phone-hint svg { width: 1rem; height: 1rem; }
.famio-phone-hint::after {
	content: ""; position: absolute; top: 100%; inset-inline-start: 50%;
	margin-inline-start: -.4rem;
	border: .4rem solid transparent; border-top-color: var(--famio-accent);
}
.famio-phone-hover:hover .famio-phone-hint,
.famio-phone-hover:focus-within .famio-phone-hint {
	opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto;
}
/* ROUND 45 — the hint is a hover affordance; on a touch screen there is
   no hover, and tapping the phone (a link to #getapp) was firing
   :focus-within and flashing the pill beside the device. Kill it wherever
   hover isn't available. */
@media (hover: none) {
	.famio-phone-hint { display: none !important; }
}
.famio-phone-hover .famio-device { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.famio-phone-hover:hover .famio-device { transform: translateY(-8px); }

/* ---------------------------------------------------------------------
   24. JOURNEY — the phone descends and speaks (scroll-staged, one widget)
   --------------------------------------------------------------------- */
.famio-journey {
	direction: rtl; text-align: right;
	position: relative; overflow: clip;
	--famio-phone-w: clamp(12rem, 21vw, 15.5rem);
	background:
		radial-gradient(90% 55% at 50% 32%, rgba(31,166,91,.10), transparent 70%),
		linear-gradient(180deg, var(--famio-bg) 0%, var(--famio-bg-deep) 42%, var(--famio-bg) 100%);
}
.famio-journey-rail { position: relative; height: 470vh; }
.famio-journey-stage {
	position: sticky; top: 0; height: 100svh;
	display: grid; place-items: center; padding-block: 3rem;
}
.famio-journey-core {
	position: relative;
	width: min(100%, 58rem);
	display: grid; place-items: center;
	padding-bottom: 9rem;
}
.famio-journey-phone {
	position: relative; z-index: 3;
	width: var(--famio-phone-w);
	transform: translateY(calc(-58vh + min(calc(var(--famio-jp, 1) / .12), 1) * 58vh))
	           scale(calc(.72 + min(calc(var(--famio-jp, 1) / .12), 1) * .28));
	opacity: min(calc(var(--famio-jp, 1) / .04), 1);
	transition: transform .16s cubic-bezier(.3,.9,.3,1), opacity .16s linear;
	will-change: transform, opacity;
}
.famio-journey-glow {
	position: absolute; z-index: 1; width: 34rem; max-width: 105%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(31,166,91,.20), transparent 62%);
	opacity: calc(var(--famio-jp, 1) * 1.4);
}
.famio-pop {
	position: absolute; z-index: 6;
	display: flex; align-items: center; gap: .8rem;
	background: #fff; color: var(--famio-primary);
	border: 1px solid var(--famio-border);
	border-radius: 999px; padding: .95rem 1.9rem .95rem 1.15rem;
	box-shadow: 0 20px 44px -18px rgba(13,61,124,.45), 0 0 0 6px rgba(255,255,255,.55);
	font-weight: 800; font-size: 1.1875rem; white-space: nowrap;
	transform-origin: var(--famio-pop-origin, 50% 50%);
	backface-visibility: hidden;
}
.famio-pop .famio-pop-icon {
	width: 2.6rem; height: 2.6rem; border-radius: 50%;
	background: var(--famio-gradient-accent); color: #fff;
	box-shadow: 0 8px 18px -8px rgba(31,166,91,.8);
}
.famio-pop .famio-pop-icon svg { width: 1.3rem; height: 1.3rem; }
.famio-pop::after { display: none; }     /* the pop IS the connector now */
.famio-pop::before {                     /* shockwave, same origin as the pop */
	content: ""; position: absolute; inset: -.45rem;
	border-radius: 999px; border: 2px solid var(--famio-accent);
	transform-origin: inherit;
	opacity: 0; pointer-events: none;
}
.famio-pop-r {                                   /* right flank */
	inset-inline-end: calc(50% + var(--famio-phone-w) * var(--famio-pop-k, .44));
	--famio-pop-origin: 0% 50%;
}
.famio-pop-l {                                   /* left flank */
	inset-inline-start: calc(50% + var(--famio-phone-w) * var(--famio-pop-k, .44));
	--famio-pop-origin: 100% 50%;
}
.famio-pop-1 { top: 5%; }
.famio-pop-2 { top: 20%; }
.famio-pop-3 { top: 35%; }
.famio-pop-4 { top: 50%; }

@keyframes famio-burst {
	0%   { opacity: 0; transform: scale(.04); }
	22%  { opacity: 1; }
	46%  { transform: scale(1.18); }
	66%  { transform: scale(.95); }
	84%  { transform: scale(1.04); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes famio-shockwave {
	0%   { opacity: .95; transform: scale(.06); }
	100% { opacity: 0;   transform: scale(1.35); }
}
/* progressive enhancement: without JS every pop is simply visible */
.famio-js .famio-pop { opacity: 0; }
.famio-js .famio-pop.is-on {
	animation: famio-burst .62s cubic-bezier(.2,1.5,.35,1) both;
}
.famio-js .famio-pop.is-on::before {
	animation: famio-shockwave .75s cubic-bezier(.15,.85,.25,1) both;
}
.famio-journey-actions {
	position: absolute; z-index: 5; bottom: 0; inset-inline: 0;
	display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}
.famio-js .famio-journey-actions {
	opacity: 0; transform: translateY(18px);
	transition: opacity .6s ease, transform .6s ease;
}
.famio-js .famio-journey-actions.is-on { opacity: 1; transform: none; }
.famio-journey-pops { position: absolute; inset: 0; }
@media (max-width: 1023px) {
	.famio-hero    { --famio-phone-w: 12.5rem; --famio-orx: 41vw; --famio-ory: 6.5rem; }
	.famio-journey { --famio-phone-w: 9.5rem; --famio-pop-k: .20; }
	.famio-journey-rail { height: 260vh; }
	.famio-journey-core { padding-bottom: 9rem; }
	/* the pop-ups stay on the FLANKS on mobile too — never stacked above or below */
	.famio-pop {
		font-size: .6875rem; line-height: 1.5; font-weight: 800;
		padding: .45rem .7rem .45rem .5rem; gap: .45rem;
		border-radius: 1rem; white-space: normal; text-align: start;
		/* always exactly the room that exists beside the device — never overflows */
		max-width: calc(50% - var(--famio-phone-w) * var(--famio-pop-k) - .4rem);
		box-shadow: 0 10px 22px -12px rgba(13,61,124,.5), 0 0 0 4px rgba(255,255,255,.55);
	}
	.famio-pop .famio-pop-icon { width: 1.6rem; height: 1.6rem; }
	.famio-pop .famio-pop-icon svg { width: .8rem; height: .8rem; }
	.famio-journey-actions { flex-direction: column; align-items: center; }
	.famio-journey-actions .famio-btn { width: min(16rem, 90%); }
}
@media (max-width: 560px) {
	.famio-journey { --famio-phone-w: 11.5rem; --famio-pop-k: .16; }
	.famio-journey-rail { height: 285vh; }
	.famio-pop { font-size: .6875rem; padding: .45rem .7rem .45rem .48rem; }
	.famio-pop .famio-pop-icon { width: 1.4rem; height: 1.4rem; }
}
@media (max-width: 767px) {
	.famio-hero {
		min-height: 72svh; padding-block: 4rem 0;
		--famio-phone-w: 11.5rem;
		/* the dishes were touching: push the arc much wider and deepen it
		   so the three visible plates sit clearly apart */
		--famio-orx: 54vw;
		--famio-ory: 7.25rem;
	}
	/* smaller plates on phones, and a steeper scale curve so the middle one
	   reads as clearly the biggest and the flanking two clearly smaller */
	.famio-hero .famio-orbit-item {
		width: calc(var(--famio-phone-w) * .64);
		animation-name: famio-orbit-m;
	}
	.famio-hero-title { font-size: 1.875rem; }
	.famio-hero-sub { font-size: .9375rem; }
	.famio-hero-actions { margin-top: 1.5rem; gap: .625rem; }
	.famio-hero .famio-btn { padding: .8rem 1.5rem; font-size: .875rem; }
	.famio-orbit-stage { margin-top: 1.25rem; }
}

/* ---------------------------------------------------------------------
   25. FLIP — Scroll-Triggered 3D Phone Flip with Staggered
   Triangular Cards Reveal. Fires ONCE at 30% visibility, never repeats.
   --------------------------------------------------------------------- */
.famio-flip {
	direction: rtl; text-align: right;
	position: relative; overflow: clip;
	background:
		radial-gradient(65% 55% at 74% 28%, rgba(53,200,120,.22), transparent 70%),
		radial-gradient(60% 50% at 20% 78%, rgba(26,90,174,.28), transparent 72%),
		var(--famio-gradient-deep);
	color: #E8F1F8;
}
.famio-flip .famio-section-desc { color: rgba(232,241,248,.78); }
.famio-flip .famio-eyebrow { color: var(--famio-accent-glow); }

.famio-flip .famio-leaf { opacity: calc(var(--famio-leaf-o, .3) * 1.15); filter: brightness(1.15); }
.famio-flip-stage {
	display: grid; gap: 3rem; align-items: center;
	grid-template-columns: minmax(0, 1fr);
	perspective: 1250px; perspective-origin: 50% 42%;
}
.famio-flip-phone {
	justify-self: center;
	width: min(15rem, 62%);
	transform-style: preserve-3d;
	filter: drop-shadow(0 42px 60px rgba(3,12,26,.62));
}
.famio-flip-phone .famio-device { transform-style: preserve-3d; }
.famio-flip-phone .famio-device::before {   /* body thickness, sits behind */
	content: ""; position: absolute; inset: 0;
	border-radius: 2.75rem;
	background: linear-gradient(100deg, rgba(255,255,255,.30) 0 6%, rgba(255,255,255,.04) 18%, rgba(0,0,0,.55) 92%);
	transform: translateZ(-14px) scale(1.018);
}
.famio-flip-phone .famio-device::after {    /* rim light along the edge */
	content: ""; position: absolute; inset: -1px;
	border-radius: 2.8rem; pointer-events: none;
	background: linear-gradient(115deg, rgba(255,255,255,.55), transparent 26%, transparent 74%, rgba(255,255,255,.22));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	padding: 1.5px;
}
.famio-flip-phone .famio-device-screen::after {  /* glass sheen */
	content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
	background: linear-gradient(118deg, rgba(255,255,255,.42) 0 16%, rgba(255,255,255,.05) 34%, transparent 55%);
}
.famio-flip-cards { display: flex; flex-direction: column; gap: 1.25rem; }
.famio-flip-card {
	position: relative; overflow: hidden;
	background: var(--famio-card); color: var(--famio-card-fg);
	border: 1px solid rgba(255,255,255,.55);
	border-radius: var(--famio-radius-lg);
	padding: 1.6rem 1.7rem;
	box-shadow:
		0 30px 60px -22px rgba(3,12,26,.75),
		0 10px 22px -12px rgba(3,12,26,.55),
		inset 0 1px 0 rgba(255,255,255,.9);
	will-change: transform, opacity;
}
.famio-flip-card::before {                 /* accent edge — the card's spine */
	content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
	width: 4px; background: var(--famio-gradient-accent);
}
.famio-flip-card::after {                  /* slow sheen sweep, in place */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.55) 50%, transparent 66%);
	transform: translateX(-120%);
}
.famio-flip.is-in .famio-flip-card::after {
	animation: famio-card-sheen 6.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes famio-card-sheen {
	0%, 62%  { transform: translateX(-120%); }
	86%,100% { transform: translateX(120%); }
}
.famio-flip.is-in .famio-flip-card:nth-child(1)::after { animation-delay: 2.6s; }
.famio-flip.is-in .famio-flip-card:nth-child(2)::after { animation-delay: 4.8s; }
.famio-flip.is-in .famio-flip-card:nth-child(3)::after { animation-delay: 7.0s; }
.famio-flip-card:hover { box-shadow: 0 38px 70px -20px rgba(3,12,26,.85), inset 0 1px 0 rgba(255,255,255,.9); }
.famio-flip-card-inner { display: flex; align-items: flex-start; gap: 1rem; }
.famio-flip-card .famio-flip-icon {
	width: 3rem; height: 3rem; border-radius: 1rem; flex-shrink: 0;
	background: var(--famio-gradient-accent); color: var(--famio-accent-fg);
	box-shadow: 0 10px 22px -10px rgba(31,166,91,.6);
}
.famio-flip.is-in .famio-flip-icon { animation: famio-icon-pulse 4.5s ease-in-out infinite; }
@keyframes famio-icon-pulse {
	0%,100% { box-shadow: 0 10px 22px -10px rgba(31,166,91,.6), 0 0 0 0 rgba(53,200,120,.45); }
	55%     { box-shadow: 0 10px 22px -10px rgba(31,166,91,.6), 0 0 0 10px rgba(53,200,120,0); }
}
.famio-flip-card h3 {
	font-family: var(--famio-font-display); font-size: 1.1875rem; font-weight: 700;
	color: var(--famio-primary); margin: 0 0 .35rem;
}
.famio-flip-card p { margin: 0; font-size: .9375rem; color: var(--famio-muted-fg); }
/* triangular stack — overlapping offsets, never a plain column */
.famio-flip-card:nth-child(1) { margin-inline-end: 4.5rem; }
.famio-flip-card:nth-child(2) { margin-inline-start: 4rem; margin-top: -.5rem; z-index: 2; }
.famio-flip-card:nth-child(3) { margin-inline-end: 2rem; margin-top: -.5rem; }

@media (min-width: 1024px) {
	.famio-flip-stage { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 4.5rem; }
	.famio-flip-cards { order: 1; }              /* first column = right in RTL */
	.famio-flip-phone { order: 2; justify-self: center; width: min(16.5rem, 100%); }
}

@keyframes famio-tumble {
	0%   { opacity: 0; transform: translate3d(48%, 26vh, -340px) rotateX(-62deg) rotateY(196deg) rotateZ(13deg) scale(.52); }
	18%  { opacity: 1; }
	50%  { transform: translate3d(31%, 9vh, -170px) rotateX(-27deg) rotateY(86deg) rotateZ(7deg) scale(.78); }
	76%  { transform: translate3d(9%, 1.5vh, -45px) rotateX(-8deg) rotateY(22deg) rotateZ(2.4deg) scale(.96); }
	92%  { transform: translate3d(-1.5%, 0, 0) rotateX(6deg) rotateY(-24deg) rotateZ(-.7deg) scale(1.02); }
	100% { opacity: 1; transform: translate3d(0,0,0) rotateX(4deg) rotateY(-15deg) rotateZ(0deg) scale(1); }
}
@keyframes famio-3d-idle {
	0%,100% { transform: translate3d(0,0,0) rotateX(4deg) rotateY(-15deg) scale(1); }
	50%     { transform: translate3d(0,-8px,0) rotateX(1deg) rotateY(-6deg) scale(1.008); }
}
@keyframes famio-tumble-sm {
	0%   { opacity: 0; transform: translate3d(0, 22vh, -200px) rotateX(-34deg) rotateY(104deg) rotateZ(6deg) scale(.6); }
	20%  { opacity: 1; }
	60%  { transform: translate3d(0, 6vh, -80px) rotateX(-13deg) rotateY(34deg) rotateZ(3deg) scale(.85); }
	88%  { transform: translate3d(0, 0, 0) rotateX(4deg) rotateY(-14deg) rotateZ(-.5deg) scale(1.02); }
	100% { opacity: 1; transform: rotateX(3deg) rotateY(-9deg); }
}
@keyframes famio-card-r {
	0%   { opacity: 0; transform: translateX(34%) scale(.9); }
	68%  { opacity: 1; transform: translateX(-2.5%) scale(1.035); }
	100% { opacity: 1; transform: none; }
}
@keyframes famio-card-l {
	0%   { opacity: 0; transform: translateX(-34%) scale(.9); }
	68%  { opacity: 1; transform: translateX(2.5%) scale(1.035); }
	100% { opacity: 1; transform: none; }
}
@keyframes famio-card-b {
	0%   { opacity: 0; transform: translateY(40%) scale(.9); }
	68%  { opacity: 1; transform: translateY(-3.5%) scale(1.035); }
	100% { opacity: 1; transform: none; }
}
@keyframes famio-card-float {
	0%,100% { transform: translateY(0); }
	50%     { transform: translateY(-7px); }
}

/* armed only when JS is present — without it everything is simply visible */
.famio-js .famio-flip:not(.is-in) .famio-flip-phone,
.famio-js .famio-flip:not(.is-in) .famio-flip-card { opacity: 0; }
.famio-flip.is-in .famio-flip-phone {
	animation: famio-tumble 2.4s cubic-bezier(.22,.72,.24,1) both,
	           famio-3d-idle 9s ease-in-out 2.4s infinite;
}
.famio-flip.is-in .famio-flip-card { animation: .85s cubic-bezier(.2,1.15,.3,1) both; }
.famio-flip.is-in .famio-flip-card:nth-child(1) { animation-name: famio-card-r; animation-delay: 1.00s; }
.famio-flip.is-in .famio-flip-card:nth-child(2) { animation-name: famio-card-l; animation-delay: 1.26s; }
.famio-flip.is-in .famio-flip-card:nth-child(3) { animation-name: famio-card-b; animation-delay: 1.52s; }
.famio-flip.is-in .famio-flip-card-inner {
	animation: famio-card-float 5.5s ease-in-out infinite;
}
.famio-flip.is-in .famio-flip-card:nth-child(1) .famio-flip-card-inner { animation-delay: 2.1s; animation-duration: 5.4s; }
.famio-flip.is-in .famio-flip-card:nth-child(2) .famio-flip-card-inner { animation-delay: 2.4s; animation-duration: 6.2s; }
.famio-flip.is-in .famio-flip-card:nth-child(3) .famio-flip-card-inner { animation-delay: 2.7s; animation-duration: 5.8s; }

@media (max-width: 1023px) {
	.famio-flip.is-in .famio-flip-phone { animation-name: famio-tumble-sm; animation-duration: 2s; }
	.famio-flip-phone { width: min(12.5rem, 58%); }
	.famio-flip-card { padding: 1.15rem 1.25rem; }
	.famio-flip-card h3 { font-size: 1.0625rem; }
	.famio-flip-card p { font-size: .875rem; }
	.famio-flip-card:nth-child(1) { margin-inline-end: 1.75rem; }
	.famio-flip-card:nth-child(2) { margin-inline-start: 1.75rem; margin-top: 0; }
	.famio-flip-card:nth-child(3) { margin-inline-end: .75rem; margin-top: 0; }
	.famio-flip-cards { gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.famio-flip .famio-flip-phone, .famio-flip .famio-flip-card,
	.famio-flip .famio-flip-card::after, .famio-flip .famio-flip-icon,
	.famio-flip .famio-flip-card-inner {
		animation: none !important; opacity: 1 !important; transform: none !important;
	}
}
.elementor-editor-active .famio-flip-phone, .elementor-editor-active .famio-flip-card,
body.elementor-editor-preview .famio-flip-phone, body.elementor-editor-preview .famio-flip-card {
	animation: none !important; opacity: 1 !important; transform: none !important;
}

/* ---------------------------------------------------------------------
   26. JOIN — recruit the home kitchens. Chef photo bleeds from the
   inline-end edge, the app phone swings in over it, benefits on the
   reading side, navy tagline band closing the section.
   --------------------------------------------------------------------- */
.famio-join {
	direction: rtl; text-align: right;
	position: relative; overflow: clip;
	padding-block: 4rem 0;
	background:
		radial-gradient(58% 46% at 88% 6%, rgba(31,166,91,.10), transparent 68%),
		radial-gradient(60% 50% at 10% 30%, rgba(13,61,124,.08), transparent 70%),
		linear-gradient(180deg, #FFFFFF 0%, #F2F7FF 58%, #E7F0FC 100%);
}
.famio-join-dots {
	position: absolute; z-index: 0; inset-inline-start: 2%; top: 3%;
	width: 11rem; height: 9rem; opacity: .5; pointer-events: none;
	background-image: radial-gradient(rgba(13,61,124,.32) 1.5px, transparent 1.5px);
	background-size: 16px 16px;
	-webkit-mask-image: linear-gradient(200deg, #000, transparent 72%);
	mask-image: linear-gradient(200deg, #000, transparent 72%);
}
.famio-join-inner {
	position: static; z-index: 2;
	display: grid; gap: 2.5rem; align-items: center;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
	.famio-join-inner { grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); gap: 3rem; }
	.famio-join-body { order: 1; }
	.famio-join-visual { order: 2; }
}

/* --- speech bubble headline --- */
.famio-join-bubble {
	position: relative; display: inline-block;
	padding: 1.5rem 2rem 1.6rem;
	border-radius: 1.75rem;
	background:
		linear-gradient(#FFFFFF, #FFFFFF) padding-box,
		linear-gradient(125deg, var(--famio-accent), var(--famio-primary)) border-box;
	border: 2px solid transparent;
	box-shadow: 0 18px 38px -22px rgba(13,61,124,.45);
}
.famio-join-bubble::after {
	content: ""; position: absolute; top: 100%; inset-inline-end: 3rem;
	width: 1.6rem; height: 1.35rem;
	background: linear-gradient(125deg, var(--famio-accent), var(--famio-primary));
	clip-path: polygon(0 0, 100% 0, 22% 100%);
}
.famio-join-title {
	font-family: var(--famio-font-display);
	font-size: 2rem; font-weight: 700; line-height: 1.3; margin: 0;
	color: var(--famio-primary);
}
.famio-join-title .famio-hl { color: var(--famio-accent); }
@media (min-width: 768px) { .famio-join-title { font-size: 2.75rem; } }

.famio-join-sub {
	margin: 2rem 0 2.5rem; max-width: 34rem;
	color: var(--famio-muted-fg); font-size: 1.0625rem;
}

/* --- benefits --- */
.famio-join-grid {
	display: grid; gap: 1.5rem 2rem;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .famio-join-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.famio-join-item { display: flex; align-items: flex-start; gap: 1rem; }
.famio-join-item .famio-join-icon {
	width: 3.25rem; height: 3.25rem; flex-shrink: 0;
	border-radius: 1rem;
	background: #FFFFFF; color: var(--famio-accent);
	border: 1px solid var(--famio-border);
	box-shadow: 0 10px 22px -14px rgba(13,61,124,.5);
	transition: var(--famio-transition);
}
.famio-join-item .famio-join-icon svg { width: 1.4rem; height: 1.4rem; }
.famio-join-item:hover .famio-join-icon {
	background: var(--famio-gradient-accent); color: #fff; border-color: transparent;
	transform: translateY(-4px);
}
.famio-join-item h3 {
	font-family: var(--famio-font-display); font-size: 1.0625rem; font-weight: 700;
	color: var(--famio-primary); margin: 0 0 .25rem;
}
.famio-join-item p { margin: 0; font-size: .875rem; color: var(--famio-muted-fg); line-height: 1.8; }

.famio-join-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.75rem; }

/* --- chef + swinging phone: bleeding off the edge, no frame, no box --- */
.famio-join-visual {
	position: relative; min-height: 20rem;
	display: flex; align-items: flex-end; justify-content: center;
}
.famio-join-arc {
	position: absolute; z-index: 0; inset-inline-start: 4%; top: 0;
	width: 22rem; height: 22rem; max-width: 88%;
	border-radius: 50%;
	border: 1px solid rgba(13,61,124,.16);
	border-inline-start-color: transparent; border-bottom-color: transparent;
	pointer-events: none;
}
.famio-join-chef {
	position: relative; z-index: 1;
	width: min(26rem, 100%); height: auto; display: block;
	border-radius: 0;
	/* gentle blend on the inner and lower edges only — the figure itself
	   is never touched, so the hat and shoulders stay whole */
	-webkit-mask-image:
		linear-gradient(to left, transparent 0%, #000 26%),
		linear-gradient(to top, transparent 0%, #000 12%);
	mask-image:
		linear-gradient(to left, transparent 0%, #000 26%),
		linear-gradient(to top, transparent 0%, #000 12%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
.famio-join-phone {
	position: absolute; z-index: 3;
	inset-inline-start: 6%; bottom: 8%;
	width: min(10.5rem, 32%); height: auto;
	filter: drop-shadow(0 30px 44px rgba(9,25,48,.42));
	transform-origin: 50% -30%;
}
.famio-js .famio-join:not(.is-in) .famio-join-phone { opacity: 0; }
@keyframes famio-swing-in {
	0%   { opacity: 0; transform: translate(70%, 34%) rotate(24deg); }
	26%  { opacity: 1; }
	54%  { transform: translate(0,0) rotate(-9deg); }
	70%  { transform: translate(0,0) rotate(5.5deg); }
	82%  { transform: translate(0,0) rotate(-3deg); }
	91%  { transform: translate(0,0) rotate(1.4deg); }
	100% { opacity: 1; transform: translate(0,0) rotate(0deg); }
}
@keyframes famio-swing-idle {
	0%,100% { transform: rotate(-1.4deg) translateY(0); }
	50%     { transform: rotate(1.4deg) translateY(-8px); }
}
.famio-join.is-in .famio-join-phone {
	animation: famio-swing-in 1.9s cubic-bezier(.25,.9,.3,1) .25s both,
	           famio-swing-idle 6s ease-in-out 2.3s infinite;
}

/* desktop: the visual leaves the container and bleeds off the outer edge */
@media (min-width: 1024px) {
	.famio-join { min-height: 52rem; }
	.famio-join-inner { grid-template-columns: minmax(0, 1fr); }
	.famio-join-body { width: 50%; }
	/* direct child of the section now, so 0 really is the page edge */
	.famio-join-visual {
		position: absolute; z-index: 1;
		inset-inline-end: 0; top: 0; bottom: 0;
		width: auto; max-width: 46%; aspect-ratio: 720 / 899; min-height: 0; margin: 0;
		align-items: flex-end; justify-content: flex-end;
	}
	/* height-driven so the chef's hat is never cropped; the width then
	   overflows the outer edge and is cropped there instead */
	/* full frame visible — the image's own edge lands on the page edge */
	.famio-join-chef {
		width: 100%; height: 100%; max-width: none;
		object-fit: contain; object-position: bottom center;
		margin: 0; align-self: stretch;
	}
	.famio-join-phone { inset-inline-start: 12%; bottom: 6%; width: 10.5rem; }
	.famio-join-arc { inset-inline-start: 2%; top: 8%; width: 22rem; }
}

.famio-join { margin: 0 !important; padding-block: 4rem 7rem; }
.famio-join-actions { margin-top: 3rem; }

@media (max-width: 1023px) {
	.famio-join { margin: 0 !important; padding-block: 2.5rem 3rem; }
	/* full-bleed on phones — no dead space beside the figure */
	.famio-join-visual { min-height: 0; margin-top: 1.5rem; width: 100%; }
	.famio-join-chef {
		width: 100%; max-width: none;
		-webkit-mask-image: linear-gradient(to top, transparent 0%, #000 10%);
		mask-image: linear-gradient(to top, transparent 0%, #000 10%);
	}
	.famio-join-title { font-size: 1.875rem; }
	.famio-join-sub { margin: 1.5rem 0 2rem; font-size: .9375rem; }
	.famio-join-actions { margin-top: 2.25rem; }
	.famio-join-chef { width: min(19rem, 84%); }
	.famio-join-phone { width: min(8.5rem, 30%); inset-inline-start: 4%; bottom: 10%; }
}
@media (prefers-reduced-motion: reduce) {
	.famio-join-phone { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.elementor-editor-active .famio-join-phone, body.elementor-editor-preview .famio-join-phone {
	animation: none !important; opacity: 1 !important; transform: none !important;
}

/* ---------------------------------------------------------------------
   27. WHY FAMIO — feature grid, orbit motif reused behind the numerals
   --------------------------------------------------------------------- */
.famio-why { direction: rtl; text-align: right; position: relative; }
.famio-why-card { align-items: flex-start; overflow: hidden; }
.famio-why-card .famio-why-icon {
	width: 3.5rem; height: 3.5rem; border-radius: 1.1rem;
	background: var(--famio-gradient-accent); color: var(--famio-accent-fg);
	box-shadow: 0 10px 22px -10px rgba(31,166,91,.6);
}
.famio-flip.is-in .famio-flip-icon { animation: famio-icon-pulse 4.5s ease-in-out infinite; }
@keyframes famio-icon-pulse {
	0%,100% { box-shadow: 0 10px 22px -10px rgba(31,166,91,.6), 0 0 0 0 rgba(53,200,120,.45); }
	55%     { box-shadow: 0 10px 22px -10px rgba(31,166,91,.6), 0 0 0 10px rgba(53,200,120,0); }
}
.famio-why-card .famio-why-num {
	position: absolute; inset-inline-end: 1rem; top: .25rem;
	font-family: var(--famio-font-display); font-size: 4.5rem; font-weight: 700;
	color: var(--famio-primary); opacity: .07; line-height: 1; pointer-events: none;
}
.famio-why-card::after {
	content: ""; position: absolute; inset-inline-end: -3.5rem; bottom: -3.5rem;
	width: 8rem; height: 8rem; border-radius: 50%;
	border: 1px dashed rgba(31,166,91,.3); pointer-events: none;
	transition: var(--famio-transition);
}
.famio-why-card:hover::after { transform: scale(1.15) rotate(20deg); }

/* ---------------------------------------------------------------------
   27. GET THE APP + FOOTER BLOCK (OwnFood pattern)
   --------------------------------------------------------------------- */
.famio-getapp {
	direction: rtl; text-align: right;
	position: relative; isolation: isolate; overflow: clip;
	background: var(--famio-cream);
	padding-block: 4.5rem 8.5rem;
}
.famio-getapp-inner {
	position: relative; z-index: 2;
	display: grid; gap: 3rem; align-items: center;
	grid-template-columns: minmax(0,1fr);
	justify-items: center;
}
/* the two tilted, overlapping devices — reference layout */
.famio-getapp-phones {
	position: relative;
	width: min(22rem, 92%);
	min-height: 24rem;
}
.famio-getapp-phone { position: absolute; display: block; width: 62%; }
.famio-getapp-phone-back {
	inset-inline-start: 0; top: 0;
	transform: rotate(-8deg);
	filter: brightness(.94) drop-shadow(0 24px 40px rgba(9,25,48,.35));
	z-index: 1;
}
.famio-getapp-phone-front {
	inset-inline-start: 34%; top: 2.25rem;
	transform: rotate(4deg);
	filter: drop-shadow(0 30px 48px rgba(9,25,48,.4));
	z-index: 2;
	transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.famio-getapp-phone-front:hover { transform: rotate(2deg) translateY(-8px); }
.famio-getapp-phone-back:hover  { filter: brightness(1) drop-shadow(0 24px 40px rgba(9,25,48,.4)); }
.famio-getapp-actions {
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
	width: 100%;
}
.famio-getapp-actions .famio-store { flex: 1 1 13.5rem; max-width: 16rem; }
a.famio-store, .famio-store {
	display: flex; align-items: center; justify-content: flex-start; gap: 1rem;
	background: var(--famio-gradient-primary) !important;
	border: 0;
	color: #fff !important;
	border-radius: 1.1rem; padding: .95rem 1.5rem;
	box-shadow: 0 16px 32px -14px rgba(13,61,124,.55);
	transition: var(--famio-transition);
}
a.famio-store:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 42px -14px rgba(13,61,124,.65);
	filter: brightness(1.08);
}
.famio-store .famio-store-icon { width: 2rem; height: 2rem; color: #fff; }
.famio-store .famio-store-icon svg { width: 1.6rem; height: 1.6rem; fill: currentColor; stroke: none; }
.famio-store-text { display: grid; text-align: start; line-height: 1.25; }
.famio-store-text b { font-size: 1.0625rem; font-weight: 800; }
.famio-store-text span { font-size: .8rem; opacity: .85; }
/* the wave that hands the cream block to the deep footer — ONE step, no bands */
.famio-getapp-wave {
	position: absolute; z-index: 1; inset-inline: 0; bottom: -1px;
	width: 100%; height: 7.5rem; display: block;
	/* identical gradient object to the footer, shaped by a mask — so the
	   two can never differ in colour the way a separate fill would */
	background: var(--famio-gradient-end);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V70c230-52 500-70 760-44 240 24 470 66 680 76v18z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V70c230-52 500-70 760-44 240 24 470 66 680 76v18z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
@media (min-width: 900px) {
	.famio-getapp-inner {
		grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
		justify-items: stretch; gap: 4rem;
	}
	.famio-getapp-phones { order: 1; width: 26rem; max-width: 100%; min-height: 27rem; }
	.famio-getapp-actions { order: 2; justify-self: center; max-width: 34rem; }
}
@media (max-width: 767px) {
	.famio-getapp { padding-block: 3.5rem 8rem; }
	.famio-getapp-inner { gap: 3.25rem; }
	.famio-getapp-phones { width: min(19rem, 88%); min-height: 25.5rem; }
	.famio-getapp-phone { width: 56%; }
	.famio-getapp-phone-front { top: 2rem; }
	.famio-getapp-wave { height: 4.5rem; }
}

/* 27b — footer */
.famio-footer {
	direction: rtl; text-align: right;
	background: var(--famio-gradient-end); color: #E8F1F8;
	margin-top: 0; padding-block: 2.5rem 0;
}
.famio-footer-grid {
	display: grid; gap: 2.25rem;
	grid-template-columns: minmax(0,1fr);
}
.famio-footer-brand img { height: 2.4rem; width: auto; margin-bottom: 1rem; }
.famio-footer-brand p { color: rgba(232,241,248,.75); font-size: .9rem; margin: 0; max-width: 22rem; }
.famio-footer-col h4 {
	font-family: var(--famio-font-display); font-size: 1.0625rem; font-weight: 700;
	color: #fff; margin: 0 0 1.25rem;
}
.famio-footer-col a, .famio-footer-contact a {
	display: block; color: rgba(232,241,248,.78); font-size: .9rem;
	padding-block: .45rem; transition: var(--famio-transition);
}
.famio-footer-col a:hover, .famio-footer-contact a:hover { color: var(--famio-accent-glow); }
.famio-footer-contact a { display: flex; align-items: center; gap: .75rem; }
.famio-footer-contact .famio-fc-icon {
	width: 2.1rem; height: 2.1rem; border-radius: 50%;
	background: rgba(255,255,255,.10); color: var(--famio-accent-glow); flex-shrink: 0;
}
.famio-footer-contact .famio-fc-icon svg { width: 1rem; height: 1rem; }
.famio-socials { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 9rem; }
.famio-socials a {
	width: 2.4rem; height: 2.4rem; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.10); color: #fff;
	transition: var(--famio-transition);
}
.famio-socials a:hover { background: var(--famio-accent); transform: translateY(-3px); }
.famio-socials svg { width: 1.05rem; height: 1.05rem; fill: currentColor; stroke: none; }
.famio-footer-bar {
	margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.14);
	padding-block: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem;
	align-items: center; justify-content: space-between;
	font-size: .8125rem; color: rgba(232,241,248,.7);
}
.famio-footer-bar a { color: var(--famio-accent-glow); font-weight: 700; }
@media (min-width: 640px) { .famio-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) {
	.famio-footer-grid { grid-template-columns: 1.5fr .9fr 1.2fr .8fr; gap: 2.5rem; }
}

/* ---------------------------------------------------------------------
   28. EDITOR / REDUCED-MOTION FINAL STATES for the project layer
   --------------------------------------------------------------------- */
.elementor-editor-active .famio-pop,
body.elementor-editor-preview .famio-pop,
.elementor-editor-active .famio-journey-actions,
body.elementor-editor-preview .famio-journey-actions {
	opacity: 1 !important; transform: none !important; animation: none !important;
}
.elementor-editor-active .famio-journey-phone,
body.elementor-editor-preview .famio-journey-phone { transform: none !important; opacity: 1 !important; }
.elementor-editor-active .famio-hero-phone, .elementor-editor-active .famio-orbit-track,
body.elementor-editor-preview .famio-hero-phone, body.elementor-editor-preview .famio-orbit-track {
	transform: none !important; opacity: 1 !important;
}
.elementor-editor-active .famio-journey-rail,
body.elementor-editor-preview .famio-journey-rail { height: auto !important; }
.elementor-editor-active .famio-journey-stage,
body.elementor-editor-preview .famio-journey-stage { position: static !important; height: auto !important; }
@media (prefers-reduced-motion: reduce) {
	.famio-orbit-item, .famio-screen-dish img, .famio-leaf { animation: none !important; }
	.famio-orbit-item { opacity: 1 !important; }
	.famio-pop, .famio-journey-actions { opacity: 1 !important; transform: none !important; animation: none !important; }
	.famio-pop::before { animation: none !important; opacity: 0 !important; }
	.famio-journey-phone { transform: none !important; opacity: 1 !important; }
	.famio-hero-phone, .famio-orbit-track { transform: none !important; opacity: 1 !important; }
	.famio-journey-rail { height: auto !important; }
	.famio-journey-stage { position: static !important; height: auto !important; }
}
@media (max-width: 767px) {
	.famio-leaf { animation: none !important; }
	/* the frame is much smaller here — the desktop radius reads as a blob */
	.famio-device { border-radius: 1.5rem; padding: .3rem; }
	.famio-device-screen { border-radius: 1.3rem; }
	.famio-device-notch { height: 1rem; top: .5rem; width: 38%; }
	.famio-screen-brand { padding: 1.9rem .6rem .35rem; }
	.famio-screen-brand img { height: 1.1rem; }
	.famio-appui { padding: 2rem .5rem .6rem; gap: .4rem; }
}
/* --- generated: half-arc orbit — centre dish large, edges small --- */
@keyframes famio-orbit {
	0.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9272), calc(var(--famio-ory) * 1.3746)) scale(0.3000); opacity: 0.000; }
	2.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9593), calc(var(--famio-ory) * 1.2823)) scale(0.3122); opacity: 0.208; }
	5.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9823), calc(var(--famio-ory) * 1.1874)) scale(0.3352); opacity: 0.417; }
	7.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9959), calc(var(--famio-ory) * 1.0906)) scale(0.3657); opacity: 0.625; }
	10.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 1.0000), calc(var(--famio-ory) * 0.9930)) scale(0.4024); opacity: 0.833; }
	12.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9945), calc(var(--famio-ory) * 0.8955)) scale(0.4440); opacity: 1.000; }
	15.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9796), calc(var(--famio-ory) * 0.7989)) scale(0.4897); opacity: 1.000; }
	17.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9553), calc(var(--famio-ory) * 0.7043)) scale(0.5384); opacity: 1.000; }
	20.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9219), calc(var(--famio-ory) * 0.6125)) scale(0.5890); opacity: 1.000; }
	22.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.8796), calc(var(--famio-ory) * 0.5244)) scale(0.6405); opacity: 1.000; }
	25.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.8290), calc(var(--famio-ory) * 0.4408)) scale(0.6919); opacity: 1.000; }
	27.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.7705), calc(var(--famio-ory) * 0.3626)) scale(0.7422); opacity: 1.000; }
	30.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.7046), calc(var(--famio-ory) * 0.2904)) scale(0.7903); opacity: 1.000; }
	32.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.6320), calc(var(--famio-ory) * 0.2251)) scale(0.8353); opacity: 1.000; }
	35.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.5534), calc(var(--famio-ory) * 0.1671)) scale(0.8763); opacity: 1.000; }
	37.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.4695), calc(var(--famio-ory) * 0.1171)) scale(0.9125); opacity: 1.000; }
	40.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.3811), calc(var(--famio-ory) * 0.0755)) scale(0.9432); opacity: 1.000; }
	42.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.2890), calc(var(--famio-ory) * 0.0427)) scale(0.9677); opacity: 1.000; }
	45.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.1942), calc(var(--famio-ory) * 0.0190)) scale(0.9855); opacity: 1.000; }
	47.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.0976), calc(var(--famio-ory) * 0.0048)) scale(0.9964); opacity: 1.000; }
	50.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.0000), calc(var(--famio-ory) * 0.0000)) scale(1.0000); opacity: 1.000; }
	52.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.0976), calc(var(--famio-ory) * 0.0048)) scale(0.9964); opacity: 1.000; }
	55.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.1942), calc(var(--famio-ory) * 0.0190)) scale(0.9855); opacity: 1.000; }
	57.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.2890), calc(var(--famio-ory) * 0.0427)) scale(0.9677); opacity: 1.000; }
	60.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.3811), calc(var(--famio-ory) * 0.0755)) scale(0.9432); opacity: 1.000; }
	62.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.4695), calc(var(--famio-ory) * 0.1171)) scale(0.9125); opacity: 1.000; }
	65.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.5534), calc(var(--famio-ory) * 0.1671)) scale(0.8763); opacity: 1.000; }
	67.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.6320), calc(var(--famio-ory) * 0.2251)) scale(0.8353); opacity: 1.000; }
	70.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.7046), calc(var(--famio-ory) * 0.2904)) scale(0.7903); opacity: 1.000; }
	72.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.7705), calc(var(--famio-ory) * 0.3626)) scale(0.7422); opacity: 1.000; }
	75.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.8290), calc(var(--famio-ory) * 0.4408)) scale(0.6919); opacity: 1.000; }
	77.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.8796), calc(var(--famio-ory) * 0.5244)) scale(0.6405); opacity: 1.000; }
	80.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9219), calc(var(--famio-ory) * 0.6125)) scale(0.5890); opacity: 1.000; }
	82.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9553), calc(var(--famio-ory) * 0.7043)) scale(0.5384); opacity: 1.000; }
	85.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9796), calc(var(--famio-ory) * 0.7989)) scale(0.4897); opacity: 1.000; }
	87.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9945), calc(var(--famio-ory) * 0.8955)) scale(0.4440); opacity: 1.000; }
	90.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -1.0000), calc(var(--famio-ory) * 0.9930)) scale(0.4024); opacity: 0.833; }
	92.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9959), calc(var(--famio-ory) * 1.0906)) scale(0.3657); opacity: 0.625; }
	95.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9823), calc(var(--famio-ory) * 1.1874)) scale(0.3352); opacity: 0.417; }
	97.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9593), calc(var(--famio-ory) * 1.2823)) scale(0.3122); opacity: 0.208; }
	100.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9272), calc(var(--famio-ory) * 1.3746)) scale(0.3000); opacity: 0.000; }
}
/* --- generated: phone variant — wider arc, steeper scale falloff --- */
@keyframes famio-orbit-m {
	0.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9239), calc(var(--famio-ory) * 1.3827)) scale(0.2600); opacity: 0.000; }
	2.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9569), calc(var(--famio-ory) * 1.2903)) scale(0.2600); opacity: 0.200; }
	5.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9808), calc(var(--famio-ory) * 1.1951)) scale(0.2600); opacity: 0.400; }
	7.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9952), calc(var(--famio-ory) * 1.0980)) scale(0.2600); opacity: 0.600; }
	10.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 1.0000), calc(var(--famio-ory) * 1.0000)) scale(0.2600); opacity: 0.800; }
	12.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9952), calc(var(--famio-ory) * 0.9020)) scale(0.2690); opacity: 1.000; }
	15.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9808), calc(var(--famio-ory) * 0.8049)) scale(0.2932); opacity: 1.000; }
	17.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9569), calc(var(--famio-ory) * 0.7097)) scale(0.3306); opacity: 1.000; }
	20.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9239), calc(var(--famio-ory) * 0.6173)) scale(0.3793); opacity: 1.000; }
	22.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.8819), calc(var(--famio-ory) * 0.5286)) scale(0.4373); opacity: 1.000; }
	25.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.8315), calc(var(--famio-ory) * 0.4444)) scale(0.5022); opacity: 1.000; }
	27.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.7730), calc(var(--famio-ory) * 0.3656)) scale(0.5717); opacity: 1.000; }
	30.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.7071), calc(var(--famio-ory) * 0.2929)) scale(0.6430); opacity: 1.000; }
	32.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.6344), calc(var(--famio-ory) * 0.2270)) scale(0.7137); opacity: 1.000; }
	35.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.5556), calc(var(--famio-ory) * 0.1685)) scale(0.7811); opacity: 1.000; }
	37.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.4714), calc(var(--famio-ory) * 0.1181)) scale(0.8428); opacity: 1.000; }
	40.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.3827), calc(var(--famio-ory) * 0.0761)) scale(0.8967); opacity: 1.000; }
	42.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.2903), calc(var(--famio-ory) * 0.0431)) scale(0.9406); opacity: 1.000; }
	45.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.1951), calc(var(--famio-ory) * 0.0192)) scale(0.9732); opacity: 1.000; }
	47.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.0980), calc(var(--famio-ory) * 0.0048)) scale(0.9932); opacity: 1.000; }
	50.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.0000), calc(var(--famio-ory) * 0.0000)) scale(1.0000); opacity: 1.000; }
	52.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.0980), calc(var(--famio-ory) * 0.0048)) scale(0.9932); opacity: 1.000; }
	55.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.1951), calc(var(--famio-ory) * 0.0192)) scale(0.9732); opacity: 1.000; }
	57.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.2903), calc(var(--famio-ory) * 0.0431)) scale(0.9406); opacity: 1.000; }
	60.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.3827), calc(var(--famio-ory) * 0.0761)) scale(0.8967); opacity: 1.000; }
	62.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.4714), calc(var(--famio-ory) * 0.1181)) scale(0.8428); opacity: 1.000; }
	65.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.5556), calc(var(--famio-ory) * 0.1685)) scale(0.7811); opacity: 1.000; }
	67.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.6344), calc(var(--famio-ory) * 0.2270)) scale(0.7137); opacity: 1.000; }
	70.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.7071), calc(var(--famio-ory) * 0.2929)) scale(0.6430); opacity: 1.000; }
	72.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.7730), calc(var(--famio-ory) * 0.3656)) scale(0.5717); opacity: 1.000; }
	75.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.8315), calc(var(--famio-ory) * 0.4444)) scale(0.5022); opacity: 1.000; }
	77.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.8819), calc(var(--famio-ory) * 0.5286)) scale(0.4373); opacity: 1.000; }
	80.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9239), calc(var(--famio-ory) * 0.6173)) scale(0.3793); opacity: 1.000; }
	82.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9569), calc(var(--famio-ory) * 0.7097)) scale(0.3306); opacity: 1.000; }
	85.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9808), calc(var(--famio-ory) * 0.8049)) scale(0.2932); opacity: 1.000; }
	87.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9952), calc(var(--famio-ory) * 0.9020)) scale(0.2690); opacity: 1.000; }
	90.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -1.0000), calc(var(--famio-ory) * 1.0000)) scale(0.2600); opacity: 0.800; }
	92.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9952), calc(var(--famio-ory) * 1.0980)) scale(0.2600); opacity: 0.600; }
	95.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9808), calc(var(--famio-ory) * 1.1951)) scale(0.2600); opacity: 0.400; }
	97.50% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9569), calc(var(--famio-ory) * 1.2903)) scale(0.2600); opacity: 0.200; }
	100.00% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9239), calc(var(--famio-ory) * 1.3827)) scale(0.2600); opacity: 0.000; }
}

.famio-req { color: #DC2626; }
.famio-align-start .famio-section-desc { margin-inline: 0; }

/* ---------------------------------------------------------------------
   29. PAGE HERO (inner pages) — icon that fills, plates riding the edge
   --------------------------------------------------------------------- */
.famio-page-hero {
	direction: rtl; text-align: right;
	position: relative; z-index: 5; overflow: visible;
	padding-block: 5.5rem 0;
	background:
		radial-gradient(70% 60% at 82% 12%, rgba(53,200,120,.20), transparent 66%),
		radial-gradient(64% 58% at 12% 84%, rgba(26,90,174,.30), transparent 70%),
		var(--famio-gradient-deep);
	color: #E8F1F8;
}
.famio-ph-bg {                 /* everything that must stay clipped */
	position: absolute; inset: 0; z-index: 0;
	overflow: clip; pointer-events: none;
	border-radius: inherit;
}
.famio-ph-blob {
	position: absolute; z-index: 0; border-radius: 50%;
	filter: blur(2px); opacity: .5; pointer-events: none;
	border: 1px dashed rgba(255,255,255,.22);
	animation: famio-ring-spin 40s linear infinite;
}
@keyframes famio-ring-spin { to { transform: rotate(360deg); } }
.famio-ph-body {
	position: relative; z-index: 2; text-align: center;
	padding-bottom: 5.5rem;
}
/* the icon that FILLS: stroke draws itself, then the fill fades up */
.famio-ph-icon {
	width: 4.5rem; height: 4.5rem; margin-inline: auto;
	display: grid; place-items: center;
	border-radius: 1.4rem;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.18);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 34px -18px rgba(0,0,0,.6);
}
.famio-ph-icon svg { width: 2.4rem; height: 2.4rem; overflow: visible; }
.famio-ph-icon .famio-ph-stroke {
	fill: none; stroke: var(--famio-accent-glow); stroke-width: 1.8;
	stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 120; stroke-dashoffset: 120;
}
.famio-ph-icon .famio-ph-fill { fill: var(--famio-accent-glow); opacity: 0; }
.is-in .famio-ph-icon .famio-ph-stroke {
	animation: famio-draw 1.4s cubic-bezier(.4,0,.2,1) .2s forwards;
}
.is-in .famio-ph-icon .famio-ph-fill {
	animation: famio-fill-up 0.9s ease 1.35s forwards;
}
@keyframes famio-draw { to { stroke-dashoffset: 0; } }
@keyframes famio-fill-up { to { opacity: .28; } }
.famio-ph-title {
	font-family: var(--famio-font-display);
	font-size: 2.25rem; font-weight: 700; line-height: 1.3;
	color: #fff; margin: 1.5rem 0 1rem;
}
.famio-ph-title .famio-hl { color: var(--famio-accent-glow); }
@media (min-width: 768px) { .famio-ph-title { font-size: 3rem; } }
.famio-ph-sub { max-width: 34rem; margin: 0 auto; color: rgba(232,241,248,.82); font-size: 1.0625rem; }

/* plates riding the hero's bottom edge — half in, half out, spinning */
.famio-page-hero + .famio-section, .famio-page-hero + .famio-video { padding-top: 13rem; }
.famio-page-hero + .famio-video { padding-top: 12rem; }
@media (max-width: 767px) {
	.famio-page-hero + .famio-section { padding-top: 8.5rem; }
	.famio-page-hero + .famio-video { padding-top: 8rem; }
}
.famio-ph-plates {
	position: absolute; z-index: 6; bottom: 0; inset-inline-end: 4%;
	display: flex; gap: .5rem; align-items: flex-end;
	pointer-events: none;
}
.famio-ph-plate {
	position: relative;
	width: clamp(7rem, 14vw, 13rem); aspect-ratio: 1;
	transform: translateY(50%);          /* half inside the hero, half outside */
	filter: drop-shadow(0 -10px 24px rgba(0,0,0,.35));
}
.famio-ph-plate img {
	width: 100%; height: 100%; object-fit: contain; display: block;
	animation: famio-plate-spin var(--famio-spin, 26s) linear infinite;
}
.famio-ph-plate:nth-child(2) { --famio-spin: 34s; width: clamp(5.5rem, 11vw, 10.5rem); }
.famio-ph-plate:nth-child(3) { --famio-spin: 42s; width: clamp(4.5rem, 8.5vw, 8rem); }
.famio-ph-plate:nth-child(2) img { animation-direction: reverse; }
@keyframes famio-plate-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
	.famio-page-hero { padding-block: 3.5rem 0; }
	.famio-ph-body { padding-bottom: 4rem; }
	.famio-ph-title { font-size: 1.75rem; }
	.famio-ph-sub { font-size: .9375rem; }
	.famio-ph-plates { gap: .35rem; inset-inline-end: 3%; }
}

/* ---------------------------------------------------------------------
   30. JOIN FORM — the application to become a producing family
   --------------------------------------------------------------------- */
.famio-joinform { direction: rtl; text-align: right; position: relative;
	background:
		radial-gradient(56% 46% at 10% 10%, rgba(31,166,91,.10), transparent 66%),
		var(--famio-bg);
}
.famio-joinform-grid {
	display: grid; gap: 3rem; align-items: start;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
	.famio-joinform-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 4rem; }
}
.famio-joinform-side { min-width: 0; }
.famio-joinform-card {
	position: relative;
	background: var(--famio-card);
	border-radius: var(--famio-radius-lg);
	padding: 2.25rem 2rem;
	box-shadow: 0 28px 60px -28px rgba(13,61,124,.4), 0 0 0 1px var(--famio-border);
}
.famio-joinform-note {
	display: flex; align-items: center; gap: .75rem;
	margin-top: 1.5rem; font-size: .8125rem; color: var(--famio-muted-fg);
}
.famio-joinform-note svg { width: 1.1rem; height: 1.1rem; color: var(--famio-accent); flex-shrink: 0; }
.famio-steps { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.famio-step { display: flex; align-items: flex-start; gap: 1rem; }
.famio-step-num {
	width: 2.75rem; height: 2.75rem; flex-shrink: 0;
	display: grid; place-items: center;
	border-radius: 50%;
	font-family: var(--famio-font-display); font-weight: 700; font-size: 1.125rem;
	background: var(--famio-gradient-primary); color: #fff;
	box-shadow: 0 10px 22px -12px rgba(13,61,124,.7);
}
.famio-step h3 { font-family: var(--famio-font-display); font-size: 1.0625rem; font-weight: 700; color: var(--famio-primary); margin: 0 0 .2rem; }
.famio-step p { margin: 0; font-size: .875rem; color: var(--famio-muted-fg); }

/* ---------------------------------------------------------------------
   31. ABOUT page blocks
   --------------------------------------------------------------------- */
.famio-story { direction: rtl; text-align: right; position: relative; background: var(--famio-cream); }
.famio-story-grid { display: grid; gap: 3rem; align-items: center; grid-template-columns: minmax(0,1fr); }
@media (min-width: 1024px) { .famio-story-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 4rem; } }
.famio-story-media { position: relative; }
.famio-story-media .famio-story-chef {
	width: min(24rem, 100%); display: block; margin-inline: auto;
	border-radius: var(--famio-radius-lg);
	box-shadow: 0 34px 64px -30px rgba(13,61,124,.55);
}
.famio-story-media::before {
	content: ""; position: absolute; inset-inline-start: -1.25rem; top: 1.25rem;
	width: min(24rem, 100%); height: calc(100% - 1.25rem);
	border: 2px solid var(--famio-accent); border-radius: var(--famio-radius-lg);
	opacity: .5; z-index: -1;
}
.famio-story-badge {
	position: absolute; z-index: 2; bottom: -1.25rem; inset-inline-end: 8%;
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .75rem 1.25rem; border-radius: 999px;
	background: var(--famio-gradient-accent); color: #fff;
	font-weight: 800; font-size: .9375rem;
	box-shadow: 0 16px 30px -14px rgba(31,166,91,.8);
	animation: famio-float 5s ease-in-out infinite;
}
.famio-story-text .famio-eyebrow { color: var(--famio-accent); font-weight: 800; display: block; margin-bottom: .75rem; }
.famio-story-text h2 { font-family: var(--famio-font-display); font-size: 1.875rem; font-weight: 700; color: var(--famio-primary); margin: 0 0 1.25rem; }
@media (min-width: 768px) { .famio-story-text h2 { font-size: 2.25rem; } }
.famio-story-text p { margin: 0 0 1rem; color: var(--famio-muted-fg); }

.famio-values { direction: rtl; text-align: right; position: relative; background: var(--famio-bg); }

/* ---------------------------------------------------------------------
   32. CONTACT page
   --------------------------------------------------------------------- */
.famio-contact { direction: rtl; text-align: right; position: relative; background: var(--famio-bg); }
.famio-contact-grid { display: grid; gap: 3rem; align-items: start; grid-template-columns: minmax(0,1fr); }
@media (min-width: 1024px) { .famio-contact-grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 4rem; } }
.famio-contact-list { display: grid; gap: 1rem; }
.famio-contact-item {
	display: flex; align-items: center; gap: 1rem;
	padding: 1.15rem 1.35rem;
	background: var(--famio-card); border-radius: var(--famio-radius-lg);
	border: 1px solid var(--famio-border);
	box-shadow: var(--famio-shadow-sm);
	color: var(--famio-fg);
	transition: var(--famio-transition);
}
.famio-contact-item:hover { transform: translateY(-4px); box-shadow: var(--famio-shadow-card); border-color: rgba(31,166,91,.4); }
.famio-contact-item .famio-ci-icon {
	width: 2.9rem; height: 2.9rem; flex-shrink: 0; border-radius: 1rem;
	background: rgba(31,166,91,.12); color: #157A43;
	transition: var(--famio-transition);
}
.famio-contact-item:hover .famio-ci-icon { background: var(--famio-gradient-accent); color: #fff; }
.famio-contact-item b { display: block; font-size: .9375rem; color: var(--famio-primary); }
.famio-contact-item span { font-size: .8125rem; color: var(--famio-muted-fg); }
.famio-faq { margin-top: 2.5rem; display: grid; gap: .75rem; }
.famio-faq-item { border: 1px solid var(--famio-border); border-radius: var(--famio-radius); background: var(--famio-card); overflow: hidden; }
.famio-faq-q {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1rem 1.25rem; border: 0; background: none; cursor: pointer;
	font: inherit; font-weight: 700; color: var(--famio-primary); text-align: start;
}
.famio-faq-q svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; transition: transform .3s ease; color: var(--famio-accent); }
.famio-faq-item.is-open .famio-faq-q svg { transform: rotate(180deg); }
.famio-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.famio-faq-item.is-open .famio-faq-a { grid-template-rows: 1fr; }
.famio-faq-a > div { overflow: hidden; }
.famio-faq-a p { margin: 0; padding: 0 1.25rem 1.15rem; font-size: .9rem; color: var(--famio-muted-fg); }

/* dish resting at a section's bottom edge — identity accent for inner pages */
.famio-edge-dish {
	position: absolute; z-index: 2; bottom: 0; inset-inline-end: 4%;
	width: clamp(6rem, 10vw, 9rem); aspect-ratio: 1;
	transform: translateY(46%);
	pointer-events: none;
	filter: drop-shadow(0 -8px 22px rgba(13,61,124,.28));
}
.famio-edge-dish img { width: 100%; height: 100%; object-fit: contain; animation: famio-plate-spin 38s linear infinite; }

@media (prefers-reduced-motion: reduce) {
	.famio-ph-plate img, .famio-edge-dish img { animation: none !important; }
	.famio-ph-icon .famio-ph-stroke { stroke-dashoffset: 0 !important; animation: none !important; }
	.famio-ph-icon .famio-ph-fill { opacity: .28 !important; animation: none !important; }
	.famio-story-badge { animation: none !important; }
}
.elementor-editor-active .famio-ph-icon .famio-ph-stroke,
body.elementor-editor-preview .famio-ph-icon .famio-ph-stroke { stroke-dashoffset: 0 !important; animation: none !important; }
.elementor-editor-active .famio-ph-icon .famio-ph-fill,
body.elementor-editor-preview .famio-ph-icon .famio-ph-fill { opacity: .28 !important; animation: none !important; }

/* ---------------------------------------------------------------------
   35. LIQUID FORM — dark panel, gooey brand blobs drifting behind it,
   underline-only fields. Replaces the plain white form card.
   --------------------------------------------------------------------- */
.famio-goo-def { position: absolute; width: 0; height: 0; }
.famio-formx {
	position: relative; overflow: visible;
	border-radius: var(--famio-radius-lg);
	background: linear-gradient(140deg, #FFFFFF 0%, #EEF5FE 48%, #E4F4EC 100%) !important;
	box-shadow: 0 30px 62px -30px rgba(13,61,124,.35), 0 0 0 1px var(--famio-border) !important;
	padding: 2.5rem 2.25rem !important;
	color: var(--famio-fg);
}
.famio-formx-body { position: relative; z-index: 2; }
.famio-formx-kicker {
	display: block; font-size: .8125rem; font-weight: 800;
	color: var(--famio-accent); margin-bottom: .5rem;
}
.famio-formx-title {
	font-family: var(--famio-font-display); font-size: 1.75rem; font-weight: 700;
	color: var(--famio-primary); margin: 0 0 1.25rem; line-height: 1.3;
}

.famio-formx .famio-form { display: grid; gap: 0; padding-top: 2.5rem; }
.famio-formx-head { position: relative; padding-bottom: 1.75rem; }
.famio-formx-head::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
	background: linear-gradient(to left, transparent, var(--famio-border) 30%, var(--famio-border) 70%, transparent);
}
.famio-formx-row { display: grid; gap: 0 1.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 560px) { .famio-formx-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.famio-formx-field { position: relative; margin-bottom: 1.75rem; }
.famio-formx-field label {
	transition: transform .4s cubic-bezier(.2,1,.3,1), color .3s ease;
}
.famio-formx-field:focus-within label {
	transform: translateX(-8px); color: var(--famio-accent);
}
.famio-formx-field label {
	display: block; font-size: .75rem; font-weight: 700;
	color: var(--famio-muted-fg); margin-bottom: 1.05rem;
}
.famio-formx-field .famio-req { color: var(--famio-accent); }
.famio-formx-field input,
.famio-formx-field select,
.famio-formx-field textarea {
	width: 100%; display: block;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(13,61,124,.2) !important;
	border-radius: 0 !important;
	color: var(--famio-fg) !important;
	font: inherit; font-size: 1rem;
	padding: .7rem 0 .8rem !important;
	outline: none !important;
	box-shadow: none !important;
	appearance: none; -webkit-appearance: none;
	position: relative; z-index: 2; pointer-events: auto;
	transition: border-color .4s ease;
}
.famio-formx-field textarea { min-height: 6.5rem; resize: vertical; }
.famio-formx-field input::placeholder,
.famio-formx-field textarea::placeholder { color: rgba(90,107,128,.55); }
/* dropdown with no box lines at all — just the underline and a caret */
.famio-formx-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335C878' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: left .1rem center !important;
	background-size: 1.05rem !important;
	padding-inline-end: 0 !important; padding-inline-start: 1.6rem !important;
	cursor: pointer;
}
.famio-formx-field select option { background: #fff; color: var(--famio-fg); }
.famio-formx-glow {
	position: absolute; bottom: 0; inset-inline-start: 0;
	width: 0; height: 2px; border-radius: 2px;
	background: var(--famio-gradient-accent);
	box-shadow: 0 0 14px rgba(53,200,120,.8);
	transition: width .6s cubic-bezier(.2,1,.3,1);
}
.famio-formx-field:focus-within .famio-formx-glow { width: 100%; }

.famio-formx-submit { position: relative; margin-top: 1rem; }
.famio-formx-drop {
	position: absolute; top: 50%; inset-inline-start: 50%;
	width: 100%; height: 100%; z-index: 0;
	transform: translate(50%, -50%);
	border-radius: 999px;
	background: var(--famio-gradient-accent);
	filter: blur(2px);
	transition: transform .5s cubic-bezier(.175,.885,.32,1.275), filter .4s ease;
}
[dir="ltr"] .famio-formx-drop { transform: translate(-50%, -50%); }
.famio-formx-submit:hover .famio-formx-drop {
	transform: translate(50%, -50%) scale(1.04, 1.22); filter: blur(6px) brightness(1.15);
}
.famio-formx-btn { position: relative; z-index: 2; width: 100%; }
.famio-formx-btn svg { width: 1.05rem; height: 1.05rem; }
.famio-formx .famio-form-notice {
	margin-top: 1.25rem; font-size: .875rem; color: var(--famio-muted-fg);
	text-align: center;
}
.famio-formx .famio-form-notice.is-ok { color: #0E7A42; }
.famio-formx .famio-form-notice.is-err { color: #C7452C; }
.famio-formx .famio-honeypot { position: absolute; left: -9999px; opacity: 0; }
.famio-formx-note {
	display: flex; align-items: center; gap: .7rem;
	margin-top: 1.5rem; font-size: .8125rem; color: var(--famio-muted-fg);
}
.famio-formx-note svg { width: 1.05rem; height: 1.05rem; color: var(--famio-accent); flex-shrink: 0; }
@media (max-width: 560px) { .famio-formx { padding: 2rem 1.4rem !important; } }
@media (prefers-reduced-motion: reduce) {
	.famio-formx-field:focus-within { transform: none; }
}

/* ---------------------------------------------------------------------
   36. VALUE ACCORDION — hover-expanding image panels, deep brand
   gradient instead of a flat black scrim.
   --------------------------------------------------------------------- */
.famio-values { background: var(--famio-cream); }
.famio-acc-layout {
	display: grid; gap: 3rem; align-items: center;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
	.famio-acc-layout { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 4rem; }
}
.famio-acc-text h2 {
	font-family: var(--famio-font-display); font-size: 1.875rem; font-weight: 700;
	color: var(--famio-primary); margin: 0 0 1.25rem; line-height: 1.3;
}
@media (min-width: 768px) { .famio-acc-text h2 { font-size: 2.5rem; } }
.famio-acc-text p { margin: 0 0 1rem; color: var(--famio-muted-fg); }
.famio-acc-text .famio-btn { margin-top: 1.5rem; }

.famio-acc {
	display: flex; flex-direction: row; gap: .75rem;
	align-items: stretch; justify-content: center;
	padding: .25rem;
}
.famio-acc-item {
	position: relative; overflow: hidden; cursor: pointer;
	height: 26rem; flex: 0 0 3.75rem;
	border-radius: 1.25rem;
	box-shadow: 0 22px 44px -22px rgba(13,61,124,.5);
	transition: flex-basis 1s cubic-bezier(.22,.8,.24,1), box-shadow .7s ease;
}
.famio-acc-item.is-open { flex: 0 0 min(22rem, 46vw); box-shadow: 0 30px 56px -22px rgba(13,61,124,.6); }
.famio-acc-media { position: absolute; inset: 0; background: var(--famio-gradient-deep); }
.famio-acc-media img {
	position: absolute; inset: 12% 6% auto; width: 88%; height: auto;
	top: 50%; transform: translateY(-50%) scale(.9);
	object-fit: contain;
	opacity: .28; transition: opacity 1s ease, transform 1s cubic-bezier(.22,.8,.24,1);
}
.famio-acc-item.is-open .famio-acc-media img { opacity: 1; transform: translateY(-50%) scale(1); }
.famio-acc-item::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(6,26,54,.85) 0%, rgba(6,26,54,.25) 46%, transparent 72%);
}
.famio-acc-label {
	position: absolute; z-index: 2; color: #fff;
	font-family: var(--famio-font-display); font-weight: 700; font-size: 1.0625rem;
	white-space: nowrap;
	bottom: 5.5rem; inset-inline-start: 50%;
	transform: translateX(50%) rotate(-90deg);
	transform-origin: center;
	transition: all .85s cubic-bezier(.22,.8,.24,1);
}
.famio-acc-item.is-open .famio-acc-label {
	bottom: 1.5rem; inset-inline-start: 1.5rem;
	transform: none; font-size: 1.25rem;
}
.famio-acc-desc {
	position: absolute; z-index: 2; bottom: 1.5rem;
	inset-inline: 1.5rem 1.5rem;
	color: rgba(255,255,255,.82); font-size: .875rem; line-height: 1.7;
	opacity: 0; transform: translateY(10px);
	transition: opacity .95s ease .22s, transform .95s cubic-bezier(.22,.8,.24,1) .22s;
	pointer-events: none;
}
.famio-acc-item.is-open .famio-acc-desc { opacity: 1; transform: none; }
.famio-acc-item.is-open .famio-acc-label { bottom: 4.75rem; }
@media (max-width: 767px) {
	/* stacked, never a sideways scroller */
	.famio-acc { flex-direction: column; overflow: visible; gap: .6rem; }
	.famio-acc-item {
		height: 4.25rem; flex: 0 0 auto; width: 100%;
		transition: height .95s cubic-bezier(.22,.8,.24,1), box-shadow .6s ease;
	}
	.famio-acc-item.is-open { height: 15rem; flex-basis: auto; }
	.famio-acc-media img { inset-inline: auto 1rem; width: 42%; }
	.famio-acc-label {
		bottom: auto; top: 1.35rem; inset-inline-start: 1.35rem;
		transform: none; font-size: 1rem;
	}
	.famio-acc-item.is-open .famio-acc-label { top: 1.35rem; bottom: auto; font-size: 1.0625rem; }
	.famio-acc-desc { inset-inline: 1.35rem 45%; bottom: 1.35rem; font-size: .8125rem; }
}

/* ---------------------------------------------------------------------
   37. STATS — counting numbers, gradient and bold, hairline dividers
   --------------------------------------------------------------------- */
.famio-stats {
	display: grid; gap: 0; margin-top: 2.5rem;
	grid-template-columns: repeat(3, minmax(0,1fr));
	border-radius: var(--famio-radius-lg);
	background: rgba(255,255,255,.6);
	box-shadow: 0 0 0 1px var(--famio-border);
	overflow: hidden;
}
.famio-stat {
	text-align: center; padding: 1.75rem .75rem;
	position: relative;
	transition: background .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.famio-stat + .famio-stat::before {
	content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%;
	width: 1px; background: linear-gradient(to bottom, transparent, var(--famio-border) 22%, var(--famio-border) 78%, transparent);
}
.famio-stat:hover { background: rgba(255,255,255,.95); transform: translateY(-4px); }
.famio-count { display: inline-block; }
.famio-stat b {
	display: block; font-family: var(--famio-font-display);
	font-size: 2.5rem; font-weight: 700; line-height: 1.1;
	background: linear-gradient(135deg, var(--famio-primary) 0%, #1A5AAE 45%, var(--famio-accent) 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	margin-bottom: .35rem;
}
@media (min-width: 768px) { .famio-stat b { font-size: 3.25rem; } }
.famio-stat span {
	display: block; font-size: .875rem; font-weight: 700; color: var(--famio-muted-fg);
}
@media (max-width: 480px) {
	.famio-stats { grid-template-columns: 1fr; }
	.famio-stat + .famio-stat::before {
		inset-inline: 18%; top: 0; bottom: auto; width: auto; height: 1px;
		background: linear-gradient(to left, transparent, var(--famio-border) 22%, var(--famio-border) 78%, transparent);
	}
}
@media (prefers-reduced-motion: reduce) {
	.famio-acc-item, .famio-acc-media img, .famio-acc-label, .famio-acc-desc { transition: none !important; }
}

/* ticker + header travel together as one sticky unit — no offset maths */
.famio-topbar { position: sticky; top: 0; z-index: 70; }

/* ---------------------------------------------------------------------
   38. OFFER TICKER — CSS-only seamless marquee.
   Each group is min-width:100%, so a single copy is never narrower than
   the strip. Every group animates by -100% OF ITSELF, which moves the
   whole row by exactly one group: the next identical copy lands where
   the previous one started. No measuring, no JS, no gap at any width.
   --------------------------------------------------------------------- */
.famio-ticker {
	position: relative; z-index: 2; overflow: hidden;
	display: flex; flex-wrap: nowrap;
	background: linear-gradient(100deg, #061E3F 0%, #0B3A6B 38%, #0B5A4F 72%, #0E7A47 100%);
	color: #EAF7F0; direction: ltr;
}
.famio-ticker-group {
	flex: 0 0 auto; min-width: 100%;
	display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-around;
	animation: famio-ticker var(--famio-ticker-dur, 62s) linear infinite;
	will-change: transform;
}
@keyframes famio-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}
.famio-ticker-item {
	direction: rtl; flex-shrink: 0;
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .65rem 1.5rem; white-space: nowrap;
	font-size: .8125rem; font-weight: 800; letter-spacing: 0;
}
.famio-ticker-item svg { width: .95rem; height: .95rem; color: var(--famio-accent-glow); flex-shrink: 0; }
.famio-ticker-item b { color: var(--famio-accent-glow); font-weight: 800; }
.famio-ticker-sep { opacity: .35; align-self: center; flex-shrink: 0; }
@media (max-width: 767px) {
	.famio-ticker-item { font-size: .75rem; padding: .5rem .9rem; }
	.famio-ticker-group { --famio-ticker-dur: 46s; }
}
@media (prefers-reduced-motion: reduce) { .famio-ticker-group { animation: none; } }

/* ---------------------------------------------------------------------
   40. GOALS — a stack of cards you can drag through, on a deep canvas
   --------------------------------------------------------------------- */
.famio-goals {
	direction: rtl; text-align: right; position: relative; overflow: clip;
	background:
		radial-gradient(56% 48% at 16% 14%, rgba(53,200,120,.20), transparent 70%),
		radial-gradient(56% 48% at 86% 84%, rgba(26,90,174,.26), transparent 72%),
		var(--famio-gradient-deep);
	color: #EAF2FA;
}
.famio-goals .famio-section-desc { color: rgba(234,242,250,.8); }
.famio-goals .famio-section-head.famio-section-head .famio-section-title { color: #fff; }
.famio-stack-layout {
	display: grid; gap: 3rem; align-items: center;
	grid-template-columns: minmax(0,1fr);
}
@media (min-width: 1024px) {
	.famio-stack-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4rem; }
}
.famio-stack-side h3 {
	font-family: var(--famio-font-display); font-size: 1.5rem; font-weight: 700;
	color: #fff; margin: 0 0 1rem;
}
.famio-stack-side p { color: rgba(234,242,250,.78); margin: 0 0 1rem; }
.famio-stack-dots { display: flex; gap: .5rem; margin-top: 1.75rem; }
.famio-stack-dots i {
	width: .5rem; height: .5rem; border-radius: 999px; display: block;
	background: rgba(255,255,255,.28); transition: var(--famio-transition);
}
.famio-stack-dots i.is-on { width: 1.75rem; background: var(--famio-gradient-accent); }
.famio-stack-hint {
	display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem;
	font-size: .8125rem; color: rgba(234,242,250,.6);
}
.famio-stack-hint svg { width: 1rem; height: 1rem; }

.famio-stack {
	position: relative; margin-inline: auto;
	width: min(21rem, 86%); aspect-ratio: 5 / 6;
	touch-action: pan-y;
	/* breathing room so the rotated back cards and the drop shadow are
	   never touching the edge of anything */
	margin-block: 1.75rem 3.25rem;
	--famio-stack-dx: -12px;
	--famio-stack-dy: -9px;
	--famio-stack-rot: -3deg;
}
.famio-stack-card {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: center; gap: .85rem;
	padding: 2.5rem 1.85rem;
	border-radius: 1.5rem;
	background: linear-gradient(160deg, #F7FAFF 0%, #ECF3FC 58%, #E2ECF9 100%);
	color: var(--famio-fg);
	text-align: center; align-items: center;
	border: 1px solid rgba(255,255,255,.9);
	box-shadow:
		0 2px 0 rgba(255,255,255,.75) inset,
		0 0 0 1px rgba(11,58,107,.10),
		0 6px 14px -6px rgba(4,18,38,.45),
		0 26px 48px -20px rgba(4,18,38,.72);
	cursor: grab; user-select: none;
	transform: translate3d(calc(var(--famio-si, 0) * var(--famio-stack-dx)),
	                       calc(var(--famio-si, 0) * var(--famio-stack-dy)), 0)
	           rotate(calc(var(--famio-si, 0) * var(--famio-stack-rot)));
	z-index: calc(50 - var(--famio-si, 0) * 10);
	transition: transform .55s cubic-bezier(.22,.8,.24,1), box-shadow .4s ease, opacity .4s ease;
}
.famio-stack-card.is-dragging { cursor: grabbing; transition: none; }
.famio-stack-card[data-si="0"]:hover {
	transform: translate3d(0,0,0) scale(1.03);
	box-shadow:
		0 2px 0 rgba(255,255,255,.8) inset,
		0 0 0 1px rgba(11,58,107,.12),
		0 10px 20px -8px rgba(4,18,38,.5),
		0 38px 64px -22px rgba(4,18,38,.8);
}
.famio-stack-num {
	position: absolute; top: 1rem; inset-inline-end: 1.4rem;
	font-family: var(--famio-font-display); font-size: 3rem; font-weight: 700;
	color: var(--famio-primary); opacity: .1; line-height: 1;
}
.famio-stack-card .famio-stack-icon svg { width: 2.1rem; height: 2.1rem; }
.famio-stack-card .famio-stack-icon {
	width: 5rem; height: 5rem; border-radius: 1.5rem; margin: 0 auto 1rem;
	background: var(--famio-gradient-accent); color: #fff;
	box-shadow: 0 14px 28px -12px rgba(31,166,91,.65);
}
.famio-stack-card h4 {
	font-family: var(--famio-font-display); font-size: 1.3125rem; font-weight: 700;
	color: var(--famio-primary); margin: 0;
}
.famio-stack-card p { margin: 0; color: var(--famio-muted-fg); font-size: .9375rem; line-height: 1.85; }
@media (max-width: 767px) {
	.famio-stack {
		width: min(16.5rem, 76%); aspect-ratio: 5 / 6.4;
		margin-block: 1.5rem 2.75rem;
		--famio-stack-dx: -7px; --famio-stack-dy: -6px; --famio-stack-rot: -2.4deg;
	}
	.famio-stack-card { padding: 1.75rem 1.25rem; gap: .6rem; }
	.famio-stack-card p { font-size: .875rem; line-height: 1.75; }
	.famio-stack-num { font-size: 2.25rem; top: .75rem; inset-inline-end: 1rem; }
	.famio-stack-card h4 { font-size: 1.1875rem; }
	.famio-stack-card .famio-stack-icon { width: 4.25rem; height: 4.25rem; }
	/* description and stack both centred on phones */
	.famio-stack-side { text-align: center; }
	.famio-stack-side h3, .famio-stack-side p { text-align: center; }
	.famio-stack-dots { justify-content: center; }
	.famio-stack-hint { justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.famio-stack-card { transition: none; }
}

/* ---------------------------------------------------------------------
   41. VIDEO — a landscape device pinned inside its own rail; it only
   releases the scroll once it has finished growing.
   --------------------------------------------------------------------- */
.famio-video {
	direction: rtl; text-align: center; position: relative; overflow: clip;
	padding-top: 0;
	background:
		radial-gradient(58% 46% at 50% 6%, rgba(31,166,91,.12), transparent 70%),
		linear-gradient(180deg, #FFFFFF 0%, #F3F8FF 52%, #E9F4EE 100%);
	color: var(--famio-fg);
}
.famio-video-rail { position: relative; height: 260vh; }
.famio-video-stage {
	position: sticky; top: 0; height: 100svh;
	display: grid; place-items: center; align-content: center; gap: 0;
	padding-block: 3rem;
}
.famio-video-title {
	font-family: var(--famio-font-display); font-size: 1.875rem; font-weight: 700;
	color: var(--famio-primary); margin: 0 0 .75rem;
}
@media (min-width: 768px) { .famio-video-title { font-size: 2.5rem; } }
.famio-video-sub { color: var(--famio-muted-fg); margin: 0 auto 2.5rem; max-width: 34rem; }
.famio-video-device {
	position: relative; margin-inline: auto;
	width: calc(32% + var(--famio-vp, 0) * 62%);
	max-width: 58rem; aspect-ratio: 19.5 / 9;
	border-radius: clamp(1rem, calc(.6rem + var(--famio-vp, 0) * 1.6rem), 2.25rem);
	padding: clamp(.3rem, calc(.2rem + var(--famio-vp, 0) * .4rem), .6rem);
	background: linear-gradient(160deg, #16263D, #050C17);
	box-shadow: 0 34px 64px -24px rgba(9,25,48,.5), inset 0 1px 0 rgba(255,255,255,.22);
	transition: width .18s linear;
}
.famio-video-device::after {                 /* landscape notch */
	content: ""; position: absolute; z-index: 6;
	inset-inline-start: .8rem; top: 50%; transform: translateY(-50%);
	width: .8rem; height: 24%; border-radius: 999px; background: #050C17;
}
.famio-video-screen {
	position: relative; width: 100%; height: 100%;
	border-radius: inherit; overflow: hidden; background: #06182F;
}
.famio-video-screen video, .famio-video-screen img, .famio-video-screen iframe {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; border: 0; display: block;
}
.famio-video-play {
	position: absolute; z-index: 3; top: 50%; inset-inline-start: 50%;
	transform: translate(50%, -50%);
	width: 3.75rem; height: 3.75rem; border-radius: 50%; border: 0; cursor: pointer;
	display: grid; place-items: center;
	background: rgba(255,255,255,.94); color: var(--famio-primary);
	box-shadow: 0 18px 36px -14px rgba(0,0,0,.7);
	transition: var(--famio-transition);
}
.famio-video-play:hover { transform: translate(50%, -50%) scale(1.08); }
.famio-video-play::before {
	content: ""; position: absolute; inset: -.6rem; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.55);
	animation: famio-pulse-ring 2.6s ease-out infinite;
}
@keyframes famio-pulse-ring {
	0%   { opacity: .8; transform: scale(.9); }
	100% { opacity: 0; transform: scale(1.35); }
}
.famio-video-play svg { width: 1.35rem; height: 1.35rem; fill: currentColor; margin-inline-start: .15rem; }
@media (max-width: 767px) {
	/* still pinned and still grows — but the stage hugs its content
	   instead of claiming a whole 100svh of empty screen */
	.famio-video-rail { height: 180vh; }
	.famio-video-stage {
		position: sticky; top: 4vh; height: auto; min-height: 0; padding-block: .5rem;
	}
	.famio-video { padding-block: 1rem 3rem; }
	.famio-video-device { width: calc(54% + var(--famio-vp, 0) * 42%); }
	.famio-video-title { font-size: 1.625rem; }
	.famio-video-sub { font-size: .9375rem; margin-bottom: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.famio-video-rail { height: auto; }
	.famio-video-stage { position: static; height: auto; }
	.famio-video-device { width: 95%; }
}
.elementor-editor-active .famio-video-rail, body.elementor-editor-preview .famio-video-rail { height: auto !important; }
.elementor-editor-active .famio-video-stage, body.elementor-editor-preview .famio-video-stage { position: static !important; height: auto !important; }

/* ---------------------------------------------------------------------
   42. SCROLL FAQ — chips on the reading side, bubbles opposite
   --------------------------------------------------------------------- */
.famio-sfaq {
	direction: rtl; text-align: right; position: relative; overflow: clip;
	padding-block: 0 !important;
	background:
		radial-gradient(56% 46% at 84% 12%, rgba(53,200,120,.18), transparent 70%),
		radial-gradient(56% 46% at 12% 86%, rgba(26,90,174,.24), transparent 72%),
		var(--famio-gradient-deep);
	color: #EAF2FA;
}
.famio-sfaq .famio-section-desc { color: rgba(234,242,250,.8); }
.famio-sfaq .famio-section-head.famio-section-head .famio-section-title { color: #fff; font-size: 1.625rem; }
.famio-sfaq .famio-section-head.famio-section-head { margin-bottom: 1.75rem; }
.famio-sfaq-rail { position: relative; height: 620vh; }
.famio-sfaq-stage {
	position: sticky; top: 0; min-height: 100svh;
	display: grid; align-content: center; padding-block: 1.5rem;
}
.famio-sfaq-list { max-width: 60rem; margin-inline: auto; display: grid; gap: .7rem; width: 100%; }
.famio-sfaq-item { position: relative; }
.famio-sfaq-q {
	display: inline-flex; align-items: center; gap: .85rem;
	border: 0; cursor: pointer; font: inherit; text-align: start;
	padding: .7rem 1.1rem; border-radius: .9rem;
	background: rgba(255,255,255,.08); color: #fff; font-weight: 800; font-size: 1rem;
	box-shadow: 0 0 0 1px rgba(255,255,255,.16);
	transition: background .45s ease, color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.famio-sfaq-item.is-open .famio-sfaq-q {
	background: #FFFFFF; color: var(--famio-primary);
	box-shadow: 0 18px 34px -14px rgba(0,0,0,.5);
	transform: translateY(-2px);
}
.famio-sfaq-sign {
	width: 1.6rem; height: 1.6rem; border-radius: 50%; flex-shrink: 0;
	display: grid; place-items: center;
	background: rgba(53,200,120,.2); color: var(--famio-accent-glow);
	transition: background .45s ease, color .45s ease, transform .45s ease;
}
.famio-sfaq-item.is-open .famio-sfaq-sign {
	background: rgba(31,166,91,.16); color: #0E7A42; transform: rotate(180deg);
}
.famio-sfaq-sign svg { width: .8rem; height: .8rem; }
.famio-sfaq-v { transform-origin: center; transition: opacity .4s ease, transform .4s ease; }
.famio-sfaq-item.is-open .famio-sfaq-v { opacity: 0; transform: scaleY(0); }
.famio-sfaq-a {
	display: grid; grid-template-rows: 0fr; opacity: 0;
	transition: grid-template-rows 1.15s cubic-bezier(.22,.8,.24,1), opacity 1s ease .12s;
}
.famio-sfaq-item.is-open .famio-sfaq-a { grid-template-rows: 1fr; opacity: 1; }
.famio-sfaq-a > div { overflow: hidden; }
.famio-sfaq-a p {
	margin: .9rem 0 0; max-width: 32rem;
	margin-inline-start: auto; margin-inline-end: 0;   /* away from the chip */
	background: var(--famio-gradient-accent); color: #fff;
	padding: .85rem 1.1rem; border-radius: 1.15rem 1.15rem 1.15rem .35rem;
	font-size: .9rem; line-height: 1.8;
	box-shadow: 0 16px 30px -16px rgba(31,166,91,.7);
}
@media (max-width: 767px) {
	/* phones behave exactly like the desktop: the list is pinned and the
	   questions open one after another as you scroll. The rail is LONGER
	   than desktop so the scroll feels slower and no question is skipped,
	   while the visual gaps between the chips get tighter. */
	.famio-sfaq-rail { height: 720vh; }
	.famio-sfaq-stage { padding-block: 6.5rem 2rem; }
	.famio-sfaq .famio-section-head.famio-section-head { margin-bottom: 1.1rem; }
	.famio-sfaq .famio-section-head.famio-section-head .famio-section-title { font-size: 1.375rem; }
	.famio-sfaq-list { gap: .4rem; }
	.famio-sfaq-item { min-height: 0; }
	.famio-sfaq-q { font-size: .875rem; padding: .55rem .85rem; gap: .6rem; border-radius: .8rem; }
	.famio-sfaq-sign { width: 1.35rem; height: 1.35rem; }
	.famio-sfaq-sign svg { width: .7rem; height: .7rem; }
	.famio-sfaq-a p {
		max-width: none; font-size: .8125rem; line-height: 1.7;
		margin-top: .5rem; padding: .7rem .95rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.famio-sfaq-rail { height: auto; }
	.famio-sfaq-stage { position: static; min-height: 0; }
}
.elementor-editor-active .famio-sfaq-rail, body.elementor-editor-preview .famio-sfaq-rail { height: auto !important; }
.elementor-editor-active .famio-sfaq-stage, body.elementor-editor-preview .famio-sfaq-stage { position: static !important; }
.pgview{display:none}.pgview.on{display:block}

/* =====================================================================
   ROUND 27 — August 2026
   ===================================================================== */

/* --- 27.1 · the orbit HOPS between six fixed seats instead of gliding.
   Every seat is held for two thirds of the beat, then the plate snaps to
   the next one. The middle seat is full size; the two beside it are ~74%;
   the outer two ~32% — so the centre plate is unmistakably the hero. */
@keyframes famio-orbit-hop {
	0.0000% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9239), calc(var(--famio-ory) * 1.3827)) scale(0.2600); opacity: 0.000; }
	11.1111% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9239), calc(var(--famio-ory) * 1.3827)) scale(0.2600); opacity: 0.000; }
	16.6667% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9659), calc(var(--famio-ory) * 0.7412)) scale(0.3167); opacity: 1.000; }
	27.7778% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.9659), calc(var(--famio-ory) * 0.7412)) scale(0.3167); opacity: 1.000; }
	33.3333% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.6088), calc(var(--famio-ory) * 0.2066)) scale(0.7367); opacity: 1.000; }
	44.4444% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.6088), calc(var(--famio-ory) * 0.2066)) scale(0.7367); opacity: 1.000; }
	50.0000% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.0000), calc(var(--famio-ory) * 0.0000)) scale(1.0000); opacity: 1.000; }
	61.1111% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * 0.0000), calc(var(--famio-ory) * 0.0000)) scale(1.0000); opacity: 1.000; }
	66.6667% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.6088), calc(var(--famio-ory) * 0.2066)) scale(0.7367); opacity: 1.000; }
	77.7778% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.6088), calc(var(--famio-ory) * 0.2066)) scale(0.7367); opacity: 1.000; }
	83.3333% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9659), calc(var(--famio-ory) * 0.7412)) scale(0.3167); opacity: 1.000; }
	94.4444% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9659), calc(var(--famio-ory) * 0.7412)) scale(0.3167); opacity: 1.000; }
	100.0000% { transform: translate(-50%,-50%) translate(calc(var(--famio-orx) * -0.9239), calc(var(--famio-ory) * 1.3827)) scale(0.2600); opacity: 0.000; }
}
.famio-hero .famio-orbit-item,
.famio-orbit-item {
	animation-name: famio-orbit-hop !important;
	animation-duration: var(--famio-orbit-time, 21s) !important;
	animation-timing-function: cubic-bezier(.72,0,.16,1) !important;
}
.famio-hero { --famio-orbit-time: 21s; }
.famio-orbit-item img { filter: drop-shadow(0 20px 30px rgba(0,0,0,.45)); }

/* --- 27.2 · HERO on a deep green-and-blue gradient ------------------- */
.famio-hero {
	background:
		radial-gradient(120% 78% at 50% -8%, rgba(53,200,120,.28), transparent 62%),
		radial-gradient(90% 60% at 12% 100%, rgba(26,90,174,.45), transparent 68%),
		linear-gradient(158deg, #02203F 0%, #043F6C 44%, #0A6A50 100%);
	/* the eyebrow and the title were sitting right under the header */
	padding-block: 5.5rem 0;
}
.famio-hero .famio-eyebrow {
	background: rgba(255,255,255,.12);
	color: #BFF3D9;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
	margin-bottom: 2.25rem;          /* the requested breathing room */
}
.famio-hero-title { color: #FFFFFF; }
.famio-hero-title .famio-hl { color: var(--famio-accent-glow); }
.famio-hero-sub { color: #C9DCEE; }
.famio-hero .famio-leaf img { filter: brightness(1.25) saturate(1.1); }
.famio-hero-actions { margin-top: 2rem; }
/* buttons closer to the device */
.famio-orbit-stage { margin-top: .5rem; }
@media (max-width: 767px) {
	.famio-hero { padding-block: 5rem 0; }
	.famio-hero .famio-eyebrow { margin-bottom: 1.5rem; }
	.famio-orbit-stage { margin-top: .25rem; }
}
/* soft hand-off from the dark hero into the light section below it */
.famio-journey::before {
	content: ""; position: absolute; z-index: 0; inset-inline: 0; top: 0; height: 9rem;
	background: linear-gradient(180deg, rgba(4,63,108,.35), transparent);
	pointer-events: none;
}

/* --- 27.3 · the store buttons from the reference, used site-wide ----- */
.famio-store .famio-store-icon {
	display: inline-flex !important; align-items: center; justify-content: center;
	flex: 0 0 auto; width: 2rem; height: 2rem; color: #fff;
}
.famio-store .famio-store-icon svg {
	width: 1.7rem; height: 1.7rem; display: block;
	fill: currentColor !important; stroke: none;
}
.famio-store { position: relative; overflow: hidden !important; }
.famio-store::after {
	content: "" !important; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,.28) 50%, transparent 68%);
	transform: translateX(-110%); transition: transform .65s ease;
}
.famio-store:hover::after { transform: translateX(110%); }
.famio-store-text { min-width: 0; }
.famio-store-text b, .famio-store-text span { white-space: nowrap; }
/* glass variant — the hero pair on the dark gradient */
a.famio-store.famio-store-glass, .famio-store.famio-store-glass[class] {
	background: rgba(255,255,255,.10) !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 16px 32px -18px rgba(0,0,0,.6) !important;
}
a.famio-store.famio-store-glass:hover {
	background: var(--famio-gradient-accent) !important;
	box-shadow: 0 18px 38px -14px rgba(31,166,91,.7) !important;
}
.famio-hero-actions .famio-store { padding: .8rem 1.35rem; }
@media (max-width: 420px) {
	.famio-hero-actions { gap: .6rem; }
	.famio-hero-actions .famio-store { padding: .7rem 1rem; gap: .7rem; }
	.famio-hero-actions .famio-store-text b { font-size: .95rem; }
	.famio-hero-actions .famio-store-text span { font-size: .7rem; }
}

/* --- 27.4 · JOURNEY: watch the device travel down, screen changes ---- */
.famio-hero-phone {
	/* stays fully opaque while it slides, so the descent is visible */
	opacity: calc(1 - max(0, var(--famio-hp, 0) - .5) * 2.2);
}
.famio-journey-phone {
	transform: translateY(calc(-72vh + min(calc(var(--famio-jp, 1) / .26), 1) * 72vh))
	           scale(calc(.78 + min(calc(var(--famio-jp, 1) / .26), 1) * .22));
	opacity: min(calc(var(--famio-jp, 1) / .015), 1);
}
.famio-shots { position: relative; }
.famio-shots .famio-shot {
	position: absolute; inset: .75rem;
	width: auto; max-width: 84%; height: auto; margin: auto;
	object-fit: contain; opacity: 0; transform: scale(.86) rotate(-6deg);
	transition: opacity .5s ease, transform .6s cubic-bezier(.2,1.3,.35,1);
	filter: drop-shadow(0 14px 20px rgba(13,61,124,.25));
}
.famio-shots .famio-shot.is-on { opacity: 1; transform: none; }
/* device closer to its buttons, and a little air under them */
.famio-journey-core { padding-bottom: 6.5rem; }
.famio-journey-actions { bottom: 1.25rem; }
@media (max-width: 1023px) {
	.famio-journey-core { padding-bottom: 7rem; }
	.famio-journey-actions { bottom: 1rem; gap: .6rem; }
}

/* --- 27.5 · "كل شي في مكان واحد" — new palette + woven pattern ------- */
.famio-flip {
	background:
		repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px),
		repeating-linear-gradient(-45deg, rgba(255,255,255,.028) 0 2px, transparent 2px 14px),
		radial-gradient(70% 60% at 80% 18%, rgba(53,200,120,.30), transparent 68%),
		radial-gradient(65% 55% at 14% 84%, rgba(18,120,190,.34), transparent 70%),
		linear-gradient(150deg, #04283F 0%, #07463F 52%, #0A5F3C 100%) !important;
}
.famio-flip::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
	background-size: 22px 22px; opacity: .5;
}
.famio-flip > * { position: relative; z-index: 1; }

/* --- 27.6 · JOIN — a big animated Famio Business device -------------- */
.famio-join-visual-app {
	position: relative; display: grid; justify-items: center; gap: 1.25rem;
	padding-block: 1rem 2rem;
}
.famio-join-visual-app .famio-join-chef,
.famio-join-visual-app .famio-join-phone { display: none !important; }
.famio-join-halo {
	position: absolute; z-index: 0; top: 6%; left: 50%; transform: translateX(-50%);
	width: min(30rem, 92%); aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, rgba(31,166,91,.28), transparent 62%);
	filter: blur(6px); animation: famio-halo 7s ease-in-out infinite;
}
@keyframes famio-halo {
	0%,100% { transform: translateX(-50%) scale(1);    opacity: .85; }
	50%     { transform: translateX(-50%) scale(1.09); opacity: 1; }
}
.famio-join-appshot {
	position: relative; z-index: 2; display: block; width: min(24rem, 78%);
	transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease;
	animation: famio-appfloat 6.5s ease-in-out infinite;
	filter: drop-shadow(0 34px 54px rgba(4,24,48,.45));
}
.famio-join-appshot img { width: 100%; height: auto; display: block; }
.famio-join-appshot:hover { transform: translateY(-10px) scale(1.02); }
@keyframes famio-appfloat {
	0%,100% { transform: translateY(0)      rotate(-1.2deg); }
	50%     { transform: translateY(-14px)  rotate(1.2deg); }
}
.famio-join-appbadge {
	position: absolute; z-index: 3; inset-inline-start: 50%; bottom: -.9rem;
	transform: translateX(-50%);
	padding: .45rem 1.1rem; border-radius: 999px;
	background: var(--famio-gradient-accent); color: #fff;
	font-size: .8125rem; font-weight: 800; white-space: nowrap;
	box-shadow: 0 14px 26px -12px rgba(31,166,91,.8);
}
.famio-join-appstores {
	position: relative; z-index: 2;
	display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
	margin-top: 1rem;
}
.famio-store-sm { padding: .7rem 1.15rem !important; }
.famio-store-sm .famio-store-icon { width: 1.6rem; height: 1.6rem; }
.famio-store-sm .famio-store-icon svg { width: 1.35rem; height: 1.35rem; }
.famio-store-sm .famio-store-text b { font-size: .95rem; }
.famio-store-sm .famio-store-text span { font-size: .72rem; }

/* --- 27.7 · ABOUT — the numbers are goals, stated as goals ----------- */
.famio-goal-eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	margin: 2rem 0 .85rem; padding: .35rem .9rem; border-radius: 999px;
	background: rgba(31,166,91,.12); color: #0E7A42;
	font-size: .75rem; font-weight: 800; letter-spacing: .04em;
}
.famio-goal-eyebrow::before {
	content: ""; width: .45rem; height: .45rem; border-radius: 50%;
	background: var(--famio-accent);
}
.famio-stats { margin-top: 0 !important; }

/* --- 27.8 · FAMILIES page — the gap under the hero ------------------- */
/* the 12rem cushion under the page hero was the whole gap */
.famio-page-hero + .famio-video { padding-top: 4rem !important; }
@media (max-width: 767px) {
	.famio-page-hero + .famio-video { padding-top: 2.5rem !important; }
}

/* --- 27.9 · FAQ — plain click accordion, answers inverted ------------ */
.famio-sfaq-rail { height: auto !important; }
.famio-sfaq-stage {
	position: static !important; min-height: 0 !important;
	padding-block: 4.5rem !important;
}
.famio-sfaq-list { gap: .85rem !important; }
.famio-sfaq-q { width: 100%; justify-content: flex-start; }
.famio-sfaq-a p {
	background: #FFFFFF !important;
	color: #0E7A42 !important;
	box-shadow: 0 16px 30px -16px rgba(0,0,0,.45) !important;
	font-weight: 600;
}
@media (max-width: 767px) {
	.famio-sfaq-stage { padding-block: 3.25rem !important; }
	.famio-sfaq-list { gap: .6rem !important; }
}

/* --- 27.10 · DISHES slider ------------------------------------------ */
.famio-dishes {
	direction: rtl; text-align: right; position: relative; overflow: clip;
	background: var(--famio-bg-deep);
}
.famio-dishes-wrap { position: relative; }
.famio-dishes-track {
	display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; padding: .5rem .25rem 2rem;
	scrollbar-width: none; -ms-overflow-style: none;
}
.famio-dishes-track::-webkit-scrollbar { display: none; }
.famio-dish {
	scroll-snap-align: center; flex: 0 0 auto;
	width: min(17rem, 74vw);
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: .75rem; padding: 0 1.5rem 1.75rem;
	border-radius: var(--famio-radius-lg); border: 1px solid var(--famio-border);
	background: #fff; overflow: hidden;
	box-shadow: 0 18px 40px -20px rgba(13,61,124,.32);
	transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.famio-dish:hover { transform: translateY(-8px); box-shadow: 0 26px 52px -20px rgba(13,61,124,.45); }
.famio-dish-top {
	position: relative; width: calc(100% + 3rem); margin: 0 -1.5rem .35rem;
	padding: 2rem 1rem 1rem;
	background: linear-gradient(180deg, rgba(31,166,91,.14), transparent);
}
.famio-dish-plate { position: relative; width: 9.5rem; max-width: 72%; margin-inline: auto; aspect-ratio: 1; }
.famio-dish-plate img { width: 100%; height: 100%; object-fit: contain; display: block;
	filter: drop-shadow(0 16px 24px rgba(13,61,124,.3)); }
.famio-dish-ring {
	position: absolute; inset: -7%; border-radius: 50%;
	border: 1px dashed rgba(31,166,91,.55); opacity: 0; transition: opacity .35s ease;
}
.famio-dish:hover .famio-dish-ring { opacity: 1; animation: famio-ringspin 18s linear infinite; }
@keyframes famio-ringspin { to { transform: rotate(360deg); } }
.famio-dish-tag {
	position: absolute; top: 1rem; inset-inline-start: 1rem;
	padding: .3rem .8rem; border-radius: 999px;
	background: var(--famio-gradient-accent); color: #fff;
	font-size: .72rem; font-weight: 800;
}
.famio-dish h3 { font-family: var(--famio-font-display); font-size: 1.2rem; margin: 0; color: var(--famio-primary); }
.famio-dish p  { margin: 0; color: var(--famio-muted-fg); font-size: .9rem; line-height: 1.7; }
.famio-dishes-nav { display: flex; gap: .6rem; justify-content: center; margin-top: .25rem; }
.famio-dishes-nav button {
	width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0; cursor: pointer;
	display: grid; place-items: center;
	background: #fff; color: var(--famio-primary);
	box-shadow: 0 10px 24px -12px rgba(13,61,124,.5), inset 0 0 0 1px var(--famio-border);
	transition: var(--famio-transition);
}
.famio-dishes-nav button:hover { background: var(--famio-gradient-accent); color: #fff; transform: translateY(-2px); }
.famio-dishes-nav svg { width: 1.1rem; height: 1.1rem; }

/* --- 27.11 · OCCASIONS ---------------------------------------------- */
.famio-occ {
	direction: rtl; text-align: right; position: relative; overflow: clip;
	background:
		radial-gradient(60% 50% at 88% 8%, rgba(53,200,120,.16), transparent 70%),
		radial-gradient(55% 45% at 8% 92%, rgba(26,90,174,.14), transparent 72%),
		var(--famio-bg);
}
.famio-occ-grid {
	display: grid; gap: 1.1rem; grid-template-columns: minmax(0,1fr);
}
@media (min-width: 640px)  { .famio-occ-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .famio-occ-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.famio-occ-card {
	position: relative; overflow: hidden;
	display: flex; gap: 1rem; align-items: flex-start;
	padding: 1.5rem 1.4rem; border-radius: var(--famio-radius-lg);
	background: #fff; border: 1px solid var(--famio-border);
	box-shadow: 0 16px 38px -22px rgba(13,61,124,.3);
	transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.famio-occ-card::before {
	content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
	background: var(--famio-gradient-accent); transform: scaleY(0); transform-origin: top;
	transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.famio-occ-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(13,61,124,.42); }
.famio-occ-card:hover::before { transform: scaleY(1); }
.famio-occ-icon {
	flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 1rem;
	display: grid; place-items: center;
	background: rgba(31,166,91,.12); color: #0E7A42;
}
.famio-occ-icon svg { width: 1.5rem; height: 1.5rem; }
.famio-occ-card h3 { margin: 0 0 .35rem; font-family: var(--famio-font-display); font-size: 1.1rem; color: var(--famio-primary); }
.famio-occ-card p  { margin: 0; color: var(--famio-muted-fg); font-size: .9rem; line-height: 1.75; }
.famio-occ-card b  { display: inline-block; margin-top: .6rem; color: #0E7A42; font-size: .85rem; }


/* --- 27.6b · the app visual keeps the desktop edge placement --------- */
@media (min-width: 1024px) {
	.famio-join-visual.famio-join-visual-app {
		position: absolute; z-index: 1;
		inset-inline-end: 2.5%; top: 50%; bottom: auto;
		transform: translateY(-50%);
		width: min(32rem, 44%); max-width: 44%;
		aspect-ratio: auto; min-height: 0; margin: 0; padding: 0;
		display: grid; justify-items: center; align-content: center;
	}
	.famio-join-visual.famio-join-visual-app .famio-join-appshot { width: min(23rem, 82%); }
}
@media (max-width: 1023px) {
	.famio-join-visual.famio-join-visual-app { min-height: 0; margin-top: 2.5rem; }
	.famio-join-visual.famio-join-visual-app .famio-join-appshot { width: min(19rem, 66%); }
}
.famio-join-visual.famio-join-visual-app .famio-join-arc { inset-inline-start: 6%; top: 4%; }



/* =====================================================================
   ROUND 28 — August 2026
   ===================================================================== */

/* --- 28.1 · BUTTONS — the exact shape from the reference build -------
   The old ribbon/flat override is retired here: one pill, one sweeping
   sheen, four fills. This is the button for the whole site.            */
a.famio-btn, button.famio-btn, .famio-btn[class] {
	position: relative; overflow: hidden !important; isolation: isolate;
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--famio-font); font-weight: 700; font-size: 1rem; line-height: 1.2;
	padding: .9rem 2rem !important;
	border-radius: 999px !important; border: 0 !important;
	cursor: pointer; text-decoration: none; white-space: nowrap;
	clip-path: none !important;
	transition: transform .35s cubic-bezier(.25,1,.5,1), box-shadow .35s ease,
	            background .35s ease, color .35s ease, filter .35s ease;
}
.famio-btn::before { content: none !important; }
.famio-btn::after {
	content: "" !important; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,.30) 50%, transparent 68%);
	transform: translateX(-110%); transition: transform .65s ease;
	display: block !important;
}
.famio-btn:hover::after { transform: translateX(110%); }
a.famio-btn:hover, button.famio-btn:hover, .famio-btn[class]:hover { transform: translateY(-2px); }

a.famio-btn.famio-btn-primary, .famio-btn.famio-btn-primary[class] {
	background: var(--famio-gradient-primary) !important;
	color: var(--famio-primary-fg) !important;
	box-shadow: 0 4px 14px -4px rgba(13,61,124,.5) !important;
}
a.famio-btn.famio-btn-primary:hover, .famio-btn.famio-btn-primary[class]:hover {
	background: linear-gradient(135deg, #0D3D7C, #1FA65B) !important;
	box-shadow: 0 0 45px rgba(31,166,91,.28), 0 18px 42px -14px rgba(13,61,124,.5) !important;
	filter: none;
}
a.famio-btn.famio-btn-accent, .famio-btn.famio-btn-accent[class] {
	background: var(--famio-gradient-accent) !important;
	color: #fff !important;
	box-shadow: 0 10px 26px -12px rgba(31,166,91,.9) !important;
}
a.famio-btn.famio-btn-accent:hover, .famio-btn.famio-btn-accent[class]:hover {
	background: linear-gradient(135deg, #35C878, #1FA65B) !important;
	box-shadow: 0 0 45px rgba(31,166,91,.32), 0 18px 42px -14px rgba(13,61,124,.4) !important;
	filter: none;
}
a.famio-btn.famio-btn-outline, .famio-btn.famio-btn-outline[class],
a.famio-btn.famio-btn-ghost,   .famio-btn.famio-btn-ghost[class],
a.famio-btn.famio-btn-line,    .famio-btn.famio-btn-line[class] {
	background: transparent !important;
	color: var(--famio-primary) !important;
	box-shadow: inset 0 0 0 1.5px var(--famio-border) !important;
}
a.famio-btn.famio-btn-outline:hover, .famio-btn.famio-btn-outline[class]:hover,
a.famio-btn.famio-btn-ghost:hover,   .famio-btn.famio-btn-ghost[class]:hover,
a.famio-btn.famio-btn-line:hover,    .famio-btn.famio-btn-line[class]:hover {
	background: rgba(31,166,91,.10) !important;
	color: #0E7A42 !important;
	box-shadow: inset 0 0 0 1.5px var(--famio-accent) !important;
}
.famio-btn-ghost:hover *, .famio-btn-line:hover *, .famio-btn-outline:hover * { color: #0E7A42 !important; }
a.famio-btn.famio-btn-light, .famio-btn.famio-btn-light[class] {
	background: #fff !important; color: var(--famio-primary) !important;
	box-shadow: 0 4px 14px -4px rgba(13,61,124,.35) !important;
}
a.famio-btn.famio-btn-light:hover { box-shadow: 0 0 45px rgba(255,255,255,.28) !important; }
/* on dark bands the outline flips to light */
.famio-on-dark .famio-btn.famio-btn-ghost, .famio-on-dark .famio-btn.famio-btn-line,
.famio-sfaq .famio-btn.famio-btn-ghost,    .famio-dishes .famio-btn.famio-btn-ghost {
	color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35) !important;
}
.famio-header .famio-btn { padding: .7rem 1.5rem !important; font-size: .875rem; }

/* --- 28.2 · HERO — a touch more air between buttons and the device -- */
.famio-orbit-stage { margin-top: 1.5rem; }
@media (max-width: 767px) { .famio-orbit-stage { margin-top: 1.15rem; } }

/* --- 28.3 · the descent is now WATCHABLE ----------------------------
   Both sections clip their own overflow, so a device that slid past the
   hero's bottom edge was simply cut away — you never saw it travel. The
   whole journey now happens INSIDE the pinned stage: the device enters
   at the very top of the viewport and takes ~30% of the rail to reach
   the middle, so the drop is on screen the whole way down.             */
.famio-journey-phone {
	transform: translateY(calc(-46vh + min(calc(var(--famio-jp, 1) / .30), 1) * 46vh))
	           scale(calc(.80 + min(calc(var(--famio-jp, 1) / .30), 1) * .20));
	opacity: min(calc(var(--famio-jp, 1) / .012), 1);
}
/* and the hero device stays lit until the hero itself is nearly gone */
.famio-hero-phone { opacity: calc(1 - max(0, var(--famio-hp, 0) - .62) * 2.7); }

/* --- 28.4 · FAQ — a narrower, calmer column ------------------------- */
.famio-sfaq-list { max-width: 44rem !important; }
.famio-sfaq-q { font-size: .9375rem; padding: .65rem 1rem; }
.famio-sfaq-a p { max-width: 30rem; font-size: .875rem; }
@media (max-width: 767px) {
	.famio-sfaq-list { max-width: 100% !important; }
}

/* --- 28.5 · FAMILIES page — kill the dead band under the hero -------
   The video stage is a pinned 100svh box with its content centred, so
   the top half of that box read as empty space right after the hero.
   Content now starts near the top of the pinned frame instead.         */
.famio-page-hero + .famio-video { padding-top: 0 !important; }
.famio-video-stage {
	align-content: start !important;
	padding-block: 7.5rem 2rem !important;
}
@media (max-width: 767px) {
	.famio-video-stage { padding-block: 6rem 1.5rem !important; }
}

/* --- 28.6 · JOIN — inside the container, not edge to edge ----------- */
@media (min-width: 1024px) {
	.famio-join { min-height: 0; padding-block: 5rem; }
	.famio-join-inner {
		grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr) !important;
		gap: 3.5rem; align-items: center;
	}
	.famio-join-body { width: 100% !important; }
	.famio-join-visual.famio-join-visual-app {
		position: relative !important; inset: auto !important;
		transform: none !important;
		width: 100% !important; max-width: 100% !important;
		order: 2;
	}
	.famio-join-visual.famio-join-visual-app .famio-join-appshot { width: min(20rem, 70%); }
}

/* --- 28.7 · DISHES — the inner-page hero treatment, in green -------- */
.famio-dishes {
	position: relative; z-index: 5; overflow: visible !important;
	padding-block: 5rem 0 !important;
	background:
		radial-gradient(72% 62% at 84% 10%, rgba(53,200,120,.26), transparent 66%),
		radial-gradient(62% 56% at 10% 88%, rgba(18,120,190,.28), transparent 70%),
		linear-gradient(152deg, #04283F 0%, #06503F 54%, #0A6A44 100%);
	color: #E8F1F8;
}
.famio-dishes .famio-ph-body { padding-bottom: 2.5rem; }
.famio-dishes .famio-ph-icon {
	background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22);
}
.famio-dishes .famio-ph-title { font-size: 2rem; }
@media (min-width: 768px) { .famio-dishes .famio-ph-title { font-size: 2.75rem; } }
.famio-dishes + .famio-occ { padding-top: 9rem; }
@media (max-width: 767px) {
	.famio-dishes { padding-block: 3.5rem 0 !important; }
	.famio-dishes .famio-ph-title { font-size: 1.6rem; }
	.famio-dishes + .famio-occ { padding-top: 6.5rem; }
}

/* --- 28.8 · the slider: phones in a coverflow ----------------------- */
.famio-dishes-wrap { position: relative; z-index: 2; }
.famio-dishes-track {
	display: flex; align-items: center; gap: 0;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 1rem 0 2.5rem;
	perspective: 1400px;
	scrollbar-width: none; -ms-overflow-style: none;
	cursor: grab;
	--famio-slide-w: 15rem;
}
.famio-dishes-track:active { cursor: grabbing; }
.famio-dishes-track::-webkit-scrollbar { display: none; }
/* half-viewport spacers so the first and last slide can reach the middle */
.famio-dishes-track::before, .famio-dishes-track::after {
	content: ""; flex: 0 0 calc(50% - var(--famio-slide-w, 15rem) / 2);
}
.famio-dishslide {
	flex: 0 0 var(--famio-slide-w); width: var(--famio-slide-w);
	scroll-snap-align: center;
	transform-style: preserve-3d;
	will-change: transform, opacity;
	transition: opacity .35s ease;
	padding-inline: .5rem;
}
.famio-dish-device {
	width: 100%;
	border-radius: 2.4rem; padding: .45rem;
	box-shadow: 0 34px 60px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.22);
}
.famio-dish-screen {
	border-radius: 2rem;
	background: linear-gradient(180deg, #F7FAFF 0%, #E7F2EA 100%);
	display: flex; flex-direction: column; align-items: center;
	padding: 2.4rem .9rem 1.4rem; text-align: center;
}
.famio-dish-screen-brand img { height: 1.15rem; width: auto; display: block; margin-inline: auto; }
.famio-dishes .famio-dish-plate {
	position: relative; width: 76%; aspect-ratio: 1; margin: .9rem auto .6rem;
}
.famio-dishes .famio-dish-plate img {
	width: 100%; height: 100%; object-fit: contain; display: block;
	filter: drop-shadow(0 16px 22px rgba(13,61,124,.32));
	animation: famio-plate-spin 30s linear infinite;   /* the plates turn */
}
.famio-dishslide:nth-child(even) .famio-dish-plate img { animation-direction: reverse; }
.famio-dishes .famio-dish-ring {
	position: absolute; inset: -5%; border-radius: 50%;
	border: 1px dashed rgba(31,166,91,.45); opacity: .9;
	animation: famio-ring-spin 22s linear infinite;
}
.famio-dishes .famio-dish-tag {
	position: absolute; z-index: 3; top: -.35rem; inset-inline-start: -.35rem;
	padding: .25rem .7rem; border-radius: 999px;
	background: var(--famio-gradient-accent); color: #fff;
	font-size: .65rem; font-weight: 800; white-space: nowrap;
	box-shadow: 0 8px 16px -8px rgba(31,166,91,.9);
}
.famio-dish-copy { margin-top: auto; }
.famio-dish-copy h3 {
	font-family: var(--famio-font-display); font-size: 1.05rem; margin: 0 0 .3rem;
	color: var(--famio-primary);
}
.famio-dish-copy p { margin: 0; font-size: .78rem; line-height: 1.65; color: var(--famio-muted-fg); }
.famio-dishes-nav { display: flex; gap: .6rem; justify-content: center; }
.famio-dishes-nav button {
	width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0; cursor: pointer;
	display: grid; place-items: center;
	background: rgba(255,255,255,.12); color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
	transition: var(--famio-transition);
}
.famio-dishes-nav button:hover {
	background: var(--famio-gradient-accent); transform: translateY(-2px);
	box-shadow: 0 14px 28px -12px rgba(31,166,91,.9);
}
.famio-dishes-nav svg { width: 1.1rem; height: 1.1rem; }
@media (min-width: 768px) { .famio-dishes-track { --famio-slide-w: 17rem; } }
@media (max-width: 479px) { .famio-dishes-track { --famio-slide-w: 13.5rem; } }
/* the spinning plates that ride the section's bottom edge */
.famio-dishes .famio-ph-plates { z-index: 6; }



/* =====================================================================
   ROUND 29 — August 2026
   ===================================================================== */

/* --- 29.1 · INNER-PAGE HERO — centred column + a fan of three cards -- */
.famio-ph10 {
	position: relative; z-index: 5; overflow: clip;
	direction: rtl; text-align: center;
	padding-block: 6.5rem 4rem;
	background:
		radial-gradient(70% 60% at 82% 8%, rgba(53,200,120,.22), transparent 66%),
		radial-gradient(64% 58% at 12% 88%, rgba(26,90,174,.32), transparent 70%),
		var(--famio-gradient-deep);
	color: #E8F1F8;
}
.famio-ph10-body {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
	max-width: 64rem;
}
.famio-ph10-eyebrow {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .4rem 1rem; border-radius: 999px;
	background: rgba(255,255,255,.10); color: #BFF3D9;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
	font-size: .8125rem; font-weight: 800;
}
.famio-ph10-eyebrow i {
	width: .5rem; height: .5rem; border-radius: 50%;
	background: var(--famio-accent-glow);
	box-shadow: 0 0 0 4px rgba(53,200,120,.22);
}
.famio-ph10-title {
	font-family: var(--famio-font-display);
	font-size: 2rem; font-weight: 700; line-height: 1.28;
	color: #fff; margin: 0; max-width: 22ch;
}
@media (min-width: 768px)  { .famio-ph10-title { font-size: 2.85rem; } }
@media (min-width: 1024px) { .famio-ph10-title { font-size: 3.25rem; } }
.famio-ph10-title .famio-hl { color: var(--famio-accent-glow); }
.famio-ph10-sub {
	margin: 0; max-width: 34rem;
	color: rgba(232,241,248,.82); font-size: 1rem; line-height: 1.85;
}
@media (min-width: 768px) { .famio-ph10-sub { font-size: 1.0625rem; } }
.famio-ph10-cta {
	display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center;
	margin-top: .5rem;
}

/* the fan: a wide centre card with two tilted cards tucked behind it */
.famio-ph10-fan {
	display: flex; align-items: center; justify-content: center;
	width: 100%; max-width: 46rem; margin-top: 2.25rem;
}
.famio-ph10-card {
	position: relative; flex: 0 0 auto; margin: 0; overflow: hidden;
	aspect-ratio: 4 / 5; border-radius: 1.15rem;
	background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
	box-shadow: 0 30px 55px -24px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.14);
	transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease;
}
.famio-ph10-card img {
	position: absolute; inset: 12% 10% 22%;
	width: 80%; height: 66%; object-fit: contain;
	filter: drop-shadow(0 18px 26px rgba(0,0,0,.5));
}
.famio-ph10-card figcaption {
	position: absolute; inset-inline: 0; bottom: 0;
	padding: 1.4rem .75rem .95rem;
	background: linear-gradient(to top, rgba(3,20,38,.82), transparent);
	color: #EAF4FF; font-size: .78rem; font-weight: 700;
}
.famio-ph10-card-1 { width: 30%; margin-inline-end: -2rem; z-index: 1; transform: rotate(-6deg) translateY(1.5rem); }
.famio-ph10-card-2 { width: 34%; z-index: 2; transform: translateY(-.5rem); }
.famio-ph10-card-3 { width: 30%; margin-inline-start: -2rem; z-index: 1; transform: rotate(6deg) translateY(1.5rem); }
.famio-ph10-card-1:hover { transform: rotate(-4deg) translateY(.6rem) scale(1.03); z-index: 3; }
.famio-ph10-card-2:hover { transform: translateY(-1.4rem) scale(1.03); }
.famio-ph10-card-3:hover { transform: rotate(4deg) translateY(.6rem) scale(1.03); z-index: 3; }
/* they arrive spread out, then close into the fan */
.famio-js .famio-ph10-fan .famio-ph10-card { opacity: 0; }
.famio-ph10.is-in .famio-ph10-card {
	animation: famio-fan-in .85s cubic-bezier(.2,.9,.25,1) both;
}
.famio-ph10.is-in .famio-ph10-card-1 { animation-name: famio-fan-1; animation-delay: .35s; }
.famio-ph10.is-in .famio-ph10-card-2 { animation-name: famio-fan-2; animation-delay: .20s; }
.famio-ph10.is-in .famio-ph10-card-3 { animation-name: famio-fan-3; animation-delay: .50s; }
@keyframes famio-fan-1 {
	from { opacity: 0; transform: rotate(-6deg) translate(-3rem, 3rem); }
	to   { opacity: 1; transform: rotate(-6deg) translateY(1.5rem); }
}
@keyframes famio-fan-2 {
	from { opacity: 0; transform: translateY(2.5rem) scale(.9); }
	to   { opacity: 1; transform: translateY(-.5rem); }
}
@keyframes famio-fan-3 {
	from { opacity: 0; transform: rotate(6deg) translate(3rem, 3rem); }
	to   { opacity: 1; transform: rotate(6deg) translateY(1.5rem); }
}
@media (max-width: 767px) {
	.famio-ph10 { padding-block: 5rem 2.75rem; }
	.famio-ph10-fan { max-width: 100%; margin-top: 1.75rem; }
	.famio-ph10-card-1, .famio-ph10-card-3 { width: 32%; }
	.famio-ph10-card-2 { width: 36%; }
	.famio-ph10-card figcaption { font-size: .68rem; padding: 1.1rem .5rem .7rem; }
	.famio-ph10-cta .famio-btn { padding: .8rem 1.35rem !important; font-size: .9375rem; }
}
/* the fan lives inside the hero, so the section below needs normal air */
.famio-ph10 + .famio-section, .famio-ph10 + .famio-video { padding-top: 4rem !important; }
@media (max-width: 767px) {
	.famio-ph10 + .famio-section, .famio-ph10 + .famio-video { padding-top: 2.5rem !important; }
}
.famio-ph10 + .famio-video .famio-video-stage { padding-block: 7.5rem 2rem !important; }

/* --- 29.2 · superseded by round 34: the hero device now flies ------ */
.famio-orbit-track { opacity: 1 !important; }

/* --- 29.3 · phone / buttons breathing room in section two ----------- */
@media (max-width: 1023px) {
	.famio-journey-core { padding-bottom: 10.5rem; }
	.famio-journey-actions { bottom: 1.25rem; gap: .7rem; }
}
@media (max-width: 560px) {
	.famio-journey-core { padding-bottom: 11rem; }
}

/* --- 29.4 · a shorter dish slider, and no spinning plates on phones - */
.famio-dish-device { aspect-ratio: 9 / 15.2; border-radius: 2rem; }
.famio-dish-screen { border-radius: 1.7rem; padding: 2rem .8rem 1.1rem; }
.famio-dishes .famio-dish-plate { width: 66%; margin: .7rem auto .5rem; }
.famio-dish-copy h3 { font-size: .98rem; }
.famio-dish-copy p  { font-size: .74rem; line-height: 1.6; }
.famio-dishes-track { padding: .75rem 0 1.75rem; }
@media (max-width: 767px) {
	.famio-dishes .famio-ph-plates { display: none; }   /* removed on phones */
	.famio-dishes + .famio-occ { padding-top: 3.25rem; }
	.famio-dish-device { aspect-ratio: 9 / 14.4; }
}

/* --- 29.5 · custom dropdown (the native one would not open on phones) */
.famio-select { position: relative; z-index: 3; }
.famio-select > select { position: absolute !important; opacity: 0 !important; pointer-events: none !important;
	width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; }
.famio-select-btn {
	width: 100%; display: flex; align-items: center; gap: .6rem;
	background: transparent; border: 0;
	border-bottom: 1px solid rgba(13,61,124,.2);
	border-radius: 0; color: var(--famio-fg);
	font: inherit; font-size: 1rem; text-align: start;
	padding: .7rem 0 .8rem; cursor: pointer;
	transition: border-color .4s ease;
}
.famio-select-btn[data-empty="1"] { color: rgba(90,107,128,.6); }
.famio-select-btn .famio-select-caret {
	margin-inline-start: auto; width: 1.05rem; height: 1.05rem; flex: 0 0 auto;
	color: var(--famio-accent-glow);
	transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.famio-select.is-open .famio-select-caret { transform: rotate(180deg); }
.famio-select.is-open .famio-select-btn { border-bottom-color: var(--famio-accent); }
.famio-select-list {
	position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + .4rem);
	margin: 0; padding: .35rem; list-style: none;
	background: #fff; border-radius: .9rem;
	box-shadow: 0 24px 48px -18px rgba(13,61,124,.45), 0 0 0 1px var(--famio-border);
	max-height: 15rem; overflow-y: auto;
	opacity: 0; transform: translateY(-.4rem); pointer-events: none;
	transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.famio-select.is-open .famio-select-list { opacity: 1; transform: none; pointer-events: auto; }
.famio-select-list li {
	padding: .6rem .75rem; border-radius: .6rem; cursor: pointer;
	font-size: .95rem; color: var(--famio-fg);
	transition: background .2s ease, color .2s ease;
}
.famio-select-list li:hover, .famio-select-list li.is-active {
	background: rgba(31,166,91,.12); color: #0E7A42; font-weight: 700;
}
.famio-formx-field .famio-select + .famio-formx-glow { z-index: 1; }


/* --- 29.6 · the two store links inside the QR dock carry their marks - */
.famio-qr-stores a {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
}
.famio-qr-ico {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; width: 1.05rem; height: 1.05rem; color: #fff;
}
.famio-qr-ico svg { width: 1.05rem; height: 1.05rem; display: block; fill: currentColor; stroke: none; }
.famio-qr-stores b { font-weight: 800; }
/* the burger menu's CTA gets the download mark too */
.famio-mobile-menu .famio-btn svg { width: 1rem; height: 1rem; flex: 0 0 auto; }



/* =====================================================================
   ROUND 30 — the dish carousel becomes a true coverflow ring
   ===================================================================== */
.famio-dishes .famio-ph-plates { display: none !important; }   /* gone for good */

.famio-cf {
	--famio-cf-card: clamp(9rem, 17vw, 13.5rem);
	position: relative; z-index: 2;
	width: 100%; margin-inline: auto;
}
.famio-cf-shell { position: relative; }
.famio-cf-frame {
	position: relative;
	overflow: hidden;
	padding-block: 2.25rem 1.25rem;
	outline: none;
	cursor: grab;
	perspective: calc(var(--famio-cf-card) * 3);
	touch-action: pan-y;               /* horizontal drag is ours */
}
.famio-cf-frame:active { cursor: grabbing; }
.famio-cf-frame:focus-visible { box-shadow: inset 0 0 0 2px rgba(53,200,120,.6); border-radius: 1rem; }
.famio-cf-stage {
	position: relative;
	height: calc(var(--famio-cf-card) * 1.72);
	transform-style: preserve-3d;
	user-select: none; -webkit-user-select: none;
}
.famio-cf-card {
	position: absolute; left: 50%; top: 0;
	width: var(--famio-cf-card);
	will-change: transform, opacity;
	backface-visibility: hidden;
}
.famio-cf-card .famio-dish-device {
	width: 100%; aspect-ratio: 9 / 15.5;
	border-radius: 1.75rem; padding: .4rem;
	box-shadow: 0 34px 60px -22px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.22);
}
.famio-cf-card .famio-dish-screen {
	border-radius: 1.45rem;
	background: linear-gradient(180deg, #F7FAFF 0%, #E7F2EA 100%);
	display: flex; flex-direction: column; align-items: center;
	padding: 1.8rem .7rem 1rem; text-align: center;
}
.famio-dish-screen-brand img { height: 1rem; }
.famio-cf-card .famio-dish-plate {
	position: relative; width: 78%; aspect-ratio: 1; margin: .7rem auto .5rem;
}
.famio-cf-card .famio-dish-plate img {
	width: 100%; height: 100%; object-fit: contain; display: block;
	filter: drop-shadow(0 14px 20px rgba(13,61,124,.3));
	animation: famio-plate-spin 30s linear infinite;
}
.famio-cf-card:nth-child(even) .famio-dish-plate img { animation-direction: reverse; }
.famio-dish-name {
	margin-top: auto;
	font-family: var(--famio-font-display); font-size: .9rem; font-weight: 700;
	color: var(--famio-primary); line-height: 1.4;
}
/* nav arrows sit over the frame edges */
.famio-cf-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 200;
	width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; cursor: pointer;
	display: grid; place-items: center;
	background: rgba(255,255,255,.14); color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	transition: var(--famio-transition);
}
.famio-cf-nav:hover { background: var(--famio-gradient-accent); box-shadow: 0 14px 28px -12px rgba(31,166,91,.9); }
.famio-cf-nav svg { width: 1.05rem; height: 1.05rem; }
.famio-cf-prev { inset-inline-end: .75rem; }
.famio-cf-next { inset-inline-start: .75rem; }
@media (min-width: 1024px) {
	.famio-cf-prev { inset-inline-end: 2.5rem; }
	.famio-cf-next { inset-inline-start: 2.5rem; }
}
/* caption below the ring — title, one line of copy, then the spec rows */
.famio-cf-caption {
	margin-top: .5rem; padding-inline: 1.5rem;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	min-height: 11rem;
}
.famio-cf-caption > * { animation: famio-cf-fade .45s ease both; }
@keyframes famio-cf-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.famio-cf-title {
	margin: 0; font-family: var(--famio-font-display);
	font-size: 1.3rem; font-weight: 700; color: #fff;
}
.famio-cf-sub { margin: .45rem 0 0; font-size: .9rem; color: rgba(232,241,248,.78); max-width: 30rem; line-height: 1.8; }
.famio-cf-meta {
	margin: 1.5rem 0 0; width: 100%; max-width: 20rem;
	font-size: .8125rem;
}
.famio-cf-meta > div {
	display: flex; justify-content: space-between; gap: 1rem;
	padding: .45rem 0;
	border-bottom: 1px solid rgba(255,255,255,.10);
}
.famio-cf-meta > div:last-child { border-bottom: 0; }
.famio-cf-meta dt { color: rgba(232,241,248,.6); margin: 0; }
.famio-cf-meta dd { margin: 0; font-weight: 700; color: #EAF4FF; }
.famio-cf-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.famio-cf-dots button {
	width: .5rem; height: .5rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background: #fff; opacity: .3;
	transition: opacity .3s ease, transform .3s ease;
}
.famio-cf-dots button[aria-current="true"] { opacity: 1; transform: scale(1.35); }
@media (max-width: 767px) {
	.famio-cf { --famio-cf-card: clamp(8.5rem, 40vw, 11rem); }
	.famio-cf-frame { padding-block: 1.5rem 1rem; }
	.famio-cf-nav { width: 2.4rem; height: 2.4rem; }
	.famio-cf-prev { inset-inline-end: .35rem; }
	.famio-cf-next { inset-inline-start: .35rem; }
	.famio-cf-caption { min-height: 12rem; padding-inline: 1rem; }
	.famio-cf-title { font-size: 1.15rem; }
	.famio-cf-sub { font-size: .85rem; }
	.famio-dishes + .famio-occ { padding-top: 3rem; }
}



/* =====================================================================
   ROUND 31 — August 2026
   ===================================================================== */

/* --- 31.1 · the carousel card: no caption, plate dead centre -------- */
.famio-cf-caption { display: none !important; }
.famio-cf-card .famio-dish-screen {
	padding: 1.7rem .7rem 1.15rem;
	justify-content: flex-start;
}
.famio-cf-card .famio-dish-plate {
	margin: auto;                    /* centres between the logo and the name */
	width: 80%;
}
.famio-dish-name {
	margin-top: 0; margin-bottom: .15rem;
	font-size: .92rem;
}
.famio-cf-dots { margin-top: .35rem; }

/* --- 31.2 · INNER HERO — solid cards, shorter, patterned, animated --- */
.famio-ph10 {
	padding-block: 5rem 3rem;
}
@media (min-width: 1024px) { .famio-ph10 { padding-block: 5.5rem 3.25rem; } }
@media (max-width: 767px)  { .famio-ph10 { padding-block: 4.25rem 2.25rem; } }
.famio-ph10-body { gap: 1rem; }

/* a woven brand pattern behind everything — dots over fine diagonals */
.famio-ph10::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
		repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 12px),
		repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 12px);
	background-size: 24px 24px, auto, auto;
	-webkit-mask-image: radial-gradient(ellipse 90% 78% at 50% 42%, #000 30%, transparent 78%);
	mask-image: radial-gradient(ellipse 90% 78% at 50% 42%, #000 30%, transparent 78%);
	opacity: .85;
}
.famio-ph10 > * { position: relative; z-index: 1; }

/* the title: a slow light sweep travelling across the letters. Arabic is
   never split per letter — that would break the glyph joins — so the shine
   is painted through the type instead, which reads the same and stays
   correct in every font. */
.famio-ph10-title { color: #fff; }        /* fallback if the split never ran */
.famio-ph10-title .famio-word {
	/* two animations at once: the variable-weight breath that runs on every
	   other heading, plus a light sweep painted THROUGH the glyphs. The
	   sweep is offset word by word, so it travels along the line. */
	font-variation-settings: "wght" 520;
	background: linear-gradient(100deg,
		#FFFFFF 0%, #FFFFFF 34%, #BFF3D9 46%, #FFFFFF 58%, #FFFFFF 100%);
	background-size: 300% 100%;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	animation: famio-breath 2.8s alternate cubic-bezier(.37,0,.63,1) infinite both,
	           famio-title-shine 6s linear infinite;
	animation-delay: var(--famio-breath, 0s), calc(var(--w, 0) * -240ms);
	text-shadow: none;
}
.famio-ph10-title .famio-hl .famio-word {
	background: linear-gradient(100deg,
		var(--famio-accent-glow) 0%, var(--famio-accent-glow) 34%, #FFFFFF 46%,
		var(--famio-accent-glow) 58%, var(--famio-accent-glow) 100%);
	background-size: 300% 100%;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
@keyframes famio-title-shine {
	from { background-position: 300% 0; }
	to   { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.famio-ph10-title .famio-word { animation: none !important; }
}

/* solid cards — no see-through panels */
.famio-ph10-card {
	background: linear-gradient(165deg, #123A63 0%, #0B2E52 55%, #0A4238 100%);
	box-shadow:
		0 28px 50px -22px rgba(0,0,0,.8),
		inset 0 1px 0 rgba(255,255,255,.16),
		0 0 0 1px rgba(255,255,255,.10);
}
.famio-ph10-card img { filter: drop-shadow(0 16px 22px rgba(0,0,0,.55)); }
.famio-ph10-card figcaption {
	background: linear-gradient(to top, rgba(4,20,38,.95) 30%, rgba(4,20,38,0));
}
/* a touch smaller so the hero loses height without losing presence */
.famio-ph10-fan { margin-top: 1.75rem; max-width: 40rem; }
.famio-ph10-card-1 { width: 28%; }
.famio-ph10-card-2 { width: 32%; }
.famio-ph10-card-3 { width: 28%; }
@media (max-width: 767px) {
	.famio-ph10-fan { margin-top: 1.4rem; }
	.famio-ph10-card-1, .famio-ph10-card-3 { width: 31%; }
	.famio-ph10-card-2 { width: 35%; }
}

/* they fly in from the right, from above, and from the left */
@keyframes famio-fan-1 {
	from { opacity: 0; transform: rotate(-16deg) translate(6rem, 1.5rem) scale(.86); }
	to   { opacity: 1; transform: rotate(-6deg) translateY(1.5rem); }
}
@keyframes famio-fan-2 {
	from { opacity: 0; transform: translateY(-5rem) rotate(4deg) scale(.86); }
	to   { opacity: 1; transform: translateY(-.5rem); }
}
@keyframes famio-fan-3 {
	from { opacity: 0; transform: rotate(16deg) translate(-6rem, 1.5rem) scale(.86); }
	to   { opacity: 1; transform: rotate(6deg) translateY(1.5rem); }
}
.famio-ph10.is-in .famio-ph10-card { animation-duration: 1.05s; }
.famio-ph10.is-in .famio-ph10-card-2 { animation-delay: .15s; }
.famio-ph10.is-in .famio-ph10-card-1 { animation-delay: .38s; }
.famio-ph10.is-in .famio-ph10-card-3 { animation-delay: .55s; }



/* =====================================================================
   ROUND 32 — August 2026
   ===================================================================== */

/* --- 32.1 · slider: air under the dots, arrows pulled in ------------ */
.famio-dishes { padding-block: 5rem 3.5rem !important; }
@media (max-width: 767px) { .famio-dishes { padding-block: 3.5rem 2.75rem !important; } }
.famio-cf-dots { margin-top: 1.5rem; }
/* the arrows now sit just outside the centre card instead of on the frame
   edges, so they scale with the card rather than with the viewport */
.famio-cf-prev { inset-inline-end: max(.4rem, calc(50% - var(--famio-cf-card) * .88)) !important; }
.famio-cf-next { inset-inline-start: max(.4rem, calc(50% - var(--famio-cf-card) * .88)) !important; }

/* --- 32.2 · section two: the device clears the sticky header -------- */
@media (max-width: 1023px) {
	.famio-journey-stage { padding-block: 6rem 1.5rem; }
	.famio-journey-core { padding-bottom: 9.5rem; }
}
@media (max-width: 560px) {
	.famio-journey-stage { padding-block: 6.5rem 1.25rem; }
	.famio-journey-core { padding-bottom: 10rem; }
}

/* --- 32.3 · the docked download card: dark, wider, one-line labels -- */
.famio-qr {
	width: 22rem;
	background: var(--famio-gradient-deep) !important;
	box-shadow: 0 26px 60px -22px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.14) !important;
	color: #EAF2FA;
}
.famio-qr:hover {
	box-shadow: 0 32px 70px -22px rgba(0,0,0,.65), inset 0 0 0 1px rgba(53,200,120,.45) !important;
}
.famio-qr-body b { color: #FFFFFF !important; font-size: 1rem; }
.famio-qr-body p { color: rgba(234,242,250,.78) !important; font-size: .78rem; line-height: 1.65; }
.famio-qr-close {
	background: rgba(255,255,255,.14) !important; color: #EAF2FA !important;
}
.famio-qr-close:hover { background: var(--famio-accent) !important; color: #fff !important; }
.famio-qr-stores a {
	color: #fff !important; white-space: nowrap;
	font-size: .7rem; padding: .45rem .4rem; line-height: 1.2;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
@media (max-width: 767px) {
	.famio-qr { inset-inline: .75rem; padding: .8rem 2.2rem .8rem .9rem; gap: .6rem; }
	.famio-qr-body b { font-size: .9rem; margin-bottom: .35rem; }
	.famio-qr-stores { gap: .4rem; }
	.famio-qr-stores a { font-size: .68rem; padding: .42rem .35rem; }
}

/* --- 32.4 · families page: tighter under the hero on phones --------- */
@media (max-width: 767px) {
	.famio-ph10 + .famio-section, .famio-ph10 + .famio-video { padding-top: 1.25rem !important; }
	.famio-ph10 + .famio-video .famio-video-stage { padding-block: 5.25rem 1.25rem !important; }
}

/* --- 32.5 · MOBILE SCROLL BUDGET
   The stutter is compositing cost, not JavaScript: a dozen elements were
   asking for their own layer (will-change) while animating a drop-shadow
   or a blur, and every one of those repaints on each scroll frame. On
   phones the decorative layers stand still and the shadows go flat. --- */
@media (max-width: 767px) {
	.famio-leaf { animation: none !important; opacity: .22 !important; }
	.famio-leaf img { filter: none !important; }
	.famio-ph-blob { animation: none !important; }
	.famio-orbit-item { will-change: auto !important; }
	.famio-orbit-item img { filter: drop-shadow(0 10px 14px rgba(0,0,0,.4)) !important; }
	.famio-word { will-change: auto !important; }
	.famio-cf-card .famio-dish-plate img { filter: none !important; }
	.famio-cf-card .famio-dish-device {
		box-shadow: 0 16px 28px -14px rgba(0,0,0,.7) !important;
	}
	.famio-join-halo { animation: none !important; filter: none !important; }
	.famio-join-appshot { filter: drop-shadow(0 18px 26px rgba(4,24,48,.4)) !important; }
	.famio-dish-ring { animation: none !important; }
	.famio-ph10::before { opacity: .5; }
	.famio-getapp-phone, .famio-getapp-phone-back, .famio-getapp-phone-front {
		filter: none !important;
	}
	.famio-pop { box-shadow: 0 8px 16px -10px rgba(13,61,124,.5) !important; }
}
/* NOTE: no transform is set here on the two devices — the journey phone's
   transform IS its scroll position, and overwriting it would freeze the
   descent. `will-change` on it already gives the compositor its own layer. */



/* =====================================================================
   ROUND 33 — August 2026
   ===================================================================== */

/* --- 33.1 · the docked card sits in the middle on phones ------------
   It was hugging the right edge because round 32 gave .famio-qr a fixed
   22rem width, and the mobile rule only set inset-inline. A fixed box
   with a definite width plus both inset sides is over-constrained, so
   the browser drops the end side — in RTL that is the LEFT one, and the
   card parked on the right. Giving it insets of 0, a real max width and
   auto inline margins centres it properly. */
@media (max-width: 767px) {
	.famio-qr {
		inset-inline: 0 !important;
		width: min(27rem, calc(100vw - 1.5rem)) !important;
		margin-inline: auto !important;
	}
}

/* --- 33.2 · the carousel arrows clear the whole card stack ----------
   Anchored to card width, so they stay just past the outermost visible
   card at every breakpoint instead of drifting with the viewport. */
.famio-cf-prev { inset-inline-end: max(.4rem, calc(50% - var(--famio-cf-card) * 1.78)) !important; }
.famio-cf-next { inset-inline-start: max(.4rem, calc(50% - var(--famio-cf-card) * 1.78)) !important; }
@media (max-width: 767px) {
	.famio-cf-prev { inset-inline-end: max(.25rem, calc(50% - var(--famio-cf-card) * 1.55)) !important; }
	.famio-cf-next { inset-inline-start: max(.25rem, calc(50% - var(--famio-cf-card) * 1.55)) !important; }
}

/* =====================================================================
   ROUND 34 — August 2026
   ===================================================================== */

/* --- 34.1 · THE HERO DEVICE FLIES INTO SECTION TWO ------------------
   Round 28 hid the drop inside the pinned stage because both sections
   clipped their own overflow, so a device that slid past the hero's
   bottom edge was simply cut away. The real fix is to stop clipping the
   VERTICAL axis: `overflow-x: clip` may sit next to `overflow-y:
   visible` (unlike hidden, clip does not force the other axis to auto),
   so the page keeps its horizontal-scroll defence while the device is
   free to travel out of the hero and over the section below it.
   The resting quarter-cut is now drawn with clip-path instead of the
   parent's overflow, so it can open up the moment the scroll starts. */
.famio-hero        { overflow-x: clip; overflow-y: visible; z-index: 6; }
.famio-orbit-stage { overflow-x: clip; overflow-y: visible; }
.famio-journey     { z-index: 1; }

.famio-hero-phone {
	/* centred without a transform, because the transform is now the
	   flight path and JS owns it end to end */
	left: auto; inset-inline: 0; margin-inline: auto;
	/* the base rule's translateX(-50%) would now double up on the auto
	   margins, so the resting transform is cleared: JS owns it entirely */
	transform: none;
	transform-origin: 50% 0;
	transition: opacity .18s linear;      /* never on transform: it would lag the scroll */
	z-index: 40;
	/* the resting cut, reopened over the first fifth of the drop */
	clip-path: inset(-45% -45% calc(var(--famio-phone-w) * .517 * max(0, 1 - var(--famio-hp, 0) * 12)) -45%);
}
/* the section-two device no longer flies in on its own — the hero one
   lands exactly on it and the two swap with nothing to see */
.famio-journey-phone { transform: none; }
.famio-js .famio-journey-phone { opacity: 0; }
.elementor-editor-active .famio-hero-phone,
body.elementor-editor-preview .famio-hero-phone { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
	.famio-hero-phone { clip-path: none !important; }
	.famio-js .famio-journey-phone { opacity: 1 !important; }
}

/* the dishes must stay ABOVE the device now that it outranks the whole
   section, or the plate that lands on the screen would slide behind it */
.famio-orbit-track { z-index: 41; }
/* ROUND 44 — the hero screen stays the plain white plate the orbiting
   dish lands on. The skeleton app-UI overlay was removed: the user
   found the fading-in search bar / banner / rows distracting and the
   dish landing on a clean plate is the whole intended effect. */
.famio-hero-phone .famio-screen-plate,
.famio-hero-phone .famio-screen-brand,
.famio-hero-phone .famio-screen-dots { position: relative; z-index: 2; }

/* --- 34.2 · DISH SLIDER — an arc of dishes, not a row of phones -----
   Same coverflow ring (fractional pos folded onto the shortest way
   round, so the loop needs no clones); only the card changed, plus a
   vertical rake so the set reads as a circle rather than a shelf. */
.famio-cf { --famio-cf-card: clamp(9.5rem, 18vw, 14rem); }
.famio-cf-frame { padding-block: 2.5rem 1.25rem; }
.famio-cf-stage { height: calc(var(--famio-cf-card) * 1.5); }

.famio-arc {
	position: relative;
	display: flex; flex-direction: column; align-items: center; gap: .5rem;
	text-align: center;
	padding: 1.5rem .9rem 1.15rem;
	border-radius: 1.6rem;
	background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), 0 30px 54px -26px rgba(0,0,0,.8);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: box-shadow .45s ease;
}
.famio-cf-card.is-active .famio-arc {
	box-shadow: inset 0 0 0 1px rgba(53,200,120,.55),
	            0 38px 66px -26px rgba(0,0,0,.85),
	            0 0 40px -10px rgba(53,200,120,.35);
}
.famio-arc-plate {
	position: relative; width: 82%; aspect-ratio: 1;
	display: grid; place-items: center;
}
.famio-arc-plate::before {
	content: ""; position: absolute; inset: 5%; border-radius: 50%;
	background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.92), rgba(226,243,233,.6) 58%, rgba(255,255,255,.14) 100%);
	box-shadow: 0 20px 34px -18px rgba(0,0,0,.7);
}
.famio-arc-ring {
	position: absolute; inset: -4%; border-radius: 50%;
	border: 1px dashed rgba(255,255,255,.35);
	opacity: 0; transition: opacity .4s ease;
}
.famio-cf-card.is-active .famio-arc-ring { opacity: 1; animation: famio-ringspin 22s linear infinite; }
.famio-arc-plate img {
	position: relative; z-index: 1;
	width: 86%; height: 86%; object-fit: contain; display: block;
	filter: drop-shadow(0 14px 20px rgba(0,0,0,.45));
}
.famio-arc-tag {
	position: absolute; z-index: 2; top: .7rem; inset-inline-end: .7rem;
	background: var(--famio-gradient-accent); color: #fff;
	font-size: .6875rem; font-weight: 800; border-radius: 999px;
	padding: .2rem .6rem;
	box-shadow: 0 8px 16px -8px rgba(31,166,91,.9);
}
.famio-arc-name {
	margin: .35rem 0 0;
	font-family: var(--famio-font-display); font-size: 1rem; font-weight: 700;
	color: #fff; line-height: 1.4;
}
.famio-arc-meta { font-size: .75rem; color: rgba(232,241,248,.62); }

/* the slide counter, under the arc */
/* the arrows clear the outermost VISIBLE card (two steps out), not the
   frame edge — round 33's numbers were tuned to the old phone card */
.famio-cf-prev { inset-inline-end: max(.4rem, calc(50% - var(--famio-cf-card) * 2.05)) !important; }
.famio-cf-next { inset-inline-start: max(.4rem, calc(50% - var(--famio-cf-card) * 2.05)) !important; }
.famio-cf-nav { background: rgba(255,255,255,.16); }

.famio-cf-count {
	display: flex; align-items: baseline; justify-content: center; gap: .35rem;
	margin-top: .25rem; color: #fff;
	font-family: var(--famio-font-display); direction: ltr;
}
.famio-cf-count b { font-size: 2rem; font-weight: 700; line-height: 1; }
.famio-cf-count span { font-size: .8rem; color: rgba(232,241,248,.55); }
.famio-cf-dots { margin-top: 1rem; }

@media (max-width: 767px) {
	.famio-cf { --famio-cf-card: clamp(8.5rem, 38vw, 11rem); }
	.famio-cf-frame { padding-block: 1.75rem 1rem; }
	/* there is no room beside the cards on a phone, so the arrows come
	   down and flank the counter instead of sitting on top of a card */
	.famio-cf-shell { position: static; }
	.famio-cf-nav { top: auto; bottom: 1.5rem; transform: none; width: 2.4rem; height: 2.4rem; }
	.famio-cf-prev { inset-inline-end: calc(50% + 4.9rem) !important; }
	.famio-cf-next { inset-inline-start: calc(50% + 4.9rem) !important; }
	.famio-arc { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.10); }
	.famio-arc-plate img { filter: none; }
	.famio-arc-name { font-size: .9rem; }
	.famio-cf-count b { font-size: 1.6rem; }
}

/* --- 34.3 · GET THE APP — the reference block -----------------------
   Copy on the right, one tilted device on the left dipping into the
   wave, two black store pills. The wave is still the same gradient
   object as the footer, masked — so the seam can never show. */
.famio-getapp {
	background:
		radial-gradient(64% 50% at 88% 6%, rgba(31,166,91,.10), transparent 68%),
		radial-gradient(58% 48% at 6% 24%, rgba(13,61,124,.10), transparent 70%),
		linear-gradient(180deg, #FFFFFF 0%, #EEF4FF 100%);
	padding-block: 5rem 10rem;
}
.famio-getapp-inner {
	grid-template-columns: minmax(0,1fr);
	justify-items: center; text-align: center; gap: 2.5rem;
}
.famio-getapp-copy { position: relative; z-index: 3; max-width: 34rem; }
.famio-getapp-title {
	font-family: var(--famio-font-display); font-weight: 700;
	font-size: clamp(1.85rem, 4.6vw, 3.15rem); line-height: 1.24;
	color: var(--famio-primary); margin: 0 0 .9rem;
}
.famio-getapp-title .famio-hl { color: var(--famio-accent); }
.famio-getapp-sub {
	margin: 0 0 2.1rem; color: var(--famio-muted-fg);
	font-size: 1.0625rem; line-height: 1.9;
}
.famio-getapp-actions { justify-content: center; gap: .9rem; }
.famio-getapp .famio-store {
	flex: 0 1 12rem; max-width: 13rem; gap: .75rem;
	background: #0B1220 !important; color: #fff !important;
	border-radius: 1rem; padding: .8rem 1.35rem;
	box-shadow: 0 18px 34px -18px rgba(6,12,24,.7);
}
.famio-getapp .famio-store:hover { background: #151F33 !important; filter: none; }
.famio-getapp .famio-store-text b { font-size: 1rem; }
.famio-getapp .famio-store-text span { font-size: .74rem; }

.famio-getapp-phones {
	position: relative; z-index: 3;
	width: min(15rem, 66%); min-height: 0; margin-bottom: -4.5rem;
}
.famio-getapp-phone { position: relative; width: 100%; display: block; }
.famio-getapp-phone-front {
	inset-inline-start: auto; top: auto;
	transform: rotate(-6deg);
	filter: drop-shadow(0 34px 52px rgba(9,25,48,.42));
	transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.famio-getapp-phone-front:hover { transform: rotate(-3deg) translateY(-10px); }

/* the wave: high under the device, sweeping down under the copy */
.famio-getapp-wave {
	height: 9rem; bottom: -1px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V30c210 8 372 44 648 62 252 16 508 6 792-26v74z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V30c210 8 372 44 648 62 252 16 508 6 792-26v74z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
@media (min-width: 900px) {
	.famio-getapp-inner {
		grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
		align-items: center; justify-items: stretch; text-align: right; gap: 3rem;
	}
	.famio-getapp-copy   { order: 1; justify-self: start; }
	.famio-getapp-phones { order: 2; justify-self: center; width: min(16rem, 100%); min-height: 0; margin-bottom: -5.5rem; }
	.famio-getapp-actions { justify-content: flex-start; }
}
@media (max-width: 767px) {
	.famio-getapp { padding-block: 3.5rem 8.5rem; }
	.famio-getapp-wave { height: 5.5rem; }
	.famio-getapp-phones { width: min(12.5rem, 58%); min-height: 0; margin-bottom: -3rem; }
	.famio-getapp-sub { font-size: .95rem; margin-bottom: 1.6rem; }
	.famio-getapp-actions { gap: .4rem; }
	.famio-getapp .famio-store { flex: 0 1 8.6rem; max-width: 9rem; padding: .6rem .6rem; gap: .45rem; }
	.famio-getapp .famio-store-text b { font-size: .9rem; }
	.famio-getapp .famio-store-text span { font-size: .68rem; }
	.famio-getapp .famio-store .famio-store-icon { width: 1.6rem; height: 1.6rem; }
	.famio-getapp .famio-store .famio-store-icon svg { width: 1.35rem; height: 1.35rem; }
	.famio-getapp-phone-front { filter: drop-shadow(0 18px 26px rgba(9,25,48,.35)); }
}

/* --- 34.4 · FOOTER — the reference distribution ---------------------
   Newsletter first (the right end in RTL), then the two link columns,
   then the brand block at the left end. The menu itself is untouched:
   the same four links, only the arrangement around them changed. */
.famio-footer { padding-block: 3.25rem 0; }
.famio-footer-sub h4 {
	font-family: var(--famio-font-display); font-size: 1.0625rem; font-weight: 700;
	color: #fff; margin: 0 0 .65rem;
}
.famio-footer-sub p { margin: 0 0 1rem; font-size: .85rem; color: rgba(232,241,248,.7); line-height: 1.8; }
.famio-subform {
	display: flex; align-items: center; gap: .4rem;
	background: rgba(255,255,255,.08); border-radius: 999px;
	padding: .3rem .35rem;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.famio-subform input {
	flex: 1 1 auto; min-width: 0;
	background: transparent; border: 0; outline: 0; color: #fff;
	font-family: inherit; font-size: .85rem; padding: .55rem .9rem;
}
.famio-subform input::placeholder { color: rgba(232,241,248,.5); }
.famio-subform button {
	flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 999px;
	padding: .55rem 1.15rem; font-family: inherit; font-weight: 800; font-size: .82rem;
	color: #fff; background: var(--famio-gradient-accent);
	box-shadow: 0 10px 20px -10px rgba(31,166,91,.9);
	transition: var(--famio-transition);
}
.famio-subform button:hover { transform: translateY(-2px); }
.famio-subnote { margin: .6rem 0 0; font-size: .78rem; color: var(--famio-accent-glow); min-height: 1rem; }
.famio-footer-brand img { height: 2.2rem; }
.famio-footer-brand p { max-width: 24rem; line-height: 1.9; }
.famio-footer-bar {
	margin-top: 2.75rem; flex-direction: row-reverse; justify-content: space-between;
}
.famio-footer-bar .famio-socials { max-width: none; gap: .5rem; }
.famio-footer-bar .famio-socials a { width: 2.1rem; height: 2.1rem; }
.famio-footer-bar .famio-socials svg { width: .95rem; height: .95rem; }
.famio-footer-copy { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
@media (min-width: 1024px) {
	.famio-footer-grid { grid-template-columns: 1.15fr .7fr 1fr 1.2fr; gap: 2.5rem; }
}
@media (max-width: 767px) {
	.famio-footer-bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.famio-footer-copy { flex-direction: column; gap: .35rem; }
}

/* =====================================================================
   ROUND 35 — August 2026
   ===================================================================== */

/* --- 35.1 · DISH RING — a real 3D cylinder --------------------------
   The frame owns the perspective, the stage is the cylinder and only it
   rotates; each card is bolted to the wall with a static
   rotateY(i·step) translateZ(R). Depth sorting is the browser's job
   from here, and the loop closes on itself with nothing to fake. */
.famio-cf-frame {
	perspective: 1500px;
	perspective-origin: 50% 45%;
	padding-block: 3rem 1.25rem;
	overflow: hidden;
}
.famio-cf-stage {
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
}
.famio-cf-card {
	position: absolute; left: 50%; top: 0;
	width: var(--famio-cf-card);
	backface-visibility: hidden;
	transition: opacity .25s linear;
	will-change: opacity;
}

/* --- 35.2 · the card reads light on the dark section ---------------- */
.famio-arc {
	background: linear-gradient(180deg, #FFFFFF 0%, #F1F7F3 100%);
	box-shadow: 0 24px 44px -22px rgba(3,30,22,.6), inset 0 0 0 1px rgba(13,61,124,.06);
	-webkit-backdrop-filter: none; backdrop-filter: none;
	padding: 1.35rem .9rem 1.1rem;
}
.famio-cf-card.is-active .famio-arc {
	box-shadow: 0 34px 62px -22px rgba(3,30,22,.72), inset 0 0 0 1px rgba(31,166,91,.35);
}
.famio-arc-plate::before {
	background: radial-gradient(circle at 50% 34%, #F4F9F6 0%, #E6F1EA 62%, rgba(230,241,234,.35) 100%);
	box-shadow: inset 0 0 0 1px rgba(13,61,124,.05);
}
.famio-arc-plate img { filter: drop-shadow(0 12px 18px rgba(13,61,124,.28)); }
.famio-arc-ring { border-color: rgba(31,166,91,.4); }
.famio-arc-name { color: var(--famio-primary); }
.famio-arc-meta { color: var(--famio-muted-fg); }

@media (max-width: 767px) {
	.famio-cf { --famio-cf-card: clamp(8.5rem, 44vw, 11.5rem); }
	.famio-cf-frame { perspective: 900px; padding-block: 2rem 1rem; }
	.famio-arc { box-shadow: 0 14px 24px -14px rgba(3,30,22,.6), inset 0 0 0 1px rgba(13,61,124,.06); }
	.famio-arc-plate img { filter: none; }
}

/* --- 35.3 · APP DOWNLOAD — one composition with the footer ----------
   No card, no container, no gradient behind it: the block sits on the
   page's own background and the only thing separating it from the
   footer is a single soft curve. The device is deliberately layered
   BELOW that curve, so its lower quarter is inside the dark shape and
   it reads as growing out of the footer rather than sitting on it. */
.famio-getapp {
	background: var(--famio-bg) !important;
	padding-block: 9.5rem 15rem;
}
.famio-getapp-inner { gap: 3rem; }
.famio-getapp-copy { position: relative; z-index: 3; }
.famio-getapp-sub { margin-bottom: 2.25rem; }

/* the device — big, flat, and completely free of light effects */
.famio-getapp-phones {
	position: relative; z-index: 1;
	width: min(17rem, 74%); min-height: 0;
	margin-bottom: -11rem;
}
.famio-getapp-phone-front {
	transform: rotate(-4deg);
	filter: none !important;
}
.famio-getapp-phone-front:hover { transform: rotate(-4deg); }
.famio-getapp .famio-device {
	box-shadow: none !important;
	filter: none !important;
}
.famio-getapp .famio-getapp-phone,
.famio-getapp .famio-getapp-phone * { text-shadow: none; }

/* one long, quiet curve: highest over the device, easing down to the
   far side. Same gradient object as the footer, so no seam can appear */
.famio-getapp-wave {
	z-index: 4; height: 15rem; bottom: -1px; pointer-events: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V78C120 48 300 36 520 52 800 72 1120 108 1440 132V200Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V78C120 48 300 36 520 52 800 72 1120 108 1440 132V200Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

@media (min-width: 900px) {
	.famio-getapp-inner {
		grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
		align-items: center; gap: 4rem;
	}
	/* device on the LEFT — second column in an RTL grid */
	.famio-getapp-copy   { order: 1; justify-self: start; }
	.famio-getapp-phones {
		order: 2; justify-self: center;
		width: min(20rem, 100%); margin-bottom: -13rem;
	}
}
@media (max-width: 899px) {
	/* a real vertical stack, not a shrunken desktop: message first,
	   then the buttons, then the device growing into the footer */
	.famio-getapp { padding-block: 4rem 13rem; }
	.famio-getapp-inner { gap: 2.25rem; }
	.famio-getapp-copy   { order: 1; }
	.famio-getapp-phones { order: 2; width: min(15.5rem, 68%); margin-bottom: -11.5rem; }
	/* the curve flattens on a phone: the device stands in the middle, so
	   the crest has to run across most of the width for the same quarter
	   of it to sit inside the dark */
	.famio-getapp-wave {
		height: 13rem;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V58C300 26 700 28 1010 56 1190 72 1330 90 1440 106V200Z' fill='%23000'/%3E%3C/svg%3E");
		        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V58C300 26 700 28 1010 56 1190 72 1330 90 1440 106V200Z' fill='%23000'/%3E%3C/svg%3E");
	}
}
@media (max-width: 767px) {
	.famio-getapp { padding-block: 3.25rem 12rem; }
	.famio-getapp-phones { width: min(14.5rem, 64%); margin-bottom: -10.5rem; }
	.famio-getapp-wave { height: 12rem; }
}

/* --- 35.4 · FOOTER — kept plain, and it starts clear of the device -- */
.famio-footer { padding-block: 3rem 0; }
@media (min-width: 1024px) {
	.famio-footer-grid { grid-template-columns: .8fr 1.1fr 1.4fr; gap: 3rem; }
}
@media (max-width: 767px) { .famio-footer { padding-block: 3.5rem 0; } }

/* =====================================================================
   ROUND 36 — August 2026 · the app tour before the footer
   ===================================================================== */

/* The section is a long rail with a pinned stage inside it. Nothing on
   screen moves while you scroll through it — only the strip of app
   screens inside each phone slides up, so the page scroll reads as a
   scroll INSIDE the app. */
.famio-getapp {
	background: #FBFCFE !important;
	padding: 0 !important;
}
.famio-tour-rail { position: relative; height: 300vh; }
.famio-tour-stage {
	position: sticky; top: 0;
	height: 100svh; min-height: 34rem;
	display: grid; place-items: center;
	/* the site header is sticky over the top of this box, so the row is
	   nudged down out from under it */
	padding-top: 4rem;
}
.famio-tour-grid {
	position: relative; z-index: 2;
	display: grid; gap: 2.5rem;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center; align-items: center;
	width: 100%;
}

/* --- the devices: flat, sharp, no light effects of any kind --------- */
.famio-tour-phone { position: relative; z-index: 1; width: min(15rem, 76%); }
.famio-tour-phone .famio-device {
	width: 100%;
	box-shadow: none !important;
	filter: none !important;
	background: #101A2B;
	padding: .38rem;
	border-radius: 2.4rem;
}
.famio-tour-screen {
	position: relative; overflow: hidden;
	border-radius: 2.1rem; background: var(--famio-cream);
	display: block;
}
.famio-tour-reel {
	position: absolute; inset: 0;
	height: 400%;
	display: grid; grid-template-rows: repeat(4, 25%);
	transform: translate3d(0, calc(var(--famio-tp, 0) * -75%), 0);
	will-change: transform;
}

/* --- one app screen ------------------------------------------------- */
.famio-tour-panel {
	direction: rtl;
	padding: 2.6rem .75rem 1rem;
	display: grid; gap: .5rem; align-content: start;
	background: var(--famio-cream);
	border-bottom: 1px solid rgba(13,61,124,.06);
}
.famio-tour-bar {
	display: flex; align-items: center; justify-content: space-between;
	font-size: .62rem; font-weight: 800; color: var(--famio-primary);
}
.famio-tour-bar i {
	width: 1.3rem; height: 1.3rem; border-radius: .45rem;
	background: var(--famio-gradient-accent); display: block;
}
.famio-tour-hero {
	border-radius: .9rem; padding: .85rem .7rem;
	min-height: 3.6rem;
	display: flex; align-items: flex-end;
	font-size: .62rem; font-weight: 800; color: #fff; line-height: 1.5;
	background: var(--famio-gradient-accent);
}
.famio-tour-hero.is-blue { background: var(--famio-gradient-primary); }
.famio-tour-chips { display: flex; gap: .3rem; }
.famio-tour-chips i {
	flex: 1; height: 1.05rem; border-radius: 999px; background: #fff; display: block;
	box-shadow: inset 0 0 0 1px rgba(13,61,124,.07);
}
.famio-tour-chips i:first-child { background: var(--famio-primary); flex: 0 0 34%; }
.famio-tour-row {
	display: flex; align-items: center; gap: .5rem;
	background: #fff; border-radius: .75rem; padding: .45rem;
	box-shadow: inset 0 0 0 1px rgba(13,61,124,.06);
}
.famio-tour-row b {
	flex: 0 0 1.75rem; height: 1.75rem; border-radius: .5rem;
	background: var(--famio-muted); display: block;
}
.famio-tour-row span { flex: 1; display: grid; gap: .28rem; }
.famio-tour-row s {
	height: .32rem; border-radius: 999px; background: #E4EAF2;
	display: block; text-decoration: none;
}
.famio-tour-row s.famio-tour-short { width: 55%; }
.famio-tour-foot {
	margin-top: .2rem; border-radius: .75rem; padding: .5rem;
	text-align: center; font-size: .58rem; font-weight: 800; color: #fff;
	background: var(--famio-primary);
}

/* --- the centre column --------------------------------------------- */
.famio-tour-copy { max-width: 26rem; text-align: center; }
.famio-tour-eyebrow {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .35rem .9rem; border-radius: 999px;
	background: rgba(31,166,91,.10); color: #157A43;
	font-size: .78rem; font-weight: 700; margin-bottom: .9rem;
}
.famio-tour-copy .famio-getapp-title { margin-bottom: .75rem; }
.famio-tour-copy .famio-getapp-sub { margin-bottom: 1.75rem; }
.famio-tour-copy .famio-getapp-actions { justify-content: center; }

/* --- desktop: phone · copy · phone, staggered ----------------------- */
@media (min-width: 1024px) {
	.famio-tour-grid {
		grid-template-columns: minmax(0,1fr) minmax(0,1.02fr) minmax(0,1fr);
		gap: 2rem; align-items: center;
	}
	.famio-tour-phone { width: min(15.5rem, 100%); }
	/* the two devices sit off each other's level so the row never reads
	   as a rigid three-column grid */
	.famio-tour-phone-a { transform: translateY(-2.25rem); }
	.famio-tour-phone-b { transform: translateY(2.25rem); }
	.famio-tour-copy { max-width: 100%; }
}
@media (min-width: 1280px) {
	.famio-tour-phone { width: min(17rem, 100%); }
}

/* --- mobile: one device, real vertical stack ------------------------ */
@media (max-width: 1023px) {
	.famio-tour-rail { height: 260vh; }
	.famio-tour-grid { gap: 1.75rem; }
	.famio-tour-phone-b { display: none; }
	.famio-tour-copy { order: 1; }
	.famio-tour-phone-a { order: 2; width: min(13.5rem, 62%); }
	.famio-tour-copy .famio-getapp-sub { margin-bottom: 1.25rem; }
}
@media (max-width: 767px) {
	/* everything has to fit inside one pinned viewport, headline included,
	   or the device runs off the bottom of the screen while pinned */
	.famio-tour-rail { height: 240vh; }
	.famio-tour-stage { min-height: 30rem; padding-top: 2rem; }
	.famio-tour-grid { gap: 1.25rem; }
	.famio-tour-eyebrow { margin-bottom: .6rem; font-size: .72rem; }
	.famio-tour-copy .famio-getapp-title { font-size: 1.5rem; margin-bottom: .5rem; }
	.famio-tour-copy .famio-getapp-sub { font-size: .9rem; line-height: 1.75; margin-bottom: 1rem; }
	.famio-tour-phone-a { width: min(13rem, 56%); }
}

/* --- the hand-off to the footer ------------------------------------ */
.famio-getapp-wave { height: 12rem; }
@media (max-width: 899px) { .famio-getapp-wave { height: 9rem; } }
@media (max-width: 767px) { .famio-getapp-wave { height: 8rem; } }

@media (prefers-reduced-motion: reduce) {
	.famio-tour-rail { height: auto !important; }
	.famio-tour-stage { position: static !important; height: auto !important; padding-block: 5rem 8rem; }
	.famio-tour-reel { transform: none !important; }
}
.elementor-editor-active .famio-tour-rail,
body.elementor-editor-preview .famio-tour-rail { height: auto !important; }
.elementor-editor-active .famio-tour-stage,
body.elementor-editor-preview .famio-tour-stage { position: static !important; height: auto !important; padding-block: 5rem 8rem; }

/* --- 36b · the panel fills the screen like a real app view ---------- */
.famio-tour-panel { display: flex; flex-direction: column; }
.famio-tour-list { flex: 1 1 auto; display: grid; gap: .5rem; align-content: start; }
.famio-tour-foot { margin-top: .5rem; }

/* --- 36c · the centre column keeps its place and its button row -----
   .famio-getapp-copy still carries round 35's `order: 1`, which threw
   the text to the far end of the row instead of between the devices. */
@media (min-width: 1024px) {
	.famio-tour-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr); }
	.famio-tour-copy.famio-getapp-copy {
		order: 0; justify-self: center; text-align: center;
	}
	.famio-tour-copy .famio-getapp-actions { justify-content: center; }
}

/* =====================================================================
   ROUND 37 — the tour takes the reference composition
   ===================================================================== */

/* a very light neutral ground with the faintest sweep of lines — the
   pattern has to be felt rather than seen, so it is one flat SVG at 7%
   stroke opacity and nothing else */
.famio-getapp { background: #F4F4F6 !important; }
.famio-getapp::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%230D3D7C' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M-60 900C180 640 520 470 1500 300'/%3E%3Cpath d='M-60 900C220 620 600 430 1500 210'/%3E%3Cpath d='M-60 900C260 600 680 390 1500 120'/%3E%3Cpath d='M-60 900C300 580 760 350 1500 30'/%3E%3Cpath d='M-60 780C240 540 640 340 1500 60'/%3E%3Cpath d='M-60 660C280 460 700 280 1500 -20'/%3E%3C/g%3E%3C/svg%3E");
	background-size: cover; background-position: center top;
	opacity: .8;
}

/* dark navy store buttons, per the reference */
.famio-getapp .famio-store {
	background: #0E203D !important;
	box-shadow: none;
}
.famio-getapp .famio-store:hover { background: #16304F !important; }

/* the devices sit closer to the edges than a normal container allows */
.famio-tour-stage > .famio-container { max-width: 88rem; }
@media (min-width: 1024px) {
	.famio-tour-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.1fr); gap: 1.5rem; }
	.famio-tour-phone { width: min(16.5rem, 100%); }
}
@media (min-width: 1280px) { .famio-tour-phone { width: min(18rem, 100%); } }

/* --- 37b · the app screens read as real product UI ------------------ */
.famio-tour-body { flex: 1 1 auto; display: grid; gap: .5rem; align-content: space-between; }
.famio-tour-pill {
	justify-self: start; font-size: .6rem; font-weight: 800;
	padding: .26rem .68rem; border-radius: 999px;
	background: rgba(31,166,91,.14); color: #157A43;
}
.famio-tour-big {
	display: grid; gap: .15rem; border-radius: .85rem; padding: .6rem .65rem;
	background: #fff; box-shadow: inset 0 0 0 1px rgba(13,61,124,.07);
}
.famio-tour-big b {
	font-size: 1.35rem; font-weight: 800; color: var(--famio-primary);
	line-height: 1.1; text-align: right;
}
.famio-tour-big span { font-size: .56rem; color: var(--famio-muted-fg); line-height: 1.4; }
.famio-tour-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.famio-tour-duo .famio-tour-big b { font-size: 1.15rem; }
.famio-tour-prog { height: .35rem; border-radius: 999px; background: #E4EAF2; overflow: hidden; }
.famio-tour-prog i { display: block; height: 100%; width: 62%; border-radius: 999px; background: var(--famio-gradient-accent); }
.famio-tour-steps { display: grid; gap: .38rem; }
.famio-tour-step {
	display: flex; align-items: center; gap: .45rem;
	font-size: .6rem; color: var(--famio-muted-fg);
}
.famio-tour-step u {
	text-decoration: none; flex: 0 0 .9rem; height: .9rem; border-radius: 50%;
	background: #E4EAF2; box-shadow: inset 0 0 0 1px rgba(13,61,124,.08);
}
.famio-tour-step.is-done { color: var(--famio-primary); font-weight: 800; }
.famio-tour-step.is-done u { background: var(--famio-accent); box-shadow: none; }
.famio-tour-item {
	display: flex; align-items: center; gap: .45rem;
	background: #fff; border-radius: .7rem; padding: .38rem;
	box-shadow: inset 0 0 0 1px rgba(13,61,124,.06);
}
.famio-tour-item b { flex: 0 0 1.7rem; height: 1.7rem; border-radius: .45rem; background: var(--famio-muted); }
.famio-tour-item span { flex: 1; font-size: .6rem; font-weight: 800; color: var(--famio-primary); }
.famio-tour-item em { font-style: normal; font-size: .57rem; font-weight: 800; color: var(--famio-accent); }
.famio-tour-bars { display: flex; align-items: flex-end; gap: .28rem; height: 3rem; }
.famio-tour-bars i { flex: 1; border-radius: .3rem .3rem .12rem .12rem; background: rgba(13,61,124,.14); display: block; }
.famio-tour-bars i.is-hi { background: var(--famio-gradient-accent); }
.famio-tour-stars { display: flex; gap: .2rem; font-size: .78rem; color: var(--famio-accent); letter-spacing: .05em; }
.famio-tour-note {
	font-size: .58rem; line-height: 1.75; color: var(--famio-muted-fg);
	background: #fff; border-radius: .7rem; padding: .45rem .5rem;
	box-shadow: inset 0 0 0 1px rgba(13,61,124,.06);
}
.famio-tour-courier {
	display: flex; align-items: center; gap: .5rem;
	background: #fff; border-radius: .8rem; padding: .45rem;
	box-shadow: inset 0 0 0 1px rgba(13,61,124,.06);
}
.famio-tour-courier b { flex: 0 0 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--famio-gradient-primary); }
.famio-tour-courier span { flex: 1; display: grid; gap: .12rem; }
.famio-tour-courier span i { font-style: normal; font-size: .62rem; font-weight: 800; color: var(--famio-primary); }
.famio-tour-courier span em { font-style: normal; font-size: .53rem; color: var(--famio-muted-fg); }

/* =====================================================================
   ROUND 38 — the devices move into a brand card
   ===================================================================== */

/* Copy on the right, and on the left one gradient card that CROPS two
   devices: one dropping in from the top, one rising from the bottom.
   The ratio matters: the device has to be about 15% taller than the
   card, or it either escapes uncropped or fills the card edge to edge
   and stops reading as a device standing inside a frame. */
.famio-tour-card {
	position: relative; width: 100%; max-width: 48rem; overflow: hidden;
	border-radius: 2rem; aspect-ratio: 5 / 3;
	background: linear-gradient(150deg, #1A5AA8 0%, #0D3D7C 46%, #082A52 100%);
}
.famio-tour-card-sheen {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(58% 46% at 20% 8%, rgba(255,255,255,.15), transparent 70%),
		radial-gradient(54% 42% at 88% 94%, rgba(31,166,91,.22), transparent 72%);
}

.famio-tour-phone { position: absolute; z-index: 2; display: block; width: 33%; }
/* the parallax: they close on each other through the section, one
   dropping in from above and one rising from below */
.famio-tour-phone-a {
	inset-inline-start: 8%; inset-inline-end: auto;
	top: -16%; bottom: auto;
	transform: translateY(calc(var(--famio-tp, 0) * 2rem));
}
.famio-tour-phone-b {
	inset-inline-end: 8%; inset-inline-start: auto;
	bottom: -16%; top: auto;
	transform: translateY(calc(var(--famio-tp, 0) * -2rem));
}

@media (min-width: 1024px) {
	.famio-tour-grid {
		grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
		gap: 3rem; align-items: center;
	}
	.famio-tour-copy.famio-getapp-copy {
		order: 0; justify-self: start; text-align: right; max-width: 30rem;
	}
	.famio-tour-copy .famio-getapp-actions { justify-content: flex-start; }
	.famio-tour-card { justify-self: center; }
}
@media (max-width: 1023px) {
	.famio-tour-card { max-width: 32rem; aspect-ratio: 4 / 3; }
	.famio-tour-phone { width: 44%; }
	.famio-tour-phone-a { inset-inline-start: 4%; top: -16%; }
	.famio-tour-phone-b { inset-inline-end: 4%; bottom: -16%; }
}
@media (max-width: 767px) {
	/* the app UI inside is sized in rem and does not rescale with the
	   frame, so the device is kept near 200px wide here rather than
	   shrunk to keep the desktop proportions */
	.famio-tour-card { border-radius: 1.5rem; aspect-ratio: 1 / 1.15; }
	.famio-tour-phone { width: 56%; }
	.famio-tour-phone-a { inset-inline-start: 1%; top: -12%; transform: translateY(calc(var(--famio-tp, 0) * 1.4rem)); }
	.famio-tour-phone-b { inset-inline-end: 1%; bottom: -12%; transform: translateY(calc(var(--famio-tp, 0) * -1.4rem)); }
}

/* =====================================================================
   ROUND 39 — the app UI scales with the device
   ===================================================================== */

/* Every size inside the phone used to be in rem, tuned for a 288px
   frame, so the moment the device changed width the UI inside was
   either oversized or tiny. The frame is now a container and everything
   inside is expressed against its width: 1em = 5.5556cqw, which is
   exactly 16px at 288px. Change the device width freely from here on. */
.famio-tour-phone { container-type: inline-size; }
.famio-tour-phone .famio-device { padding: 2.11cqw; border-radius: 13.33cqw; }
.famio-tour-phone .famio-tour-screen { border-radius: 11.67cqw; }
.famio-tour-phone .famio-device-notch { top: 4.17cqw; height: 7.78cqw; width: 34%; }

.famio-tour-panel { font-size: 5.5556cqw; padding: 2.6em .75em 1em; }
.famio-tour-body { gap: .5em; }
.famio-tour-list { gap: .45em; }

.famio-tour-bar { font-size: .62em; }
.famio-tour-bar i { width: 1.3em; height: 1.3em; border-radius: .45em; }

.famio-tour-hero {
	font-size: .62em; border-radius: 1.45em; padding: 1.37em 1.13em; min-height: 5.8em;
}
.famio-tour-chips { gap: .3em; }
.famio-tour-chips i { height: 1.05em; }

.famio-tour-row { gap: .5em; border-radius: .75em; padding: .45em; }
.famio-tour-row b { flex: 0 0 1.75em; height: 1.75em; border-radius: .5em; }
.famio-tour-row span { gap: .28em; }
.famio-tour-row s { height: .32em; }

.famio-tour-foot {
	font-size: .58em; border-radius: 1.29em; padding: .86em; margin-top: .86em;
}

.famio-tour-pill { font-size: .6em; padding: .43em 1.13em; }
.famio-tour-big { gap: .15em; border-radius: .85em; padding: .6em .65em; }
.famio-tour-big b { font-size: 1.35em; }
.famio-tour-big span { font-size: .56em; }
.famio-tour-duo { gap: .4em; }
.famio-tour-duo .famio-tour-big b { font-size: 1.15em; }
.famio-tour-prog { height: .35em; }
.famio-tour-steps { gap: .38em; }
.famio-tour-step { gap: .45em; font-size: .6em; }
.famio-tour-step u { flex: 0 0 1.5em; height: 1.5em; }
.famio-tour-item { gap: .45em; border-radius: .7em; padding: .38em; }
.famio-tour-item b { flex: 0 0 1.7em; height: 1.7em; border-radius: .45em; }
.famio-tour-item span { font-size: .6em; }
.famio-tour-item em { font-size: .57em; }
.famio-tour-bars { gap: .28em; height: 3em; }
.famio-tour-stars { gap: .2em; font-size: .78em; }
.famio-tour-note { font-size: .58em; border-radius: 1.21em; padding: .78em .86em; }
.famio-tour-courier { gap: .5em; border-radius: .8em; padding: .45em; }
.famio-tour-courier b { flex: 0 0 1.9em; height: 1.9em; }
.famio-tour-courier span { gap: .12em; }
.famio-tour-courier span i { font-size: .62em; }
.famio-tour-courier span em { font-size: .53em; }

/* --- 39b · with the UI free to scale, the card can use tidy ratios --- */
@media (max-width: 1023px) {
	/* text first, then the card — the copy still carries round 35's
	   `order: 1`, which would otherwise push it below the devices */
	.famio-tour-copy.famio-getapp-copy { order: 0; }
	.famio-tour-card { order: 1; }
}
@media (max-width: 767px) {
	.famio-tour-card { aspect-ratio: 1 / 1.02; }
	.famio-tour-phone { width: 46%; }
	.famio-tour-phone-a { inset-inline-start: 3%; top: -13%; }
	.famio-tour-phone-b { inset-inline-end: 3%; bottom: -13%; }
}

/* --- 39c · the card's own max-width was being beaten -----------------
   §1c has `[class^="famio-"][class*="-grid"] > * { max-width: 100% }`,
   which is (0,2,0) and outranks a bare `.famio-tour-card`. The card is
   a direct child of .famio-tour-grid, so its cap never applied and it
   stretched to the whole column on tablets. Matching through the
   parent puts it back on equal footing, later in the sheet. */
.famio-tour-grid > .famio-tour-card { max-width: 48rem; }
@media (max-width: 1023px) { .famio-tour-grid > .famio-tour-card { max-width: 32rem; } }

/* =====================================================================
   ROUND 40 — compact card, devices fully contained
   ===================================================================== */

/* the line pattern is gone: plain ground, nothing behind the card */
.famio-getapp::before { display: none !important; }

/* The rule changed this round: the devices must stay WHOLLY inside the
   card, so the card can no longer be shorter than they are. That fixes
   its proportions — height = device height + the vertical offset
   between them + a margin at each end big enough to absorb the drift.
   The card itself is narrower than before to stay compact. */
.famio-tour-grid > .famio-tour-card { max-width: 30rem; }
.famio-tour-card { aspect-ratio: 1 / 1.15; }
.famio-tour-phone { width: 42%; }

/* left device sits high, right device sits low — and the drift is tiny:
   25px, always smaller than the 5% margin it has to move into, so
   neither can ever reach an edge. */
.famio-tour-phone-a {
	inset-inline-start: 3%; inset-inline-end: auto;
	top: auto; bottom: 8%;
	transform: translateY(calc(var(--famio-tp, 0) * 25px));
}
.famio-tour-phone-b {
	inset-inline-end: 3%; inset-inline-start: auto;
	top: 8%; bottom: auto;
	transform: translateY(calc((var(--famio-tp, 0) - 1) * 25px));
}

@media (max-width: 1023px) {
	.famio-tour-grid > .famio-tour-card { max-width: 28rem; }
	.famio-tour-phone-a { inset-inline-start: 3%; bottom: 8%; top: auto; }
	.famio-tour-phone-b { inset-inline-end: 3%; top: 8%; bottom: auto; }
}
@media (max-width: 767px) {
	.famio-tour-card { aspect-ratio: 1 / 1.3; }
	.famio-tour-phone { width: 44%; }
	.famio-tour-phone-a {
		inset-inline-start: 3%; bottom: 7%; top: auto;
		transform: translateY(calc(var(--famio-tp, 0) * 16px));
	}
	.famio-tour-phone-b {
		inset-inline-end: 3%; top: 7%; bottom: auto;
		transform: translateY(calc((var(--famio-tp, 0) - 1) * 16px));
	}
}

/* =====================================================================
   ROUND 40 — August 2026
   ===================================================================== */

/* the background lines are gone entirely */
.famio-getapp::before { display: none !important; }

/* --- 40.1 · a smaller card, and the devices stay INSIDE it -----------
   Round 38 let the devices overhang and cropped them. The brief now
   asks for the opposite: nothing may leave the card. So the card turns
   portrait (a landscape card can't hold two offset devices without
   cropping them), the devices are anchored a little in from the top and
   bottom edges, and the parallax range is small enough that even at the
   end of its travel each device is still clear of the edge. */
.famio-tour-grid > .famio-tour-card { max-width: 34rem; }
.famio-tour-card { aspect-ratio: 1 / 1.12; }
.famio-tour-phone { width: 40%; }
.famio-tour-phone-a {
	inset-inline-start: 5%; inset-inline-end: auto;
	top: 6%; bottom: auto;
	transform: translateY(calc(var(--famio-tp, 0) * -1.6rem));
}
.famio-tour-phone-b {
	inset-inline-end: 5%; inset-inline-start: auto;
	bottom: 6%; top: auto;
	transform: translateY(calc(var(--famio-tp, 0) * 1.6rem));
}

@media (min-width: 1024px) {
	.famio-tour-grid { grid-template-columns: minmax(0,1fr) minmax(0,.95fr); }
	.famio-tour-phone { width: 40%; }
}
@media (max-width: 1023px) {
	.famio-tour-grid > .famio-tour-card { max-width: 30rem; }
	.famio-tour-card { aspect-ratio: 1 / 1.12; }
	.famio-tour-phone { width: 42%; }
	.famio-tour-phone-a { inset-inline-start: 5%; top: 6%; transform: translateY(calc(var(--famio-tp, 0) * -1.4rem)); }
	.famio-tour-phone-b { inset-inline-end: 5%; bottom: 6%; transform: translateY(calc(var(--famio-tp, 0) * 1.4rem)); }
}
@media (max-width: 767px) {
	.famio-tour-card { aspect-ratio: 1 / 1.2; }
	.famio-tour-phone { width: 44%; }
	.famio-tour-phone-a { inset-inline-start: 4%; top: 6%; transform: translateY(calc(var(--famio-tp, 0) * -1.1rem)); }
	.famio-tour-phone-b { inset-inline-end: 4%; bottom: 6%; transform: translateY(calc(var(--famio-tp, 0) * 1.1rem)); }
}

/* =====================================================================
   ROUND 41 — August 2026
   ===================================================================== */

/* --- 41.1 · gradient border on every dish card, alive on hover ------
   Drawn as a masked ring on a pseudo-element (background in the padding
   box, punched out of the content box) so the card keeps its own light
   fill behind it. @property makes the conic angle animatable; browsers
   without it simply show the gradient standing still. */
@property --famio-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.famio-arc { position: relative; box-shadow: 0 24px 44px -22px rgba(3,30,22,.6); }
.famio-arc::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	border-radius: inherit; padding: 2px;
	background: conic-gradient(from var(--famio-ang, 0deg),
		#1FA65B, #35C878, #0D3D7C, #1FA65B, #0D3D7C, #1FA65B);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	opacity: .55; transition: opacity .35s ease;
}
.famio-arc > * { position: relative; z-index: 1; }
.famio-cf-card.is-active .famio-arc {
	box-shadow: 0 34px 62px -22px rgba(3,30,22,.72);
}
.famio-cf-card.is-active .famio-arc::before { opacity: .9; }
.famio-cf-card:hover .famio-arc::before {
	opacity: 1;
	animation: famio-arcspin 3.2s linear infinite;
}
@keyframes famio-arcspin { to { --famio-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
	.famio-cf-card:hover .famio-arc::before { animation: none; }
}

/* --- 41.2 · footer: brand block leads, on the right ----------------- */
.famio-footer-brand { order: -1; }
@media (min-width: 1024px) {
	.famio-footer-grid { grid-template-columns: 1.4fr .8fr 1.1fr; gap: 3rem; }
}

/* --- 41.3 · the app card stops travelling with the scroll -----------
   The 300vh rail with a pinned stage is what made the card look like it
   was riding down toward the footer. The section is a normal block now;
   only the devices inside the card move, and only a little. */
.famio-tour-rail { height: auto !important; }
.famio-tour-stage {
	position: static !important;
	height: auto !important; min-height: 0 !important;
	/* the wave paints across the last 12rem of the section, so the
	   bottom padding has to clear it or it slices the card */
	padding-block: 5.5rem 15rem;
}

/* a little narrower than round 40, and the crop is back — but now it is
   the CARD doing the cropping, with the devices anchored to its edges */
.famio-tour-grid > .famio-tour-card { max-width: 31rem; }
.famio-tour-card { aspect-ratio: 1 / .92; }
.famio-tour-phone { width: 42%; }
/* top-right device: exactly a third of it is inside the card's top edge */
.famio-tour-phone-a {
	inset-inline-start: 6%; inset-inline-end: auto;
	top: 0; bottom: auto;
	transform: translateY(calc(-33% - var(--famio-tp, 0) * 1.2rem));
}
/* bottom-left device: mostly visible, just kissed by the bottom edge */
.famio-tour-phone-b {
	inset-inline-end: 6%; inset-inline-start: auto;
	bottom: 0; top: auto;
	transform: translateY(calc(15% + var(--famio-tp, 0) * 1.2rem));
}

@media (max-width: 1023px) {
	.famio-tour-grid > .famio-tour-card { max-width: 28rem; }
	.famio-tour-phone { width: 44%; }
	.famio-tour-stage { padding-block: 4.5rem 12rem; }
	.famio-tour-phone-a { inset-inline-start: 5%; transform: translateY(calc(-33% - var(--famio-tp, 0) * 1rem)); }
	.famio-tour-phone-b { inset-inline-end: 5%; transform: translateY(calc(15% + var(--famio-tp, 0) * 1rem)); }
}
@media (max-width: 767px) {
	.famio-tour-stage { padding-block: 3.5rem 11rem; }
	.famio-tour-card { aspect-ratio: 1 / .92; }
	.famio-tour-phone { width: 46%; }
	.famio-tour-phone-a { inset-inline-start: 3%; transform: translateY(calc(-33% - var(--famio-tp, 0) * .9rem)); }
	.famio-tour-phone-b { inset-inline-end: 3%; transform: translateY(calc(15% + var(--famio-tp, 0) * .9rem)); }
}

/* =====================================================================
   ROUND 42 — August 2026
   ===================================================================== */

/* the app screens no longer scroll inside the frames — each device just
   shows one screen, and they show different ones */
.famio-tour-reel { transform: none !important; }
.famio-tour-reel[data-tour-reel="0.85"] { transform: translate3d(0, -25%, 0) !important; }

/* the devices move on their own axis, driven by scroll direction */
.famio-tour-phone-a { transform: translateY(calc(-33% + var(--famio-pa, 0px))); }
.famio-tour-phone-b { transform: translateY(calc(15% + var(--famio-pb, 0px))); }
@media (max-width: 1023px) {
	.famio-tour-phone-a { transform: translateY(calc(-33% + var(--famio-pa, 0px))); }
	.famio-tour-phone-b { transform: translateY(calc(15% + var(--famio-pb, 0px))); }
	/* the card was sitting straight on top of the store buttons */
	.famio-tour-grid { gap: 3rem; }
}
@media (max-width: 767px) {
	.famio-tour-phone-a { transform: translateY(calc(-33% + var(--famio-pa, 0px))); }
	.famio-tour-phone-b { transform: translateY(calc(15% + var(--famio-pb, 0px))); }
	.famio-tour-grid { gap: 2.75rem; }
}

/* --- 42.2 · journey section on a phone -------------------------------
   The pinned stage was centring a core that carries a tall bottom
   padding, which pushed the device up under the fixed header and took
   the first pop with it. */
@media (max-width: 767px) {
	.famio-journey-stage { padding-block: 7.5rem 1rem; }
	.famio-journey-core { padding-bottom: 6.5rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.famio-journey-stage { padding-block: 8rem 1.25rem; }
	.famio-journey-core { padding-bottom: 7rem; }
}

/* =====================================================================
   ROUND 43 — August 2026
   ===================================================================== */

/* Each device is cropped to about half its height by the card edge it is
   anchored to, and the travel keeps it pressed against that edge:
   the right device only ever moves UP (deeper into the top crop) and the
   left one only ever moves DOWN (deeper into the bottom crop), so
   neither can ever pull free of the border. */
.famio-tour-phone-a { transform: translateY(calc(-48% + var(--famio-pa, 0px))); }
.famio-tour-phone-b { transform: translateY(calc(48% + var(--famio-pb, 0px))); }
@media (max-width: 1023px) {
	.famio-tour-phone-a { transform: translateY(calc(-48% + var(--famio-pa, 0px))); }
	.famio-tour-phone-b { transform: translateY(calc(48% + var(--famio-pb, 0px))); }
}
@media (max-width: 767px) {
	/* only half the device shows on a phone */
	.famio-tour-phone-a { transform: translateY(calc(-52% + var(--famio-pa, 0px))); }
	.famio-tour-phone-b { transform: translateY(calc(52% + var(--famio-pb, 0px))); }
}

/* --- 43.2 · the wave was eating the top of the footer on a phone ---- */
@media (max-width: 767px) {
	.famio-getapp-wave { height: 5rem; }
	.famio-tour-stage { padding-block: 3.5rem 7.5rem; }
	.famio-footer { padding-block: 2rem 0; }
}
@media (min-width: 768px) and (max-width: 899px) {
	.famio-getapp-wave { height: 7rem; }
	.famio-tour-stage { padding-block: 4.5rem 9.5rem; }
}

/* =====================================================================
   ROUND 44 — August 2026
   ===================================================================== */

/* --- 44.1 · journey: a real gap under the phone before the buttons --
   The store buttons are absolutely placed at the bottom of the sticky
   stage; on a phone that let them ride up onto the device. The core's
   bottom padding is what reserves the runway, so it is enlarged and the
   buttons pinned to the true bottom edge. */
@media (max-width: 767px) {
	.famio-journey-core { padding-bottom: 10.5rem; }
	.famio-journey-actions { bottom: .5rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.famio-journey-core { padding-bottom: 10rem; }
	.famio-journey-actions { bottom: .75rem; }
}

/* --- 44.2 · app card: the device must not spring back --------------
   Round 42/43 moved the devices by scroll DIRECTION and eased them back
   to rest, which read as the phone bobbing up and down. The brief is a
   one-way accumulation: scrolling down carries the whole card's pair
   downward and it STAYS there until you scroll up. So a single signed
   offset is integrated from the scroll and clamped — it never returns
   on its own. Handled entirely in JS below; here we just show a little
   more of each device (the visible half became a bit generous). */
.famio-tour-phone-a { transform: translateY(calc(-42% + var(--famio-pa, 0px))); }
.famio-tour-phone-b { transform: translateY(calc(42% + var(--famio-pb, 0px))); }
@media (max-width: 1023px) {
	.famio-tour-phone-a { transform: translateY(calc(-42% + var(--famio-pa, 0px))); }
	.famio-tour-phone-b { transform: translateY(calc(42% + var(--famio-pb, 0px))); }
}
@media (max-width: 767px) {
	.famio-tour-phone-a { transform: translateY(calc(-46% + var(--famio-pa, 0px))); }
	.famio-tour-phone-b { transform: translateY(calc(46% + var(--famio-pb, 0px))); }
}

/* --- 44.3 · mobile footer: social + copyright centred, not right ---- */
@media (max-width: 767px) {
	.famio-footer-bar { flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
	.famio-footer-bar .famio-socials { justify-content: center; }
	.famio-footer-copy { align-items: center; text-align: center; }
}

/* =====================================================================
   ROUND 46 — August 2026
   ===================================================================== */

/* The right-hand device (phone-a) is turned upside down, so its notch /
   camera sits at the BOTTOM — the two devices mirror each other. The
   flip is on the inner .famio-device so the wrapper still owns the
   position/parallax transform untouched. */
.famio-tour-phone-a .famio-tour-device { transform: rotate(180deg); }

/* Both devices must show the SAME amount: same visible height, same
   hidden height. phone-a is cropped at the TOP edge, phone-b at the
   BOTTOM edge, and with identical device heights the offsets are made
   equal in magnitude and opposite in sign. */
.famio-tour-phone-a { transform: translateY(calc(-42% + var(--famio-pa, 0px))) !important; }
.famio-tour-phone-b { transform: translateY(calc(42%  + var(--famio-pb, 0px))) !important; }
@media (max-width: 767px) {
	.famio-tour-phone-a { transform: translateY(calc(-46% + var(--famio-pa, 0px))) !important; }
	.famio-tour-phone-b { transform: translateY(calc(46%  + var(--famio-pb, 0px))) !important; }
}



/* =====================================================================
   99. ELEMENTOR COMPATIBILITY LAYER — added by the conversion.
   NOTHING above this line was changed from the Ayman-DS source build.

   Everything here exists for ONE reason: the Famio motion system is
   measurement-based. `initJourney().flight()` reads live
   getBoundingClientRect() on the hero device and the journey device every
   frame; `initTour`, `initStack`, `initScrollFaq`, `initScrollBits` and
   `initDishes` all read section rects against the viewport. Elementor
   wraps every widget in .elementor-element > .elementor-widget-container
   and every group in .e-con / .e-con-inner. Any wrapper that clips,
   transforms, filters or `contain`s changes those rects — or kills
   position:sticky outright — and the animation silently dies or jumps.
   ===================================================================== */

/* 99a — the widget wrappers are pure pass-through boxes.
   width/margin/padding are neutralised so a widget occupies exactly the
   same box as the <section> did in the static build. */
.elementor-widget[class*="elementor-widget-famio-"],
.elementor-widget[class*="elementor-widget-famio-"] > .elementor-widget-container {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
}

/* 99b — NO wrapper may clip, transform, filter or contain.
   `transform`, `filter`, `perspective`, `will-change` and `contain` each
   create a containing block for fixed/sticky descendants: the journey
   rail, the topbar, the tour rail and the QR dock all break if any
   ancestor declares one. `overflow: hidden` breaks sticky as well —
   `clip` on the x-axis only is what the source uses, and it stays. */
.e-con:has(.famio-hero),        .e-con-inner:has(.famio-hero),
.e-con:has(.famio-journey),     .e-con-inner:has(.famio-journey),
.e-con:has(.famio-getapp),      .e-con-inner:has(.famio-getapp),
.e-con:has(.famio-dishes),      .e-con-inner:has(.famio-dishes),
.e-con:has(.famio-goals),       .e-con-inner:has(.famio-goals),
.e-con:has(.famio-sfaq),        .e-con-inner:has(.famio-sfaq),
.e-con:has(.famio-video),       .e-con-inner:has(.famio-video),
.e-con:has(.famio-topbar),      .e-con-inner:has(.famio-topbar),
.e-con:has(.famio-page-hero),   .e-con-inner:has(.famio-page-hero),
.e-con:has(.famio-footer),      .e-con-inner:has(.famio-footer) {
	overflow: visible;
	transform: none;
	filter: none;
	perspective: none;
	will-change: auto;
	contain: none;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

/* 99c — the hero/journey pair specifically. The device flies OUT of the
   hero box and INTO the journey box; both boxes must keep the source's
   `overflow-x: clip; overflow-y: visible` combination (clip — not hidden
   — so the horizontal defense survives while the vertical axis stays
   free), and the widget wrappers around them must not re-clip it. */
.elementor-widget-famio-hero-orbit,
.elementor-widget-famio-hero-orbit > .elementor-widget-container,
.elementor-widget-famio-journey-stage,
.elementor-widget-famio-journey-stage > .elementor-widget-container {
	overflow-x: clip;
	overflow-y: visible;
	position: relative;
}
/* the flying device must stay above the journey section it lands in */
.elementor-widget-famio-hero-orbit { z-index: 6; }

/* 99d — Elementor's own resets fight the design system.
   Elementor sets `h1..h6 { margin: 0 }` and normalises <img> display;
   the section-head rhythm and the card media both depend on the source
   values, so restore them inside Famio subtrees only. */
[class^="famio-"] img, [class*=" famio-"] img { display: block; }
.elementor-widget[class*="elementor-widget-famio-"] p:last-child { margin-bottom: 0; }

/* 99e — Editor preview.
   The IntersectionObserver never fires inside Elementor's editor iframe,
   so reveal-on-scroll widgets render as blank boxes and the editor looks
   broken. Everything reveal-driven is forced visible in the editor only.
   The JS ships a matching fast-path (see widgets.js → famioEditorMode). */
body.elementor-editor-active .famio-reveal,
body.elementor-editor-active .famio-words > span {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	clip-path: none !important;
}
/* scroll-driven stages are position:sticky over a tall rail — inside the
   editor canvas there is no scroll to drive them, so they are flattened
   to their resting state and stay editable. */
body.elementor-editor-active .famio-journey-rail,
body.elementor-editor-active .famio-tour-rail { height: auto !important; }
body.elementor-editor-active .famio-journey-stage,
body.elementor-editor-active .famio-tour-stage {
	position: static !important;
	height: auto !important;
	min-height: 0 !important;
}
body.elementor-editor-active .famio-journey-phone { opacity: 1 !important; }
body.elementor-editor-active .famio-pop { opacity: 1 !important; transform: none !important; }
body.elementor-editor-active .famio-hero-phone .famio-device { clip-path: none !important; }

/* 99f — theme button war (three layers). Themes love to repaint
   `a.famio-btn` and `button`. */
.famio-btn,
a.famio-btn,
body .famio-btn,
body .elementor-widget[class*="elementor-widget-famio-"] a.famio-btn {
	text-decoration: none;
	box-shadow: none;
}
body .famio-btn-primary { background: var(--famio-gradient-primary); color: var(--famio-primary-fg); }
body .famio-btn-accent  { background: var(--famio-gradient-accent);  color: var(--famio-accent-fg); }

/* 99g — the QR dock is position:fixed. Elementor's editor pins it over the
   panel; hide it there only. */
body.elementor-editor-active .famio-qr { display: none !important; }

/* 99h — WordPress admin bar offsets every sticky top by 32px. */
body.admin-bar .famio-topbar { top: 32px; }
@media (max-width: 782px) { body.admin-bar .famio-topbar { top: 46px; } }

/* =====================================================================
   100. ROUND 48 — post-conversion fixes (2026-08-17)
   ===================================================================== */

/* 100a — CROSS-SECTION ADJACENCY, RESTORED.
   The static build tuned the gap between two sections with sibling
   selectors: `.famio-ph10 + .famio-video`, `.famio-dishes + .famio-occ`.
   Under Elementor those two sections are no longer siblings — each is
   wrapped in its own widget inside its own container — so every one of
   those rules silently stopped applying, and the section fell back to
   its own (much larger) base padding. That is the oversized gap under
   the families-page hero.

   Two layers: the container-level `:has()` pair (exact, works because the
   scaffolder gives every widget its own top-level container), plus an
   unconditional restatement for the sections that only ever appear in
   that one position on this site. */
.e-con:has(.famio-ph10) + .e-con .famio-video,
.famio-video {
	padding-top: 2.5rem;
}
.e-con:has(.famio-dishes) + .e-con .famio-occ,
.famio-occ {
	padding-top: 9rem;
}
.famio-video .famio-video-stage { padding-block: 7.5rem 2rem; }

@media (max-width: 899px) {
	.e-con:has(.famio-dishes) + .e-con .famio-occ,
	.famio-occ { padding-top: 3.25rem; }
}

/* 100b — families page on phones: the hero and the video sat a whole
   screen apart. The stage is a pinned 100svh box, so its own top padding
   is the gap — not the section's. */
@media (max-width: 767px) {
	.e-con:has(.famio-ph10) + .e-con .famio-video,
	.famio-video { padding-top: 0; }
	.famio-video .famio-video-stage { padding-block: 2.25rem 1rem; }
}

/* 100c — the video device's bezel. `padding` here IS the black frame
   around the screen; on a phone the frame read as thick as the video. */
@media (max-width: 767px) {
	.famio-video-device {
		padding: clamp(.16rem, calc(.12rem + var(--famio-vp, 0) * .18rem), .3rem);
		border-radius: clamp(.7rem, calc(.5rem + var(--famio-vp, 0) * .8rem), 1.4rem);
	}
	.famio-video-device::after { inset-inline-start: .45rem; width: .45rem; height: 20%; }
}

/* 100d — the logo was set at 2.6rem, which crowded the nav on desktop and
   pushed the burger to the edge on phones. */
.famio-logo img { height: 2.1rem; }
@media (max-width: 1023px) { .famio-logo img { height: 1.85rem; } }
@media (max-width: 560px)  { .famio-logo img { height: 1.6rem; } }

/* 100e — menu links turn brand blue on interaction, not just on hover.
   Touch devices never fire :hover, so a tapped link gave no feedback at
   all; :active and :focus-visible cover the tap and the keyboard. */
.famio-nav-link:hover,
.famio-nav-link:active,
.famio-nav-link:focus-visible,
.famio-nav-link.is-active,
.famio-nav-link[aria-current="page"] { color: var(--famio-primary); }
.famio-nav-link:active::after,
.famio-nav-link:focus-visible::after,
.famio-nav-link[aria-current="page"]::after { transform: scaleX(1); }

.famio-mobile-menu a:hover,
.famio-mobile-menu a:active,
.famio-mobile-menu a:focus-visible,
.famio-mobile-menu a.is-active,
.famio-mobile-menu a[aria-current="page"] {
	color: var(--famio-primary);
}
.famio-mobile-menu a.is-active,
.famio-mobile-menu a[aria-current="page"] { font-weight: 800; }

/* 100f — contact cards: the label and the value were touching, because
   the label is `display:block` with no bottom margin. */
.famio-contact-item b { margin-bottom: .35rem; line-height: 1.5; }
.famio-contact-item span span { line-height: 1.6; }
@media (max-width: 767px) {
	.famio-contact-item { padding-block: 1rem; }
	.famio-contact-item b { margin-bottom: .45rem; font-size: 1rem; }
	.famio-contact-item span { font-size: .875rem; }
}

/* 100g — the pop-ups fire one at a time.
   The rail gives the pops their scroll budget: at 285vh the four
   thresholds (.20/.38/.56/.74) were only ~35vh of scroll apart on a
   phone, which one flick clears — so they appeared to arrive together.
   Widening the rail spreads them out; widgets.js adds a hard minimum
   scroll distance between two pops as the belt-and-braces half, so the
   sequencing survives any layout that collapses the rail. */
@media (max-width: 1023px) { .famio-journey-rail { height: 380vh; } }
@media (max-width: 560px)  { .famio-journey-rail { height: 430vh; } }

/* =====================================================================
   101. ROUND 49 — 2026-08-17
   ===================================================================== */

/* 101a — logo. Both logos are now driven by a responsive Elementor
   SLIDER (header widget → ارتفاع اللوجو, footer widget → same), so these
   are only the starting values the control overrides. */
.famio-logo img { height: 1.9rem; }
@media (max-width: 1023px) { .famio-logo img { height: 1.7rem; } }
@media (max-width: 560px)  { .famio-logo img { height: 1.45rem; } }
.famio-footer-brand img { height: 2.4rem; }
@media (max-width: 1023px) { .famio-footer-brand img { height: 2.2rem; } }
@media (max-width: 560px)  { .famio-footer-brand img { height: 1.9rem; } }

/* 101b — the journey rail is back to its designed length.
   Round 48 stretched it to 380/430vh to space the pop-ups out, which
   made the section itself far too tall — the phone kept descending long
   after the story was told. The pop sequencing is handled by the
   distance guard in widgets.js (MINGAP), which does not need a long
   rail, so the height goes back to the tuned values. */
@media (max-width: 1023px) { .famio-journey-rail { height: 250vh; } }
@media (max-width: 560px)  { .famio-journey-rail { height: 270vh; } }

/* 101c — breathing room between the hero and the journey.
   The two sections were flush: the phone finished its flight with the
   hero's bottom edge right against the next section, so the transition
   read as a collision rather than a hand-off. */
.famio-journey { padding-top: 3rem; }
@media (max-width: 767px) { .famio-journey { padding-top: 2rem; } }

/* 101d — families page on phones: tighter still under the hero.
   ROUND 50 — the gap above the phone was the sticky stage's own top
   inset plus its centring padding, not the section gap. Both trimmed so
   the video sits just under the hero copy. */
@media (max-width: 767px) {
	.e-con:has(.famio-ph10) + .e-con .famio-video,
	.famio-video { padding-top: 0; }
	.famio-video .famio-video-stage { padding-block: .25rem .5rem; top: 4vh; }
	/* the first section after ANY inner-page hero, not just the video —
	   the sibling rule that used to do this cannot survive Elementor */
	.e-con:has(.famio-ph10) + .e-con .famio-section { padding-top: 1.5rem; }
}

/* 101e — the custom dropdown must be a vertical list.
   Themes routinely style `ul li { display: inline-block }` for their own
   menus, and that rule reaches into the select we build at runtime — the
   options ended up sitting side by side. Forced back to a real list. */
.famio-select-list { display: block; list-style: none; }
.famio-select-list li {
	display: block;
	width: 100%;
	float: none;
	margin: 0;
	list-style: none;
	text-align: start;
}
.famio-select-list li::before,
.famio-select-list li::marker { content: none; }

/* 101f — a required custom dropdown that was left empty. The native
   <select> is hidden, so the browser's own validation bubble never
   appears; the wrapper carries the state instead. */
.famio-select.is-missing .famio-select-btn {
	border-bottom-color: #D64545;
	color: #D64545;
}

/* =====================================================================
   102. ROUND 51 — 2026-08-17
   ===================================================================== */

/* 102a — the dropdown was showing the field BELOW it through its own
   panel. Two separate causes, both fixed here:

   1. Every .famio-formx-field is position:relative, so each one starts
      its own stacking context — a high z-index on the list only wins
      INSIDE its own field, never over the next field. The open field
      itself has to be lifted above its siblings.
   2. The panel had a background but its <li> rows did not, and a theme
      setting a transparent/!important background on the ul let the field
      beneath bleed through. Every layer now paints an opaque colour. */
.famio-formx-field:has(.famio-select.is-open),
.famio-form-field:has(.famio-select.is-open) { z-index: 60; }

.famio-select-list {
	background: #fff !important;
	/* solid ring + drop shadow so nothing behind it reads through the edge */
	box-shadow: 0 24px 48px -18px rgba(13,61,124,.45), 0 0 0 1px var(--famio-border);
}
.famio-select-list li {
	background: #fff;
}
.famio-select-list li:hover,
.famio-select-list li.is-active {
	background: rgba(31,166,91,.12);
}

/* =====================================================================
   103. ROUND 54 — 2026-08-17 · make the video actually play
   ===================================================================== */

/* The decorative play button is now wired to start the video (initVideo
   in widgets.js). Once playing, it is removed from the flow so it can't
   sit over the native controls; a video with no source keeps the button
   hidden from PHP ([hidden]). */
.famio-video-play[hidden] { display: none !important; }
.famio-video-screen.is-playing .famio-video-play { display: none; }

/* A poster IMG should cover (fills the device), but a real VIDEO or an
   IFRAME should be fully visible — cover was cropping the top and bottom
   of the actual footage. */
.famio-video-screen video,
.famio-video-screen iframe { object-fit: contain; background: #06182F; }

/* While the poster is still showing (before play) the button must be
   clickable and on top. */
.famio-video-play { z-index: 4; }

/* =====================================================================
   104. ROUND 55 — 2026-08-27 · real screenshots replace the CSS mockups
   ===================================================================== */

/* --- 104.1 · GET-APP card: two real screenshots, one composition -----
   ROUND 55.2 — the artwork ships as TWO transparent layers, cut from the
   same source composition, so each phone can travel on its own the way
   the CSS-built devices used to. The card carries the composition's own
   ratio (983 / 1350) and each layer is placed by the percentage it
   occupied in the source, so at rest the picture is pixel-identical to
   the flat image — nothing scaled, nothing cropped.
   Both layers carry the SAME offset (--famio-pa), which is what makes
   the pair read the way the brief asks: the offset only grows while you
   scroll DOWN, so the upper phone sinks into the card and stays there,
   and it only shrinks while you scroll UP, which is when the lower phone
   rises. One integrated value, two opposite-reading edges. */
.famio-getapp .famio-tour-card {
	position: relative;
	aspect-ratio: 983 / 1350 !important;
	height: auto !important;
	min-height: 0 !important;
	display: block;
	overflow: hidden;
	line-height: 0;
}
.famio-getapp .famio-tour-card-sheen { z-index: 1; }

.famio-tour-shot {
	position: absolute; z-index: 2;
	height: auto; max-width: none;
	transform: translateY(var(--famio-pa, 0px));
	will-change: transform;
	backface-visibility: hidden;
	/* no CSS transition: the JS eases the value itself, frame by frame.
	   A transition on top of that would fight the lerp and read as lag. */
}
/* ROUND 55.3 — the upper phone must NEVER show a gap against the card's
   top border. It only ever travels DOWN (offset 0 → max), so its resting
   place is lifted by exactly that maximum: at rest it bleeds past the top
   edge, and at full travel its top lands flush on the border. Anywhere in
   between it is still overlapping the edge, so there is no strip of card
   behind it at any point of the scroll. --famio-tour-max is written on
   the rail by PHP from the same control the JS reads, so the lift and the
   travel can never drift apart. */
.famio-tour-shot-a {
	left: 50.05%;
	top: calc(-1 * var(--famio-tour-max, 52px));
	width: 49.95%;
}
/* the lower phone is flush with the BOTTOM edge and travels down into it,
   so it can only ever be cropped, never detached — no lift needed */
.famio-tour-shot-b { left: 0; top: 46.44%; width: 50.05%; }

/* the JS gives a small screen 65% of the travel; the lift has to match it
   or the gap comes back on mobile */
@media (max-width: 767px) {
	.famio-tour-shot-a { top: calc(-0.65 * var(--famio-tour-max, 52px)); }
}

/* the editor canvas has no scroll to drive the offset, so the pair rests
   in its exact composition and any newly uploaded layer shows at once */
body.elementor-editor-active .famio-tour-shot,
body.elementor-editor-preview .famio-tour-shot {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	display: block !important;
}
/* with the travel frozen there is nothing to lift for, so the upper phone
   drops back onto the border and the editor shows the true composition */
body.elementor-editor-active .famio-tour-shot-a,
body.elementor-editor-preview .famio-tour-shot-a { top: 0 !important; }
@media (prefers-reduced-motion: reduce) {
	.famio-tour-shot { transform: none !important; }
	.famio-tour-shot-a { top: 0 !important; }
}

/* --- 104.2 · PHONE-FLIP: the artwork replaces the .famio-device -------
   The tumble / idle animation lives on .famio-flip-phone, which is
   untouched, so the motion is identical. The wrapper's drop-shadow now
   traces the artwork's own silhouette instead of the old plastic frame,
   which is why the image must stay transparent-edged. */
.famio-flip-shot { display: block; width: 100%; height: auto; }
.famio-flip-phone { backface-visibility: hidden; }

/* --- 104.3 · HERO: an optional background behind the phone screen -----
   Sits under .famio-screen-brand / -plate / -dots (all z-index 2), so
   the logo and the landing dish still read on top of it. */
.famio-screen-bg {
	position: absolute; z-index: 1; inset: 0;
	background-size: cover; background-position: center; background-repeat: no-repeat;
	border-radius: inherit;
}
.famio-screen-brand img { max-width: 70%; object-fit: contain; }

/* =====================================================================
   ROUND 60 — September 2026
   Four things, and nothing else:
     60.1  the hero device is parked (no scroll travel at all)
     60.2  the journey device is parked and always visible
     60.3  the journey screen: brand-blue, white wordmark, logo on a disc
     60.4  the pop-ups run on a timer, and the section is a normal block
   ===================================================================== */

/* --- 60.1 · HERO: the device never moves ----------------------------
   Rounds 34/35/45 drove .famio-hero-phone from --famio-hp: it slid down
   52vh, shrank and faded on the way out of the hero, and JS wrote an
   inline transform on top of that for the flight. The brief is that it
   stays exactly where it sits. The resting geometry is kept verbatim —
   only the scroll-linked parts are neutralised, so the section looks
   identical at rest, it simply no longer reacts to the wheel.
   `transform: none` is safe because §34 already centres it with
   inset-inline + margin-inline: auto, not with translateX(-50%).       */
.famio-hero-phone,
.famio-js .famio-hero-phone {
	transform: none !important;
	opacity: 1 !important;
	transition: none !important;
	will-change: auto;
	/* the resting quarter-crop, frozen: the term that reopened it was
	   `1 - var(--famio-hp) * 12`, which is 1 whenever --famio-hp is 0 */
	clip-path: inset(-45% -45% calc(var(--famio-phone-w) * .517) -45%);
}
.famio-orbit-track { opacity: 1 !important; }

/* --- 60.2 · JOURNEY: its own device is parked and always on ---------
   §34 hid this device (`.famio-js .famio-journey-phone { opacity: 0 }`)
   because the hero one used to land on top of it. With no flight there
   is nothing to hand over, so it simply shows.                         */
.famio-journey-phone,
.famio-js .famio-journey-phone {
	transform: none !important;
	opacity: 1 !important;
	transition: none !important;
	will-change: auto;
}
.famio-journey-glow { opacity: .85; }

/* --- 60.3 · JOURNEY SCREEN: brand blue, white name, logo on a disc --
   Scoped to the journey device only — the hero screen, the flip card
   and the get-app screens are untouched.                               */
.famio-journey-phone .famio-device-screen {
	background: var(--famio-primary, #0D3D7C);
}
.famio-journey-phone .famio-screen-name {
	display: block;
	font-family: var(--famio-font-display);
	font-weight: 800;
	color: #FFFFFF;
	line-height: 1.2;
	letter-spacing: .01em;
	/* tied to the device width so it reads the same at every breakpoint */
	font-size: calc(var(--famio-phone-w) * .115);
}
.famio-journey-phone .famio-screen-mark {
	position: relative; flex: 1 1 auto;
	display: grid; place-items: center; padding: .75rem;
}
.famio-journey-phone .famio-screen-disc {
	display: grid; place-items: center;
	width: 62%; aspect-ratio: 1;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow:
		0 20px 44px -16px rgba(0,0,0,.55),
		0 0 0 .5rem rgba(255,255,255,.08);
}
.famio-journey-phone .famio-screen-disc img {
	display: block; width: 58%; height: auto; object-fit: contain;
}
/* the dots sat in a translucent navy that vanishes on a navy screen */
.famio-journey-phone .famio-screen-dots i { background: rgba(255,255,255,.30); }
.famio-journey-phone .famio-screen-dots i:first-child { background: var(--famio-accent); }

/* --- 60.4a · the section is a normal block --------------------------
   The 470vh rail (260/285vh on smaller screens) and the sticky 100svh
   stage existed only to give the scroll something to drive. Nothing
   reads the scroll any more, so the rail collapses to its content and
   the stage stops pinning — which is the whole of the height problem.
   The core's bottom padding is left alone: it is the runway the store
   buttons are absolutely placed into.                                  */
.famio-journey-rail { height: auto; }
.famio-journey-stage {
	position: relative; top: auto; height: auto;
	padding-block: 4rem 2.5rem;
}
@media (max-width: 1023px) {
	.famio-journey-stage { padding-block: 3rem 2rem; }
}
@media (max-width: 767px) {
	/* the 7.5rem top padding was clearance for the fixed header while
	   the stage was pinned to the top of the viewport — not needed now */
	.famio-journey-stage { padding-block: 2.5rem 1.5rem; }
}

/* --- 60.4b · the pop-ups: a timeline, not a scrollbar ---------------
   Entrance glides in from the flank the card is anchored to, overshoots
   by a hair and settles; the ring is the same shockwave as before, a
   little slower so it reads as a halo rather than a blink. Exit is the
   same move, reversed and quicker. No blur or filter anywhere — those
   force a compositing layer and were the cause of the old scroll
   stutter on phones.                                                   */
@keyframes famio-pop-in {
	0%   { opacity: 0; transform: translate(var(--famio-pop-dx, 0), .5rem) scale(.82); }
	45%  { opacity: 1; }
	70%  { transform: translate(0, 0) scale(1.035); }
	100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes famio-pop-out {
	0%   { opacity: 1; transform: translate(0, 0) scale(1); }
	100% { opacity: 0; transform: translate(calc(var(--famio-pop-dx, 0) * .6), .25rem) scale(.9); }
}
.famio-pop-r { --famio-pop-dx: -1.6rem; }
.famio-pop-l { --famio-pop-dx:  1.6rem; }
.famio-js .famio-pop { opacity: 0; }
.famio-js .famio-pop.is-on {
	animation: famio-pop-in .74s cubic-bezier(.18,.86,.24,1) both;
}
.famio-js .famio-pop.is-on::before {
	animation: famio-shockwave .95s cubic-bezier(.15,.85,.25,1) both;
}
.famio-js .famio-pop.is-off {
	animation: famio-pop-out .4s cubic-bezier(.5,0,.4,1) both;
}
.famio-js .famio-pop.is-off::before { animation: none; opacity: 0; }

/* --- 60.5 · HERO screen: the real logo mark -------------------------
   The bundled famio-logo.svg is a wide wordmark, sized by height. The
   site's actual mark is square, so it is sized by width instead —
   as a share of the screen, so it tracks the device at every size.     */
.famio-hero-phone .famio-screen-brand--mark img {
	height: auto; width: 42%; max-width: 42%; margin-inline: auto;
}

/* --- 60.6 · the button runway, resized for the shorter section ------
   §44.1 grew the core's bottom padding to 10/10.5rem so the store
   buttons could not ride up onto the device inside a pinned 100svh
   stage. The stage is no longer pinned, so that runway is now just
   empty space at the bottom of the section. It is trimmed to what the
   stacked buttons actually need, and no further — anything smaller and
   they touch the device again.                                        */
@media (max-width: 1023px) {
	.famio-journey-core { padding-bottom: 8.5rem; }
}

/* =====================================================================
   ROUND 61 — September 2026
   ===================================================================== */

/* --- 61.1 · more air above the journey device -----------------------
   §60.4a replaced the pinned 100svh stage with a plain block, and the
   padding it inherited (4rem / 3rem / 2.5rem) left the phone sitting
   too close to the section's top edge. The top runway is opened up;
   the bottom is untouched, so the section stays short.                 */
.famio-journey-stage { padding-block: 8rem 2.5rem; }
@media (max-width: 1023px) {
	.famio-journey-stage { padding-block: 6rem 2rem; }
}
@media (max-width: 767px) {
	.famio-journey-stage { padding-block: 5rem 1.5rem; }
}

/* =====================================================================
   ROUND 62 — September 2026
   ===================================================================== */

/* --- 62.1 · PHONE-FLIP: a fixed frame, a swappable screen -----------
   §104.2 had thrown the frame away and let a flat artwork BE the phone,
   so every new image had to be a pre-rendered device or the section
   fell apart. The .famio-device frame is back and is now permanent:
   body, notch, rim light and glass sheen are all CSS, and the only
   thing the client changes is the picture behind them.

   The screen is a fixed 9 / 18.6 box, so the image is fitted with
   `object-fit: cover` — it fills the screen edge to edge at any aspect
   ratio, centred, with the surplus cropped rather than squashed. It can
   never stretch, letterbox, or leave a white band.                     */
.famio-flip-phone .famio-device-screen {
	overflow: hidden;                       /* the corner radius is the mask */
	background: #0B1A2E;                    /* behind the image while it loads */
}
.famio-flip-phone .famio-flip-shot {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center top;
	display: block;
	/* the browser's own smooth downscale — never the blocky nearest
	   neighbour some resets force on images inside transformed layers */
	image-rendering: auto;
	border-radius: inherit;
}
/* the notch has to clear the screenshot, and the sheen has to clear both */
.famio-flip-phone .famio-device-notch { z-index: 6; }
.famio-flip-phone .famio-device-screen::after { z-index: 4; }

/* NOTE — round 62 added `backface-visibility: hidden` here believing it
   sharpened the raster. Measured: it does nothing. See §63.1 for what
   actually caused the softness; that block overrides this line.        */
.famio-flip-phone .famio-device { backface-visibility: hidden; }

/* =====================================================================
   ROUND 63 — September 2026
   ===================================================================== */

/* --- 63.1 · PHONE-FLIP: why the screenshot looked pixelated ----------
   It was never the source image (852px wide against ~248 CSS px — over
   three times the pixels needed). The phone was being rasterised ONCE
   into a compositor bitmap at roughly 1:1 and then that bitmap was
   transformed in 3D, so every pixel you saw was a stretched copy.

   TWO things forced that, and — measured — neither one alone changed
   anything; they had to go together:
     · `filter: drop-shadow()` on .famio-flip-phone. A filter flattens
       its whole subtree into one texture before painting.
     · `transform-style: preserve-3d` on .famio-device. It puts the
       subtree in a 3D rendering context, where each layer is rastered
       flat and then composited in space.

   Removing both, with the tilt and the idle float left exactly as they
   were, measured 4.7× sharper (Laplacian variance 139 → 659 on the same
   crop at 2× DPR). The animation, the resting angle and the shadow all
   look the same — only the resampling is gone.                         */
.famio-flip-phone {
	filter: none;
	backface-visibility: visible;
}
/* the shadow moves onto the device itself, where box-shadow paints
   around the box instead of rasterising what's inside it */
.famio-flip-phone .famio-device {
	transform-style: flat;
	backface-visibility: visible;
	box-shadow:
		0 42px 60px rgba(3,12,26,.62),
		0 18px 28px -12px rgba(3,12,26,.5),
		inset 0 1px 0 rgba(255,255,255,.22);
}
/* the body-thickness slab used translateZ, which needs the 3D context.
   Flat equivalent: the same gradient, a hair larger, tucked behind the
   device's own background. Visually identical at this size.            */
.famio-flip-phone .famio-device::before {
	z-index: -1;
	transform: scale(1.02) translateY(1px);
}

/* =====================================================================
   ROUND 63 — September 2026 · the flip phone reads soft on a real GPU
   -------------------------------------------------------------------
   Three separate causes, all of them real, fixed together:

   (a) SIZE. The screenshot is a dense app UI 852px wide being drawn into
       a 264px frame — a 3.2x reduction. Even a perfect downscale throws
       away detail at that ratio, and the app's own body text lands at
       about six pixels tall. The frame is enlarged so the UI is actually
       legible; this is the single biggest factor.

   (b) RASTER SCALE. `.famio-flip-phone` carried an INFINITE 3D animation
       (famio-3d-idle, with rotates and a scale). A layer with a running
       transform animation is rasterised ONCE into a GPU texture at a
       fixed scale and then re-projected every frame — so the perspective
       magnification is applied to an already-flattened bitmap and every
       edge softens. The resting rotation is moved onto .famio-device as
       a STATIC transform (static transforms get a correct screen-space
       raster scale), and the idle loop is reduced to a pure vertical
       translate, which needs no resampling at all.

   (c) FILTER. `filter: drop-shadow()` on the phone forced the whole
       subtree — frame, screen and screenshot — through an offscreen
       buffer sized in LOCAL coordinates, i.e. before the perspective
       enlarged it. It is replaced with a box-shadow on the frame, which
       is composited, not filtered. `backface-visibility: hidden` is
       dropped for the same reason: it promotes a layer for no benefit
       here, since the phone is never turned past 90 degrees.
   ===================================================================== */

/* --- 63.1 · a frame big enough to read ------------------------------ */
.famio-flip-phone { width: min(21rem, 76%); }
@media (min-width: 1024px) {
	.famio-flip-phone { width: min(21rem, 100%); }
}
@media (max-width: 1023px) {
	.famio-flip-phone { width: min(15.5rem, 66%); }
}

/* --- 63.2 · nothing that forces a flattened texture ----------------- */
.famio-flip-phone {
	filter: none;
	backface-visibility: visible;
}
.famio-flip-phone .famio-device {
	backface-visibility: visible;
	/* the drop-shadow's job, done by the compositor instead of a filter */
	box-shadow:
		0 42px 60px -18px rgba(3,12,26,.72),
		0 18px 30px -12px rgba(3,12,26,.55),
		inset 0 1px 0 rgba(255,255,255,.22);
}

/* --- 63.3 · the resting tilt is static, the idle is a plain float ---
   Both @keyframes below intentionally REDEFINE the originals: the
   tumble now lands flat (the tilt lives on .famio-device) and the idle
   loop no longer rotates or scales, so it can never resample the
   screenshot.                                                          */
.famio-flip-phone .famio-device {
	transform: rotateX(4deg) rotateY(-15deg);
}
@keyframes famio-tumble {
	0%   { opacity: 0; transform: translate3d(48%, 26vh, -340px) rotateX(-62deg) rotateY(196deg) rotateZ(13deg) scale(.52); }
	18%  { opacity: 1; }
	50%  { transform: translate3d(31%, 9vh, -170px) rotateX(-27deg) rotateY(86deg) rotateZ(7deg) scale(.78); }
	76%  { transform: translate3d(9%, 1.5vh, -45px) rotateX(-8deg) rotateY(22deg) rotateZ(2.4deg) scale(.96); }
	92%  { transform: translate3d(-1.5%, 0, 0) rotateX(3deg) rotateY(-9deg) rotateZ(-.7deg) scale(1.02); }
	100% { opacity: 1; transform: none; }
}
@keyframes famio-3d-idle {
	0%,100% { transform: translate3d(0, 0, 0); }
	50%     { transform: translate3d(0, -9px, 0); }
}
@keyframes famio-tumble-sm {
	0%   { opacity: 0; transform: translate3d(0, 22vh, -200px) rotateX(-34deg) rotateY(104deg) rotateZ(6deg) scale(.6); }
	20%  { opacity: 1; }
	60%  { transform: translate3d(0, 4vh, -60px) rotateX(-12deg) rotateY(26deg) rotateZ(2deg) scale(.9); }
	100% { opacity: 1; transform: none; }
}
/* frozen states have to drop the tilt too, or the editor shows it askew */
.elementor-editor-active .famio-flip-phone .famio-device,
body.elementor-editor-preview .famio-flip-phone .famio-device { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
	.famio-flip-phone .famio-device { transform: none !important; }
}

/* =====================================================================
   v1.8.4 — pinned app bar (mobile only) · nav letter swap
   ===================================================================== */

/* --- 184.0 · families hero store pair — the get-app plates ----------
   Same size, radius, navy plate, sheen and type as .famio-getapp
   .famio-store, plus a hairline ring so the edge reads on the dark hero. */
.famio-ph10-cta.famio-ph10-stores { width: 100%; gap: .9rem; justify-content: center; flex-wrap: nowrap; }
.famio-ph10-stores .famio-store {
	flex: 0 1 12rem; max-width: 13rem; gap: .75rem;
	background: #0E203D !important; color: #fff !important;
	border-radius: 1rem; padding: .8rem 1.35rem;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 16px 32px -14px rgba(3,10,22,.6) !important;
	text-decoration: none !important;
}
.famio-ph10-stores .famio-store:hover { background: #16304F !important; filter: none; }
.famio-ph10-stores .famio-store * { color: #fff !important; }
.famio-ph10-stores .famio-store-text b { font-size: 1rem; }
.famio-ph10-stores .famio-store-text span { font-size: .74rem; }
@media (max-width: 767px) {
	.famio-ph10-cta.famio-ph10-stores { gap: .5rem; }
	.famio-ph10-stores .famio-store { flex: 0 1 8.6rem; max-width: 9rem; padding: .6rem .6rem; gap: .45rem; }
	.famio-ph10-stores .famio-store-text b { font-size: .9rem; }
	.famio-ph10-stores .famio-store-text span { font-size: .68rem; }
	.famio-ph10-stores .famio-store .famio-store-icon { width: 1.6rem; height: 1.6rem; }
	.famio-ph10-stores .famio-store .famio-store-icon svg { width: 1.35rem; height: 1.35rem; }
}

/* --- 184.1 · the pinned app bar -------------------------------------
   Widget "فايميو — شريط التطبيق الثابت (موبايل)".
   LIVE SITE: fixed at the bottom on mobile only, hidden on desktop.
   EDITOR: always shown as a static card (every breakpoint) so it can be
   found, selected and edited — v1.8.4 hid it in the desktop editor.
   Solid brand blue UNDER the gradient image so it is never transparent. */
.famio-appbar {
	box-sizing: border-box;
	display: flex !important; flex-direction: column; align-items: stretch; gap: .5rem;
	width: calc(100vw - 1.5rem); max-width: 30rem;
	direction: rtl; text-align: center;
	padding: .6rem !important; border-radius: 1.2rem;
	background-color: #0D3D7C !important;
	background-image: linear-gradient(120deg, #0D3D7C 0%, #146A82 52%, #1FA65B 100%) !important;
	box-shadow: 0 22px 46px -20px rgba(4,18,38,.7), inset 0 0 0 1px rgba(255,255,255,.14);
}
.famio-appbar-title {
	font-family: var(--famio-font-display); font-weight: 700;
	font-size: .8rem; line-height: 1.35; color: #fff !important;
}
.famio-appbar-actions { display: flex; gap: .5rem; justify-content: center; }
.famio-appbar .famio-store {
	flex: 1 1 0; max-width: none; justify-content: center;
	gap: .45rem; padding: .6rem .6rem;
	background: #0E203D !important; color: #fff !important;
	border-radius: 1rem;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
	text-decoration: none !important;
}
.famio-appbar .famio-store:hover { background: #16304F !important; filter: none; }
.famio-appbar .famio-store * { color: #fff !important; }
.famio-appbar .famio-store-text b { font-size: .9rem; }
.famio-appbar .famio-store-text span { font-size: .68rem; }
.famio-appbar .famio-store .famio-store-icon { width: 1.6rem; height: 1.6rem; }
.famio-appbar .famio-store .famio-store-icon svg { width: 1.35rem; height: 1.35rem; }

/* live site, desktop/tablet: gone */
@media (min-width: 768px) {
	body:not(.elementor-editor-active) .famio-appbar { display: none !important; }
}
/* live site, mobile: pinned */
@media (max-width: 767px) {
	body:not(.elementor-editor-active) .famio-appbar {
		position: fixed !important; z-index: 75;
		left: 50% !important; right: auto !important;
		bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)) !important;
		margin: 0 !important;
		transform: translate3d(-50%, 150%, 0); opacity: 0; pointer-events: none;
		transition: transform .7s cubic-bezier(.22,.75,.25,1), opacity .45s ease;
	}
	body:not(.elementor-editor-active) .famio-appbar.is-on { transform: translate3d(-50%, 0, 0); opacity: 1; pointer-events: auto; }
	body.famio-has-appbar .famio-qr,
	body:not(.elementor-editor-active):has(.famio-appbar) .famio-qr { display: none !important; }
}
/* editor: static card in place, with a label */
body.elementor-editor-active .famio-appbar {
	position: relative !important; left: auto !important; bottom: auto !important;
	transform: none !important; opacity: 1 !important; margin: 1rem auto !important;
}
body.elementor-editor-active .famio-appbar::before {
	content: "شريط التطبيق الثابت — يظهر على الموبايل فقط أسفل الشاشة";
	display: block; font-size: .7rem; color: rgba(255,255,255,.85);
}
@media (prefers-reduced-motion: reduce) {
	.famio-appbar { transition: opacity .2s ease !important; }
}

/* --- 184.3 · nav random letter swap ---------------------------------
   Each unit clips its own pair: the glyph leaves upward, its twin rises
   from below. Padding + negative margin give Arabic dots and descenders
   room inside the clip without changing the line box. */
.famio-swap {
	display: inline-flex; align-items: baseline;
	unicode-bidi: isolate; white-space: nowrap; line-height: inherit;
}
.famio-swap-ch {
	position: relative; display: inline-block; overflow: hidden;
	padding-block: .22em; margin-block: -.22em;
	line-height: inherit; vertical-align: baseline;
}
.famio-swap-a, .famio-swap-b {
	display: block; white-space: pre;
	transition: transform .6s cubic-bezier(.3,1.35,.55,1);
	transition-delay: var(--famio-swap-d, 0s);
	will-change: auto;
}
.famio-swap-b {
	position: absolute; inset-inline: 0; top: .22em;
	transform: translate3d(0, 135%, 0);
}
.famio-swap-sp { display: inline-block; width: .28em; }
.famio-nav-link.is-swapping .famio-swap-a { transform: translate3d(0, -135%, 0); }
.famio-nav-link.is-swapping .famio-swap-b { transform: translate3d(0, 0, 0); }
.famio-nav-link.is-swap-reset .famio-swap-a,
.famio-nav-link.is-swap-reset .famio-swap-b { transition: none !important; }

/* =====================================================================
   v1.8.7 — footer: commercial registration + VAT badges
   Desktop: a 4th column (far left), the two badges stacked and aligned
   with the contact rows (an invisible h4 keeps the top line even).
   Tablet / mobile: full-width row, the two badges SIDE BY SIDE.
   ===================================================================== */
.famio-footer-legal { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.famio-footer-legal .famio-legal-head { visibility: hidden; }
.famio-legal-item {
	display: flex; align-items: center; gap: .75rem; min-width: 0;
}
.famio-legal-img {
	flex: 0 0 auto; width: 3.25rem; height: 3.25rem;
	border-radius: .7rem; background: #fff; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 18px -10px rgba(3,10,22,.55);
}
.famio-legal-img img {
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: contain; display: block; margin: 0 !important;
}
.famio-legal-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; line-height: 1.35; }
.famio-legal-text b {
	font-family: var(--famio-font-display); font-weight: 700;
	font-size: .9rem; color: #fff;
}
.famio-legal-text .famio-ltr {
	font-size: .88rem; color: rgba(232,241,248,.78);
	letter-spacing: .04em; font-variant-numeric: tabular-nums;
	text-align: right; overflow-wrap: anywhere;
}
@media (min-width: 1024px) {
	.famio-footer-grid:has(.famio-footer-legal) { grid-template-columns: 1.3fr .7fr 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 1023px) {
	.famio-footer-legal {
		grid-column: 1 / -1;
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
	}
	.famio-footer-legal .famio-legal-head { display: none; }
	.famio-legal-item {
		padding: .6rem; border-radius: .9rem;
		background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
	}
}
@media (max-width: 767px) {
	.famio-footer-legal { gap: .5rem; }
	.famio-legal-item { gap: .5rem; padding: .5rem; }
	.famio-legal-img { width: 2.6rem; height: 2.6rem; border-radius: .55rem; }
	.famio-legal-text b { font-size: .78rem; }
	.famio-legal-text .famio-ltr { font-size: .76rem; letter-spacing: .02em; }
}
/* narrow phones: image on top, text centred — the 10-digit number never breaks */
.famio-legal-text .famio-ltr { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 400px) {
	.famio-legal-item { flex-direction: column; align-items: center; text-align: center; gap: .4rem; padding: .6rem .4rem; }
	.famio-legal-text { align-items: center; }
	.famio-legal-text .famio-ltr { text-align: center; }
}