/* Direction: the Webflow export used physical left/right for margins, padding, borders, radii and text-align. They are logical now (inline-start/end), so Arabic mirrors for free; absolute `left:`/`right:` positions stay physical on purpose (they place decorative art). */ /* landing.css - GENERATED by scripts/build-landing-css.mjs. Do not hand-edit. */ /* Source: dropship src/styles/{tokens,webflow-parity,parity/*}.css, scoped under .dsl. */ @font-face{font-family:webflow-icons;src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)format("truetype");font-weight:400;font-style:normal} @keyframes hero_marquee-timeline { 0% { transform: translate(0); } to { transform: translate(-50%); } } @keyframes pane-in { 0% { opacity: 0; } to { opacity: 1; } } @keyframes pane-out { 0% { opacity: 1; } to { opacity: 0; } } @keyframes jbPopIn { 0% { opacity: 0; transform: translate(-50%, calc(-100% + 10px)) scale(.5) translateY(6px); } to { opacity: 1; transform: translate(-50%, calc(-100% + 10px)) scale(1) translateY(0); } } @keyframes jbPopOut { 0% { opacity: 1; transform: translate(-50%, calc(-100% + 10px)) scale(1); } to { opacity: 0; transform: translate(-50%, calc(-100% + 10px)) scale(.7); } } @keyframes jbRipple { 0% { transform: scale(.3); opacity: 1; } to { transform: scale(2.6); opacity: 0; } } @keyframes jbBlink { 0%, to { opacity: .4; } 50% { opacity: 1; } } html:has(.dsl) { height: 100%; scrollbar-gutter: stable; overflow-x: hidden; } /* The html rule above hides the horizontal scrollbar on desktop, but it does not shrink the document's scroll width, and mobile Safari/Chrome pan the page sideways anyway: the footer graphic (1729px wide), the closed mega-menu columns and the hidden feature tooltips all poke out past the viewport edge (/pricing measured 1540px at 1366 and 421px at 390). `clip` cuts them at the landing wrapper without making it a scroll container, so the sticky navbar keeps working. */ .dsl { overflow-x: clip; } /* ------------------------------------------------------------------------- * * Everything below is scoped INSIDE `@layer landing` - declared in app/app.css * and in the of app/root.tsx as * @layer theme, base, antd, landing, landing-rtl, components, utilities; * Unlayered CSS beats EVERY cascade layer regardless of specificity, so while * this file was unlayered its Webflow parity rules silently defeated every * Tailwind class the hand-written marketing pages put on an element: * `.dsl h1..h6 {margin:0}` and `.dsl p {margin-bottom:0}` killed every mb- and * space-y- utility, `.dsl h1 {font-size:38px}` killed text-3xl, and the Webflow * `.grid` class collided with Tailwind's `grid` utility. /privacy rendered with * no vertical rhythm at all as a result. * In a layer ABOVE preflight and antd but BELOW utilities, the parity rules * still beat the reset for un-classed Webflow markup, while a utility written * on an element now wins - which is what both sides were written to expect. * The hoisted @font-face/@keyframes and html:has(.dsl) above stay unlayered: * they declare nothing a utility could contend with. * ------------------------------------------------------------------------- */ @layer landing { /* ==== tokens.css ==== */ /* GENERATED by scripts/extract-tokens.mjs from mirror/css/dropship-3-0.shared.min.css - do not hand-edit values */ .dsl { --_typography---text-r--font-family:var(--_typography---font-family--body-font); --_typography---text-r--font-size:1rem; --_typography---text-r--line-height:140%; --_typography---font-weight--regular:400; --_typography---text-r--letter-spacing:-.02em; --_typography---h1--letter-spacing:-.02em; --_typography---h2--letter-spacing:-.02em; --_typography---h3--letter-spacing:-.02em; --_typography---h4--letter-spacing:-.02em; --_typography---h5--letter-spacing:-.02em; --_typography---h6--letter-spacing:-.02em; --tint--70:#ffffffb3; --_typography---font-weight--semibold:600; --shade--5:#0000000d; --_color-theme---normal:#225aea; --background-color--background-primary\:var(--base-color-neutral--black\); --text-color--text-alternate\:var(--base-color-neutral--white\); --text-color--text-primary\:var(--base-color-neutral--black\); --neutral--darkest:#1f1f1f; --tint--30:#ffffff4d; --_typography---h3--font-family:var(--_typography---font-family--heading-font); --_typography---h3--font-size:2.5rem; --_typography---h2--line-height:130%; --_typography---h3--font-weight:var(--_typography---font-weight--semibold); --_color-theme---tint--40:color-mix(in srgb,var(--_color-theme---normal)40%,transparent); --_typography---h1--font-family:var(--_typography---font-family--heading-font); --_typography---h1--font-size:3.5rem; --_typography---h1--line-height:120%; --_typography---h1--font-weight:var(--_typography---font-weight--semibold); --_sizes---padding-global:2.5rem; --_typography---font-weight--medium:500; --_typography---font-family--heading-font:"Plus Jakarta Sans",Arial,sans-serif; --_typography---text-t--font-family:var(--_typography---font-family--body-font); --_typography---text-t--font-size:.75rem; --_typography---text-t--line-height:140%; --_typography---text-t--letter-spacing:-.02em; --neutral--black:black; --_typography---font-family--body-font:Inter,Arial,sans-serif; --background-color--background-alternate\:var(--base-color-neutral--white\); --_typography---text-s--font-family:var(--_typography---font-family--body-font); --_typography---text-s--font-size:.875rem; --_typography---text-s--line-height:140%; --_typography---text-s--letter-spacing:-.02em; --_typography---h4--font-family:var(--_typography---font-family--heading-font); --_typography---h4--font-size:2rem; --_typography---h4--line-height:130%; --_typography---h4--font-weight:var(--_typography---font-weight--semibold); --background-color--background-secondary\:var(--base-color-brand--blue\); --neutral--white:white; --_color-theme---tint--80:color-mix(in srgb,var(--_color-theme---normal)80%,transparent); --shade--20:#0003; --tint--60:#fff9; --shade--90:#000000e6; --_typography---h6--font-family:var(--_typography---font-family--heading-font); --_typography---h6--font-size:1.25rem; --_typography---h6--line-height:130%; --_typography---h6--font-weight:var(--_typography---font-weight--semibold); --link-color--link-primary\:var(--base-color-brand--blue\); --_typography---text-l--font-family:var(--_typography---font-family--body-font); --_typography---text-l--font-size:1.25rem; --_typography---text-l--line-height:140%; --_typography---text-l--letter-spacing:-.02em; --brand--normal\:var(--_color-theme---normal); --_typography---h2--font-family:var(--_typography---font-family--heading-font); --_typography---h2--font-size:3rem; --_typography---h2--font-weight:var(--_typography---font-weight--semibold); --background-color--background-tertiary\:var(--base-color-brand--pink\); --_typography---h5--font-family:var(--_typography---font-family--heading-font); --_typography---h5--font-size:1.5rem; --_typography---h5--line-height:130%; --_typography---h5--font-weight:var(--_typography---font-weight--semibold); --background-color--background-error\:var(--base-color-system--error-red\); --border-color--border-alternate\:var(--base-color-neutral--neutral-darker\); --_typography---text-m--font-family:var(--_typography---font-family--body-font); --_typography---text-m--font-size:1.125rem; --_typography---text-m--line-height:140%; --_typography---text-m--letter-spacing:-.02em; --shade--10:#0000001a; --background-color--background-warning\:var(--base-color-system--warning-yellow\); --text-color--text-warning\:var(--base-color-system--warning-yellow-dark\); --_typography---text-xl--font-family:var(--_typography---font-family--body-font); --_typography---text-xl--font-size:1.5rem; --_typography---text-xl--letter-spacing:-.02em; --tint--50:#ffffff80; --_color-theme---light:#94b2ff; --neutral--dark:#868686; --_color-theme---tint--60:color-mix(in srgb,var(--_color-theme---normal)60%,transparent); --_color-theme---dark:#1448cb; --neutral--lightest:#efefef; --neutral--transparent:#ffffff40; --neutral--lighter:#ccc; --neutral--light:#aaa; --neutral--darker:#383838; --_color-theme---lightest:#f9fbff; --_color-theme---lighter:#dae6ff; --_color-theme---darker:#072f94; --_color-theme---darkest:#000e58; --tint--40:#fff6; --_typography---text-xl--line-height:140%; --shade--70:#000000b3; --_sizes---section-padding-large:7rem; --_sizes---section-padding-hero:8rem; --_sizes---padding-section-small:5rem; --tint--20:#fff3; --tint--80:#fffc; --_sizes---gap--gap-1:1rem; --_sizes---gap--gap-2:2rem; --_sizes---gap--gap-3:3rem; --_sizes---gap--gap-4:4rem; --tint--10:#ffffff1a; --_sizes---gap--gap-5:5rem; --_sizes---gap--gap-6:6rem; --_typography---h3--line-height:130%; --_sizes---gap--gap-1-5:1.5rem; --_color-theme---tint--20:color-mix(in srgb,var(--_color-theme---normal)20%,transparent); --shade--60:#0009; --_sizes---gap--gap-0-5:.5rem; --_sizes---gap--gap-1-25:1.25rem; --shade--40:#0006; --shade--30:#0000004d; --_sizes---padding-section-medium:6rem; --tint--90:#ffffffe6; --shade--50:#00000080; --shade--80:#000c; --base-color-neutral--black\:#000; --base-color-neutral--white\:#fff; --base-color-brand--blue\:#2d62ff; --base-color-brand--pink\:#dd23bb; --base-color-system--error-red\:#f8e4e4; --base-color-neutral--neutral-darker\:#222; --base-color-system--warning-yellow\:#fcf8d8; --base-color-system--warning-yellow-dark\:#5e5515; } /* base element rules carried over for parity */ .dsl { margin:0; } .dsl { color:#333; background-color:#fff; min-height:100%; margin:0; font-family:Arial,sans-serif; font-size:14px; line-height:20px; } .dsl { font-family:var(--_typography---text-r--font-family); color:#000; font-size:var(--_typography---text-r--font-size); line-height:var(--_typography---text-r--line-height); font-weight:var(--_typography---font-weight--regular); letter-spacing:var(--_typography---text-r--letter-spacing); } /* ==== webflow-parity.css ==== */ /* * Parity escape hatch: rules that Tailwind utilities express poorly are copied * here from the mirrored shared CSS (mirror/css/dropship-3-0.shared.min.css) * during the fidelity loop - rich-text article styles, gradient text, marquee * masks. Keep each rule annotated with the page/section it serves. */ /* Blog/legal rich-text figures: the source CSS sets `figure{margin:2rem 0}` but Tailwind's preflight resets figure margins to 0. Restores the 32px vertical rhythm between article images (≈46px×N height gap otherwise). */ .dsl figure { margin-top: 2rem; margin-bottom: 2rem; } /* ==== parity/shared.css ==== */ /* * GLOBAL SHARED PARITY CSS - extracted verbatim from the original site's * stylesheets (mirror/css/dropship-3-0.shared.min.css + mirror/css/odyn-bundle.css) * via `node scripts/extract-css.mjs`. Imported once from src/styles/base.css. * * Sections: * 1. Webflow runtime base (w-* classes, webflow-icons font) * 2. Element base rules (html/body/h1-h6/p/a/ul/ol/li/img) incl. the * responsive design-token overrides Webflow puts on `body` per breakpoint * 3. Site layout primitives (page-wrapper/main-wrapper/section/containers) * 4. Button component (button-main + style variants) * 5. Badge component * 6. Heading block component * 7. Text utility classes (text-size-, text-weight-, text-color-) * 8. Rich text (w-richtext base) */ /* ============================================================ 1. WEBFLOW RUNTIME BASE ============================================================ */ .dsl .w-inline-block { max-width:100%; display:inline-block; } .dsl .w-button { color:#fff; line-height:inherit; cursor:pointer; background-color:#3898ec; border:0; border-radius:0; padding:9px 15px; text-decoration:none; display:inline-block; } .dsl input.w-button { -webkit-appearance:button; } .dsl .w-embed:before, .dsl .w-embed:after { content:" "; grid-area:1/1/2/2; display:table; } .dsl .w-embed:after { clear:both; } .dsl .w-layout-grid { grid-row-gap:16px; grid-column-gap:16px; grid-template-rows:auto auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; display:grid; } /* .w-layout-blockcontainer / .w-dyn-list / .w-dyn-items / .w-dyn-item carry no rules in the original stylesheet (markup hooks only). Only the CMS hide helpers are styled: */ .dsl .w-dyn-hide, .dsl .w-dyn-bind-empty, .dsl .w-condition-invisible { display:none!important; } /* webflow-icons icon font (data URI) + generic w-icon-* glyph classes */ .dsl [class^=w-icon-], .dsl [class*=\ w-icon-]{ speak:none; font-variant:normal; text-transform:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-style:normal; font-weight:400; line-height:1; font-family:webflow-icons!important } .dsl .w-icon-slider-right:before { content:""; } .dsl .w-icon-slider-left:before { content:""; } .dsl .w-icon-nav-menu:before { content:""; } .dsl .w-icon-arrow-down:before, .dsl .w-icon-dropdown-toggle:before { content:""; } .dsl .w-icon-slider-left, .dsl .w-icon-slider-right { width:1em; height:1em; margin:auto; inset:0; } .dsl .w-icon-dropdown-toggle { width:1em; height:1em; margin:auto 20px auto auto; position:absolute; top:0; bottom:0; right:0; } /* ============================================================ 2. ELEMENT BASE RULES (normalize -> webflow -> project cascade order) ============================================================ */ .dsl { margin:0; } .dsl a { background-color:#0000; } .dsl a:active, .dsl a:hover { outline:0; } .dsl b, .dsl strong { font-weight:700; } .dsl h1 { margin:.67em 0; font-size:2em; } .dsl img { border:0; } .dsl { color:#333; background-color:#fff; min-height:100%; margin:0; font-family:Arial,sans-serif; font-size:14px; line-height:20px; } .dsl img { vertical-align:middle; max-width:100%; display:inline-block; } .dsl h1, .dsl h2, .dsl h3, .dsl h4, .dsl h5, .dsl h6 { margin-bottom:10px; font-weight:700; } .dsl h1 { margin-top:20px; font-size:38px; line-height:44px; } .dsl h2 { margin-top:20px; font-size:32px; line-height:36px; } .dsl h3 { margin-top:20px; font-size:24px; line-height:30px; } .dsl h4 { margin-top:10px; font-size:18px; line-height:24px; } .dsl h5 { margin-top:10px; font-size:14px; line-height:20px; } .dsl h6 { margin-top:10px; font-size:12px; line-height:18px; } .dsl p { margin-top:0; margin-bottom:10px; } .dsl ul, .dsl ol { margin-top:0; margin-bottom:10px; padding-inline-start:40px; } .dsl { font-family:var(--_typography---text-r--font-family); color:#000; font-size:var(--_typography---text-r--font-size); line-height:var(--_typography---text-r--line-height); font-weight:var(--_typography---font-weight--regular); letter-spacing:var(--_typography---text-r--letter-spacing); } .dsl h1 { letter-spacing:var(--_typography---h1--letter-spacing); margin-top:0; margin-bottom:0; } .dsl h2 { letter-spacing:var(--_typography---h2--letter-spacing); margin-top:0; margin-bottom:0; } .dsl h3 { letter-spacing:var(--_typography---h3--letter-spacing); margin-top:0; margin-bottom:0; } .dsl h4 { letter-spacing:var(--_typography---h4--letter-spacing); margin-top:0; margin-bottom:0; } .dsl h5 { letter-spacing:var(--_typography---h5--letter-spacing); margin-top:0; margin-bottom:0; } .dsl h6 { letter-spacing:var(--_typography---h6--letter-spacing); margin-top:0; margin-bottom:0; } .dsl p { margin-bottom:0; } .dsl ul, .dsl ol { margin-top:0; margin-bottom:0; padding-inline-start:1.5rem; } .dsl li { margin-bottom:.25rem; } .dsl img { max-width:100%; display:inline-block; } /* ============================================================ 3. SITE LAYOUT PRIMITIVES ============================================================ */ .dsl .padding-global { padding-inline-end:var(--_sizes---padding-global); padding-inline-start:var(--_sizes---padding-global); } .dsl .page-wrapper { overflow:clip; } .dsl .container-large { z-index:1; width:100%; max-width:80rem; margin-inline-start:auto; margin-inline-end:auto; position:relative; } .dsl .container-large.z-index-2 { z-index:2; } .dsl .main-wrapper { overflow:clip; } .dsl .container-medium { z-index:1; width:100%; max-width:64rem; margin-inline-start:auto; margin-inline-end:auto; position:relative; } .dsl .section { padding:var(--_sizes---section-padding-large)var(--_sizes---padding-global); position:relative; } .dsl .section.is-hero { padding-top:var(--_sizes---section-padding-hero); padding-bottom:var(--_sizes---section-padding-large); flex-flow:column; justify-content:flex-start; align-items:center; display:flex; } .dsl .section.is-hero.no-padding-bottom { padding-bottom:0; } .dsl .section.is-tabs { z-index:3; padding-top:9.5rem; position:relative; } .dsl .section.is-styleguide { padding-top:var(--_sizes---padding-section-small); padding-bottom:var(--_sizes---padding-section-small); } .dsl .section.is-ai { height:100svh; max-height:60rem; } .dsl .section.padding-top-small { padding-top:var(--_sizes---padding-section-small); } .dsl .section.is--404 { justify-content:center; align-items:center; height:100svh; max-height:60rem; display:flex; } /* ============================================================ 4. BUTTON COMPONENT (button-main + w-variant style variants: default=brand, fdd894b6…=white, 07e764dd…=ghost-brand, 3fae2919…=ghost-dark, baa4a452…=ghost-white) ============================================================ */ .dsl .button { height:2.5rem; color:var(--neutral--white); font-size:var(--_typography---text-s--font-size); font-weight:var(--_typography---font-weight--medium); text-align:center; border-radius:.69rem; justify-content:center; align-items:center; padding-inline-start:1rem; padding-inline-end:1rem; text-decoration:none; display:flex; position:relative; overflow:hidden; } .dsl .button:where(.w-variant-fdd894b6-a4c6-5062-b405-6cbc95c85455) { color:var(--neutral--darkest); } .dsl .button:where(.w-variant-3fae2919-f7e5-b982-171a-55ad622b4433) { color:var(--neutral--darkest); padding-inline-start:.25rem; padding-inline-end:.25rem; } .dsl .button:where(.w-variant-07e764dd-ab36-f451-9e1b-ccea885e6499) { color:var(--_color-theme---normal); padding-inline-start:.25rem; padding-inline-end:.25rem; } .dsl .button:where(.w-variant-baa4a452-59a8-ba8b-334b-f5c0ae0798c8) { color:var(--neutral--white); padding-inline-start:.25rem; padding-inline-end:.25rem; } .dsl .button.is-text { color:#000; background-color:#0000; border:2px solid #0000; } .dsl .button.is-small { padding:.5rem 1.25rem; } .dsl .button.is-large { padding:1rem 2rem; } .dsl .button.is-secondary { border:1px solid var(--border-color--border-alternate\); color:var(--text-color--text-primary\); background-color:#0000; } .dsl .button.is-icon { grid-column-gap:1rem; grid-row-gap:1rem; flex-direction:row; justify-content:center; align-items:center; text-decoration:none; display:flex; } .dsl .button.is-brand { background-color:var(--background-color--background-secondary\); } .dsl .button-group { grid-column-gap:.75rem; grid-row-gap:.75rem; flex-flow:wrap; justify-content:flex-start; align-items:center; display:flex; } .dsl .button-wrap { background-image:linear-gradient(180deg,var(--tint--30),var(--tint--50)),linear-gradient(90deg,var(--_color-theme---light),var(--_color-theme---normal)); border-radius:.75rem; padding:1px; text-decoration:none; } .dsl .button-wrap:where(.w-variant-fdd894b6-a4c6-5062-b405-6cbc95c85455) { background-image:linear-gradient(180deg,var(--shade--5),#00000026),linear-gradient(90deg,var(--neutral--white),#fdfdfd); } .dsl .button-wrap:where(.w-variant-3fae2919-f7e5-b982-171a-55ad622b4433), .dsl .button-wrap:where(.w-variant-baa4a452-59a8-ba8b-334b-f5c0ae0798c8), .dsl .button-wrap:where(.w-variant-07e764dd-ab36-f451-9e1b-ccea885e6499) { background-image:none; transition:opacity .3s; } .dsl .button-wrap:hover:where(.w-variant-3fae2919-f7e5-b982-171a-55ad622b4433), .dsl .button-wrap:hover:where(.w-variant-baa4a452-59a8-ba8b-334b-f5c0ae0798c8), .dsl .button-wrap:hover:where(.w-variant-07e764dd-ab36-f451-9e1b-ccea885e6499) { opacity:.6; color:var(--neutral--dark); } .dsl .button-wrap:focus { outline-color:var(--_color-theme---normal); outline-offset:0px; outline-width:2px; outline-style:solid; } .dsl .button-content { z-index:2; grid-column-gap:.25rem; grid-row-gap:.25rem; justify-content:center; align-items:center; width:100%; display:flex; position:relative; } .dsl .button-bg-wrap { z-index:1; pointer-events:none; position:absolute; inset:0%; } .dsl .button-bg { background-image:linear-gradient(90deg,var(--_color-theme---tint--60),var(--_color-theme---normal)); position:absolute; inset:0%; } .dsl .button-bg:where(.w-variant-fdd894b6-a4c6-5062-b405-6cbc95c85455) { background-image:linear-gradient(90deg,var(--neutral--white),#fdfdfd); } .dsl .button-bg:where(.w-variant-3fae2919-f7e5-b982-171a-55ad622b4433), .dsl .button-bg:where(.w-variant-baa4a452-59a8-ba8b-334b-f5c0ae0798c8), .dsl .button-bg:where(.w-variant-07e764dd-ab36-f451-9e1b-ccea885e6499) { background-image:none; } .dsl .button-bg-hover { background-image:linear-gradient(90deg,var(--_color-theme---normal),var(--_color-theme---dark)); opacity:0; position:absolute; inset:0%; } .dsl .button-bg-hover:where(.w-variant-fdd894b6-a4c6-5062-b405-6cbc95c85455) { background-image:linear-gradient(90deg,#f3f3f3,var(--neutral--lightest)); } .dsl .button-bg-hover:where(.w-variant-3fae2919-f7e5-b982-171a-55ad622b4433), .dsl .button-bg-hover:where(.w-variant-baa4a452-59a8-ba8b-334b-f5c0ae0798c8), .dsl .button-bg-hover:where(.w-variant-07e764dd-ab36-f451-9e1b-ccea885e6499) { background-image:none; } .dsl .button-slot { display:contents; } .dsl .button-icon-main { aspect-ratio:1; width:1.25rem; height:1.25rem; padding:0; overflow:hidden; } .dsl .button-icon-main.is-left { margin-inline-start:-.5rem; } .dsl .button-icon-main.is-right { margin-inline-end:-.5rem; } .dsl .button-bg-hover { opacity:0; transition:opacity .3s ease; } .dsl .button-wrap:hover .button-bg-hover { opacity:1; } /* ============================================================ 5. BADGE COMPONENT ============================================================ */ .dsl .badge { border:1px solid var(--_color-theme---light); background-color:var(--_color-theme---lightest); color:var(--_color-theme---dark); font-weight:var(--_typography---font-weight--medium); --_color-theme---normal:#225aea; --_color-theme---tint--40:color-mix(in srgb,var(--_color-theme---normal)40%,transparent); --_color-theme---tint--80:color-mix(in srgb,var(--_color-theme---normal)80%,transparent); --_color-theme---light:#94b2ff; --_color-theme---tint--60:color-mix(in srgb,var(--_color-theme---normal)60%,transparent); --_color-theme---dark:#1448cb; --_color-theme---lightest:#f9fbff; --_color-theme---lighter:#dae6ff; --_color-theme---darker:#072f94; --_color-theme---darkest:#000e58; --_color-theme---tint--20:color-mix(in srgb,var(--_color-theme---normal)20%,transparent); border-radius:100vw; } .dsl .badge:where(.w-variant-a6ada137-fa55-1aa8-f265-3f5887e6719f) { --_color-theme---normal:#16895a; --_color-theme---tint--40:color-mix(in srgb,var(--_color-theme---normal)40%,transparent); --_color-theme---tint--80:color-mix(in srgb,var(--_color-theme---normal)80%,transparent); --_color-theme---light:#c7e1cb; --_color-theme---tint--60:color-mix(in srgb,var(--_color-theme---normal)60%,transparent); --_color-theme---dark:#096f45; --_color-theme---lightest:#f7fffa; --_color-theme---lighter:#e7fff1; --_color-theme---darker:#06492a; --_color-theme---darkest:#001d10; --_color-theme---tint--20:color-mix(in srgb,var(--_color-theme---normal)20%,transparent); } .dsl .badge:where(.w-variant-ac3369ca-1e7a-f8f4-c31f-512a82c3e54c) { border-color:var(--_color-theme---light); color:var(--_color-theme---normal); --_color-theme---normal:#d71313; --_color-theme---tint--40:color-mix(in srgb,var(--_color-theme---normal)40%,transparent); --_color-theme---tint--80:color-mix(in srgb,var(--_color-theme---normal)80%,transparent); --_color-theme---light:#ffc8c8; --_color-theme---tint--60:color-mix(in srgb,var(--_color-theme---normal)60%,transparent); --_color-theme---dark:#9e1414; --_color-theme---lightest:snow; --_color-theme---lighter:#fff4f4; --_color-theme---darker:#700606; --_color-theme---darkest:#260000; --_color-theme---tint--20:color-mix(in srgb,var(--_color-theme---normal)20%,transparent); } .dsl .badge:where(.w-variant-61596514-84c1-71ba-9179-cdac0d458689) { border-color:var(--shade--5); background-color:var(--neutral--lightest); color:var(--neutral--dark); } .dsl .badge:where(.w-variant-76733a6f-3dfb-49b5-6073-2ddadc0d1d52) { border-color:var(--shade--20); background-color:var(--neutral--white); color:var(--neutral--darkest); } .dsl .badge-icon { aspect-ratio:1; width:100%; height:100%; } .dsl .badge-icon-wrap { aspect-ratio:1; justify-content:center; align-items:center; width:100%; height:100%; display:flex; } .dsl .badge-icon-wrap:where(.w-variant-6288be41-5d9f-7339-6ce3-84295b003edf) { width:.88rem; height:.88rem; } .dsl .badge-size { height:1.5rem; font-size:var(--_typography---text-t--font-size); border-radius:inherit; justify-content:flex-start; align-items:center; padding:.25rem .5rem; display:flex; } .dsl .badge-size:where(.w-variant-6288be41-5d9f-7339-6ce3-84295b003edf) { grid-column-gap:0rem; grid-row-gap:0rem; height:1.13rem; padding:.13rem .38rem; font-size:.63rem; } .dsl .badge-text { line-height:100%; } .dsl .badge-inner-icon { aspect-ratio:1; justify-content:center; align-items:center; width:1.25rem; height:1.25rem; margin-inline-start:-.25rem; display:flex; } .dsl .badge-inner-icon:where(.w-variant-6288be41-5d9f-7339-6ce3-84295b003edf) { width:.88rem; height:.88rem; margin-inline-start:-.19rem; } /* ============================================================ 6. HEADING BLOCK COMPONENT ============================================================ */ .dsl .text-rich-text h1, .dsl .text-rich-text h2, .dsl .text-rich-text h3 { margin-top:2rem; margin-bottom:1rem; } .dsl .text-rich-text h4 { margin-top:1.75rem; margin-bottom:1rem; } .dsl .text-rich-text h5, .dsl .text-rich-text h6 { margin-top:1.5rem; margin-bottom:1rem; } .dsl .text-rich-text p { margin-bottom:1rem; } .dsl .text-rich-text ul, .dsl .text-rich-text ol { margin-bottom:1.5rem; } .dsl .text-rich-text blockquote { border-inline-start-color:var(--_color-theme---tint--40); margin-top:2rem; margin-bottom:2rem; } .dsl .heading-style-x { font-family:var(--_typography---h1--font-family); font-size:var(--_typography---h1--font-size); line-height:var(--_typography---h1--line-height); font-weight:var(--_typography---h1--font-weight); letter-spacing:var(--_typography---h1--letter-spacing); max-width:calc(var(--number)*1ch); } .dsl .heading-style-x:where(.w-variant-487a2afe-81a9-18f0-c5f7-e8b8de7e9526) { font-size:var(--_typography---h2--font-size); line-height:var(--_typography---h2--line-height); } .dsl .heading-style-x:where(.w-variant-d8cb559a-0e1a-3989-1949-6adbe8654b44) { font-size:var(--_typography---h3--font-size); line-height:var(--_typography---h2--line-height); } .dsl .heading-style-x:where(.w-variant-af878e48-9ea8-47ae-6b46-74e28e4446cc) { font-size:var(--_typography---h4--font-size); line-height:var(--_typography---h2--line-height); } .dsl .heading-style-x:where(.w-variant-6379aa16-9db8-446d-18ce-f0171354960c) { font-size:var(--_typography---h5--font-size); line-height:var(--_typography---h2--line-height); } .dsl .heading-style-x:where(.w-variant-8dc07997-a818-e44c-5182-87e99d8d073d) { font-size:var(--_typography---h6--font-size); line-height:var(--_typography---h6--line-height); } .dsl .heading-style-x:where(.w-variant-a8e6f25e-6515-c735-3fde-bb33935b7206) { font-family:var(--_typography---font-family--body-font); font-size:var(--_typography---text-xl--font-size); font-weight:var(--_typography---font-weight--medium); } .dsl .heading-style-x:where(.w-variant-b4066fd1-3cf0-33c4-ab27-4ec2242d7851) { font-family:var(--_typography---font-family--body-font); font-size:var(--_typography---text-l--font-size); font-weight:var(--_typography---font-weight--medium); } .dsl .heading-style-x:where(.w-variant-6a483df2-f3d4-ff35-a586-3fae968a8a21) { font-family:var(--_typography---font-family--body-font); font-size:var(--_typography---text-m--font-size); font-weight:var(--_typography---font-weight--medium); } .dsl .heading-style-x:where(.w-variant-f484ff60-942c-2ce3-cd91-21603741d6f8) { font-family:var(--_typography---font-family--body-font); font-size:var(--_typography---text-r--font-size); font-weight:var(--_typography---font-weight--medium); } .dsl .heading-style-x:where(.w-variant-851ab48e-1080-b166-e49b-5d2fa0a672b4) { font-family:var(--_typography---font-family--body-font); font-size:var(--_typography---text-s--font-size); font-weight:var(--_typography---font-weight--medium); } .dsl .heading-style-x:where(.w-variant-4f5e3682-4b89-d624-e7e1-2848f7c7d077) { font-family:var(--_typography---font-family--body-font); font-size:var(--_typography---text-t--font-size); font-weight:var(--_typography---font-weight--medium); } .dsl .heading-style-x em { color:var(--_color-theme---normal); font-style:normal; } .dsl .heading-style-x h1 { line-height:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; } .dsl .heading-style-x h2, .dsl .heading-style-x h3, .dsl .heading-style-x h4, .dsl .heading-style-x h5, .dsl .heading-style-x h6 { font-size:inherit; line-height:inherit; font-weight:inherit; letter-spacing:inherit; } .dsl .paragraph-style-x { font-family:var(--_typography---text-r--font-family); font-size:var(--_typography---text-r--font-size); line-height:var(--_typography---text-r--line-height); letter-spacing:var(--_typography---text-r--letter-spacing); max-width:calc(var(--number)*1ch); } .dsl .paragraph-style-x:where(.w-variant-92282ff1-ecf6-d5c8-9e6d-2458da2edacb) { font-size:var(--_typography---text-m--font-size); line-height:var(--_typography---text-m--line-height); } .dsl .paragraph-style-x:where(.w-variant-b068a20d-890e-3db9-9fa1-5f21985b111a) { font-size:var(--_typography---text-l--font-size); line-height:var(--_typography---text-l--line-height); } .dsl .paragraph-style-x:where(.w-variant-31191588-cc20-4ba0-b073-cbe69b7efd66) { font-size:var(--_typography---text-xl--font-size); line-height:var(--_typography---text-xl--line-height); } .dsl .paragraph-style-x:where(.w-variant-3a767425-2c7f-eb2d-2c1d-7fa31ac5deae) { font-size:var(--_typography---text-s--font-size); line-height:var(--_typography---text-s--line-height); } .dsl .paragraph-style-x:where(.w-variant-3af1e683-0710-0769-2054-9f657db0ea1e) { font-size:var(--_typography---text-t--font-size); line-height:var(--_typography---text-t--line-height); } .dsl .paragraph-style-x:where(.w-variant-8f3c9782-a221-5903-b5cc-b92b540e7e17) { max-width:calc(var(--number)*1ch); } .dsl .paragraph-style-x p { font-size:inherit; line-height:inherit; } .dsl .heading-wrap { max-width:calc(var(--number)*1ch); flex-flow:column; justify-content:flex-start; align-items:flex-start; display:flex; } .dsl .heading-wrap:where(.w-variant-8f3c9782-a221-5903-b5cc-b92b540e7e17) { text-align:center; max-width:calc(var(--number)*1ch); justify-content:flex-start; align-items:center; } .dsl .heading-wrap:where(.w-variant-a51b1ac5-052b-9fd1-bcea-d90382842e72) { text-align:center; justify-content:flex-start; align-items:center; } .dsl .heading-layout { display:inherit; justify-content:inherit; align-items:inherit; flex-direction:inherit; gap:2rem; } .dsl .heading-layout:where(.w-variant-83ec4aab-1b50-df1c-2fbf-473b64d32417), .dsl .heading-layout:where(.w-variant-16a164d5-3d4d-66dc-875b-73ee724013b7) { gap:1.5rem; } .dsl .heading-layout-slot { display:contents; } /* ============================================================ 7. TEXT UTILITIES ============================================================ */ .dsl .text-size-tiny { font-family:var(--_typography---text-t--font-family); font-size:var(--_typography---text-t--font-size); line-height:var(--_typography---text-t--line-height); letter-spacing:var(--_typography---text-t--letter-spacing); } .dsl .text-size-regular { font-family:var(--_typography---text-r--font-family); font-size:var(--_typography---text-r--font-size); line-height:var(--_typography---text-r--line-height); letter-spacing:var(--_typography---text-r--letter-spacing); } .dsl .text-size-regular:where(.w-variant-08474f60-4e63-0d7d-ebbc-a95e91f0702e) { text-decoration:none; } .dsl .text-size-small { font-family:var(--_typography---text-s--font-family); font-size:var(--_typography---text-s--font-size); line-height:var(--_typography---text-s--line-height); letter-spacing:var(--_typography---text-s--letter-spacing); } .dsl .text-size-large { font-family:var(--_typography---text-l--font-family); font-size:var(--_typography---text-l--font-size); line-height:var(--_typography---text-l--line-height); letter-spacing:var(--_typography---text-l--letter-spacing); } .dsl .text-size-medium { font-family:var(--_typography---text-m--font-family); font-size:var(--_typography---text-m--font-size); line-height:var(--_typography---text-m--line-height); letter-spacing:var(--_typography---text-m--letter-spacing); } .dsl .text-size-xlarge { font-family:var(--_typography---text-xl--font-family); font-size:var(--_typography---text-xl--font-size); line-height:var(--_typography---text-r--line-height); letter-spacing:var(--_typography---text-xl--letter-spacing); } .dsl .hero_marquee_text.text-size-tiny.text-weight-medium { white-space:nowrap; } .dsl .hero_marquee_text.text-size-tiny.text-weight-medium:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { background-color:var(--neutral--lightest); outline-color:var(--neutral--lightest); outline-offset:-1px; color:#0000; border-radius:.13rem; outline-width:3px; outline-style:solid; overflow:hidden; } .dsl .blog-card_info-text.text-size-small.text-color-shade-70 { order:-9999; } .dsl .blog-card_info-text.text-size-small.text-color-shade-70:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { color:var(--neutral--black); font-weight:var(--_typography---font-weight--medium); order:9999; } .dsl .accordion_toggle_heading.text-size-medium:where(.w-variant-d30ddc7f-b690-56b6-8c8d-dee3c8bf3f52) { color:var(--shade--60); font-size:var(--_typography---text-s--font-size); font-weight:var(--_typography---font-weight--medium); } .dsl .blog-card_author-text.text-size-small.text-color-shade-70 { order:-9999; } .dsl .blog-card_author-text.text-size-small.text-color-shade-70:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7), .dsl .blog-card_author-text.text-size-small.text-color-shade-70:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530), .dsl .blog-card_author-text.text-size-small.text-color-shade-70:where(.w-variant-6dfb0098-6a8c-4865-d560-24af84bbcf6c) { order:0; } .dsl .text-weight-semibold { font-weight:var(--_typography---font-weight--semibold); } .dsl .text-weight-normal { font-weight:var(--_typography---font-weight--regular); } .dsl .text-weight-medium { font-weight:var(--_typography---font-weight--medium); } .dsl .text-weight-light { font-weight:300; } .dsl .text-weight-xbold { font-weight:800; } .dsl .text-weight-bold { font-weight:700; } .dsl .hero_marquee_text.text-weight-semibold { white-space:nowrap; } .dsl .hero_marquee_text.text-weight-semibold:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { background-color:var(--neutral--lightest); outline-color:var(--neutral--lightest); outline-offset:-2px; color:#0000; border-radius:.13rem; outline-width:5px; outline-style:solid; overflow:hidden; } .dsl .hero_marquee_text.text-weight-semibold.text-color-primary { color:#000; } .dsl .hero_marquee_text.text-weight-semibold.text-color-brand { color:var(--_color-theme---normal); } .dsl .hero_marquee_text.text-weight-semibold.text-color-brand:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { color:#0000; } .dsl .hero_marquee_text.text-size-tiny.text-weight-medium { white-space:nowrap; } .dsl .hero_marquee_text.text-size-tiny.text-weight-medium:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { background-color:var(--neutral--lightest); outline-color:var(--neutral--lightest); outline-offset:-1px; color:#0000; border-radius:.13rem; outline-width:3px; outline-style:solid; overflow:hidden; } .dsl .text-color-primary { color:var(--text-color--text-primary\); } .dsl .text-color-secondary { color:var(--neutral--darkest); } .dsl .text-color-alternate { color:var(--text-color--text-alternate\); } .dsl .text-color-shade-70 { color:var(--shade--70); } .dsl .hero_marquee_text.text-weight-semibold.text-color-primary { color:#000; } .dsl .hero_marquee_text.text-weight-semibold.text-color-brand { color:var(--_color-theme---normal); } .dsl .hero_marquee_text.text-weight-semibold.text-color-brand:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { color:#0000; } .dsl .blog-card_info-text.text-size-small.text-color-shade-70 { order:-9999; } .dsl .blog-card_info-text.text-size-small.text-color-shade-70:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { color:var(--neutral--black); font-weight:var(--_typography---font-weight--medium); order:9999; } .dsl .text-color-neutral-darker { color:var(--neutral--darker); } .dsl .blog-card_author-text.text-size-small.text-color-shade-70 { order:-9999; } .dsl .blog-card_author-text.text-size-small.text-color-shade-70:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7), .dsl .blog-card_author-text.text-size-small.text-color-shade-70:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530), .dsl .blog-card_author-text.text-size-small.text-color-shade-70:where(.w-variant-6dfb0098-6a8c-4865-d560-24af84bbcf6c) { order:0; } .dsl .text-color-shade-40 { color:var(--shade--40); } .dsl .text-color-green { color:var(--_color-theme---normal); --_color-theme---normal:#16895a; --_color-theme---tint--40:color-mix(in srgb,var(--_color-theme---normal)40%,transparent); --_color-theme---tint--80:color-mix(in srgb,var(--_color-theme---normal)80%,transparent); --_color-theme---light:#c7e1cb; --_color-theme---tint--60:color-mix(in srgb,var(--_color-theme---normal)60%,transparent); --_color-theme---dark:#096f45; --_color-theme---lightest:#f7fffa; --_color-theme---lighter:#e7fff1; --_color-theme---darker:#06492a; --_color-theme---darkest:#001d10; --_color-theme---tint--20:color-mix(in srgb,var(--_color-theme---normal)20%,transparent); } .dsl .text-color-brand { color:var(--_color-theme---normal); } /* ============================================================ 8. RICH TEXT BASE (w-richtext) ============================================================ */ .dsl .w-richtext:before, .dsl .w-richtext:after { content:" "; grid-area:1/1/2/2; display:table; } .dsl .w-richtext:after { clear:both; } .dsl .w-richtext[contenteditable=true]:before, .dsl .w-richtext[contenteditable=true]:after { white-space:initial; } .dsl .w-richtext ol, .dsl .w-richtext ul { overflow:hidden; } .dsl .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, .dsl .w-richtext .w-richtext-figure-selected[data-rt-type=video] div:after, .dsl .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, .dsl .w-richtext .w-richtext-figure-selected[data-rt-type=image] div { outline:2px solid #2895f7; } .dsl .w-richtext figure.w-richtext-figure-type-video>div:after, .dsl .w-richtext figure[data-rt-type=video]>div:after { content:""; display:none; position:absolute; inset:0; } .dsl .w-richtext figure { max-width:60%; position:relative; } .dsl .w-richtext figure>div:before { cursor:default!important; } .dsl .w-richtext figure img { width:100%; } .dsl .w-richtext figure figcaption.w-richtext-figcaption-placeholder { opacity:.6; } .dsl .w-richtext figure div { color:#0000; font-size:0; } .dsl .w-richtext figure.w-richtext-figure-type-image, .dsl .w-richtext figure[data-rt-type=image] { display:table; } .dsl .w-richtext figure.w-richtext-figure-type-image>div, .dsl .w-richtext figure[data-rt-type=image]>div { display:inline-block; } .dsl .w-richtext figure.w-richtext-figure-type-image>figcaption, .dsl .w-richtext figure[data-rt-type=image]>figcaption { caption-side:bottom; display:table-caption; } .dsl .w-richtext figure.w-richtext-figure-type-video, .dsl .w-richtext figure[data-rt-type=video] { width:60%; height:0; } .dsl .w-richtext figure.w-richtext-figure-type-video iframe, .dsl .w-richtext figure[data-rt-type=video] iframe { width:100%; height:100%; position:absolute; top:0; left:0; } .dsl .w-richtext figure.w-richtext-figure-type-video>div, .dsl .w-richtext figure[data-rt-type=video]>div { width:100%; } .dsl .w-richtext figure.w-richtext-align-center { clear:both; margin-inline-start:auto; margin-inline-end:auto; } .dsl .w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image>div, .dsl .w-richtext figure.w-richtext-align-center[data-rt-type=image]>div { max-width:100%; } .dsl .w-richtext figure.w-richtext-align-normal { clear:both; } .dsl .w-richtext figure.w-richtext-align-fullwidth { text-align:center; clear:both; width:100%; max-width:100%; margin-inline-start:auto; margin-inline-end:auto; display:block; } .dsl .w-richtext figure.w-richtext-align-fullwidth>div { padding-bottom:inherit; display:inline-block; } .dsl .w-richtext figure.w-richtext-align-fullwidth>figcaption { display:block; } .dsl .w-richtext figure.w-richtext-align-floatleft { float:left; clear:none; margin-inline-end:15px; } .dsl .w-richtext figure.w-richtext-align-floatright { float:right; clear:none; margin-inline-start:15px; } @media screen and (max-width:991px) { .dsl { --_typography---text-r--font-family:var(--_typography---font-family--body-font); --_typography---text-r--font-size:.875rem; --_typography---text-r--line-height:140%; --_typography---font-weight--regular:400; --_typography---text-r--letter-spacing:-.02em; --_typography---h1--letter-spacing:-.02em; --_typography---h2--letter-spacing:-.02em; --_typography---h3--letter-spacing:-.02em; --_typography---h4--letter-spacing:-.02em; --_typography---h5--letter-spacing:-.02em; --_typography---h6--letter-spacing:-.02em; --_typography---font-weight--semibold:600; --_typography---h3--font-family:var(--_typography---font-family--heading-font); --_typography---h3--font-size:1.5rem; --_typography---h2--line-height:130%; --_typography---h3--font-weight:var(--_typography---font-weight--semibold); --_typography---h1--font-family:var(--_typography---font-family--heading-font); --_typography---h1--font-size:2.5rem; --_typography---h1--line-height:120%; --_typography---h1--font-weight:var(--_typography---font-weight--semibold); --_typography---font-weight--medium:500; --_typography---font-family--heading-font:"Plus Jakarta Sans",Arial,sans-serif; --_typography---text-t--font-family:var(--_typography---font-family--body-font); --_typography---text-t--font-size:.75rem; --_typography---text-t--line-height:140%; --_typography---text-t--letter-spacing:-.02em; --_typography---font-family--body-font:Inter,Arial,sans-serif; --_typography---text-s--font-family:var(--_typography---font-family--body-font); --_typography---text-s--font-size:.75rem; --_typography---text-s--line-height:140%; --_typography---text-s--letter-spacing:-.02em; --_typography---h4--font-family:var(--_typography---font-family--heading-font); --_typography---h4--font-size:1.125rem; --_typography---h4--line-height:130%; --_typography---h4--font-weight:var(--_typography---font-weight--semibold); --_typography---h6--font-family:var(--_typography---font-family--heading-font); --_typography---h6--font-size:.875rem; --_typography---h6--line-height:130%; --_typography---h6--font-weight:var(--_typography---font-weight--semibold); --_typography---text-l--font-family:var(--_typography---font-family--body-font); --_typography---text-l--font-size:1.125rem; --_typography---text-l--line-height:140%; --_typography---text-l--letter-spacing:-.02em; --_typography---h2--font-family:var(--_typography---font-family--heading-font); --_typography---h2--font-size:2rem; --_typography---h2--font-weight:var(--_typography---font-weight--semibold); --_typography---h5--font-family:var(--_typography---font-family--heading-font); --_typography---h5--font-size:1rem; --_typography---h5--line-height:130%; --_typography---h5--font-weight:var(--_typography---font-weight--semibold); --_typography---text-m--font-family:var(--_typography---font-family--body-font); --_typography---text-m--font-size:1rem; --_typography---text-m--line-height:140%; --_typography---text-m--letter-spacing:-.02em; --_typography---text-xl--font-family:var(--_typography---font-family--body-font); --_typography---text-xl--font-size:1.25rem; --_typography---text-xl--letter-spacing:-.02em; --_typography---text-xl--line-height:140%; --_typography---h3--line-height:130%; --_sizes---padding-global:2rem; --_sizes---section-padding-large:6rem; --_sizes---section-padding-hero:7rem; --_sizes---padding-section-small:4rem; --_sizes---gap--gap-1:1rem; --_sizes---gap--gap-2:1.75rem; --_sizes---gap--gap-3:2.5rem; --_sizes---gap--gap-4:3rem; --_sizes---gap--gap-5:4rem; --_sizes---gap--gap-6:5rem; --_sizes---gap--gap-1-5:1.25rem; --_sizes---gap--gap-0-5:.5rem; --_sizes---gap--gap-1-25:1.25rem; --_sizes---padding-section-medium:5rem; } } @media screen and (max-width:991px) { .dsl .section.is-hero { padding-top:var(--_sizes---section-padding-hero); } } @media screen and (max-width:767px) { .dsl { --_typography---text-r--font-family:var(--_typography---font-family--body-font); --_typography---text-r--font-size:.875rem; --_typography---text-r--line-height:140%; --_typography---font-weight--regular:400; --_typography---text-r--letter-spacing:-.02em; --_typography---h1--letter-spacing:-.02em; --_typography---h2--letter-spacing:-.02em; --_typography---h3--letter-spacing:-.02em; --_typography---h4--letter-spacing:-.02em; --_typography---h5--letter-spacing:-.02em; --_typography---h6--letter-spacing:-.02em; --_typography---font-weight--semibold:600; --_typography---h3--font-family:var(--_typography---font-family--heading-font); --_typography---h3--font-size:1.5rem; --_typography---h2--line-height:130%; --_typography---h3--font-weight:var(--_typography---font-weight--semibold); --_typography---h1--font-family:var(--_typography---font-family--heading-font); --_typography---h1--font-size:2.5rem; --_typography---h1--line-height:120%; --_typography---h1--font-weight:var(--_typography---font-weight--semibold); --_typography---font-weight--medium:500; --_typography---font-family--heading-font:"Plus Jakarta Sans",Arial,sans-serif; --_typography---text-t--font-family:var(--_typography---font-family--body-font); --_typography---text-t--font-size:.75rem; --_typography---text-t--line-height:140%; --_typography---text-t--letter-spacing:-.02em; --_typography---font-family--body-font:Inter,Arial,sans-serif; --_typography---text-s--font-family:var(--_typography---font-family--body-font); --_typography---text-s--font-size:.75rem; --_typography---text-s--line-height:140%; --_typography---text-s--letter-spacing:-.02em; --_typography---h4--font-family:var(--_typography---font-family--heading-font); --_typography---h4--font-size:1.125rem; --_typography---h4--line-height:130%; --_typography---h4--font-weight:var(--_typography---font-weight--semibold); --_typography---h6--font-family:var(--_typography---font-family--heading-font); --_typography---h6--font-size:.875rem; --_typography---h6--line-height:130%; --_typography---h6--font-weight:var(--_typography---font-weight--semibold); --_typography---text-l--font-family:var(--_typography---font-family--body-font); --_typography---text-l--font-size:1.125rem; --_typography---text-l--line-height:140%; --_typography---text-l--letter-spacing:-.02em; --_typography---h2--font-family:var(--_typography---font-family--heading-font); --_typography---h2--font-size:2rem; --_typography---h2--font-weight:var(--_typography---font-weight--semibold); --_typography---h5--font-family:var(--_typography---font-family--heading-font); --_typography---h5--font-size:1rem; --_typography---h5--line-height:130%; --_typography---h5--font-weight:var(--_typography---font-weight--semibold); --_typography---text-m--font-family:var(--_typography---font-family--body-font); --_typography---text-m--font-size:1rem; --_typography---text-m--line-height:140%; --_typography---text-m--letter-spacing:-.02em; --_typography---text-xl--font-family:var(--_typography---font-family--body-font); --_typography---text-xl--font-size:1.25rem; --_typography---text-xl--letter-spacing:-.02em; --_typography---text-xl--line-height:140%; --_typography---h3--line-height:130%; --_sizes---padding-global:1.5rem; --_sizes---section-padding-large:5rem; --_sizes---section-padding-hero:6rem; --_sizes---padding-section-small:3rem; --_sizes---gap--gap-1:1rem; --_sizes---gap--gap-2:1.5rem; --_sizes---gap--gap-3:2rem; --_sizes---gap--gap-4:2.5rem; --_sizes---gap--gap-5:3rem; --_sizes---gap--gap-6:4rem; --_sizes---gap--gap-1-5:1rem; --_sizes---gap--gap-0-5:.5rem; --_sizes---gap--gap-1-25:1rem; --_sizes---padding-section-medium:4rem; } } @media screen and (max-width:767px) { .dsl h1 { font-size:2.5rem; } } @media screen and (max-width:767px) { .dsl h2 { font-size:2rem; } } @media screen and (max-width:767px) { .dsl h3 { font-size:1.5rem; } } @media screen and (max-width:767px) { .dsl h4 { font-size:1.25rem; } } @media screen and (max-width:767px) { .dsl h5 { font-size:1rem; } } @media screen and (max-width:767px) { .dsl h6 { font-size:.875rem; } } @media screen and (max-width:767px) { .dsl .section.is-tabs { padding-top:6rem; } .dsl .section.is-ai, .dsl .section.is--404 { height:auto; } } @media screen and (max-width:767px) { .dsl .button-group { flex-flow:column; justify-content:flex-start; align-items:stretch; width:100%; } } @media screen and (max-width:767px) { .dsl .heading-wrap:where(.w-variant-c90829ec-bbe2-e452-095a-f62df471d03b) { text-align:center; justify-content:flex-start; align-items:center; } .dsl .heading-wrap:where(.w-variant-a51b1ac5-052b-9fd1-bcea-d90382842e72) { text-align:start; justify-content:flex-start; align-items:flex-start; } .dsl .heading-layout { gap:1.5rem; } .dsl .heading-layout:where(.w-variant-83ec4aab-1b50-df1c-2fbf-473b64d32417), .dsl .heading-layout:where(.w-variant-16a164d5-3d4d-66dc-875b-73ee724013b7) { gap:1rem; } } @media screen and (max-width:767px) { .dsl .text-size-large { font-size:1.25rem; } .dsl .text-size-xlarge { font-size:1.25rem; } .dsl .hero_marquee_text.text-size-tiny.text-weight-medium { font-size:.31rem; } .dsl .hero_marquee_text.text-size-tiny.text-weight-medium:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { outline-width:4px; } } @media screen and (max-width:767px) { .dsl .hero_marquee_text.text-weight-semibold { font-size:.53rem; } .dsl .hero_marquee_text.text-weight-semibold:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b), .dsl .hero_marquee_text.text-weight-semibold.text-color-brand:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { outline-width:5px; } .dsl .hero_marquee_text.text-size-tiny.text-weight-medium { font-size:.31rem; } .dsl .hero_marquee_text.text-size-tiny.text-weight-medium:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { outline-width:4px; } } @media screen and (max-width:767px) { .dsl .hero_marquee_text.text-weight-semibold:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b), .dsl .hero_marquee_text.text-weight-semibold.text-color-brand:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { outline-width:5px; } } @media screen and (max-width:479px) { .dsl { --_typography---text-r--font-family:var(--_typography---font-family--body-font); --_typography---text-r--font-size:.875rem; --_typography---text-r--line-height:140%; --_typography---font-weight--regular:400; --_typography---text-r--letter-spacing:-.02em; --_typography---h1--letter-spacing:-.02em; --_typography---h2--letter-spacing:-.02em; --_typography---h3--letter-spacing:-.02em; --_typography---h4--letter-spacing:-.02em; --_typography---h5--letter-spacing:-.02em; --_typography---h6--letter-spacing:-.02em; --_typography---font-weight--semibold:600; --_typography---h3--font-family:var(--_typography---font-family--heading-font); --_typography---h3--font-size:1.5rem; --_typography---h2--line-height:130%; --_typography---h3--font-weight:var(--_typography---font-weight--semibold); --_typography---h1--font-family:var(--_typography---font-family--heading-font); --_typography---h1--font-size:2.5rem; --_typography---h1--line-height:120%; --_typography---h1--font-weight:var(--_typography---font-weight--semibold); --_typography---font-weight--medium:500; --_typography---font-family--heading-font:"Plus Jakarta Sans",Arial,sans-serif; --_typography---text-t--font-family:var(--_typography---font-family--body-font); --_typography---text-t--font-size:.75rem; --_typography---text-t--line-height:140%; --_typography---text-t--letter-spacing:-.02em; --_typography---font-family--body-font:Inter,Arial,sans-serif; --_typography---text-s--font-family:var(--_typography---font-family--body-font); --_typography---text-s--font-size:.75rem; --_typography---text-s--line-height:140%; --_typography---text-s--letter-spacing:-.02em; --_typography---h4--font-family:var(--_typography---font-family--heading-font); --_typography---h4--font-size:1.125rem; --_typography---h4--line-height:130%; --_typography---h4--font-weight:var(--_typography---font-weight--semibold); --_typography---h6--font-family:var(--_typography---font-family--heading-font); --_typography---h6--font-size:.875rem; --_typography---h6--line-height:130%; --_typography---h6--font-weight:var(--_typography---font-weight--semibold); --_typography---text-l--font-family:var(--_typography---font-family--body-font); --_typography---text-l--font-size:1.125rem; --_typography---text-l--line-height:140%; --_typography---text-l--letter-spacing:-.02em; --_typography---h2--font-family:var(--_typography---font-family--heading-font); --_typography---h2--font-size:2rem; --_typography---h2--font-weight:var(--_typography---font-weight--semibold); --_typography---h5--font-family:var(--_typography---font-family--heading-font); --_typography---h5--font-size:1rem; --_typography---h5--line-height:130%; --_typography---h5--font-weight:var(--_typography---font-weight--semibold); --_typography---text-m--font-family:var(--_typography---font-family--body-font); --_typography---text-m--font-size:1rem; --_typography---text-m--line-height:140%; --_typography---text-m--letter-spacing:-.02em; --_typography---text-xl--font-family:var(--_typography---font-family--body-font); --_typography---text-xl--font-size:1.25rem; --_typography---text-xl--letter-spacing:-.02em; --_typography---text-xl--line-height:140%; --_typography---h3--line-height:130%; --_sizes---padding-global:1rem; --_sizes---section-padding-large:4rem; --_sizes---section-padding-hero:6rem; --_sizes---padding-section-small:2rem; --_sizes---gap--gap-1:1rem; --_sizes---gap--gap-2:1.25rem; --_sizes---gap--gap-3:1.75rem; --_sizes---gap--gap-4:2rem; --_sizes---gap--gap-5:2.5rem; --_sizes---gap--gap-6:3rem; --_sizes---gap--gap-1-5:1rem; --_sizes---gap--gap-0-5:.5rem; --_sizes---gap--gap-1-25:1rem; --_sizes---padding-section-medium:3rem; } } @media screen and (max-width:479px) { .dsl .main-wrapper { overflow:clip; } .dsl .section.is-tabs { padding-top:6.5rem; } } @media screen and (max-width:479px) { .dsl .hero_marquee_text.text-size-tiny.text-weight-medium:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { outline-width:.25rem; } } @media screen and (max-width:479px) { .dsl .hero_marquee_text.text-weight-semibold:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b), .dsl .hero_marquee_text.text-weight-semibold.text-color-brand:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { outline-width:.31rem; } .dsl .hero_marquee_text.text-size-tiny.text-weight-medium:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { outline-width:.25rem; } } @media screen and (max-width:479px) { .dsl .hero_marquee_text.text-weight-semibold:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b), .dsl .hero_marquee_text.text-weight-semibold.text-color-brand:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { outline-width:.31rem; } } /* ==== parity/nav.css ==== */ /* * NAVBAR PARITY CSS - all .mega-nav__* rules extracted verbatim from the * original stylesheets via `node scripts/extract-css.mjs --prefix mega-nav`. * Imported by src/components/layout/Navbar.tsx. */ .dsl .mega-nav__container { padding-top:1rem; padding-inline-end:var(--_sizes---padding-global); padding-bottom:1rem; padding-inline-start:var(--_sizes---padding-global); height:var(--nav-height); justify-content:center; align-items:center; display:flex; } .dsl .mega-nav__card-cta, .dsl .mega-nav__bar-cta { color:#f2f2f2; background-color:#6840ff; border-radius:.25em; justify-content:center; align-items:center; padding:.375em .625em; text-decoration:none; display:flex; } .dsl .mega-nav__bar-cta.is--secondary { color:#6840ff; background-color:#0000; border:1px solid #6840ff; } .dsl .mega-nav__panel-link { grid-column-gap:.75rem; grid-row-gap:.75rem; color:var(--neutral--black); border-radius:.5rem; flex-flow:row; justify-content:flex-start; align-items:center; padding:.5rem; text-decoration:none; display:flex; position:relative; } .dsl .mega-nav__dropdown-inner { grid-template-rows:auto; grid-template-columns:1fr 1fr 1fr 1fr; grid-auto-columns:1fr; place-items:stretch stretch; margin-inline-start:auto; margin-inline-end:auto; display:grid; } .dsl .mega-nav__panel-col { grid-column-gap:1rem; grid-row-gap:1rem; flex-flow:column; flex:1; justify-content:flex-start; align-items:flex-start; display:flex; } .dsl .mega-nav__panel-col.is--colored { background-color:#f7f5ff; } .dsl .mega-nav__panel-col.is--colored.has--card { padding-top:1.5em; padding-bottom:1.5em; } .dsl .mega-nav__panel-col.is-products { border-bottom:1px solid var(--shade--10); padding-top:1.5rem; padding-bottom:1.5rem; padding-inline-end:1.5rem; } .dsl .mega-nav__panel-col.is-bottom { padding-top:1.5rem; padding-bottom:2rem; } .dsl .mega-nav__panel-col.is-video { border-inline-start:1px solid var(--shade--10); padding-top:1.5rem; padding-bottom:2rem; padding-inline-start:1.5rem; } .dsl .mega-nav__panel-col.is-resources { border-inline-end:1px solid var(--shade--10); padding-top:1.5rem; padding-bottom:2rem; padding-inline-end:1.5rem; } .dsl .mega-nav__panel-col.is-tutorial { padding-top:1.5rem; padding-bottom:2rem; padding-inline-start:1.5rem; } .dsl .mega-nav__dropdown-bg { border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:var(--shade--10); background-color:var(--neutral--white); will-change:transform; border-end-end-radius:.25em; border-end-start-radius:.25em; position:absolute; inset:0; } .dsl .mega-nav { z-index:100; position:fixed; top:0; left:0; right:0; } .dsl .mega-nav__card-cta-label { font-size:.9375em; font-weight:500; line-height:1.2; } .dsl .mega-nav__bar-start { justify-content:flex-start; align-items:center; width:100%; max-width:80rem; display:flex; position:relative; } .dsl .mega-nav__burger { grid-column-gap:.2rem; grid-row-gap:.2rem; border-radius:.25em; flex-flow:column; justify-content:center; align-items:center; width:1.5rem; height:1.5rem; padding:0; display:flex; } .dsl .mega-nav__bar-logo { flex:none; width:8.75rem; margin-inline-end:3em; display:flex; } .dsl .mega-nav__backdrop { z-index:0; opacity:0; pointer-events:none; visibility:hidden; background-color:#00000040; position:fixed; inset:0%; } .dsl .mega-nav__bar { z-index:3; width:100%; margin-inline-start:auto; margin-inline-end:auto; position:relative; } .dsl .mega-nav__bar-link-icon { width:1.25em; } .dsl .mega-nav__bar-inner { grid-column-gap:.75em; grid-row-gap:.75em; justify-content:flex-start; align-items:center; width:100%; margin-bottom:0; padding-inline-start:0; list-style:none; display:flex; } .dsl .mega-nav__card { background-color:#fff; border-radius:.5em; flex-flow:column; width:100%; display:flex; overflow:hidden; } .dsl .mega-nav__card-content { grid-column-gap:1.25em; grid-row-gap:1.25em; flex-flow:column; justify-content:flex-start; align-items:flex-start; padding:1.5em; display:flex; } .dsl .mega-nav__panel-link-desc { opacity:.6; font-size:var(--_typography---text-t--font-size); line-height:110%; } .dsl .mega-nav__panel-link-text { color:var(--neutral--black); font-size:var(--_typography---text-s--font-size); line-height:100%; font-weight:var(--_typography---font-weight--medium); display:inline-flex; } .dsl .mega-nav__back { z-index:2; opacity:0; visibility:hidden; position:absolute; left:-.625em; } .dsl .mega-nav__panel-list { grid-column-gap:0px; grid-row-gap:.75rem; flex-flow:column; justify-content:flex-start; align-items:stretch; width:100%; margin-bottom:0; padding:0; list-style:none; display:flex; } .dsl .mega-nav__panel-list._3-column { grid-column-gap:0px; grid-row-gap:.75rem; grid-template-rows:auto; grid-template-columns:1fr 1fr 1fr; grid-auto-columns:1fr; display:grid; } .dsl .mega-nav__panel-list._2-column { grid-column-gap:0px; grid-row-gap:.75rem; grid-template-rows:auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; display:grid; } .dsl .mega-nav__bar-end { grid-column-gap:.75em; grid-row-gap:.75em; justify-content:flex-end; align-items:center; display:none; } .dsl .mega-nav__card-text { grid-column-gap:.125em; grid-row-gap:.125em; flex-flow:column; justify-content:flex-start; align-items:flex-start; display:flex; } .dsl .mega-nav__bar-link-label { font-size:.9375em; font-weight:500; line-height:1.2; } .dsl .mega-nav__dropdown-wrapper { z-index:2; pointer-events:none; width:100%; position:absolute; top:100%; left:0; right:0; } .dsl .mega-nav__card-cta-icon { width:1.25em; } .dsl .mega-nav__card-img { object-fit:cover; width:100%; height:100%; } .dsl .mega-nav__panel-label { color:var(--neutral--light); font-size:var(--_typography---text-s--font-size); line-height:1; font-weight:var(--_typography---font-weight--medium); padding-inline-start:.5rem; } .dsl .mega-nav__bar-link { color:#201d1d; background-color:#0000; border-radius:.25em; justify-content:flex-start; align-items:center; padding:.375em .625em; text-decoration:none; display:flex; } .dsl .mega-nav__bar-list { grid-column-gap:.75em; grid-row-gap:.75em; justify-content:flex-start; align-items:center; margin-bottom:0; margin-inline-start:auto; padding-inline-start:0; list-style:none; display:flex; } .dsl .mega-nav__bar-list.is--actions { margin-inline-start:auto; } .dsl .mega-nav__bar-action { margin-bottom:0; } .dsl .mega-nav__dropdown-panel { width:100%; padding-inline-end:var(--_sizes---padding-global); padding-inline-start:var(--_sizes---padding-global); opacity:0; pointer-events:none; visibility:hidden; max-width:calc(80rem + 2*var(--_sizes---padding-global)); flex-flow:row; justify-content:flex-start; align-items:stretch; margin-inline-start:auto; margin-inline-end:auto; position:absolute; inset:0 0 auto; overflow:visible; } .dsl .mega-nav__dropdown-container { flex-flow:column; justify-content:flex-start; align-items:stretch; width:100%; position:relative; overflow:hidden; } .dsl .mega-nav__card-visual { width:100%; height:16.25em; position:relative; } .dsl .mega-nav__burger-line { z-index:1; background-color:var(--neutral--darkest); border-radius:.125em; flex:none; width:1.25em; height:.125em; padding:0; display:block; position:relative; } .dsl .mega-nav__path-brand { color:var(--_color-theme---normal); } .dsl .mega-nav__path-black { color:var(--neutral--black); } .dsl .mega-nav__bar-list-item, .dsl .mega-nav__panel-item { margin-bottom:0; } .dsl .mega-nav__panel-icon { z-index:2; aspect-ratio:1; border-radius:.5rem; width:2.13rem; height:2.13rem; position:relative; } .dsl .mega-nav__panel-text-wrap { z-index:2; grid-column-gap:.25rem; grid-row-gap:.25rem; flex-flow:column; justify-content:center; align-items:flex-start; display:flex; position:relative; } .dsl .mega-nav__panel-text-wrap.is-video { grid-column-gap:1rem; grid-row-gap:1rem; } .dsl .mega-nav__panel-top-wrap { grid-column-gap:.5rem; grid-row-gap:.5rem; justify-content:flex-start; align-items:center; height:1.13rem; display:flex; } .dsl .mega-nav__bg { border-bottom:1px solid var(--shade--10); background-color:var(--neutral--white); width:100%; height:100%; position:absolute; inset:0%; } .dsl .mega-nav__link-bg { z-index:1; background-color:var(--shade--5); border-radius:inherit; position:absolute; inset:0%; } .dsl .mega-nav__panel-video-link { grid-column-gap:.75rem; grid-row-gap:.75rem; color:var(--neutral--black); text-align:start; cursor:pointer; background-color:#fff0; border-radius:.5rem; flex-flow:column; justify-content:flex-start; align-items:flex-start; padding:.5rem; text-decoration:none; display:flex; position:relative; } .dsl .mega-nav__video-thumbnail { z-index:2; aspect-ratio:214/120; object-fit:cover; border-radius:.5rem; width:100%; position:relative; } .dsl .mega-nav__panel-col:last-of-type { border:none; } /* ---- Webflow grid-placement ids used inside the dropdown panels ---- */ .dsl #w-node-ede124d2-0629-51ba-2d88-16180d086ba1-0d086b9f { grid-area:1/1/2/3; } .dsl #w-node-_40fbd57d-fa62-ddf3-a3b7-9b8af30913a9-0d086b9f { grid-area:1/3/2/5; } .dsl #w-node-_9f377404-b9a0-8429-cde1-9b508fc57a1b-8fc57a19 { grid-area:1/1/2/4; } .dsl #w-node-_9f377404-b9a0-8429-cde1-9b508fc57a43-8fc57a19 { grid-area:1/4/3/5; } .dsl #w-node-_9f377404-b9a0-8429-cde1-9b508fc57a4b-8fc57a19 { grid-area:2/1/3/2; } .dsl #w-node-_9f377404-b9a0-8429-cde1-9b508fc57a53-8fc57a19 { grid-area:2/2/3/3; } .dsl #w-node-eb6dd008-acbb-54c5-c473-90448f6a07e7-8fc57a19 { grid-area:2/3/3/4; } /* ---- runtime attribute rules (from mirror/css/odyn-bundle.css) ---- */ .dsl [data-menu-wrap] { --nav-height: 4.5rem; } .dsl [data-nav-link-bg] { opacity:0; transform:scale(.8); transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1); } .dsl [data-nav-link]:hover [data-nav-link-bg] { opacity:1; transform:scale(1); } @media screen and (max-width:991px) { .dsl .mega-nav__bar-cta { padding:1em .75em 1em 1em; } .dsl .mega-nav__dropdown-inner { flex-flow:column; } .dsl .mega-nav__panel-col { border-bottom:1px solid #0000001a; border-right-style:none; } .dsl .mega-nav__dropdown-bg { display:none; } .dsl .mega-nav { top:0; left:0; right:0; } .dsl .mega-nav__bar-start { justify-content:space-between; align-items:center; } .dsl .mega-nav__burger { background-color:var(--neutral--transparent); } .dsl .mega-nav__backdrop { display:none; } .dsl .mega-nav__bar-link-icon { width:1.5em; } .dsl .mega-nav__bar-link-icon.is--dropdown { transform:rotate(-90deg); } .dsl .mega-nav__bar-inner { padding-inline-end:var(--_sizes---padding-global); padding-bottom:var(--_sizes---padding-global); padding-inline-start:var(--_sizes---padding-global); opacity:0; bottom:0%; left:0%; right:0%; top:var(--nav-height); visibility:hidden; background-color:#fff; flex-flow:column; justify-content:space-between; align-items:center; position:fixed; overflow:auto; } .dsl .mega-nav__bar-end { display:flex; } .dsl .mega-nav__bar-link-label { font-size:1.25em; } .dsl .mega-nav__dropdown-wrapper { z-index:4; bottom:0; top:var(--nav-height); position:fixed; } .dsl .mega-nav__panel-label { width:100%; } .dsl .mega-nav__bar-link { border-bottom:1px solid #0000001a; border-radius:0; width:100%; padding:.75em 0; font-size:1.25em; } .dsl .mega-nav__bar-link.is--dropdown { justify-content:space-between; align-items:center; } .dsl .mega-nav__bar-link.is--back { border-bottom-style:none; font-size:1em; } .dsl .mega-nav__bar-list { grid-column-gap:0em; grid-row-gap:0em; flex-flow:column; justify-content:flex-start; align-items:stretch; width:100%; } .dsl .mega-nav__bar-list.is--actions { grid-column-gap:1em; grid-row-gap:1em; flex-flow:row; justify-content:space-between; align-items:stretch; } .dsl .mega-nav__bar-action { flex-flow:column; flex:1; display:flex; } .dsl .mega-nav__dropdown-panel { background-color:#fff; padding-inline-start:2.5rem; padding-inline-end:2.5rem; bottom:0; overflow:auto; } .dsl .mega-nav__dropdown-container { height:100%; padding-inline-start:0; padding-inline-end:0; overflow:auto; } .dsl .mega-nav__burger-line { background-color:var(--neutral--black); width:1rem; height:.06rem; } } @media screen and (max-width:767px) { .dsl .mega-nav__dropdown-inner { display:flex; } .dsl .mega-nav__panel-col.is-products { padding-bottom:1rem; } .dsl .mega-nav__panel-col.is-bottom { padding-top:1rem; padding-bottom:1rem; padding-inline-end:1.5rem; } .dsl .mega-nav__panel-col.is-video { order:9999; padding:1rem 1.5rem 1.5rem 0; } .dsl .mega-nav__panel-col.is-resources { border-right-style:none; padding-bottom:1rem; } .dsl .mega-nav__panel-col.is-tutorial { padding:1rem 1.5rem 1.5rem 0; } .dsl .mega-nav__panel-list._3-column { grid-row-gap:.5rem; display:flex; } .dsl .mega-nav__panel-list._2-column { display:flex; } .dsl .mega-nav__dropdown-panel { padding-inline-start:1.25rem; padding-inline-end:1.25rem; } } @media screen and (max-width:479px) { .dsl .mega-nav__container { height:var(--nav-height); } .dsl .mega-nav__panel-col.is--colored.has--card { padding:0; } .dsl .mega-nav__panel-col.is-video { border-bottom-style:none; border-left-style:none; } .dsl .mega-nav__card-cta-label { font-size:1em; } .dsl .mega-nav__bar-logo { width:7.5rem; } .dsl .mega-nav__bar-link-icon { width:1.375em; } .dsl .mega-nav__card { border-bottom:1px solid #0000001a; border-radius:0; } .dsl .mega-nav__card-content { padding:1em 1em 1.5em; } .dsl .mega-nav__bar-link-label { font-size:1em; } .dsl .mega-nav__card-cta-icon { width:1.375em; } } /* ==== parity/footer.css ==== */ /* * FOOTER PARITY CSS - all .footer_* rules plus the mobile sticky CTA and the * icon-button component used by the social links, extracted verbatim via * `node scripts/extract-css.mjs`. Imported by src/components/layout/Footer.tsx. */ .dsl .footer_component { padding-inline-end:var(--_sizes---padding-global); padding-inline-start:var(--_sizes---padding-global); background-color:var(--neutral--white); color:var(--neutral--white); background-image:linear-gradient(#fff,#eaf2ff 14%,#5da1ff 42%,#225aea 92%); position:relative; } .dsl .footer_top-wrap { z-index:1; flex-flow:column; justify-content:flex-start; align-items:center; padding-bottom:2rem; display:flex; position:relative; } .dsl .footer_bottom-wrap { z-index:1; padding-top:3rem; padding-bottom:3rem; position:relative; } .dsl .footer_graphic-wrap { aspect-ratio:1440/591; width:100%; max-width:90rem; margin-bottom:0; position:relative; } .dsl .footer_graphic { object-fit:cover; width:136%; max-width:none; height:100%; position:absolute; inset:0% auto auto 50%; transform:translate(-50%); } .dsl .footer_main { grid-column-gap:6rem; grid-row-gap:6rem; grid-template-rows:auto; grid-template-columns:auto 1fr; grid-auto-columns:1fr; justify-content:space-between; align-items:flex-start; display:grid; } .dsl .footer_left { grid-column-gap:1rem; grid-row-gap:1rem; flex-flow:column; justify-content:space-between; align-items:flex-start; height:100%; display:flex; } .dsl .footer_logo-link { flex:none; width:8.75rem; margin-inline-end:3em; display:flex; } .dsl .footer_logo-svg { color:var(--neutral--white); } .dsl .footer_links { grid-column-gap:2.5rem; grid-row-gap:2.5rem; grid-template-rows:auto; grid-template-columns:1fr 1fr 1fr 1fr; grid-auto-columns:1fr; justify-content:space-between; align-items:flex-start; width:100%; display:grid; } .dsl .footer_link-wrap { grid-column-gap:1.5rem; grid-row-gap:1.5rem; flex-flow:column; justify-content:flex-start; align-items:flex-start; display:flex; } .dsl .footer_link-list { margin-top:-.5rem; padding-inline-start:0; } .dsl .footer_link-list-item { margin-bottom:0; padding:0; display:block; } .dsl .footer_main-copy { grid-column-gap:2rem; grid-row-gap:2rem; grid-template-rows:auto; grid-template-columns:1fr 1fr 1fr 1fr; grid-auto-columns:1fr; justify-content:space-between; align-items:flex-start; display:flex; } .dsl .footer_bottom { grid-column-gap:2rem; grid-row-gap:2rem; border-top:1px solid var(--tint--20); grid-template-rows:auto; grid-template-columns:1fr 1fr 1fr; grid-auto-columns:1fr; justify-content:space-between; align-items:center; margin-top:2rem; padding-top:2rem; display:grid; } .dsl .footer_legal-link-list { grid-column-gap:.75rem; grid-row-gap:.75rem; justify-content:flex-end; align-items:center; padding-inline-start:0; display:flex; } .dsl .footer_social-link-list { grid-column-gap:.5rem; grid-row-gap:.5rem; justify-content:center; align-items:center; padding-inline-start:0; display:flex; } .dsl .footer_legal-link { color:var(--tint--80); font-size:var(--_typography---text-s--font-size); white-space:nowrap; text-decoration:none; } .dsl .footer_social-link { aspect-ratio:1; justify-content:center; align-items:center; display:flex; } .dsl .footer_link { color:var(--neutral--white); font-size:var(--_typography---text-s--font-size); line-height:1em; font-weight:var(--_typography---font-weight--medium); white-space:nowrap; justify-content:flex-start; align-items:center; padding-top:.4rem; padding-bottom:.4rem; padding-inline-end:.5rem; text-decoration:none; display:flex; } .dsl .footer_link-icon { aspect-ratio:1; width:1rem; height:1rem; } .dsl .footer_link_text { margin-inline-end:.5rem; } .dsl .footer_info { grid-column-gap:1rem; grid-row-gap:1rem; flex-flow:column; justify-content:flex-start; align-items:flex-start; display:flex; } .dsl .footer_local-list { grid-column-gap:.25rem; grid-row-gap:.25rem; justify-content:flex-start; align-items:center; display:flex; } .dsl .footer_local-item { aspect-ratio:1; } .dsl .footer_local-link { color:#fff; font-weight:var(--_typography---font-weight--medium); text-align:center; text-transform:uppercase; border-radius:.75rem; padding:.75rem; text-decoration:none; transition:all .3s; display:flex; } .dsl .footer_local-link:hover { background-color:var(--tint--20); color:#fff; } .dsl .footer_local-link.w--current { background-color:var(--neutral--white); color:#225aea; } /* ---- mobile sticky CTA (shows after scrolling 75% of viewport height) ---- */ /* original initial state (odyn-bundle.css): */ .dsl [data-mobile-cta] { opacity:0; } .dsl .mobile-cta_wrap { display:none; } /* ---- icon button (footer social links) ---- */ .dsl .button-icon { aspect-ratio:1; background-color:#0000; border-radius:100vw; flex:none; width:2.5rem; height:2.5rem; padding:0; position:relative; overflow:hidden; } .dsl .button-icon:where(.w-variant-4931d0e6-ca0d-ecf9-ed75-d11693d53861) { transform:rotate(180deg); } .dsl .button-icon:where(.w-variant-c6f58bdf-382c-545b-5ad8-a408f18e24f1) { transform:rotate(270deg); } .dsl .button-icon:where(.w-variant-1baa39cb-0f32-5a53-e89d-c274d9581bdc) { transform:rotate(90deg); } .dsl .button-icon.is-left { margin-inline-start:-.5rem; } .dsl .button-icon.is-right { margin-inline-end:-.5rem; } .dsl .button-icon.up { cursor:pointer; transform:rotate(270deg); } .dsl .button-icon.up-2, .dsl .button-icon.up-3, .dsl .button-icon.is-ai, .dsl .button-icon.up-5 { transform:rotate(270deg); } .dsl .button-icon-image { width:1.25rem; height:1.25rem; } .dsl .button-icon-image:where(.w-variant-b4299d21-4819-c16a-138e-f4a00e52accd) { transform:rotate(90deg); } .dsl .button-icon-image:where(.w-variant-07c505cf-5e99-7829-ac2b-73cc2beeaf8a) { transform:rotate(180deg); } .dsl .button-icon-image:where(.w-variant-eccbb6d1-8753-b1d1-4eed-21c1d009c725) { transform:rotate(270deg); } .dsl .button-icon-inner { z-index:2; border-radius:inherit; flex-flow:column; justify-content:center; align-items:center; width:100%; height:100%; display:flex; position:absolute; inset:0%; } .dsl .button-icon-inner-hover { z-index:1; background-color:var(--neutral--lighter); border-radius:inherit; flex-flow:column; justify-content:center; align-items:center; width:100%; height:100%; display:flex; position:absolute; inset:0%; } .dsl .button-icon-inner-hover:where(.w-variant-f15fba09-ef35-2565-7841-7afeef2a4129) { background-color:var(--tint--20); } .dsl .button-icon-inner-hover:where(.w-variant-807c6a51-befe-2ec0-461b-b411f79738ae) { background-color:var(--neutral--transparent); } .dsl .button-icon-inner-hover:where(.w-variant-f1771a2d-db04-0bd2-459a-158acf7d05c6) { background-color:var(--_color-theme---tint--60); } .dsl .button-icon-inner-wrap { z-index:1; background-color:var(--neutral--lightest); border-radius:inherit; width:100%; height:100%; position:absolute; inset:0%; } .dsl .button-icon-inner-wrap:where(.w-variant-f15fba09-ef35-2565-7841-7afeef2a4129) { background-color:var(--tint--10); } .dsl .button-icon-inner-wrap:where(.w-variant-807c6a51-befe-2ec0-461b-b411f79738ae) { background-color:#0000; } .dsl .button-icon-inner-wrap:where(.w-variant-f1771a2d-db04-0bd2-459a-158acf7d05c6) { background-color:var(--neutral--white); background-image:linear-gradient(90deg,var(--_color-theme---light),var(--_color-theme---normal)); } /* ---- runtime attribute rules (from mirror/css/odyn-bundle.css) ---- */ .dsl [data-footer-link] { opacity:.8; transition:opacity .6s cubic-bezier(.34,1.56,.64,1); } .dsl [data-footer-icon] { width:0rem; transition:width .6s cubic-bezier(.34,1.56,.64,1); } .dsl [data-footer-link]:hover { opacity:1; } .dsl [data-footer-link]:hover [data-footer-icon] { width:1rem; } .dsl [data-button-inner=hover] { scale:0; transition:scale .6s cubic-bezier(.34,1.56,.64,1); } .dsl [data-button-image=hover] { translate:-200% 0; transition:translate .6s cubic-bezier(.34,1.56,.64,1); } .dsl [data-button-image=default] { translate:0% 0; transition:translate .6s cubic-bezier(.34,1.56,.64,1); } .dsl [data-button-icon]:hover [data-button-inner=hover] { scale:1; } .dsl [data-button-icon]:hover [data-button-image=hover] { translate:0% 0; } .dsl [data-button-icon]:hover [data-button-image=default] { translate:200% 0; } @media screen and (max-width:991px) { .dsl .footer_main { flex-flow:column; } .dsl .footer_links { grid-column-gap:3rem; grid-row-gap:3rem; flex-flow:column; grid-template-rows:auto auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; display:grid; } .dsl .footer_bottom { flex-flow:column; display:flex; } } @media screen and (max-width:767px) { .dsl .footer_graphic-wrap { aspect-ratio:1440/1200; } .dsl .footer_main { display:flex; } } @media screen and (max-width:767px) { .dsl .mobile-cta_wrap { z-index:20; pointer-events:none; flex-flow:column; justify-content:flex-end; align-items:stretch; display:flex; position:fixed; inset:0%; } .dsl .mobile-cta_button-wrap { padding:var(--_sizes---padding-global); border-top:1px solid var(--shade--5); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); pointer-events:auto; background-color:#fffc; flex-flow:column; display:flex; } } @media screen and (max-width:479px) { .dsl .footer_main { grid-column-gap:3rem; grid-row-gap:3rem; } .dsl .footer_links { grid-column-gap:2rem; grid-row-gap:2rem; display:flex; } } @media screen and (max-width:479px) { .dsl .mobile-cta_wrap { z-index:20; pointer-events:none; flex-flow:column; justify-content:flex-end; align-items:stretch; width:100%; height:100%; display:flex; position:fixed; inset:0%; } } @media screen and (max-width:479px) { .dsl .button-icon.is-ai { width:2rem; height:2rem; } } /* ==== parity/home.css ==== */ /* * HOME page parity CSS. * * Rules extracted verbatim from the mirrored stylesheets via * scripts/extract-css.mjs (dropship-3-0.shared.min.css + odyn-bundle.css), * deduped against parity/shared.css and parity/ui.css. The manual section at * the bottom carries the attribute-selector rules and @keyframes that * extract-css.mjs does not emit (copied verbatim from the same stylesheets). */ .dsl .hero_marquee-wrap { z-index:1; width:100%; max-width:100rem; margin-top:2rem; padding-top:3rem; padding-bottom:3rem; position:relative; overflow:visible; } .dsl .hero_marquee_panel { flex:none; display:flex; overflow:visible; } .dsl .hero_marquee_layout { flex:none; width:100%; display:flex; overflow:clip visible; -webkit-mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000); mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000); container-type:inline-size; } .dsl .hero_marquee_list { grid-column-gap:1.6rem; grid-row-gap:1.6rem; flex:none; justify-content:space-around; min-width:100cqw; padding-inline-end:1.6rem; display:flex; overflow:visible; } .dsl .hero_marquee_item { grid-column-gap:.88rem; grid-row-gap:.88rem; border-top-style:solid; border-top-width:1px; border-top-color:var(--shade--5); border-right-style:solid; border-inline-end-width:1px; border-inline-end-color:var(--shade--5); border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:var(--shade--5); border-left-style:solid; border-inline-start-width:1px; border-inline-start-color:var(--shade--5); background-color:var(--neutral--white); will-change:transform; border-radius:.75rem; flex-flow:row; flex:none; justify-content:center; align-items:stretch; padding:.63rem 1rem .63rem .63rem; display:flex; box-shadow:0 0 24px #0000000d; } .dsl .hero_marquee_item:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { background-color:var(--tint--50); } .dsl .hero_marquee_track { animation-name:hero_marquee-timeline; animation-duration:35s; animation-timing-function:linear; animation-iteration-count:infinite; animation-play-state:var(--play-state,running); will-change:transform; flex:none; animation-direction:reverse; display:flex; overflow:visible; } .dsl .hero_marquee_track:hover { animation-play-state:paused; } .dsl .hero_marquee_track.is-reversed { animation-direction:reverse; } .dsl .hero_marquee_component { grid-column-gap:1rem; grid-row-gap:1rem; pointer-events:auto; flex-flow:column; justify-content:flex-start; align-items:center; display:flex; position:relative; } .dsl .hero_marquee_img-wrap { aspect-ratio:1; background-color:var(--neutral--lightest); border-radius:.75rem; width:3.38rem; height:3.38rem; position:relative; overflow:hidden; } .dsl .hero_marquee_text-wrap { grid-column-gap:.5rem; grid-row-gap:.5rem; flex-flow:column; justify-content:center; align-items:flex-start; display:flex; } .dsl .hero_marquee_text-wrap.is-right { justify-content:center; align-items:flex-end; } .dsl .hero_marquee_img { aspect-ratio:1; width:3.38rem; height:3.38rem; position:absolute; inset:0%; } .dsl .hero_marquee_img:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { opacity:0; } .dsl .hero_marquee_item-line { background-color:var(--shade--5); width:1px; } .dsl .hero_icon-wrap { z-index:2; background-color:var(--neutral--white); width:6.5rem; height:6.5rem; color:var(--neutral--white); cursor:pointer; background-image:linear-gradient(#fff3,#fff0),linear-gradient(90deg,#5f8cff,#225aea); border-radius:2rem; padding:2.5px; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); } .dsl .hero_gradient { z-index:1; filter:blur(8px); pointer-events:none; background-image:linear-gradient(90deg,#225aea33,#225aea00); width:4rem; height:100%; position:absolute; inset:50% auto auto 50%; transform:translateY(-50%); } .dsl .hero_fade { grid-column-gap:0px; grid-row-gap:0px; pointer-events:none; color:#ddecfc; flex-flow:column; justify-content:flex-start; align-items:center; width:90rem; margin-inline-start:auto; margin-inline-end:auto; display:flex; position:absolute; inset:0% auto auto 50%; transform:translate(-50%); } .dsl .hero_fade-block { background-image:linear-gradient(#ddecfc,#fff); width:100vw; height:36rem; margin-inline-start:auto; margin-inline-end:auto; position:absolute; inset:0% auto auto 50%; transform:translate(-50%,151%); } .dsl .hero_marquee_rev_wrap { grid-column-gap:.5rem; grid-row-gap:.5rem; justify-content:flex-start; align-items:center; height:1rem; display:flex; } .dsl .hero_marquee_rev_stat { grid-column-gap:.13rem; grid-row-gap:.13rem; color:var(--_color-theme---normal); background-color:#e2efff; border:1px solid #225aea4d; border-radius:.25rem; justify-content:flex-start; align-items:center; padding:.22rem; font-size:.38rem; line-height:100%; display:flex; } .dsl .hero_marquee_rev_stat:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { border-color:var(--neutral--lightest); background-color:var(--neutral--lightest); color:var(--neutral--lightest); white-space:nowrap; } .dsl .hero_marquee_rev_svg { aspect-ratio:1; width:.4rem; height:.4rem; } /* SEO wave 4a (performance.md P-05): no background-image here. The (HeroSection, srcset + fetchpriority) already paints the wave; a CSS copy on the same element made phones fetch the full 1920 px file (67 KB, High priority) on top of their srcset pick, and became the LCP. */ .dsl .hero_fade_img { width:118rem; max-width:none; height:54.4rem; } /* The second paint of the same wave (HeroSection), stacked exactly on the first. */ .dsl .hero_fade_img--twin { position:absolute; top:0; left:50%; transform:translateX(-50%); } .dsl .hero_icon-inner { aspect-ratio:1; background-color:var(--neutral--white); background-image:linear-gradient(90deg,#5f8cff,#225aea); border-radius:1.88rem; flex-flow:column; justify-content:center; align-items:center; width:100%; max-width:none; height:100%; display:flex; position:relative; } .dsl .hero_icon-svg { aspect-ratio:1; justify-content:center; align-items:center; width:4rem; height:4rem; display:flex; } .dsl .hero_marquee_component:has(input:not(:checked)) { --play-state: paused; --checked: 0; } .dsl .hero_marquee_track { animation-play-state:running!important; } .dsl .hero_marquee_component, .dsl .hero_marquee_layout, .dsl .hero_marquee_track, .dsl .hero_marquee_panel, .dsl .hero_marquee_list { overflow:visible; } .dsl .hero_marquee_layout { padding-top:120px; padding-bottom:120px; margin-top:-120px; margin-bottom:-120px; } .dsl .z-index-2 { z-index:2; position:relative; } .dsl .text-style-3lines { margin-top:-.2em; margin-bottom:-.2em; padding-top:.2em; padding-bottom:.2em; } .dsl .button-icon.up-2, .dsl .button-icon.up-3, .dsl .button-icon.is-ai, .dsl .button-icon.up-5 { transform:rotate(270deg); } .dsl .text-block { font-size:.45rem; } .dsl .layout-block { flex-flow:column; display:flex; } .dsl .layout-block.row-gap-6 { grid-template-rows:auto auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; } .dsl .row-gap-3 { grid-row-gap:var(--_sizes---gap--gap-3); } .dsl .row-gap-6 { grid-row-gap:var(--_sizes---gap--gap-6); grid-template-rows:auto auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; } .dsl .blog-card_paragraph.text-style-3lines:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { order:9999; } .dsl .radius-1 { border-radius:1rem; } .dsl .blog-post_nav-wrap.hide-mobile-landscape { grid-column-gap:2.5rem; grid-row-gap:2.5rem; flex-flow:column; display:flex; } .dsl .eyebrow-wrap { background-color:var(--neutral--white); font-size:var(--_typography---text-s--font-size); font-weight:var(--_typography---font-weight--medium); border-radius:100vw; text-decoration:none; overflow:hidden; } .dsl .eyebrow-link { grid-column-gap:.5rem; grid-row-gap:.5rem; border-top-style:solid; border-top-width:1px; border-top-color:var(--shade--10); border-right-style:solid; border-inline-end-width:1px; border-inline-end-color:var(--shade--10); border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:var(--shade--10); border-left-style:solid; border-inline-start-width:1px; border-inline-start-color:var(--shade--10); border-radius:inherit; justify-content:center; align-items:stretch; height:2rem; padding:.5rem 1rem; display:flex; overflow:hidden; } .dsl .eyebrow-link:where(.w-variant-5cc903c3-7eeb-df69-35a2-7a9bdd32534c) { padding-inline-end:.5rem; text-decoration:none; } .dsl .eyebrow-link:where(.w-variant-f1d370bc-061a-7131-e7fb-1a9766b5bd86) { grid-column-gap:.4rem; grid-row-gap:.4rem; } .dsl .eyebrow-text { color:var(--neutral--black); align-self:center; } .dsl .eyebrow-line { background-color:var(--shade--10); width:1px; } .dsl .eyebrow-link-text-wrap { grid-column-gap:.25rem; grid-row-gap:.25rem; color:var(--_color-theme---normal); justify-content:flex-start; align-items:center; display:flex; } .dsl .eyebrow-icon:where(.w-variant-5cc903c3-7eeb-df69-35a2-7a9bdd32534c) { aspect-ratio:1; width:1.2rem; height:1.2rem; position:absolute; inset:0%; } .dsl .eyebrow-link-icon-wrap:where(.w-variant-5cc903c3-7eeb-df69-35a2-7a9bdd32534c) { aspect-ratio:1; width:1.2rem; height:1.2rem; position:relative; overflow:hidden; } .dsl .eyebrow-icon-static { margin-inline-start:-.5rem; } .dsl .eyebrow-icon-static:where(.w-variant-f1d370bc-061a-7131-e7fb-1a9766b5bd86) { margin-inline-start:-.25rem; } .dsl .home-tab-wrap { z-index:100; pointer-events:none; justify-content:center; align-items:flex-end; margin-inline-start:auto; margin-inline-end:auto; display:flex; } .dsl .home-tab-list { background-color:var(--tint--40); border-radius:1rem; flex-flow:row; justify-content:center; align-items:flex-end; height:4rem; padding:0; display:flex; } .dsl .home-tab-item { background-color:#fff0; justify-content:center; align-items:center; width:4rem; margin-bottom:0; transition:width .5s cubic-bezier(.16,1,.3,1); display:flex; position:relative; } .dsl .home-tab-item__link { z-index:1; pointer-events:auto; background-color:#0000; justify-content:center; align-items:center; width:100%; height:100%; padding:.38rem; display:flex; position:relative; } .dsl .home-tab-link-image { pointer-events:none; object-fit:contain; width:100%; } .dsl .home-tab-item__tooltip { z-index:0; background-color:var(--neutral--white); opacity:0; font-size:var(--_typography---text-s--font-size); font-weight:var(--_typography---font-weight--medium); white-space:nowrap; border-radius:.5rem; padding:.25rem .63rem; transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1); position:absolute; top:0; transform:translateY(-80%); } .dsl .home-tab_wrap { grid-column-gap:3rem; grid-row-gap:3rem; border:1px solid var(--shade--5); background-color:var(--tint--50); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); border-radius:1rem; flex-flow:column; justify-content:center; align-items:stretch; width:100%; padding:3rem 4rem; display:flex; overflow:hidden; } .dsl .home-tab_content-top { grid-column-gap:3rem; grid-row-gap:3rem; grid-template-rows:auto; grid-template-columns:1fr 1fr 1fr; grid-auto-columns:1fr; justify-content:center; place-items:start stretch; width:100%; display:grid; } .dsl .home-tab_content-bottom { grid-column-gap:3rem; grid-row-gap:3rem; grid-template-rows:auto; grid-template-columns:1fr 1fr 1fr; grid-auto-columns:1fr; justify-content:center; align-items:flex-start; width:100%; display:grid; } .dsl .home-tab_content-wrap { grid-column-gap:2rem; grid-row-gap:2rem; flex-flow:column; justify-content:flex-start; align-items:flex-start; width:100%; height:100%; display:flex; } .dsl .home-tab_image-wrap { aspect-ratio:715/493; position:relative; } .dsl .home-tab_image { aspect-ratio:1272/795; border:1px solid var(--neutral--lightest); object-fit:cover; border-radius:1rem; max-width:none; height:100%; position:absolute; inset:0%; } .dsl .home-tab-link-slot { width:100%; height:100%; display:contents; } .dsl .home-tab_icon { aspect-ratio:1; width:3rem; height:3rem; } .dsl .home-tab_text-wrap { grid-column-gap:1rem; grid-row-gap:1rem; flex-flow:column; justify-content:flex-start; align-items:flex-start; display:flex; } .dsl .home-tab_heading-wrap { grid-column-gap:.5rem; grid-row-gap:.5rem; justify-content:flex-start; align-items:center; display:flex; } .dsl .home-tab_info-wrap { grid-column-gap:1rem; grid-row-gap:1rem; flex-flow:column; justify-content:flex-start; align-items:flex-start; width:100%; display:flex; } .dsl .home-tab_component { grid-column-gap:6rem; grid-row-gap:6rem; flex-flow:column; display:flex; } .dsl .home-tab-list { display:flex; align-items:flex-end; } .dsl .home-tab-item { transform-origin:bottom center; } .dsl .home-tab-item.sibling-far { width:4rem; } .dsl .home-tab-item.sibling-close { width:5rem; } .dsl .home-tab-item.hover, .dsl .home-tab-item.active { width:6rem; } .dsl .home-tab-item:hover .home-tab-item__tooltip, .dsl .home-tab-item.active .home-tab-item__tooltip { opacity:1; transform:translateY(-120%); } .dsl .home-tab-item__tooltip:after { content:""; position:absolute; bottom:-4px; left:50%; transform:translate(-50%) rotate(45deg); width:8px; height:8px; background-color:inherit; } .dsl .tab-wrap { grid-column-gap:1.5rem; grid-row-gap:1.5rem; flex-flow:column; width:100%; padding-bottom:0; padding-inline-end:0; display:flex; } .dsl .tab-wrap:where(.w-variant-3edf8d18-0b4f-c1d5-3856-fe89640c69bc) { grid-column-gap:2rem; grid-row-gap:2rem; } .dsl .tab-wrap:where(.w-variant-3bfed3cb-a923-1eeb-8f90-77d409f5f757) { grid-column-gap:0rem; grid-row-gap:0rem; grid-template-rows:auto; grid-template-columns:1.25fr 4fr; grid-auto-columns:1fr; display:grid; } .dsl .tab-nav-wrap { flex-flow:column; justify-content:center; align-items:center; display:flex; } .dsl .tab-nav-wrap:where(.w-variant-3bfed3cb-a923-1eeb-8f90-77d409f5f757) { justify-content:flex-end; align-items:flex-start; padding-bottom:1.5rem; display:flex; } .dsl .tab-content-wrap { width:100%; position:relative; } .dsl .tab-content-wrap:where(.w-variant-3bfed3cb-a923-1eeb-8f90-77d409f5f757) { grid-template-rows:auto auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; display:block; } .dsl .tab-nav-slot, .dsl .tab-content-slot { display:contents; } .dsl .grid { grid-template-rows:1fr; grid-auto-columns:1fr; grid-template-columns:repeat(var(--grid-column-desktop),1fr); grid-column-gap:calc(var(--grid-gap-column)*1rem); grid-row-gap:calc(var(--grid-gap-row)*1rem); width:100%; height:100%; display:grid; } .dsl .grid.grid-coloumn-2 { grid-template-columns:1fr 1fr; } .dsl .image-wrap { aspect-ratio:16/9; object-fit:cover; width:100%; height:100%; position:relative; overflow:clip; } .dsl .image-wrap:where(.w-variant-b2e479d2-76e4-cb3d-3715-048a9f86b88b) { aspect-ratio:3/2; } .dsl .image-wrap:where(.w-variant-06197415-7d35-23c6-3b79-0d4a1c956cc2) { aspect-ratio:1; } .dsl .image-wrap:where(.w-variant-5014a728-6c4c-42a7-cd54-bf3673c3f414) { aspect-ratio:auto; object-fit:contain; object-position:50% 0%; width:100cqw; height:15.5rem; margin-bottom:-1.5rem; margin-inline-start:-1.5rem; } .dsl .image-wrap:where(.w-variant-7cee255d-2600-f26a-9ccb-0470d2ed514c) { aspect-ratio:auto; object-fit:contain; object-position:50% 0%; width:100cqw; height:25rem; margin-bottom:-3rem; margin-inline-start:-3rem; } .dsl .image-wrap:where(.w-variant-831477bf-658a-9e42-6aba-e34f3b8ccc75) { aspect-ratio:584/400; object-fit:contain; object-position:50% 0%; width:100cqw; margin-bottom:-3rem; margin-inline-start:-3rem; } .dsl .image-wrap:where(.w-variant-04420357-ce06-808b-d126-3982cf7d69cf) { aspect-ratio:384/248; object-fit:contain; object-position:50% 0%; width:100cqw; margin-bottom:-1.5rem; margin-inline-start:-1.5rem; } .dsl .image-wrap:where(.w-variant-112cbfcb-a1f7-ba75-d4d6-f886ddd4fe82) { aspect-ratio:944/590; } .dsl .image-wrap:where(.w-variant-994c10bf-3fbf-3351-c215-70547a031307) { aspect-ratio:2.39; object-fit:contain; } .dsl .image { object-fit:inherit; width:100%; height:100%; position:absolute; inset:0%; } .dsl .slider_item { border-radius:1rem; } .dsl .slider_item.swiper-slide { flex:none; justify-content:flex-start; align-items:flex-start; width:27.5%; min-width:min(12rem,90%); padding-inline-start:.5rem; padding-inline-end:.5rem; display:flex; } .dsl .icon-wrap { aspect-ratio:1; object-fit:cover; width:1rem; max-width:none; height:1rem; position:relative; } .dsl .icon-wrap:where(.w-variant-6376e298-0878-6bec-92b5-b6d163b20579) { width:1.5rem; height:1.5rem; } .dsl .icon-wrap:where(.w-variant-a56152a4-aef1-e6bf-1b29-1a064f3d1908) { width:1.25rem; height:1.25rem; } .dsl .icon-wrap:where(.w-variant-7c968c8a-7cd2-bf02-6630-e887aa0ea528) { width:2rem; height:2rem; } .dsl .icon-wrap:where(.w-variant-13d0214e-3153-eff5-302f-1345da82c8e7) { width:3rem; height:3rem; } .dsl .icon-wrap:where(.w-variant-49ec1022-d254-6b06-9c85-b646514142ff) { width:4rem; height:4rem; } .dsl .icon-wrap:where(.w-variant-59aadbd8-a8fd-640f-789c-c22e3d29713b) { width:5rem; height:5rem; } .dsl .icon-wrap:where(.w-variant-f1d370bc-061a-7131-e7fb-1a9766b5bd86) { width:auto; height:100%; } .dsl .icon-image { border-radius:inherit; width:100%; height:100%; position:absolute; inset:0%; } .dsl .icon-image:where(.w-variant-a56152a4-aef1-e6bf-1b29-1a064f3d1908) { border-radius:inherit; } .dsl .grid-slot { display:contents; } .dsl .card-header-wrap:where(.w-variant-4ec444d4-5d12-e5d0-3038-4dcda7d82000) { z-index:1; } .dsl .card-heading-wrap { grid-column-gap:.5rem; grid-row-gap:.5rem; justify-content:flex-start; align-items:center; margin-bottom:1.5rem; display:flex; } .dsl .card-heading-wrap:where(.w-variant-11e1bb60-3492-96b4-bf46-75e70844ed40), .dsl .card-heading-wrap:where(.w-variant-4ec444d4-5d12-e5d0-3038-4dcda7d82000), .dsl .card-heading-wrap:where(.w-variant-40d65a7b-64ef-8ef2-f998-fd0b3fc245aa) { margin-bottom:1rem; } .dsl .card-heading-icon { aspect-ratio:1; width:1.5rem; height:1.5rem; } .dsl .card-heading-icon:where(.w-variant-40d65a7b-64ef-8ef2-f998-fd0b3fc245aa) { width:1.25rem; height:1.25rem; } .dsl .card-heading-button-wrap { margin-top:.75rem; } .dsl .card-backround { z-index:1; background-color:var(--_color-theme---lightest); border:1px #a7a7a70d; width:100%; height:100%; position:absolute; inset:1px; } .dsl .card-backround:where(.w-variant-29b9d662-a95a-89b6-445b-485167854fe4) { background-color:var(--neutral--white); } .dsl .card-backround:where(.w-variant-bf92d758-1b02-e98a-4b96-35d84a3340b4) { background-color:var(--neutral--transparent); } .dsl .card-backround:where(.w-variant-95fcc25e-7d40-f121-3c94-2cef4a5867b2) { background-color:#0000; border-style:none; border-radius:0; } .dsl .card-backround:where(.w-variant-2bdbe395-60f3-a8be-780a-cc4fa2a4f13d) { background-image:radial-gradient(circle at 50% 74%,#1448cb1a,#1448cb00 53%); } .dsl .card-padding-wrap { padding:3rem; position:relative; overflow:visible; } .dsl .card-padding-wrap:where(.w-variant-131fa725-38c5-39f3-fe71-968fe3df6cdd) { padding:1.5rem; } .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { border-radius:0; padding:0; } .dsl .card-padding-wrap:where(.w-variant-1e04679b-90d3-3f94-de5e-768fe9efbb99) { border-radius:inherit; } .dsl .card-layout-slot { display:contents; } .dsl .card-brackground-slot { z-index:0; width:100%; height:100%; position:absolute; inset:0%; } .dsl .card-layout { z-index:1; grid-column-gap:1.5rem; grid-row-gap:1.5rem; flex-flow:column; display:flex; position:relative; } .dsl .card-layout:where(.w-variant-2c0f791f-3417-1664-9eea-732bfcbbcb13) { flex-flow:column-reverse; } .dsl .card-layout:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e) { grid-column-gap:1.5rem; grid-row-gap:1.5rem; flex-flow:row; grid-template-rows:auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; grid-auto-flow:dense; place-items:center stretch; display:grid; } .dsl .card-layout:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4) { grid-column-gap:1.5rem; grid-row-gap:1.5rem; flex-flow:row-reverse; grid-template-rows:auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; grid-auto-flow:row; place-items:center stretch; display:grid; } .dsl .card-heading-slot { display:contents; } .dsl .card-heading-slot:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e), .dsl .card-heading-slot:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4) { display:block; } .dsl .card-image-slot { display:contents; } .dsl .card-image-slot:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e), .dsl .card-image-slot:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4) { display:block; } .dsl .card-wrap { width:100%; overflow:hidden; container-type:inline-size; } .dsl .card-wrap:where(.w-variant-a32d14e0-7c09-319f-9f75-f08b3a300d97) { overflow:visible; } .dsl .card-styles { display:block; position:fixed; inset:0% auto auto 0%; } .dsl .card-heading-icon-wrap { justify-content:flex-start; align-items:center; margin-bottom:1.5rem; display:flex; } .dsl .ai-component { flex-flow:column; justify-content:center; align-items:center; padding-top:9rem; padding-bottom:9rem; display:flex; overflow:hidden; } .dsl .ai_search-wrap { width:100%; max-width:48rem; box-shadow:0 0 84px 0 var(--_color-theme---lighter); background-image:linear-gradient(#94b2ff99,#1448cb99); border-radius:100vw; padding:.06rem; } .dsl .ai_search-inner { grid-column-gap:.75rem; grid-row-gap:.75rem; background-color:var(--neutral--white); border-radius:inherit; justify-content:space-between; align-items:center; padding:.75rem; display:flex; } .dsl .ai_text-wrap { width:100%; } .dsl .ai_looping-words { height:2.5rem; position:relative; } .dsl .ai_looping-words-container { justify-content:flex-start; align-items:center; width:100%; height:100%; display:flex; position:relative; overflow:visible; } .dsl .ai_looping-words_list { color:var(--neutral--light); white-space:nowrap; flex-flow:column; flex:none; justify-content:center; align-items:flex-start; margin-top:0; margin-bottom:0; padding-inline-start:0; list-style:none; display:flex; position:relative; } .dsl .ai_looping-words-text { font-size:var(--_typography---text-m--font-size); line-height:4rem; font-weight:var(--_typography---font-weight--medium); flex:1; margin-bottom:0; } .dsl .ai_looping-words_item { color:var(--neutral--light); white-space:nowrap; flex-flow:column; flex:none; justify-content:center; align-items:flex-start; margin-top:0; margin-bottom:0; padding-inline-start:0; list-style:none; display:flex; position:relative; } .dsl .background { z-index:0; background-color:var(--neutral--white); background-image:linear-gradient(180deg,var(--_color-theme---lightest),var(--_color-theme---lighter)); position:absolute; inset:0%; } .dsl .background:where(.w-variant-94d7e812-2414-b71f-ac81-3b1e0e7af312) { background-image:linear-gradient(0deg,var(--_color-theme---lightest),var(--_color-theme---lighter)); } .dsl .background:where(.w-variant-1e2fa4c7-612f-78c4-a972-01cd0e0ad45b), .dsl .background:where(.w-variant-c48d80d6-30d2-48cf-95e2-5c47d84bbd2e) { background-image:none; } .dsl .background:where(.w-variant-fb5203e7-cb23-c031-61bf-b9c5d4b88d1a) { background-image:linear-gradient(0deg,var(--neutral--white),var(--_color-theme---lightest)); } .dsl .background:where(.w-variant-e6394aa5-9f5b-e9e6-a65f-0db9913b62cb) { background-color:var(--_color-theme---lightest); background-image:none; } .dsl .background:where(.w-variant-c919b1d0-ac42-0cca-a987-0a75a52e0427) { background-image:linear-gradient(180deg,var(--neutral--white),var(--_color-theme---lightest)); } .dsl .background:where(.w-variant-0eec946e-a1fb-dbd0-00c6-9e70fbd1a74b) { background-image:none; } .dsl .background-wrap { z-index:0; pointer-events:none; width:100%; height:100%; position:absolute; inset:0%; } .dsl .background-wrap:where(.w-variant-c18e3fde-4f6d-935c-29d3-6f62f8a5ada8), .dsl .background-wrap:where(.w-variant-0eec946e-a1fb-dbd0-00c6-9e70fbd1a74b) { pointer-events:none; } .dsl .background_image_wrap:where(.w-variant-c18e3fde-4f6d-935c-29d3-6f62f8a5ada8), .dsl .background_image_wrap:where(.w-variant-0eec946e-a1fb-dbd0-00c6-9e70fbd1a74b) { aspect-ratio:144/90; width:100%; max-width:90rem; height:100%; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); } .dsl .background_image:where(.w-variant-c18e3fde-4f6d-935c-29d3-6f62f8a5ada8), .dsl .background_image:where(.w-variant-0eec946e-a1fb-dbd0-00c6-9e70fbd1a74b) { z-index:1; object-fit:cover; width:90rem; max-width:none; height:100%; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); } .dsl .background_image_fade:where(.w-variant-c18e3fde-4f6d-935c-29d3-6f62f8a5ada8), .dsl .background_image_fade:where(.w-variant-0eec946e-a1fb-dbd0-00c6-9e70fbd1a74b) { z-index:2; background-image:linear-gradient(90deg,#fff0,#fff); width:5rem; } .dsl .background_image_fade.is-left:where(.w-variant-c18e3fde-4f6d-935c-29d3-6f62f8a5ada8), .dsl .background_image_fade.is-left:where(.w-variant-0eec946e-a1fb-dbd0-00c6-9e70fbd1a74b) { background-image:linear-gradient(270deg,#fff0,#fff); } .dsl .background_image_fade_wrap:where(.w-variant-c18e3fde-4f6d-935c-29d3-6f62f8a5ada8), .dsl .background_image_fade_wrap:where(.w-variant-0eec946e-a1fb-dbd0-00c6-9e70fbd1a74b) { z-index:2; aspect-ratio:144/90; justify-content:space-between; align-items:stretch; width:90rem; height:100%; display:flex; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); } .dsl .extention_visual-wrap { aspect-ratio:30/24; perspective:2000px; perspective-origin:50%; width:100%; max-width:21.25rem; margin-inline-start:auto; margin-inline-end:auto; position:relative; } .dsl .extention_file-bg { z-index:0; aspect-ratio:30/24; outline-offset:-2px; width:90%; transform-style:preserve-3d; background-image:linear-gradient(#397eff,#4589ff 32%,#bbd8ff); border-radius:2rem; outline:.13rem solid #ffffff4d; position:absolute; inset:0% auto auto 50%; transform:translate(-50%)rotateX(-10deg)rotateY(0)rotate(0); box-shadow:inset 0 7px 13px #ffffff40; } .dsl .extention_icon { z-index:1; aspect-ratio:1; -webkit-backdrop-filter:drop-shadow(0 8px 20px #00000026); backdrop-filter:drop-shadow(0 8px 20px #00000026); width:50%; position:absolute; inset:30% auto auto 35%; transform:rotate(30deg)translate(-50%,-50%); } .dsl .extention_file-fg { z-index:2; aspect-ratio:30/24; -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); outline-offset:-2px; width:100%; transform-style:preserve-3d; background-color:#ffffff1a; border-radius:2rem; outline:.13rem solid #fff6; position:absolute; inset:0%; transform:rotateX(-40deg)rotateY(0)rotate(0)translateY(16%); box-shadow:inset 0 5px 5px #81b6ff33; } .dsl .extension_bg { background-color:var(--neutral--white); pointer-events:none; background-image:linear-gradient(#f9fcff,#d9e2ff 70%,#fff 75%); justify-content:center; align-items:stretch; max-width:80rem; margin-inline-start:auto; margin-inline-end:auto; display:flex; position:absolute; inset:0%; } .dsl .extension-curve { background-color:var(--neutral--white); width:100%; height:100%; } .dsl .extension-curve.is-left { border-start-end-radius:100%; } .dsl .extension-curve.is-right { border-start-start-radius:100%; } .dsl .globe-wrapper { width:100%; } .dsl .globe-gradient { background-image:linear-gradient(0deg,var(--neutral--white),#fff0); height:25%; position:absolute; inset:auto 0% 0%; } .dsl .jb-marker { grid-column-gap:4px; grid-row-gap:4px; opacity:0; pointer-events:none; will-change:transform,opacity; flex-direction:column; align-items:center; display:flex; position:absolute; /* The pin dot — not the bottom of the label+pin column — marks the city. The pin box is 20px tall and last in the column, so the dot sits 10px above the box bottom: shift the anchor down by that 10px, and put transform-origin ON the dot so the pop animation's scale() cannot drag it off the map. */ transform-origin:50% calc(100% - 10px); transform:translate(-50%,calc(-100% + 10px))scale(.6); } .dsl .jb-marker.jb-vis { animation:.45s cubic-bezier(.34,1.56,.64,1) forwards jbPopIn; } .dsl .jb-marker.jb-hid { animation:.25s ease-in forwards jbPopOut; } .dsl .jb-marker .jb-label { background:#fff; border:1px solid rgba(147,197,253,.5); border-radius:5px; padding:3px 8px; font-size:11.5px; font-weight:600; color:#1d4ed8; white-space:nowrap; letter-spacing:-.01em; } .dsl .jb-marker .jb-pin { position:relative; width:20px; height:20px; display:flex; align-items:center; justify-content:center; } .dsl .jb-marker .jb-core { width:5px; height:5px; background:#2563eb; border-radius:50%; position:absolute; z-index:2; } .dsl .jb-marker .jb-ring { position:absolute; width:14px; height:14px; border:1.5px solid rgba(37,99,235,.55); border-radius:50%; animation:jbRipple 2.8s ease-out infinite; } .dsl .jb-marker .jb-ring-2 { animation-delay:1.1s; } .dsl .featured-blog_list-wrap, .dsl .featured-blog_list { display:contents; } .dsl .featured-blog_list.is-list { grid-column-gap:1rem; grid-row-gap:1rem; flex-flow:column; display:flex; } .dsl .featured-blog_item { z-index:2; } .dsl .featured-blog_grid { grid-column-gap:3rem; grid-row-gap:0rem; grid-template-rows:auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; place-items:start stretch; display:grid; position:relative; } .dsl .blog-card { z-index:5; grid-column-gap:2rem; grid-row-gap:2rem; border-radius:1rem; flex-flow:column; padding:1.5rem; display:flex; position:relative; } .dsl .blog-card:where(.w-variant-9ebd43c4-42d1-c87f-b86c-a525c2b5dccb) { border-radius:.75rem; padding:.75rem; } .dsl .blog-card:where(.w-variant-6dfb0098-6a8c-4865-d560-24af84bbcf6c) { background-color:var(--_color-theme---lightest); } .dsl .blog-card:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530) { grid-column-gap:2rem; grid-row-gap:2rem; border-radius:0; grid-template-rows:auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; padding:0; display:grid; } .dsl .blog-card:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { grid-column-gap:2rem; grid-row-gap:2rem; border-radius:0; flex-flow:column; grid-template-rows:auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; padding:0; display:flex; } .dsl .blog-card:hover:where(.w-variant-6dfb0098-6a8c-4865-d560-24af84bbcf6c) { background-color:var(--_color-theme---lightest); } .dsl .blog-card_img-wrap { aspect-ratio:536/432; pointer-events:none; border-radius:.75rem; position:relative; overflow:hidden; } .dsl .blog-card_img-wrap:where(.w-variant-6dfb0098-6a8c-4865-d560-24af84bbcf6c) { aspect-ratio:552/224; } .dsl .blog-card_img-wrap:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530) { aspect-ratio:3/2; pointer-events:auto; } .dsl .blog-card_img-wrap:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { aspect-ratio:736/395; pointer-events:auto; } .dsl .blog-card_img { object-fit:cover; width:100%; height:100%; position:absolute; inset:0%; } .dsl .blog-card_img:where(.w-variant-6dfb0098-6a8c-4865-d560-24af84bbcf6c) { object-position:50% 100%; } .dsl .blog-card_img:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530), .dsl .blog-card_img:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { object-position:50% 50%; } .dsl .blog-card_content-wrap { flex-flow:column; justify-content:flex-start; align-items:flex-start; display:flex; } .dsl .blog-card_content-wrap:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530), .dsl .blog-card_content-wrap:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { order:-9999; justify-content:center; align-items:flex-start; } .dsl .blog-card_heading { font-family:var(--_typography---text-l--font-family); font-size:var(--_typography---text-l--font-size); font-weight:var(--_typography---font-weight--medium); margin-top:1.25rem; margin-bottom:1.5rem; } .dsl .blog-card_heading:where(.w-variant-9ebd43c4-42d1-c87f-b86c-a525c2b5dccb) { font-size:var(--_typography---text-m--font-size); margin-top:.75rem; margin-bottom:1rem; } .dsl .blog-card_heading:where(.w-variant-6dfb0098-6a8c-4865-d560-24af84bbcf6c) { margin-top:.75rem; margin-bottom:1rem; } .dsl .blog-card_heading:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530) { max-width:25ch; font-family:var(--_typography---h3--font-family); font-size:var(--_typography---h3--font-size); line-height:var(--_typography---h3--line-height); font-weight:var(--_typography---font-weight--semibold); letter-spacing:var(--_typography---h3--letter-spacing); margin-top:.75rem; margin-bottom:1.25rem; } .dsl .blog-card_heading:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { font-family:var(--_typography---h3--font-family); font-size:var(--_typography---h4--font-size); line-height:var(--_typography---h3--line-height); font-weight:var(--_typography---font-weight--semibold); letter-spacing:var(--_typography---h3--letter-spacing); order:-9999; margin-top:0; margin-bottom:1rem; } .dsl .blog-card_btn-wrap { z-index:2; order:9999; margin-top:.75rem; position:relative; } .dsl .blog-card_btn-wrap:where(.w-variant-6dfb0098-6a8c-4865-d560-24af84bbcf6c) { grid-column-gap:.25rem; grid-row-gap:.25rem; justify-content:flex-start; align-items:center; margin-top:.5rem; display:flex; } .dsl .blog-card_btn-wrap:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530) { grid-column-gap:.25rem; grid-row-gap:.25rem; justify-content:flex-start; align-items:center; margin-top:1rem; display:flex; } .dsl .blog-card_btn-wrap:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { grid-column-gap:.25rem; grid-row-gap:.25rem; order:-9999; justify-content:flex-start; align-items:center; margin-top:0; } .dsl .blog-card_link { z-index:1; border-radius:inherit; position:absolute; inset:0%; } .dsl .blog-card_hover-block { z-index:1; background-color:var(--shade--5); pointer-events:none; border-radius:inherit; width:100%; height:100%; position:absolute; inset:0%; } .dsl .blog-card_paragraph { color:var(--shade--70); } .dsl .blog-card_paragraph:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { max-width:65ch; } .dsl .blog-card_paragraph:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530) { max-width:42ch; } .dsl .blog-card_author-link:where(.w-variant-6dfb0098-6a8c-4865-d560-24af84bbcf6c) { grid-column-gap:.25rem; grid-row-gap:.25rem; justify-content:flex-start; align-items:center; text-decoration:none; transition:all .3s; display:flex; } .dsl .blog-card_author-link:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530) { grid-column-gap:.25rem; grid-row-gap:.25rem; justify-content:flex-start; align-items:center; text-decoration:none; transition:opacity .3s; display:flex; } .dsl .blog-card_author-link:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { grid-column-gap:.25rem; grid-row-gap:.25rem; font-weight:var(--_typography---font-weight--medium); justify-content:flex-start; align-items:center; text-decoration:none; transition:opacity .3s; display:flex; } .dsl .blog-card_author-link:hover:where(.w-variant-6dfb0098-6a8c-4865-d560-24af84bbcf6c), .dsl .blog-card_author-link:hover:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530), .dsl .blog-card_author-link:hover:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { opacity:.75; } .dsl .blog-card_info-wrap { display:contents; } .dsl .blog-card_info-wrap:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { grid-column-gap:1rem; grid-row-gap:1rem; margin-bottom:1rem; display:flex; } .dsl .blog-card_hover-block { border-radius:1rem; } .dsl .blog-card[data-wf--card-blog--variant=featured] .blog-card_paragraph { display:-webkit-box!important; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; padding-top:.2em; padding-bottom:.2em; margin-top:-.2em; margin-bottom:-.2em; } .dsl .blog-card[data-wf--card-blog--variant=list-item] .blog-card_paragraph { display:-webkit-box!important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding-top:.2em; padding-bottom:.2em; margin-top:-.2em; margin-bottom:-.2em; } .dsl .cta_list { justify-content:center; align-items:center; margin-bottom:5rem; padding-inline-start:1rem; display:flex; } .dsl .cta_list-item { justify-content:center; align-items:center; width:6rem; margin-bottom:0; margin-inline-start:-1rem; display:flex; position:relative; } .dsl .cta_item-link { z-index:1; filter:drop-shadow(-4px 0 20px #00000026); pointer-events:auto; background-color:#0000; justify-content:center; align-items:center; width:100%; height:100%; display:flex; position:relative; } .dsl .cta_icon-img { pointer-events:none; object-fit:contain; width:100%; } .dsl .cta_tooltip { z-index:0; background-color:var(--neutral--lightest); opacity:0; font-size:var(--_typography---text-s--font-size); font-weight:var(--_typography---font-weight--medium); white-space:nowrap; border-radius:.5rem; padding:.25rem .63rem; transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1); position:absolute; top:0; transform:translateY(-80%); } .dsl .cta_list { display:flex; align-items:flex-end; } .dsl .cta_list-item { position:relative; transform-origin:bottom center; } .dsl .cta_tooltip { opacity:0; transform:translate(-50%,calc(-100% + 10px)); transition:opacity .2s ease,transform .2s ease; position:absolute; left:50%; top:0; pointer-events:none; } .dsl .cta_list-item:hover .cta_tooltip { opacity:1; transform:translate(-50%,-140%); } .dsl .cta_tooltip:after { content:""; position:absolute; bottom:-4px; left:50%; transform:translate(-50%) rotate(45deg); width:8px; height:8px; background-color:inherit; } /* ------------------------------------------------------------------ */ /* Manual: @keyframes + attribute selectors (verbatim from mirror CSS; * scripts/extract-css.mjs does not emit @keyframes or attribute-only * selectors). */ /* dropship-3-0.shared.min.css - hero marquee track loop */ /* odyn-bundle.css - initial hidden states for the hero intro (GSAP reveals) */ .dsl [data-hero-icon] { opacity: 0; } .dsl [data-hero-marquee] { opacity: 0; scale: .6; } .dsl [data-hero-after] { opacity: 0; } /* odyn-bundle.css - tab pane crossfade */ .dsl [data-tab-content] { position: relative; } .dsl [data-tab-pane] { display: none; } .dsl [data-tab-pane].active { display: block; animation: pane-in .4s ease forwards; } .dsl [data-tab-pane].is-leaving { display: block; position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; animation: pane-out .4s ease both; } /* odyn-bundle.css - revenue-tracking globe (#jb ids + keyframes) */ .dsl #jb-outer { position: relative; width: 100%; aspect-ratio: 16 / 8; overflow: hidden; background: transparent; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; } .dsl #jb-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 200%; } .dsl #jb-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } .dsl #jb-markers { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } .dsl #jb-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 30%; background: linear-gradient(to bottom, transparent, #ffffff); z-index: 3; pointer-events: none; } .dsl #jb-loader { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; color: #93c5fd; letter-spacing: .06em; z-index: 10; animation: jbBlink 1.4s ease-in-out infinite; } /* ------------------------------------------------------------------ */ /* Manual: data-grid attribute → custom-property mappings from the page's * inline \3c style> head block (mirror/pages/index.html), verbatim. */ /* Grid Column - Desktop (1-12) */ .dsl [data-grid-column-desktop="1"]{--grid-column-desktop:1}.dsl [data-grid-column-desktop="2"]{--grid-column-desktop:2}.dsl [data-grid-column-desktop="3"]{--grid-column-desktop:3}.dsl [data-grid-column-desktop="4"]{--grid-column-desktop:4}.dsl [data-grid-column-desktop="5"]{--grid-column-desktop:5}.dsl [data-grid-column-desktop="6"]{--grid-column-desktop:6} .dsl [data-grid-column-desktop="7"]{--grid-column-desktop:7}.dsl [data-grid-column-desktop="8"]{--grid-column-desktop:8}.dsl [data-grid-column-desktop="9"]{--grid-column-desktop:9}.dsl [data-grid-column-desktop="10"]{--grid-column-desktop:10}.dsl [data-grid-column-desktop="11"]{--grid-column-desktop:11}.dsl [data-grid-column-desktop="12"]{--grid-column-desktop:12} /* Grid Column - Tablet (1-12) */ .dsl [data-grid-column-tablet="1"]{--grid-column-tablet:1}.dsl [data-grid-column-tablet="2"]{--grid-column-tablet:2}.dsl [data-grid-column-tablet="3"]{--grid-column-tablet:3}.dsl [data-grid-column-tablet="4"]{--grid-column-tablet:4}.dsl [data-grid-column-tablet="5"]{--grid-column-tablet:5}.dsl [data-grid-column-tablet="6"]{--grid-column-tablet:6} .dsl [data-grid-column-tablet="7"]{--grid-column-tablet:7}.dsl [data-grid-column-tablet="8"]{--grid-column-tablet:8}.dsl [data-grid-column-tablet="9"]{--grid-column-tablet:9}.dsl [data-grid-column-tablet="10"]{--grid-column-tablet:10}.dsl [data-grid-column-tablet="11"]{--grid-column-tablet:11}.dsl [data-grid-column-tablet="12"]{--grid-column-tablet:12} /* Grid Column - Mobile Landscape (1-12) */ .dsl [data-grid-column-mobilel="1"]{--grid-column-mobilel:1}.dsl [data-grid-column-mobilel="2"]{--grid-column-mobilel:2}.dsl [data-grid-column-mobilel="3"]{--grid-column-mobilel:3}.dsl [data-grid-column-mobilel="4"]{--grid-column-mobilel:4}.dsl [data-grid-column-mobilel="5"]{--grid-column-mobilel:5}.dsl [data-grid-column-mobilel="6"]{--grid-column-mobilel:6} .dsl [data-grid-column-mobilel="7"]{--grid-column-mobilel:7}.dsl [data-grid-column-mobilel="8"]{--grid-column-mobilel:8}.dsl [data-grid-column-mobilel="9"]{--grid-column-mobilel:9}.dsl [data-grid-column-mobilel="10"]{--grid-column-mobilel:10}.dsl [data-grid-column-mobilel="11"]{--grid-column-mobilel:11}.dsl [data-grid-column-mobilel="12"]{--grid-column-mobilel:12} /* Grid Column - Mobile Portrait (1-12) */ .dsl [data-grid-column-mobilep="1"]{--grid-column-mobilep:1}.dsl [data-grid-column-mobilep="2"]{--grid-column-mobilep:2}.dsl [data-grid-column-mobilep="3"]{--grid-column-mobilep:3}.dsl [data-grid-column-mobilep="4"]{--grid-column-mobilep:4}.dsl [data-grid-column-mobilep="5"]{--grid-column-mobilep:5}.dsl [data-grid-column-mobilep="6"]{--grid-column-mobilep:6} .dsl [data-grid-column-mobilep="7"]{--grid-column-mobilep:7}.dsl [data-grid-column-mobilep="8"]{--grid-column-mobilep:8}.dsl [data-grid-column-mobilep="9"]{--grid-column-mobilep:9}.dsl [data-grid-column-mobilep="10"]{--grid-column-mobilep:10}.dsl [data-grid-column-mobilep="11"]{--grid-column-mobilep:11}.dsl [data-grid-column-mobilep="12"]{--grid-column-mobilep:12} /* Grid Gap Column (1-8) */ .dsl [data-grid-gap-column="1"]{--grid-gap-column:1}.dsl [data-grid-gap-column="2"]{--grid-gap-column:2}.dsl [data-grid-gap-column="3"]{--grid-gap-column:3}.dsl [data-grid-gap-column="4"]{--grid-gap-column:4}.dsl [data-grid-gap-column="5"]{--grid-gap-column:5}.dsl [data-grid-gap-column="6"]{--grid-gap-column:6}.dsl [data-grid-gap-column="7"]{--grid-gap-column:7}.dsl [data-grid-gap-column="8"]{--grid-gap-column:8} /* Grid Gap Row (1-8) */ .dsl [data-grid-gap-row="1"]{--grid-gap-row:1}.dsl [data-grid-gap-row="2"]{--grid-gap-row:2}.dsl [data-grid-gap-row="3"]{--grid-gap-row:3}.dsl [data-grid-gap-row="4"]{--grid-gap-row:4}.dsl [data-grid-gap-row="5"]{--grid-gap-row:5}.dsl [data-grid-gap-row="6"]{--grid-gap-row:6}.dsl [data-grid-gap-row="7"]{--grid-gap-row:7}.dsl [data-grid-gap-row="8"]{--grid-gap-row:8} .dsl .grid[data-grid-column-desktop="1"] { display: flex; flex-direction: column; } /* ------------------------------------------------------------------ */ /* Manual: [data-number] → --number (max-width in ch) mappings from the * page's inline \3c style> head block (mirror/pages/index.html), verbatim. */ /* Number Attributes */ .dsl [data-number="-1"]{--number: initial;}.dsl [data-number="0"]{--number: 0;}.dsl [data-number="1"]{--number:1}.dsl [data-number="2"]{--number:2}.dsl [data-number="3"]{--number:3}.dsl [data-number="4"]{--number:4}.dsl [data-number="5"]{--number:5}.dsl [data-number="6"]{--number:6}.dsl [data-number="7"]{--number:7}.dsl [data-number="8"]{--number:8}.dsl [data-number="9"]{--number:9} .dsl [data-number="10"]{--number:10}.dsl [data-number="11"]{--number:11}.dsl [data-number="12"]{--number:12}.dsl [data-number="13"]{--number:13}.dsl [data-number="14"]{--number:14}.dsl [data-number="15"]{--number:15}.dsl [data-number="16"]{--number:16}.dsl [data-number="17"]{--number:17}.dsl [data-number="18"]{--number:18}.dsl [data-number="19"]{--number:19} .dsl [data-number="20"]{--number:20}.dsl [data-number="21"]{--number:21}.dsl [data-number="22"]{--number:22}.dsl [data-number="23"]{--number:23}.dsl [data-number="24"]{--number:24}.dsl [data-number="25"]{--number:25}.dsl [data-number="26"]{--number:26}.dsl [data-number="27"]{--number:27}.dsl [data-number="28"]{--number:28}.dsl [data-number="29"]{--number:29} .dsl [data-number="30"]{--number:30}.dsl [data-number="31"]{--number:31}.dsl [data-number="32"]{--number:32}.dsl [data-number="33"]{--number:33}.dsl [data-number="34"]{--number:34}.dsl [data-number="35"]{--number:35}.dsl [data-number="36"]{--number:36}.dsl [data-number="37"]{--number:37}.dsl [data-number="38"]{--number:38}.dsl [data-number="39"]{--number:39} .dsl [data-number="40"]{--number:40}.dsl [data-number="41"]{--number:41}.dsl [data-number="42"]{--number:42}.dsl [data-number="43"]{--number:43}.dsl [data-number="44"]{--number:44}.dsl [data-number="45"]{--number:45}.dsl [data-number="46"]{--number:46}.dsl [data-number="47"]{--number:47}.dsl [data-number="48"]{--number:48}.dsl [data-number="49"]{--number:49} .dsl [data-number="50"]{--number:50}.dsl [data-number="51"]{--number:51}.dsl [data-number="52"]{--number:52}.dsl [data-number="53"]{--number:53}.dsl [data-number="54"]{--number:54}.dsl [data-number="55"]{--number:55}.dsl [data-number="56"]{--number:56}.dsl [data-number="57"]{--number:57}.dsl [data-number="58"]{--number:58}.dsl [data-number="59"]{--number:59} .dsl [data-number="60"]{--number:60}.dsl [data-number="61"]{--number:61}.dsl [data-number="62"]{--number:62}.dsl [data-number="63"]{--number:63}.dsl [data-number="64"]{--number:64}.dsl [data-number="65"]{--number:65}.dsl [data-number="66"]{--number:66}.dsl [data-number="67"]{--number:67}.dsl [data-number="68"]{--number:68}.dsl [data-number="69"]{--number:69} .dsl [data-number="70"]{--number:70}.dsl [data-number="71"]{--number:71}.dsl [data-number="72"]{--number:72}.dsl [data-number="73"]{--number:73}.dsl [data-number="74"]{--number:74}.dsl [data-number="75"]{--number:75}.dsl [data-number="76"]{--number:76}.dsl [data-number="77"]{--number:77}.dsl [data-number="78"]{--number:78}.dsl [data-number="79"]{--number:79} .dsl [data-number="80"]{--number:80}.dsl [data-number="81"]{--number:81}.dsl [data-number="82"]{--number:82}.dsl [data-number="83"]{--number:83}.dsl [data-number="84"]{--number:84}.dsl [data-number="85"]{--number:85}.dsl [data-number="86"]{--number:86}.dsl [data-number="87"]{--number:87}.dsl [data-number="88"]{--number:88}.dsl [data-number="89"]{--number:89} .dsl [data-number="90"]{--number:90}.dsl [data-number="91"]{--number:91}.dsl [data-number="92"]{--number:92}.dsl [data-number="93"]{--number:93}.dsl [data-number="94"]{--number:94}.dsl [data-number="95"]{--number:95}.dsl [data-number="96"]{--number:96}.dsl [data-number="97"]{--number:97}.dsl [data-number="98"]{--number:98}.dsl [data-number="99"]{--number:99}.dsl [data-number="100"]{--number:100} /* ------------------------------------------------------------------ */ /* Manual: Line Height Trim from the page's inline \3c style> head block * (mirror/pages/index.html), verbatim - trims the half-leading off every * heading/paragraph, which all section heights depend on. */ .dsl :is([class*="u-text-style-"], h1, h2, h3, h4, h5, h6, p, blockquote) { display: flow-root; } .dsl :is([class*="u-text-style-"], h1, h2, h3, h4, h5, h6, p, blockquote)::before { content: ""; display: table; margin-bottom: calc(-0.5lh + 0.36em); } .dsl :is([class*="u-text-style-"], h1, h2, h3, h4, h5, h6, p, blockquote)::after { content: ""; display: table; margin-bottom: calc(-0.5lh + 0.41em); } /* App-styled blocks set inside a landing page (the /checkout card stack, the /pricing terms) * are sized by their own utilities, not by the Webflow sections; there the trim only pulls each * line into its neighbour (the checkout lead sat on its title), so they opt out. */ .dsl .dsl-no-trim :is(h1, h2, h3, h4, h5, h6, p, blockquote)::before, .dsl .dsl-no-trim :is(h1, h2, h3, h4, h5, h6, p, blockquote)::after { content: none; } /* ------------------------------------------------------------------ */ /* Manual: Webflow grid-placement id rule (dropship-3-0.shared.min.css); * extract-css.mjs only matches class selectors. */ .dsl #w-node-_01f39a58-3c3a-016a-c802-534d9b967827-9b96781b { grid-column: span 2 / span 2; } @media screen and (max-width:991px) { .dsl .blog-card_paragraph.text-style-3lines:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530), .dsl .blog-card_paragraph.text-style-3lines:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { max-width:none; } .dsl .home-tab-list { font-size:1.5vw; } .dsl .home-tab_wrap { padding:2rem; } .dsl .home-tab_content-top { flex-flow:column; display:flex; } .dsl .home-tab_image-wrap { width:100%; height:32rem; } .dsl .grid { grid-template-columns:repeat(var(--grid-column-tablet),1fr); } .dsl .image-wrap:where(.w-variant-7cee255d-2600-f26a-9ccb-0470d2ed514c) { aspect-ratio:3/2; height:auto; margin-bottom:-2rem; margin-inline-start:-2rem; } .dsl .image-wrap:where(.w-variant-5014a728-6c4c-42a7-cd54-bf3673c3f414) { aspect-ratio:3/2; height:auto; } .dsl .image-wrap:where(.w-variant-831477bf-658a-9e42-6aba-e34f3b8ccc75) { margin-bottom:-2rem; margin-inline-start:-2rem; } .dsl .image-wrap:where(.w-variant-04420357-ce06-808b-d126-3982cf7d69cf) { height:auto; } .dsl .card-padding-wrap { padding:2rem; } .dsl .card-padding-wrap:where(.w-variant-131fa725-38c5-39f3-fe71-968fe3df6cdd) { padding:1.5rem; } .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { padding:0; } .dsl .featured-blog_grid { grid-row-gap:2rem; flex-flow:column; grid-template-rows:auto; grid-template-columns:1fr; grid-auto-columns:1fr; display:grid; } .dsl .blog-card:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7), .dsl .blog-card:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530) { grid-column-gap:1.5rem; grid-row-gap:1.5rem; display:flex; } .dsl .blog-card_heading:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530), .dsl .blog-card_heading:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { max-width:none; } .dsl .cta_list { padding-inline-start:.75rem; } .dsl .cta_list-item { width:5rem; margin-inline-start:-.75rem; } .dsl .cta_item-link { filter:none; } } @media (max-width: 991px) { .dsl .grid[data-grid-column-tablet="1"] { display: flex; flex-direction: column; } } @media screen and (max-width:767px) { .dsl .hero_marquee_list { grid-column-gap:.5rem; grid-row-gap:.5rem; padding-inline-end:.5rem; } .dsl .hero_marquee_item { grid-column-gap:.38rem; grid-row-gap:.38rem; border-radius:.41rem; padding:.31rem; } .dsl .hero_marquee_component { grid-column-gap:.5rem; grid-row-gap:.5rem; } .dsl .hero_marquee_img-wrap { aspect-ratio:1; border-radius:.38rem; width:1.7rem; height:1.7rem; } .dsl .hero_marquee_text-wrap { grid-column-gap:.4rem; grid-row-gap:.4rem; justify-content:center; align-items:flex-start; } .dsl .hero_marquee_img { aspect-ratio:1; width:1.7rem; height:1.7rem; } .dsl .hero_fade { width:56rem; } .dsl .hero_fade-block { transform:translate(-50%,94%); } .dsl .hero_marquee_rev_wrap { grid-column-gap:.13rem; grid-row-gap:.13rem; height:.4rem; } .dsl .hero_marquee_rev_stat { grid-column-gap:.07rem; grid-row-gap:.07rem; padding:.15rem; font-size:.22rem; } .dsl .hero_marquee_rev_stat:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { overflow:visible; } .dsl .hero_marquee_rev_svg { width:.24rem; height:.24rem; } .dsl .hero_fade_img { width:131%; height:34rem; } .dsl .hide-mobile-landscape { display:none; } .dsl .text-block { font-size:.21rem; } .dsl .row-gap-3 { display:flex; } .dsl .home-tab-list { background-color:#fff0; border-radius:0; max-width:100%; height:4rem; } .dsl .home-tab-item__link { padding:4%; } .dsl .home-tab_wrap { padding:1.5rem; } .dsl .home-tab_content-top { grid-column-gap:1rem; grid-row-gap:1rem; } .dsl .home-tab_image-wrap { width:155%; height:auto; } .dsl .tab-wrap { grid-column-gap:1rem; grid-row-gap:1rem; } .dsl .grid { grid-template-columns:repeat(var(--grid-column-mobilel),1fr); grid-column-gap:1rem; grid-row-gap:1.5rem; flex-flow:column; } .dsl .image-wrap:where(.w-variant-7cee255d-2600-f26a-9ccb-0470d2ed514c), .dsl .image-wrap:where(.w-variant-831477bf-658a-9e42-6aba-e34f3b8ccc75) { margin-bottom:-1rem; margin-inline-start:-1rem; } .dsl .slider_item.swiper-slide { width:50%; } .dsl .card-heading-wrap { margin-bottom:1rem; } .dsl .card-padding-wrap { padding:1rem; } .dsl .card-padding-wrap:where(.w-variant-131fa725-38c5-39f3-fe71-968fe3df6cdd) { padding:1.5rem; } .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { padding:0; } .dsl .card-layout:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e), .dsl .card-layout:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4) { flex-flow:column; justify-content:flex-start; align-items:stretch; display:flex; } .dsl .card-heading-slot:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4), .dsl .card-heading-slot:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e), .dsl .card-image-slot:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4), .dsl .card-image-slot:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e) { display:contents; } .dsl .ai-component { padding-top:7rem; padding-bottom:7rem; } .dsl .ai_search-inner { padding:.5rem; } .dsl .ai_looping-words { font-size:6.6em; } .dsl .ai_looping-words-text { font-size:.9rem; line-height:3.5rem; } .dsl .extention_visual-wrap { max-width:50vw; } .dsl .blog-card { padding:1rem; } .dsl .blog-card:where(.w-variant-8c0cedb8-aef4-d69d-b382-e5c21cc91530), .dsl .blog-card:where(.w-variant-53a43be5-6944-1410-e4e8-568d9ed40ea7) { padding:0; } .dsl .cta_list { padding-inline-start:.6rem; } .dsl .cta_list-item { width:3.5rem; margin-inline-start:-.6rem; } } @media (max-width: 767px) { .dsl .grid[data-grid-column-mobilel="1"] { display: flex; flex-direction: column; } } @media screen and (max-width:479px) { .dsl .hero_marquee_component { grid-column-gap:.5rem; grid-row-gap:.5rem; } .dsl .hero_icon-wrap { border-radius:1.2rem; width:4rem; height:4rem; padding:1px; } .dsl .hero_fade-block { transform:translate(-50%,93%); } .dsl .hero_marquee_rev_stat { padding:.1rem; } .dsl .hero_marquee_rev_stat:where(.w-variant-14e04f00-ebd1-53e1-97eb-0b562950037b) { border-width:2px; } .dsl .hero_icon-inner { border-radius:.94rem; } .dsl .hero_icon-svg { width:2.2rem; height:2.2rem; } .dsl .button-icon.is-ai { width:2rem; height:2rem; } .dsl .eyebrow-wrap:where(.w-variant-5cc903c3-7eeb-df69-35a2-7a9bdd32534c) { white-space:nowrap; } .dsl .eyebrow-link { padding:.38rem .75rem; } .dsl .eyebrow-link:where(.w-variant-5cc903c3-7eeb-df69-35a2-7a9bdd32534c) { padding-inline-end:.5rem; } .dsl .home-tab-list { background-color:#fff0; border-radius:0; justify-content:flex-start; align-items:center; height:3.25rem; font-size:1.5vw; } .dsl .home-tab_image-wrap { width:130%; } .dsl .grid { grid-template-columns:repeat(var(--grid-column-mobilep),1fr); } .dsl .slider_item.swiper-slide { width:80%; } .dsl .card-padding-wrap:where(.w-variant-131fa725-38c5-39f3-fe71-968fe3df6cdd) { padding:1.5rem; } .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { padding:0; } .dsl .ai-component { margin-top:2rem; padding-top:4rem; padding-bottom:4rem; } .dsl .ai_search-inner { padding:.25rem; } .dsl .ai_looping-words { height:2rem; } .dsl .ai_looping-words-text { font-size:.7rem; line-height:2.2rem; } .dsl .extention_visual-wrap { max-width:65vw; margin-top:1.5rem; } .dsl .extention_file-bg, .dsl .extention_file-fg { border-radius:1.25rem; } .dsl .extension-curve { align-self:flex-end; height:80%; } .dsl .cta_list { margin-bottom:4rem; padding-inline-start:.3rem; } .dsl .cta_list-item { width:2.2rem; margin-inline-start:-.3rem; } } @media (max-width: 479px) { .dsl .grid[data-grid-column-mobilep="1"] { display: flex; flex-direction: column; } } /* ==== parity/pricing.css ==== */ /* Parity CSS for /pricing - rules extracted from the original stylesheets via * `node scripts/extract-css.mjs` (dropship-3-0.shared.min.css + odyn-bundle.css). * Shared base classes live in src/styles/parity/shared.css / ui.css. */ .dsl .margin-small { margin:1rem; } .dsl .margin-bottom { margin-top:0; margin-inline-start:0; margin-inline-end:0; } .dsl .heading-style-h4 { font-family:var(--_typography---h4--font-family); font-size:var(--_typography---h4--font-size); line-height:var(--_typography---h4--line-height); font-weight:var(--_typography---h4--font-weight); letter-spacing:var(--_typography---h4--letter-spacing); } .dsl .tab-wrap { grid-column-gap:1.5rem; grid-row-gap:1.5rem; flex-flow:column; width:100%; padding-bottom:0; padding-inline-end:0; display:flex; } .dsl .tab-wrap:where(.w-variant-3edf8d18-0b4f-c1d5-3856-fe89640c69bc) { grid-column-gap:2rem; grid-row-gap:2rem; } .dsl .tab-wrap:where(.w-variant-3bfed3cb-a923-1eeb-8f90-77d409f5f757) { grid-column-gap:0rem; grid-row-gap:0rem; grid-template-rows:auto; grid-template-columns:1.25fr 4fr; grid-auto-columns:1fr; display:grid; } .dsl .tab-nav-wrap { flex-flow:column; justify-content:center; align-items:center; display:flex; } .dsl .tab-nav-wrap:where(.w-variant-3bfed3cb-a923-1eeb-8f90-77d409f5f757) { justify-content:flex-end; align-items:flex-start; padding-bottom:1.5rem; display:flex; } .dsl .tab-content-wrap { width:100%; position:relative; } .dsl .tab-content-wrap:where(.w-variant-3bfed3cb-a923-1eeb-8f90-77d409f5f757) { grid-template-rows:auto auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; display:block; } .dsl .tab-nav-slot, .dsl .tab-content-slot { display:contents; } .dsl .tab-list { background-color:var(--_color-theme---lightest); border-radius:.75rem; justify-content:center; align-items:center; padding:.25rem; display:flex; position:relative; overflow:hidden; } .dsl .tab-item { white-space:nowrap; justify-content:center; align-items:center; margin-bottom:0; display:inline-block; position:relative; } .dsl .tab-item-link { height:2rem; color:var(--shade--70); font-size:var(--_typography---text-s--font-size); font-weight:var(--_typography---font-weight--medium); letter-spacing:var(--_typography---text-r--letter-spacing); background-color:#fff0; border:1px solid #fff0; border-radius:.5rem; padding:.25rem 1rem; text-decoration:none; position:relative; } .dsl .tab-link-slot { width:100%; height:100%; display:contents; } .dsl .tab-bg-hover { z-index:1; background-color:var(--shade--5); pointer-events:none; border-radius:.5rem; position:absolute; inset:0%; } .dsl .cta_list { justify-content:center; align-items:center; margin-bottom:5rem; padding-inline-start:1rem; display:flex; } .dsl .cta_list-item { justify-content:center; align-items:center; width:6rem; margin-bottom:0; margin-inline-start:-1rem; display:flex; position:relative; } .dsl .cta_item-link { z-index:1; filter:drop-shadow(-4px 0 20px #00000026); pointer-events:auto; background-color:#0000; justify-content:center; align-items:center; width:100%; height:100%; display:flex; position:relative; } .dsl .cta_icon-img { pointer-events:none; object-fit:contain; width:100%; } .dsl .cta_tooltip { z-index:0; background-color:var(--neutral--lightest); opacity:0; font-size:var(--_typography---text-s--font-size); font-weight:var(--_typography---font-weight--medium); white-space:nowrap; border-radius:.5rem; padding:.25rem .63rem; transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1); position:absolute; top:0; transform:translateY(-80%); } .dsl .layout-block { flex-flow:column; display:flex; } .dsl .layout-block.row-gap-6 { grid-template-rows:auto auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; } .dsl .row-gap-3 { grid-row-gap:var(--_sizes---gap--gap-3); } .dsl .row-gap-1-5 { grid-row-gap:var(--_sizes---gap--gap-1-5); } .dsl .pricing_card-wrap { z-index:1; flex-flow:column; display:flex; position:relative; } .dsl .pricing_card-wrap:where(.w-variant-6acd07b4-bedc-5fbf-4795-8088b3090667) { grid-column-gap:.75rem; grid-row-gap:.75rem; background-color:var(--neutral--white); background-image:linear-gradient(90deg,#225aea,#5da1ff); border-radius:2rem; flex-flow:column; padding:.75rem .5rem .5rem; display:flex; box-shadow:0 4px 114px #225aea26; } .dsl .pricing_card { grid-column-gap:2rem; grid-row-gap:2rem; border:1px solid var(--shade--10); background-color:var(--neutral--white); border-radius:1.5rem; flex-flow:column; padding:1.5rem; display:flex; } .dsl .pricing_card-content-block, .dsl .pricing_card-list-wrap { grid-column-gap:1rem; grid-row-gap:1rem; flex-flow:column; display:flex; } .dsl .pricing_card-list { grid-column-gap:.75rem; grid-row-gap:.75rem; flex-flow:column; display:flex; } .dsl .pricing_card-list-item { margin-bottom:0; padding:0; display:block; } .dsl .pricing_card-list-content { grid-column-gap:.5rem; grid-row-gap:.5rem; justify-content:flex-start; align-items:center; display:flex; } .dsl .pricing_card-list-line { background-color:var(--shade--10); height:1px; margin-top:.75rem; } .dsl .icon-wrap { aspect-ratio:1; object-fit:cover; width:1rem; max-width:none; height:1rem; position:relative; } .dsl .icon-wrap:where(.w-variant-6376e298-0878-6bec-92b5-b6d163b20579) { width:1.5rem; height:1.5rem; } .dsl .icon-wrap:where(.w-variant-a56152a4-aef1-e6bf-1b29-1a064f3d1908) { width:1.25rem; height:1.25rem; } .dsl .icon-wrap:where(.w-variant-7c968c8a-7cd2-bf02-6630-e887aa0ea528) { width:2rem; height:2rem; } .dsl .icon-wrap:where(.w-variant-13d0214e-3153-eff5-302f-1345da82c8e7) { width:3rem; height:3rem; } .dsl .icon-wrap:where(.w-variant-49ec1022-d254-6b06-9c85-b646514142ff) { width:4rem; height:4rem; } .dsl .icon-wrap:where(.w-variant-59aadbd8-a8fd-640f-789c-c22e3d29713b) { width:5rem; height:5rem; } .dsl .icon-wrap:where(.w-variant-f1d370bc-061a-7131-e7fb-1a9766b5bd86) { width:auto; height:100%; } .dsl .icon-image { border-radius:inherit; width:100%; height:100%; position:absolute; inset:0%; } .dsl .icon-image:where(.w-variant-a56152a4-aef1-e6bf-1b29-1a064f3d1908) { border-radius:inherit; } /* A feature label is one line, but it comes out of a w-richtext block whose

keeps the 1rem bottom margin meant for real paragraphs. That margin sat inside the box being vertically centred, so the text rode 8px above its icon on every row. It was invisible while the icon was an emoji inside the same text run; a real icon beside it shows it. */ .dsl .pricing_card-list-text p, .dsl .pricing-table_item-title p { margin-bottom:0; } /* The cards' «المزيد» link jumps to the comparison further down the same page; glide there instead of teleporting. Guarded, because a scroll animation is exactly what someone who asked their OS for less motion does not want. */ @media (prefers-reduced-motion: no-preference) { html:has(.dsl) { scroll-behavior:smooth; } } /* The card's «و N ميزة أخرى» line. Sits under the feature list, reads as the quiet continuation of it rather than a second call to action beside «سجّل الآن». */ .dsl .pricing_card { flex:1; } /* Subscribe + Try the demo: one group, one gap on every card (the card's own 2rem row gap used to separate them, which read as two unrelated actions). */ .dsl .pricing_card-ctas { display:flex; flex-direction:column; gap:.75rem; } .dsl .pricing_card > .pricing_card-content-block:last-child { flex:1; } .dsl .pricing_card-more { margin-top:auto; color:var(--_color-theme---normal); font-size:.875rem; font-weight:var(--_typography---font-weight--medium); text-decoration:none; padding-top:.75rem; display:inline-block; } .dsl .pricing_card-more:hover { text-decoration:underline; } /* That line jumps to the comparison, which sits under a sticky navbar and its own sticky plan header; without the offset the heading lands behind them. */ .dsl #compare-plans { scroll-margin-top:5rem; } .dsl .pricing_card-list-slot { display:contents; } .dsl .pricing_card-special-heading:where(.w-variant-6acd07b4-bedc-5fbf-4795-8088b3090667) { grid-column-gap:.25rem; grid-row-gap:.25rem; justify-content:center; align-items:center; margin-inline-start:auto; margin-inline-end:auto; display:flex; } .dsl .tooltip__box-inner { flex-flow:column; align-items:center; display:flex; position:relative; } .dsl .tooltip__box { pointer-events:none; white-space:normal; flex-flow:column; align-items:center; padding-top:.5em; padding-bottom:.5em; display:flex; position:absolute; bottom:100%; left:50%; transform:translate(-50%); } .dsl .tooltip__box:where(.w-variant-9a919e2d-1153-f2a0-f9f9-088c449fa3d5) { justify-content:center; align-items:flex-start; } .dsl .tooltip { grid-column-gap:.25rem; grid-row-gap:.25rem; text-align:center; justify-content:flex-start; align-items:center; margin-top:-.3em; margin-bottom:-.3em; padding-top:.3em; padding-bottom:.3em; display:flex; } .dsl .tooltip:where(.w-variant-9a919e2d-1153-f2a0-f9f9-088c449fa3d5) { text-align:start; } .dsl .tooltip__card { grid-column-gap:.5em; grid-row-gap:.5em; background-color:var(--neutral--lightest); border-radius:.75em; flex-flow:column; width:21em; max-width:calc(100vw - 1em); margin-inline-start:.5em; margin-inline-end:.5em; padding:.75rem; display:flex; } /* Four cards to a row leave about 200px inside a card, and the price beside its savings badge wants ~285px. The row was locked to one line at 1.6rem, so the price got squeezed, wrapped, and spilled over the line beneath it. Wrapping sends the badge to its own line first, which keeps the price whole; if a card ever does get too narrow for the price alone, the row now grows to fit it. */ .dsl .pricing_card-price-wrap { grid-column-gap:.75rem; grid-row-gap:.5rem; flex-wrap:wrap; justify-content:flex-start; align-items:center; min-height:1.6rem; display:flex; } .dsl .pricing_card-list-text { grid-column-gap:.25rem; grid-row-gap:.5rem; white-space:nowrap; flex-flow:wrap; justify-content:flex-start; align-items:center; display:flex; } .dsl .background { z-index:0; background-color:var(--neutral--white); background-image:linear-gradient(180deg,var(--_color-theme---lightest),var(--_color-theme---lighter)); position:absolute; inset:0%; } .dsl .background:where(.w-variant-94d7e812-2414-b71f-ac81-3b1e0e7af312) { background-image:linear-gradient(0deg,var(--_color-theme---lightest),var(--_color-theme---lighter)); } .dsl .background:where(.w-variant-1e2fa4c7-612f-78c4-a972-01cd0e0ad45b), .dsl .background:where(.w-variant-c48d80d6-30d2-48cf-95e2-5c47d84bbd2e) { background-image:none; } .dsl .background:where(.w-variant-fb5203e7-cb23-c031-61bf-b9c5d4b88d1a) { background-image:linear-gradient(0deg,var(--neutral--white),var(--_color-theme---lightest)); } .dsl .background:where(.w-variant-e6394aa5-9f5b-e9e6-a65f-0db9913b62cb) { background-color:var(--_color-theme---lightest); background-image:none; } .dsl .background:where(.w-variant-c919b1d0-ac42-0cca-a987-0a75a52e0427) { background-image:linear-gradient(180deg,var(--neutral--white),var(--_color-theme---lightest)); } .dsl .background:where(.w-variant-0eec946e-a1fb-dbd0-00c6-9e70fbd1a74b) { background-image:none; } .dsl .background-animated { padding:0; position:absolute; inset:0%; } .dsl .background-wrap { z-index:0; pointer-events:none; width:100%; height:100%; position:absolute; inset:0%; } .dsl .background-wrap:where(.w-variant-c18e3fde-4f6d-935c-29d3-6f62f8a5ada8), .dsl .background-wrap:where(.w-variant-0eec946e-a1fb-dbd0-00c6-9e70fbd1a74b) { pointer-events:none; } .dsl .background-animated-fade { z-index:1; background-image:linear-gradient(180deg,#fff0,var(--neutral--white)); height:15%; position:absolute; inset:auto 0% 0%; } .dsl .background-animated-fade:where(.w-variant-c30a20a4-706a-aebc-9bed-b3d118501fe5) { background-image:linear-gradient(180deg,#fff0,var(--_color-theme---lightest)); } .dsl .background-animated-fade:where(.w-variant-5671e5f5-f010-8896-767e-af3f74051660) { background-image:linear-gradient(180deg,#fff0,var(--_color-theme---lighter)); } .dsl .background-animated-fade:where(.w-variant-aa9e7edf-d1eb-4375-d49e-7821a6f8a98c) { background-image:linear-gradient(180deg,#fff0,var(--_color-theme---light)); } .dsl .pricing-acc_item:where(.w-variant-d30ddc7f-b690-56b6-8c8d-dee3c8bf3f52) { margin-bottom:.75rem; } .dsl .pricing-acc_component { overflow:hidden; } .dsl .pricing-acc_toggle_heading { margin-top:0; margin-bottom:0; } .dsl .pricing-acc_toggle_button { text-align:start; background-color:#0000; grid-template-rows:auto; grid-template-columns:1.25fr 1fr 1fr 1fr 1fr; grid-auto-columns:1fr; justify-content:space-between; align-items:center; width:100%; padding:0; display:grid; } .dsl .pricing-acc_toggle_button:where(.w-variant-d30ddc7f-b690-56b6-8c8d-dee3c8bf3f52) { display:flex; } .dsl .pricing-acc_content_wrap { width:100%; display:none; position:relative; overflow:visible clip; } .dsl .pricing-table_row { grid-column-gap:0px; grid-row-gap:0px; border-bottom:1px solid var(--shade--10); font-weight:var(--_typography---font-weight--medium); grid-template-rows:auto; grid-template-columns:1.25fr 1fr 1fr 1fr 1fr; grid-auto-columns:1fr; display:grid; } .dsl .pricing-table_item-title { justify-content:space-between; align-items:center; padding-top:1rem; padding-bottom:1rem; display:flex; } .dsl .pricing-table_item { justify-content:center; align-items:center; padding-top:1rem; padding-bottom:1rem; display:flex; } .dsl .pricing-table_item.is-blue { background-color:var(--_color-theme---lightest); color:var(--_color-theme---normal); } .dsl .pricing-table_icon-wrap { grid-column-gap:.5rem; grid-row-gap:.5rem; justify-content:center; align-items:center; display:flex; } .dsl .pricing-table_toggle-icon { justify-content:center; align-items:center; margin-top:-1rem; margin-bottom:-1rem; display:flex; } .dsl .pricing-table_item-wrap { display:contents; } .dsl .pricing-list_wrap { position:relative; } .dsl .pricing-list_header-pane { z-index:2; grid-template-rows:auto; grid-template-columns:1fr 1fr 1fr 1fr; grid-auto-columns:1fr; width:100%; display:grid; } .dsl .pricing-list_header-item { grid-column-gap:.75rem; grid-row-gap:.75rem; text-align:center; flex-flow:column; justify-content:center; align-items:center; padding:1.5rem .75rem; display:flex; } .dsl .pricing-list_header-item.is-blue { background-color:var(--_color-theme---lightest); border-radius:1.5rem 1.5rem 0 0; } .dsl .pricing-list_header-item.is-nav { justify-content:flex-end; align-items:flex-start; } .dsl .pricing-acc_color-block { background-color:var(--_color-theme---lightest); width:100%; height:100%; } .dsl .pricing-acc_heading-wrap { padding-top:2.5rem; padding-bottom:1.5rem; } .dsl .pricing-acc_heading-wrap:where(.w-variant-d30ddc7f-b690-56b6-8c8d-dee3c8bf3f52) { padding-top:1rem; padding-bottom:1rem; } .dsl .pricing-acc_icon-wrap { justify-content:flex-end; align-items:flex-end; height:100%; padding-bottom:1rem; display:flex; } .dsl .pricing-acc_icon-wrap:where(.w-variant-d30ddc7f-b690-56b6-8c8d-dee3c8bf3f52) { justify-content:center; align-items:center; padding-bottom:0; } .dsl .pricing-acc_toggle_icon { justify-content:center; align-items:center; display:flex; } .dsl .pricing-list_header { z-index:1; background-color:var(--neutral--white); padding-top:2rem; position:sticky; top:4.2rem; } .dsl .pricing-list_pane-wrap { z-index:2; grid-template-rows:auto; grid-template-columns:1fr 1fr 1fr 1fr; grid-auto-columns:1fr; width:100%; } .dsl .pricing_number { margin-top:0; margin-bottom:0; } .dsl .pricing_number.heading-style-h4 { font-family:var(--_typography---font-family--body-font); } .dsl .pricing-card_grid { grid-column-gap:1rem; grid-row-gap:1rem; flex-flow:column; grid-template-rows:auto; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-columns:1fr; justify-content:center; /* Cards carry different feature lists, and the featured one is taller still by its ribbon, so left to their natural heights they ended on four different lines. Stretching squares off the row; the cards below distribute the slack internally. */ place-items:stretch stretch; width:100%; display:grid; overflow:visible; } /* A package card needs roughly 240px before the price starts to wrap, and the featured one gives up another 16px to its gradient frame, so four across wants about 1050px of grid. Under that, pair them 2x2 instead of squeezing four in; the 767px block drops to one. The Webflow ladder stopped at 991px because it was drawn for three cards. */ @media screen and (max-width:1199px) { .dsl .pricing-card_grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-row-gap:1.5rem; } } .dsl .pricing-card_wrap { grid-column-gap:2rem; grid-row-gap:2rem; flex-flow:column; justify-content:flex-start; align-items:center; display:flex; } .dsl .tooltip__box-inner { transition:transform .4s cubic-bezier(.34,1.56,.64,1); transform:translateY(1em) scale(.9) rotate(.001deg); } .dsl [data-tooltip-hover]:hover [data-tooltip-box] .tooltip__box-inner { transform:translateY(0) scale(1) rotate(.001deg); } .dsl [data-wf--tooltip--variant=right] .tooltip__box-inner { transform:translate(-1em) scale(.9) rotate(.001deg); } .dsl [data-tooltip-hover]:hover [data-wf--tooltip--variant=right] .tooltip__box-inner { transform:translate(0) scale(1) rotate(.001deg); } .dsl .tooltip__card { position:relative; } .dsl .tooltip__card:after { content:""; position:absolute; bottom:-4px; left:50%; transform:translate(-50%) rotate(45deg); width:8px; height:8px; background-color:inherit; } .dsl [data-wf--tooltip--variant=right] .tooltip__card:after { bottom:unset; left:-4px; top:50%; transform:translateY(-50%) rotate(45deg); } .dsl .tab-list { position:relative; } .dsl .tab-item { position:relative; z-index:0; } .dsl .tab-item.active { z-index:3; } .dsl .tab-bg-hover { position:absolute; inset:0; z-index:0; pointer-events:none; } .dsl .tab-item-link { position:relative; z-index:2; transition:color .5s ease,background-color .5s ease,border .5s ease,box-shadow .5s ease; } .dsl .tab-item.active .tab-item-link { color:var(--neutral--darkest); background-color:var(--neutral--white); border:1px solid color-mix(in srgb,var(--_color-theme---lighter) 50%,transparent); box-shadow:0 8px 40px color-mix(in srgb,var(--_color-theme---darkest) 5%,transparent); } .dsl .cta_list { display:flex; align-items:flex-end; } .dsl .cta_list-item { position:relative; transform-origin:bottom center; } .dsl .cta_tooltip { opacity:0; transform:translate(-50%,calc(-100% + 10px)); transition:opacity .2s ease,transform .2s ease; position:absolute; left:50%; top:0; pointer-events:none; } .dsl .cta_list-item:hover .cta_tooltip { opacity:1; transform:translate(-50%,-140%); } .dsl .cta_tooltip:after { content:""; position:absolute; bottom:-4px; left:50%; transform:translate(-50%) rotate(45deg); width:8px; height:8px; background-color:inherit; } .dsl .pricing_card-list-item:last-child .pricing_card-list-line { opacity:0; } /* ---- odyn-bundle.css: hover tooltips ([data-tooltip-hover]) ---- */ .dsl [data-tooltip-hover] { position:relative; cursor:pointer; } .dsl [data-tooltip-box] { transition:all .4s cubic-bezier(.34,1.56,.64,1); opacity:0; visibility:hidden; z-index:90; } .dsl [data-tooltip-hover]:hover [data-tooltip-box] { opacity:1; visibility:visible; } .dsl [data-wf--tooltip--variant=right] [data-tooltip-box] { position:absolute; left:100%; top:50%; transform:translateY(-50%); } /* ---- odyn-bundle.css: tab panes (compare-plans sticky header) ---- */ .dsl [data-tab-content] { position:relative; } .dsl [data-tab-pane] { display:none; } .dsl [data-tab-pane].active { display:block; animation:pane-in .4s ease forwards; } .dsl [data-tab-pane].is-leaving { display:block; position:absolute; top:0; left:0; width:100%; pointer-events:none; animation:pane-out .4s ease both; } /* ---- odyn-bundle.css: comparison-table responsive cells ---- */ .dsl [data-pricing-cell-label], .dsl [data-pricing-row-icon] { display:none; } /* ---- odyn-bundle.css: price odometer ---- */ .dsl [data-odometer-element] { display:inline-flex; align-items:center; font-variant-numeric:tabular-nums; } .dsl [data-odometer-part=mask], .dsl [data-odometer-part=static] { display:inline-block; overflow:clip; padding:.05em; margin:-.05em; } .dsl [data-odometer-part=roller] { display:block; white-space:pre; text-align:center; will-change:transform; } /* The odometer splits the price one character per span, so the space in "EGP 29,100" becomes a static span whose entire content is that space. As an inline-block flex item its own inline formatting context collapses leading/trailing whitespace away, so the span measured 0 wide and the price read "EGP29,100" for the length of the roll — then snapped 8px wider when onComplete restored the plain text. `white-space: pre` keeps the space, the same way the roller already keeps the newlines it separates its digits with. */ .dsl [data-odometer-part=static] { display:inline-block; white-space:pre; } .dsl [data-pricing-monthly][data-pricing-yearly]:not([data-odometer-element]):not([data-pricing-monthly=show]):not([data-pricing-monthly=hide]) { display:inline-block; } /* ---- odyn-bundle.css: accordion list spacing ---- */ .dsl [data-acc-list] > [data-acc-item]:last-child { margin-bottom:0; } /* ---- dropship-3-0.shared.min.css: Webflow grid-placement ids * (pricing accordion header columns) ---- */ /* The accordion group header's highlight track, sitting under the featured package. Hand-placed by Webflow, so it does not follow CARD_ORDER on its own: the featured package is third of four, which is column 4 of [label + 4 plans]. */ .dsl #w-node-ad129676-b2e0-5b0d-1a29-380e496ae942-6cd18a3c { grid-area:1/4/2/5; } .dsl #w-node-_4316c291-6172-c08b-e7a0-797cd5c64517-6cd18a3c { grid-area:1/5/2/6; justify-self:end; } @media screen and (max-width:991px) { .dsl .margin-bottom { margin-top:0; margin-inline-start:0; margin-inline-end:0; } .dsl .cta_list { padding-inline-start:.75rem; } .dsl .cta_list-item { width:5rem; margin-inline-start:-.75rem; } .dsl .cta_item-link { filter:none; } .dsl .pricing_card { padding:1.5rem; } } @media screen and (max-width:767px) { .dsl .margin-bottom { margin-top:0; margin-inline-start:0; margin-inline-end:0; } .dsl .hide-mobile-landscape { display:none; } .dsl .heading-style-h4 { font-size:1rem; } .dsl .tab-wrap { grid-column-gap:1rem; grid-row-gap:1rem; } .dsl .tab-list { max-width:100%; overflow:auto; } .dsl .tab-list.is-blog { width:auto; } .dsl .cta_list { padding-inline-start:.6rem; } .dsl .cta_list-item { width:3.5rem; margin-inline-start:-.6rem; } .dsl .row-gap-3 { display:flex; } .dsl .pricing_card { padding:1.5rem; } .dsl .pricing_card-content-block { grid-column-gap:.75rem; grid-row-gap:.75rem; } .dsl .pricing-acc_toggle_button { justify-content:space-between; align-items:flex-end; display:flex; } .dsl .pricing-table_row { border-bottom-style:none; flex-flow:column; display:flex; } .dsl .pricing-table_item-title { border-bottom:1px solid var(--shade--5); } .dsl .pricing-table_item { border-bottom:1px solid var(--shade--5); justify-content:space-between; align-items:center; padding-top:1rem; padding-bottom:1rem; } .dsl .pricing-table_item.is-blue { background-color:#0000; } .dsl .pricing-table_item-wrap { flex-flow:column; display:flex; } .dsl .pricing-acc_heading-wrap { padding-top:1.5rem; } .dsl .pricing_number.heading-style-h4 { font-size:1.6rem; } .dsl .pricing-card_grid { grid-template-columns:1fr; } } @media (max-width:767px) { .dsl [data-pricing-cell-label] { display:block; } .dsl [data-pricing-row-icon] { display:flex; } } @media screen and (max-width:479px) { .dsl .margin-bottom { margin-top:0; margin-inline-start:0; margin-inline-end:0; } .dsl .tab-list { justify-content:flex-start; align-items:center; } .dsl .cta_list { margin-bottom:4rem; padding-inline-start:.3rem; } .dsl .cta_list-item { width:2.2rem; margin-inline-start:-.3rem; } .dsl .pricing-acc_item:where(.w-variant-d30ddc7f-b690-56b6-8c8d-dee3c8bf3f52) { margin-bottom:.5rem; } } /* ==== parity/solutions.css ==== */ /* Parity CSS for the 11 /solutions/* pages. Extracted verbatim from mirror CSS via `node scripts/extract-css.mjs` (dropship-3-0.shared.min.css + odyn-bundle.css), plus the inline Webflow embed mappings and odyn tab-state attribute rules below. Shared base classes live in parity/shared.css - not repeated here. */ /* ============================================================ Webflow embed: data attribute → CSS variable mappings (from the page's inline \3c style> block; drives .grid spans and .bento-card row/column spans) ============================================================ */ .dsl [data-grid-column-desktop="1"]{--grid-column-desktop:1}.dsl [data-grid-column-desktop="2"]{--grid-column-desktop:2}.dsl [data-grid-column-desktop="3"]{--grid-column-desktop:3}.dsl [data-grid-column-desktop="4"]{--grid-column-desktop:4}.dsl [data-grid-column-desktop="5"]{--grid-column-desktop:5}.dsl [data-grid-column-desktop="6"]{--grid-column-desktop:6} .dsl [data-grid-column-desktop="7"]{--grid-column-desktop:7}.dsl [data-grid-column-desktop="8"]{--grid-column-desktop:8}.dsl [data-grid-column-desktop="9"]{--grid-column-desktop:9}.dsl [data-grid-column-desktop="10"]{--grid-column-desktop:10}.dsl [data-grid-column-desktop="11"]{--grid-column-desktop:11}.dsl [data-grid-column-desktop="12"]{--grid-column-desktop:12} .dsl [data-grid-column-tablet="1"]{--grid-column-tablet:1}.dsl [data-grid-column-tablet="2"]{--grid-column-tablet:2}.dsl [data-grid-column-tablet="3"]{--grid-column-tablet:3}.dsl [data-grid-column-tablet="4"]{--grid-column-tablet:4}.dsl [data-grid-column-tablet="5"]{--grid-column-tablet:5}.dsl [data-grid-column-tablet="6"]{--grid-column-tablet:6} .dsl [data-grid-column-tablet="7"]{--grid-column-tablet:7}.dsl [data-grid-column-tablet="8"]{--grid-column-tablet:8}.dsl [data-grid-column-tablet="9"]{--grid-column-tablet:9}.dsl [data-grid-column-tablet="10"]{--grid-column-tablet:10}.dsl [data-grid-column-tablet="11"]{--grid-column-tablet:11}.dsl [data-grid-column-tablet="12"]{--grid-column-tablet:12} .dsl [data-grid-column-mobilel="1"]{--grid-column-mobilel:1}.dsl [data-grid-column-mobilel="2"]{--grid-column-mobilel:2}.dsl [data-grid-column-mobilel="3"]{--grid-column-mobilel:3}.dsl [data-grid-column-mobilel="4"]{--grid-column-mobilel:4}.dsl [data-grid-column-mobilel="5"]{--grid-column-mobilel:5}.dsl [data-grid-column-mobilel="6"]{--grid-column-mobilel:6} .dsl [data-grid-column-mobilel="7"]{--grid-column-mobilel:7}.dsl [data-grid-column-mobilel="8"]{--grid-column-mobilel:8}.dsl [data-grid-column-mobilel="9"]{--grid-column-mobilel:9}.dsl [data-grid-column-mobilel="10"]{--grid-column-mobilel:10}.dsl [data-grid-column-mobilel="11"]{--grid-column-mobilel:11}.dsl [data-grid-column-mobilel="12"]{--grid-column-mobilel:12} .dsl [data-grid-column-mobilep="1"]{--grid-column-mobilep:1}.dsl [data-grid-column-mobilep="2"]{--grid-column-mobilep:2}.dsl [data-grid-column-mobilep="3"]{--grid-column-mobilep:3}.dsl [data-grid-column-mobilep="4"]{--grid-column-mobilep:4}.dsl [data-grid-column-mobilep="5"]{--grid-column-mobilep:5}.dsl [data-grid-column-mobilep="6"]{--grid-column-mobilep:6} .dsl [data-grid-column-mobilep="7"]{--grid-column-mobilep:7}.dsl [data-grid-column-mobilep="8"]{--grid-column-mobilep:8}.dsl [data-grid-column-mobilep="9"]{--grid-column-mobilep:9}.dsl [data-grid-column-mobilep="10"]{--grid-column-mobilep:10}.dsl [data-grid-column-mobilep="11"]{--grid-column-mobilep:11}.dsl [data-grid-column-mobilep="12"]{--grid-column-mobilep:12} .dsl [data-grid-gap-column="1"]{--grid-gap-column:1}.dsl [data-grid-gap-column="2"]{--grid-gap-column:2}.dsl [data-grid-gap-column="3"]{--grid-gap-column:3}.dsl [data-grid-gap-column="4"]{--grid-gap-column:4}.dsl [data-grid-gap-column="5"]{--grid-gap-column:5}.dsl [data-grid-gap-column="6"]{--grid-gap-column:6}.dsl [data-grid-gap-column="7"]{--grid-gap-column:7}.dsl [data-grid-gap-column="8"]{--grid-gap-column:8} .dsl [data-grid-gap-row="1"]{--grid-gap-row:1}.dsl [data-grid-gap-row="2"]{--grid-gap-row:2}.dsl [data-grid-gap-row="3"]{--grid-gap-row:3}.dsl [data-grid-gap-row="4"]{--grid-gap-row:4}.dsl [data-grid-gap-row="5"]{--grid-gap-row:5}.dsl [data-grid-gap-row="6"]{--grid-gap-row:6}.dsl [data-grid-gap-row="7"]{--grid-gap-row:7}.dsl [data-grid-gap-row="8"]{--grid-gap-row:8} .dsl [data-number-row="1"]{--number-row:1}.dsl [data-number-row="2"]{--number-row:2}.dsl [data-number-row="3"]{--number-row:3}.dsl [data-number-row="4"]{--number-row:4}.dsl [data-number-row="5"]{--number-row:5}.dsl [data-number-row="6"]{--number-row:6} .dsl [data-number-column="1"]{--number-column:1}.dsl [data-number-column="2"]{--number-column:2}.dsl [data-number-column="3"]{--number-column:3}.dsl [data-number-column="4"]{--number-column:4}.dsl [data-number-column="5"]{--number-column:5}.dsl [data-number-column="6"]{--number-column:6} .dsl [data-number-column="7"]{--number-column:7}.dsl [data-number-column="8"]{--number-column:8}.dsl [data-number-column="9"]{--number-column:9}.dsl [data-number-column="10"]{--number-column:10}.dsl [data-number-column="11"]{--number-column:11}.dsl [data-number-column="12"]{--number-column:12} /* Webflow embed: hide scrollbar on the tab list */ .dsl .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .dsl .no-scrollbar::-webkit-scrollbar { display: none; } /* ============================================================ Tabs runtime state (odyn-bundle.css attribute selectors + keyframes; classes applied by the tab controller) ============================================================ */ .dsl [data-tab-content] { position: relative; } .dsl [data-tab-pane] { display: none; } .dsl [data-tab-pane].active { display: block; animation: pane-in .4s ease forwards; } .dsl [data-tab-pane].is-leaving { display: block; position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; animation: pane-out .4s ease both; } /* ============== extracted: section/component classes ============== */ .dsl .tab-wrap { grid-column-gap:1.5rem; grid-row-gap:1.5rem; flex-flow:column; width:100%; padding-bottom:0; padding-inline-end:0; display:flex; } .dsl .tab-wrap:where(.w-variant-3edf8d18-0b4f-c1d5-3856-fe89640c69bc) { grid-column-gap:2rem; grid-row-gap:2rem; } .dsl .tab-wrap:where(.w-variant-3bfed3cb-a923-1eeb-8f90-77d409f5f757) { grid-column-gap:0rem; grid-row-gap:0rem; grid-template-rows:auto; grid-template-columns:1.25fr 4fr; grid-auto-columns:1fr; display:grid; } .dsl .tab-nav-wrap { flex-flow:column; justify-content:center; align-items:center; display:flex; } .dsl .tab-nav-wrap:where(.w-variant-3bfed3cb-a923-1eeb-8f90-77d409f5f757) { justify-content:flex-end; align-items:flex-start; padding-bottom:1.5rem; display:flex; } .dsl .tab-content-wrap { width:100%; position:relative; } .dsl .tab-content-wrap:where(.w-variant-3bfed3cb-a923-1eeb-8f90-77d409f5f757) { grid-template-rows:auto auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; display:block; } .dsl .tab-nav-slot, .dsl .tab-content-slot { display:contents; } .dsl .tab-list { background-color:var(--_color-theme---lightest); border-radius:.75rem; justify-content:center; align-items:center; padding:.25rem; display:flex; position:relative; overflow:hidden; } .dsl .tab-item { white-space:nowrap; justify-content:center; align-items:center; margin-bottom:0; display:inline-block; position:relative; } .dsl .tab-item-link { height:2rem; color:var(--shade--70); font-size:var(--_typography---text-s--font-size); font-weight:var(--_typography---font-weight--medium); letter-spacing:var(--_typography---text-r--letter-spacing); background-color:#fff0; border:1px solid #fff0; border-radius:.5rem; padding:.25rem 1rem; text-decoration:none; position:relative; } .dsl .tab-link-slot { width:100%; height:100%; display:contents; } .dsl .tab-bg-hover { z-index:1; background-color:var(--shade--5); pointer-events:none; border-radius:.5rem; position:absolute; inset:0%; } .dsl .grid { grid-template-rows:1fr; grid-auto-columns:1fr; grid-template-columns:repeat(var(--grid-column-desktop),1fr); grid-column-gap:calc(var(--grid-gap-column)*1rem); grid-row-gap:calc(var(--grid-gap-row)*1rem); width:100%; height:100%; display:grid; } .dsl .grid.grid-coloumn-2 { grid-template-columns:1fr 1fr; } .dsl .card-header-wrap:where(.w-variant-4ec444d4-5d12-e5d0-3038-4dcda7d82000) { z-index:1; } .dsl .card-heading-wrap { grid-column-gap:.5rem; grid-row-gap:.5rem; justify-content:flex-start; align-items:center; margin-bottom:1.5rem; display:flex; } .dsl .card-heading-wrap:where(.w-variant-11e1bb60-3492-96b4-bf46-75e70844ed40), .dsl .card-heading-wrap:where(.w-variant-4ec444d4-5d12-e5d0-3038-4dcda7d82000), .dsl .card-heading-wrap:where(.w-variant-40d65a7b-64ef-8ef2-f998-fd0b3fc245aa) { margin-bottom:1rem; } .dsl .card-backround { z-index:1; background-color:var(--_color-theme---lightest); border:1px #a7a7a70d; width:100%; height:100%; position:absolute; inset:1px; } .dsl .card-backround:where(.w-variant-29b9d662-a95a-89b6-445b-485167854fe4) { background-color:var(--neutral--white); } .dsl .card-backround:where(.w-variant-bf92d758-1b02-e98a-4b96-35d84a3340b4) { background-color:var(--neutral--transparent); } .dsl .card-backround:where(.w-variant-95fcc25e-7d40-f121-3c94-2cef4a5867b2) { background-color:#0000; border-style:none; border-radius:0; } .dsl .card-backround:where(.w-variant-2bdbe395-60f3-a8be-780a-cc4fa2a4f13d) { background-image:radial-gradient(circle at 50% 74%,#1448cb1a,#1448cb00 53%); } .dsl .card-padding-wrap { padding:3rem; position:relative; overflow:visible; } .dsl .card-padding-wrap:where(.w-variant-131fa725-38c5-39f3-fe71-968fe3df6cdd) { padding:1.5rem; } .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { border-radius:0; padding:0; } .dsl .card-padding-wrap:where(.w-variant-1e04679b-90d3-3f94-de5e-768fe9efbb99) { border-radius:inherit; } .dsl .card-layout-slot { display:contents; } .dsl .card-brackground-slot { z-index:0; width:100%; height:100%; position:absolute; inset:0%; } .dsl .card-layout { z-index:1; grid-column-gap:1.5rem; grid-row-gap:1.5rem; flex-flow:column; display:flex; position:relative; } .dsl .card-layout:where(.w-variant-2c0f791f-3417-1664-9eea-732bfcbbcb13) { flex-flow:column-reverse; } .dsl .card-layout:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e) { grid-column-gap:1.5rem; grid-row-gap:1.5rem; flex-flow:row; grid-template-rows:auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; grid-auto-flow:dense; place-items:center stretch; display:grid; } .dsl .card-layout:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4) { grid-column-gap:1.5rem; grid-row-gap:1.5rem; flex-flow:row-reverse; grid-template-rows:auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; grid-auto-flow:row; place-items:center stretch; display:grid; } .dsl .card-heading-slot { display:contents; } .dsl .card-heading-slot:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e), .dsl .card-heading-slot:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4) { display:block; } .dsl .card-image-slot { display:contents; } .dsl .card-image-slot:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e), .dsl .card-image-slot:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4) { display:block; } .dsl .card-wrap { width:100%; overflow:hidden; container-type:inline-size; } .dsl .card-wrap:where(.w-variant-a32d14e0-7c09-319f-9f75-f08b3a300d97) { overflow:visible; } .dsl .cta_list { justify-content:center; align-items:center; margin-bottom:5rem; padding-inline-start:1rem; display:flex; } .dsl .cta_list-item { justify-content:center; align-items:center; width:6rem; margin-bottom:0; margin-inline-start:-1rem; display:flex; position:relative; } .dsl .cta_item-link { z-index:1; filter:drop-shadow(-4px 0 20px #00000026); pointer-events:auto; background-color:#0000; justify-content:center; align-items:center; width:100%; height:100%; display:flex; position:relative; } .dsl .cta_icon-img { pointer-events:none; object-fit:contain; width:100%; } .dsl .cta_tooltip { z-index:0; background-color:var(--neutral--lightest); opacity:0; font-size:var(--_typography---text-s--font-size); font-weight:var(--_typography---font-weight--medium); white-space:nowrap; border-radius:.5rem; padding:.25rem .63rem; transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1); position:absolute; top:0; transform:translateY(-80%); } .dsl .background-curve-wrap { pointer-events:none; justify-content:center; align-items:stretch; max-width:80rem; margin-inline-start:auto; margin-inline-end:auto; display:flex; position:absolute; inset:0%; } .dsl .background-curve-wrap:where(.w-variant-1e2fa4c7-612f-78c4-a972-01cd0e0ad45b) { background-image:linear-gradient(180deg,var(--_color-theme---lightest),var(--neutral--white)); } .dsl .background-curve-wrap:where(.w-variant-c48d80d6-30d2-48cf-95e2-5c47d84bbd2e) { background-image:linear-gradient(180deg,var(--_color-theme---lighter),var(--neutral--white)); } .dsl .background-curve { background-color:var(--neutral--white); width:100%; height:100%; } .dsl .background-curve.is-left { border-start-end-radius:70%; } .dsl .background-curve.is-right { border-start-start-radius:70%; } .dsl .slider_item { border-radius:1rem; } .dsl .slider_item.swiper-slide { flex:none; justify-content:flex-start; align-items:flex-start; width:27.5%; min-width:min(12rem,90%); padding-inline-start:.5rem; padding-inline-end:.5rem; display:flex; } .dsl .layout-block { flex-flow:column; display:flex; } .dsl .layout-block.row-gap-6 { grid-template-rows:auto auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; } .dsl .row-gap-3 { grid-row-gap:var(--_sizes---gap--gap-3); } .dsl .icon-wrap { aspect-ratio:1; object-fit:cover; width:1rem; max-width:none; height:1rem; position:relative; } .dsl .icon-wrap:where(.w-variant-6376e298-0878-6bec-92b5-b6d163b20579) { width:1.5rem; height:1.5rem; } .dsl .icon-wrap:where(.w-variant-a56152a4-aef1-e6bf-1b29-1a064f3d1908) { width:1.25rem; height:1.25rem; } .dsl .icon-wrap:where(.w-variant-7c968c8a-7cd2-bf02-6630-e887aa0ea528) { width:2rem; height:2rem; } .dsl .icon-wrap:where(.w-variant-13d0214e-3153-eff5-302f-1345da82c8e7) { width:3rem; height:3rem; } .dsl .icon-wrap:where(.w-variant-49ec1022-d254-6b06-9c85-b646514142ff) { width:4rem; height:4rem; } .dsl .icon-wrap:where(.w-variant-59aadbd8-a8fd-640f-789c-c22e3d29713b) { width:5rem; height:5rem; } .dsl .icon-wrap:where(.w-variant-f1d370bc-061a-7131-e7fb-1a9766b5bd86) { width:auto; height:100%; } .dsl .icon-image { border-radius:inherit; width:100%; height:100%; position:absolute; inset:0%; } .dsl .icon-image:where(.w-variant-a56152a4-aef1-e6bf-1b29-1a064f3d1908) { border-radius:inherit; } .dsl .solutions_heading-wrap { grid-column-gap:1.5rem; grid-row-gap:1.5rem; flex-flow:column; justify-content:center; align-items:flex-start; display:flex; } .dsl .solutions_eyebrow-wrap { grid-column-gap:.5rem; grid-row-gap:.5rem; justify-content:flex-start; align-items:center; display:flex; } .dsl .solutions_image-wrap { aspect-ratio:552/590; justify-content:flex-start; align-items:center; display:flex; position:relative; } .dsl .solutions_image { aspect-ratio:944/590; max-width:none; height:100%; box-shadow:0 0 140px 0 var(--_color-theme---tint--20); object-fit:cover; border-radius:1rem; position:absolute; inset:0% auto 0% 0%; } .dsl .bento-card { background-color:var(--neutral--white); grid-column-end:span var(--number-column); grid-row-end:span var(--number-row); border-radius:1rem; flex-flow:column; justify-content:space-between; align-items:stretch; width:100%; height:100%; display:flex; overflow:hidden; } .dsl .bento-card:where(.w-variant-a86a4d16-e070-7409-4103-3b5615b7b7e8) { flex-flow:column-reverse; } .dsl .bento-card:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26) { flex-flow:row; grid-template-rows:auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; display:flex; } .dsl .bento-card:where(.w-variant-43dd5c05-661c-c14e-e442-9928f06ff012) { flex-flow:row-reverse; grid-template-rows:auto auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; display:flex; } .dsl .bento-card-content { grid-column-gap:1rem; grid-row-gap:1rem; flex-flow:column; padding:1.5rem; display:flex; position:relative; } .dsl .bento-card-content:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26), .dsl .bento-card-content:where(.w-variant-43dd5c05-661c-c14e-e442-9928f06ff012) { justify-content:center; align-items:stretch; width:50%; } .dsl .bento-image-wrap { flex-flow:column; flex:1; justify-content:center; align-items:center; display:flex; position:relative; } .dsl .bento-image-wrap:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26), .dsl .bento-image-wrap:where(.w-variant-43dd5c05-661c-c14e-e442-9928f06ff012) { width:50%; } .dsl .background { z-index:0; background-color:var(--neutral--white); background-image:linear-gradient(180deg,var(--_color-theme---lightest),var(--_color-theme---lighter)); position:absolute; inset:0%; } .dsl .background:where(.w-variant-94d7e812-2414-b71f-ac81-3b1e0e7af312) { background-image:linear-gradient(0deg,var(--_color-theme---lightest),var(--_color-theme---lighter)); } .dsl .background:where(.w-variant-1e2fa4c7-612f-78c4-a972-01cd0e0ad45b), .dsl .background:where(.w-variant-c48d80d6-30d2-48cf-95e2-5c47d84bbd2e) { background-image:none; } .dsl .background:where(.w-variant-fb5203e7-cb23-c031-61bf-b9c5d4b88d1a) { background-image:linear-gradient(0deg,var(--neutral--white),var(--_color-theme---lightest)); } .dsl .background:where(.w-variant-e6394aa5-9f5b-e9e6-a65f-0db9913b62cb) { background-color:var(--_color-theme---lightest); background-image:none; } .dsl .background:where(.w-variant-c919b1d0-ac42-0cca-a987-0a75a52e0427) { background-image:linear-gradient(180deg,var(--neutral--white),var(--_color-theme---lightest)); } .dsl .background:where(.w-variant-0eec946e-a1fb-dbd0-00c6-9e70fbd1a74b) { background-image:none; } .dsl .bento-image { object-fit:contain; object-position:50% 50%; width:100%; height:100%; position:relative; } .dsl .solution-tab_wrap { grid-column-gap:3rem; grid-row-gap:3rem; aspect-ratio:1216/661; border:1px solid var(--shade--5); background-color:var(--tint--50); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); border-radius:1rem; flex-flow:column; justify-content:flex-start; align-items:center; padding-top:3rem; padding-inline-start:3rem; padding-inline-end:3rem; display:flex; overflow:hidden; } .dsl .solution-tab_img { aspect-ratio:auto; border-top:1px solid var(--shade--5); border-inline-end:1px solid var(--shade--5); border-inline-start:1px solid var(--shade--5); object-fit:contain; object-position:50% 0%; border-start-start-radius:.75rem; border-start-end-radius:.75rem; height:100%; } .dsl .card-heading-icon-wrap { justify-content:flex-start; align-items:center; margin-bottom:1.5rem; display:flex; } .dsl .grid-slot { display:contents; } .dsl .solutions_layout { grid-column-gap:4rem; grid-row-gap:4rem; grid-template-rows:1fr; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; width:100%; display:grid; } .dsl .solutions_layout.grid-coloumn-2 { grid-template-columns:1fr 1fr; } .dsl .background-animated { padding:0; position:absolute; inset:0%; } .dsl .background-wrap { z-index:0; pointer-events:none; width:100%; height:100%; position:absolute; inset:0%; } .dsl .background-wrap:where(.w-variant-c18e3fde-4f6d-935c-29d3-6f62f8a5ada8), .dsl .background-wrap:where(.w-variant-0eec946e-a1fb-dbd0-00c6-9e70fbd1a74b) { pointer-events:none; } .dsl .background-animated-fade { z-index:1; background-image:linear-gradient(180deg,#fff0,var(--neutral--white)); height:15%; position:absolute; inset:auto 0% 0%; } .dsl .background-animated-fade:where(.w-variant-c30a20a4-706a-aebc-9bed-b3d118501fe5) { background-image:linear-gradient(180deg,#fff0,var(--_color-theme---lightest)); } .dsl .background-animated-fade:where(.w-variant-5671e5f5-f010-8896-767e-af3f74051660) { background-image:linear-gradient(180deg,#fff0,var(--_color-theme---lighter)); } .dsl .background-animated-fade:where(.w-variant-aa9e7edf-d1eb-4375-d49e-7821a6f8a98c) { background-image:linear-gradient(180deg,#fff0,var(--_color-theme---light)); } .dsl .tab-list { position:relative; } .dsl .tab-item { position:relative; z-index:0; } .dsl .tab-item.active { z-index:3; } .dsl .tab-bg-hover { position:absolute; inset:0; z-index:0; pointer-events:none; } .dsl .tab-item-link { position:relative; z-index:2; transition:color .5s ease,background-color .5s ease,border .5s ease,box-shadow .5s ease; } .dsl .tab-item.active .tab-item-link { color:var(--neutral--darkest); background-color:var(--neutral--white); border:1px solid color-mix(in srgb,var(--_color-theme---lighter) 50%,transparent); box-shadow:0 8px 40px color-mix(in srgb,var(--_color-theme---darkest) 5%,transparent); } .dsl .cta_list { display:flex; align-items:flex-end; } .dsl .cta_list-item { position:relative; transform-origin:bottom center; } .dsl .cta_tooltip { opacity:0; transform:translate(-50%,calc(-100% + 10px)); transition:opacity .2s ease,transform .2s ease; position:absolute; left:50%; top:0; pointer-events:none; } .dsl .cta_list-item:hover .cta_tooltip { opacity:1; transform:translate(-50%,-140%); } .dsl .cta_tooltip:after { content:""; position:absolute; bottom:-4px; left:50%; transform:translate(-50%) rotate(45deg); width:8px; height:8px; background-color:inherit; } /* ============== extracted: Webflow variant classes (not in shared.css) ============== */ .dsl .card-header-wrap:where(.w-variant-4ec444d4-5d12-e5d0-3038-4dcda7d82000) { z-index:1; } .dsl .card-heading-wrap:where(.w-variant-11e1bb60-3492-96b4-bf46-75e70844ed40), .dsl .card-heading-wrap:where(.w-variant-4ec444d4-5d12-e5d0-3038-4dcda7d82000), .dsl .card-heading-wrap:where(.w-variant-40d65a7b-64ef-8ef2-f998-fd0b3fc245aa) { margin-bottom:1rem; } .dsl .card-backround:where(.w-variant-95fcc25e-7d40-f121-3c94-2cef4a5867b2) { background-color:#0000; border-style:none; border-radius:0; } .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { border-radius:0; padding:0; } .dsl .background-curve-wrap:where(.w-variant-1e2fa4c7-612f-78c4-a972-01cd0e0ad45b) { background-image:linear-gradient(180deg,var(--_color-theme---lightest),var(--neutral--white)); } .dsl .icon-wrap:where(.w-variant-7c968c8a-7cd2-bf02-6630-e887aa0ea528) { width:2rem; height:2rem; } .dsl .icon-wrap:where(.w-variant-13d0214e-3153-eff5-302f-1345da82c8e7) { width:3rem; height:3rem; } .dsl .bento-card:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26) { flex-flow:row; grid-template-rows:auto; grid-template-columns:1fr 1fr; grid-auto-columns:1fr; display:flex; } .dsl .bento-card-content:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26), .dsl .bento-card-content:where(.w-variant-43dd5c05-661c-c14e-e442-9928f06ff012) { justify-content:center; align-items:stretch; width:50%; } .dsl .bento-image-wrap:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26), .dsl .bento-image-wrap:where(.w-variant-43dd5c05-661c-c14e-e442-9928f06ff012) { width:50%; } .dsl .background:where(.w-variant-94d7e812-2414-b71f-ac81-3b1e0e7af312) { background-image:linear-gradient(0deg,var(--_color-theme---lightest),var(--_color-theme---lighter)); } .dsl .background:where(.w-variant-1e2fa4c7-612f-78c4-a972-01cd0e0ad45b), .dsl .background:where(.w-variant-c48d80d6-30d2-48cf-95e2-5c47d84bbd2e) { background-image:none; } .dsl .background:where(.w-variant-e6394aa5-9f5b-e9e6-a65f-0db9913b62cb) { background-color:var(--_color-theme---lightest); background-image:none; } .dsl .background-animated-fade:where(.w-variant-c30a20a4-706a-aebc-9bed-b3d118501fe5) { background-image:linear-gradient(180deg,#fff0,var(--_color-theme---lightest)); } @media screen and (max-width:991px) { .dsl .grid { grid-template-columns:repeat(var(--grid-column-tablet),1fr); } .dsl .card-padding-wrap { padding:2rem; } .dsl .card-padding-wrap:where(.w-variant-131fa725-38c5-39f3-fe71-968fe3df6cdd) { padding:1.5rem; } .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { padding:0; } .dsl .cta_list { padding-inline-start:.75rem; } .dsl .cta_list-item { width:5rem; margin-inline-start:-.75rem; } .dsl .cta_item-link { filter:none; } .dsl .bento-card { grid-template-rows:auto auto; grid-template-columns:1fr; grid-auto-columns:1fr; } .dsl .bento-image-wrap { height:100%; } .dsl .bento-image { object-fit:contain; object-position:50% 100%; } .dsl .solution-tab_wrap { padding-top:2rem; padding-inline-start:2rem; padding-inline-end:2rem; } .dsl .solutions_layout { grid-column-gap:2rem; grid-row-gap:2rem; } } @media screen and (max-width:991px) { .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { padding:0; } } @media screen and (max-width:767px) { .dsl .tab-wrap { grid-column-gap:1rem; grid-row-gap:1rem; } .dsl .tab-list { max-width:100%; overflow:auto; } .dsl .tab-list.is-blog { width:auto; } .dsl .grid { grid-template-columns:repeat(var(--grid-column-mobilel),1fr); grid-column-gap:1rem; grid-row-gap:1.5rem; flex-flow:column; } .dsl .card-heading-wrap { margin-bottom:1rem; } .dsl .card-padding-wrap { padding:1rem; } .dsl .card-padding-wrap:where(.w-variant-131fa725-38c5-39f3-fe71-968fe3df6cdd) { padding:1.5rem; } .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { padding:0; } .dsl .card-layout:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e), .dsl .card-layout:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4) { flex-flow:column; justify-content:flex-start; align-items:stretch; display:flex; } .dsl .card-heading-slot:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4), .dsl .card-heading-slot:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e), .dsl .card-image-slot:where(.w-variant-7b80b257-c8c9-385e-0c12-61f7184248d4), .dsl .card-image-slot:where(.w-variant-b4e23e38-8855-b9c9-86e5-2ccb16ed3c1e) { display:contents; } .dsl .cta_list { padding-inline-start:.6rem; } .dsl .cta_list-item { width:3.5rem; margin-inline-start:-.6rem; } .dsl .slider_item.swiper-slide { width:50%; } .dsl .row-gap-3 { display:flex; } .dsl .solutions_heading-wrap { justify-content:flex-start; align-items:center; } .dsl .bento-card-content { padding:1rem; } .dsl .bento-image { object-fit:contain; } .dsl .solution-tab_wrap { aspect-ratio:auto; justify-content:flex-end; align-items:center; padding-top:1.5rem; padding-inline-start:1.5rem; padding-inline-end:1.5rem; } .dsl .solution-tab_img { height:auto; } .dsl .solutions_layout { flex-flow:column; display:flex; } } @media screen and (max-width:767px) { .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { padding:0; } } @media screen and (max-width:479px) { .dsl .tab-list { justify-content:flex-start; align-items:center; } .dsl .grid { grid-template-columns:repeat(var(--grid-column-mobilep),1fr); } .dsl .card-padding-wrap:where(.w-variant-131fa725-38c5-39f3-fe71-968fe3df6cdd) { padding:1.5rem; } .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { padding:0; } .dsl .cta_list { margin-bottom:4rem; padding-inline-start:.3rem; } .dsl .cta_list-item { width:2.2rem; margin-inline-start:-.3rem; } .dsl .background-curve { align-self:flex-end; height:100%; } .dsl .slider_item.swiper-slide { width:80%; } .dsl .bento-card:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26), .dsl .bento-card:where(.w-variant-43dd5c05-661c-c14e-e442-9928f06ff012) { flex-flow:column; } .dsl .bento-card-content:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26), .dsl .bento-card-content:where(.w-variant-43dd5c05-661c-c14e-e442-9928f06ff012), .dsl .bento-image-wrap:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26), .dsl .bento-image-wrap:where(.w-variant-43dd5c05-661c-c14e-e442-9928f06ff012) { width:auto; } .dsl .solution-tab_wrap { padding-top:1rem; padding-inline-start:1rem; padding-inline-end:1rem; } .dsl .solution-tab_img { border-start-start-radius:.5rem; border-start-end-radius:.5rem; } } @media screen and (max-width:479px) { .dsl .card-padding-wrap:where(.w-variant-a83fff2a-e29b-9232-a1bc-c3331b860c31) { padding:0; } .dsl .bento-card:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26), .dsl .bento-card:where(.w-variant-43dd5c05-661c-c14e-e442-9928f06ff012) { flex-flow:column; } .dsl .bento-card-content:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26), .dsl .bento-card-content:where(.w-variant-43dd5c05-661c-c14e-e442-9928f06ff012), .dsl .bento-image-wrap:where(.w-variant-f177b17d-9fdc-6b34-ffa4-3e468cd63f26), .dsl .bento-image-wrap:where(.w-variant-43dd5c05-661c-c14e-e442-9928f06ff012) { width:auto; } } /* ==== parity/ui.css ==== */ /* ---------------------------------------------------------------------------- * Shared UI primitives parity CSS (owned by the ui-components agent). * Rules extracted verbatim from the mirrored Webflow stylesheets via * `node scripts/extract-css.mjs` - do not hand-edit values. * Sections: accordion_*, grid-slider_*, button-icon (slider arrows), * video-lightbox_*, plus the tiny custom .ui-marquee helpers. * ------------------------------------------------------------------------- */ /* ===== accordion_* (FAQ structure: mirror/pages/faq.html) ================ */ .dsl .accordion_wrap { width: 100%; } .dsl .accordion_item { margin-bottom: 1rem; } .dsl .accordion_component { background-color: var(--neutral--white); border-radius: 1rem; transition: background-color 0.3s; overflow: hidden; } .dsl .accordion_component:hover { background-color: #efefef4d; } .dsl .accordion_toggle_heading { margin-top: 0; margin-bottom: 0; } .dsl .accordion_toggle_heading.text-size-medium:where(.w-variant-d30ddc7f-b690-56b6-8c8d-dee3c8bf3f52) { color: var(--shade--60); font-size: var(--_typography---text-s--font-size); font-weight: var(--_typography---font-weight--medium); } .dsl .accordion_toggle_button { text-align: start; background-color: #0000; justify-content: space-between; align-items: center; width: 100%; padding: 1.5rem; display: flex; } .dsl .accordion_toggle_icon { justify-content: center; align-items: center; margin: -1rem -0.7rem; display: flex; } .dsl .accordion_content_wrap { width: 100%; display: none; position: relative; overflow: visible clip; } .dsl .accordion_content_padding { padding-bottom: 1.5rem; padding-inline-start: 1.5rem; padding-inline-end: 3rem; } .dsl .accordion_paragraph_wrap { padding-top: 0.3em; } /* ===== grid-slider_* (mirror/pages/university.html, index.html) ========== */ .dsl .grid-slider_component { grid-column-gap: 3rem; grid-row-gap: 3rem; flex-flow: column; display: flex; } .dsl .grid-slider_list.swiper-wrapper { grid-column-gap: 2rem; grid-row-gap: 2rem; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; display: grid; } .dsl .grid-slider_item.swiper-slide { flex-flow: column; flex: none; justify-content: flex-start; align-items: stretch; height: 100%; display: flex; } .dsl .grid-slider_layout { grid-column-gap: 2rem; grid-row-gap: 2rem; flex-flow: wrap; place-content: center space-between; align-items: center; display: flex; } /* Buttons are hidden on desktop; the slider is mobile-only on the original. */ .dsl .grid-slider_layout { display: none; } .dsl .grid-slider_button_layout { grid-column-gap: 0.5rem; grid-row-gap: 0.5rem; flex-flow: wrap; justify-content: flex-start; align-items: center; display: flex; } .dsl .grid-slider_button { cursor: pointer; -webkit-user-select: none; user-select: none; justify-content: center; align-items: center; display: flex; } .dsl .grid-slider_button.swiper-button-disabled { opacity: 0.5; pointer-events: none; } .dsl .grid-slider_bullet_wrap { flex-flow: wrap; justify-content: flex-start; align-items: center; display: flex; grid-column-gap: 0.4rem !important; grid-row-gap: 0.4rem !important; width: auto !important; } .dsl .grid-slider_bullet_item { opacity: 0.2; background-color: currentColor; border-radius: 100vw; flex: none; width: 1rem; min-width: 0; height: 1rem; padding: 0; transition-property: width, opacity; transition-duration: 0.2s, 0.2s; transition-timing-function: ease, ease; } .dsl .grid-slider_bullet_item.is-active { opacity: 100; background-color: currentColor; width: 1.5rem; } .dsl .grid-slider_draggable_wrap { background-color: color-mix(in hsl, currentColor 20%, transparent); border-radius: 100vw; width: 14rem; min-width: 0; max-width: 100%; height: 1rem; } .dsl .grid-slider_draggable_handle { cursor: grab; background-color: currentColor; border-radius: 100vw; width: 30%; height: 100%; } .dsl .grid-slider_control { text-align: center; background-color: color-mix(in hsl, currentColor 20%, transparent); border-radius: 100vw; min-width: 6em; padding: 0.5em 1em; } .dsl .grid-slider_img { aspect-ratio: 2 / 2.2; object-fit: cover; background-color: currentColor; border-radius: 1rem; width: 100%; } .dsl .grid-slider_embed { display: none; } /* ===== button-icon (default grid-slider arrows) =========================== */ .dsl .button-icon { aspect-ratio: 1; background-color: #0000; border-radius: 100vw; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; position: relative; overflow: hidden; } .dsl .button-icon:where(.w-variant-4931d0e6-ca0d-ecf9-ed75-d11693d53861) { transform: rotate(180deg); } .dsl .button-icon-inner-wrap { z-index: 1; background-color: var(--neutral--lightest); border-radius: inherit; width: 100%; height: 100%; position: absolute; inset: 0%; } .dsl .button-icon-inner { z-index: 2; border-radius: inherit; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: absolute; inset: 0%; } .dsl .button-icon-inner-hover { z-index: 1; background-color: var(--neutral--lighter); border-radius: inherit; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: absolute; inset: 0%; } .dsl .button-icon-image { width: 1.25rem; height: 1.25rem; } .dsl .button-icon-image:where(.w-variant-07c505cf-5e99-7829-ac2b-73cc2beeaf8a) { transform: rotate(180deg); } /* ===== video-lightbox_* (overlay player) ================================== */ .dsl .video-lightbox { z-index: 101; padding: var(--_sizes---padding-global); pointer-events: none; justify-content: center; align-items: center; display: flex; position: fixed; inset: 0; overflow: hidden; } .dsl .video-lightbox_dark { pointer-events: auto; background-color: #13131380; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: absolute; top: 0; left: 0; } .dsl .video-lightbox_calc { width: 100%; max-width: 80rem; height: 100%; position: relative; } .dsl .video-lightbox_player { border-top-style: solid; border-top-width: 0.5rem; border-top-color: var(--neutral--white); border-right-style: solid; border-inline-end-width: 0.5rem; border-inline-end-color: var(--neutral--white); border-bottom-style: solid; border-bottom-width: 0.5rem; border-bottom-color: var(--neutral--white); border-left-style: solid; border-inline-start-width: 0.5rem; border-inline-start-color: var(--neutral--white); background-color: var(--neutral--white); pointer-events: none; color: #fff; isolation: isolate; border-radius: 1rem; justify-content: center; align-items: center; width: 100%; display: flex; position: relative; overflow: hidden; -webkit-mask-image: radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); } .dsl .video-lightbox_before { padding-top: 62.5%; } .dsl .video-lightbox_video { width: 100%; height: 100%; padding-bottom: 0; padding-inline-end: 0; display: block; position: absolute; top: 0; left: 0; } .dsl .video-lightbox_close { z-index: 600; background-color: var(--neutral--white); pointer-events: auto; border-radius: 50%; justify-content: center; align-items: center; width: 3rem; height: 3rem; display: flex; position: absolute; inset: -1rem -1rem auto auto; } .dsl .video-lightbox_close-bar { background-color: currentColor; width: 1em; height: 0.125em; position: absolute; transform: rotate(-45deg); } .dsl .video-lightbox_close-bar.is--duplicate { transform: rotate(45deg); } /* Port helpers (not in the original CSS): center the player inside _calc and * keep native controls clickable through the pointer-events:none player. */ .dsl .video-lightbox_calc { display: flex; justify-content: center; align-items: center; } .dsl .video-lightbox_video { pointer-events: auto; } /* ===== .ui-marquee (port-only helper for the shared Marquee primitive) ==== */ .dsl .ui-marquee { overflow: hidden; display: flex; width: 100%; } .dsl .ui-marquee_track { display: flex; flex: none; width: max-content; will-change: transform; } .dsl .ui-marquee_group { display: flex; flex: none; } @media screen and (max-width: 991px) { .dsl .grid-slider_list.swiper-wrapper { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .dsl .grid-slider_layout { display: block; } } @media screen and (max-width: 767px) { .dsl .grid-slider_component { grid-column-gap: 2rem; grid-row-gap: 2rem; flex-flow: column; justify-content: flex-start; align-items: stretch; display: flex; } .dsl .grid-slider_trim { margin-inline-start: -0.5rem; margin-inline-end: -0.5rem; } .dsl .grid-slider_wrap.swiper { width: 100%; max-width: 100%; margin-inline-start: 0; margin-inline-end: 0; overflow: visible; } .dsl .grid-slider_list.swiper-wrapper { grid-column-gap: 0rem; grid-row-gap: 0rem; flex-flow: row; justify-content: flex-start; align-items: stretch; display: flex; } .dsl .grid-slider_item.swiper-slide { flex-flow: column; flex: none; justify-content: flex-start; align-items: stretch; width: 50%; min-width: min(12rem, 90%); padding-inline-start: 0.5rem; padding-inline-end: 0.5rem; display: flex; } .dsl .grid-slider_layout { justify-content: center; align-items: center; } .dsl .grid-slider_button_layout { justify-content: center; align-items: center; } } @media screen and (max-width: 479px) { .dsl .grid-slider_item.swiper-slide { width: 100%; } .dsl .grid-slider_control { min-width: auto; padding: 0.5rem 0.8rem; } } .dsl{background:#fff;color-scheme:light;min-height:100dvh} /* A short page (project-owner, contact, a legal document) does not fill the viewport, so its footer floated mid-screen with white space under it. Only pages built on .main-wrapper are touched, so the long scroll-driven pages (home, pricing, /tools/*) keep their block layout. */ .dsl:has(> .main-wrapper){display:flex;flex-flow:column} .dsl > .main-wrapper{flex:1} .dsl{ --_typography---font-family--body-font:Inter,"Noto Sans Arabic",Arial,sans-serif; --_typography---font-family--heading-font:"Plus Jakarta Sans","Noto Sans Arabic",Arial,sans-serif } /* Footer social buttons — the generic .button-icon.up is the arrow button (rotated 270°, white glyph on a white disc). Socials keep the disc and hover, but the glyph is upright, 20px, and brand-coloured so it is actually visible. */ .dsl .button-icon.is-social { cursor: pointer; transform: none; } .dsl .button-icon.is-social .button-icon-inner { color: var(--brand--700, #1d4ed8); } .dsl .button-icon.is-social .button-icon-inner svg { width: 20px; height: 20px; display: block; } .dsl .button-icon.is-social:hover .button-icon-inner-wrap { background-color: #fff; } /* RTL: directional glyphs (eyebrow "›", button chevrons) point the other way in Arabic. */ [dir="rtl"] .dsl .eyebrow-icon svg, [dir="rtl"] .dsl .button-icon-main { transform: scaleX(-1); } /* SolutionHero `fit`: the image stays inside the container instead of bleeding off the page edge (absolute + max-width:none above). Used where the picture has content at its far edge (the /download phones). The image column gets a little more room to compensate. */ @media (min-width: 992px) { .dsl .solutions_layout.is-fit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } } .dsl .solutions_layout.is-fit .solutions_image-wrap { aspect-ratio: auto; display: block; } .dsl .solutions_layout.is-fit .solutions_image { position: static; inset: auto; width: 100%; height: auto; } /* The Unicorn Studio canvas sizes itself and can overshoot its host box; the decorative background must never paint outside its own section. */ .dsl .background-wrap, .dsl .background-animated { overflow: hidden; } /* Recolours the hero scene to the tool's own colour, on the heroes that ask for it only. `color` keeps the backdrop's luminosity, so the blend needs an opaque one: isolating the box without painting it left the backdrop transparent and the tint went down at full strength, flooding the hero. The white base is the page colour the scene already sits on, so light areas stay light and only the coloured wash changes hue. */ .dsl .background-wrap:has(> .background-tint) { isolation: isolate; background-color: var(--neutral--white, #fff); } .dsl .background-tint { position: absolute; inset: 0; mix-blend-mode: color; pointer-events: none; } .dsl [data-us-project] > canvas { max-inline-size: 100%; max-block-size: 100%; } /* Hero marquee skeletons start fully clipped. The GSAP ticker re-clips them every frame against the centre line; if it is ever starved (background tab, stalled rAF) a card keeps whatever clip it last had — and an unprocessed card must show its real content, not a grey placeholder parked on the wrong side of the mark. */ .dsl .hero_marquee_skeleton { clip-path: inset(0 100% 0 0 round 12px); } /* Webflow's `.grid` is the same class NAME as Tailwind's `grid` display utility, so every `className="grid ..."` on these routes also picked up a full Webflow grid layout: template rows/columns driven by --grid-column-* variables that only exist on Webflow markup, plus width/height:100%. The layer order hands the contested properties back to Tailwind, but grid-template-rows, grid-auto-columns and height have no utility at most call sites and would still land. Webflow always emits the data attribute alongside the class and a Tailwind utility never does, which is the discriminator used here. */ .dsl .grid:not([data-grid-column-desktop]) { grid-template-rows: none; grid-template-columns: none; grid-auto-columns: auto; grid-column-gap: normal; grid-row-gap: normal; width: auto; height: auto; } /* The Webflow normalize block carries `a:active, a:hover { outline: 0 }`, which sits above @layer base and so erased the Trellis focus ring (app.css) for any link focused with the keyboard while the pointer rested on it. Re-assert the ring at matching specificity, later in the same layer. Still inside `landing`, so an explicit focus/focus-visible utility on a page continues to win. */ .dsl a:focus-visible, .dsl button:focus-visible, .dsl input:focus-visible, .dsl select:focus-visible, .dsl textarea:focus-visible, .dsl summary:focus-visible, .dsl [tabindex]:focus-visible { outline: var(--shape-border-thick) solid var(--color-border-primary); outline-offset: 2px; } } /* * ============================================================================ * landing-rtl.css: RTL (Arabic-default) overrides for the dropship-skinned * Ta3mir landing. Imported by the two landing route modules (home + pricing) * AFTER landing.css so these rules win the cascade. * * CONVENTION (do not deviate): EVERY selector is prefixed `[dir="rtl"] .dsl`. * - `[dir="rtl"]` lives on (set by the i18n provider for locale=ar). * - `.dsl` is the landing page-scope wrapper. * So each rule only applies inside the Arabic landing and never leaks to the * English (LTR) landing, the app shell, or any other route. * * Flexbox and CSS grid mirror automatically under dir=rtl, so we ONLY correct * hard PHYSICAL-property breakage (margins/padding/borders/positions bound to * left|right, and chevrons that point the wrong way). GSAP x-translations are * deliberately left LTR in the controllers (see the shared plan) and are NOT * re-flipped here, to avoid double-mirroring the open/close motion. * * This file (created by the nav package) owns: the mega-nav RTL fixes, the * global Arabic letter-spacing reset, and the locale/theme toggle sizing. * Per-section RTL fixes (hero bg-position, tabs arrows, accordion chevrons, * footer columns, tooltip offsets, list padding, …) are appended by the * integration package in the clearly-marked section at the very bottom. * ============================================================================ */ /* Layered as `landing-rtl`, declared after `landing` and before Tailwind's * `components`/`utilities` in app/app.css and app/root.tsx. The layer - not the * import order these routes happen to use - is now what guarantees these rules * beat landing.css, and what keeps both of them below any Tailwind utility a * page writes on an element. See the banner in landing.css. */ @layer landing-rtl { /* ------------------------------------------------------------------ global */ /* Source uses negative letter-spacing on several headings/labels, which is * wrong for Arabic script, so neutralise tracking across the RTL landing. */ [dir="rtl"] .dsl { letter-spacing: 0; } /* ...and the headings need saying explicitly. The rule above only sets the * container, and landing.css declares `letter-spacing:var(--_typography---h1 * --letter-spacing)` (-.02em) DIRECTLY on `.dsl h1`..`h6` - a direct * declaration always beats an inherited one, so every Arabic heading kept the * Latin tracking this block exists to remove, cramping the joined letterforms. * `:is()` carries the specificity of its heaviest argument, so this is (0,2,1) * against landing.css's (0,1,1), and `landing-rtl` outranks `landing` anyway. */ [dir="rtl"] .dsl :is(h1, h2, h3, h4, h5, h6) { letter-spacing: 0; } /* ============================================================================ * MEGA-NAV * ==========================================================================*/ /* --- bar: logo → nav gap and the auto-margins that pin the clusters ------- */ /* The logo's trailing gap sits on its inline-end; in RTL that is the left. */ [dir="rtl"] .dsl .mega-nav__bar-logo { margin-right: 0; margin-left: 3em; } /* margin-*:auto is physical: mirror it so the nav/actions clusters pin to the * mirrored edge instead of collapsing onto the logo. */ [dir="rtl"] .dsl .mega-nav__bar-list { margin-left: 0; margin-right: auto; } [dir="rtl"] .dsl .mega-nav__bar-list.is--actions { margin-left: 0; margin-right: auto; } /* --- dropdown panel column dividers + padding (products panel) ------------ */ /* is-products carries the divider padding toward the video column, which is * grid-column 4 (right in LTR, left in RTL), so swap the inline padding. */ [dir="rtl"] .dsl .mega-nav__panel-col.is-products { padding-right: 0; padding-left: 1.5rem; } /* is-video: divider border + padding move to the mirrored (inline-end) side. */ [dir="rtl"] .dsl .mega-nav__panel-col.is-video { border-left: none; border-right: 1px solid var(--shade--10); padding-left: 0; padding-right: 1.5rem; } /* --- dropdown panel column dividers + padding (resources panel) ----------- */ [dir="rtl"] .dsl .mega-nav__panel-col.is-resources { border-right: none; border-left: 1px solid var(--shade--10); padding-right: 0; padding-left: 1.5rem; } [dir="rtl"] .dsl .mega-nav__panel-col.is-tutorial { padding-left: 0; padding-right: 1.5rem; } /* --- panel text alignment ------------------------------------------------- */ [dir="rtl"] .dsl .mega-nav__panel-label { padding-left: 0; padding-right: .5rem; } [dir="rtl"] .dsl .mega-nav__panel-video-link { text-align: right; } /* --- chevron flips -------------------------------------------------------- */ /* Mobile dropdown affordance points into the (mirrored) sub-panel edge. */ @media screen and (max-width: 991px) { [dir="rtl"] .dsl .mega-nav__bar-link-icon.is--dropdown { transform: rotate(90deg); } } /* Mobile "Back" chevron: the source glyph points left; mirror it to point * right so "back" reads correctly toward the RTL start edge. */ [dir="rtl"] .dsl .mega-nav__bar-link.is--back .mega-nav__bar-link-icon { transform: scaleX(-1); } /* --- mobile "Back" control anchoring -------------------------------------- */ /* Absolutely positioned at the inline-start of the bar, right in RTL. */ [dir="rtl"] .dsl .mega-nav__back { left: auto; right: -.625em; } /* ============================================================================ */ /* === section RTL fixes (appended during integration) === */ /* (Reserved for the integration package: hero background-position, product-tab * arrows, accordion/tooltip chevrons, footer column alignment, ul/ol inline * padding, and any marquee direction:ltr islands. Add rules below, each still * prefixed `[dir="rtl"] .dsl …`.) */ /* Footer link arrows ("Arrow Right") point toward the LTR reading end; mirror * them to point toward the RTL start edge. */ [dir="rtl"] .dsl .footer_link-icon { transform: scaleX(-1); } /* Right-hand button chevrons ("Chevron Right", e.g. the CTA / pre-footer * buttons) point into the inline-end; flip so they lead toward RTL start. */ [dir="rtl"] .dsl .button-icon-main.is-right { transform: scaleX(-1); } /* Rich-text bullet/number lists carry a hard-coded left indent from Webflow; * move the indent to the inline-start (right) in RTL. */ [dir="rtl"] .dsl .w-richtext ul, [dir="rtl"] .dsl .w-richtext ol { padding-left: 0; padding-right: 1.25em; } /* Reset the default UA list indent on the footer social/legal rows so the * flex rows sit flush against the RTL start edge. */ [dir="rtl"] .dsl .footer_social-link-list, [dir="rtl"] .dsl .footer_legal-link-list { padding-right: 0; } /* --- GSAP transform islands (direction:ltr) ------------------------------- */ /* A handful of home sections animate DECORATIVE composites with GSAP math that * assumes an LTR coordinate system (centre-relative dx, index-based fan, CSS * translateX tracks). Under dir=rtl those layers mirror and the transformed * elements land outside their clip / twist the wrong way, so the visual breaks * (in the hero, only the central spine paints). We pin ONLY the direction- * sensitive decorative container to LTR so it renders identically to EN, then * restore RTL on the inner TEXT so Arabic copy still reads right-to-left. * (Audited and intentionally NOT pinned: ChromeExtensionSection, y/rotateX/z- * rotate with a centred perspective origin, no horizontal translation; and * AiSearchSection, a vertical-only (y) looping list. Neither is direction- * sensitive, so both keep normal RTL flow.) */ /* Hero marquee showcase (HeroSection bt(): curve + skeleton-clip ticker driven * off the component centre, plus the CSS translateX marquee track). */ [dir="rtl"] .dsl .hero_marquee_component, [dir="rtl"] .dsl [data-hero-marquee] { direction: ltr; } [dir="rtl"] .dsl .hero_marquee_text-wrap, [dir="rtl"] .dsl .hero_marquee_text { direction: rtl; text-align: start; } /* CtaSection icon-arc (at(): rotation + arc-drop assigned by DOM index while * gathering to the measured list centre). The icons are pure imagery; only the * tooltip labels carry text, so restore those to RTL. */ [dir="rtl"] .dsl .cta_list { direction: ltr; } [dir="rtl"] .dsl .cta_tooltip { direction: rtl; } /* ============================================================================ * /tools/* SOLUTION PAGES (appended by the wire package) * The template is flex/grid throughout, so most of it mirrors automatically; * the rules below correct only the hard physical-property breakage found in * the ported solutions.css. (The SolutionCta arc reuses .cta_list/.cta_tooltip * which are already pinned LTR above. The features tab strip is left in natural RTL * flow: the GSAP Flip pill animates viewport-rect deltas via transforms, which * are direction-agnostic, so no direction:ltr island is needed there.) * ==========================================================================*/ /* Hero screenshot: pinned to the physical left edge and overflowing right * (inset:0% auto 0% 0%; max-width:none). Mirror the pin so the image hugs the * inline-start (right) and overflows toward the page edge, like EN. */ [dir="rtl"] .dsl .solutions_image { inset: 0% 0% 0% auto; } /* Bento cards: make the card copy align to the RTL start edge explicitly * (defensive: the content normally inherits `start`, but the injected rich * text must never fall back to a left-aligned ancestor). */ [dir="rtl"] .dsl .bento-card-content { text-align: right; } /* Perk cards: same defensive start-alignment for the icon-card copy. */ [dir="rtl"] .dsl .card-heading-wrap, [dir="rtl"] .dsl .card-header-wrap { text-align: right; } /* Heading block "center on desktop / LEFT on mobile" variant (used by the * features section, ≤767px sets text-align:left), so Arabic must flip to right. */ @media screen and (max-width: 767px) { [dir="rtl"] .dsl .heading-wrap:where(.w-variant-a51b1ac5-052b-9fd1-bcea-d90382842e72) { text-align: right; } } /* 0084 — region menu: its styles moved to app/components/region-menu.css (2026-10-01), so the auth pages can use the same picker. Only the navbar-specific sizing stays here. */ @media screen and (max-width: 991px) { .dsl .mega-nav__bar-reg { flex: none; } } /* 0084 — "prices shown in your currency, charged in EGP" line under the pricing hero. */ .dsl .dsl-currency-note { margin: -1.5rem auto 0; padding: 0 1.5rem 1.5rem; max-width: 46rem; text-align: center; font-size: var(--_typography---text-s--font-size, 0.875rem); color: #5b6478; } /* 0211 — the Enterprise («contact sales») card under the four plan cards: one wide card, a * «from» price that follows the period toggle, and a contact button. Built from the landing's * own tokens so it reads as a fifth card, not a banner. Stacks below 768px. */ .dsl .pricing-enterprise { margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: center; padding: 2rem; border: 1px solid var(--shade--10); border-radius: 1.5rem; background-color: var(--neutral--white); } .dsl .pricing-enterprise_name { margin: 0; font-size: 1.375rem; font-weight: var(--_typography---font-weight--medium, 600); } .dsl .pricing-enterprise_desc { margin: 0.375rem 0 1rem; color: #5b6478; } .dsl .pricing-enterprise_list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.5rem 1.25rem; font-size: 0.9375rem; font-weight: var(--_typography---font-weight--medium, 500); } .dsl .pricing-enterprise_list li { display: flex; align-items: center; gap: 0.5rem; } .dsl .pricing-enterprise_tick { width: 1.25rem; height: 1.25rem; flex: none; } .dsl .pricing-enterprise_side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; min-width: 15rem; } .dsl .pricing-enterprise_from { margin: 0; font-size: 0.875rem; color: #5b6478; } .dsl .pricing-enterprise_cta { margin-top: 0.75rem; display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0.75rem 1.25rem; border-radius: 999px; background-color: var(--_color-theme---normal); color: var(--neutral--white); font-weight: var(--_typography---font-weight--medium, 600); text-decoration: none; } .dsl .pricing-enterprise_cta:hover { filter: brightness(0.95); } .dsl .pricing-enterprise_cta:focus-visible { outline: 2px solid var(--_color-theme---normal); outline-offset: 3px; } @media screen and (max-width: 767px) { .dsl .pricing-enterprise { grid-template-columns: 1fr; padding: 1.5rem; } .dsl .pricing-enterprise_side { min-width: 0; } } /* ── perks carousel arrows (GridSlider, home page, Swiper active ≤767px) ────── * `.grid-slider_button_layout` is a flex row, so prev/next already swap sides in * Arabic — and Swiper reads the RTL computed direction, so "prev" really is the * rightward slide. Only the glyphs were left behind: they are assets * (Arrow Left/Right.svg), which the bidi algorithm never mirrors. * * The button markup composes two rotations: the prev button carries * `w-variant-4931d0e6…` (rotate 180deg) AND its image carries `w-variant-07c505cf…` * (another 180deg), which cancel to leave "Arrow Left" pointing left; the next * button rotates nothing and points right. Rather than stack a third transform, * these two rules move the image rotation to the OTHER button, so prev points * right and next points left. Same specificity, so source order decides — the * :where() variant rule must stay second. */ [dir="rtl"] .dsl .grid-slider_button .button-icon-image { transform: rotate(180deg); } [dir="rtl"] .dsl .grid-slider_button .button-icon-image:where(.w-variant-07c505cf-5e99-7829-ac2b-73cc2beeaf8a) { transform: none; } } /* plus-jakarta-sans-cyrillic-ext-400-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(data:font/woff2;base64,d09GMgABAAAAAAQAABAAAAAACEwAAAOmAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbahwoBmA/U1RBVEgAZBEICoMkgmcLFgABNgIkAyYEIAWFNAdiDAcb3wYgngU5GW9qFpxcIlPzNPVjx7JSP3iet+s9971Zzn7Q8yEHG1C91aUi2aFP6j1c07wqko0ssGwl8RDyRPehgRL1M2Z+akJOifHwcbX3d1ZvWowiysMskA0v3NL0wohiuX//l5EDn7gc/6xs+9oikSbyg6LCvegvncOw87lpLFr4wF0a4AIKCLJtSQTXJ0FUc+nW+HePCPAAAEUITQhwS1VELdq2lyi7mSBClGUAfAiQcQoLURwIEAbFSTgpoQyQKZ5QAIQmFC1RkEIyQbp0pOgGEpLm3PgkW7FBndVwEN1qI7KmHk2wjgMoN/MuNwf0QzU7Z/j7kmFrZXIicgFQg/oLEmlS/KkQSoFU6jDNFoqGGVviKyYilIFgeICEGqgfEltBPQFQQINQmoBQhgEQgQJp4CdRoy9ui0o85+N8br7clI0pPwej4FsISZ8AAG4AocADpkJsAmKJAgaVDFMxCCmFTiMiwqAEjpMAFgtkLp3maM5wD/V4R2VGmtOOnpVldz6417+z3Hs/fjQ3vH/P8VTm8PUfPsiyszHmoVMsvf3e3PCx2Nz17t3UTWLjVinvrCiLufT6svGmhrWE6j1tzjbHRH9FSDV/huK83vrzvQ3fI6ndj0Zy4vGOxfHp5Y1xeSVeq2vI33SA3qppmjKsHF6ZEGh7/N5KGlGRkPj/ZcXKUFbp4I6/swFaqzO4Ma0xdWffCXO6Pk1bcMKYilvTUptzO3JeZGW9yGnPTWl2rULNEeDgdJnXYLs0jrQATKiT/q1eKoDq8x6fmt/6kqv5H9f6D+D76dxIgF8Hd4wmlf/C2bAnARD8c2b1CGD+x+Y/y3RXsZSaYiOmkDkC4A/SVw6msSjArYwhliYAAAAUAab1aFK6gHsy1ZSJ5GiRKf5RJtNa/MsMRW7JbKqsltnlGy71VyZZRzQe4YCJuAlcAgYBASK0IhA+h+aGwWGxiY5BNcKNFPyXRTSMIyJwXYs4fF3zMJaefnNbRz6JWyM8BCMQF4gQ1zGIwSL5COaageEcIIQVyWcpV6jaNCYBAB/3oC9fpXzFLGNS1cPDhIcenLt9c3odbByMS851lFpG5gSIfGIfNo4VsYQ1kdcJGCW/zusPwACXQSNgjSTBBhgOyzwy+zRO0LeRVF2TgEDPYsADhE8RQ4/8DQob9KVubTdI9VgUOrQYYhO7OOyNE6/83y22ZK7Ttxot1TzIenBoNZW4JkySwrgAB+bE17sUW2WXxLfqlLEJAA==) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAY8AA8AAAAACCwAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABYAAAAWABEABEdQT1MAAAFwAAAASwAAAGYrviSMR1NVQgAAAbwAAAAnAAAAKLj8uOpPUy8yAAAB5AAAAEwAAABgXqOjr1NUQVQAAAIwAAAAPQAAAEjnc8sdY21hcAAAAnAAAABDAAAAZAHsImBnYXNwAAACtAAAAAgAAAAIAAAAEGdseWYAAAK8AAABWAAAAaAMR8wnaGVhZAAABBQAAAA2AAAANiIkFjloaGVhAAAETAAAAB8AAAAkCMQChGhtdHgAAARsAAAAIAAAACYPJwD7bG9jYQAABIwAAAAWAAAAFgJYAcJtYXhwAAAEpAAAABwAAAAgABoAwm5hbWUAAATAAAABLAAAArQ80WAIcG9zdAAABewAAABNAAAAYifABt8AAQAAAAwAAAAAAAAAAgABAAEAAwABAAB42j3HpQECQAAAwHvBNZOZgBWQRGQAtOA2Py7XTkBVV08cjMYTze3suteU4X4XEDar816Zz2RRWVAWtUFXRxAFSRAlUfjPAyrAB5UAeNpjYGRgYOBiUANCJhc3nxAGoZzEkjwGPgYQYAER//+DSABaSQVVAHjaY2BhimOcwMDKwMDUxRTBwMDgDaEZ4xg0GJ0YUAE7EDPBOCH+3v4MBxh4Fbaw8P1XYmBgFWBMUWBgnAySY5JgegmkFBiYAdSUCkx42g3HsQ1AUBgGwPt+CgmlESymQqJ8iTUMZDjvuhMxKawKm3qOs2XgavudWYxW/UrlpT7607eA8APRSgVAAAAAeNpjYGBgAmJmIBYBkoxgmoUhAEgLACFInJdBgcGRYQHDQUYmhS3//2OK/P/5/8n/A/9T/zv+Z7wfDDQDDQAA8SQUYgAAAQAB//8AD3jabRA1QkNRLMnXenF3d/mGQ+3DiDsTNiInKCss+AFgxv0YPQILMuNODee9uCfAQh0AuekSGBDABDaAKCUjBv2YE8Y6El/uv5DWdf1lSNdPg+BP9mcBzdClP98IIKGEWXkZQlQGY0J7N9o7m173HAMYN0eXL3GHh4g4+/YWymHOKRcQwJ8pwgn4/rEbwAE+INDermmQbiAZqgG4zNxcRdZULcs/XgYv8DHRsbFSpapJVvJPrmqqIufmZmXyQlYDSZWxsTHRAi9IMeh2jtUYWb6Rcl4nRc6S7SxROmO6LPrI6yEuiJzZb5C7YrqsntE6f6SB5RvMUn9VWoLJ5HCYTEmpuVWpFbVaWzFuOozmxE9V6qtOizcbHYAwTl7MYWKBAYjSJGG8Z3yavKurYc+a3+O/MAbml6IDI/sZzyMn6TktJQUFJc3ZOnlz3cVFZWVFxe5ceAeNy1AJAAEAAAACEi1gomnYXw889QADA+gAAAAA3bEsGAAAAADgp5Nc/2P/EAVQBKUAAAAGAAIAAAAAAAB42mNgZGBg4fuvxMDA2vo/+e9l1gCgCCrgBAB//AVQAHjaY2pgsGHqYeCGYYZVDAwwzDSPwRzISmdIBwB5hgYtAAAAIQA7AEcAUwBTAFMAUwCnALQA0AAAeNpjYGRgYOBiSGFgZ4hhYAXzEICZgREAE7gA3XjaLMY1AcMAAEXBF+aMFZC9zJ0jogrqpGiqIUUxEPw3HRDxw8KwA6AxHrpBZuS6SWqcdIucVrfZUegON166y4q7nnIim29YxCz0aHioj4O+MrLAbSgGgug7ioVl5lZQZmZmJv9wcvs+QSkcWWuYGS/uEvnghk9WyHq+88IdRzx4PvEsprkSMsbqc2Xk07KJaMaYGe/vnlH0SX6LRdbZFsvJrerzTUujd/YwkmiPcR9U51TJcegrjZ6I8oFB/fUzxgBTqh79G13vKs7ol5vQhrxd/MQJZZHCT6xQFuuv7322WNOmWsu37NU4hzkiCSXSP121RvrRvO2LPHg29qNGLPKq/k4uMEPO81ksjTztFfN6MqYKdbf0cqfyQ9SOGiF6ltQ+0NegAx1fYaVrDHjaY2BiAIP/qQwaDNgAFxCrMJxkZGJgZmRmZGFkZWRjZGdzTCpKLUtlL83LNDBwNGByDgIxjQycTDgTk0tLUpPzc5PAksYGZgDvLw/DAAAA) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* plus-jakarta-sans-vietnamese-400-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/plus-jakarta-sans-vietnamese-400-normal-Cg2kxhWu.woff2) format('woff2'), url(/assets/plus-jakarta-sans-vietnamese-400-normal-B8TCSmUq.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* plus-jakarta-sans-latin-ext-400-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/plus-jakarta-sans-latin-ext-400-normal-D127hM_v.woff2) format('woff2'), url(/assets/plus-jakarta-sans-latin-ext-400-normal-2ppkqaOR.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* plus-jakarta-sans-latin-400-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/plus-jakarta-sans-latin-400-normal-Dhut76fR.woff2) format('woff2'), url(/assets/plus-jakarta-sans-latin-400-normal-BDKaGhyp.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/* plus-jakarta-sans-cyrillic-ext-500-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(data:font/woff2;base64,d09GMgABAAAAAAQwABAAAAAACHQAAAPWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbahwoBmA/U1RBVEQAZBEICoMkgmULFgABNgIkAyYEIAWFXgdiDAcbAwdRlE3OAiA/C2NnWmqDevE1lV86rytbx0YiXN7GJix16cheg+c///7dZ+Z+SEzSUhXoEkLHLqv//fu/tfY3nUm+g2lnlqwhYmnWZ232zf5BQiV0qzxKoR5UjVQLFR7+uVfv+5lDN4WzaUwPWEASTFvwak+Pl2rLqgUqWr/l7mqeJpR5FlJkbclrawv4WyBZaRDdxDX5/xelhdVKE4m2zbooInWEO19jURQVPvBuOvDkAcHeliEDXwoiZxo1/tstIsAWAChCaEKAtVDJ1GlxfR+yN4oBZBkAkwkC5GqIAOJAgDAoloQlxZUBIvkTCoDQhKLN8VKYRQwXjizagXkAs434JyuYQT2rCECN1YtcoBrzICIWQLla63ltC57YDcVwpmCYNY1OyAtAdew3EEiTvR8LrhQIpZ4sGxUNU3fqKTYIVwZ6wxb4twhACrICgAIauNIEuDI0Ahw50sBOoCL3fkMFiomxx/Jz8zHHWET500Ih1xCSmuAAwBqAK7AF44Bd4MsRYFApIMBjEJKlWhoePhvhmMSB1Ro5D2fWZibFkofp/bPMacp6vCkbxnNyp3atz66P1K75BuuPeXZe/3xXNlQfm0uF9U+mqV1rYHNKX80eoYGO1L5bZLBZ37LabkggZnym3HIxRqivANhY/1+NlKncG/kn6rGEPYd8ufSeriuFFF+iE7bqaWxa2cwaeQv2IOd05Pu/v386CWdDv/T35UJC4mam3WgqVPQregeerWBu3ebN2oUbvNYNa6rhi42eyuXw8IeI7mbYQmSZbagRBFiwdM8fzreS7vMYYAP1qq91voMA1Q4fa+5fH3DIfZZa/wf49R3rCfj7vreXVLqyajqYUwAEL5tOveUx/znVL7LYKlnPKrmnolmug3QdfFMwL6AAa+kMvjQBAACgCLB3Q4ZkrYDnMeuxRGJMWIp9xLO0Yn/tRhXLTLY7LHOxtrLspWtkOQoWz3RiK1gvGpDu7RYZwAZpLaN/Ac04HxVYgSgPozliYCw2tMGgYyTfNo8UIapRLkpAFNGCCkRsCIUiIwkSrKIRmBCKtK3CeNoWCJaOBovWO1eiGjtbu6AdMojvZ7gAkSxeogxJckwwIY7zRM50xcsSL0Wivtr+a7VlzZbxdGA3ZJE8avQ8Osn60jlc6Io43TCRLFEbA7XGAKPhvtpGjuUcBq3PuCISsnGiorvImzBPYPxsJFXbCM7XsRrn4tCVkKHD7hpFxJrGULWyNQj1JhQ6tBhiJuZiYV6k/hXAuNiagHXH+8Rkbte5sz8+pJaoJtH4Rg5JTJoeMxsvf4RbbhkZAA==) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAY8AA8AAAAACBgAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABYAAAAWABEABEdQT1MAAAFwAAAASwAAAGYrviSMR1NVQgAAAbwAAAAnAAAAKLj8uOpPUy8yAAAB5AAAAEwAAABgXwmjulNUQVQAAAIwAAAAOgAAAETlF8weY21hcAAAAmwAAABDAAAAZAHsImBnYXNwAAACsAAAAAgAAAAIAAAAEGdseWYAAAK4AAABVgAAAaBSidNyaGVhZAAABBAAAAA2AAAANiIwFk1oaGVhAAAESAAAAB8AAAAkCNACd2htdHgAAARoAAAAIAAAACYPdgD9bG9jYQAABIgAAAAWAAAAFgJYAcJtYXhwAAAEoAAAABwAAAAgABoAwm5hbWUAAAS8AAABLwAAAqQ6hmJlcG9zdAAABewAAABNAAAAYifABt8AAQAAAAwAAAAAAAAAAgABAAEAAwABAAB42j3HpQECQAAAwHvBNZOZgBWQRGQAtOA2Py7XTkBVV08cjMYTze3suteU4X4XEDar816Zz2RRWVAWtUFXRxAFSRAlUfjPAyrAB5UAeNpjYGRgYOBiUANCJhc3nxAGoZzEkjwGPgYQYAER//+DSABaSQVVAHjaY2BhSmP8wsDKwMDUxRTBwMDgDaEZ4xg0GF0YUAE7EDPBOCH+3v4MBxh4Fbaw8P1XYmBgFWBMUWBgnAySY5JmegmkFBiYAfupCr142h3EAQaAQAAEwNm7KAqhJ/SxQEWAo4/3gLjBiJgUbP1dec+rpXK348ksBqtAxnyoomQB4Qe4iQTkAAB42mNgYGACYmYgFgGSjGCahSEASAsAIUicl0GBwZFhAcNBRiaFLf//Y4r8//n/yf8D/1P/O/5nvB8MNAMNAADxJBRiAAABAAH//wAPeNpFTgNob3EU/n7nGrON27v/WVdzejbSU5rN3JC9uDyH2ZlTri0bi1OcbRz7fOBRDNBr2gYHCRoCgBAnKYzd6qtHLSb58uRFaeTt28v/b99u3gtA0ADqpe3bfRWwmMUMX5IUksRpTGtnWk3J1XLJP4Zu2r6MmJlhCmu5vn7Y4fbIBANuN2UsYv25vvtcV+BiA4S86wMqp0PEogAQkk3TsT3XM27hJYmSGBYaHm7luZ7lT7fIXc91bNM0kkXJKCUrLzw8LFQSJSuMvX1TU6zwQjHlXbXJgp5ckpbzLbTG70PN1TTrke4L2d/vCrUlt5MyLxTp9r+CuAhVe/dO0SJjDSs23S38lcHG3inqS2r/LYyN0NR3YGikblbExYMDQjxLavzW2Uzd/f2PnTUuBgEAu8Nvhd5BvnWiyKILPvv+pptm+h/zM3Wnvkv3paX5Mt6m4gbj5lDjAAAAAQAAAAISLdvSVIpfDzz1AAMD6AAAAADdsSwYAAAAAOCnk1z/X/8KBWAEvwAAAAYAAgAAAAAAAHjaY2BkYGDh+6/EwMA653/83/WsCUARVMAJAIAbBU8AeNpjamCwYVrAwA3DDGsZGGCYaSGDEZCVx5AHAID/Bn4AAAAhADsARwBTAFMAUwBTAKcAtADQAAB42mNgZGBg4GJIYWBniGFgBfMQgJmBEQATuADdeNqVkQFHQ1EYhp/bVqlmgBCYQFFrFaUNVESrNGsKCbWtu7WtO9sd9i8C/aJAv6oHB02kHJ/v8b7v+b7rXCDHOxmi7BLwEVUDR5SitcBz5KNc4AwnfAbOfsvMU+Yt8AJbtALnOaAoy1HGXeuBF+XVwCvycmAJqJMw4JFXzkntfbo0uaJNS5ro3dGWYjr6lmfImDI7nrHZke6QVC5aXfr2RDXWv+aMS2pqE72q83vWCDdxg1tVt2e23cojnEOiW2CPIiUO2aVCzDMpiadv4p6S3pG1Lz3MJBtuvrAq/9pdl2OpjznCTQrM3i2E2zozt09JGDI1FV4Lv54SltRQadv/MrWmlvBivolTOGZi75Co67Px4z/E7jRh7okiTZMD1dTes1KmZtsqv7/G5hdcMmUkAHjaY2BiAIP/qQwaDNgAFxCrMJxkZGJgZmRmZGFkZWRjZGdzTCpKLUtlL83LNDBwNGByDgIxjQycTDgTk0tLUpPzc5PAksYGZgDvLw/DAAAA) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* plus-jakarta-sans-vietnamese-500-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/plus-jakarta-sans-vietnamese-500-normal-DiU8zqi-.woff2) format('woff2'), url(/assets/plus-jakarta-sans-vietnamese-500-normal-CvE5C8T-.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* plus-jakarta-sans-latin-ext-500-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/plus-jakarta-sans-latin-ext-500-normal-9VZagAe1.woff2) format('woff2'), url(/assets/plus-jakarta-sans-latin-ext-500-normal-CqEEAICU.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* plus-jakarta-sans-latin-500-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/plus-jakarta-sans-latin-500-normal-Bf-nb4oT.woff2) format('woff2'), url(/assets/plus-jakarta-sans-latin-500-normal-DYtqi0QS.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/* plus-jakarta-sans-cyrillic-ext-600-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(data:font/woff2;base64,d09GMgABAAAAAAQcABAAAAAACIgAAAPAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbahwoBmA/U1RBVEQAZBEICoMogmULFgABNgIkAyYEIAWFbgdiDAcbEwcgnge2zWYrRGrW2DqMIvVrh6cG/6B/9ecmGb7Z3Q/IFcgSYAe7BJC/X2tvBdPop7KYypr+m92/iE0nEhIeMkO6SiJfo3oCmXALgMKT3MtvBPKJY8aL5MhAnUgFTTtot/MqGvHOs2lU9Q389/gPWGD8OnXqgVcTwoAOlml+fY8ISAAABiEsQkCcfJqR9RrMrkL5sN7YgnIcgPcI0ND+tgWFgADhMEQRUQzp0EAhDQgMAMIiDJZGIQw0QxcQglR7gIaTAJxem07kgZk/RAFNG1EPIqmPikUAw83adWYBsiTlOuSSfR4QSqV+uYBYAWCym1dALhRa/LaQDgnkQ44ZqGCCgsHPGkQJIh1aQkoANhOAoqYTABjAAulQCCZ961aAVCpRQBK5DLnlpEyuQ94T/Fr/y+9P+P6+tpe2EKiCkPekgIyzOB0gAQwALACyIQkcxisYPoeQo0Vdxox0UqqeqmCkgYx4y2BooMbXE6tdS7YDeeteTdtzKT7/TrH4xvv3gwV37zJ1VaZO8+/d07S1WYNNu5i6+2Kw4H7JYN2dOwOKxHpeyepQljdHsPpoGnc8Z7AqpeqGBtHxiIV+RCkJvVwuTza50nPJys9dUz5nzMrN/fWWXWob/8YVjM3kb7y63KydGR+YGNbat1O1Nnf72eOGw1t7d6vW5M7MrDmEiZ9XoOg04PBxEtup5mrNDdy0qDUPziYfVw7bRInVXCoWmYxZcvMFXJlxd3WrOJAFIIAIUfZw5V4co5j3UgAEYLbbT8PLfUCASVM8W/aXnim937L2JcDT/cUyAcCLrSu6UeK/TuuPMAYAwdtmNYcI8P8ZNcFsjcfMVKpdBkNmL3wDzEaKAUbCCCBOBTTZUBRazyAgmT1Y5GLAGU102aJcGrENyarCtjTwX+lo7BBVvLLDlHLNTqaCVXYqPs2W1NCdIrIkyFCvaAoQQOIa5z+BNhATyzIFYxlUvA0ilUyBrRCZVMMQg2CRweXwmMbSsWwYy2MFy+JQYFiGo1tamoNnU2VgjhSHypCC2GRpC8bNls4Wo9ROLoW+TmRvokIsHs1SGB2a9JBJMET+vGMHI6VLSgvG3tG8qxbMWNCzBMByXOYyUOzG1PYUSR+BZJyytzvh0YwxNo/VIEAsuvgmi2yIRsTDPIa4MAViU2pHHotDpuKvcXFSeIgpDUN0CHYqQ5RGIIpElfr+RKwdB/J5k8HKyimksCLh2n1+E6BbgTtCZZihUmTdNt4Hm5nhckW9+7pY/GgOVVCd79LCtL/Iz9rnFgEAAAA=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAZEAA8AAAAACCwAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABYAAAAWABEABEdQT1MAAAFwAAAASwAAAGYrviSMR1NVQgAAAbwAAAAnAAAAKLj8uOpPUy8yAAAB5AAAAEsAAABgX26jxFNUQVQAAAIwAAAAOQAAAETle8wfY21hcAAAAmwAAABDAAAAZAHsImBnYXNwAAACsAAAAAgAAAAIAAAAEGdseWYAAAK4AAABWwAAAaLmwCeFaGVhZAAABBQAAAA2AAAANiI8FmNoaGVhAAAETAAAAB8AAAAkCNwCamhtdHgAAARsAAAAIAAAACYPwAD9bG9jYQAABIwAAAAWAAAAFgJZAcJtYXhwAAAEpAAAABwAAAAgABoAwm5hbWUAAATAAAABMQAAArQ8M2PVcG9zdAAABfQAAABNAAAAYifABt8AAQAAAAwAAAAAAAAAAgABAAEAAwABAAB42j3HpQECQAAAwHvBNZOZgBWQRGQAtOA2Py7XTkBVV08cjMYTze3suteU4X4XEDar816Zz2RRWVAWtUFXRxAFSRAlUfjPAyrAB5UAeNpjYGRgYOBiUANCJhc3nxAGoZzEkjwGPgYQYAER//+DSABaSQVVAHjaY2BhymOKYGBlYGDqAtIMDN4QmjGOQYPRlQEVsAMxE4wT4u/tz3CAgVdhCwvffyUGBlYBxhQFBsbJIDkmWaaXQEqBgRkAx84KLQB42h3EAQaAQBQFwHm/sBRCR+hQAQQqAixdPxqMiKaw/m/qPa+egbsfTyYxWgTSascgKjMIH60eBEoAAAB42mNgYGACYmYgFgGSjGCahSEASAsAIUicl0GBwZFhAcNBRiaFLf//Y4r8//n/yf8D/1P/O/5nvB8MNAMNAADxJBRiAAABAAH//wAPeNpFEDVCQ1EsyS+/irt7vVhdcHdnKidApq5AD4D7jPtF8Bkf/4K71/te3BPggQ2AqogDBvgghnCAaH1mLLow14c2Evy8B5GWa2p+emtqbjwAQK4soE3iXPkiAC1qMVuWyY/WMmJkp5EdNv+eWuycg7if+PV1jMAe+Pvz5jAPJAUEcGUKYA8OAva7gF0IajgGAvXfM/XTC6SA2TOhwWjQ66TS7CyWn11C2qK4uNgYPsvXxmKWVKrXGQ3GbNfomSyfjY2Ji9MWGYzaMFLjGMsTp5tkyqao4dDmwdLagRI+E2L6Pa8dLObzQixU9utgeZJ0s1TVGDUsaR7ExRa+MDY5PT9JWmDrVuvt1uRYkbDl167vtSbFikXNzQJBnN+tAQQHObGdyQUGINqo5TvqZwfIubrq83BMhvvC7hll2sBYmF/aocBBlOfkyHEAFe3k1NQrXTFZqnr1P7mPVBIAAAEAAAACEi2ts6lGXw889QADA+gAAAAA3bEsGAAAAADgp5Nc/1v/BQVwBNoAAAAGAAIAAAAAAAB42mNgZGBg4fuvxMDAuul/9N8e1gKgCCrgBACANgVOAHjaY2pgsGHawsANwwzrGRhgmGkxgw6QVcJQAgCIMQbIAAAAIQA7AEcAUwBTAFMAUwCnALQA0QAAeNpjYGRgYOBiSGFgZ4hhYAXzEICZgREAE7gA3XjaldEDklxRFAbgb2wUgvIrxEk7LsS27TZeM1hIsKCsIBsKbsaey2P9mPTNgL7BMfzsezZH98n17Z2j+0337Z6jB1zya44eXGIz5JQfc/SwlNIcPe2YzH+6b8CkOfu+UbN2ztETJo3P0f8o7onVvdVwVddbNWXv3ZdXV3ZOrOaDx/LKikq64XY1dZySlNTxXltZU1dHQkdZTUKsrSjptktuuKOmp+Oat6reaods90PmjiOrMj6S1w6xYg2RjISU49JOKyroioNlx3MpCSclZKW8XGb5wG3X3XZ62/nvySvqqf2zXfCOVvhHCxGiVRHOizV90V6YXCQjFW7kgZK8aEuR72iLVeS9D1HO6gUcYu2g378Kk6JysOh5J+G9WF0yzKwq1vVFU15yk6kc+AOSEmhBAAAAeNpjYGIAg/+pDBoM2AAXEKswnGRkYmBmZGZkYWRlZGNkZ3NMKkotS2Uvzcs0MHA0YHIOAjGNDJxMOBOTS0tSk/Nzk8CSxgZmAO8vD8MAAAA=) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* plus-jakarta-sans-vietnamese-600-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/plus-jakarta-sans-vietnamese-600-normal-Y4VTTRme.woff2) format('woff2'), url(/assets/plus-jakarta-sans-vietnamese-600-normal-5YsyKbU1.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* plus-jakarta-sans-latin-ext-600-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/plus-jakarta-sans-latin-ext-600-normal-DQgPU_Cg.woff2) format('woff2'), url(/assets/plus-jakarta-sans-latin-ext-600-normal-B0WRRYJ1.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* plus-jakarta-sans-latin-600-normal */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/plus-jakarta-sans-latin-600-normal-DLTa1BUW.woff2) format('woff2'), url(/assets/plus-jakarta-sans-latin-600-normal-BR_Ojra4.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/* inter-cyrillic-ext-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/inter-cyrillic-ext-500-normal-B0yAr1jD.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-500-normal-BmqWE9Dz.woff) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* inter-cyrillic-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/inter-cyrillic-500-normal-BasfLYem.woff2) format('woff2'), url(/assets/inter-cyrillic-500-normal-CxZf_p3X.woff) format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* inter-greek-ext-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/inter-greek-ext-500-normal-C4iEst2y.woff2) format('woff2'), url(/assets/inter-greek-ext-500-normal-2j5mBUwD.woff) format('woff'); unicode-range: U+1F00-1FFF; } /* inter-greek-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/inter-greek-500-normal-BIZE56-Y.woff2) format('woff2'), url(/assets/inter-greek-500-normal-Xzm54t5V.woff) format('woff'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* inter-vietnamese-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/inter-vietnamese-500-normal-DOriooB6.woff2) format('woff2'), url(/assets/inter-vietnamese-500-normal-mJboJaSs.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* inter-latin-ext-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/inter-latin-ext-500-normal-CV4jyFjo.woff2) format('woff2'), url(/assets/inter-latin-ext-500-normal-BxGbmqWO.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* inter-latin-500-normal */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/inter-latin-500-normal-Cerq10X2.woff2) format('woff2'), url(/assets/inter-latin-500-normal-BL9OpVg8.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }