/* =============================================================
 Pharmacology — Modernization layer (modern.css)
 Loaded AFTER styles.css + pages.css on every public page.
 Owned by: Foundation Agent (Agent 1).
 --------------------------------------------------------------
 Design language: editorial B&W paper + warm sage accent, with
 refined glassmorphism (hairline-on-paper, NOT 2014 frosted).
 Mobile-first. No external deps. Respects prefers-reduced-motion.

 Shared vocabulary (consumed by all sibling page agents):

 Glass:  .glass .glass-strong .glass-soft .glass-card .glass-pill
 Motion:  .reveal .reveal-up .reveal-stagger .lift .smooth-link
 Rhythm:  .rhythm-tight .rhythm-normal .rhythm-loose .eyebrow-modern
 Cues:  .commit-soft .micro-arrow
 Chrome:  .scroll-progress .is-scrolled .is-visible
 ============================================================= */

/* -------------------------------------------------------------
 TOKENS (extends styles.css :root)
 ------------------------------------------------------------- */
:root {
 /* Motion tokens — agents reference these */
 --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
 --ease-in-out-2:  cubic-bezier(0.65, 0, 0.35, 1);
 --dur-fast:  180ms;
 --dur-base:  320ms;
 --dur-slow:  520ms;

 /* Glass tokens — agents reference these */
 --glass-blur:  14px;
 --glass-blur-strong: 22px;
 --glass-bg:  rgba(244, 241, 234, 0.62);
 --glass-bg-strong: rgba(244, 241, 234, 0.78);
 --glass-bg-soft:  rgba(244, 241, 234, 0.45);
 --glass-border:  rgba(20, 17, 15, 0.08);
 --glass-border-strong: rgba(20, 17, 15, 0.12);
 --glass-shadow:  0 10px 30px -12px rgba(20, 17, 15, 0.18), 0 2px 6px rgba(20, 17, 15, 0.05);
 --glass-shadow-lift: 0 18px 42px -14px rgba(20, 17, 15, 0.22), 0 4px 12px rgba(20, 17, 15, 0.06);

 /* Stagger step for .reveal-stagger children (modern.js sets --d) */
 --stagger-step: 60ms;
}

/* -------------------------------------------------------------
 BASELINE GLOBALS — small upgrades on top of styles.css
 ------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
 -webkit-overflow-scrolling: touch;
}
.scroll-y, .modal, .drawer, .mobile-menu {
 -webkit-overflow-scrolling: touch;
}

/* Better selection in brand palette */
::selection  { background: var(--accent-pale); color: var(--ink); }
::-moz-selection { background: var(--accent-pale); color: var(--ink); }

/* A11y: keyboard focus ring (replaces stripped browser defaults).
 Doesn't fight existing field focus rings in styles.css. */
:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
 border-radius: 4px;
}
.btn:focus-visible,
.header-cta:focus-visible,
.glass-pill:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 3px;
}

/* -------------------------------------------------------------
 SCROLL PROGRESS BAR
 ------------------------------------------------------------- */
.scroll-progress {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: var(--accent);
 transform: scaleX(0);
 transform-origin: left center;
 z-index: 999;
 pointer-events: none;
 mix-blend-mode: multiply;
 transition: opacity var(--dur-base) var(--ease-out-soft);
 will-change: transform;
}
html[dir="rtl"] .scroll-progress { transform-origin: right center; }
@media (prefers-reduced-motion: reduce) {
 .scroll-progress { display: none; }
}

/* -------------------------------------------------------------
 GLASS SURFACES
 ------------------------------------------------------------- */
.glass {
 background: var(--glass-bg);
 -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
 backdrop-filter: saturate(160%) blur(var(--glass-blur));
 border: 1px solid var(--glass-border);
}
.glass-strong {
 background: var(--glass-bg-strong);
 -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur-strong));
 backdrop-filter: saturate(180%) blur(var(--glass-blur-strong));
 border: 1px solid var(--glass-border-strong);
}
.glass-soft {
 background: var(--glass-bg-soft);
 -webkit-backdrop-filter: saturate(140%) blur(10px);
 backdrop-filter: saturate(140%) blur(10px);
 border: 1px solid var(--glass-border);
}
.glass-card {
 background: var(--glass-bg);
 -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
 backdrop-filter: saturate(160%) blur(var(--glass-blur));
 border: 1px solid var(--glass-border);
 border-radius: 14px;
 padding: 1.25rem;
 box-shadow: var(--glass-shadow);
 transition: transform var(--dur-base) var(--ease-out-soft),
 box-shadow var(--dur-base) var(--ease-out-soft),
 border-color var(--dur-base) var(--ease-out-soft);
}
@media (min-width: 720px) {
 .glass-card { padding: 1.4rem; }
}
.glass-card.lift:hover,
.glass-card.lift:focus-within {
 transform: translateY(-2px);
 box-shadow: var(--glass-shadow-lift);
 border-color: var(--glass-border-strong);
}

.glass-pill {
 display: inline-flex;
 align-items: center;
 gap: 0.45rem;
 min-height: 44px;
 padding: 0.55rem 1.1rem;
 border-radius: 999px;
 background: var(--glass-bg);
 -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
 backdrop-filter: saturate(160%) blur(var(--glass-blur));
 border: 1px solid var(--glass-border);
 color: var(--ink);
 font-size: 0.85rem;
 font-weight: 500;
 letter-spacing: 0.02em;
 line-height: 1;
 cursor: pointer;
 transition: transform var(--dur-fast) var(--ease-out-soft),
 box-shadow var(--dur-fast) var(--ease-out-soft),
 background var(--dur-fast) var(--ease-out-soft),
 border-color var(--dur-fast) var(--ease-out-soft);
}
.glass-pill:hover,
.glass-pill:focus-visible {
 transform: translateY(-1px);
 background: var(--glass-bg-strong);
 border-color: var(--glass-border-strong);
 box-shadow: var(--glass-shadow);
}
html[dir="rtl"] .glass-pill { letter-spacing: 0; font-weight: 600; font-size: 0.95rem; }

