/* AnswerAI custom landing sections (demo call + hear it live) and chrome fixes.
These style non-Framer DOM injected by /landing/aa/landing.js, matching the
AgentLab template: Merriweather display serif, Cabin UI sans, monochrome with
#0057a8 accent (#30aece appears only inside gradients). */
/* ---- template chrome fixes (CSS-only hides) ---- */
section.framer-l06Ud, /* hero logo marquee */
section.framer-S7npf, /* template testimonials (replaced by #hear-it-live) */
.framer-jncjg1-container, /* "Company" nav dropdown — its pages don't exist here */
.framer-ik2ku8, /* accordion chevron on the phone-menu item repurposed as Contact */
.framer-1vfwl9t /* third-party logo ticker inside the split-card art (template mock) */ {
display: none !important;
}
/* Brand logo: painted via CSS background so it's correct at first paint and
immune to hydration re-renders. The template grid mark + wordmark stay in
the DOM (hidden); the anchor box is sized explicitly for the 961x343 PNG,
and its wrapper is unclipped so the larger box isn't cut off (the phone
header/hamburger wrapper has a fixed height). */
a.framer-1g50z6c {
width: 184px !important;
height: 66px !important;
background: url("/logo.png") no-repeat left center / contain;
/* Optical centering: the PNG's squares motif fills the top ~60% of the
canvas, so the wordmark's centerline renders below the 66px box's
geometric center. Lift the box so the LETTERS sit near the line the
eye draws through the nav links and buttons, which center
geometrically (replaces the old margin-top nudges that pushed those
down). −13px is the eyeballed sweet spot between letter alignment
and the mark crowding the bar's top edge; the desktop bar's
padding-top is raised below to help the clearance. */
transform: translateY(-13px);
}
/* Desktop bar. The nav itself is full-bleed (SSR inline width:100%) and
centers its children; padding-top gives the lifted mark headroom (bar is
min-content + 20px padding, so clearance above the squares = padTop −
19px). Never override the nav's width — that detaches the bar from the
inline 100% and pins it to the viewport's left edge. */
nav.framer-yVODL.framer-v-1yqy8ov {
padding-top: 30px !important;
}
/* Header content span. The template caps the bar's inner wrappers at
1280px, which left the logo/buttons inset relative to the sections below
— raise the cap to the hero canvas band (1358px) so the logo's left edge
and the buttons' right edge sit flush with the canvas edges. */
nav.framer-yVODL.framer-v-1yqy8ov .framer-7yziar,
nav.framer-yVODL.framer-v-1yqy8ov .framer-1xtx816 {
max-width: 1358px !important;
}
@media screen and (max-width: 1199px) {
a.framer-1g50z6c
{
/* Mobile headers (logo + hamburger at opposite ends) were already
balanced — freeze the original box and cancel the desktop lift. */
width: 132px !important;
height: 56px !important;
transform: translateY(0px);
}
.framer-yVODL .framer-1ws1u1t
{
transform: translateY(8px);
}
}
/* Desktop header nav: larger link labels with more breathing room between
them (template ships 16px labels at a 30px gap). */
div.framer-9os9sp {
gap: 40px !important;
}
.framer-9os9sp a.framer-6b3ny5 p,
.framer-9os9sp a.framer-6b3ny5 span {
font-size: 18px !important;
}
a.framer-oq2Zm.framer-14ckjdc.framer-v-trnyp0.framer-7hd92a
{
padding: 4px 30px !important;
}
/* Header layout: flatten the template's logo wrapper everywhere so its
children join the Content row directly — logo left, Buttons right via the
row's space-between. The nav-link list is lifted out of the flow and
centered on the bar itself (Content is the positioned ancestor: mi05wd,
as display:contents, generates no box), so the links sit at the true
middle regardless of how wide the logo or the button group is. */
div.framer-mi05wd
{
display: contents !important;
}
nav.framer-yVODL.framer-v-1yqy8ov .framer-9os9sp {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* The lifted logo overflows its 56px slot upward, and every box on the
desktop bar's ancestor chain ships overflow:clip — which cropped the top
squares of the art. Unclip the chain so the mark rides into the bar's
top padding (it stays within the white bar). */
nav.framer-yVODL.framer-v-1yqy8ov,
nav.framer-yVODL.framer-v-1yqy8ov .framer-7yziar,
nav.framer-yVODL.framer-v-1yqy8ov .framer-1xtx816,
nav.framer-yVODL.framer-v-1yqy8ov .framer-1nc4ma9,
nav.framer-yVODL.framer-v-1yqy8ov .framer-mi05wd,
nav.framer-yVODL.framer-v-1yqy8ov .framer-1gazwqj-container {
overflow: visible !important;
}
/* Decorative dashed section frames (Grid Border marching-ants) and the small
squares where they cross — removed site-wide. */
.framer-gwnodu-container,
[data-framer-name="Box Bar"] {
display: none !important;
}
/* Industry-card icons (Lucide, stroke style) rendered white via the same
masked-div mechanism the template used for its 48x48 icons. */
.aa-glyph {
aspect-ratio: 1;
width: 48px;
background-color: var(--1fm3kdy, #fff);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 100% 100%;
}
.aa-glyph-tool {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.aa-glyph-medical {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.aa-glyph-food {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.aa-glyph-beauty {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.aa-glyph-dollar {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.aa-glyph-briefcase {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.aa-glyph-plane {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.aa-glyph-store {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* Industry section cards, the ROI ("Impact You Can Measure") cards, the home
Capabilities / Problem / Compliance cards and the contact-page form card:
no borders. */
.framer-1be40bc [data-border="true"],
section.framer-bftmub .framer-UKKyf[data-border="true"],
section.framer-18tudx9 .framer-zAmW2[data-border="true"],
section[data-framer-name="Rio Section"] [data-border="true"],
section.framer-1esorcu [data-framer-name="Capabilities Card"],
section.framer-1esorcu div.framer-1ho2r2e,
section.framer-1esorcu div.framer-15rip02,
form.framer-f0hsdk[data-border="true"] {
--border-top-width: 0px !important;
--border-right-width: 0px !important;
--border-bottom-width: 0px !important;
--border-left-width: 0px !important;
}
.framer-1be40bc [data-border="true"]::after,
section.framer-bftmub .framer-UKKyf[data-border="true"]::after,
section.framer-18tudx9 .framer-zAmW2[data-border="true"]::after,
section[data-framer-name="Rio Section"] [data-border="true"]::after,
section.framer-1esorcu [data-framer-name="Capabilities Card"]::after,
section.framer-1esorcu div.framer-1ho2r2e::after,
section.framer-1esorcu div.framer-15rip02::after,
form.framer-f0hsdk[data-border="true"]::after {
border: none !important;
}
/* ROI ("Impact You Can Measure") section: collapse the template's tall
spread-out layout (178px column gap, space-between right column) and trim
the 140px section padding. */
section[data-framer-name="Rio Section"] {
padding-top: 100px !important;
padding-bottom: 100px !important;
}
section[data-framer-name="Rio Section"] .framer-1l278ud {
gap: 48px !important;
}
section[data-framer-name="Rio Section"] .framer-16fdxao {
justify-content: center !important;
gap: 40px !important;
}
/* Pricing custom-plan band: brand-gradient panel instead of plain text. */
.aa-custom-plan {
background: linear-gradient(135deg, rgb(0, 45, 90) 0%, rgb(0, 105, 180) 60%, rgb(48, 174, 206) 100%);
border-radius: 20px;
padding: 56px 48px !important;
gap: 24px !important;
}
.aa-custom-plan p {
color: #fff !important;
opacity: 1 !important;
font-family: "Merriweather", "Merriweather Placeholder", serif !important;
font-weight: 300;
font-size: 26px !important;
line-height: 1.45 !important;
max-width: 760px !important;
}
.aa-custom-plan a {
background-color: #fff !important;
color: #003a70 !important;
font-size: 15px !important;
padding: 18px 40px !important;
border-radius: 8px !important;
transition: background-color 0.15s ease;
}
.aa-custom-plan a:hover {
background-color: #cde9f6 !important;
}
/* Tighter gap between the custom-plan band and the comparison table below. */
section.framer-1qk890w {
padding-bottom: 40px !important;
}
section.framer-1p2ureu {
padding-top: 60px !important;
}
/* Compliance cards: with the card borders gone, the template's 108px
icon-to-text gap reads as dead space — tighten it, and trim the section's
140px vertical padding to match its slimmer content. */
section.framer-18tudx9 .framer-zAmW2 {
gap: 24px !important;
}
section.framer-18tudx9 {
padding-top: 100px !important;
padding-bottom: 100px !important;
}
/* Footer variant of the same logo component sits on black — use the white mark. */
a.framer-1g50z6c.framer-v-rq5z2b {
background-image: url("/logo-white.svg");
}
a.framer-1g50z6c > * {
visibility: hidden !important;
}
div[class*="-container"]:has(> a.framer-1g50z6c) {
height: auto !important;
overflow: visible !important;
}
/* ---- sub-1200 header bar breathing room (aa) ----
The closed tablet/phone nav (variant framer-v-jw9bb8, rendered <1200px) is
hard-clipped at max-height:72px with padding 20px 20px 0, so the 56px logo
(20px top padding + 56px = 76px) sits flush against / slightly clipped by
the bar's bottom edge, and the hero starts immediately below. Grow the
closed bar to 96px (20px top + 56px logo + 20px bottom, mirroring the top
padding) and move the bar's absolute "Border Wrap" bottom-line layer
(framer-1dhj8e7, pinned at 72px in this variant) down to the new edge.
Scoped to the closed variant only: the open menu (framer-v-p55fyj) and the
desktop nav (framer-v-1yqy8ov, >=1200px) keep their template metrics. On
tablet the header container is position:sticky (in flow) so the hero shifts
down; on phone (<=767.98px) it is position:fixed, and the taller white bar
simply covers 24px more of the hero's 145px top padding - no content is
obscured. */
@media (max-width: 1199.98px) {
nav.framer-yVODL.framer-v-jw9bb8.framer-1yqy8ov {
max-height: 96px !important;
padding-bottom: 20px !important;
}
.framer-yVODL.framer-v-jw9bb8 .framer-1dhj8e7 {
height: 96px !important;
}
}
/* Sign-up header button (rendered natively by the edited Framer chunk/SSR).
Only the anchor surface is recoloured — descendants keep their own
backgrounds because Framer draws the arrow icon as a mask filled by
background-color, which a blanket override would erase. */
.aa-signup a {
background-color: #0057a8 !important;
border-color: #0057a8 !important;
}
.aa-signup a:hover {
background-color: #003a70 !important;
border-color: #003a70 !important;
}
/* Home hero: the injected Talk to AI button and the template's "get started"
CTA sit side by side, stacking on narrow phones. */
.aa-hero-ctas {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
position: relative;
}
/* Slight rounding on all button-shaped elements. framer-oq2Zm is the shared
scope class of every rolling-text button (log in, sign up, page CTAs,
form submits); Icon is the hamburger square. */
a.framer-oq2Zm,
div[data-framer-name="Icon"],
.aa-btn,
.aa-play {
border-radius: 6px !important;
overflow: hidden;
}
/* Black buttons → teal. Every black button's inline style references the
black token for its background, so matching that substring recolors all of
them (SSR writes it without a space, hydration with one) while leaving
white/outline buttons and the #0057a8 sign-up (excluded via .aa-signup)
untouched. */
:not(.aa-signup) > a.framer-oq2Zm[style*="background-color:var(--token-74d9d790"],
:not(.aa-signup) > a.framer-oq2Zm[style*="background-color: var(--token-74d9d790"],
form button[style*="background-color:var(--token-74d9d790"],
form button[style*="background-color: var(--token-74d9d790"],
div[data-framer-name="Icon"],
.aa-btn {
background-color: #30aece !important;
border-color: #30aece !important;
}
:not(.aa-signup) > a.framer-oq2Zm[style*="background-color:var(--token-74d9d790"]:hover,
:not(.aa-signup) > a.framer-oq2Zm[style*="background-color: var(--token-74d9d790"]:hover,
form button[style*="background-color:var(--token-74d9d790"]:hover,
form button[style*="background-color: var(--token-74d9d790"]:hover,
.aa-btn:hover {
background-color: #2596b8 !important;
border-color: #2596b8 !important;
}
/* Exception: the Talk to AI buttons (hero, header row, phone-menu Buttons;
containers carry .aa-live-demo) stay black. Both classes of the shared
button component are needed so specificity ties the teal recolor above
(same !important level) and these later rules win. */
.aa-live-demo > a.framer-oq2Zm.framer-14ckjdc {
background-color: #000 !important;
border-color: #000 !important;
}
.aa-live-demo > a.framer-oq2Zm.framer-14ckjdc:hover {
background-color: #2a2a2a !important;
border-color: #2a2a2a !important;
}
/* ---- pricing page: plan cards + comparison table ---- */
/* Growth plan card stands out: brand-gradient wash, #0057a8 ring and a
floating shadow, plus a MOST POPULAR pill. */
div.framer-oox73e[data-framer-name="Pricing Card"] {
background:
linear-gradient(180deg, rgba(0, 87, 168, 0.10) 0%, rgba(255, 255, 255, 0) 45%, rgba(48, 174, 206, 0.14) 100%),
#fff !important;
border-radius: 16px;
/* Ring drawn inset: the card's component wrapper is overflow:clip and sits
flush, so an outer box-shadow ring gets cut off. */
box-shadow: inset 0 0 0 2px #0057a8;
position: relative;
z-index: 1;
}
div.framer-oox73e[data-framer-name="Pricing Card"]::after {
/* The pill's text comes from the page language (pricing.blade.php sets it). */
content: attr(data-aa-popular);
position: absolute;
top: 18px;
right: 18px;
background: linear-gradient(90deg, #0057a8, #30aece);
color: #fff;
font-family: "Cabin", "Cabin Placeholder", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 4px 12px;
border-radius: 999px;
pointer-events: none;
}
/* Right-to-left pages put the card title on the right, so the pill moves left. */
[dir="rtl"] div.framer-oox73e[data-framer-name="Pricing Card"]::after {
right: auto;
left: 18px;
}
/* The template's own inline "popular" tag (gradient bars + label) crowds the
card title — the MOST POPULAR pill above replaces it. */
div.framer-oox73e [data-framer-name="Tag"] {
display: none !important;
}
/* Comparison table: category labels (Included usage / Capacity / Features)
in brand teal. */
.framer-kveftb .framer-text.framer-styles-preset-vzrxxv {
color: #30aece !important;
}
/* Comparison table: category rows (Included usage / Capacity / Features)
styled as teal cards. */
.framer-kveftb [data-framer-name="Table Row Heading"]:has(.framer-text.framer-styles-preset-vzrxxv) {
background-color: rgba(48, 174, 206, 0.08) !important;
border: 1px solid #30aece;
border-radius: 10px;
margin-bottom: 20px;
}
/* Comparison table: much larger plan names in the header row. */
.framer-1tufuxg [data-framer-name="List 02"] .framer-text,
.framer-1tufuxg [data-framer-name="List 03"] .framer-text,
.framer-1tufuxg [data-framer-name="List 04"] .framer-text {
font-size: 30px !important;
line-height: 1.2 !important;
}
/* Table ticks and crosses become rounded chips: green tick on faded green,
red cross on faded red (replacing the template's black mask icons). */
.framer-kveftb .framer-c7qBQ,
.framer-kveftb .framer-tSoe1 {
-webkit-mask: none !important;
mask: none !important;
width: 24px !important;
height: 24px !important;
border-radius: 7px;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 12px 12px !important;
opacity: 1 !important;
}
.framer-kveftb .framer-c7qBQ {
background-color: rgba(22, 163, 74, 0.12) !important;
border: 1px solid rgba(22, 163, 74, 0.4);
background-image: url("data:image/svg+xml,") !important;
}
.framer-kveftb .framer-tSoe1 {
background-color: rgba(220, 38, 38, 0.1) !important;
border: 1px solid rgba(220, 38, 38, 0.35);
background-image: url("data:image/svg+xml,") !important;
}
/* Form status sits at the top of both public forms now. */
.aa-form .aa-status,
form .aa-status[data-aa-contact] {
margin: 0 auto 16px;
}
/* ---- shared section shell ---- */
.aa-section {
position: relative;
font-family: "Cabin", "Cabin Placeholder", sans-serif;
-webkit-font-smoothing: antialiased;
}
.aa-section *,
.aa-section *::before,
.aa-section *::after {
box-sizing: border-box;
}
.aa-inner {
max-width: 1440px;
margin: 0 auto;
padding: 110px 48px 120px;
}
.aa-badge {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
margin: 0 0 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
color: #111;
}
.aa-badge::before {
content: "";
width: 14px;
height: 8px;
background: linear-gradient(90deg, #0057a8, #30aece);
display: inline-block;
}
.aa-h2 {
margin: 0 0 20px;
font-family: "Merriweather", "Merriweather Placeholder", serif;
font-weight: 300;
font-size: clamp(32px, 4.4vw, 52px);
line-height: 1.15;
letter-spacing: 0;
color: #000;
text-align: center;
}
.aa-sub {
margin: 0 auto 44px;
max-width: 560px;
text-align: center;
font-size: 16px;
line-height: 1.6;
color: #4d4d4d;
}
/* ---- demo call section ---- */
.aa-demo {
background-color: #fff;
}
.aa-demo .aa-inner {
max-width: 720px;
padding: 70px 48px 80px;
}
.aa-form {
margin: 0 auto;
}
.aa-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.aa-field {
width: 100%;
height: 52px;
padding: 0 16px;
border: 1px solid #d0d0d0;
border-radius: 0;
background: #fff;
font-family: inherit;
font-size: 15px;
color: #111;
outline: none;
transition: border-color 0.15s ease;
appearance: none;
}
select.aa-field {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23111' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
select.aa-field:invalid {
color: #7a7a7a;
}
/* "Other" free-text industry field: revealed by landing.js when the Other
option is picked; spans both grid columns. */
.aa-industry-other {
grid-column: 1 / -1;
}
/* Mobile number cell: the country (dial code) selector sits beside the number. */
.aa-phone {
display: flex;
gap: 8px;
min-width: 0;
}
.aa-phone .aa-phone-country {
width: auto;
flex: 0 0 auto;
padding-right: 36px;
}
.aa-phone input.aa-field {
flex: 1 1 auto;
min-width: 0;
}
.aa-field::placeholder {
color: #7a7a7a;
}
.aa-field:focus {
border-color: #0057a8;
}
.aa-field[aria-invalid="true"] {
border-color: #b3261e;
}
.aa-btn {
display: block;
width: 100%;
height: 54px;
border: 1px solid #000;
background: #000;
color: #fff;
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.aa-btn:hover {
background: #0057a8;
border-color: #0057a8;
}
.aa-btn[disabled] {
opacity: 0.55;
cursor: default;
}
.aa-note {
margin: 16px auto 0;
max-width: 540px;
text-align: center;
font-size: 12.5px;
line-height: 1.55;
color: #7a7a7a;
}
.aa-note a {
color: #0057a8;
text-decoration: none;
}
.aa-note a:hover {
text-decoration: underline;
}
/* The switch between the demo's channels (browser demo <-> a call to the
visitor's own mobile): a link-styled button under each form, hidden with
the form while a browser demo is live. */
.aa-demo-switch {
margin: 18px auto 0;
max-width: 540px;
text-align: center;
font-size: 14px;
line-height: 1.5;
color: #4d4d4d;
}
.aa-demo-switch-link {
padding: 0;
border: 0;
background: none;
font: inherit;
font-weight: 600;
color: #0057a8;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.aa-demo-switch-link:hover {
color: #003f7a;
}
.aa-status {
display: none;
margin: 18px auto 0;
max-width: 560px;
padding: 14px 18px;
text-align: center;
font-size: 14.5px;
line-height: 1.5;
}
.aa-status[data-kind="ok"] {
display: block;
border: 1px solid #0057a8;
background: rgba(0, 87, 168, 0.06);
color: #003a70;
}
.aa-status[data-kind="error"] {
display: block;
border: 1px solid #b3261e;
background: rgba(179, 38, 30, 0.05);
color: #8c1d17;
}
/* ---- intro video ---- */
.aa-video {
/* Framer's own sections carry explicit width rules; without one an
injected section shrink-wraps to its text column inside the centered
page stack, collapsing the player. */
width: 100%;
background: #fff;
}
.aa-video .aa-inner {
max-width: 1360px;
padding: 96px 48px 110px;
}
.aa-video-frame {
position: relative;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: #000;
}
.aa-video-frame iframe,
.aa-video-frame video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.aa-video-frame video {
object-fit: contain;
background: #000;
}
/* ---- hear it live (dark) ---- */
.aa-listen {
background: #000;
}
.aa-listen .aa-inner {
max-width: 980px;
}
.aa-listen .aa-badge,
.aa-listen .aa-h2 {
color: #fff;
}
.aa-listen .aa-sub {
color: rgba(255, 255, 255, 0.55);
}
.aa-players {
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.aa-player {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 24px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.aa-player:first-child {
border-top: none;
}
.aa-play {
flex: 0 0 auto;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.35);
background: transparent;
color: #fff;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.aa-play:hover {
background: #0057a8;
border-color: #0057a8;
}
.aa-play svg {
width: 14px;
height: 14px;
display: block;
}
.aa-play .aa-ic-pause {
display: none;
}
.aa-player[data-playing="true"] .aa-ic-play {
display: none;
}
.aa-player[data-playing="true"] .aa-ic-pause {
display: block;
}
.aa-player-main {
flex: 1 1 auto;
min-width: 0;
}
.aa-player-title {
margin: 0 0 4px;
font-family: "Merriweather", "Merriweather Placeholder", serif;
font-weight: 300;
font-size: 19px;
color: #fff;
}
.aa-player-line {
margin: 0 0 12px;
font-size: 13.5px;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aa-track {
position: relative;
height: 3px;
background: rgba(255, 255, 255, 0.15);
cursor: pointer;
}
.aa-track-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: linear-gradient(90deg, #0057a8, #30aece);
}
.aa-time {
flex: 0 0 auto;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.5);
min-width: 42px;
text-align: right;
}
/* ---- responsive ---- */
@media (max-width: 809px) {
.aa-inner {
padding: 70px 24px 80px;
}
.aa-video .aa-inner {
padding: 60px 16px 70px;
}
.aa-video-frame {
border-radius: 12px;
}
.aa-grid {
grid-template-columns: 1fr;
}
.aa-player {
gap: 14px;
padding: 16px;
}
.aa-player-title {
font-size: 16px;
}
.aa-player-line {
white-space: normal;
}
}
/* ---- browser voice demo (web channel) ---- */
/* A dark "call card": agent header with a live-status pill and timer, an
audio-reactive orb over a spectrum bar, chat-bubble captions, and round
call controls. landing.js drives --aa-level (0..1, loudness of whoever is
talking) on .aa-call and --aa-bar on each .aa-call-wave bar every frame;
data-state on .aa-call is connecting | listening | speaking | ended | error. */
/* The form and the live panel swap via the hidden attribute; .aa-btn is
display:block, so the attribute needs a hand. */
.aa-demo [hidden] {
display: none !important;
}
.aa-call {
--aa-level: 0;
--aa-c1: #5ee1ff;
--aa-c2: #30aece;
--aa-c3: #0057a8;
max-width: 600px;
margin: 0 auto;
animation: aa-card-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aa-call-card {
position: relative;
overflow: hidden;
padding: 22px 26px 28px;
border-radius: 26px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(110% 70% at 50% -10%, rgba(0, 87, 168, 0.45), transparent 60%),
linear-gradient(180deg, #0f172a 0%, #070b14 100%);
color: #fff;
box-shadow:
0 40px 90px -30px rgba(2, 8, 23, 0.7),
0 0 0 1px rgba(255, 255, 255, 0.03) inset;
text-align: center;
}
/* Spotlight behind the orb that swells with the audio level. */
.aa-call-card::before {
content: "";
position: absolute;
left: 50%;
top: 190px;
width: 460px;
height: 460px;
border-radius: 50%;
background: radial-gradient(circle, rgba(48, 174, 206, 0.28), rgba(0, 87, 168, 0.14) 40%, transparent 68%);
transform: translate(-50%, -50%) scale(calc(0.85 + var(--aa-level) * 0.5));
opacity: calc(0.6 + var(--aa-level) * 0.4);
transition: transform 0.12s linear, opacity 0.12s linear;
pointer-events: none;
}
.aa-call-card > * {
position: relative;
}
/* header */
.aa-call-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
text-align: left;
}
.aa-call-agent {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.aa-call-avatar {
position: relative;
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 13px;
background: linear-gradient(135deg, var(--aa-c2), var(--aa-c3));
box-shadow: 0 8px 20px -6px rgba(48, 174, 206, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.aa-call-avatar::after {
content: "";
position: absolute;
inset: 9px;
background: #fff;
-webkit-mask: url("/icon.svg") center / contain no-repeat;
mask: url("/icon.svg") center / contain no-repeat;
}
.aa-call-agent-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.2;
min-width: 0;
}
.aa-call-agent-text strong {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
}
.aa-call-agent-text small {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
.aa-call-meta {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}
.aa-call-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.06);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
}
.aa-call-pill i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #f5b942;
box-shadow: 0 0 0 0 rgba(245, 185, 66, 0.7);
animation: aa-dot 1.6s ease-out infinite;
}
.aa-call[data-state="listening"] .aa-call-pill i {
background: #3ddc84;
box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7);
}
.aa-call[data-state="speaking"] .aa-call-pill i {
background: var(--aa-c1);
box-shadow: 0 0 0 0 rgba(94, 225, 255, 0.7);
}
.aa-call[data-state="ended"] .aa-call-pill i,
.aa-call[data-state="error"] .aa-call-pill i {
background: rgba(255, 255, 255, 0.35);
box-shadow: none;
animation: none;
}
.aa-call[data-state="error"] .aa-call-pill i {
background: #e5484d;
}
.aa-call-timer {
min-width: 38px;
font-size: 13.5px;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.55);
text-align: right;
}
/* stage: orb + spectrum */
.aa-call-stage {
padding: 30px 0 6px;
}
.aa-call-orb {
position: relative;
width: 156px;
height: 156px;
margin: 0 auto;
}
.aa-orb-glow {
position: absolute;
inset: -28%;
border-radius: 50%;
background: radial-gradient(circle, rgba(94, 225, 255, 0.55), rgba(0, 87, 168, 0.3) 42%, transparent 70%);
filter: blur(16px);
opacity: calc(0.5 + var(--aa-level) * 0.6);
transform: scale(calc(0.92 + var(--aa-level) * 0.4));
transition: opacity 0.1s linear, transform 0.1s linear;
}
.aa-orb-core {
position: absolute;
inset: 0;
border-radius: 50%;
overflow: hidden;
background: #0b2a5a;
box-shadow:
inset 0 -22px 44px rgba(0, 0, 0, 0.5),
inset 0 12px 32px rgba(255, 255, 255, 0.14),
0 24px 60px -14px rgba(0, 87, 168, 0.75);
transform: scale(calc(1 + var(--aa-level) * 0.16));
transition: transform 0.08s linear, filter 0.4s ease, opacity 0.4s ease;
/* Safari: keep the blurred blobs clipped to the circle. */
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
/* specular highlight */
.aa-orb-core::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background:
radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.55), transparent 38%),
radial-gradient(circle at 70% 85%, rgba(0, 0, 0, 0.35), transparent 50%);
pointer-events: none;
}
.aa-orb-blob {
position: absolute;
width: 120%;
height: 120%;
border-radius: 50%;
filter: blur(14px);
mix-blend-mode: screen;
opacity: 0.95;
will-change: transform;
}
.aa-orb-blob:nth-child(1) {
top: -34%;
left: -24%;
background: radial-gradient(circle at 40% 40%, var(--aa-c1), transparent 60%);
animation: aa-blob-a 7s ease-in-out infinite;
}
.aa-orb-blob:nth-child(2) {
bottom: -44%;
right: -34%;
background: radial-gradient(circle at 60% 60%, var(--aa-c3), transparent 62%);
animation: aa-blob-b 9s ease-in-out infinite;
}
.aa-orb-blob:nth-child(3) {
top: 8%;
right: -46%;
width: 92%;
height: 92%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.85), transparent 58%);
animation: aa-blob-c 5.5s ease-in-out infinite;
}
/* speaking: the swirl speeds up and the rings radiate */
.aa-call[data-state="speaking"] .aa-orb-blob {
animation-duration: 2.6s;
}
.aa-call[data-state="speaking"] .aa-orb-blob:nth-child(2) {
animation-duration: 3.4s;
}
.aa-call[data-state="speaking"] .aa-orb-blob:nth-child(3) {
animation-duration: 2s;
}
.aa-orb-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid rgba(94, 225, 255, 0.55);
opacity: 0;
pointer-events: none;
}
.aa-call[data-state="speaking"] .aa-orb-ring {
animation: aa-ring 1.8s ease-out infinite;
}
.aa-call[data-state="speaking"] .aa-orb-ring:nth-child(2) {
animation-delay: 0.9s;
}
/* connecting: a slow, dimmer swirl */
.aa-call[data-state="connecting"] .aa-orb-core {
animation: aa-orb-pulse 1.6s ease-in-out infinite;
}
.aa-call[data-state="connecting"] .aa-orb-blob {
opacity: 0.7;
}
/* ended / error: the orb goes quiet */
.aa-call[data-state="ended"] .aa-orb-core,
.aa-call[data-state="error"] .aa-orb-core {
filter: saturate(0.15) brightness(0.75);
opacity: 0.8;
}
.aa-call[data-state="ended"] .aa-orb-blob,
.aa-call[data-state="error"] .aa-orb-blob {
animation-play-state: paused;
}
.aa-call[data-state="ended"] .aa-orb-glow,
.aa-call[data-state="error"] .aa-orb-glow,
.aa-call[data-state="ended"] .aa-call-card::before,
.aa-call[data-state="error"] .aa-call-card::before {
opacity: 0.15;
}
/* spectrum bars */
.aa-call-wave {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 44px;
margin: 26px auto 0;
}
.aa-call-wave i {
display: block;
width: 3px;
height: 100%;
border-radius: 3px;
background: linear-gradient(180deg, var(--aa-c1), var(--aa-c3));
transform: scaleY(var(--aa-bar, 0.08));
transform-origin: center;
transition: transform 0.07s linear, background 0.3s ease, opacity 0.3s ease;
opacity: 0.9;
}
.aa-call[data-state="listening"] .aa-call-wave i {
background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.5));
}
.aa-call[data-state="connecting"] .aa-call-wave i {
animation: aa-bar-idle 1.4s ease-in-out infinite;
animation-delay: calc(var(--i, 0) * -0.07s);
}
.aa-call[data-state="ended"] .aa-call-wave i,
.aa-call[data-state="error"] .aa-call-wave i {
opacity: 0.25;
}
/* captions */
.aa-call-captions {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 104px;
max-height: 230px;
overflow-y: auto;
margin: 22px 0 24px;
padding: 12px 4px 6px;
text-align: left;
font-size: 14.5px;
line-height: 1.5;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 4px), transparent);
mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 4px), transparent);
}
.aa-call-captions:empty {
align-items: center;
justify-content: center;
}
.aa-call-captions:empty::before {
content: "Say hello. Your conversation appears here as you talk.";
font-size: 13.5px;
color: rgba(255, 255, 255, 0.4);
}
.aa-call-captions p {
margin: 0;
max-width: 86%;
padding: 10px 14px 11px;
border-radius: 18px 18px 18px 6px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.92);
align-self: flex-start;
animation: aa-bubble 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aa-call-captions p::before {
content: attr(data-label);
display: block;
margin-bottom: 3px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--aa-c1);
}
.aa-call-captions p[data-role="user"] {
align-self: flex-end;
border-radius: 18px 18px 6px 18px;
border-color: transparent;
background: linear-gradient(135deg, rgba(48, 174, 206, 0.9), rgba(0, 87, 168, 0.9));
color: #fff;
}
.aa-call-captions p[data-role="user"]::before {
color: rgba(255, 255, 255, 0.7);
}
/* controls */
.aa-call-controls {
display: flex;
justify-content: center;
gap: 36px;
}
.aa-call-ctl {
appearance: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
}
.aa-call-ctl-icon {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.08);
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.aa-call-ctl-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.aa-call-ctl:hover .aa-call-ctl-icon {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
.aa-call-ctl:focus-visible .aa-call-ctl-icon {
box-shadow: 0 0 0 3px rgba(94, 225, 255, 0.5);
}
.aa-call-ctl:focus-visible {
outline: none;
}
.aa-ico-mic-off {
display: none;
}
.aa-call-mute[aria-pressed="true"] .aa-call-ctl-icon {
background: #fff;
border-color: #fff;
}
.aa-call-mute[aria-pressed="true"] .aa-call-ctl-icon svg {
stroke: #0b1220;
}
.aa-call-mute[aria-pressed="true"] .aa-ico-mic {
display: none;
}
.aa-call-mute[aria-pressed="true"] .aa-ico-mic-off {
display: block;
}
.aa-call-end .aa-call-ctl-icon {
border-color: #e5484d;
background: #e5484d;
box-shadow: 0 12px 26px -8px rgba(229, 72, 77, 0.8);
}
.aa-call-end:hover .aa-call-ctl-icon {
background: #f05c61;
}
/* after the call */
.aa-call-after {
padding-top: 2px;
}
.aa-call-notice,
.aa-call-after-text {
margin: 0 auto 18px;
max-width: 430px;
font-size: 14.5px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.65);
}
.aa-call-notice {
padding: 12px 16px;
border-radius: 14px;
border: 1px solid rgba(229, 72, 77, 0.35);
background: rgba(229, 72, 77, 0.12);
color: #ffd4d6;
}
.aa-call-after-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.aa-call-action {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
height: 46px;
padding: 0 22px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: #fff;
font: inherit;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.aa-call-action:hover {
background: rgba(255, 255, 255, 0.13);
transform: translateY(-1px);
}
.aa-call-action-primary {
border-color: #fff;
background: #fff;
color: #0b1220;
}
.aa-call-action-primary:hover {
background: #e6f7fb;
}
@keyframes aa-card-in {
from { opacity: 0; transform: translateY(14px) scale(0.985); }
to { opacity: 1; transform: none; }
}
@keyframes aa-dot {
0% { box-shadow: 0 0 0 0 currentColor; }
70% { box-shadow: 0 0 0 7px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes aa-orb-pulse {
0%, 100% { transform: scale(0.96); }
50% { transform: scale(1.02); }
}
@keyframes aa-blob-a {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(28%, 18%) rotate(40deg); }
66% { transform: translate(10%, 34%) rotate(-25deg); }
}
@keyframes aa-blob-b {
0%, 100% { transform: translate(0, 0) scale(1); }
40% { transform: translate(-30%, -22%) scale(1.15); }
70% { transform: translate(-8%, -36%) scale(0.9); }
}
@keyframes aa-blob-c {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-46%, 26%) scale(1.25); }
}
@keyframes aa-ring {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.9); opacity: 0; }
}
@keyframes aa-bar-idle {
0%, 100% { transform: scaleY(0.1); }
50% { transform: scaleY(0.42); }
}
@keyframes aa-bubble {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.aa-call,
.aa-orb-blob,
.aa-orb-ring,
.aa-orb-core,
.aa-call-pill i,
.aa-call-wave i,
.aa-call-captions p {
animation: none !important;
}
.aa-call-card::before,
.aa-orb-glow,
.aa-orb-core,
.aa-call-wave i {
transition: none !important;
}
}
.aa-link {
appearance: none;
border: 0;
padding: 0;
background: none;
font: inherit;
color: #0057a8;
cursor: pointer;
}
.aa-link:hover {
text-decoration: underline;
}
@media (max-width: 809px) {
.aa-call-card {
padding: 18px 16px 24px;
border-radius: 20px;
}
.aa-call-head {
flex-wrap: wrap;
}
.aa-call-agent-text small {
display: none;
}
.aa-call-orb {
width: 128px;
height: 128px;
}
.aa-call-card::before {
top: 160px;
}
.aa-call-wave {
gap: 3px;
}
.aa-call-captions p {
max-width: 92%;
}
.aa-call-controls {
gap: 28px;
}
}
/* ---------------- language selector (landing.partials.language-switcher) ----------------
A pill in each nav's buttons box: the current language, opening a list of
every language the site is published in (config/landing.php locales). */
.aa-lang {
position: relative;
margin: 0;
flex: none;
font-family: "Cabin", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.aa-lang summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
height: 40px;
padding: 0 13px 0 11px;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 999px;
background: #fff;
color: #0a0a0a;
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.aa-lang summary::-webkit-details-marker { display: none; }
.aa-lang summary:hover, .aa-lang[open] summary { border-color: #0057a8; box-shadow: 0 0 0 3px rgba(0, 87, 168, 0.12); }
.aa-lang summary svg { width: 16px; height: 16px; flex: none; }
.aa-lang-caret {
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.2s ease;
}
.aa-lang[open] .aa-lang-caret { transform: translateY(1px) rotate(225deg); }
.aa-lang-list {
position: absolute;
top: calc(100% + 8px);
inset-inline-end: 0;
z-index: 80;
min-width: 168px;
margin: 0;
padding: 6px;
list-style: none;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 14px;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
}
/* The box Framer puts the selector in (the desktop bar's buttons row, the phone menu's button
stack) clips its overflow, which swallowed the open list: let every wrapper between the nav
and an open selector overflow while it is open. !important: Framer sets the clip from its
variant selectors at a higher specificity. */
nav :has(details.aa-lang[open]) { overflow: visible !important; }
.aa-lang-list li { margin: 0; padding: 0; }
.aa-lang-list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 9px 12px;
border-radius: 9px;
color: #0a0a0a;
font-size: 14px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.aa-lang-list a:hover { background: #eef5fb; color: #0057a8; }
.aa-lang-list a[aria-current="true"] { color: #0057a8; font-weight: 700; }
.aa-lang-list a[aria-current="true"]::after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #0057a8;
flex: none;
}
/* Beside the logo on every bar (the partial is included right after the logo container, which
the flattened wrapper above puts straight in the Content row). That row spreads its children
apart (space-between), so the selector pushes whatever follows it, the desktop buttons or the
phone hamburger, to the far end with an auto margin and keeps a step from the mark. */
nav .aa-lang {
margin-inline-start: 18px;
margin-inline-end: auto;
}
/* ---------------- Hebrew & Arabic web font (html[lang="he"], html[lang="ar"]) ----------------
None of the template's fonts (Cabin, Merriweather, Inter, Schibsted Grotesk) has Hebrew or
Arabic glyphs, so those pages fell back to whatever the visitor's OS has. Rubik (Google Fonts
v31, the variable 300–900 face, self-hosted under /landing/assets/fonts/rubik like the Framer
fonts) goes first on them. Its two faces are limited by unicode-range to the Hebrew and Arabic
blocks (Google's own subset ranges), so only those scripts switch: Latin words, digits and
prices inside RTL pages still come from the family listed after it. That is why every rule
below keeps the element's original family behind "Rubik" instead of replacing it, mirroring
where Framer takes the family from. English and Russian pages match none of these selectors.
Weights 400–700 all come from the one variable file per script; Hebrew and Arabic have no
italics, the browser slants the upright face where Framer asks for one. */
@font-face {
font-family: "Rubik";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url(/landing/assets/fonts/rubik/rubik-v31-hebrew.woff2) format("woff2");
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: "Rubik";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url(/landing/assets/fonts/rubik/rubik-v31-arabic.woff2) format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Text the Framer reset (body, input, textarea, select, button { font-family: sans-serif })
leaves on the system font. The demo form's controls and the contact form's fields are
excluded: they inherit the section's family or read their own variable (below). */
html:is([lang="he"], [lang="ar"]) body,
html:is([lang="he"], [lang="ar"]) :is(input, textarea, select, button):not([class*="aa-"], .framer-form-input) {
font-family: "Rubik", sans-serif;
}
/* Framer text: the family lives in --framer-font-family (set by the text-style presets, or
inline on text without one) with the bold and italic variants in their own variables, read
here exactly as Framer's own rules read them; Inter is Framer's default when none is set.
!important because Framer's link and hover rules come later in the cascade at the same or a
higher specificity. */
html:is([lang="he"], [lang="ar"]) .framer-text {
font-family: "Rubik", var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif) !important;
}
html:is([lang="he"], [lang="ar"]) strong.framer-text {
font-family: "Rubik", var(--framer-font-family-bold, var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)) !important;
}
html:is([lang="he"], [lang="ar"]) em.framer-text {
font-family: "Rubik", var(--framer-font-family-italic, var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)) !important;
}
html:is([lang="he"], [lang="ar"]) em.framer-text > strong.framer-text {
font-family: "Rubik", var(--framer-font-family-bold-italic, var(--framer-font-family, "Inter", "Inter Placeholder", sans-serif)) !important;
}
/* The contact form's fields (contact.blade.php) read theirs from --framer-input-font-family. */
html:is([lang="he"], [lang="ar"]) .framer-form-input {
font-family: "Rubik", var(--framer-input-font-family, sans-serif);
}
/* Button labels, the rolling-text pieces and the pricing figures carry font-family in their
style attribute (Framer writes it inline, so only !important beats it); each names one family.
The first selector picks real declarations only, not the --framer-font-family variables that
also sit inline, whichever way the attribute is serialised. */
html:is([lang="he"], [lang="ar"]) :is([style^="font-family:"], [style*=";font-family:"], [style*="; font-family:"])[style*="Cabin"] {
font-family: "Rubik", "Cabin", "Cabin Placeholder", sans-serif !important;
}
html:is([lang="he"], [lang="ar"]) :is([style^="font-family:"], [style*=";font-family:"], [style*="; font-family:"])[style*="Merriweather"] {
font-family: "Rubik", "Merriweather", "Merriweather Placeholder", serif !important;
}
html:is([lang="he"], [lang="ar"]) :is([style^="font-family:"], [style*=";font-family:"], [style*="; font-family:"])[style*="Inter"] {
font-family: "Rubik", "Inter", "Inter Placeholder", sans-serif !important;
}
html:is([lang="he"], [lang="ar"]) :is([style^="font-family:"], [style*=";font-family:"], [style*="; font-family:"])[style*="Schibsted"] {
font-family: "Rubik", "Schibsted Grotesk", "Schibsted Grotesk Placeholder", sans-serif !important;
}
/* The site's own components: the demo and hear-it-live sections (Cabin, Merriweather headings),
the pricing extras and the language selector. */
html:is([lang="he"], [lang="ar"]) .aa-section,
html:is([lang="he"], [lang="ar"]) div.framer-oox73e[data-framer-name="Pricing Card"]::after {
font-family: "Rubik", "Cabin", "Cabin Placeholder", sans-serif;
}
html:is([lang="he"], [lang="ar"]) .aa-h2,
html:is([lang="he"], [lang="ar"]) .aa-player-title {
font-family: "Rubik", "Merriweather", "Merriweather Placeholder", serif;
}
html:is([lang="he"], [lang="ar"]) .aa-custom-plan p {
font-family: "Rubik", "Merriweather", "Merriweather Placeholder", serif !important;
}
html:is([lang="he"], [lang="ar"]) .aa-lang {
font-family: "Rubik", "Cabin", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}