/* SYSTEM: REMY */
html {
scroll-behavior: smooth;
scroll-padding-top: 112px;
}
:root {
--wf-motion-ease-gentle: cubic-bezier(0.2, 0.8, 0.2, 1);
--wf-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--wf-motion-fast: 220ms;
--wf-motion-base: 280ms;
--wf-cta-lift-hover: -1.5px;
--wf-cta-lift-active: -0.75px;
--wf-cta-conv-bg: var(--wr-accent-yellow);
--wf-cta-conv-edge: var(--wr-accent-orange);
--wf-cta-conv-edge-size: 5px;
--wf-cta-conv-text: #2a1f16;
--wf-cta-sheen-mid-alpha: 0.34;
--wf-cta-sheen-opacity: 0.64;
--wf-cta-sheen-hover-opacity: 0.82;
--wf-section-dark-bg: var(--wr-ink);
--wf-on-dark: var(--wr-white);
--wf-on-dark-muted: rgba(255, 255, 255, 0.8);
--wf-dark-card-bg: rgba(255, 255, 255, 0.06);
--wf-dark-card-border: rgba(255, 255, 255, 0.18);
--wf-problem-card-bg: rgba(255, 255, 255, 0.75);
--wf-problem-card-hover-bg: rgba(255, 255, 255, 0.92);
--wf-problem-card-border: rgba(151, 144, 147, 0);
--wf-problem-card-text: var(--wr-ink);
--wf-pricing-pro-bg: linear-gradient(
180deg,
rgba(252, 184, 39, 0.2) 0%,
rgba(255, 255, 255, 0.9) 44%,
var(--wr-bg-panel-light) 100%
);
--wf-pricing-pro-shadow: 0 12px 24px rgba(243, 125, 57, 0.16);
--wf-pricing-pro-before-display: block;
--wf-hover-bg-subtle: #fbfcfd;
--wf-feedback-error: #d94f3a;
--wf-feedback-error-bg: #fde8e4;
--wf-feedback-warning: #c48a12;
--wf-feedback-warning-bg: #fef4dc;
--wf-feedback-success: #2e8e7a;
--wf-feedback-success-bg: #e4f5f1;
--wf-feedback-info: #3a7a94;
--wf-feedback-info-bg: #e6f1f5;
--wf-faq-hover-bg: var(--wf-hover-bg-subtle);
--wf-tenant-form-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), var(--wr-white));
--wf-tenant-form-border: rgba(151, 144, 147, 0.28);
--wf-tenant-form-shadow: 0 12px 24px rgba(48, 33, 39, 0.1);
--wf-tenant-form-gloss: linear-gradient(160deg, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0) 46%);
--wf-tenant-form-gloss-opacity: 1;
--wf-tenant-label-color: var(--wr-ink);
--wf-tenant-help-color: var(--wr-text-muted);
--wf-tenant-input-bg: var(--wr-bg-panel-light);
--wf-tenant-input-border: rgba(151, 144, 147, 0.36);
--wf-tenant-input-hover-border: rgba(243, 125, 57, 0.32);
--wf-tenant-input-color: var(--wr-ink);
--wf-tenant-input-placeholder: var(--wr-text-subtle);
--wf-tenant-input-focus-bg: var(--wr-white);
--wf-footer-shell-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), var(--wr-bg-panel-light));
--wf-footer-shell-border: rgba(151, 144, 147, 0.28);
--wf-footer-shell-shadow: 0 14px 28px rgba(48, 33, 39, 0.1);
--wf-footer-shell-gloss: linear-gradient(150deg, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0) 48%);
--wf-footer-shell-gloss-opacity: 0.82;
--wf-footer-copy-color: var(--wr-text-muted);
--wf-footer-link-color: var(--wr-text-muted);
--wf-footer-link-hover-color: var(--wr-ink);
--wf-footer-contact-color: var(--wr-text-muted);
--wf-footer-contact-icon: var(--wr-text-subtle);
--wf-footer-social-bg: var(--wr-white);
--wf-footer-social-border: rgba(151, 144, 147, 0.28);
--wf-footer-social-color: var(--wr-text-muted);
--wf-footer-bottom-border: rgba(151, 144, 147, 0.22);
--wf-footer-meta-color: var(--wr-text-muted);
--wf-footer-legal-color: var(--wr-text-muted);
--wf-pricing-toggle-active-color: var(--wf-cta-conv-text);
--wf-step-badge-yellow-text: var(--wf-cta-conv-text);
--wf-pricing-badge-bg: #fcb827;
--wf-pricing-badge-border: transparent;
--wf-pricing-badge-color: #2a1f16;
--wf-card-sheen-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0));
--wf-feature-hover-bg: var(--wf-hover-bg-subtle);
--wf-cap-testimonial-hover-bg: var(--wf-hover-bg-subtle);
--wf-email-shell-bg: rgba(255, 255, 255, 0.72);
--wf-email-shell-border: rgba(252, 184, 39, 0.62);
--wf-email-shell-shadow: 0 6px 12px rgba(48, 33, 39, 0.08);
--wf-email-input-bg: var(--wr-bg-panel-gray);
--wf-email-input-color: var(--wr-ink);
--wf-email-input-placeholder: var(--wr-text-subtle);
--wf-nav-shell-border: rgba(255, 255, 255, 0.56);
--wf-nav-shell-shadow: 0 10px 24px rgba(48, 33, 39, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.52);
--wf-nav-filter-bg: linear-gradient(148deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
--wf-nav-overlay-bg: radial-gradient(
120% 180% at var(--wf-nav-mx) var(--wf-nav-my),
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.2) 30%,
rgba(255, 255, 255, 0.1) 60%,
rgba(255, 255, 255, 0.14) 100%
),
linear-gradient(
145deg,
rgba(255, 255, 255, 0.24) 0%,
rgba(255, 255, 255, 0.08) 50%,
rgba(255, 255, 255, 0.16) 100%
);
--wf-nav-overlay-opacity: 0.94;
--wf-nav-specular-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.28),
inset 0 0 0 1px rgba(255, 255, 255, 0.42);
--wf-nav-after-bg: radial-gradient(
220px 130px at var(--wf-nav-mx) var(--wf-nav-my),
rgba(255, 255, 255, 0.54),
rgba(255, 255, 255, 0) 64%
);
--wf-nav-after-opacity: 0.54;
--wf-nav-scrolled-shadow: 0 16px 36px rgba(48, 33, 39, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
--wf-nav-scrolled-border: rgba(255, 255, 255, 0.72);
--wf-theme-toggle-border: rgba(255, 255, 255, 0.66);
--wf-theme-toggle-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.22)),
rgba(255, 255, 255, 0.34);
--wf-theme-toggle-shadow: 0 8px 16px rgba(48, 33, 39, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.82);
--wf-theme-toggle-color: var(--wr-ink);
--wf-theme-toggle-hover-border: rgba(243, 125, 57, 0.46);
--wf-theme-toggle-hover-shadow: 0 10px 19px rgba(48, 33, 39, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
--wf-menu-control-border: rgba(255, 255, 255, 0.56);
--wf-menu-control-bg: rgba(255, 255, 255, 0.54);
--wf-menu-control-shadow: 0 8px 14px rgba(48, 33, 39, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.82);
--wf-menu-control-color: var(--wr-ink);
--wf-menu-control-hover-border: rgba(243, 125, 57, 0.46);
--wf-menu-control-hover-shadow: 0 10px 18px rgba(48, 33, 39, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
--wf-mobile-backdrop-bg: radial-gradient(130% 140% at 100% 0%, rgba(255, 255, 255, 0.26), rgba(48, 33, 39, 0.12)),
rgba(48, 33, 39, 0.4);
--wf-mobile-panel-border: rgba(255, 255, 255, 0.54);
--wf-mobile-panel-shadow: -16px 0 40px rgba(48, 33, 39, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8);
--wf-mobile-panel-filter-bg: linear-gradient(148deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)),
rgba(255, 255, 255, 0.34);
--wf-mobile-panel-overlay-bg: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.14)),
linear-gradient(
150deg,
rgba(255, 255, 255, 0.38) 0%,
rgba(255, 255, 255, 0.14) 54%,
rgba(255, 255, 255, 0.26) 100%
);
--wf-mobile-panel-overlay-opacity: 0.95;
--wf-mobile-panel-specular-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.34),
inset 0 0 0 1px rgba(255, 255, 255, 0.44);
--wf-mobile-link-border: rgba(255, 255, 255, 0.52);
--wf-mobile-link-bg: rgba(255, 255, 255, 0.56);
--wf-mobile-link-color: var(--wr-ink);
}
html[data-theme="light"] {
color-scheme: light;
}
html[data-theme="dark"] {
color-scheme: dark;
--wr-bg-yellow: #2a2318;
--wf-hover-bg-subtle: rgba(255, 248, 251, 0.06);
--wf-feedback-error: #f27c6a;
--wf-feedback-error-bg: #2d1c1a;
--wf-feedback-warning: #f0b840;
--wf-feedback-warning-bg: #2a2318;
--wf-feedback-success: #5cc4ae;
--wf-feedback-success-bg: #192825;
--wf-feedback-info: #6db5d0;
--wf-feedback-info-bg: #1a2328;
--wr-ink: #f5edf1;
--wr-text-muted: #d0c3c9;
--wr-text-subtle: #a99ca3;
--wr-white: #1a1519;
--wr-bg-peach: #231c21;
--wr-bg-cyan: #1b252b;
--wr-bg-salmon: #281f1c;
--wr-bg-panel-gray: #2c252b;
--wr-bg-panel-light: #221b20;
--wr-accent-orange: #ff9d63;
--wr-accent-blue: #72bdd9;
--wr-accent-yellow: #ffd25d;
--wr-accent-yellow-soft: #ffe58a;
--wr-tag-yellow: #5a4a1f;
--wr-shadow-badge: 0 7px 0 0 #100d10;
--wr-shadow-email: 0 4px 0 rgba(255, 210, 93, 0.35), inset 0 0 0 2px rgba(255, 210, 93, 0.45);
--wf-section-dark-bg: #141015;
--wf-on-dark: #fff8fb;
--wf-on-dark-muted: rgba(255, 248, 251, 0.8);
--wf-dark-card-bg: rgba(255, 255, 255, 0.08);
--wf-dark-card-border: rgba(255, 255, 255, 0.2);
--wf-cta-sheen-mid-alpha: 0.2;
--wf-cta-sheen-opacity: 0.4;
--wf-pricing-badge-bg: rgba(20, 16, 21, 0.62);
--wf-pricing-badge-border: rgba(20, 16, 21, 0.24);
--wf-pricing-badge-color: #fff8fb;
--wf-cta-sheen-hover-opacity: 0.52;
--wf-problem-card-bg: rgba(255, 248, 251, 0.08);
--wf-problem-card-hover-bg: rgba(255, 248, 251, 0.12);
--wf-problem-card-border: rgba(255, 248, 251, 0.18);
--wf-problem-card-text: var(--wf-on-dark);
--wf-pricing-pro-bg: linear-gradient(
180deg,
rgba(255, 157, 99, 0.2) 0%,
rgba(255, 210, 93, 0.08) 42%,
var(--wr-bg-panel-light) 100%
);
--wf-pricing-pro-shadow: 0 12px 24px rgba(255, 157, 99, 0.22);
--wf-pricing-pro-before-display: none;
--wf-faq-hover-bg: rgba(255, 248, 251, 0.1);
--wf-tenant-form-bg: linear-gradient(180deg, rgba(255, 248, 251, 0.08), rgba(34, 27, 32, 0.96));
--wf-tenant-form-border: rgba(255, 248, 251, 0.22);
--wf-tenant-form-shadow: 0 16px 30px rgba(10, 7, 10, 0.55);
--wf-tenant-form-gloss: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 52%);
--wf-tenant-form-gloss-opacity: 0.55;
--wf-tenant-label-color: var(--wf-on-dark);
--wf-tenant-help-color: var(--wf-on-dark-muted);
--wf-tenant-input-bg: rgba(255, 248, 251, 0.07);
--wf-tenant-input-border: rgba(255, 248, 251, 0.24);
--wf-tenant-input-hover-border: rgba(255, 157, 99, 0.46);
--wf-tenant-input-color: var(--wf-on-dark);
--wf-tenant-input-placeholder: rgba(255, 248, 251, 0.56);
--wf-tenant-input-focus-bg: rgba(255, 248, 251, 0.12);
--wf-footer-shell-bg: linear-gradient(180deg, rgba(255, 248, 251, 0.1), rgba(34, 27, 32, 0.96));
--wf-footer-shell-border: rgba(255, 248, 251, 0.22);
--wf-footer-shell-shadow: 0 16px 30px rgba(9, 6, 10, 0.5);
--wf-footer-shell-gloss: linear-gradient(150deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 52%);
--wf-footer-shell-gloss-opacity: 0.58;
--wf-footer-copy-color: var(--wf-on-dark-muted);
--wf-footer-link-color: var(--wf-on-dark-muted);
--wf-footer-link-hover-color: var(--wf-on-dark);
--wf-footer-contact-color: var(--wf-on-dark-muted);
--wf-footer-contact-icon: rgba(255, 248, 251, 0.68);
--wf-footer-social-bg: rgba(255, 248, 251, 0.08);
--wf-footer-social-border: rgba(255, 248, 251, 0.24);
--wf-footer-social-color: var(--wf-on-dark-muted);
--wf-footer-bottom-border: rgba(255, 248, 251, 0.2);
--wf-footer-meta-color: rgba(255, 248, 251, 0.72);
--wf-footer-legal-color: rgba(255, 248, 251, 0.72);
--wf-feature-hover-bg: rgba(255, 248, 251, 0.08);
--wf-cap-testimonial-hover-bg: rgba(255, 248, 251, 0.08);
--wf-card-sheen-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
--wf-email-shell-bg: rgba(255, 248, 251, 0.08);
--wf-email-shell-border: rgba(255, 210, 93, 0.42);
--wf-email-shell-shadow: 0 10px 18px rgba(8, 6, 10, 0.45);
--wf-email-input-bg: rgba(255, 248, 251, 0.1);
--wf-email-input-color: var(--wf-on-dark);
--wf-email-input-placeholder: rgba(255, 248, 251, 0.5);
--wf-nav-shell-border: rgba(255, 248, 251, 0.2);
--wf-nav-shell-shadow: 0 12px 28px rgba(8, 6, 10, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
--wf-nav-filter-bg: linear-gradient(148deg, rgba(30, 24, 29, 0.82), rgba(20, 16, 21, 0.74));
--wf-nav-overlay-bg: radial-gradient(
120% 180% at var(--wf-nav-mx) var(--wf-nav-my),
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.02) 45%,
rgba(255, 255, 255, 0.06) 100%
),
linear-gradient(
145deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.02) 52%,
rgba(255, 255, 255, 0.06) 100%
);
--wf-nav-overlay-opacity: 1;
--wf-nav-specular-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
--wf-nav-after-bg: radial-gradient(
220px 130px at var(--wf-nav-mx) var(--wf-nav-my),
rgba(255, 255, 255, 0.14),
rgba(255, 255, 255, 0) 68%
);
--wf-nav-after-opacity: 0.4;
--wf-nav-scrolled-shadow: 0 16px 36px rgba(6, 4, 8, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14);
--wf-nav-scrolled-border: rgba(255, 248, 251, 0.28);
--wf-theme-toggle-border: rgba(255, 248, 251, 0.22);
--wf-theme-toggle-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
rgba(20, 16, 21, 0.88);
--wf-theme-toggle-shadow: 0 10px 18px rgba(8, 6, 10, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
--wf-theme-toggle-color: var(--wf-on-dark);
--wf-theme-toggle-hover-border: rgba(255, 157, 99, 0.5);
--wf-theme-toggle-hover-shadow: 0 12px 22px rgba(8, 6, 10, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
--wf-menu-control-border: rgba(255, 248, 251, 0.22);
--wf-menu-control-bg: rgba(255, 248, 251, 0.08);
--wf-menu-control-shadow: 0 10px 16px rgba(8, 6, 10, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
--wf-menu-control-color: var(--wf-on-dark);
--wf-menu-control-hover-border: rgba(255, 157, 99, 0.52);
--wf-menu-control-hover-shadow: 0 12px 20px rgba(8, 6, 10, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
--wf-mobile-backdrop-bg: radial-gradient(130% 140% at 100% 0%, rgba(255, 255, 255, 0.1), rgba(8, 6, 10, 0.52)),
rgba(8, 6, 10, 0.62);
--wf-mobile-panel-border: rgba(255, 248, 251, 0.22);
--wf-mobile-panel-shadow: -16px 0 40px rgba(6, 4, 8, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14);
--wf-mobile-panel-filter-bg: linear-gradient(148deg, rgba(30, 24, 29, 0.92), rgba(20, 16, 21, 0.86)),
rgba(20, 16, 21, 0.86);
--wf-mobile-panel-overlay-bg: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
linear-gradient(
150deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.04) 54%,
rgba(255, 255, 255, 0.1) 100%
);
--wf-mobile-panel-overlay-opacity: 0.92;
--wf-mobile-panel-specular-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
--wf-mobile-link-border: rgba(255, 248, 251, 0.22);
--wf-mobile-link-bg: rgba(255, 248, 251, 0.08);
--wf-mobile-link-color: var(--wf-on-dark);
}
/* ─── OS-level dark mode fallback ──────────────────────────────────────────── */
/* SYNC: This block MUST mirror the html[data-theme="dark"] block above. */
/* Both exist because JS sets data-theme on init, but this @media block covers */
/* the flash-of-unstyled-content before JS runs on OS dark-mode systems. */
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
color-scheme: dark;
--wr-bg-yellow: #2a2318;
--wf-hover-bg-subtle: rgba(255, 248, 251, 0.06);
--wf-feedback-error: #f27c6a;
--wf-feedback-error-bg: #2d1c1a;
--wf-feedback-warning: #f0b840;
--wf-feedback-warning-bg: #2a2318;
--wf-feedback-success: #5cc4ae;
--wf-feedback-success-bg: #192825;
--wf-feedback-info: #6db5d0;
--wf-feedback-info-bg: #1a2328;
--wr-ink: #f5edf1;
--wr-text-muted: #d0c3c9;
--wr-text-subtle: #a99ca3;
--wr-white: #1a1519;
--wr-bg-peach: #231c21;
--wr-bg-cyan: #1b252b;
--wr-bg-salmon: #281f1c;
--wr-bg-panel-gray: #2c252b;
--wr-bg-panel-light: #221b20;
--wr-accent-orange: #ff9d63;
--wr-accent-blue: #72bdd9;
--wr-accent-yellow: #ffd25d;
--wr-accent-yellow-soft: #ffe58a;
--wr-tag-yellow: #5a4a1f;
--wr-shadow-badge: 0 7px 0 0 #100d10;
--wr-shadow-email: 0 4px 0 rgba(255, 210, 93, 0.35), inset 0 0 0 2px rgba(255, 210, 93, 0.45);
--wf-section-dark-bg: #141015;
--wf-on-dark: #fff8fb;
--wf-on-dark-muted: rgba(255, 248, 251, 0.8);
--wf-dark-card-bg: rgba(255, 255, 255, 0.08);
--wf-dark-card-border: rgba(255, 255, 255, 0.2);
--wf-cta-sheen-mid-alpha: 0.2;
--wf-cta-sheen-opacity: 0.4;
--wf-pricing-badge-bg: rgba(20, 16, 21, 0.62);
--wf-pricing-badge-border: rgba(20, 16, 21, 0.24);
--wf-pricing-badge-color: #fff8fb;
--wf-cta-sheen-hover-opacity: 0.52;
--wf-problem-card-bg: rgba(255, 248, 251, 0.08);
--wf-problem-card-hover-bg: rgba(255, 248, 251, 0.12);
--wf-problem-card-border: rgba(255, 248, 251, 0.18);
--wf-problem-card-text: var(--wf-on-dark);
--wf-pricing-pro-bg: linear-gradient(
180deg,
rgba(255, 157, 99, 0.2) 0%,
rgba(255, 210, 93, 0.08) 42%,
var(--wr-bg-panel-light) 100%
);
--wf-pricing-pro-shadow: 0 12px 24px rgba(255, 157, 99, 0.22);
--wf-pricing-pro-before-display: none;
--wf-faq-hover-bg: rgba(255, 248, 251, 0.1);
--wf-tenant-form-bg: linear-gradient(180deg, rgba(255, 248, 251, 0.08), rgba(34, 27, 32, 0.96));
--wf-tenant-form-border: rgba(255, 248, 251, 0.22);
--wf-tenant-form-shadow: 0 16px 30px rgba(10, 7, 10, 0.55);
--wf-tenant-form-gloss: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 52%);
--wf-tenant-form-gloss-opacity: 0.55;
--wf-tenant-label-color: var(--wf-on-dark);
--wf-tenant-help-color: var(--wf-on-dark-muted);
--wf-tenant-input-bg: rgba(255, 248, 251, 0.07);
--wf-tenant-input-border: rgba(255, 248, 251, 0.24);
--wf-tenant-input-hover-border: rgba(255, 157, 99, 0.46);
--wf-tenant-input-color: var(--wf-on-dark);
--wf-tenant-input-placeholder: rgba(255, 248, 251, 0.56);
--wf-tenant-input-focus-bg: rgba(255, 248, 251, 0.12);
--wf-footer-shell-bg: linear-gradient(180deg, rgba(255, 248, 251, 0.1), rgba(34, 27, 32, 0.96));
--wf-footer-shell-border: rgba(255, 248, 251, 0.22);
--wf-footer-shell-shadow: 0 16px 30px rgba(9, 6, 10, 0.5);
--wf-footer-shell-gloss: linear-gradient(150deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 52%);
--wf-footer-shell-gloss-opacity: 0.58;
--wf-footer-copy-color: var(--wf-on-dark-muted);
--wf-footer-link-color: var(--wf-on-dark-muted);
--wf-footer-link-hover-color: var(--wf-on-dark);
--wf-footer-contact-color: var(--wf-on-dark-muted);
--wf-footer-contact-icon: rgba(255, 248, 251, 0.68);
--wf-footer-social-bg: rgba(255, 248, 251, 0.08);
--wf-footer-social-border: rgba(255, 248, 251, 0.24);
--wf-footer-social-color: var(--wf-on-dark-muted);
--wf-footer-bottom-border: rgba(255, 248, 251, 0.2);
--wf-footer-meta-color: rgba(255, 248, 251, 0.72);
--wf-footer-legal-color: rgba(255, 248, 251, 0.72);
--wf-feature-hover-bg: rgba(255, 248, 251, 0.08);
--wf-cap-testimonial-hover-bg: rgba(255, 248, 251, 0.08);
--wf-card-sheen-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
--wf-email-shell-bg: rgba(255, 248, 251, 0.08);
--wf-email-shell-border: rgba(255, 210, 93, 0.42);
--wf-email-shell-shadow: 0 10px 18px rgba(8, 6, 10, 0.45);
--wf-email-input-bg: rgba(255, 248, 251, 0.1);
--wf-email-input-color: var(--wf-on-dark);
--wf-email-input-placeholder: rgba(255, 248, 251, 0.5);
--wf-nav-shell-border: rgba(255, 248, 251, 0.2);
--wf-nav-shell-shadow: 0 12px 28px rgba(8, 6, 10, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
--wf-nav-filter-bg: linear-gradient(148deg, rgba(30, 24, 29, 0.82), rgba(20, 16, 21, 0.74));
--wf-nav-overlay-bg: radial-gradient(
120% 180% at var(--wf-nav-mx) var(--wf-nav-my),
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.02) 45%,
rgba(255, 255, 255, 0.06) 100%
),
linear-gradient(
145deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.02) 52%,
rgba(255, 255, 255, 0.06) 100%
);
--wf-nav-overlay-opacity: 1;
--wf-nav-specular-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
--wf-nav-after-bg: radial-gradient(
220px 130px at var(--wf-nav-mx) var(--wf-nav-my),
rgba(255, 255, 255, 0.14),
rgba(255, 255, 255, 0) 68%
);
--wf-nav-after-opacity: 0.4;
--wf-nav-scrolled-shadow: 0 16px 36px rgba(6, 4, 8, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14);
--wf-nav-scrolled-border: rgba(255, 248, 251, 0.28);
--wf-theme-toggle-border: rgba(255, 248, 251, 0.22);
--wf-theme-toggle-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
rgba(20, 16, 21, 0.88);
--wf-theme-toggle-shadow: 0 10px 18px rgba(8, 6, 10, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
--wf-theme-toggle-color: var(--wf-on-dark);
--wf-theme-toggle-hover-border: rgba(255, 157, 99, 0.5);
--wf-theme-toggle-hover-shadow: 0 12px 22px rgba(8, 6, 10, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
--wf-menu-control-border: rgba(255, 248, 251, 0.22);
--wf-menu-control-bg: rgba(255, 248, 251, 0.08);
--wf-menu-control-shadow: 0 10px 16px rgba(8, 6, 10, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
--wf-menu-control-color: var(--wf-on-dark);
--wf-menu-control-hover-border: rgba(255, 157, 99, 0.52);
--wf-menu-control-hover-shadow: 0 12px 20px rgba(8, 6, 10, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
--wf-mobile-backdrop-bg: radial-gradient(
130% 140% at 100% 0%,
rgba(255, 255, 255, 0.1),
rgba(8, 6, 10, 0.52)
),
rgba(8, 6, 10, 0.62);
--wf-mobile-panel-border: rgba(255, 248, 251, 0.22);
--wf-mobile-panel-shadow: -16px 0 40px rgba(6, 4, 8, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14);
--wf-mobile-panel-filter-bg: linear-gradient(148deg, rgba(30, 24, 29, 0.92), rgba(20, 16, 21, 0.86)),
rgba(20, 16, 21, 0.86);
--wf-mobile-panel-overlay-bg: radial-gradient(
120% 90% at 0% 0%,
rgba(255, 255, 255, 0.16),
rgba(255, 255, 255, 0.04)
),
linear-gradient(
150deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.04) 54%,
rgba(255, 255, 255, 0.1) 100%
);
--wf-mobile-panel-overlay-opacity: 0.92;
--wf-mobile-panel-specular-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
inset 0 -1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
--wf-mobile-link-border: rgba(255, 248, 251, 0.22);
--wf-mobile-link-bg: rgba(255, 248, 251, 0.08);
--wf-mobile-link-color: var(--wf-on-dark);
}
}
html.theme-animating *,
html.theme-animating *::before,
html.theme-animating *::after {
transition:
background-color var(--wf-motion-base) var(--wf-motion-ease-standard),
color var(--wf-motion-fast) ease-out,
border-color var(--wf-motion-fast) ease-out,
box-shadow var(--wf-motion-fast) ease-out,
fill var(--wf-motion-fast) ease-out,
stroke var(--wf-motion-fast) ease-out !important;
}
.wf-page {
background: var(--wr-white);
color: var(--wr-ink);
}
body.wf-mobile-menu-open {
overflow: hidden;
overscroll-behavior: none;
}
.wf-skip-link {
position: fixed;
top: -120px;
left: 16px;
z-index: 1200;
padding: 10px 14px;
border-radius: var(--wr-r-pill);
background: var(--wr-accent-yellow);
color: var(--wr-ink);
font-weight: 700;
text-decoration: none;
transition: top 0.25s ease-out;
}
.wf-skip-link:focus-visible {
top: 16px;
}
.wf-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.wf-header {
position: sticky;
top: 12px;
z-index: 900;
padding: 12px 0 0;
will-change: transform;
}
.wf-nav-shell {
--wf-nav-mx: 50%;
--wf-nav-my: 50%;
position: relative;
min-height: 68px;
border-radius: var(--wr-r-pill);
border: 1px solid var(--wf-nav-shell-border);
box-shadow: var(--wf-nav-shell-shadow);
background: transparent;
isolation: isolate;
overflow: clip;
transition:
box-shadow 0.3s var(--wf-motion-ease-gentle),
transform 0.3s var(--wf-motion-ease-gentle),
border-color 0.28s ease-out;
}
.wf-nav-content {
position: relative;
z-index: 5;
min-height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 8px 16px;
}
.wf-nav-glass {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.wf-nav-glass--filter {
z-index: 1;
backdrop-filter: saturate(190%) blur(17px) contrast(104%);
-webkit-backdrop-filter: saturate(190%) blur(17px) contrast(104%);
background: var(--wf-nav-filter-bg);
}
.wf-nav-glass--overlay {
z-index: 2;
background: var(--wf-nav-overlay-bg);
opacity: var(--wf-nav-overlay-opacity);
transition:
opacity var(--wf-motion-base) var(--wf-motion-ease-standard),
background-position var(--wf-motion-base) var(--wf-motion-ease-gentle);
}
.wf-nav-glass--specular {
z-index: 3;
box-shadow: var(--wf-nav-specular-shadow);
}
.wf-nav-shell::after {
content: "";
position: absolute;
z-index: 4;
inset: -35% -12%;
border-radius: inherit;
background: var(--wf-nav-after-bg);
pointer-events: none;
opacity: var(--wf-nav-after-opacity);
transition:
opacity var(--wf-motion-base) var(--wf-motion-ease-standard),
transform var(--wf-motion-base) var(--wf-motion-ease-gentle);
}
.wf-nav-shell.is-interactive::after {
opacity: 0.78;
}
.wf-nav-shell.is-scrolled {
box-shadow: var(--wf-nav-scrolled-shadow);
transform: translateY(-1px);
border-color: var(--wf-nav-scrolled-border);
}
.wf-nav-shell.is-scrolled .wf-nav-glass--filter {
backdrop-filter: saturate(205%) blur(19px) contrast(108%);
-webkit-backdrop-filter: saturate(205%) blur(19px) contrast(108%);
}
.wf-nav-shell.is-scrolled .wf-nav-glass--overlay {
opacity: 0.98;
}
.wf-brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--wr-ink);
text-decoration: none;
font-weight: 700;
letter-spacing: -0.2px;
}
.wf-brand-dot {
width: 18px;
height: 18px;
border-radius: 7px;
background: var(--wr-accent-yellow);
box-shadow: var(--wr-shadow-badge);
}
.wf-nav-links {
display: inline-flex;
align-items: center;
gap: 22px;
}
.wf-nav-links a,
.wf-nav-links button {
position: relative;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.32px;
color: var(--wr-ink);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
padding: 0;
transition:
color var(--wf-motion-fast) ease-out,
transform var(--wf-motion-fast) var(--wf-motion-ease-gentle);
}
.wf-nav-links a::after,
.wf-nav-links button::after {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 100%;
height: 2px;
border-radius: 99px;
background: var(--wr-accent-orange);
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform var(--wf-motion-fast) var(--wf-motion-ease-gentle);
}
.wf-nav-links a:hover,
.wf-nav-links a:focus-visible,
.wf-nav-links a.is-active,
.wf-nav-links button:hover,
.wf-nav-links button:focus-visible,
.wf-nav-links button.is-active {
color: var(--wr-accent-orange);
transform: translateY(-1px);
}
.wf-nav-links a:hover::after,
.wf-nav-links a:focus-visible::after,
.wf-nav-links a.is-active::after,
.wf-nav-links button:hover::after,
.wf-nav-links button:focus-visible::after,
.wf-nav-links button.is-active::after {
transform: translateX(-50%) scaleX(1);
}
.wf-theme-switcher {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.wf-theme-icon-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
min-width: 40px;
height: 40px;
border: 1px solid var(--wf-theme-toggle-border);
border-radius: 999px;
background: var(--wf-theme-toggle-bg);
box-shadow: var(--wf-theme-toggle-shadow);
color: var(--wf-theme-toggle-color);
isolation: isolate;
cursor: pointer;
transition:
transform var(--wf-motion-fast) var(--wf-motion-ease-gentle),
border-color var(--wf-motion-fast) ease-out,
box-shadow var(--wf-motion-fast) var(--wf-motion-ease-gentle),
color var(--wf-motion-fast) ease-out;
}
.wf-theme-icon-toggle:hover,
.wf-theme-icon-toggle:focus-visible {
transform: translateY(-1px);
border-color: var(--wf-theme-toggle-hover-border);
box-shadow: var(--wf-theme-toggle-hover-shadow);
}
.wf-theme-icon-toggle:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-theme-icon-toggle__sun,
.wf-theme-icon-toggle__moon {
position: relative;
z-index: 1;
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
opacity var(--wf-motion-fast) var(--wf-motion-ease-standard),
transform var(--wf-motion-fast) var(--wf-motion-ease-gentle);
}
.wf-theme-icon-toggle__sun svg,
.wf-theme-icon-toggle__moon svg {
width: 15px;
height: 15px;
}
.wf-theme-icon-toggle__sun {
opacity: 0;
transform: scale(0.84) rotate(-8deg);
}
.wf-theme-icon-toggle__moon {
opacity: 1;
transform: scale(1) rotate(0deg);
}
html[data-theme="dark"] .wf-theme-icon-toggle__sun {
opacity: 1;
transform: scale(1) rotate(0deg);
}
html[data-theme="dark"] .wf-theme-icon-toggle__moon {
opacity: 0;
transform: scale(0.84) rotate(8deg);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .wf-theme-icon-toggle__sun {
opacity: 1;
transform: scale(1) rotate(0deg);
}
html:not([data-theme]) .wf-theme-icon-toggle__moon {
opacity: 0;
transform: scale(0.84) rotate(8deg);
}
}
.wf-mobile-theme-switcher {
display: none;
grid-template-columns: 1fr auto;
align-items: center;
border-radius: var(--wr-r-16);
border: 1px solid var(--wf-mobile-link-border);
background: var(--wf-mobile-link-bg);
box-shadow: 0 12px 20px rgba(48, 33, 39, 0.12);
padding: 12px;
gap: 10px;
}
.wf-mobile-theme-label {
margin: 0;
color: var(--wr-text-muted);
font-size: 13px;
line-height: 13px;
letter-spacing: -0.14px;
font-weight: 700;
text-transform: uppercase;
}
.wf-mobile-theme-icon-toggle {
width: 44px;
min-width: 44px;
height: 44px;
}
.wf-mobile-menu-toggle {
display: none;
position: relative;
flex: 0 0 auto;
width: 46px;
min-width: 46px;
height: 46px;
border: 1px solid var(--wf-menu-control-border);
border-radius: var(--wr-r-12);
background: var(--wf-menu-control-bg);
box-shadow: var(--wf-menu-control-shadow);
color: var(--wf-menu-control-color);
cursor: pointer;
transition:
transform var(--wf-motion-fast) var(--wf-motion-ease-gentle),
border-color var(--wf-motion-fast) ease-out,
box-shadow var(--wf-motion-fast) var(--wf-motion-ease-gentle);
}
.wf-mobile-menu-toggle:hover,
.wf-mobile-menu-toggle:focus-visible {
transform: translateY(-1px);
border-color: var(--wf-menu-control-hover-border);
box-shadow: var(--wf-menu-control-hover-shadow);
}
.wf-mobile-menu-toggle:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-mobile-menu-toggle__line {
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 2px;
border-radius: 99px;
background: currentColor;
transition:
transform var(--wf-motion-fast) var(--wf-motion-ease-gentle),
opacity var(--wf-motion-fast) ease-out;
}
.wf-mobile-menu-toggle__line:nth-child(1) {
transform: translate(-50%, -5px);
}
.wf-mobile-menu-toggle__line:nth-child(2) {
transform: translate(-50%, 5px);
}
.wf-mobile-menu-toggle[aria-expanded="true"] .wf-mobile-menu-toggle__line:nth-child(1) {
transform: translate(-50%, 0) rotate(45deg);
}
.wf-mobile-menu-toggle[aria-expanded="true"] .wf-mobile-menu-toggle__line:nth-child(2) {
transform: translate(-50%, 0) rotate(-45deg);
}
.wf-mobile-menu {
position: fixed;
inset: 0;
z-index: 1100;
display: block;
opacity: 0;
pointer-events: none;
transition: opacity var(--wf-motion-fast) var(--wf-motion-ease-standard);
}
.wf-mobile-menu.is-open {
opacity: 1;
pointer-events: auto;
}
.wf-mobile-menu-backdrop {
position: absolute;
inset: 0;
border: 0;
margin: 0;
padding: 0;
background: var(--wf-mobile-backdrop-bg);
backdrop-filter: saturate(150%) blur(8px);
-webkit-backdrop-filter: saturate(150%) blur(8px);
opacity: 0;
cursor: pointer;
transition: opacity var(--wf-motion-fast) var(--wf-motion-ease-standard);
}
.wf-mobile-menu.is-open .wf-mobile-menu-backdrop {
opacity: 1;
}
.wf-mobile-menu-panel {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: min(92vw, 360px);
max-width: 360px;
border-radius: var(--wr-r-20) 0 0 var(--wr-r-20);
border: 1px solid var(--wf-mobile-panel-border);
box-shadow: var(--wf-mobile-panel-shadow);
isolation: isolate;
overflow: clip;
transform: translateX(100%);
transition: transform var(--wf-motion-base) var(--wf-motion-ease-gentle);
}
.wf-mobile-menu.is-open .wf-mobile-menu-panel {
transform: translateX(0);
}
.wf-mobile-menu-glass {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
}
.wf-mobile-menu-glass--filter {
z-index: 1;
background: var(--wf-mobile-panel-filter-bg);
backdrop-filter: saturate(175%) blur(16px) contrast(102%);
-webkit-backdrop-filter: saturate(175%) blur(16px) contrast(102%);
}
.wf-mobile-menu-glass--overlay {
z-index: 2;
background: var(--wf-mobile-panel-overlay-bg);
opacity: var(--wf-mobile-panel-overlay-opacity);
}
.wf-mobile-menu-glass--specular {
z-index: 3;
box-shadow: var(--wf-mobile-panel-specular-shadow);
}
.wf-mobile-menu-content {
position: relative;
z-index: 5;
height: 100%;
display: flex;
flex-direction: column;
padding: 20px 18px 18px;
overflow-y: auto;
overscroll-behavior: contain;
}
.wf-mobile-menu-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}
.wf-mobile-menu-close {
position: relative;
width: 44px;
min-width: 44px;
height: 44px;
border: 1px solid var(--wf-menu-control-border);
border-radius: var(--wr-r-12);
background: var(--wf-menu-control-bg);
box-shadow: var(--wf-menu-control-shadow);
color: var(--wf-menu-control-color);
cursor: pointer;
transition:
transform var(--wf-motion-fast) var(--wf-motion-ease-gentle),
border-color var(--wf-motion-fast) ease-out,
box-shadow var(--wf-motion-fast) var(--wf-motion-ease-gentle);
}
.wf-mobile-menu-close:hover,
.wf-mobile-menu-close:focus-visible {
transform: translateY(-1px);
border-color: var(--wf-menu-control-hover-border);
box-shadow: var(--wf-menu-control-hover-shadow);
}
.wf-mobile-menu-close:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-mobile-menu-close__line {
position: absolute;
left: 50%;
top: 50%;
width: 17px;
height: 2px;
border-radius: 99px;
background: currentColor;
}
.wf-mobile-menu-close__line:nth-child(1) {
transform: translate(-50%, -50%) rotate(45deg);
}
.wf-mobile-menu-close__line:nth-child(2) {
transform: translate(-50%, -50%) rotate(-45deg);
}
.wf-mobile-menu-links {
display: flex;
flex-direction: column;
gap: 8px;
}
.wf-mobile-menu-links a,
.wf-mobile-menu-links button {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 52px;
border-radius: var(--wr-r-12);
border: 1px solid var(--wf-mobile-link-border);
background: var(--wf-mobile-link-bg);
padding: 0 14px;
color: var(--wf-mobile-link-color);
text-decoration: none;
font-size: 18px;
line-height: 18px;
letter-spacing: -0.34px;
font-weight: 650;
cursor: pointer;
width: 100%;
text-align: left;
opacity: 0;
transform: translateX(16px);
transition:
opacity var(--wf-motion-fast) var(--wf-motion-ease-standard),
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
color var(--wf-motion-fast) ease-out,
border-color var(--wf-motion-fast) ease-out,
box-shadow var(--wf-motion-fast) ease-out;
}
.wf-mobile-menu-links a:hover,
.wf-mobile-menu-links a:focus-visible,
.wf-mobile-menu-links a.is-active,
.wf-mobile-menu-links button:hover,
.wf-mobile-menu-links button:focus-visible {
color: var(--wr-accent-orange);
border-color: rgba(243, 125, 57, 0.48);
box-shadow: 0 8px 14px rgba(48, 33, 39, 0.11);
}
.wf-mobile-menu-links a:focus-visible,
.wf-mobile-menu-links button:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-mobile-menu-cta {
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 52px;
margin-top: auto;
border-radius: var(--wr-r-pill);
text-decoration: none;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.3px;
font-weight: 700;
opacity: 0;
transform: translateX(16px);
transition:
opacity var(--wf-motion-fast) var(--wf-motion-ease-standard),
transform var(--wf-motion-base) var(--wf-motion-ease-gentle);
}
.wf-mobile-menu.is-open .wf-mobile-menu-links a,
.wf-mobile-menu.is-open .wf-mobile-menu-links button,
.wf-mobile-menu.is-open .wf-mobile-menu-cta {
opacity: 1;
transform: translateX(0);
}
.wf-mobile-menu.is-open .wf-mobile-menu-links > :nth-child(1) {
transition-delay: 40ms;
}
.wf-mobile-menu.is-open .wf-mobile-menu-links > :nth-child(2) {
transition-delay: 80ms;
}
.wf-mobile-menu.is-open .wf-mobile-menu-links > :nth-child(3) {
transition-delay: 120ms;
}
.wf-mobile-menu.is-open .wf-mobile-menu-links > :nth-child(4) {
transition-delay: 160ms;
}
.wf-mobile-menu.is-open .wf-mobile-menu-links > :nth-child(5) {
transition-delay: 200ms;
}
.wf-mobile-menu.is-open .wf-mobile-menu-cta {
transition-delay: 240ms;
}
.wf-btn {
text-decoration: none;
}
.wf-btn--small {
padding: 16px 24px;
}
.wf-btn--small .wr-cta-join__label {
font-size: 18px;
line-height: 18px;
letter-spacing: -0.36px;
}
.wf-btn-dark {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 20px 28px;
border-radius: var(--wr-r-pill);
background: var(--wr-white);
color: var(--wr-ink);
text-decoration: none;
font-size: 20px;
line-height: 20px;
letter-spacing: -0.4px;
font-weight: 700;
}
.wr-cta-join,
.wf-btn-dark {
position: relative;
overflow: hidden;
isolation: isolate;
transform: translateY(0);
will-change: transform, box-shadow;
box-shadow: 0 6px 12px rgba(48, 33, 39, 0.08);
transition:
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
box-shadow var(--wf-motion-base) var(--wf-motion-ease-gentle),
background-color var(--wf-motion-base) var(--wf-motion-ease-standard);
}
.wr-cta-join::before,
.wf-btn-dark::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
112deg,
rgba(255, 255, 255, 0) 14%,
rgba(255, 255, 255, 0.34) 44%,
rgba(255, 255, 255, 0) 68%
);
transform: translateX(10%);
opacity: 0.64;
pointer-events: none;
z-index: 0;
transition:
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
opacity var(--wf-motion-base) var(--wf-motion-ease-standard);
}
.wr-cta-join__label {
position: relative;
z-index: 1;
color: var(--wf-cta-conv-text);
}
.wr-cta-join:hover,
.wr-cta-join:focus-visible,
.wf-btn-dark:hover,
.wf-btn-dark:focus-visible {
transform: translateY(var(--wf-cta-lift-hover));
box-shadow: 0 9px 18px rgba(48, 33, 39, 0.108);
}
.wr-cta-join:hover::before,
.wr-cta-join:focus-visible::before,
.wf-btn-dark:hover::before,
.wf-btn-dark:focus-visible::before {
transform: translateX(-10%);
opacity: 0.8;
}
.wr-cta-join:active,
.wf-btn-dark:active {
transform: translateY(var(--wf-cta-lift-active));
box-shadow: 0 7px 14px rgba(48, 33, 39, 0.1);
}
.wf-email-cta {
display: flex;
align-items: center;
gap: 8px;
width: min(100%, 640px);
padding: 6px;
border-radius: var(--wr-r-pill);
border: 2px solid var(--wf-email-shell-border);
background: var(--wf-email-shell-bg);
box-shadow: var(--wf-email-shell-shadow);
}
.wf-center .wf-email-cta {
margin-inline: auto;
}
.wf-email-cta__input {
flex: 1 1 auto;
min-width: 0;
min-height: 62px;
border: 0;
border-radius: calc(var(--wr-r-pill) - 8px);
padding: 0 24px;
font-family: "Onest", "Onest Placeholder", sans-serif;
font-size: 22px;
line-height: 22px;
letter-spacing: -0.44px;
font-weight: 500;
color: var(--wf-email-input-color);
background: var(--wf-email-input-bg);
}
.wf-email-cta__input::placeholder {
color: var(--wf-email-input-placeholder);
}
.wf-email-cta__input:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-email-cta__button {
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: 62px;
border-radius: calc(var(--wr-r-pill) - 8px);
padding: 0 26px;
white-space: nowrap;
background: var(--wr-accent-yellow);
color: var(--wr-ink);
text-decoration: none;
font-size: 20px;
line-height: 20px;
letter-spacing: -0.4px;
font-weight: 700;
transform: translateY(0);
box-shadow: 0 4px 0 rgba(48, 33, 39, 0.12);
transition:
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
box-shadow var(--wf-motion-base) var(--wf-motion-ease-gentle),
background-color var(--wf-motion-base) var(--wf-motion-ease-standard);
}
.wf-email-cta__button::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
112deg,
rgba(255, 255, 255, 0) 14%,
rgba(255, 255, 255, 0.3) 44%,
rgba(255, 255, 255, 0) 68%
);
transform: translateX(10%);
opacity: 0.64;
pointer-events: none;
transition:
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
opacity var(--wf-motion-base) var(--wf-motion-ease-standard);
}
.wf-email-cta__button:hover,
.wf-email-cta__button:focus-visible {
transform: translateY(var(--wf-cta-lift-hover));
box-shadow: 0 6px 0 rgba(48, 33, 39, 0.16);
}
.wf-email-cta__button:hover::before,
.wf-email-cta__button:focus-visible::before {
transform: translateX(-10%);
opacity: 0.8;
}
.wf-email-cta__button:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-email-cta__button:active {
transform: translateY(var(--wf-cta-lift-active));
box-shadow: 0 5px 0 rgba(48, 33, 39, 0.14);
}
/* ─── Email CTA Shell: Hover / Glow ───────────────────────────────────────── */
.wf-email-cta {
position: relative;
transform: translateY(0);
transition:
transform var(--wf-motion-base, 280ms) var(--wf-motion-ease-gentle, cubic-bezier(0.2, 0.8, 0.2, 1)),
box-shadow var(--wf-motion-base, 280ms) var(--wf-motion-ease-gentle, cubic-bezier(0.2, 0.8, 0.2, 1)),
border-color var(--wf-motion-base, 280ms) var(--wf-motion-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.wf-email-cta::after {
content: "";
position: absolute;
inset: -6px;
border-radius: inherit;
background: radial-gradient(
ellipse 80% 60% at 50% 80%,
rgba(252, 184, 39, 0.18),
rgba(243, 125, 57, 0.06) 60%,
transparent 100%
);
opacity: 0;
z-index: -1;
pointer-events: none;
transition: opacity var(--wf-motion-base, 280ms) var(--wf-motion-ease-gentle, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.wf-email-cta:hover,
.wf-email-cta:focus-within {
transform: translateY(-2px);
border-color: rgba(252, 184, 39, 0.82);
box-shadow:
0 8px 20px rgba(252, 184, 39, 0.18),
0 2px 6px rgba(48, 33, 39, 0.06);
}
.wf-email-cta:hover::after,
.wf-email-cta:focus-within::after {
opacity: 1;
}
.wf-email-cta:hover .wf-email-cta__input,
.wf-email-cta:focus-within .wf-email-cta__input {
background: var(--wr-white, #ffffff);
}
html[data-theme="dark"] .wf-email-cta:hover,
html[data-theme="dark"] .wf-email-cta:focus-within {
border-color: rgba(252, 184, 39, 0.6);
box-shadow:
0 8px 24px rgba(252, 184, 39, 0.12),
0 2px 8px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .wf-email-cta::after {
background: radial-gradient(
ellipse 80% 60% at 50% 80%,
rgba(252, 184, 39, 0.1),
rgba(243, 125, 57, 0.04) 60%,
transparent 100%
);
}
html[data-theme="dark"] .wf-email-cta:hover .wf-email-cta__input,
html[data-theme="dark"] .wf-email-cta:focus-within .wf-email-cta__input {
background: rgba(255, 255, 255, 0.08);
}
@media (prefers-reduced-motion: reduce) {
.wf-email-cta,
.wf-email-cta::after {
transition: none !important;
transform: none !important;
}
}
.wf-section {
position: relative;
padding: 84px 0;
}
.wf-section-tight {
padding-top: 36px;
padding-bottom: 36px;
}
.wf-bg-peach {
background: var(--wr-bg-peach);
}
.wf-bg-cyan {
background: var(--wr-bg-cyan);
}
.wf-bg-salmon {
background: var(--wr-bg-salmon);
}
.wf-bg-white {
background: var(--wr-white);
}
.wf-bg-dark {
background: var(--wf-section-dark-bg);
}
.wf-heading-hero {
max-width: 760px;
}
.wf-heading-section {
max-width: 820px;
}
.wf-heading-center {
text-align: center;
}
.wf-heading-dark {
color: var(--wf-on-dark);
}
.wf-hero-grid,
.wf-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.wf-split-reverse > :first-child {
order: 2;
}
.wf-split-reverse > :last-child {
order: 1;
}
.wf-eyebrow {
margin: 0 0 14px;
color: var(--wr-text-muted);
font-size: 16px;
line-height: 16px;
letter-spacing: -0.2px;
text-transform: uppercase;
font-weight: 700;
}
.wf-eyebrow-dark {
color: var(--wf-on-dark-muted);
}
.wf-hero-copy {
margin: 22px 0 0;
max-width: 640px;
}
.wf-checklist {
margin: 22px 0 30px;
padding: 0;
list-style: none;
display: grid;
gap: 12px;
}
.wf-checklist li {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--wr-ink);
font-size: 20px;
line-height: 26px;
letter-spacing: -0.4px;
}
.wf-checklist li::before {
content: "";
flex: 0 0 18px;
width: 18px;
height: 18px;
margin-top: 3px;
border-radius: 6px;
background: var(--wr-accent-yellow);
}
.wf-placeholder {
--wf-parallax-y: 0px;
--wf-hover-y: 0px;
position: relative;
width: 100%;
border-radius: var(--wr-r-20);
background:
linear-gradient(
110deg,
rgba(255, 255, 255, 0.08) 15%,
rgba(255, 255, 255, 0.42) 45%,
rgba(255, 255, 255, 0.08) 75%
),
var(--wr-bg-panel-light);
background-size: 220% 100%, auto;
background-position: 120% 0, 0 0;
border: 1px dashed rgba(151, 144, 147, 0.44);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
transform: translateY(calc(var(--wf-parallax-y) + var(--wf-hover-y)));
transition:
transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.26s ease-out,
background-position 0.28s ease-out;
}
.wf-placeholder:hover,
.wf-placeholder:focus-within {
--wf-hover-y: -2px;
background-position: -20% 0, 0 0;
border-color: rgba(243, 125, 57, 0.42);
}
.wf-placeholder::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
border-radius: var(--wr-r-12);
background: var(--wr-bg-cyan);
box-shadow: inset 0 0 0 2px rgba(48, 33, 39, 0.14);
transform: translate(-50%, -80%);
}
.wf-placeholder::after {
content: attr(data-label);
position: absolute;
left: 14px;
right: 14px;
bottom: 18px;
color: var(--wr-text-subtle);
font-size: 16px;
line-height: 16px;
letter-spacing: -0.32px;
font-weight: 500;
}
.wf-placeholder--landscape {
aspect-ratio: 16 / 10;
}
.wf-placeholder--wide {
aspect-ratio: 21 / 9;
}
.wf-placeholder--square {
aspect-ratio: 1 / 1;
}
.wf-placeholder--portrait {
aspect-ratio: 4 / 5;
}
.wf-placeholder--4x3 {
aspect-ratio: 4 / 3;
}
.wf-placeholder--has-image::before,
.wf-placeholder--has-image::after {
display: none;
}
.wf-placeholder--has-image {
border: 1px solid rgba(151, 144, 147, 0.28);
background: none;
transition:
transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.26s ease-out,
box-shadow 0.26s ease-out;
}
.wf-placeholder--has-image:hover,
.wf-placeholder--has-image:focus-within {
--wf-hover-y: -2px;
border-color: rgba(243, 125, 57, 0.5);
box-shadow: 0 8px 24px rgba(243, 125, 57, 0.15);
}
html[data-theme="dark"] .wf-placeholder--has-image {
border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .wf-placeholder--has-image:hover,
html[data-theme="dark"] .wf-placeholder--has-image:focus-within {
--wf-hover-y: -2px;
border-color: rgba(255, 157, 99, 0.55);
box-shadow: 0 8px 28px rgba(255, 157, 99, 0.2);
}
.wf-logo-strip {
padding-top: 20px;
padding-bottom: 28px;
}
.wf-logo-strip-copy {
margin: 0;
color: var(--wr-text-muted);
font-size: 16px;
line-height: 16px;
letter-spacing: -0.2px;
font-weight: 500;
}
.wf-logo-grid {
margin: 18px 0 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}
.wf-logo-card {
position: relative;
min-height: 84px;
border-radius: var(--wr-r-16);
border: 1px solid rgba(151, 144, 147, 0.26);
background: var(--wr-white);
display: flex;
align-items: center;
justify-content: center;
padding: 16px 14px;
box-shadow: 0 8px 20px rgba(48, 33, 39, 0.06);
overflow: hidden;
transition:
transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.24s ease-out,
border-color 0.24s ease-out;
}
.wf-logo-card::after {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
opacity: 0;
pointer-events: none;
transition: opacity 0.24s ease-out;
}
.wf-logo-card:hover,
.wf-logo-card:focus-within {
transform: translateY(-3px);
box-shadow: 0 14px 26px rgba(48, 33, 39, 0.12);
border-color: rgba(243, 125, 57, 0.34);
}
.wf-logo-card:hover::after,
.wf-logo-card:focus-within::after {
opacity: 1;
}
.wf-logo-image {
display: block;
width: min(100%, 168px);
max-width: 100%;
max-height: 42px;
height: auto;
object-fit: contain;
}
.wf-awards-strip {
padding-top: 64px;
padding-bottom: 56px;
}
.wf-awards-row {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.wf-award-badge {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0%;
min-width: 0;
}
.wf-award-image {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
html[data-theme="dark"] .wf-award-image {
filter: invert(1) brightness(0.88) hue-rotate(180deg);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .wf-award-image {
filter: invert(1) brightness(0.88) hue-rotate(180deg);
}
}
.wf-stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.wf-stat-card {
position: relative;
border-radius: var(--wr-r-20);
background: var(--wr-white);
box-shadow: 0 8px 20px rgba(48, 33, 39, 0.06);
padding: 24px 20px;
text-align: center;
transition:
transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.24s ease-out;
}
.wf-stat-card::after {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
opacity: 0;
pointer-events: none;
transition: opacity 0.24s ease-out;
}
.wf-stat-card:hover,
.wf-stat-card:focus-within {
transform: translateY(-3px);
box-shadow: 0 14px 26px rgba(48, 33, 39, 0.12);
}
.wf-stat-card:hover::after,
.wf-stat-card:focus-within::after {
opacity: 1;
}
.wf-stat-value {
margin: 0;
color: var(--wr-ink);
font-family: "Rodger Bold", "Rodger Bold Placeholder", sans-serif;
font-size: 44px;
line-height: 44px;
letter-spacing: -0.8px;
font-weight: 400;
}
.wf-stat-label {
margin: 10px 0 0;
color: var(--wr-text-muted);
font-size: 18px;
line-height: 22px;
letter-spacing: -0.3px;
font-weight: 500;
}
.wf-number-list {
margin: 24px 0 30px;
padding: 0;
list-style: none;
display: grid;
gap: 20px;
}
.wf-number-list li {
transition:
transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.22s ease-out,
background-color 0.22s ease-out;
border-radius: var(--wr-r-16);
background: var(--wf-problem-card-bg);
box-shadow: inset 0 0 0 1px var(--wf-problem-card-border);
padding: 16px 18px;
}
.wf-number-list li:hover,
.wf-number-list li:focus-within {
transform: translateY(-2px);
background: var(--wf-problem-card-hover-bg);
box-shadow:
0 10px 20px rgba(48, 33, 39, 0.1),
inset 0 0 0 1px var(--wf-problem-card-border);
}
.wf-number-title {
margin: 0 0 6px;
color: var(--wf-problem-card-text);
font-size: 24px;
line-height: 24px;
letter-spacing: -0.48px;
font-weight: 700;
font-family: "Onest", "Onest Placeholder", sans-serif;
}
.wf-number-list .wr-text-body {
color: var(--wf-problem-card-text);
}
.wf-center {
text-align: center;
}
.wf-center-subtext {
margin: 16px auto 0;
max-width: 760px;
}
.wf-testimonial-card {
position: relative;
margin-top: 24px;
border-radius: var(--wr-r-20);
background: var(--wr-white);
border: 1px solid rgba(151, 144, 147, 0.3);
padding: 28px;
display: grid;
gap: 10px;
transition:
transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.24s ease-out,
border-color 0.24s ease-out;
}
.wf-testimonial-card:hover,
.wf-testimonial-card:focus-within {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(48, 33, 39, 0.12);
border-color: rgba(243, 125, 57, 0.38);
}
.wf-testimonial-card-dark {
background: var(--wf-dark-card-bg);
border-color: var(--wf-dark-card-border);
}
.wf-quote {
margin: 0;
font-size: 20px;
line-height: 26px;
letter-spacing: -0.4px;
color: var(--wr-ink);
}
.wf-quote-dark {
color: var(--wf-on-dark);
}
.wf-quote-author {
margin: 0;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.3px;
color: var(--wr-text-subtle);
font-weight: 600;
}
.wf-quote-author-dark {
color: var(--wf-on-dark-muted);
}
.wf-cap-testimonials {
padding-top: 68px;
}
.wf-cap-testimonials-subtext {
margin: 16px auto 0;
max-width: 820px;
color: var(--wr-text-muted);
}
.wf-cap-testimonials-grid {
margin-top: 34px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.wf-cap-testimonial-card {
position: relative;
border-radius: var(--wr-r-16);
border: 1px solid rgba(151, 144, 147, 0.3);
background: var(--wr-bg-panel-light);
padding: 22px 20px;
display: grid;
gap: 14px;
transition:
transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.24s ease-out,
border-color 0.24s ease-out,
background-color 0.24s ease-out;
}
.wf-cap-testimonial-card::after {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: var(--wf-card-sheen-gradient);
opacity: 0;
pointer-events: none;
transition: opacity 0.24s ease-out;
}
.wf-cap-testimonial-card:hover,
.wf-cap-testimonial-card:focus-within {
transform: translateY(-3px);
box-shadow: 0 14px 24px rgba(48, 33, 39, 0.1);
border-color: rgba(243, 125, 57, 0.32);
background: var(--wf-cap-testimonial-hover-bg);
}
.wf-cap-testimonial-card:hover::after,
.wf-cap-testimonial-card:focus-within::after {
opacity: 1;
}
.wf-cap-testimonial-stars {
display: inline-flex;
align-items: center;
gap: 4px;
}
.wf-cap-testimonial-star {
color: var(--wr-accent-yellow);
font-size: 20px;
line-height: 1;
}
.wf-cap-testimonial-quote {
margin: 0;
color: var(--wr-ink);
font-size: 18px;
line-height: 24px;
letter-spacing: -0.35px;
font-style: italic;
}
.wf-cap-testimonial-person {
display: flex;
align-items: center;
gap: 12px;
}
.wf-cap-testimonial-avatar {
width: 48px;
height: 48px;
border-radius: var(--wr-r-pill);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.2px;
font-weight: 700;
color: var(--wr-white);
flex: 0 0 48px;
box-shadow: 0 6px 12px rgba(48, 33, 39, 0.12);
}
.wf-cap-testimonial-card:nth-child(1) .wf-cap-testimonial-avatar {
background: var(--wr-accent-blue);
}
.wf-cap-testimonial-card:nth-child(2) .wf-cap-testimonial-avatar {
background: var(--wr-accent-orange);
}
.wf-cap-testimonial-card:nth-child(3) .wf-cap-testimonial-avatar {
background: var(--wr-accent-yellow);
color: var(--wr-ink);
}
.wf-cap-testimonial-meta {
display: grid;
gap: 6px;
}
.wf-cap-testimonial-role {
margin: 0;
color: var(--wr-text-muted);
font-size: 14px;
line-height: 16px;
letter-spacing: -0.22px;
font-weight: 500;
}
.wf-feature-grid {
margin-top: 34px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.wf-feature-card {
position: relative;
border-radius: var(--wr-r-16);
background: var(--wr-bg-panel-light);
padding: 22px 20px;
transition:
transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.24s ease-out,
background-color 0.24s ease-out;
}
.wf-feature-card::after {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: var(--wf-card-sheen-gradient);
opacity: 0;
pointer-events: none;
transition: opacity 0.24s ease-out;
}
.wf-feature-card:hover,
.wf-feature-card:focus-within {
transform: translateY(-3px);
box-shadow: 0 14px 24px rgba(48, 33, 39, 0.1);
background: var(--wf-feature-hover-bg);
}
.wf-feature-card:hover::after,
.wf-feature-card:focus-within::after {
opacity: 1;
}
.wf-feature-card h3 {
margin: 0;
color: var(--wr-ink);
font-size: 24px;
line-height: 24px;
letter-spacing: -0.48px;
font-family: "Onest", "Onest Placeholder", sans-serif;
font-weight: 700;
}
.wf-feature-card p {
margin: 10px 0 0;
color: var(--wr-ink);
font-size: 18px;
line-height: 24px;
letter-spacing: -0.35px;
}
.wf-feature-icon {
width: 22px;
height: 22px;
border-radius: 8px;
display: block;
margin-bottom: 14px;
}
.wf-feature-icon--orange {
background: var(--wr-accent-orange);
}
.wf-feature-icon--blue {
background: var(--wr-accent-blue);
}
.wf-feature-icon--yellow {
background: var(--wr-accent-yellow);
}
.wf-table-wrap {
position: relative;
margin-top: 28px;
border-radius: var(--wr-r-16);
overflow-x: hidden;
overflow-y: visible;
background: var(--wr-white);
border: 1px solid rgba(151, 144, 147, 0.34);
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
transition:
transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.24s ease-out;
}
.wf-table-wrap:hover,
.wf-table-wrap:focus-within {
transform: translateY(-2px);
box-shadow: 0 12px 22px rgba(48, 33, 39, 0.1);
}
.wf-compare-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
min-width: 0;
}
.wf-compare-table th,
.wf-compare-table td {
padding: 16px 18px;
text-align: left;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.3px;
overflow-wrap: anywhere;
}
.wf-compare-table th:first-child,
.wf-compare-table td:first-child {
width: 32%;
}
.wf-compare-table th:not(:first-child),
.wf-compare-table td:not(:first-child) {
width: 17%;
}
.wf-compare-table thead th {
background: var(--wr-bg-panel-light);
color: var(--wr-ink);
font-weight: 700;
border-bottom: 1px solid rgba(151, 144, 147, 0.2);
}
.wf-compare-table thead th:nth-child(2),
.wf-compare-table tbody td:nth-child(2) {
background: rgba(252, 184, 39, 0.14);
}
.wf-compare-table thead th:first-child {
border-top-left-radius: var(--wr-r-16);
}
.wf-compare-table thead th:last-child {
border-top-right-radius: var(--wr-r-16);
}
.wf-compare-table tbody td {
border-top: 1px solid rgba(151, 144, 147, 0.22);
color: var(--wr-ink);
font-weight: 500;
}
.wf-compare-table tbody td:nth-child(2) {
font-weight: 700;
}
.wf-compare-table tbody tr {
transition:
box-shadow 0.2s ease-out,
transform 0.2s ease-out;
}
.wf-compare-table tbody tr:hover {
transform: translateY(-1px);
box-shadow: inset 0 0 0 1px rgba(243, 125, 57, 0.16);
}
.wf-compare-table tbody tr:hover td {
background-color: rgba(252, 184, 39, 0.08);
}
.wf-compare-table tbody tr:hover td:nth-child(2) {
background: rgba(252, 184, 39, 0.22);
}
.wf-pricing-subtext {
margin: 16px auto 0;
max-width: 760px;
}
.wf-pricing-toggle-wrap {
margin-top: 32px;
}
.wf-pricing-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px;
border-radius: var(--wr-r-pill);
background: var(--wr-bg-panel-gray);
border: 1px solid rgba(151, 144, 147, 0.28);
box-shadow: 0 8px 18px rgba(48, 33, 39, 0.08);
}
.wf-pricing-toggle-btn {
border: 0;
min-height: 48px;
border-radius: calc(var(--wr-r-pill) - 10px);
padding: 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: "Onest", "Onest Placeholder", sans-serif;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.24px;
font-weight: 700;
color: var(--wr-text-muted);
background: transparent;
cursor: pointer;
transition:
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
box-shadow var(--wf-motion-base) var(--wf-motion-ease-gentle),
color var(--wf-motion-fast) ease-out,
background-color var(--wf-motion-fast) ease-out;
}
.wf-pricing-toggle-btn:hover,
.wf-pricing-toggle-btn:focus-visible {
transform: translateY(-1px);
color: var(--wr-ink);
}
.wf-pricing-toggle-btn.is-active {
color: var(--wf-pricing-toggle-active-color);
background: var(--wr-accent-yellow);
box-shadow: 0 4px 0 rgba(48, 33, 39, 0.12);
}
.wf-pricing-toggle-btn:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-pricing-toggle-badge {
display: inline-flex;
align-items: center;
border-radius: var(--wr-r-pill);
border: 1px solid var(--wf-pricing-badge-border);
background: var(--wf-pricing-badge-bg);
padding: 4px 8px;
color: var(--wf-pricing-badge-color);
font-size: 11px;
line-height: 11px;
letter-spacing: 0.04em;
font-weight: 700;
}
.wf-pricing-grid {
margin-top: 34px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.wf-pricing-card {
position: relative;
border-radius: var(--wr-r-20);
border: 1px solid rgba(151, 144, 147, 0.28);
background: var(--wr-bg-panel-light);
box-shadow: 0 8px 20px rgba(48, 33, 39, 0.08);
padding: 26px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 22px;
transition:
transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.24s ease-out,
border-color 0.24s ease-out,
background-color 0.24s ease-out;
}
.wf-pricing-card:hover,
.wf-pricing-card:focus-within {
transform: translateY(-3px);
box-shadow: 0 14px 24px rgba(48, 33, 39, 0.1);
border-color: rgba(243, 125, 57, 0.3);
}
.wf-pricing-card--pro {
background: var(--wf-pricing-pro-bg);
border-color: rgba(243, 125, 57, 0.38);
box-shadow: var(--wf-pricing-pro-shadow);
}
.wf-pricing-card--pro::before {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(
160deg,
rgba(255, 255, 255, 0.46) 0%,
rgba(255, 255, 255, 0) 46%
);
display: var(--wf-pricing-pro-before-display);
}
.wf-pricing-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.wf-pricing-plan-name {
margin: 0;
color: var(--wr-ink);
font-size: 28px;
line-height: 28px;
letter-spacing: -0.52px;
font-weight: 700;
font-family: "Onest", "Onest Placeholder", sans-serif;
}
.wf-pricing-popular {
display: inline-flex;
align-items: center;
border-radius: var(--wr-r-pill);
border: 1px solid rgba(243, 125, 57, 0.35);
background: rgba(243, 125, 57, 0.12);
padding: 6px 10px;
color: var(--wr-accent-orange);
font-size: 11px;
line-height: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
}
.wf-pricing-plan-copy {
margin: 10px 0 0;
color: var(--wr-ink);
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.28px;
}
.wf-pricing-value-block {
margin-top: 20px;
}
.wf-pricing-value-row {
display: flex;
align-items: flex-end;
gap: 8px;
}
.wf-pricing-value-viewport {
height: 48px;
overflow: hidden;
}
.wf-pricing-value-stack {
display: flex;
flex-direction: column;
transition: transform var(--wf-motion-base) var(--wf-motion-ease-gentle);
}
.wf-pricing-value {
height: 48px;
display: flex;
align-items: center;
color: var(--wr-ink);
font-family: "Rodger Bold", "Rodger Bold Placeholder", sans-serif;
font-size: 44px;
line-height: 44px;
letter-spacing: -0.8px;
font-weight: 400;
}
.wf-pricing-period {
margin-bottom: 6px;
color: var(--wr-text-muted);
font-size: 16px;
line-height: 16px;
letter-spacing: -0.2px;
font-weight: 600;
}
.wf-pricing-billed {
margin: 8px 0 0;
color: var(--wr-text-subtle);
font-size: 14px;
line-height: 16px;
letter-spacing: -0.2px;
font-weight: 500;
}
.wf-pricing-contact {
margin: 0;
color: var(--wr-ink);
font-family: "Rodger Bold", "Rodger Bold Placeholder", sans-serif;
font-size: 42px;
line-height: 42px;
letter-spacing: -0.84px;
font-weight: 400;
}
.wf-pricing-contact-note {
margin: 10px 0 0;
color: var(--wr-text-muted);
font-size: 14px;
line-height: 18px;
letter-spacing: -0.2px;
font-weight: 500;
}
.wf-pricing-card-bottom {
display: grid;
gap: 18px;
}
.wf-pricing-card-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
border-radius: var(--wr-r-pill);
border: 1px solid rgba(151, 144, 147, 0.3);
padding: 0 20px;
color: var(--wr-ink);
background: var(--wr-bg-panel-gray);
text-decoration: none;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.2px;
font-weight: 700;
transform: translateY(0);
transition:
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
box-shadow var(--wf-motion-base) var(--wf-motion-ease-gentle),
background-color var(--wf-motion-fast) ease-out,
border-color var(--wf-motion-fast) ease-out;
}
.wf-pricing-card-cta:hover,
.wf-pricing-card-cta:focus-visible {
transform: translateY(-1px);
border-color: rgba(243, 125, 57, 0.36);
box-shadow: 0 8px 16px rgba(48, 33, 39, 0.1);
}
.wf-pricing-card-cta:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-pricing-card-cta--pro {
background: var(--wr-accent-yellow);
border-color: rgba(243, 125, 57, 0.34);
box-shadow: 0 4px 0 rgba(48, 33, 39, 0.12);
}
.wf-pricing-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.wf-pricing-list li {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--wr-ink);
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.28px;
}
.wf-pricing-list-dot {
width: 8px;
height: 8px;
margin-top: 6px;
flex: 0 0 8px;
border-radius: 99px;
background: rgba(151, 144, 147, 0.9);
}
.wf-pricing-list-dot--pro {
background: rgba(243, 125, 57, 0.9);
}
.wf-pricing-details {
margin-top: 28px;
}
.wf-pricing-details-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
border-radius: var(--wr-r-pill);
border: 1px solid rgba(151, 144, 147, 0.28);
background: var(--wr-white);
padding: 0 26px;
color: var(--wr-ink);
text-decoration: none;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.24px;
font-weight: 700;
transition:
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
box-shadow var(--wf-motion-base) var(--wf-motion-ease-gentle),
border-color var(--wf-motion-fast) ease-out;
}
.wf-pricing-details-link:hover,
.wf-pricing-details-link:focus-visible {
transform: translateY(-1px);
border-color: rgba(243, 125, 57, 0.34);
box-shadow: 0 10px 18px rgba(48, 33, 39, 0.1);
}
.wf-pricing-details-link:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-process-grid {
margin-top: 34px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.wf-step-badge {
width: 40px;
height: 40px;
border-radius: var(--wr-r-pill);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--wr-white);
font-size: 20px;
line-height: 20px;
letter-spacing: -0.3px;
font-weight: 700;
}
.wf-step-badge--orange {
background: var(--wr-accent-orange);
}
.wf-step-badge--blue {
background: var(--wr-accent-blue);
}
.wf-step-badge--yellow {
background: var(--wr-accent-yellow);
color: var(--wf-step-badge-yellow-text);
}
.wf-faq-list {
margin-top: 30px;
display: grid;
gap: 12px;
}
.wf-faq-item {
border-radius: var(--wr-r-16);
background: var(--wr-bg-panel-light);
border: 1px solid rgba(151, 144, 147, 0.28);
padding: 18px 20px;
overflow: clip;
transition:
transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.22s ease-out,
border-color 0.22s ease-out,
background-color 0.22s ease-out;
}
.wf-faq-item:hover,
.wf-faq-item:focus-within {
transform: translateY(-2px);
box-shadow: 0 10px 18px rgba(48, 33, 39, 0.1);
border-color: rgba(243, 125, 57, 0.34);
background: var(--wf-faq-hover-bg);
}
.wf-faq-trigger {
all: unset;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
cursor: pointer;
color: var(--wr-ink);
font-size: 20px;
line-height: 24px;
letter-spacing: -0.35px;
font-weight: 700;
transition: color 0.2s ease-out;
}
.wf-faq-trigger::after {
content: "+";
flex-shrink: 0;
margin-left: 16px;
color: var(--wr-accent-orange);
font-size: 24px;
line-height: 24px;
font-weight: 700;
transition:
transform 0.22s ease-out,
color 0.22s ease-out;
}
.wf-faq-item[data-open] .wf-faq-trigger::after {
content: "\2212";
transform: rotate(180deg);
}
.wf-faq-answer p {
margin: 0;
max-height: 0;
opacity: 0;
transform: translateY(-6px);
overflow: hidden;
color: var(--wr-ink);
font-size: 18px;
line-height: 24px;
letter-spacing: -0.32px;
transition:
max-height 0.28s ease-out,
opacity 0.22s ease-out,
transform 0.22s ease-out,
margin-top 0.28s ease-out;
}
.wf-faq-item[data-open] .wf-faq-answer p {
margin-top: 14px;
max-height: 180px;
opacity: 1;
transform: translateY(0);
}
.wf-final-cta {
padding-top: 96px;
padding-bottom: 96px;
}
.wf-dark-subtext {
margin: 18px auto 26px;
max-width: 680px;
color: var(--wf-on-dark-muted);
font-size: 20px;
line-height: 26px;
letter-spacing: -0.3px;
}
.wf-tenant-section {
padding-top: 96px;
padding-bottom: 108px;
}
.wf-tenant-section .wr-container--focus {
width: min(100%, 796px);
}
.wf-tenant-subtext {
margin: 16px auto 0;
max-width: 720px;
}
.wf-tenant-form {
position: relative;
margin-top: 30px;
border-radius: var(--wr-r-20);
border: 1px solid var(--wf-tenant-form-border);
background: var(--wf-tenant-form-bg);
box-shadow: var(--wf-tenant-form-shadow);
padding: 28px;
display: grid;
gap: 18px;
overflow: clip;
}
.wf-tenant-form::before {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
pointer-events: none;
background: var(--wf-tenant-form-gloss);
opacity: var(--wf-tenant-form-gloss-opacity);
}
.wf-tenant-form-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 16px;
}
.wf-tenant-field {
display: grid;
gap: 8px;
}
.wf-tenant-field--full {
grid-column: 1 / -1;
}
.wf-tenant-label {
color: var(--wf-tenant-label-color);
font-size: 15px;
line-height: 15px;
letter-spacing: -0.24px;
font-weight: 700;
}
.wf-tenant-label span {
color: var(--wr-accent-orange);
}
.wf-tenant-input {
width: 100%;
min-height: 56px;
border-radius: var(--wr-r-16);
border: 1px solid var(--wf-tenant-input-border);
background: var(--wf-tenant-input-bg);
padding: 0 18px;
color: var(--wf-tenant-input-color);
font-family: "Onest", "Onest Placeholder", sans-serif;
font-size: 18px;
line-height: 18px;
letter-spacing: -0.3px;
font-weight: 500;
transition:
border-color var(--wf-motion-fast) ease-out,
box-shadow var(--wf-motion-fast) ease-out,
background-color var(--wf-motion-fast) ease-out;
}
.wf-tenant-input::placeholder {
color: var(--wf-tenant-input-placeholder);
}
.wf-tenant-input:hover {
border-color: var(--wf-tenant-input-hover-border);
}
.wf-tenant-input:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
border-color: rgba(243, 125, 57, 0.4);
background: var(--wf-tenant-input-focus-bg);
}
.wf-tenant-help {
margin: 0;
color: var(--wf-tenant-help-color);
font-size: 13px;
line-height: 16px;
letter-spacing: -0.18px;
font-weight: 500;
}
.wf-tenant-actions {
position: relative;
z-index: 1;
}
.wf-tenant-submit {
position: relative;
isolation: isolate;
overflow: hidden;
width: 100%;
min-height: 58px;
border: 0;
border-radius: var(--wr-r-pill);
background: var(--wr-accent-yellow);
color: var(--wr-ink);
padding: 0 22px;
font-family: "Onest", "Onest Placeholder", sans-serif;
font-size: 20px;
line-height: 20px;
letter-spacing: -0.4px;
font-weight: 700;
cursor: pointer;
transform: translateY(0);
box-shadow: 0 6px 0 rgba(48, 33, 39, 0.14);
transition:
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
box-shadow var(--wf-motion-base) var(--wf-motion-ease-gentle),
background-color var(--wf-motion-fast) ease-out;
}
.wf-tenant-submit::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
112deg,
rgba(255, 255, 255, 0) 14%,
rgba(255, 255, 255, 0.34) 44%,
rgba(255, 255, 255, 0) 68%
);
transform: translateX(10%);
opacity: 0.64;
pointer-events: none;
transition:
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
opacity var(--wf-motion-base) var(--wf-motion-ease-standard);
}
.wf-tenant-submit:hover,
.wf-tenant-submit:focus-visible {
transform: translateY(var(--wf-cta-lift-hover));
box-shadow: 0 9px 0 rgba(48, 33, 39, 0.16);
}
.wf-tenant-submit:hover::before,
.wf-tenant-submit:focus-visible::before {
transform: translateX(-10%);
opacity: 0.82;
}
.wf-tenant-submit:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-tenant-submit:active {
transform: translateY(var(--wf-cta-lift-active));
box-shadow: 0 7px 0 rgba(48, 33, 39, 0.14);
}
.wf-site-footer {
padding: 0 0 40px;
}
.wf-footer-shell {
position: relative;
border-radius: var(--wr-r-20);
border: 1px solid var(--wf-footer-shell-border);
background: var(--wf-footer-shell-bg);
box-shadow: var(--wf-footer-shell-shadow);
padding: 30px;
overflow: clip;
}
.wf-footer-shell::before {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
pointer-events: none;
background: var(--wf-footer-shell-gloss);
opacity: var(--wf-footer-shell-gloss-opacity);
transition: opacity var(--wf-motion-base) var(--wf-motion-ease-standard);
}
.wf-footer-shell:hover::before,
.wf-footer-shell:focus-within::before {
opacity: 1;
}
.wf-footer-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.12fr);
gap: 24px;
}
.wf-footer-brand {
display: grid;
gap: 14px;
}
.wf-footer-brand-mark {
display: inline-flex;
align-items: center;
gap: 10px;
}
.wf-footer-copy {
margin: 0;
max-width: 330px;
color: var(--wf-footer-copy-color);
font-size: 16px;
line-height: 22px;
letter-spacing: -0.24px;
font-weight: 500;
}
.wf-footer-social {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.wf-footer-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--wr-r-12);
border: 1px solid var(--wf-footer-social-border);
background: var(--wf-footer-social-bg);
color: var(--wf-footer-social-color);
text-decoration: none;
transition:
transform var(--wf-motion-fast) var(--wf-motion-ease-gentle),
color var(--wf-motion-fast) ease-out,
box-shadow var(--wf-motion-fast) ease-out,
border-color var(--wf-motion-fast) ease-out;
}
.wf-footer-social-link svg {
width: 16px;
height: 16px;
}
.wf-footer-social-link:hover,
.wf-footer-social-link:focus-visible {
color: var(--wr-ink);
border-color: rgba(243, 125, 57, 0.4);
transform: translateY(-2px);
box-shadow: 0 8px 14px rgba(48, 33, 39, 0.1);
}
.wf-footer-social-link:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-footer-heading {
margin: 0;
color: var(--wr-ink);
font-family: "Onest", "Onest Placeholder", sans-serif;
font-size: 15px;
line-height: 15px;
letter-spacing: -0.24px;
font-weight: 700;
}
.wf-footer-list {
margin: 14px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.wf-footer-link {
position: relative;
display: inline-flex;
width: fit-content;
color: var(--wf-footer-link-color);
font-size: 15px;
line-height: 18px;
letter-spacing: -0.2px;
font-weight: 500;
text-decoration: none;
transition:
color var(--wf-motion-fast) ease-out,
transform var(--wf-motion-fast) var(--wf-motion-ease-gentle);
}
.wf-footer-link::after,
.wf-footer-legal-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 2px;
border-radius: 99px;
background: var(--wr-accent-orange);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--wf-motion-fast) var(--wf-motion-ease-gentle);
}
.wf-footer-link:hover,
.wf-footer-link:focus-visible,
.wf-footer-legal-link:hover,
.wf-footer-legal-link:focus-visible {
color: var(--wf-footer-link-hover-color);
transform: translateY(-1px);
}
.wf-footer-link:hover::after,
.wf-footer-link:focus-visible::after,
.wf-footer-legal-link:hover::after,
.wf-footer-legal-link:focus-visible::after {
transform: scaleX(1);
}
.wf-footer-link:focus-visible,
.wf-footer-legal-link:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
.wf-footer-contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--wf-footer-contact-color);
font-size: 15px;
line-height: 19px;
letter-spacing: -0.2px;
font-weight: 500;
}
.wf-footer-contact-icon {
width: 16px;
height: 16px;
margin-top: 1px;
flex: 0 0 16px;
color: var(--wf-footer-contact-icon);
}
.wf-footer-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 16px;
min-height: 48px;
width: fit-content;
border-radius: var(--wr-r-pill);
padding: 0 20px;
color: var(--wr-ink);
text-decoration: none;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.24px;
font-weight: 700;
}
.wf-footer-cta svg,
.wf-footer-cta span {
position: relative;
z-index: 1;
}
.wf-footer-cta svg {
width: 15px;
height: 15px;
}
.wf-footer-bottom {
position: relative;
z-index: 1;
margin-top: 24px;
border-top: 1px solid var(--wf-footer-bottom-border);
padding-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px 16px;
}
.wf-footer-meta {
margin: 0;
color: var(--wf-footer-meta-color);
font-size: 14px;
line-height: 16px;
letter-spacing: -0.2px;
font-weight: 500;
}
.wf-footer-legal {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px 20px;
}
.wf-footer-legal-link {
position: relative;
color: var(--wf-footer-legal-color);
font-size: 14px;
line-height: 16px;
letter-spacing: -0.2px;
font-weight: 500;
text-decoration: none;
transition:
color var(--wf-motion-fast) ease-out,
transform var(--wf-motion-fast) var(--wf-motion-ease-gentle);
}
/* Shared conversion CTA treatment */
.wr-cta-join,
.wf-email-cta__button,
.wf-pricing-card-cta,
.wf-tenant-submit,
.wf-footer-cta,
.wf-mobile-menu-cta {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--wf-cta-conv-bg);
color: var(--wf-cta-conv-text);
border: 1px solid rgba(243, 125, 57, 0.3);
transform: translateY(0);
will-change: transform, box-shadow;
box-shadow:
0 var(--wf-cta-conv-edge-size) 0 var(--wf-cta-conv-edge),
0 8px 14px rgba(48, 33, 39, 0.1);
transition:
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
box-shadow var(--wf-motion-base) var(--wf-motion-ease-gentle),
background-color var(--wf-motion-base) var(--wf-motion-ease-standard),
border-color var(--wf-motion-fast) ease-out;
}
.wr-cta-join::before,
.wf-email-cta__button::before,
.wf-pricing-card-cta::before,
.wf-tenant-submit::before,
.wf-footer-cta::before,
.wf-mobile-menu-cta::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
112deg,
rgba(255, 255, 255, 0) 14%,
rgba(255, 255, 255, var(--wf-cta-sheen-mid-alpha)) 44%,
rgba(255, 255, 255, 0) 68%
);
transform: translateX(10%);
opacity: var(--wf-cta-sheen-opacity);
pointer-events: none;
z-index: 0;
transition:
transform var(--wf-motion-base) var(--wf-motion-ease-gentle),
opacity var(--wf-motion-base) var(--wf-motion-ease-standard);
}
.wr-cta-join:hover,
.wr-cta-join:focus-visible,
.wf-email-cta__button:hover,
.wf-email-cta__button:focus-visible,
.wf-pricing-card-cta:hover,
.wf-pricing-card-cta:focus-visible,
.wf-tenant-submit:hover,
.wf-tenant-submit:focus-visible,
.wf-footer-cta:hover,
.wf-footer-cta:focus-visible,
.wf-mobile-menu-cta:hover,
.wf-mobile-menu-cta:focus-visible {
transform: translateY(var(--wf-cta-lift-hover));
border-color: rgba(243, 125, 57, 0.48);
box-shadow:
0 calc(var(--wf-cta-conv-edge-size) + 1px) 0 var(--wf-cta-conv-edge),
0 11px 18px rgba(48, 33, 39, 0.13);
}
.wr-cta-join:hover::before,
.wr-cta-join:focus-visible::before,
.wf-email-cta__button:hover::before,
.wf-email-cta__button:focus-visible::before,
.wf-pricing-card-cta:hover::before,
.wf-pricing-card-cta:focus-visible::before,
.wf-tenant-submit:hover::before,
.wf-tenant-submit:focus-visible::before,
.wf-footer-cta:hover::before,
.wf-footer-cta:focus-visible::before,
.wf-mobile-menu-cta:hover::before,
.wf-mobile-menu-cta:focus-visible::before {
transform: translateX(-10%);
opacity: var(--wf-cta-sheen-hover-opacity);
}
.wr-cta-join:active,
.wf-email-cta__button:active,
.wf-pricing-card-cta:active,
.wf-tenant-submit:active,
.wf-footer-cta:active,
.wf-mobile-menu-cta:active {
transform: translateY(var(--wf-cta-lift-active));
box-shadow:
0 calc(var(--wf-cta-conv-edge-size) - 1px) 0 var(--wf-cta-conv-edge),
0 7px 12px rgba(48, 33, 39, 0.1);
}
.wr-cta-join:focus-visible,
.wf-email-cta__button:focus-visible,
.wf-pricing-card-cta:focus-visible,
.wf-tenant-submit:focus-visible,
.wf-footer-cta:focus-visible,
.wf-mobile-menu-cta:focus-visible {
outline: 2px solid rgba(243, 125, 57, 0.92);
outline-offset: 2px;
}
/* Pro card CTA keeps the shared conversion style. */
.wf-pricing-card-cta--pro {
border-color: rgba(243, 125, 57, 0.3);
}
.wf-tenant-success {
position: relative;
z-index: 1;
margin: 2px 0 0;
border-radius: var(--wr-r-16);
border: 1px solid color-mix(in srgb, var(--wf-feedback-success) 32%, transparent);
background: var(--wf-feedback-success-bg);
padding: 12px 14px;
color: var(--wr-ink);
font-size: 15px;
line-height: 20px;
letter-spacing: -0.22px;
font-weight: 600;
}
.wf-tenant-success[hidden] {
display: none;
}
.wf-tenant-success:focus-visible {
outline: 2px solid rgba(76, 147, 175, 0.82);
outline-offset: 2px;
}
/* ─── Disabled States ──────────────────────────────────────────────────────── */
.wf-tenant-input:disabled,
.wf-tenant-submit:disabled,
.wf-email-cta__input:disabled,
.wf-email-cta__button:disabled,
.wf-pricing-toggle-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.wf-tenant-input:disabled:hover,
.wf-tenant-submit:disabled:hover,
.wf-email-cta__input:disabled:hover,
.wf-email-cta__button:disabled:hover,
.wf-pricing-toggle-btn:disabled:hover {
transform: none;
box-shadow: none;
}
/* ─── Error / Validation States ────────────────────────────────────────────── */
.wf-tenant-input--error {
border-color: var(--wf-feedback-error) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--wf-feedback-error) 18%, transparent);
}
.wf-tenant-input--error:focus-visible {
outline-color: var(--wf-feedback-error);
}
.wf-field-error {
margin: -2px 0 0;
padding: 4px 2px 0;
font-family: "Onest", "Onest Placeholder", sans-serif;
font-size: 14px;
line-height: 18px;
letter-spacing: -0.2px;
font-weight: 500;
color: var(--wf-feedback-error);
}
.wf-email-cta--error {
border-color: var(--wf-feedback-error) !important;
box-shadow: 0 4px 0 color-mix(in srgb, var(--wf-feedback-error) 35%, transparent),
inset 0 0 0 2px color-mix(in srgb, var(--wf-feedback-error) 45%, transparent);
}
/* ─── Loading State ────────────────────────────────────────────────────────── */
@keyframes wf-spin {
to { transform: rotate(360deg); }
}
.wf-btn--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.wf-btn--loading > * {
visibility: hidden;
}
.wf-btn--loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2.5px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: wf-spin 0.6s linear infinite;
color: var(--wf-cta-conv-text);
}
.reveal {
opacity: 0;
transform: translate3d(0, 24px, 0);
will-change: opacity, transform;
transition:
opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.56s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
.wr-card-process {
transition:
transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.24s ease-out,
filter 0.24s ease-out;
}
.wr-card-process:hover,
.wr-card-process:focus-within {
transform: translateY(-3px);
box-shadow: 0 14px 24px rgba(48, 33, 39, 0.12);
filter: saturate(1.02);
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.wf-nav-shell::after,
.wf-nav-glass--overlay {
transition: none !important;
animation: none !important;
}
.wr-cta-join::before,
.wf-btn-dark::before,
.wf-email-cta__button::before,
.wf-pricing-card-cta::before,
.wf-tenant-submit::before,
.wf-footer-cta::before,
.wf-mobile-menu-cta::before,
.wf-logo-card::after,
.wf-cap-testimonial-card::after,
.wf-footer-shell::before,
.wf-footer-link::after,
.wf-footer-legal-link::after {
transition: none !important;
animation: none !important;
transform: none !important;
}
.wf-mobile-menu-toggle__line,
.wf-mobile-menu-close__line,
.wf-theme-icon-toggle__sun,
.wf-theme-icon-toggle__moon {
transition: none !important;
animation: none !important;
}
.wf-header,
.wf-nav-shell,
.wf-nav-links a,
.wf-nav-links a::after,
.wf-nav-links button,
.wf-nav-links button::after,
.wf-theme-icon-toggle,
.wf-theme-icon-toggle__sun,
.wf-theme-icon-toggle__moon,
.wf-mobile-menu,
.wf-mobile-menu-backdrop,
.wf-mobile-menu-panel,
.wf-mobile-menu-links a,
.wf-mobile-menu-links button,
.wf-mobile-menu-cta,
.wf-mobile-menu-toggle,
.wf-mobile-menu-close,
.wr-cta-join,
.wf-btn-dark,
.wf-email-cta__button,
.wf-tenant-form,
.wf-tenant-input,
.wf-tenant-submit,
.wf-pricing-toggle-btn,
.wf-pricing-value-stack,
.wf-pricing-card,
.wf-pricing-card-cta,
.wf-pricing-details-link,
.wf-footer-shell,
.wf-footer-social-link,
.wf-footer-link,
.wf-footer-legal-link,
.wf-footer-cta,
.wf-placeholder,
.wf-logo-card,
.wf-award-badge,
.wf-stat-card,
.wf-number-list li,
.wf-testimonial-card,
.wf-cap-testimonial-card,
.wf-feature-card,
.wf-table-wrap,
.wf-compare-table tbody tr,
.wf-faq-item,
.wf-faq-item summary::after,
.wf-faq-item p,
.reveal,
.wr-card-process {
transition: none !important;
animation: none !important;
transform: none !important;
filter: none !important;
}
html.theme-animating *,
html.theme-animating *::before,
html.theme-animating *::after {
transition: none !important;
animation: none !important;
}
}
@media (min-width: 800px) and (max-width: 1399.98px) {
html {
scroll-padding-top: 104px;
}
.wf-nav-links {
gap: 16px;
}
.wf-nav-links a,
.wf-nav-links button {
font-size: 14px;
line-height: 14px;
letter-spacing: -0.28px;
}
.wf-theme-icon-toggle {
width: 40px;
min-width: 40px;
height: 40px;
}
.wf-theme-icon-toggle__sun svg,
.wf-theme-icon-toggle__moon svg {
width: 15px;
height: 15px;
}
.wf-section {
padding: 72px 0;
}
.wf-hero-grid,
.wf-split {
grid-template-columns: 1.2fr 1fr;
gap: 30px;
align-items: center;
}
.wf-split-reverse > :first-child,
.wf-split-reverse > :last-child {
order: initial;
}
.wf-stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wf-logo-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wf-awards-strip {
padding-top: 48px;
padding-bottom: 40px;
}
.wf-awards-row {
gap: 32px;
}
.wf-heading-hero {
max-width: 680px;
}
.wf-checklist li {
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
}
.wf-number-title {
font-size: 20px;
line-height: 20px;
letter-spacing: -0.4px;
}
.wf-feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wf-cap-testimonials-grid {
grid-template-columns: minmax(0, 1fr);
}
.wf-pricing-grid {
grid-template-columns: minmax(0, 1fr);
}
.wf-pricing-card {
padding: 24px 22px;
}
.wf-pricing-card--pro {
grid-column: auto;
}
.wf-pricing-plan-name {
font-size: 24px;
line-height: 24px;
letter-spacing: -0.48px;
}
.wf-pricing-value {
font-size: 40px;
line-height: 40px;
letter-spacing: -0.7px;
}
.wf-pricing-contact {
font-size: 36px;
line-height: 36px;
letter-spacing: -0.72px;
}
.wf-pricing-toggle-btn {
min-height: 44px;
font-size: 15px;
line-height: 15px;
letter-spacing: -0.2px;
}
.wf-pricing-toggle-badge {
font-size: 10px;
line-height: 10px;
}
.wf-process-grid {
grid-template-columns: 1fr;
}
.wf-btn-dark {
font-size: 18px;
line-height: 18px;
letter-spacing: -0.36px;
padding: 20px 24px;
}
.wf-email-cta {
max-width: 600px;
}
.wf-email-cta__input,
.wf-email-cta__button {
min-height: 56px;
font-size: 18px;
line-height: 18px;
letter-spacing: -0.36px;
}
.wf-email-cta__button {
padding: 0 22px;
}
.wf-tenant-section {
padding-top: 84px;
padding-bottom: 92px;
}
.wf-tenant-subtext {
max-width: 680px;
}
.wf-tenant-form {
margin-top: 26px;
padding: 24px;
gap: 16px;
}
.wf-tenant-label {
font-size: 14px;
line-height: 14px;
letter-spacing: -0.2px;
}
.wf-tenant-input {
min-height: 52px;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.3px;
}
.wf-tenant-submit {
min-height: 54px;
font-size: 18px;
line-height: 18px;
letter-spacing: -0.36px;
}
.wf-site-footer {
padding-bottom: 34px;
}
.wf-footer-shell {
padding: 24px;
}
.wf-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 24px;
}
.wf-footer-copy {
max-width: 100%;
}
.wf-footer-bottom {
margin-top: 20px;
padding-top: 14px;
flex-direction: column;
align-items: flex-start;
}
.wf-footer-legal {
justify-content: flex-start;
}
}
@media (max-width: 799.98px) {
html {
scroll-padding-top: 88px;
}
.wf-page .wr-container--main,
.wf-page .wr-container--cta {
width: min(100%, 360px);
}
.wf-page .wr-container--focus {
width: min(100%, 392px);
}
.wf-header {
top: 8px;
padding-top: 8px;
will-change: auto;
}
.wf-nav-shell {
min-height: 58px;
}
.wf-nav-content {
min-height: 58px;
padding: 8px 12px;
gap: 8px;
}
.wf-nav-links {
display: none;
}
.wf-mobile-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
.wf-mobile-theme-switcher {
display: grid;
margin: 0 0 12px;
}
.wf-btn--small {
padding: 12px 14px;
}
.wf-email-cta {
width: min(100%, calc(100vw - 24px));
max-width: 100%;
margin-inline: auto;
flex-direction: row;
align-items: center;
gap: 6px;
padding: 6px;
}
.wf-email-cta__input,
.wf-email-cta__button {
min-height: 50px;
font-size: 15px;
line-height: 15px;
letter-spacing: -0.28px;
}
.wf-email-cta__input {
width: auto;
flex: 1 1 0;
min-width: 0;
padding: 0 14px;
}
.wf-email-cta__button {
width: auto;
flex: 0 0 auto;
min-width: 0;
justify-content: center;
padding: 0 14px;
white-space: nowrap;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.24px;
}
.wf-btn--small .wr-cta-join__label {
font-size: 15px;
line-height: 15px;
letter-spacing: -0.28px;
}
.wf-section {
padding: 56px 0;
}
.wf-section-tight {
padding-top: 26px;
padding-bottom: 26px;
}
.wf-awards-strip {
padding-top: 40px;
padding-bottom: 36px;
}
.wf-awards-row {
flex-direction: column;
align-items: center;
gap: 20px;
}
.wf-award-badge {
width: 100%;
max-width: 320px;
}
.wf-logo-strip {
padding-top: 16px;
padding-bottom: 24px;
}
.wf-logo-strip-copy {
font-size: 14px;
line-height: 14px;
letter-spacing: -0.2px;
}
.wf-logo-grid {
margin-top: 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.wf-logo-card {
min-height: 72px;
border-radius: var(--wr-r-12);
padding: 12px 10px;
}
.wf-logo-image {
width: min(100%, 140px);
max-height: 34px;
}
.wf-hero-grid,
.wf-split {
grid-template-columns: 1fr;
gap: 24px;
}
.wf-split-reverse > :first-child,
.wf-split-reverse > :last-child {
order: initial;
}
.wf-heading-hero,
.wf-heading-section {
max-width: 100%;
}
.wf-eyebrow {
margin-bottom: 12px;
font-size: 14px;
line-height: 14px;
}
.wf-hero-copy {
margin-top: 16px;
}
.wf-checklist {
margin: 18px 0 24px;
gap: 10px;
}
.wf-checklist li {
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
}
.wf-checklist li::before {
width: 14px;
height: 14px;
flex-basis: 14px;
border-radius: 5px;
margin-top: 4px;
}
.wf-placeholder {
border-radius: var(--wr-r-12);
}
.wf-placeholder::before {
width: 24px;
height: 24px;
border-radius: 8px;
}
.wf-placeholder::after {
bottom: 12px;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.28px;
}
.wf-stats-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.wf-stat-card {
border-radius: var(--wr-r-12);
padding: 16px 12px;
}
.wf-stat-value {
font-size: 30px;
line-height: 30px;
letter-spacing: -0.6px;
}
.wf-stat-label {
margin-top: 8px;
font-size: 14px;
line-height: 17px;
letter-spacing: -0.2px;
}
.wf-number-list {
margin-top: 18px;
gap: 12px;
}
.wf-number-list li {
padding: 12px;
border-radius: var(--wr-r-12);
}
.wf-number-title {
font-size: 20px;
line-height: 20px;
letter-spacing: -0.4px;
}
.wf-testimonial-card {
margin-top: 18px;
border-radius: var(--wr-r-12);
padding: 18px;
}
.wf-quote {
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
}
.wf-quote-author {
font-size: 14px;
line-height: 14px;
}
.wf-feature-grid {
margin-top: 22px;
grid-template-columns: 1fr;
gap: 10px;
}
.wf-cap-testimonials {
padding-top: 48px;
padding-bottom: 60px;
}
.wf-cap-testimonials-subtext {
margin-top: 14px;
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
}
.wf-cap-testimonials-grid {
margin-top: 22px;
grid-template-columns: 1fr;
gap: 10px;
}
.wf-cap-testimonial-card {
border-radius: var(--wr-r-12);
padding: 18px 16px;
gap: 12px;
}
.wf-cap-testimonial-star {
font-size: 18px;
}
.wf-cap-testimonial-quote {
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
}
.wf-cap-testimonial-person {
gap: 10px;
}
.wf-cap-testimonial-avatar {
width: 44px;
height: 44px;
flex-basis: 44px;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.18px;
}
.wf-cap-testimonial-meta {
gap: 4px;
}
.wf-cap-testimonial-role {
font-size: 13px;
line-height: 16px;
letter-spacing: -0.2px;
}
.wf-pricing-subtext {
margin-top: 14px;
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
}
.wf-pricing-toggle-wrap {
margin-top: 22px;
}
.wf-pricing-toggle {
width: 100%;
max-width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.wf-pricing-toggle-btn {
min-height: 48px;
width: 100%;
padding: 0 12px;
border: 1px solid rgba(151, 144, 147, 0.3);
border-radius: var(--wr-r-pill);
background: var(--wr-bg-panel-light);
font-size: 14px;
line-height: 14px;
letter-spacing: -0.2px;
}
.wf-pricing-toggle-btn.is-active {
box-shadow: none;
}
.wf-pricing-toggle-badge {
font-size: 9px;
line-height: 9px;
letter-spacing: 0.03em;
padding: 4px 7px;
}
.wf-pricing-grid {
margin-top: 22px;
grid-template-columns: 1fr;
gap: 10px;
}
.wf-pricing-card {
border-radius: var(--wr-r-12);
padding: 16px;
gap: 16px;
}
.wf-pricing-card-head {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.wf-pricing-plan-name {
font-size: 22px;
line-height: 22px;
letter-spacing: -0.44px;
}
.wf-pricing-plan-copy {
margin-top: 8px;
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
}
.wf-pricing-value-viewport {
height: 40px;
}
.wf-pricing-value {
height: 40px;
font-size: 34px;
line-height: 34px;
letter-spacing: -0.58px;
}
.wf-pricing-period {
margin-bottom: 4px;
font-size: 14px;
line-height: 14px;
}
.wf-pricing-billed {
font-size: 13px;
line-height: 15px;
}
.wf-pricing-contact {
font-size: 32px;
line-height: 32px;
letter-spacing: -0.58px;
}
.wf-pricing-contact-note {
font-size: 13px;
line-height: 16px;
}
.wf-pricing-card-bottom {
gap: 12px;
}
.wf-pricing-card-cta,
.wf-pricing-details-link {
width: 100%;
min-height: 48px;
padding: 0 14px;
font-size: 14px;
line-height: 14px;
letter-spacing: -0.2px;
}
.wf-pricing-list {
gap: 8px;
}
.wf-pricing-list li {
font-size: 15px;
line-height: 19px;
letter-spacing: -0.24px;
}
.wf-pricing-details {
margin-top: 20px;
}
.wf-tenant-section {
padding-top: 64px;
padding-bottom: 72px;
}
.wf-tenant-subtext {
margin-top: 14px;
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
}
.wf-tenant-form {
margin-top: 20px;
border-radius: var(--wr-r-12);
padding: 16px;
gap: 14px;
}
.wf-tenant-form-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.wf-tenant-field--full {
grid-column: auto;
}
.wf-tenant-label {
font-size: 14px;
line-height: 14px;
letter-spacing: -0.2px;
}
.wf-tenant-input {
min-height: 50px;
border-radius: var(--wr-r-12);
padding: 0 14px;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.32px;
}
.wf-tenant-help {
font-size: 13px;
line-height: 16px;
}
.wf-tenant-submit {
min-height: 52px;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.32px;
}
.wf-tenant-success {
border-radius: var(--wr-r-12);
padding: 10px 12px;
font-size: 14px;
line-height: 18px;
letter-spacing: -0.2px;
}
.wf-site-footer {
padding-bottom: 24px;
}
.wf-footer-shell {
border-radius: var(--wr-r-12);
padding: 16px;
}
.wf-footer-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.wf-footer-copy {
max-width: 100%;
font-size: 15px;
line-height: 19px;
letter-spacing: -0.2px;
}
.wf-footer-social-link {
width: 38px;
height: 38px;
}
.wf-footer-list {
margin-top: 12px;
gap: 8px;
}
.wf-footer-link,
.wf-footer-contact-item {
font-size: 15px;
line-height: 19px;
letter-spacing: -0.2px;
}
.wf-footer-cta {
width: 100%;
min-height: 50px;
justify-content: center;
padding: 0 16px;
}
.wf-footer-bottom {
margin-top: 20px;
padding-top: 14px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.wf-footer-meta,
.wf-footer-legal-link {
font-size: 13px;
line-height: 15px;
letter-spacing: -0.18px;
}
.wf-footer-legal {
justify-content: flex-start;
gap: 8px 14px;
}
.wf-feature-card {
border-radius: var(--wr-r-12);
padding: 16px;
}
.wf-feature-card h3 {
font-size: 20px;
line-height: 20px;
letter-spacing: -0.4px;
}
.wf-feature-card p {
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
}
.wf-table-wrap {
margin-top: 20px;
border-radius: 0;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
.wf-table-wrap:hover,
.wf-table-wrap:focus-within {
transform: none;
box-shadow: none;
}
.wf-compare-table {
display: block;
min-width: 0;
border-spacing: 0;
table-layout: auto;
}
.wf-compare-table thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.wf-compare-table tbody {
display: grid;
gap: 10px;
}
.wf-compare-table tbody tr {
display: block;
border-radius: var(--wr-r-12);
border: 1px solid rgba(151, 144, 147, 0.28);
background: var(--wr-white);
box-shadow: 0 8px 18px rgba(48, 33, 39, 0.08);
overflow: hidden;
}
.wf-compare-table tbody td {
display: grid;
grid-template-columns: minmax(110px, 44%) minmax(0, 1fr);
align-items: start;
gap: 10px;
width: 100%;
border-top: 1px solid rgba(151, 144, 147, 0.18);
padding: 12px 14px;
font-size: 15px;
line-height: 18px;
letter-spacing: -0.2px;
}
.wf-compare-table tbody td::before {
content: attr(data-label);
color: var(--wr-text-muted);
font-size: 11px;
line-height: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 700;
}
.wf-compare-table tbody td:first-child {
border-top: 0;
background: var(--wr-bg-panel-light);
font-weight: 700;
}
.wf-compare-table tbody td:nth-child(2) {
background: rgba(252, 184, 39, 0.14);
font-weight: 700;
}
.wf-compare-table th:first-child,
.wf-compare-table td:first-child,
.wf-compare-table th:not(:first-child),
.wf-compare-table td:not(:first-child) {
width: auto;
}
.wf-compare-table th {
padding: 12px;
font-size: 14px;
line-height: 14px;
}
.wf-process-grid {
margin-top: 22px;
grid-template-columns: 1fr;
gap: 10px;
}
.wf-step-badge {
width: 32px;
height: 32px;
font-size: 16px;
line-height: 16px;
}
.wf-faq-list {
margin-top: 20px;
gap: 10px;
}
.wf-faq-item {
border-radius: var(--wr-r-12);
padding: 14px 14px;
}
.wf-faq-item summary {
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
padding-right: 24px;
}
.wf-faq-item summary::after {
font-size: 20px;
line-height: 20px;
}
.wf-faq-item p {
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
}
.wf-final-cta {
padding-top: 72px;
padding-bottom: 72px;
}
.wf-dark-subtext {
margin: 14px auto 20px;
font-size: 16px;
line-height: 20.8px;
letter-spacing: -0.32px;
}
.wf-btn-dark {
width: 100%;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.32px;
padding: 18px 16px;
}
}
@media (max-width: 599.98px) {
.wf-email-cta {
flex-direction: column-reverse;
align-items: stretch;
gap: 8px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.wf-email-cta::after {
display: none;
}
.wf-email-cta:hover,
.wf-email-cta:focus-within {
transform: none;
border-color: transparent;
box-shadow: none;
}
.wf-email-cta__input,
.wf-email-cta__button {
width: 100%;
min-height: 52px;
font-size: 16px;
line-height: 16px;
letter-spacing: -0.32px;
}
.wf-email-cta__input {
padding: 0 18px;
text-align: center;
}
.wf-email-cta__button {
padding: 14px 20px;
white-space: nowrap;
font-size: 17px;
font-weight: 700;
}
}
/* Final dark-mode CTA contrast lock (must remain at end-of-file). */
html[data-theme="dark"] {
--wf-cta-sheen-mid-alpha: 0.12;
--wf-cta-sheen-opacity: 0.22;
--wf-cta-sheen-hover-opacity: 0.3;
}
html[data-theme="dark"] .wr-cta-join,
html[data-theme="dark"] .wf-email-cta__button,
html[data-theme="dark"] .wf-pricing-card-cta,
html[data-theme="dark"] .wf-tenant-submit,
html[data-theme="dark"] .wf-footer-cta,
html[data-theme="dark"] .wf-mobile-menu-cta {
color: var(--wf-cta-conv-text);
}
html[data-theme="dark"] .wr-cta-join .wr-cta-join__label,
html[data-theme="dark"] .wf-footer-cta span,
html[data-theme="dark"] .wf-footer-cta svg,
html[data-theme="dark"] .wf-mobile-menu-cta span {
color: inherit;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
--wf-cta-sheen-mid-alpha: 0.12;
--wf-cta-sheen-opacity: 0.22;
--wf-cta-sheen-hover-opacity: 0.3;
}
}