/* Fallback for browsers without backdrop-filter — slightly more opaque
 so the surface still reads as a card. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 .glass,
 .glass-card,
 .glass-pill  { background: rgba(244, 241, 234, 0.92); }
 .glass-strong  { background: rgba(244, 241, 234, 0.96); }
 .glass-soft  { background: rgba(244, 241, 234, 0.85); }
}

/* -------------------------------------------------------------
 HEADER — gentle glass intensification on scroll
 modern.js toggles .is-scrolled on .site-header > 24px.
 We coexist with styles.css's existing .scrolled (set at >8).
 ------------------------------------------------------------- */
.site-header {
 transition: background var(--dur-base) var(--ease-out-soft),
 box-shadow  var(--dur-base) var(--ease-out-soft),
 border-color var(--dur-base) var(--ease-out-soft),
 backdrop-filter var(--dur-base) var(--ease-out-soft);
}
.site-header.is-scrolled {
 background: var(--glass-bg-strong);
 -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur-strong));
 backdrop-filter: saturate(180%) blur(var(--glass-blur-strong));
 border-bottom-color: var(--glass-border-strong);
 box-shadow: 0 8px 24px -16px rgba(20, 17, 15, 0.18);
}

/* -------------------------------------------------------------
 REVEAL-ON-SCROLL
 New API: .reveal / .reveal-up activate via .is-visible
 Coexists with legacy styles.css .reveal.in (kept working).
 ------------------------------------------------------------- */
.reveal,
.reveal-up {
 opacity: 0;
 transform: translateY(8px);
 transition: opacity var(--dur-base) var(--ease-out-soft),
 transform var(--dur-base) var(--ease-out-soft);
 will-change: opacity, transform;
}
.reveal-up {
 transform: translateY(16px);
 transition-duration: var(--dur-slow);
}

.reveal.is-visible,
.reveal-up.is-visible,
.reveal.in,
.reveal-up.in {
 opacity: 1;
 transform: none;
}

/* Stagger: parent observed; children get translate + opacity
 with per-index delay via --d (set in modern.js).
 We delay the START of the children's transitions, but the parent's
 .is-visible still triggers them all. */
.reveal-stagger > * {
 opacity: 0;
 transform: translateY(10px);
 transition: opacity var(--dur-base) var(--ease-out-soft),
 transform var(--dur-base) var(--ease-out-soft);
 transition-delay: calc(var(--d, 0) * var(--stagger-step));
 will-change: opacity, transform;
}
.reveal-stagger.is-visible > * {
 opacity: 1;
 transform: none;
}

/* Reduce motion intensity on smaller viewports — keep it gentle on phones */
@media (max-width: 480px) {
 .reveal-up  { transform: translateY(10px); }
 .reveal-stagger > * { transform: translateY(6px); }
}

/* prefers-reduced-motion: show everything immediately, no transform */
@media (prefers-reduced-motion: reduce) {
 .reveal,
 .reveal-up,
 .reveal-stagger > * {
 opacity: 1 !important;
 transform: none !important;
 transition: none !important;
 }
}

/* -------------------------------------------------------------
 LIFT — subtle hover lift for cards / tiles
 ------------------------------------------------------------- */
.lift {
 transition: transform var(--dur-fast) var(--ease-out-soft),
 box-shadow var(--dur-fast) var(--ease-out-soft);
}
.lift:hover,
.lift:focus-visible,
.lift:focus-within {
 transform: translateY(-1px);
 box-shadow: var(--glass-shadow);
}
@media (hover: none) {
 /* Don't show hover lift on touch devices */
 .lift:hover { transform: none; box-shadow: none; }
}

/* -------------------------------------------------------------
 SMOOTH-LINK — animated underline (LTR + RTL)
 ------------------------------------------------------------- */
.smooth-link {
 position: relative;
 color: inherit;
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 text-decoration: none;
}
.smooth-link::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: -2px;
 height: 1px;
 background: currentColor;
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 280ms var(--ease-out-soft);
 opacity: 0.75;
}
.smooth-link:hover::after,
.smooth-link:focus-visible::after {
 transform: scaleX(1);
}
html[dir="rtl"] .smooth-link::after { transform-origin: right center; }

/* -------------------------------------------------------------
 RHYTHM — page section vertical pace
 Build on top of styles.css .section padding without using !important.
 ------------------------------------------------------------- */
.section.rhythm-tight {
 padding-top: calc(var(--space-10) * 0.7);
 padding-bottom: calc(var(--space-10) * 0.7);
}
.section.rhythm-normal {
 padding-top: var(--space-10);
 padding-bottom: var(--space-10);
}
.section.rhythm-loose {
 padding-top: calc(var(--space-10) * 1.3);
 padding-bottom: calc(var(--space-10) * 1.3);
}
@media (min-width: 768px) {
 .section.rhythm-tight {
 padding-top: calc(var(--space-12) * 0.7);
 padding-bottom: calc(var(--space-12) * 0.7);
 }
 .section.rhythm-normal {
 padding-top: var(--space-12);
 padding-bottom: var(--space-12);
 }
 .section.rhythm-loose {
 padding-top: calc(var(--space-12) * 1.3);
 padding-bottom: calc(var(--space-12) * 1.3);
 }
}

