.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}/* Start custom CSS for text-editor, class: .elementor-element-0f593b2 *//* ================================================ FxMedSupport — Grandfather Pricing Page Scoped prefix: fxms-gp- Pair with: grandfather-pricing-section.html Font dependency: load Fraunces, Inter, JetBrains Mono from Google Fonts in your site . ================================================ */ :root { --fxms-gp-orange: #F89C0C; --fxms-gp-blue: #2384F4; --fxms-gp-navy: #062D60; --fxms-gp-cream: #FFF8EC; --fxms-gp-white: #FFFFFF; --fxms-gp-ink: #062D60; --fxms-gp-ink-muted: rgba(6, 45, 96, 0.62); --fxms-gp-ink-fade: rgba(6, 45, 96, 0.4); --fxms-gp-line: rgba(6, 45, 96, 0.12); --fxms-gp-shadow: 0 1px 2px rgba(6, 45, 96, 0.04), 0 8px 24px rgba(6, 45, 96, 0.06); --fxms-gp-shadow-hover: 0 1px 2px rgba(6, 45, 96, 0.04), 0 14px 36px rgba(6, 45, 96, 0.10); --fxms-gp-serif: 'Fraunces', Georgia, serif; --fxms-gp-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fxms-gp-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; } /* Reset / base scoped to section */ .fxms-gp-section *, .fxms-gp-section *::before, .fxms-gp-section *::after { box-sizing: border-box; } .fxms-gp-section { font-family: var(--fxms-gp-sans); color: var(--fxms-gp-ink); background: var(--fxms-gp-cream); padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 48px); line-height: 1.5; position: relative; overflow: hidden; } /* Decorative ambient elements */ .fxms-gp-section::before { content: ''; position: absolute; top: -200px; right: -200px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(248, 156, 12, 0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; } .fxms-gp-section::after { content: ''; position: absolute; bottom: -300px; left: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(35, 132, 244, 0.05) 0%, transparent 70%); pointer-events: none; z-index: 0; } .fxms-gp-container { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; } /* ================================================ Header ================================================ */ .fxms-gp-header { text-align: center; margin-bottom: clamp(56px, 8vw, 96px); opacity: 0; animation: fxmsGpFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards; } .fxms-gp-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--fxms-gp-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fxms-gp-ink-muted); margin-bottom: 28px; } .fxms-gp-eyebrow-dot { width: 4px; height: 4px; background: var(--fxms-gp-orange); border-radius: 50%; flex-shrink: 0; } .fxms-gp-headline { font-family: var(--fxms-gp-serif); font-weight: 500; font-size: clamp(48px, 9vw, 96px); line-height: 1.02; letter-spacing: -0.02em; color: var(--fxms-gp-navy); margin: 0 0 28px 0; } .fxms-gp-headline em { font-style: italic; color: var(--fxms-gp-orange); font-weight: 500; } .fxms-gp-lead { font-family: var(--fxms-gp-serif); font-weight: 400; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.55; color: var(--fxms-gp-ink); max-width: 720px; margin: 0 auto; } /* ================================================ Divider ================================================ */ .fxms-gp-divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin: clamp(56px, 8vw, 88px) 0; } .fxms-gp-divider-line { height: 1px; background: var(--fxms-gp-line); flex: 1; max-width: 200px; } .fxms-gp-divider-dot { width: 6px; height: 6px; background: var(--fxms-gp-orange); border-radius: 50%; } /* ================================================ How it works ================================================ */ .fxms-gp-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); margin-bottom: clamp(56px, 8vw, 88px); } .fxms-gp-how-item { opacity: 0; animation: fxmsGpFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .fxms-gp-how-item:nth-child(1) { animation-delay: 0.15s; } .fxms-gp-how-item:nth-child(2) { animation-delay: 0.25s; } .fxms-gp-how-item:nth-child(3) { animation-delay: 0.35s; } .fxms-gp-how-number { display: inline-block; font-family: var(--fxms-gp-serif); font-style: italic; font-weight: 500; font-size: 44px; line-height: 1; color: var(--fxms-gp-orange); margin-bottom: 16px; } .fxms-gp-how-title { font-family: var(--fxms-gp-serif); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--fxms-gp-navy); margin: 0 0 12px 0; } .fxms-gp-how-body { font-size: 15px; line-height: 1.6; color: var(--fxms-gp-ink-muted); margin: 0; } /* ================================================ Pricing cards ================================================ */ .fxms-gp-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: clamp(56px, 7vw, 80px); } .fxms-gp-card { background: var(--fxms-gp-white); border-radius: 4px; padding: 40px 32px 32px; box-shadow: var(--fxms-gp-shadow); position: relative; transition: box-shadow 0.4s ease, transform 0.4s ease; display: flex; flex-direction: column; opacity: 0; animation: fxmsGpFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; overflow: hidden; } .fxms-gp-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--fxms-gp-navy); transition: background 0.4s ease; } .fxms-gp-card--enterprise::before { background: var(--fxms-gp-orange); } .fxms-gp-card:hover { box-shadow: var(--fxms-gp-shadow-hover); transform: translateY(-2px); } .fxms-gp-card:nth-child(1) { animation-delay: 0.45s; } .fxms-gp-card:nth-child(2) { animation-delay: 0.55s; } .fxms-gp-card:nth-child(3) { animation-delay: 0.65s; } .fxms-gp-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; gap: 12px; } .fxms-gp-tier { font-family: var(--fxms-gp-serif); font-weight: 500; font-size: 32px; line-height: 1; letter-spacing: -0.01em; color: var(--fxms-gp-navy); } .fxms-gp-aster { color: var(--fxms-gp-orange); font-style: italic; margin-left: 2px; } .fxms-gp-badge { font-family: var(--fxms-gp-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fxms-gp-orange); background: rgba(248, 156, 12, 0.1); padding: 6px 10px; border-radius: 2px; white-space: nowrap; align-self: center; } /* Price stack */ .fxms-gp-price-stack { flex: 1; display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; } .fxms-gp-price-row { display: flex; flex-direction: column; gap: 4px; } .fxms-gp-price-label { font-family: var(--fxms-gp-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fxms-gp-ink-fade); } .fxms-gp-price-amt { font-family: var(--fxms-gp-serif); font-weight: 400; font-size: 28px; line-height: 1; color: var(--fxms-gp-ink-muted); letter-spacing: -0.01em; } .fxms-gp-price-amt--new { font-weight: 500; font-size: 52px; color: var(--fxms-gp-navy); } .fxms-gp-card--enterprise .fxms-gp-price-amt--new { color: var(--fxms-gp-orange); font-style: italic; font-size: 44px; } .fxms-gp-price-unit { font-family: var(--fxms-gp-sans); font-weight: 400; font-size: 14px; color: var(--fxms-gp-ink-muted); letter-spacing: 0; margin-left: 6px; } .fxms-gp-price-amt--new .fxms-gp-price-unit { font-size: 16px; vertical-align: 4px; } .fxms-gp-arrow { display: flex; align-items: center; gap: 10px; color: var(--fxms-gp-orange); } .fxms-gp-arrow-line { height: 1px; background: var(--fxms-gp-orange); flex: 1; opacity: 0.4; } .fxms-gp-arrow-icon { width: 14px; height: 14px; flex-shrink: 0; } .fxms-gp-card-note { font-size: 13px; line-height: 1.55; color: var(--fxms-gp-ink-muted); margin: 0; padding-top: 20px; border-top: 1px solid var(--fxms-gp-line); } /* ================================================ Footnotes ================================================ */ .fxms-gp-footnotes { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 72px); padding: 32px 0; border-top: 1px solid var(--fxms-gp-line); border-bottom: 1px solid var(--fxms-gp-line); } .fxms-gp-footnote { font-size: 14px; line-height: 1.65; color: var(--fxms-gp-ink-muted); margin: 0 0 14px 0; } .fxms-gp-footnote:last-child { margin-bottom: 0; } /* ================================================ Closing ================================================ */ .fxms-gp-closing { text-align: center; max-width: 600px; margin: 0 auto; } .fxms-gp-closing-quote { font-family: var(--fxms-gp-serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.45; color: var(--fxms-gp-navy); margin: 0 0 20px 0; } .fxms-gp-sign { font-family: var(--fxms-gp-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fxms-gp-orange); margin: 0; } /* ================================================ Responsive ================================================ */ @media (max-width: 900px) { .fxms-gp-how, .fxms-gp-pricing { grid-template-columns: 1fr; gap: 20px; } .fxms-gp-how { gap: 36px; } .fxms-gp-eyebrow { flex-wrap: wrap; justify-content: center; } } @media (max-width: 540px) { .fxms-gp-card { padding: 32px 24px 28px; } .fxms-gp-tier { font-size: 28px; } .fxms-gp-price-amt--new { font-size: 44px; } .fxms-gp-card--enterprise .fxms-gp-price-amt--new { font-size: 36px; } } /* ================================================ Animations ================================================ */ @keyframes fxmsGpFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .fxms-gp-header, .fxms-gp-how-item, .fxms-gp-card { opacity: 1 !important; animation: none !important; transform: none !important; } .fxms-gp-card:hover { transform: none; } }/* End custom CSS */