/* -------------------------------------------------------------
 EYEBROW (MODERN) — refined alternative to styles.css .eyebrow
 Lower contrast, narrower letter-spacing — used on long pages
 where the bold rule + 18% tracking is too loud.
 ------------------------------------------------------------- */
.eyebrow-modern {
 display: inline-block;
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--grey-500);
 opacity: 0.85;
 margin-bottom: 0.75rem;
 line-height: 1.4;
}
html[dir="rtl"] .eyebrow-modern {
 letter-spacing: 0;
 text-transform: none;
 font-size: 0.85rem;
 font-weight: 600;
 opacity: 0.9;
}

/* -------------------------------------------------------------
 FUNNEL CUES — subtle, never pushy
 ------------------------------------------------------------- */
.commit-soft {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 0.82rem;
 font-weight: 500;
 color: var(--grey-500);
 font-style: normal;
 letter-spacing: 0.005em;
 line-height: 1.5;
}
.commit-soft::before {
 content: "";
 width: 6px;
 height: 6px;
 border-radius: 999px;
 background: var(--accent);
 flex-shrink: 0;
 position: relative;
 box-shadow: 0 0 0 0 rgba(110, 167, 184, 0.45);
 animation: commitPulse 2s var(--ease-out-soft) infinite;
}
html[dir="rtl"] .commit-soft { font-size: 0.92rem; letter-spacing: 0; }

@keyframes commitPulse {
 0%  { box-shadow: 0 0 0 0  rgba(110, 167, 184, 0.40); transform: scale(1); }
 70%  { box-shadow: 0 0 0 6px rgba(110, 167, 184, 0);  transform: scale(1.05); }
 100% { box-shadow: 0 0 0 0  rgba(110, 167, 184, 0);  transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
 .commit-soft::before { animation: none; }
}

.micro-arrow {
 position: relative;
 display: inline-flex;
 align-items: center;
}
.micro-arrow::after {
 content: "›";
 display: inline-block;
 margin-inline-start: 0.4em;
 font-size: 1.1em;
 line-height: 1;
 transform: translateX(0);
 transition: transform var(--dur-fast) var(--ease-out-soft);
 opacity: 0.8;
}
.micro-arrow:hover::after,
.micro-arrow:focus-visible::after {
 transform: translateX(3px);
 opacity: 1;
}
html[dir="rtl"] .micro-arrow::after {
 content: "‹";
 transform: translateX(0);
}
html[dir="rtl"] .micro-arrow:hover::after,
html[dir="rtl"] .micro-arrow:focus-visible::after {
 transform: translateX(-3px);
}

/* -------------------------------------------------------------
 TOUCH TARGETS — guarantee ≥44px on common controls on phones
 (only when smaller — never shrinks existing controls)
 ------------------------------------------------------------- */
@media (max-width: 720px) {
 .glass-pill,
 .smooth-link,
 .micro-arrow {
 min-height: 44px;
 }
}

/* -------------------------------------------------------------
 CROSS-DOCUMENT VIEW TRANSITIONS
 Modern browsers (Chrome 126+, Safari 18+) honor the meta tag
 <meta name="view-transition" content="same-origin"> on every page.
 Older browsers ignore the at-rule and the ::view-transition pseudo-
 elements — graceful no-op.
 ------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
 animation-duration: var(--dur-base);
 animation-timing-function: var(--ease-out-soft);
}
::view-transition-old(root) { animation-name: pk-fade-out; }
::view-transition-new(root) { animation-name: pk-fade-in;  }
@keyframes pk-fade-out { to  { opacity: 0; transform: translateY(-4px); } }
@keyframes pk-fade-in  { from { opacity: 0; transform: translateY(6px);  } }

/* Header + footer stay put across navigations (no fade) so the chrome
 feels like a single shell, not separate pages. */
.site-header,
.site-footer,
.fab-whatsapp,
.scroll-progress {
 view-transition-name: pk-chrome-fragment-fallback;
}
.site-header  { view-transition-name: pk-header; }
.site-footer  { view-transition-name: pk-footer; }
.fab-whatsapp  { view-transition-name: pk-fab; }
.scroll-progress { view-transition-name: pk-progress; }

@media (prefers-reduced-motion: reduce) {
 ::view-transition-old(root),
 ::view-transition-new(root) { animation: none !important; }
}

/* -------------------------------------------------------------
 FINER LIVE-FEEL TOUCHES
 ------------------------------------------------------------- */

/* Tap-on-mobile: soft press feedback for interactive cards */
@media (hover: none) {
 .glass-card.lift:active,
 .lift:active {
 transform: translateY(0);
 box-shadow: var(--glass-shadow);
 }
}

/* Selection on input fields shouldn't tint the text */
input::selection, textarea::selection { background: var(--accent-pale); }

/* Prevent stretched glass cards inside flex rows (Safari edge case) */
.glass-card { will-change: transform; }

/* Inputs: subtle ring when focused (keeps existing brand styles) */
.input:focus,
.input:focus-visible,
input.input:focus, textarea.input:focus, select.input:focus {
 box-shadow: 0 0 0 4px rgba(110, 167, 184, 0.16);
 border-color: var(--accent-deep);
}

/* Skeleton loader for async content (used by dashboard / admin in future) */
.skel {
 background: linear-gradient(90deg,
 var(--paper-2) 0%,
 var(--paper-3) 40%,
 var(--paper-2) 80%);
 background-size: 200% 100%;
 animation: pk-skel 1400ms linear infinite;
 border-radius: 8px;
 color: transparent;
}
@keyframes pk-skel { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Bilingual currency / number cleanup */
[data-price-usd], [data-price-egp], [data-price-sar], [data-price-aed], .num {
 font-variant-numeric: tabular-nums;
 font-feature-settings: "tnum" 1;
}

/* Reveal class — when JS hasn't booted yet, don't show a blank flash.
 Tiny FOUC guard: if `.no-js-reveal` is on the html element, skip. */
html.no-js .reveal,
html.no-js .reveal-up,
html.no-js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }

/* =================================================================
 HARD GLASS OVERRIDES — visible against the warm paper page bg.
 The original styles.css site-header used rgba(244,241,234,0.90) which
 reads as a flat tan bar (the page bg is already paper) — no glass.
 These rules drop opacity, strengthen blur, add a hairline + soft
 shadow so the glass effect actually *reads*.
 ================================================================= */

/* --- header: floating glass bar, always sticky, visible at first paint --- */
.site-header {
 position: sticky !important;
 top: 0 !important;
 z-index: 200 !important;
 background: rgba(244, 241, 234, 0.55) !important;
 -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
 backdrop-filter: saturate(180%) blur(22px) !important;
 border-bottom: 1px solid rgba(20, 17, 15, 0.06) !important;
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
 0 8px 24px -16px rgba(20, 17, 15, 0.10);
 transition:
 background  320ms var(--ease-out-soft),
 backdrop-filter 320ms var(--ease-out-soft),
 box-shadow  320ms var(--ease-out-soft),
 border-color  320ms var(--ease-out-soft);
}
.site-header.is-scrolled {
 background: rgba(244, 241, 234, 0.72) !important;
 -webkit-backdrop-filter: saturate(200%) blur(28px) !important;
 backdrop-filter: saturate(200%) blur(28px) !important;
 border-bottom-color: rgba(20, 17, 15, 0.10) !important;
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
 0 14px 32px -18px rgba(20, 17, 15, 0.22),
 0 2px 8px rgba(20, 17, 15, 0.04);
}
/* Safari without backdrop-filter — make it visibly different from the page */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 .site-header { background: rgba(244, 241, 234, 0.94) !important; box-shadow: 0 1px 0 rgba(20,17,15,0.06); }
}

/* --- nav links: alive hover pill --- */
.nav-links a {
 border-radius: 999px;
 padding: 0.55rem 0.85rem !important;
 transition: background 240ms var(--ease-out-soft), color 200ms;
}
.nav-links a:hover,
.nav-links a:focus-visible {
 background: rgba(20, 17, 15, 0.05);
 color: var(--ink);
}
.nav-links a[aria-current="page"] {
 background: rgba(20, 17, 15, 0.06);
 color: var(--ink);
}
.nav-links a[aria-current="page"]::after { display: none; } /* drop the old underline */

/* Header CTA — lift on hover */
.header-cta {
 border-radius: 999px !important;
 transition: transform 200ms var(--ease-out-soft),
 box-shadow  200ms var(--ease-out-soft),
 background  200ms var(--ease-out-soft);
}
.header-cta:hover {
 transform: translateY(-1px);
 box-shadow: 0 8px 22px -12px rgba(20, 17, 15, 0.35);
}

/* Currency trigger / lang toggle / menu toggle — match nav style */
.ccy-trigger, .lang-toggle, .menu-toggle {
 border-radius: 999px !important;
 transition: background 200ms var(--ease-out-soft), color 200ms;
}
.ccy-trigger:hover, .lang-toggle:hover, .menu-toggle:hover {
 background: rgba(20, 17, 15, 0.06);
}

/* --- Currency dropdown: real glass --- */
.ccy-menu {
 background: rgba(244, 241, 234, 0.78) !important;
 -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
 backdrop-filter: saturate(180%) blur(22px) !important;
 border: 1px solid rgba(20, 17, 15, 0.08) !important;
 box-shadow: 0 18px 42px -14px rgba(20, 17, 15, 0.25),
 0 2px 6px rgba(20, 17, 15, 0.05) !important;
 border-radius: 14px !important;
}

/* --- Mega menu dropdown: heavier glass + clear elevation --- */
.has-mega > .mega {
 background: rgba(244, 241, 234, 0.78) !important;
 -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
 backdrop-filter: saturate(180%) blur(24px) !important;
 border: 1px solid rgba(20, 17, 15, 0.08) !important;
 box-shadow: 0 24px 48px -18px rgba(20, 17, 15, 0.28),
 0 4px 12px rgba(20, 17, 15, 0.06) !important;
 border-radius: 16px !important;
}

/* --- Mobile menu drawer: glass with backdrop-shade behind it --- */
.mobile-menu {
 background: rgba(244, 241, 234, 0.82) !important;
 -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
 backdrop-filter: saturate(180%) blur(28px) !important;
 border-top: 1px solid rgba(20, 17, 15, 0.08);
 box-shadow: 0 -2px 0 rgba(255,255,255,0.4) inset,
 0 18px 40px -10px rgba(20, 17, 15, 0.18);
}
.mobile-menu a {
 border-bottom-color: rgba(20, 17, 15, 0.06) !important;
 border-radius: 0;
 padding-inline: 0.4rem;
 transition: padding 200ms var(--ease-out-soft), color 200ms;
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible {
 padding-inline-start: 0.9rem;
 color: var(--ink);
}

/* --- Announce bar: subtle glass instead of opaque strip
 (real class is .announce, not .announce-bar) --- */
.announce, .announce-bar {
 background: rgba(20, 17, 15, 0.94) !important;
 color: var(--paper) !important;
 -webkit-backdrop-filter: saturate(140%) blur(8px);
 backdrop-filter: saturate(140%) blur(8px);
}
.announce a, .announce-bar a {
 color: var(--paper) !important;
 font-weight: 600;
 text-decoration: none;
 border-bottom: 1px solid rgba(255,255,255,0.35);
 padding-bottom: 1px;
 transition: border-color 200ms;
}
.announce a:hover, .announce-bar a:hover { border-bottom-color: var(--accent-soft); }
.announce strong, .announce-bar strong { color: var(--accent-soft); font-weight: 600; }
.announce .pulse-dot {
 display: inline-block; width: 6px; height: 6px; border-radius: 50%;
 background: var(--accent-soft);
 box-shadow: 0 0 0 0 rgba(191, 230, 211, 0.6);
 animation: pk-pulse-dot 2.2s ease-out infinite;
 vertical-align: middle; margin-inline-end: 0.5rem;
}
@keyframes pk-pulse-dot {
 0%, 100% { box-shadow: 0 0 0 0 rgba(191, 230, 211, 0.6); }
 50%  { box-shadow: 0 0 0 6px rgba(191, 230, 211, 0); }
}
@media (prefers-reduced-motion: reduce) {
 .announce .pulse-dot { animation: none; }
}

/* --- WhatsApp FAB: glass pill float --- */
.fab-whatsapp,
.whatsapp-fab,
[data-fab="whatsapp"] {
 -webkit-backdrop-filter: saturate(180%) blur(12px);
 backdrop-filter: saturate(180%) blur(12px);
 box-shadow: 0 18px 40px -14px rgba(37, 211, 102, 0.45),
 0 2px 8px rgba(20, 17, 15, 0.08);
 transition: transform 240ms var(--ease-out-soft),
 box-shadow 240ms var(--ease-out-soft);
}
.fab-whatsapp:hover,
.whatsapp-fab:hover,
[data-fab="whatsapp"]:hover {
 transform: translateY(-2px) scale(1.04);
 box-shadow: 0 26px 50px -16px rgba(37, 211, 102, 0.55),
 0 4px 12px rgba(20, 17, 15, 0.10);
}

/* =================================================================
 GLASS-CARD — make it visible against warm paper page background.
 Drops paper bg opacity, adds a hairline-white inner highlight
 ("knife edge" of glass) + soft outer shadow. This is the trick
 to making "paper-on-paper" glass actually read.
 ================================================================= */
.glass-card {
 background: rgba(255, 255, 255, 0.50) !important;
 -webkit-backdrop-filter: saturate(160%) blur(18px) !important;
 backdrop-filter: saturate(160%) blur(18px) !important;
 border: 1px solid rgba(20, 17, 15, 0.07) !important;
 box-shadow:
 0 1px 0 rgba(255, 255, 255, 0.65) inset,
 0 16px 36px -16px rgba(20, 17, 15, 0.18),
 0 2px 8px rgba(20, 17, 15, 0.04) !important;
}
.glass-card.lift:hover,
.glass-card.lift:focus-within {
 background: rgba(255, 255, 255, 0.62) !important;
 border-color: rgba(20, 17, 15, 0.10) !important;
 box-shadow:
 0 1px 0 rgba(255, 255, 255, 0.75) inset,
 0 24px 50px -18px rgba(20, 17, 15, 0.26),
 0 4px 12px rgba(20, 17, 15, 0.06) !important;
}

/* glass-soft: subtle but still visible */
.glass-soft {
 background: rgba(255, 255, 255, 0.38) !important;
 -webkit-backdrop-filter: saturate(150%) blur(12px) !important;
 backdrop-filter: saturate(150%) blur(12px) !important;
 border: 1px solid rgba(20, 17, 15, 0.06) !important;
 border-radius: 12px;
 padding: 0.9rem 1rem;
}

/* glass-strong: maximum visibility (used on sticky chrome only) */
.glass-strong {
 background: rgba(255, 255, 255, 0.62) !important;
 -webkit-backdrop-filter: saturate(200%) blur(28px) !important;
 backdrop-filter: saturate(200%) blur(28px) !important;
 border: 1px solid rgba(20, 17, 15, 0.10) !important;
 box-shadow:
 0 1px 0 rgba(255, 255, 255, 0.7) inset,
 0 18px 42px -16px rgba(20, 17, 15, 0.22);
}

/* Glass-pill: visible pill button */
.glass-pill {
 background: rgba(255, 255, 255, 0.46) !important;
 -webkit-backdrop-filter: saturate(170%) blur(14px) !important;
 backdrop-filter: saturate(170%) blur(14px) !important;
 border: 1px solid rgba(20, 17, 15, 0.08) !important;
 box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
 0 6px 18px -10px rgba(20,17,15,0.18);
}
.glass-pill:hover {
 background: rgba(255, 255, 255, 0.62) !important;
 transform: translateY(-1px);
}

/* Fallback when backdrop-filter is unavailable — keep contrast */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 .glass-card  { background: rgba(255, 255, 255, 0.85) !important; }
 .glass-strong { background: rgba(255, 255, 255, 0.92) !important; }
 .glass-soft  { background: rgba(255, 255, 255, 0.70) !important; }
 .glass-pill  { background: rgba(255, 255, 255, 0.80) !important; }
 .ccy-menu, .has-mega > .mega, .mobile-menu { background: rgba(244, 241, 234, 0.96) !important; }
}

/* Mobile: tighten the header so the menu doesn't crowd */
@media (max-width: 720px) {
 .site-header { box-shadow: 0 8px 20px -16px rgba(20,17,15,0.12); }
 .site-header.is-scrolled { box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 28px -16px rgba(20,17,15,0.22); }
}

/* =================================================================
   WHATSAPP FAB — anchor to bottom safe-area (2026 best practices)
   Existing styles.css pushes FAB to bottom: 5.2rem on mobile (too high).
   Reset to ~1rem with env(safe-area-inset-bottom) respect.
   ================================================================= */
.fab-whats {
  bottom: var(--fab-offset-y, max(1rem, env(safe-area-inset-bottom))) !important;
  inset-inline-end: var(--fab-offset-x, 1rem) !important;
  width: var(--fab-size) !important;
  height: var(--fab-size) !important;
  z-index: var(--z-fab, 300) !important;
}
@media (max-width: 720px) {
  .fab-whats {
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    width: var(--fab-size-sm) !important;
    height: var(--fab-size-sm) !important;
  }
  .fab-whats::after { display: none; } /* drop the pulse ring on mobile — cleaner */
}
/* If a sticky bottom CTA bar is visible, push FAB above it */
body:has(.sticky-cta) .fab-whats { bottom: calc(5.2rem + env(safe-area-inset-bottom)) !important; }

/* =================================================================
   MOBILE MENU — backdrop, close button, smooth slide-in
   ================================================================= */
.mobile-menu-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 17, 15, 0.42);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: var(--z-overlay, 800);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-soft);
}
.mobile-menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu {
  /* Override styles.css full-screen drawer.
     Anchor the drawer to the END edge of the inline axis; hide via inset
     (not transform — transform-percent is computed off the ELEMENT width,
     which leaks a sliver when width < 100vw). */
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  width: min(86vw, 360px) !important;
  max-width: 92vw;
  z-index: var(--z-drawer, 850) !important;
  padding: 4.5rem 1.4rem 1.4rem !important;
  transform: translateX(110%); /* slide off in inline-end direction */
  transition: transform var(--dur-base) var(--ease-out-soft),
              visibility 0s linear var(--dur-base);
  visibility: hidden;
  background: rgba(244, 241, 234, 0.96) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
          backdrop-filter: saturate(180%) blur(28px) !important;
  border-inline-start: 1px solid var(--rule);
  border-inline-end: 0;
  box-shadow: var(--shadow-5);
  display: flex !important;
  flex-direction: column;
  gap: 0.15rem;
  overflow-y: auto;
  pointer-events: none;
}
/* RTL: in RTL, "inline-end" is LEFT — so drawer comes from LEFT.
   transform: translateX positive value moves toward visual-right; in RTL
   the engine flips it automatically. We use the same translate(110%)
   logical direction because logical-axis values respect dir. */
html[dir="rtl"] .mobile-menu {
  transform: translateX(-110%); /* visual-left (off-screen in RTL) */
  border-inline-start: 0;
  border-inline-end: 1px solid var(--rule);
}
.mobile-menu.open {
  transform: translateX(0) !important;
  visibility: visible !important;
  transition: transform var(--dur-base) var(--ease-out-soft),
              visibility 0s;
  pointer-events: auto;
}

.mobile-menu-close {
  position: absolute;
  top: 0.9rem;
  inset-inline-end: 0.9rem;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(20, 17, 15, 0.06);
  border: 0;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft),
              transform   var(--dur-fast) var(--ease-out-soft);
  z-index: 1;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus-visible {
  background: rgba(20, 17, 15, 0.10);
  transform: rotate(90deg);
}

/* When menu is open, prevent body scroll-bleed (we already set overflow:hidden in JS) */

/* =================================================================
   PRE-MOUNT FOUC GUARDS — keep the page in the right direction
   from first paint, even before shared.js mounts the nav.
   The early script in shared.js sets html[dir] synchronously, so
   anything that reads `[dir]` from CSS will be correct on first paint.
   ================================================================= */

/* =================================================================
   HERO REDESIGN — kill the 1990s newspaper text-wrap.
   The existing styles.css floats .hero-mobile-portrait left/right
   so paragraph text wraps around it (looks like a Word doc, not
   a 2026 product page). Override with a clean stacked layout:
   eyebrow → headline → portrait-card (rounded, soft shadow,
   accent ring) → lede → CTAs → commit-soft → trust badges.
   ================================================================= */
.hero {
  position: relative;
  padding-block: var(--space-5, 1.5rem) var(--space-6, 2rem) !important;
  isolation: isolate;
}
.hero::before {
  /* Subtle accent-tinted radial behind the hero so it feels modern */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(191, 230, 211, 0.30), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 30%, rgba(110, 167, 184, 0.10), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* Portrait — proper card, not floating around text */
.hero-mobile-portrait {
  /* Override styles.css float: left / float: right */
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 280px !important;
  height: auto !important;
  margin: var(--space-4, 1rem) auto var(--space-5, 1.5rem) !important;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-2xl, 24px);
  box-shadow:
    0 0 0 1px rgba(20, 17, 15, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 50px -18px rgba(20, 17, 15, 0.28),
    0 4px 14px rgba(20, 17, 15, 0.06);
  background: var(--color-paper-2, #ECE8DE);
  transition: transform var(--dur-base, 320ms) var(--ease-out-soft, ease-out),
              box-shadow var(--dur-base, 320ms) var(--ease-out-soft, ease-out);
}
.hero-mobile-portrait:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow:
    0 0 0 1px rgba(20, 17, 15, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 32px 60px -18px rgba(20, 17, 15, 0.32),
    0 6px 16px rgba(20, 17, 15, 0.08);
}
html[dir="rtl"] .hero-mobile-portrait {
  float: none !important;
  margin-inline: auto !important;
}

/* Hero headline — more breathing room, refined tracking */
.hero .display-1 {
  font-size: clamp(2rem, 8vw, 3rem) !important;
  letter-spacing: -0.02em;
  line-height: 1.08 !important;
  margin-block: var(--space-2, 0.5rem) var(--space-3, 0.75rem) !important;
}
@media (min-width: 720px) {
  .hero .display-1 { font-size: clamp(2.8rem, 5vw, 4rem) !important; }
}

/* Lede — bigger line-height for readability, no orphan letters */
.hero .lede {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.6 !important;
  color: var(--text-secondary, var(--grey-700));
  max-width: 38em;
}

/* Eyebrow — refined */
.hero .eyebrow {
  font-size: var(--fs-micro, 0.75rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey-500, #6E6A60);
  font-weight: 500;
}

/* CTA cluster — better spacing on mobile */
.hero a.btn {
  border-radius: var(--radius-pill, 999px);
}

/* Trust badges — modern chip row */
.hero-trust {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem) !important;
  margin-top: var(--space-4, 1rem);
}
.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-small, 0.86rem);
  color: var(--text-secondary, var(--grey-700));
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--rule, rgba(20,17,15,0.08));
  border-radius: var(--radius-pill, 999px);
  padding: 0.4rem 0.85rem;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.hero-trust-item svg { stroke: var(--color-accent-deep); }

/* Desktop: 2-column hero — portrait beside text instead of below */
@media (min-width: 880px) {
  .hero-primary {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: var(--space-6, 2rem) !important;
    align-items: center;
  }
  .hero-mobile-portrait {
    display: block !important;
    max-width: 360px !important;
    margin: 0 !important;
    /* On desktop, the portrait sits in the second column */
    order: 2;
    align-self: start;
    margin-block-start: var(--space-3, 0.75rem) !important;
  }
  .hero-primary > div:first-child { order: 1; }
}

/* Mobile-first: keep stacked + center portrait but place AFTER the headline,
   BEFORE the lede — feels intentional, not text-wrapped */
@media (max-width: 879px) {
  .hero-primary { display: flex; flex-direction: column; }
  .hero-mobile-portrait { order: 1.5; }  /* between headline and lede */
}

/* =================================================================
 MOBILE BUTTON SIZING — shrink overly large CTAs on phone widths.
 Default .btn is padding: 1rem 1.6rem (~16/26px) which on a 360px
 viewport eats the whole row. Tighten to 0.7rem 1.1rem / 0.92rem text.
 ================================================================= */
@media (max-width: 720px) {
 .btn {
 padding: 0.75rem 1.15rem !important;
 font-size: 0.88rem !important;
 gap: 0.45rem !important;
 letter-spacing: 0.02em;
 border-radius: 999px;
 }
 .btn-whats {
 padding: 0.75rem 1.15rem !important;
 }
 .header-cta {
 padding: 0.5rem 0.85rem !important;
 font-size: 0.78rem !important;
 }
 /* Hero CTA cluster on mobile: fill row evenly, but cap at sensible heights */
 .hero-cta .btn,
 .hero-cta-row .btn,
 .hero-cta a.btn {
 min-height: 44px;
 }
}
@media (max-width: 420px) {
 .btn  { padding: 0.7rem 1rem !important; font-size: 0.85rem !important; }
 .btn-whats  { padding: 0.7rem 1rem !important; font-size: 0.85rem !important; }
 .header-cta { padding: 0.45rem 0.75rem !important; font-size: 0.74rem !important; }
}

/* =================================================================
 ACCENT COLOR — use the brand teal more confidently throughout.
 ================================================================= */

/* Smooth-link underline → use brand accent instead of ink */
.smooth-link::after { background: var(--accent) !important; height: 1.5px !important; }

/* Eyebrow elements: subtle accent dash before the text */
.eyebrow::before,
.eyebrow-modern::before {
 content: "";
 display: inline-block;
 width: 14px; height: 1.5px;
 background: var(--accent);
 vertical-align: middle;
 margin-inline-end: 0.55rem;
 transform: translateY(-2px);
}

/* Bold inline emphasis: accent-tinted */
.lede strong, .legal-prose strong { color: var(--accent-deep); }

/* Stat numerals throughout the site — gentle accent */
.stat .num, .stats-list .num, [data-stat] .num,
.kpi .value, .a-kpi .value {
 color: var(--ink);
 background: linear-gradient(180deg, transparent 60%, rgba(110, 167, 184, 0.18) 60%);
 padding: 0 0.08em;
}

/* Highlight class — important words */
.hl, mark, .accent {
 background: linear-gradient(180deg, transparent 55%, var(--accent-soft) 55%);
 padding: 0 0.1em;
 color: var(--ink);
 font-weight: inherit;
}
.hl-strong {
 color: var(--accent-deep);
 font-weight: 600;
}
.hl-pill {
 display: inline-block;
 background: var(--accent-pale);
 color: var(--accent-deep);
 padding: 0.15rem 0.55rem;
 border-radius: 999px;
 font-size: 0.78em;
 font-weight: 600;
 letter-spacing: 0.04em;
}

/* Commit-soft pulse dot — gives it the accent */
.commit-soft::before {
 background: var(--accent) !important;
}

/* Focus rings now use brand teal (already in earlier section but reaffirm) */
:focus-visible { outline-color: var(--accent) !important; }

/* Section borders → subtle accent on hover for the bordered-section eyebrows */
.section-bordered .eyebrow { color: var(--accent-deep); }

/* Make .commit-soft text feel intentional, not muted-grey */
.commit-soft {
 color: var(--grey-700) !important;
 font-style: normal !important;
}
.commit-soft strong { color: var(--accent-deep); }

/* Trust badges / hero-trust chips → tiny accent check tint */
.hero-trust svg, .hero-trust-item svg { stroke: var(--accent-deep); }

/* Currency menu active item — accent backing instead of pure ink */
.ccy-menu button.active {
 background: var(--accent-deep) !important;
}
.ccy-menu button.active .ccy-flag { background: var(--paper) !important; color: var(--accent-deep) !important; }

/* Currency trigger: subtle accent ring */
.ccy-trigger { color: var(--ink); }
.ccy-select.open .ccy-trigger {
 background: rgba(110, 167, 184, 0.10) !important;
}

/* Glass-pill (in header etc.) — accent on hover */
.glass-pill:hover {
 border-color: rgba(110, 167, 184, 0.30) !important;
 color: var(--accent-deep);
}

/* Floating WhatsApp button: subtle accent ring on hover */
.fab-whatsapp:hover { outline: 2px solid var(--accent-soft); outline-offset: 4px; }

/* Tier card "most chosen" / "most balanced" pills — accent fill */
.glass-pill[class*="most"] { background: var(--accent-pale) !important; color: var(--accent-deep) !important; }

/* =================================================================
 RTL POLISH — ensure every directional arrow flips properly
 ================================================================= */
html[dir="rtl"] .ar-flip,
html[dir="rtl"] svg.ar-flip { transform: scaleX(-1); }

/* Any literal arrow leftover in body text: flip in RTL via unicode-bidi */
html[dir="rtl"] [data-flip-arrow] { unicode-bidi: bidi-override; }

/* .micro-arrow on RTL: ensure the after-content is the left-pointing chevron
 (already defined earlier but reaffirm to win cascade) */
html[dir="rtl"] .micro-arrow::after { content: "‹" !important; }
html[dir="rtl"] .micro-arrow { gap: 0; }

/* =================================================================
 ACCENT HIGHLIGHTS — <strong> inside copy gets the brand accent color.
 Applied to hero, ledes, eyebrows, titles, commit lines, and CTAs.
 Reads as "highlighted phrase" rather than "bolded word" — the weight
 stays semibold (not too heavy), the color does the lifting.
 ================================================================= */
.hero .eyebrow strong,
.hero .display-1 strong,
.hero .lede strong,
.hero .commit-soft strong,
.hero-trust-item strong,
.btn strong,
.section .display-2 strong,
.section .display-3 strong,
.section .lede strong,
.glass-card .display-3 strong,
.glass-card .lede strong,
.commit-soft strong {
  color: var(--color-accent-deep, #4A7E8E);
  font-weight: 600;
  /* subtle hairline under the highlighted phrase, accent-soft tint */
  background-image: linear-gradient(180deg, transparent 65%, rgba(110, 167, 184, 0.22) 65%, rgba(110, 167, 184, 0.22) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-block: 0.05em;
  border-radius: 2px;
  transition: background-color var(--dur-base, 320ms) var(--ease-out-soft, ease-out);
}

/* Hero display-1 highlight slightly stronger — it's the headline */
.hero .display-1 strong {
  color: var(--color-accent-deep, #4A7E8E);
  background-image: linear-gradient(180deg, transparent 72%, rgba(110, 167, 184, 0.28) 72%, rgba(110, 167, 184, 0.28) 94%, transparent 94%);
  font-weight: 600;
}

/* CTA <strong> stays the button text color (white on dark btn) — no underline */
.btn strong {
  color: inherit;
  background-image: none;
  font-weight: 600;
  padding: 0;
}

/* Eyebrow strong: just the accent color, no underline (eyebrows are micro) */
.hero .eyebrow strong,
.eyebrow strong,
.eyebrow-modern strong {
  color: var(--color-accent-deep, #4A7E8E);
  background-image: none;
  letter-spacing: inherit;
  font-weight: 600;
  padding: 0;
}

/* Hero trust chips: accent color for the bolded number */
.hero-trust-item strong {
  color: var(--color-accent-deep, #4A7E8E);
  background-image: none;
  font-weight: 600;
  padding: 0;
}

/* Commit lines (4 hours, etc.): subtler — just color, no underline */
.commit-soft strong,
.hero .commit-soft strong {
  color: var(--color-accent-deep, #4A7E8E);
  background-image: none;
  font-weight: 600;
  padding: 0;
}

/* Final CTA card titles — the $49 / 5-minute strongs read as anchors */
.glass-card .display-3 strong {
  color: var(--color-accent-deep, #4A7E8E);
  background-image: linear-gradient(180deg, transparent 70%, rgba(110, 167, 184, 0.24) 70%, rgba(110, 167, 184, 0.24) 92%, transparent 92%);
  font-weight: 600;
}

/* RTL: ensure highlight underline alignment isn't broken by text-orientation */
html[dir="rtl"] .hero .display-1 strong,
html[dir="rtl"] .section .display-2 strong,
html[dir="rtl"] .section .lede strong,
html[dir="rtl"] .hero .lede strong {
  background-position: 0 100%;
}