.fl { --ds-font-marketing: var(--ds-font-sans); --ds-marketing-ink: var(--ds-ink); --ds-marketing-muted: var(--ds-gray-600); --ds-marketing-blue: var(--ds-blue-700); --ds-marketing-mist: var(--ds-gray-100); --ds-marketing-sky: var(--ds-sky); --ds-marketing-coral: var(--ds-coral); --ds-marketing-peach: var(--ds-peach); --ds-marketing-line: var(--ds-gray-200); --ds-marketing-amber: var(--ds-amber-500); --ds-text-marketing-hero: clamp(2.7rem, 4.6vw, 4.6rem); --ds-text-marketing-heading: clamp(2rem, 3vw, 3.1rem); --ds-text-marketing-body: 1rem; --ds-text-marketing-lead: 1.1rem; --ds-text-marketing-small: .8rem; --ds-text-marketing-card: 1.8rem; --ds-text-marketing-caption: .75rem; --ds-radius-marketing: 1.5rem; --ds-radius-marketing-inner: 1.1rem; --ds-radius-training-art: 120px 22px 22px 22px; --ds-radius-training-image: 18px 90px 18px 18px; --ds-shadow-marketing: 0 24px 70px rgb(23 43 69 / .08), 0 2px 8px rgb(23 43 69 / .03); } :root { --ds-amber-50: #FFFBEB; --ds-amber-100: #FEF3C7; --ds-amber-200: #FDE68A; --ds-amber-300: #FCD34D; --ds-amber-400: #FBBF24; --ds-amber-500: #F39B0E; --ds-amber-600: #C77700; --ds-amber-700: #9A5B00; --ds-amber-800: #7A4800; --ds-amber-900: #5C3600; --ds-white: #FFFFFF; --ds-gray-50: #F8FAFD; --ds-gray-100: #F2F5FA; --ds-gray-200: #DCE4ED; --ds-gray-300: #C4D0DD; --ds-gray-400: #94A3B8; --ds-gray-500: #5E6F85; --ds-gray-600: #526275; --ds-gray-700: #3E5065; --ds-gray-800: #263B56; --ds-gray-900: #172B45; --ds-ink: #172B45; --ds-blue-700: #3659B8; --ds-sky: #E8EEF8; --ds-coral: #AD342A; --ds-peach: #F9EEE7; --ds-black: #000000; --ds-control-border: #7D8CA0; --ds-text-rgb: 23 43 69; --ds-white-rgb: 255 255 255; --ds-gray-50-rgb: 248 250 253; --ds-gray-100-rgb: 242 245 250; --ds-gray-200-rgb: 220 228 237; --ds-gray-600-rgb: 82 98 117; --ds-amber-500-rgb: 243 155 14; --ds-bg: var(--ds-gray-50); --ds-surface: var(--ds-white); --ds-surface-sunken: var(--ds-gray-100); --ds-surface-ink: var(--ds-ink); --ds-text-on-ink: var(--ds-white); --ds-text-muted-on-ink: var(--ds-gray-300); --ds-border: var(--ds-gray-200); --ds-border-strong: var(--ds-gray-300); --ds-text: var(--ds-ink); --ds-text-muted: var(--ds-gray-600); --ds-text-subtle: var(--ds-gray-500); --ds-text-disabled: var(--ds-gray-400); --ds-text-inverse: var(--ds-white); --ds-focus-ring: var(--ds-ink); --ds-focus-ring-on-ink: var(--ds-white); --ds-overlay: 23 43 69 / .48; --ds-selection-bg: var(--ds-amber-200); --ds-accent: 243 155 14; --ds-on-accent: 23 43 69; --ds-on-accent-hover: 23 43 69; --ds-on-accent-pressed: 23 43 69; --ds-accent-hover: 224 143 13; --ds-accent-pressed: 204 130 12; --ds-accent-subtle: 255 251 235; --ds-accent-subtle-strong: 254 243 199; --ds-accent-border: 252 211 77; --ds-accent-edge: 199 119 0; --ds-accent-text: 154 91 0; --ds-accent-subtle-text: 122 72 0; --ds-warn: 243 155 14; --ds-warn-text: 122 72 0; --ds-warn-subtle: 255 251 235; --ds-warn-border: 252 211 77; --ds-warn-strong: 254 243 199; --ds-success: 22 101 52; --ds-success-text: 20 83 45; --ds-success-subtle: 240 253 244; --ds-success-border: 187 247 208; --ds-success-strong: 220 252 231; --ds-error: 185 28 28; --ds-error-text: 153 27 27; --ds-error-subtle: 254 242 242; --ds-error-border: 254 202 202; --ds-error-strong: 254 226 226; --ds-info: 3 105 161; --ds-info-text: 12 74 110; --ds-info-subtle: 240 249 255; --ds-info-border: 186 230 253; --ds-info-strong: 224 242 254; --ds-font-sans: "Plus Jakarta Sans", "Inter", "Inter Fallback", "Noto Sans Devanagari", "Noto Sans Tamil", "Nirmala UI", Latha, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --ds-text-display: clamp(2.25rem, 6vw, 3.5rem); --ds-text-title: 1.125rem; --ds-text-section: .875rem; --ds-text-card: .875rem; --ds-text-body: .875rem; --ds-text-small: .75rem; --ds-text-caption: .75rem; --ds-text-label: .75rem; --ds-text-button: .875rem; --ds-text-kpi: 1.5rem; --ds-text-kpi-hero: 1.75rem; --ds-text-mono: .8125rem; --ds-text-input: .875rem; --ds-text-input-compact: .75rem; --ds-text-ios-input: 1rem; --ds-leading-body: 18px; --ds-leading-small: 16px; --ds-leading-title: 24px; --ds-space-0: 0; --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px; --ds-radius-xs: 2px; --ds-radius-sm: 3px; --ds-radius-md: 4px; --ds-radius-lg: 6px; --ds-radius-xl: 8px; --ds-radius-2xl: 10px; --ds-radius-pill: 999px; --ds-shadow-0: none; --ds-shadow-1: 0 0 0 1px rgb(23 43 69 / .08); --ds-shadow-2: 0 0 0 1px rgb(23 43 69 / .10); --ds-shadow-3: 0 0 0 1px rgb(23 43 69 / .12); --ds-glow: 0 0 0 1px rgb(var(--ds-accent) / .5), 0 6px 20px rgb(var(--ds-accent) / .28); --ds-shadow-primary: inset 0 0 0 1px rgb(var(--ds-accent-edge)); --ds-shadow-secondary: inset 0 0 0 1px var(--ds-border-strong); --ds-shadow-field: none; --ds-shadow-focus: 0 0 0 2px var(--ds-white), 0 0 0 4px var(--ds-focus-ring); --ds-shadow-focus-on-ink: 0 0 0 2px var(--ds-ink), 0 0 0 4px var(--ds-focus-ring-on-ink); --ds-shadow-invalid: inset 0 0 0 1px var(--ds-ink); --ds-shadow-hairline: 0 1px 0 var(--ds-border); --ds-shadow-hairline-top: 0 -1px 0 var(--ds-border); --ds-shadow-hairline-frost: 0 1px 0 rgb(var(--ds-text-rgb) / .06); --ds-shadow-edge-accent: inset 2px 0 0 rgb(var(--ds-accent)); --ds-shadow-edge-accent-3: inset 3px 0 0 rgb(var(--ds-accent)); --ds-shadow-edge-ink-3: inset 3px 0 0 var(--ds-ink); --ds-shadow-edge-gray-3: inset 3px 0 0 var(--ds-gray-300); --ds-shadow-edge-warn-3: inset 3px 0 0 rgb(var(--ds-warn)); --ds-shadow-ring-warn: inset 0 0 0 1px rgb(var(--ds-warn-border)); --ds-shadow-ring-success: inset 0 0 0 1px rgb(var(--ds-success-border)); --ds-shadow-ring-error: inset 0 0 0 1px rgb(var(--ds-error-border)); --ds-shadow-ring-info: inset 0 0 0 1px rgb(var(--ds-info-border)); --ds-shadow-ring-border: inset 0 0 0 1px var(--ds-border); --ds-shadow-ring-strong: inset 0 0 0 1px var(--ds-border-strong); --ds-shadow-ring-ink: inset 0 0 0 1px var(--ds-ink); --ds-shadow-ring-accent: inset 0 0 0 1px rgb(var(--ds-accent-border) / .6); --ds-shadow-ring-on-ink: inset 0 0 0 1px var(--ds-gray-800); --ds-shadow-ring-avatar-ink: 0 0 0 2px var(--ds-white), 0 0 0 4px var(--ds-ink); --ds-shadow-ring-avatar-warn: 0 0 0 2px var(--ds-white), 0 0 0 4px rgb(var(--ds-warn)); --ds-shadow-dot: 0 0 0 2px var(--ds-white); --ds-shadow-hairline-top-inset: inset 0 1px 0 var(--ds-border); --ds-shadow-hairline-bottom-inset: inset 0 -1px 0 var(--ds-border); --ds-shadow-hairline-start: inset 1px 0 0 var(--ds-border); --ds-shadow-hairline-end: inset -1px 0 0 var(--ds-border); --ds-shadow-row-edge: var(--ds-shadow-edge-accent), var(--ds-shadow-hairline-top-inset); --ds-shadow-thumb: 0 1px 2px rgb(var(--ds-text-rgb) / .25); --ds-z-base: 0; --ds-z-sticky: 10; --ds-z-header: 20; --ds-z-sidebar: 30; --ds-z-popover: 40; --ds-z-scrim: 50; --ds-z-dialog: 60; --ds-z-toast: 70; --ds-z-palette: 80; --ds-z-skip: 90; --ds-dur-instant: 100ms; --ds-dur-fast: 140ms; --ds-dur-base: 200ms; --ds-dur-slow: 280ms; --ds-dur-ring: 400ms; --ds-ease-out: cubic-bezier(.2, 0, 0, 1); --ds-ease-in: cubic-bezier(.4, 0, 1, 1); --ds-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ds-frost-bg: var(--ds-white); --ds-frost-bg-th: var(--ds-gray-100); --ds-frost-filter: none; --ds-sheen: none; --ds-shimmer: linear-gradient(90deg, transparent, rgb(var(--ds-white-rgb) / .6), transparent); --ds-hero-gradient: none; --ds-hit-target: 28px; --ds-chevron-mask: url("data:image/svg+xml;utf8,"); --ds-control-h: 28px; --ds-control-h-sm: 24px; --ds-control-h-lg: 32px; --ds-icon-btn: 28px; --ds-icon-btn-lg: 32px; --ds-control-px: 8px; --ds-chip-h: 22px; --ds-chip-h-dense: 20px; --ds-tab-h: 32px; --ds-area-tab-h: 40px; --ds-row-h: 36px; --ds-row-h-dense: 28px; --ds-th-h: 32px; --ds-list-row-h: 48px; --ds-cell-px: 10px; --ds-header-h: 44px; --ds-bottombar-h: 48px; --ds-sidebar-w: 224px; --ds-rail-w: 56px; --ds-card-pad: 12px; --ds-gap-card: 8px; --ds-page-pad: 12px; --ds-kpi-tile-h: 76px; --ds-sheet-radius: 16px; --ds-checkbox: 18px; --ds-content-max: 1360px; --ds-form-max: 960px; --ds-dialog-max: 384px; --ds-popover-min: 128px; } @media (min-width: 480px) { :root { --ds-card-pad: 16px; --ds-gap-card: 12px; --ds-page-pad: 16px; } } @media (min-width: 768px) { :root { --ds-header-h: 48px; } } @media (min-width: 1024px) { :root { --ds-gap-card: 16px; --ds-page-pad: 24px; --ds-kpi-tile-h: 88px; } } @media (min-width: 768px) and (max-width: 1023.98px) { :root { --ds-kpi-tile-h: 88px; } } [data-density="cozy"] { --ds-control-h: 36px; --ds-control-h-sm: 32px; --ds-control-h-lg: 40px; --ds-icon-btn: 36px; --ds-icon-btn-lg: 40px; --ds-control-px: 14px; --ds-chip-h: 28px; --ds-tab-h: 36px; --ds-area-tab-h: 44px; --ds-row-h: 44px; --ds-row-h-dense: 36px; --ds-th-h: 36px; --ds-list-row-h: 56px; --ds-cell-px: 14px; --ds-header-h: 48px; --ds-bottombar-h: 56px; --ds-sidebar-w: 240px; --ds-rail-w: 60px; --ds-card-pad: 16px; --ds-gap-card: 12px; --ds-page-pad: 16px; --ds-kpi-tile-h: 84px; --ds-text-body: .9375rem; --ds-text-card: .9375rem; --ds-text-small: .8125rem; --ds-text-caption: .8125rem; --ds-text-label: .8125rem; --ds-text-button: .9375rem; --ds-text-input: .9375rem; --ds-text-input-compact: .875rem; --ds-text-title: 1.375rem; --ds-text-kpi: 1.625rem; --ds-text-kpi-hero: 1.875rem; --ds-leading-body: 22px; --ds-leading-small: 18px; --ds-leading-title: 30px; } @media (min-width: 480px) { [data-density="cozy"] { --ds-card-pad: 20px; --ds-gap-card: 16px; } } @media (min-width: 768px) { [data-density="cozy"] { --ds-header-h: 52px; } } @media (min-width: 1024px) { [data-density="cozy"] { --ds-page-pad: 28px; --ds-kpi-tile-h: 96px; } } @media (min-width: 768px) and (max-width: 1023.98px) { [data-density="cozy"] { --ds-kpi-tile-h: 96px; --ds-page-pad: 20px; } } @media (max-height: 480px) and (orientation: landscape) { :root { --ds-header-h: 40px; } } @media (forced-colors: active) { :root { --ds-shadow-1: 0 0 0 1px CanvasText; --ds-shadow-2: 0 0 0 1px CanvasText; --ds-shadow-3: 0 0 0 1px CanvasText; --ds-glow: 0 0 0 1px CanvasText; --ds-shadow-primary: 0 0 0 1px CanvasText; --ds-shadow-secondary: 0 0 0 1px CanvasText; } } @media print { :root { --ds-bg: var(--ds-white); --ds-shadow-1: none; --ds-shadow-2: none; --ds-shadow-3: none; --ds-glow: none; --ds-text: var(--ds-black); } } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); 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, U+20B9; } @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 107.4%; ascent-override: 90.4%; descent-override: 22.5%; line-gap-override: 0%; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); } html, body { margin: 0; padding: 0; background: var(--ds-white); } .fl { background: var(--ds-white); color: var(--ds-ink); font-family: var(--ds-font-sans); font-size: var(--ds-text-section); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; position: relative; isolation: isolate; } .fl *, .fl *::before, .fl *::after { box-sizing: border-box; } .fl img, .fl svg { display: block; max-width: 100%; } .fl :where(p, h1, h2, h3, ul, ol, dl, dd, dt) { margin: 0; } .fl :where(ul, ol) { padding: 0; list-style: none; } .fl :where(a) { color: inherit; } .fl :focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 3px; border-radius: var(--ds-radius-sm); } .fl .fl-close :focus-visible { outline-color: var(--ds-amber-500); } .fl-skip { position: absolute; inset-inline-start: 1rem; top: -4rem; background: var(--ds-ink); color: var(--ds-white); padding: .6rem 1rem; border-radius: var(--ds-radius-md); z-index: var(--ds-z-skip); } .fl-skip:focus { top: 1rem; } .fl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .fl-w { width: min(1120px, 100% - 24px); margin-inline: auto; } .fl-display { font-weight: 650; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; } .fl-stop { color: var(--ds-amber-500); } .fl-ill { display: inline-block; font-size: var(--ds-text-small); font-weight: 500; line-height: 1; color: var(--ds-gray-600); border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-pill); padding: .3rem .6rem; background: var(--ds-white); white-space: nowrap; } .fl .ds-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .fl .ds-icon path { vector-effect: non-scaling-stroke; } .fl-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--ds-control-h); padding: 0 1rem; border-radius: var(--ds-radius-pill); font-size: var(--ds-text-body); font-weight: 600; line-height: 1.2; text-decoration: none; border: 1px solid transparent; transition: background-color .15s, border-color .15s, transform .15s; } .fl-btn-primary { background: var(--ds-amber-500); color: var(--ds-ink); box-shadow: var(--ds-shadow-primary); } .fl-btn-primary:hover { background: var(--ds-amber-400); transform: translateY(-1px); } .fl-btn-quiet { border-color: var(--ds-border-strong); color: var(--ds-ink); background: var(--ds-white); } .fl-btn-quiet:hover { border-color: var(--ds-ink); } .fl-btn-sm { width: auto; min-height: var(--ds-control-h); padding: 0 .75rem; font-size: var(--ds-text-small); white-space: nowrap; } .fl-btn:active { transform: scale(.98); } .fl-cta { width: 100%; max-width: 24rem; } .fl-cta-row { display: grid; gap: var(--ds-space-2); } .fl-fine { margin-top: .9rem; font-size: var(--ds-text-small); line-height: var(--ds-leading-small); color: var(--ds-gray-600); text-align: center; } .fl-cta-dark .fl-btn-quiet { border-color: var(--ds-gray-600); color: var(--ds-white); background: transparent; } .fl-cta-dark .fl-fine { color: var(--ds-gray-300); } .fl-navwrap { position: sticky; top: 0; z-index: var(--ds-z-header); background: rgb(var(--ds-white-rgb) / .9); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--ds-gray-200); } .fl-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; } .fl-s { scroll-margin-top: 4.5rem; } .fl-brand { display: inline-flex; align-items: center; gap: .55rem; min-height: var(--ds-control-h); text-decoration: none; font-size: var(--ds-text-title); font-weight: 650; line-height: 1; letter-spacing: -.03em; } .fl-brand .ds-brand-logo--wordmark { width: auto; height: 1.9rem; max-width: min(11rem, 48vw); } .fl-nav-links { display: none; } .fl-nav-end .fl-btn { display: none; } .fl-menu { position: relative; } .fl-menu > summary { display: grid; place-items: center; width: var(--ds-control-h); height: var(--ds-control-h); border-radius: var(--ds-radius-md); cursor: pointer; list-style: none; } .fl-menu > summary::-webkit-details-marker { display: none; } .fl-menu > summary:hover { background: var(--ds-gray-100); } .fl-menu .fl-menu-close, .fl-menu[open] .fl-menu-open { display: none; } .fl-menu[open] .fl-menu-close { display: block; } .fl-menu-panel { position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); width: min(18rem, 100vw - 2rem); padding: .4rem; border-radius: var(--ds-radius-lg); background: var(--ds-white); box-shadow: var(--ds-shadow-2); } .fl-menu-panel a { display: flex; align-items: center; min-height: 28px; padding: 0 .6rem; border-radius: var(--ds-radius-md); text-decoration: none; font-size: var(--ds-text-small); } .fl-menu-panel a:hover { background: var(--ds-gray-100); } .fl-nav-end { display: flex; align-items: center; gap: .5rem; } .fl-hero { display: grid; justify-items: center; text-align: center; gap: 1.5rem; padding-block: 1.5rem 2rem; } .fl-hero-copy { display: grid; justify-items: center; width: 100%; max-width: 44rem; } .fl-hero h1 { font-size: var(--ds-text-display); letter-spacing: -.05em; } .fl-lead { margin: 1.1rem 0 1.6rem; font-size: calc(var(--ds-text-section) * 1.125); line-height: 1.6; color: var(--ds-gray-600); max-width: 34rem; } .fl-hero-visual { width: 100%; display: grid; justify-items: center; } .fl-vis-wide { display: none; width: 100%; max-width: 56rem; text-align: start; max-height: 23rem; overflow: hidden; } .fl-vis-wide .fl-app { border-radius: var(--ds-radius-2xl) var(--ds-radius-2xl) 0 0; border-bottom: 0; box-shadow: var(--ds-shadow-3); } .fl-vis-narrow { width: 100%; } .fl-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; width: 100%; max-width: 44rem; color: var(--ds-gray-600); font-size: var(--ds-text-small); line-height: var(--ds-leading-small); } .fl-strip li { position: relative; display: inline-flex; align-items: center; min-height: 1.5rem; } .fl-strip li + li::before { content: ""; position: absolute; inset-inline-start: -.8rem; width: .2rem; height: .2rem; border-radius: 50%; background: var(--ds-gray-400); } .fl-phone { width: min(19rem, 100%); margin-inline: auto; border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-2xl); background: var(--ds-white); overflow: hidden; box-shadow: var(--ds-shadow-3); text-align: start; } .fl-phone-in { padding: 1.1rem 1.1rem 1.3rem; } .fl-phone-top { display: flex; justify-content: flex-end; margin-bottom: .6rem; } .fl-phone-child { display: grid; margin-bottom: .8rem; } .fl-phone-child strong { font-size: calc(var(--ds-text-title) * 1.05); font-weight: 650; line-height: 1.2; letter-spacing: -.03em; } .fl-phone-child span { color: var(--ds-gray-600); font-size: var(--ds-text-body); } .fl-phone li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--ds-gray-200); font-size: var(--ds-text-body); color: var(--ds-gray-600); } .fl-phone li b { font-weight: 600; text-align: end; color: var(--ds-ink); } .fl-phone li.fl-warn b::before, .fl-sample li.fl-warn b::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-inline-end: .4rem; border-radius: 50%; background: var(--ds-amber-500); } .fl-phone-notice { margin-top: .5rem; padding: .8rem .9rem; border-radius: var(--ds-radius-lg); background: var(--ds-amber-100); color: var(--ds-amber-800); font-size: var(--ds-text-body); font-weight: 500; } .fl-app { background: var(--ds-white); border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-2xl); overflow: hidden; box-shadow: var(--ds-shadow-2); } .fl-app-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--ds-gray-200); } .fl-app-school { font-weight: 600; font-size: var(--ds-text-body); } .fl-app-body { display: grid; grid-template-columns: 8.5rem 1fr; } .fl-app-nav { border-inline-end: 1px solid var(--ds-gray-200); padding: 1rem .7rem; color: var(--ds-gray-600); font-size: var(--ds-text-small); background: var(--ds-gray-50); } .fl-app-nav li { padding: .5rem .7rem; border-radius: var(--ds-radius-md); margin-bottom: .1rem; } .fl-app-nav .is-on { background: var(--ds-amber-100); color: var(--ds-amber-800); font-weight: 600; } .fl-app-main { padding: 1.2rem 1.3rem 1.4rem; } .fl-app-hello { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; align-items: baseline; margin-bottom: 1rem; } .fl-app-hello strong { font-size: var(--ds-text-section); font-weight: 650; line-height: 1.2; letter-spacing: -.025em; } .fl-app-hello span { font-size: var(--ds-text-small); color: var(--ds-gray-600); } .fl-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .fl-kpi { border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-lg); padding: .8rem .9rem; display: grid; gap: .15rem; } .fl-kpi-label { font-size: var(--ds-text-small); color: var(--ds-gray-600); } .fl-kpi-value { font-size: var(--ds-text-kpi); font-weight: 650; line-height: 1.15; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .fl-kpi-sub { font-size: var(--ds-text-small); color: var(--ds-gray-600); } .fl-kpi.fl-warn { box-shadow: var(--ds-shadow-edge-warn-3); } .fl-app-cols { display: grid; gap: 1.3rem; margin-top: 1.3rem; } .fl-app-h { font-weight: 600; font-size: var(--ds-text-small); margin-bottom: .6rem; } .fl-bars li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) 2.4rem; gap: .7rem; align-items: center; font-size: var(--ds-text-small); padding: .3rem 0; color: var(--ds-gray-600); } .fl-bars i { display: block; height: .5rem; border-radius: var(--ds-radius-pill); background: var(--ds-ink); transform-origin: left; } .fl-bars b { font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; color: var(--ds-ink); } .fl-todo li { position: relative; padding: .6rem 0 .6rem 1.1rem; border-top: 1px solid var(--ds-gray-200); font-size: var(--ds-text-small); } .fl-todo li::before { content: ""; position: absolute; inset-inline-start: 0; top: 1.05rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--ds-amber-500); } .fl-s { padding-block: 2.5rem; } .fl-head { display: grid; justify-items: center; text-align: center; gap: .9rem; margin: 0 auto 2rem; max-width: 40rem; } .fl-head h2 { font-size: calc(var(--ds-text-display) * .7); } .fl-head p { color: var(--ds-gray-600); font-size: calc(var(--ds-text-section) * 1.0625); max-width: 32rem; } .fl-tabs { border: 0; margin: 0; padding: 0; min-width: 0; } .fl-tab-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .fl-tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; padding: .35rem; border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-xl); background: var(--ds-white); margin: 0 auto 1.75rem; } .fl-tablist label { display: grid; place-items: center; min-height: var(--ds-control-h); padding: .35rem .6rem; border-radius: var(--ds-radius-lg); font-size: var(--ds-text-small); font-weight: 500; color: var(--ds-gray-600); cursor: pointer; text-align: center; transition: background-color .15s, color .15s; } .fl-tablist label:hover { color: var(--ds-ink); } .fl-panel { display: none; } .fl-tabs > .fl-tab-in:nth-of-type(1):checked ~ .fl-tablist label:nth-child(1), .fl-tabs > .fl-tab-in:nth-of-type(2):checked ~ .fl-tablist label:nth-child(2), .fl-tabs > .fl-tab-in:nth-of-type(3):checked ~ .fl-tablist label:nth-child(3), .fl-tabs > .fl-tab-in:nth-of-type(4):checked ~ .fl-tablist label:nth-child(4) { background: var(--ds-ink); color: var(--ds-white); } .fl-tabs > .fl-tab-in:nth-of-type(1):checked ~ .fl-panels > .fl-panel:nth-child(1), .fl-tabs > .fl-tab-in:nth-of-type(2):checked ~ .fl-panels > .fl-panel:nth-child(2), .fl-tabs > .fl-tab-in:nth-of-type(3):checked ~ .fl-panels > .fl-panel:nth-child(3), .fl-tabs > .fl-tab-in:nth-of-type(4):checked ~ .fl-panels > .fl-panel:nth-child(4) { display: block; } .fl-tabs > .fl-tab-in:nth-of-type(1):focus-visible ~ .fl-tablist label:nth-child(1), .fl-tabs > .fl-tab-in:nth-of-type(2):focus-visible ~ .fl-tablist label:nth-child(2), .fl-tabs > .fl-tab-in:nth-of-type(3):focus-visible ~ .fl-tablist label:nth-child(3), .fl-tabs > .fl-tab-in:nth-of-type(4):focus-visible ~ .fl-tablist label:nth-child(4) { outline: 2px solid var(--ds-ink); outline-offset: 2px; } .fl-people { background: var(--ds-white); } .fl-role { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } .fl-role > ul { width: 100%; min-width: 0; } .fl-role > ul li { position: relative; min-width: 0; padding: .55rem 0 .55rem 1.3rem; font-size: var(--ds-text-section); line-height: 1.45; letter-spacing: -.01em; overflow-wrap: anywhere; } .fl-role > ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: 1.1rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ds-amber-500); } .fl-sample { background: var(--ds-white); border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-2xl); padding: 1.2rem; max-width: 30rem; width: 100%; justify-self: center; box-shadow: var(--ds-shadow-2); } .fl-sample-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .fl-sample-top strong { font-size: var(--ds-text-body); letter-spacing: -.01em; } .fl-sample-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; min-width: 0; margin: .4rem 0 .9rem; } .fl-sample-fig b { font-size: calc(var(--ds-text-kpi-hero) * 1.1); font-weight: 650; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; } .fl-sample-fig span { color: var(--ds-gray-600); font-size: var(--ds-text-body); } .fl-sample li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--ds-gray-200); font-size: var(--ds-text-body); color: var(--ds-gray-600); } .fl-sample li b { font-weight: 600; color: var(--ds-ink); text-align: end; } .fl-start { background: var(--ds-white); } .fl-start-steps { display: grid; gap: 1.75rem; counter-reset: step; } .fl-start-steps li { counter-increment: step; display: grid; grid-template-columns: 2.25rem 1fr; gap: .2rem 1rem; } .fl-start-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ds-ink); color: var(--ds-white); font-size: var(--ds-text-body); font-weight: 600; } .fl-start-steps h3 { font-size: calc(var(--ds-text-section) * 1.15); font-weight: 650; line-height: 1.3; letter-spacing: -.02em; } .fl-start-steps p { color: var(--ds-gray-600); } .fl-faq { background: var(--ds-gray-50); } .fl-faq-list { max-width: 44rem; margin-inline: auto; border-top: 1px solid var(--ds-gray-200); } .fl-faq details { border-bottom: 1px solid var(--ds-gray-200); } .fl-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.75rem; padding: .5rem 0; font-weight: 600; font-size: var(--ds-text-body); letter-spacing: -.01em; cursor: pointer; list-style: none; } .fl-faq summary::-webkit-details-marker { display: none; } .fl-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--ds-gray-200); background: var(--ds-white); font-weight: 500; line-height: 1; } .fl-faq details[open] summary::after { content: "\2212"; } .fl-faq details p { padding: 0 0 1.2rem; color: var(--ds-gray-600); max-width: 38rem; } .fl-faq details p a { color: var(--ds-ink); text-decoration-color: var(--ds-amber-500); text-underline-offset: 3px; } .fl-close { background: var(--ds-surface-ink); color: var(--ds-white); padding-block: 3.75rem; text-align: center; } .fl-close-inner { display: grid; justify-items: center; max-width: 42rem; } .fl-close h2 { font-size: var(--ds-text-display); letter-spacing: -.045em; } .fl-close-body { margin: 1rem 0 1.75rem; color: var(--ds-gray-300); font-size: calc(var(--ds-text-section) * 1.0625); max-width: 32rem; } .fl-close .fl-cta { max-width: 22rem; } .fl-foot { box-shadow: var(--ds-shadow-0); min-height: 0; display: grid; gap: .6rem; padding-block: 2rem 2.5rem; color: var(--ds-gray-600); font-size: var(--ds-text-body); } .fl-foot .fl-brand { color: var(--ds-ink); } .fl-foot-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; } .fl-foot-links a { display: inline-flex; align-items: center; min-height: var(--ds-control-h); } .fl-pricing { padding-block: 3rem 4rem; display: grid; justify-items: center; } .fl-pricing-card { width: min(100%, 40rem); padding: clamp(1.25rem, 5vw, 2.5rem); border-radius: var(--ds-radius-2xl); background: var(--ds-white); box-shadow: var(--ds-shadow-2); display: grid; gap: 1rem; } .fl-pricing-card h1 { font-size: calc(var(--ds-text-display) * .8); } .fl-pricing-card p { color: var(--ds-gray-600); font-size: calc(var(--ds-text-section) * 1.0625); } .fl-pricing-actions { display: grid; gap: .75rem; margin-top: .5rem; } .fl-pricing-actions .fl-btn-link { display: inline-flex; justify-content: center; align-items: center; min-height: var(--ds-control-h); color: var(--ds-ink); text-decoration-color: var(--ds-amber-500); text-underline-offset: 3px; } @media (min-width: 768px) { .fl-w { width: min(1120px, 100% - 2rem); } .fl-btn { display: inline-flex; width: auto; padding: 0 1rem; min-height: var(--ds-control-h); } .fl-nav-end .fl-btn { display: inline-flex; } .fl-cta-row { display: flex; flex-wrap: wrap; justify-content: center; } .fl-cta { max-width: none; } .fl-hero { gap: 2rem; padding-block: 2.5rem 3rem; } .fl-hero h1 { font-size: calc(var(--ds-text-display) * 1.25); } .fl-lead { font-size: calc(var(--ds-text-section) * 1.2); margin: 1.4rem 0 2rem; } .fl-vis-wide { display: block; } .fl-vis-narrow { display: none; } .fl-s { padding-block: 3rem; } .fl-head { margin-bottom: 2rem; } .fl-head h2 { font-size: calc(var(--ds-text-display) * .85); } .fl-head p { font-size: calc(var(--ds-text-section) * 1.1); } .fl-tablist { display: flex; gap: .25rem; width: max-content; max-width: 100%; border-radius: var(--ds-radius-pill); padding: .3rem; margin-bottom: 3rem; } .fl-tablist label { display: inline-grid; min-height: var(--ds-control-h); padding: .35rem .9rem; border-radius: var(--ds-radius-pill); } .fl-role > ul li { font-size: calc(var(--ds-text-section) * 1.1); } .fl-sample { padding: 1.4rem 1.5rem; } .fl-sample-fig b { font-size: calc(var(--ds-text-kpi-hero) * 1.25); } .fl-start-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } .fl-start-steps li { display: block; } .fl-start-steps li::before { display: grid; margin-bottom: 1rem; } .fl-close { padding-block: 3.5rem; } .fl-close .fl-cta { max-width: none; } .fl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-block: 1.5rem 2rem; } .fl-foot-note { margin-inline-start: auto; } .fl-pricing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; } .fl-pricing-actions .fl-btn-link { padding-inline: .25rem; } } @media (min-width: 1024px) { .fl-nav-links { display: flex; gap: 2rem; margin-inline: auto; font-size: var(--ds-text-body); } .fl-nav-links a { display: inline-flex; align-items: center; min-height: var(--ds-control-h); text-decoration: none; color: var(--ds-gray-600); transition: color .15s; } .fl-nav-links a:hover { color: var(--ds-ink); } .fl-menu { display: none; } .fl-role { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4.5rem; align-items: center; } .fl-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fl-app-cols { grid-template-columns: 1.1fr .9fr; gap: 2rem; } .fl-app-main { padding: 1.3rem 1.4rem 1.5rem; } .fl-app-body { grid-template-columns: 9rem 1fr; } } @media (max-width: 1023.98px) { .fl-app-cols { display: none; } } @media (min-width: 1440px) { .fl-w { width: min(1360px, 100% - 6rem); } .fl-hero h1 { font-size: calc(var(--ds-text-display) * 1.45); } } @media (max-width: 479.98px) { .fl-brand { font-size: var(--ds-text-section); gap: .45rem; } .fl-phone { border-radius: var(--ds-radius-xl); } .fl-sample-fig b { font-size: var(--ds-text-kpi-hero); } } .fl { color: var(--ds-text); background: var(--ds-bg); } .fl-stop { color: rgb(var(--ds-accent)); } .fl-ill { border-radius: var(--ds-radius-sm); background: transparent; } .fl-btn { border-radius: var(--ds-radius-sm); box-shadow: none; transition: color .14s, background-color .14s, border-color .14s; } .fl-btn-primary { color: rgb(var(--ds-on-accent)); background: rgb(var(--ds-accent)); } .fl-btn-primary:hover { color: rgb(var(--ds-on-accent-hover)); background: rgb(var(--ds-accent-hover)); transform: none; } .fl-btn-quiet { border-color: var(--ds-border-strong); background: transparent; } .fl-btn-quiet:hover { background: var(--ds-surface); } .fl-navwrap { background: var(--ds-white); backdrop-filter: none; -webkit-backdrop-filter: none; } .fl-menu-panel, .fl-app, .fl-phone, .fl-sample, .fl-kpi, .fl-pricing-card { border-radius: var(--ds-radius-md); box-shadow: none; } .fl-app, .fl-phone, .fl-kpi, .fl-sample { border-color: var(--ds-border); } .fl-app-nav { background: var(--ds-white); } .fl-app-nav .is-on { border-radius: var(--ds-radius-sm); color: rgb(var(--ds-accent-subtle-text)); background: rgb(var(--ds-accent-subtle-strong)); } .fl-kpi { padding: 1rem; } .fl-kpi-value { letter-spacing: -.025em; } .fl-bars i { border-radius: 0; background: rgb(var(--ds-accent)); } .fl-start-steps li::before { border-radius: var(--ds-radius-sm); background: rgb(var(--ds-accent)); color: var(--ds-white); } .fl-faq summary::after { border-radius: var(--ds-radius-sm); } .fl-close { color: var(--ds-text-on-ink); background: var(--ds-surface-ink); } .fl-pricing-card { border: 1px solid var(--ds-border); } .fl-hero { padding-block: 1.5rem 2rem; } .fl-hero h1 { letter-spacing: -.04em; } .fl-role > ul li::before, .fl-live i, .fl-ping i { background: rgb(var(--ds-accent)); } .fl-pill.fl-info { color: rgb(var(--ds-accent-subtle-text)); background: rgb(var(--ds-accent-subtle-strong)); } .fl-faq details p a, .fl-pricing-actions .fl-btn-link { text-decoration-color: rgb(var(--ds-accent)); } @media (min-width: 1024px) { .fl-hero { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); justify-items: stretch; gap: clamp(2rem, 4vw, 3.5rem); padding-block: 3rem 3.5rem; text-align: start; } .fl-hero-copy { justify-items: start; max-width: 38rem; } .fl-hero-visual { justify-items: end; } .fl-vis-wide { max-height: none; } .fl-strip { justify-content: start; } .fl-cta-row { justify-content: start; } .fl-fine { text-align: start; } } @media (prefers-reduced-motion: no-preference) { .fl-bars i { animation: fl-grow .9s cubic-bezier(.2, .7, .2, 1) both; } .fl-bars li:nth-child(2) i { animation-delay: .08s; } .fl-bars li:nth-child(3) i { animation-delay: .16s; } .fl-bars li:nth-child(4) i { animation-delay: .24s; } .fl-bars li:nth-child(5) i { animation-delay: .32s; } @keyframes fl-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } } .fl-stories { background: var(--ds-white); padding-block: 2rem 1rem; } .fl-story { display: grid; gap: 2rem; padding-block: 2.5rem; } .fl-story h2 { font-size: calc(var(--ds-text-display) * .7); } .fl-story-text > p { color: var(--ds-gray-600); margin: .9rem 0 1.1rem; font-size: calc(var(--ds-text-section) * 1.05); } .fl-story-text li { position: relative; padding: .4rem 0 .4rem 1.3rem; font-size: var(--ds-text-section); } .fl-story-text li::before { content: ""; position: absolute; inset-inline-start: 0; top: .95rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--ds-amber-500); } .fl-story-visual { display: grid; justify-items: center; } .fl-screen { width: 100%; max-width: 30rem; background: var(--ds-white); border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-2xl); overflow: hidden; box-shadow: var(--ds-shadow-3); } .fl-screen-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--ds-gray-200); font-size: var(--ds-text-body); } .fl-screen-bar span { color: var(--ds-gray-600); font-size: var(--ds-text-small); } .fl-screen-body { padding: 1rem 1.1rem 1.2rem; } .fl-seg { display: inline-flex; gap: .2rem; padding: .2rem; border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-pill); margin-bottom: .5rem; font-size: var(--ds-text-small); } .fl-seg span { padding: .3rem .8rem; border-radius: var(--ds-radius-pill); color: var(--ds-gray-600); } .fl-seg .is-on { background: var(--ds-ink); color: var(--ds-white); } .fl-table li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--ds-gray-200); font-size: var(--ds-text-body); } .fl-t-name { display: grid; font-weight: 500; } .fl-t-name small { color: var(--ds-gray-600); font-weight: 400; font-size: var(--ds-text-small); } .fl-t-amt { font-variant-numeric: tabular-nums; color: var(--ds-gray-600); font-size: var(--ds-text-body); } .fl-pill { padding: .2rem .65rem; border-radius: var(--ds-radius-pill); font-size: var(--ds-text-small); font-weight: 600; text-align: center; min-width: 4.6rem; } .fl-pill.fl-ok { background: var(--ds-white); color: var(--ds-ink); box-shadow: var(--ds-shadow-ring-ink); } .fl-pill.fl-warn { background: var(--ds-ink); color: var(--ds-white); } .fl-pill.fl-info { background: var(--ds-amber-100); color: var(--ds-amber-800); } .fl-screen-foot { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--ds-gray-200); font-size: var(--ds-text-body); font-weight: 600; display: flex; align-items: center; } .fl-register li { grid-template-columns: minmax(0, 1fr) auto; } .fl-toggle { display: inline-flex; border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-pill); padding: .15rem; font-size: var(--ds-text-small); } .fl-toggle i { font-style: normal; padding: .3rem .7rem; border-radius: var(--ds-radius-pill); color: var(--ds-gray-600); } .fl-toggle i.is-on { background: var(--ds-white); color: var(--ds-ink); font-weight: 600; box-shadow: var(--ds-shadow-ring-ink); } .fl-toggle i.is-on.fl-absent { background: var(--ds-ink); color: var(--ds-white); box-shadow: var(--ds-shadow-0); } .fl-toast { margin-top: .9rem; padding: .8rem 1rem; border-radius: var(--ds-radius-lg); background: var(--ds-ink); color: var(--ds-white); font-size: var(--ds-text-body); font-weight: 500; } @media (min-width: 1024px) { .fl-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding-block: 3rem; } .fl-story.fl-flip .fl-story-text { order: 2; } .fl-story h2 { font-size: calc(var(--ds-text-display) * .8); } } .fl-live { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--ds-text-small); font-weight: 600; color: var(--ds-ink); } .fl-live i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ds-amber-500); } .fl-ping { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; padding: .7rem .85rem; border-radius: var(--ds-radius-lg); background: var(--ds-ink); color: var(--ds-white); font-size: var(--ds-text-body); font-weight: 500; } .fl-ping i { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ds-amber-500); } .fl-table-wrap { position: relative; } .fl-sweep { position: absolute; inset-inline: -1.1rem; top: 0; height: 2.7rem; background: rgb(var(--ds-amber-500-rgb) / .1); opacity: 0; pointer-events: none; } .fl-pill-swap { position: relative; display: inline-grid; } .fl-pill-swap em { grid-area: 1 / 1; font-style: normal; } .fl-pill-swap .fl-sent { opacity: 0; } .fl-meter { display: inline-block; width: 3.5rem; height: .4rem; margin-inline-end: .6rem; vertical-align: middle; border-radius: var(--ds-radius-pill); background: var(--ds-gray-200); overflow: hidden; } .fl-meter i { display: block; width: 78%; height: 100%; border-radius: var(--ds-radius-pill); background: var(--ds-ink); transform-origin: left; } @media (prefers-reduced-motion: no-preference) { @keyframes fl-rise { from { transform: translateY(16px); } to { transform: none; } } @keyframes fl-in { from { transform: translateY(8px); } to { transform: none; } } @keyframes fl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes fl-ping { 0%, 8% { transform: translateY(-14px); } 16%, 70% { transform: none; } 80%, 100% { transform: translateY(-14px); } } @keyframes fl-sweep { 0% { transform: translateY(-.3rem); opacity: 0; } 12%, 85% { opacity: 1; } 100% { transform: translateY(11.4rem); opacity: 0; } } @keyframes fl-pill { 0%, 40% { background: var(--ds-ink); color: var(--ds-white); box-shadow: var(--ds-shadow-0); } 52%, 88% { background: var(--ds-white); color: var(--ds-ink); box-shadow: var(--ds-shadow-ring-ink); } 100% { background: var(--ds-ink); color: var(--ds-white); box-shadow: var(--ds-shadow-0); } } @keyframes fl-em1 { 0%, 40% { opacity: 1; } 50%, 88% { opacity: 0; } 98%, 100% { opacity: 1; } } @keyframes fl-em2 { 0%, 40% { opacity: 0; } 50%, 88% { opacity: 1; } 98%, 100% { opacity: 0; } } @keyframes fl-fill { 0% { transform: scaleX(.5); } 35%, 100% { transform: scaleX(1); } } @keyframes fl-pp { 0%, 22% { background: var(--ds-white); color: var(--ds-ink); font-weight: 600; box-shadow: var(--ds-shadow-ring-ink); } 30%, 92% { background: transparent; color: var(--ds-gray-600); font-weight: 400; box-shadow: var(--ds-shadow-0); } 100% { background: var(--ds-white); color: var(--ds-ink); font-weight: 600; box-shadow: var(--ds-shadow-ring-ink); } } @keyframes fl-aa { 0%, 22% { background: transparent; color: var(--ds-gray-600); font-weight: 400; } 30%, 92% { background: var(--ds-ink); color: var(--ds-white); font-weight: 600; } 100% { background: transparent; color: var(--ds-gray-600); font-weight: 400; } } @keyframes fl-nav { from { box-shadow: var(--ds-shadow-0); border-bottom-color: transparent; } to { box-shadow: var(--ds-shadow-1); border-bottom-color: var(--ds-gray-200); } } .fl-hero-copy > * { animation: fl-rise .75s cubic-bezier(.2, .7, .2, 1) both; } .fl-hero-copy > .fl-lead { animation-delay: .1s; } .fl-hero-copy > .fl-cta { animation-delay: .2s; } .fl-hero-visual { animation: fl-rise .9s cubic-bezier(.2, .7, .2, 1) .3s both; } .fl-strip { animation: fl-rise .8s cubic-bezier(.2, .7, .2, 1) .5s both; } .fl-kpi { animation: fl-rise .6s cubic-bezier(.2, .7, .2, 1) both; } .fl-kpi:nth-child(1) { animation-delay: .55s; } .fl-kpi:nth-child(2) { animation-delay: .65s; } .fl-kpi:nth-child(3) { animation-delay: .75s; } .fl-kpi:nth-child(4) { animation-delay: .85s; } .fl-todo li { animation: fl-in .5s both; } .fl-todo li:nth-child(1) { animation-delay: 1s; } .fl-todo li:nth-child(2) { animation-delay: 1.15s; } .fl-todo li:nth-child(3) { animation-delay: 1.3s; } .fl-live i { animation: fl-pulse 2s ease-out infinite; } .fl-ping { animation: fl-ping 8s ease-in-out infinite; } .fl-sweep { animation: fl-sweep 6s ease-in-out infinite; } .fl-pill-swap { animation: fl-pill 9s ease-in-out infinite; } .fl-pill-swap em:first-child { animation: fl-em1 9s ease-in-out infinite; } .fl-pill-swap .fl-sent { animation: fl-em2 9s ease-in-out infinite; } .fl-pill-swap, .fl-pill-swap em { animation-timing-function: steps(1, end); } .fl-meter i { animation: fl-fill 6s ease-in-out infinite; } .fl-flip-row .fl-p { animation: fl-pp 8s ease-in-out infinite; } .fl-flip-row .fl-a { animation: fl-aa 8s ease-in-out infinite; } .fl-flip-row .fl-p, .fl-flip-row .fl-a { animation-timing-function: steps(1, end); } .fl-panel { animation: fl-in .45s cubic-bezier(.2, .7, .2, 1); } .fl-faq details[open] p { animation: fl-in .35s ease both; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .fl-story-text, .fl-story-visual, .fl-head, .fl-start-steps li, .fl-faq-list, .fl-close-inner { animation: fl-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } }} @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .fl-navwrap { border-bottom-color: transparent; animation: fl-nav linear both; animation-timeline: scroll(); animation-range: 0 140px; } }} .fl { color: var(--ds-marketing-ink); background: var(--ds-white); font-family: var(--ds-font-marketing); font-size: var(--ds-text-marketing-body); } .fl-w { width: min(1240px, calc(100% - 64px)); } .fl :focus-visible { outline: 3px solid var(--ds-marketing-blue); outline-offset: 5px; } .fl .fl-skip.fl-skip { color: var(--ds-white); } .fl .fl-skip:focus { top: 1rem; } .fl :is(p, h1, h2, h3) { text-wrap: pretty; } .fl-navwrap { position: relative; top: auto; width: min(1320px, calc(100% - 40px)); margin: 20px auto 0; border: 0; border-radius: var(--ds-radius-pill); background: var(--ds-marketing-mist); animation: none; } .fl-nav { min-height: 76px; width: calc(100% - 44px); } .fl-brand { font-size: var(--ds-text-title); font-weight: 800; gap: .65rem; } .fl-brand .ds-brand-logo--wordmark { width: auto; height: 1.55rem; max-width: min(10.5rem, 48vw); object-fit: contain; } .fl-nav-links { gap: 1.8rem; font-size: var(--ds-text-marketing-small); font-weight: 600; } .fl-nav-links a { min-height: 44px; color: var(--ds-marketing-muted); transition: color .25s cubic-bezier(.32,.72,0,1); } .fl-nav-links a:hover { color: var(--ds-marketing-ink); } .fl .fl-btn { min-height: 52px; border-radius: var(--ds-radius-pill); padding: 10px 12px 10px 24px; font-size: var(--ds-text-marketing-small); gap: 18px; font-weight: 700; transition: transform .35s cubic-bezier(.32,.72,0,1), background-color .35s cubic-bezier(.32,.72,0,1); } .fl .fl-btn-primary { background: var(--ds-amber-500); color: var(--ds-ink); border-color: transparent; } .fl .fl-btn-primary:hover { background: var(--ds-amber-400); transform: translateY(-2px); } .fl .fl-btn:active { transform: scale(.98); } .fl .fl-btn-quiet { padding-inline: 24px; border-color: var(--ds-marketing-line); } .fl .fl-btn-sm { min-height: 44px; padding-inline: 22px; } .fl-action-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ds-white); flex: none; transition: transform .35s cubic-bezier(.32,.72,0,1); } .fl-action-icon svg { transform: rotate(-35deg); } .fl a:hover .fl-action-icon { transform: translate(2px,-1px); } .fl-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-underline-offset: 5px; font-size: var(--ds-text-marketing-small); font-weight: 700; } .fl-text-link svg { flex: none; } .fl-modern-hero { padding-top: 88px; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 44px; } .fl-context { display: flex; align-items: center; gap: 9px; font-size: var(--ds-text-marketing-small); font-weight: 600; margin-bottom: 24px; color: var(--ds-marketing-muted); } .fl-context > span { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-amber-500); } .fl-modern-hero h1 { font-size: var(--ds-text-marketing-hero); letter-spacing: -.065em; line-height: 1.09; font-weight: 700; } .fl-modern-lead { font-size: var(--ds-text-marketing-lead); line-height: 1.85; max-width: 470px; color: var(--ds-marketing-muted); margin-top: 26px; } .fl-modern-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; } .fl-modern-note { font-size: var(--ds-text-marketing-small); color: var(--ds-marketing-muted); line-height: 1.7; margin-top: 16px; } .fl-hero-art { margin: 0; position: relative; padding: 8px; background: var(--ds-marketing-mist); border-radius: var(--ds-radius-marketing); } .fl-art-inner { border-radius: var(--ds-radius-marketing-inner); overflow: hidden; } .fl-hero-art img { width: 100%; height: 430px; object-fit: cover; object-position: center; } .fl-hero-art figcaption { padding: 15px 12px 10px; font-size: var(--ds-text-marketing-small); color: var(--ds-marketing-ink); } .fl-art-note { position: absolute; display: flex; align-items: center; gap: 13px; background: var(--ds-white); padding: 17px 22px; bottom: 80px; left: -30px; border-radius: var(--ds-radius-marketing-inner); box-shadow: var(--ds-shadow-marketing); } .fl-art-note > div { display: grid; gap: 5px; } .fl-art-note strong { font-size: var(--ds-text-marketing-small); } .fl-art-note > div > span { font-size: var(--ds-text-marketing-caption); color: var(--ds-marketing-muted); } .fl-art-note-icon { padding: 10px; border-radius: 50%; background: var(--ds-amber-100); color: var(--ds-amber-800); } .fl-modern-strip { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding-block: 32px; margin-top: 36px; border-top: 1px solid var(--ds-marketing-line); font-size: var(--ds-text-marketing-small); color: var(--ds-marketing-muted); } .fl-modern-strip li { display: flex; align-items: center; gap: 10px; } .fl-s { padding-block: 100px; scroll-margin-top: 32px; } .fl-display { font-weight: 650; letter-spacing: -.055em; line-height: 1.16; } .fl-head { margin-bottom: 44px; } .fl-head h2 { font-size: var(--ds-text-marketing-heading); } .fl-head > p { max-width: 580px; margin-top: 18px; font-size: var(--ds-text-marketing-body); line-height: 1.8; color: var(--ds-marketing-muted); } .fl-product { background: var(--ds-marketing-mist); } .fl-product-head { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 42px; } .fl-product-head h2 { font-size: var(--ds-text-marketing-heading); } .fl-product-head > p { max-width: 380px; color: var(--ds-marketing-muted); line-height: 1.8; } .fl-product-shell { background: var(--ds-marketing-sky); padding: 12px; border-radius: var(--ds-radius-marketing); } .fl-product-core { border-radius: var(--ds-radius-marketing-inner); overflow: hidden; background: var(--ds-white); } .fl-product-core .fl-app { border: 0; border-radius: 0; box-shadow: none; } .fl-product-core .fl-app-bar { padding: 22px 26px; border-color: var(--ds-marketing-line); } .fl-product-core .fl-app-body { min-height: 350px; } .fl-product-core .fl-app-main { padding: 30px; } .fl-product-core .fl-app-nav { padding: 25px 12px; background: var(--ds-white); border-color: var(--ds-marketing-line); } .fl-product-core .fl-kpi { background: var(--ds-marketing-mist); border: 0; padding: 22px 16px; border-radius: var(--ds-radius-xl); } .fl-product-core .fl-kpi-value { font-size: var(--ds-text-marketing-card); color: var(--ds-marketing-ink); } .fl-product-core .fl-kpi-sub { margin-top: 7px; } .fl-product-core .fl-app-hello { margin-bottom: 24px; } .fl-product-core .fl-app-hello strong { font-size: var(--ds-text-section); } .fl-product-core .fl-app-cols { margin-top: 25px; } .fl-product-caption { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; font-size: var(--ds-text-marketing-caption); color: var(--ds-marketing-muted); } .fl-operations-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; } .fl-operation { padding: 8px; border-radius: var(--ds-radius-marketing); background: var(--ds-marketing-mist); overflow: hidden; } .fl-operation-attendance { margin-top: 88px; background: var(--ds-marketing-peach); } .fl-operation-copy { padding: 30px 30px 24px; } .fl-section-icon { display: inline-flex; margin-bottom: 24px; color: var(--ds-marketing-blue); } .fl-operation h3 { font-size: var(--ds-text-marketing-card); letter-spacing: -.04em; line-height: 1.25; max-width: 350px; } .fl-operation p { color: var(--ds-marketing-muted); font-size: var(--ds-text-marketing-body); line-height: 1.8; margin-top: 18px; } .fl-operation-preview { padding: 18px; background: var(--ds-white); border-radius: var(--ds-radius-marketing-inner); } .fl-operation-preview .fl-screen { max-width: none; border: 0; border-radius: 0; box-shadow: none; } .fl-operation-preview .fl-screen-body { padding: 18px 8px 8px; } .fl-operation-preview .fl-screen-bar { padding: 10px 8px 18px; } .fl-operation .fl-toast { color: var(--ds-white); font-size: var(--ds-text-marketing-small); } .fl-modules { background: var(--ds-white); padding-top: 20px; } .fl-modules-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 100px; } .fl-modules h2 { font-size: var(--ds-text-marketing-heading); } .fl-modules-copy > p { color: var(--ds-marketing-muted); margin-top: 20px; line-height: 1.8; } .fl-modules-copy > a { margin-top: 24px; } .fl-stage-list { grid-column: 2; display: grid; align-self: start; } .fl-stage-list li { display: grid; grid-template-columns: minmax(125px,.55fr) minmax(0,1fr); gap: 22px; padding: 22px 0; border-top: 1px solid var(--ds-marketing-line); } .fl-stage-name { font-size: var(--ds-text-marketing-small); font-weight: 700; color: var(--ds-marketing-ink); } .fl-stage-list p { color: var(--ds-marketing-muted); font-size: var(--ds-text-marketing-small); line-height: 1.8; } .fl-modules-more { grid-column: 1 / -1; margin-top: 34px; } .fl-modules-more h3 { font-size: var(--ds-text-marketing-card); letter-spacing: -.035em; } .fl-module-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 34px; } .fl-module-list > div { padding: 26px 0; border-top: 1px solid var(--ds-marketing-line); } .fl-module-list dt { display: flex; gap: 11px; align-items: start; font-size: var(--ds-text-marketing-small); font-weight: 700; } .fl-module-list dt svg { flex: none; color: var(--ds-marketing-blue); } .fl-module-list dd { margin-top: 13px; color: var(--ds-marketing-muted); line-height: 1.8; font-size: var(--ds-text-marketing-small); } .fl-people { background: var(--ds-marketing-mist); } .fl-tablist { margin-bottom: 40px; border: 0; background: var(--ds-white); padding: 6px; } .fl-tablist label { min-height: 46px; padding: 10px 24px; font-size: var(--ds-text-marketing-small); font-weight: 600; } .fl-role { gap: 60px; } .fl-role > ul li { font-size: var(--ds-text-marketing-lead); padding-block: 15px; line-height: 1.7; } .fl-sample { background: var(--ds-white); padding: 30px; border: 0; border-radius: var(--ds-radius-marketing-inner); box-shadow: var(--ds-shadow-marketing); } .fl-sample-fig { padding-block: 26px; } .fl-start-steps { gap: 48px; } .fl-start-steps li::before { color: var(--ds-ink); width: 44px; height: 44px; border-radius: 50%; background: var(--ds-amber-100); } .fl-start-steps h3 { font-size: var(--ds-text-section); } .fl-start-steps p { font-size: var(--ds-text-marketing-body); color: var(--ds-marketing-muted); line-height: 1.8; margin-top: 14px; } .fl-faq { padding-top: 20px; } .fl-faq > .fl-w { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; } .fl-faq .fl-head { margin: 0; } .fl-faq details { border-color: var(--ds-marketing-line); } .fl-faq summary { min-height: 74px; font-size: var(--ds-text-marketing-body); padding-block: 20px; } .fl-faq details p { color: var(--ds-marketing-muted); font-size: var(--ds-text-marketing-small); line-height: 1.9; padding-bottom: 25px; } .fl-close { margin: 0 24px; padding-block: 88px; color: var(--ds-white); background: var(--ds-marketing-ink); border-radius: var(--ds-radius-marketing); } .fl-close h2 { font-size: var(--ds-text-marketing-heading); } .fl-close-body { max-width: 560px; color: var(--ds-marketing-line); font-size: var(--ds-text-marketing-body); margin-block: 22px 30px; } .fl-close .fl-cta-row { justify-content: center; } .fl-foot { min-height: 190px; padding-block: 36px; font-size: var(--ds-text-marketing-small); color: var(--ds-marketing-muted); gap: 20px 30px; } .fl-foot-links { gap: 20px; } .fl-foot-links a { min-height: 44px; display: inline-flex; align-items: center; } .fl-foot-note { flex-basis: 100%; font-size: var(--ds-text-marketing-caption); } .fl-menu > summary { width: 44px; height: 44px; } .fl-menu-panel { padding: 12px; border-radius: var(--ds-radius-marketing-inner); box-shadow: var(--ds-shadow-marketing); } .fl-menu-panel a { min-height: 48px; padding-inline: 12px; font-size: var(--ds-text-marketing-body); } .fl-pricing { padding-block: 100px; min-height: 55dvh; } .fl-pricing-card { width: 100%; max-width: 1040px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: start; gap: clamp(28px,5vw,64px); border: 0; padding: clamp(28px,5vw,64px); background: var(--ds-marketing-mist); border-radius: var(--ds-radius-marketing); } .fl-pricing-card h1 { font-size: var(--ds-text-marketing-heading); } .fl-pricing-intro h1 { max-width: 12ch; margin: 0 0 20px; line-height: 1.12; } .fl-pricing-intro > p { max-width: 36rem; color: var(--ds-marketing-muted); line-height: 1.8; } .fl-pricing-eyebrow { display: block; margin-bottom: 18px; color: var(--ds-marketing-blue); font-size: var(--ds-text-marketing-small); font-weight: 700; } .fl-pricing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 30px; } .fl-pricing-actions .fl-btn-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--ds-marketing-ink); text-decoration-color: var(--ds-marketing-amber); text-underline-offset: 4px; } .fl-pricing-model { min-width: 0; padding-top: 4px; } .fl-pricing-model h2 { margin: 0 0 18px; font-size: var(--ds-text-marketing-card); letter-spacing: -.03em; } .fl-pricing-factors { display: grid; margin: 0; padding: 0; list-style: none; } .fl-pricing-factors > div { padding: 16px 0; border-top: 1px solid var(--ds-marketing-line); } .fl-pricing-factors dt { margin-bottom: 5px; font-weight: 700; } .fl-pricing-factors dd { margin: 0; color: var(--ds-marketing-muted); font-size: var(--ds-text-marketing-small); line-height: 1.65; } .fl-pricing-note { margin-top: 14px; padding: 14px 16px; border-left: 3px solid var(--ds-marketing-amber); background: var(--ds-white); color: var(--ds-marketing-muted); font-size: var(--ds-text-marketing-caption); line-height: 1.65; } @media (min-width: 1024px) { .fl-product-core .fl-app-body { grid-template-columns: 170px 1fr; } } @media (max-width: 1023.98px) { .fl-modern-hero { gap: 30px; padding-top: 60px; } .fl-hero-art img { height: 390px; } .fl-art-note { left: -12px; padding: 14px; } .fl-modules-layout { gap: 50px; } .fl-modern-strip { flex-wrap: wrap; justify-content: center; } .fl-product-core .fl-app-body { min-height: 0; } } @media (max-width: 767.98px) { .fl-w { width: calc(100% - 32px); } .fl-navwrap { width: calc(100% - 24px); margin-top: 12px; } .fl-nav { min-height: 66px; width: calc(100% - 28px); } .fl-modern-hero { grid-template-columns: minmax(0,1fr); padding-top: 48px; gap: 36px; } .fl-modern-hero h1 { max-width: 550px; } .fl-modern-lead { line-height: 1.8; } .fl-modern-actions { gap: 12px 24px; } .fl-modern-actions .fl-btn { width: auto; } .fl-context { font-size: var(--ds-text-marketing-caption); margin-bottom: 20px; } .fl-hero-art { transform: none; } .fl-hero-art img { height: auto; aspect-ratio: 1.3; } .fl-art-note { left: 18px; bottom: 66px; transform: none; } .fl-modern-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 0; padding-block: 24px 32px; gap: 22px 12px; font-size: var(--ds-text-marketing-caption); } .fl-modern-strip li { align-items: start; gap: 7px; } .fl-modern-strip svg { flex: none; } .fl-s { padding-block: 64px; } .fl-product-head { display: block; } .fl-product-head > p { margin-top: 22px; } .fl-product-shell { padding: 6px; } .fl-product-core .fl-app-nav { display: none; } .fl-product-core .fl-app-body { grid-template-columns: minmax(0,1fr); } .fl-product-core .fl-app-main { padding: 18px; } .fl-product-core .fl-app-bar { padding: 18px; } .fl-product-core .fl-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .fl-product-core .fl-kpi { padding: 18px 12px; } .fl-product-caption { display: block; } .fl-product-caption > a { margin-top: 10px; } .fl-operations-grid,.fl-modules-layout,.fl-faq > .fl-w { grid-template-columns: minmax(0,1fr); gap: 28px; } .fl-stage-list { grid-column: 1; } .fl-stage-list li { grid-template-columns: minmax(0,1fr); gap: 8px; } .fl-modules-more { grid-column: 1; margin-top: 10px; } .fl-operation-attendance { margin-top: 0; } .fl-operation-copy { padding: 24px 20px; } .fl-operation-preview { padding: 8px; } .fl-modules { padding-top: 0; } .fl-module-list { gap: 0 20px; } .fl-module-list dt { display: grid; gap: 14px; } .fl-tablist { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; border-radius: var(--ds-radius-marketing-inner); } .fl-tablist label { padding: 12px; border-radius: var(--ds-radius-xl); } .fl-sample { padding: 22px; } .fl-role { gap: 24px; } .fl-role > ul li { font-size: var(--ds-text-marketing-body); padding-block: 12px; } .fl-start-steps { gap: 32px; } .fl-start-steps li { display: block; } .fl-start-steps li::before { margin-bottom: 18px; } .fl-faq { padding-top: 0; } .fl-close { margin-inline: 12px; padding-block: 60px; } .fl-close .fl-btn { width: auto; padding-inline: 24px; } .fl-close .fl-cta-row { justify-content: center; display: flex; flex-wrap: wrap; } .fl-foot { display: flex; flex-wrap: wrap; padding-block: 36px; gap: 12px 25px; } .fl-foot > p:first-of-type { flex-basis: 100%; } .fl-foot-links { display: flex; flex-wrap: wrap; } .fl-pricing { padding-block: 64px; } .fl-pricing-card { grid-template-columns: minmax(0,1fr); gap: 36px; padding: 26px; } } @media (prefers-reduced-motion: no-preference) { .fl-modern-hero-copy { animation: fl-marketing-enter .8s cubic-bezier(.32,.72,0,1) both; } .fl-hero-art { animation: fl-marketing-enter 1s cubic-bezier(.32,.72,0,1) .1s both; } @keyframes fl-marketing-enter { from { opacity: 0; transform: translateY(18px); } } } .fl :is(.fl-kpi,.fl-bars i,.fl-todo li,.fl-ping,.fl-sweep,.fl-pill-swap,.fl-pill-swap em,.fl-meter i,.fl-flip-row .fl-p,.fl-flip-row .fl-a,.fl-head,.fl-start-steps li,.fl-faq-list,.fl-close-inner) { animation: none; } @media (prefers-reduced-motion: reduce) { .fl *, .fl *::before, .fl *::after { animation: none; transition: none; scroll-behavior: auto; } } .fl-training-page,.fl-training-feature{--fl-training-ink:var(--ds-marketing-ink);--fl-training-muted:var(--ds-marketing-muted);--fl-training-blue:var(--ds-marketing-blue);--fl-training-red:var(--ds-marketing-coral);--fl-training-silver:var(--ds-marketing-mist);--fl-training-line:var(--ds-marketing-line);color:var(--fl-training-ink)} .fl-training-page{background:var(--ds-white);font-family:var(--ds-font-marketing)} .fl-training-page *,.fl-training-feature *{box-sizing:border-box} .fl-training-page :is(a,button,input,select,textarea,summary):focus-visible,.fl-training-feature a:focus-visible{outline:3px solid var(--fl-training-blue);outline-offset:5px} .fl-training-page :is(h1,h2,h3,h4,p),.fl-training-feature :is(h2,p){margin:0} .fl-training-label{display:block;font-size:var(--ds-text-input);font-weight:700;color:var(--fl-training-blue);margin-bottom:20px} .fl-training-button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:10px 24px;background:var(--ds-amber-500);border:1px solid transparent;border-radius:var(--ds-radius-pill);color:var(--ds-ink);text-decoration:none;font:inherit;font-size:var(--ds-text-marketing-small);font-weight:700;line-height:1.4;cursor:pointer;transition:transform .35s cubic-bezier(.32,.72,0,1),background-color .35s cubic-bezier(.32,.72,0,1)} .fl-training-button:hover{background:var(--ds-amber-400);transform:translateY(-2px)} .fl-training-button svg{flex-shrink:0}.fl-training-button:disabled{opacity:.65;cursor:default} .fl-training-button-secondary{background:var(--ds-white);color:var(--fl-training-ink);border-color:var(--fl-training-line)} .fl-training-button-secondary:hover{background:var(--ds-marketing-mist);border-color:var(--fl-training-line);color:var(--fl-training-ink);transform:translateY(-2px)} .fl-training-text-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;color:var(--fl-training-ink);font-size:var(--ds-text-input);font-weight:700;text-underline-offset:5px;text-decoration-thickness:1px} .fl-training-small{font-size:var(--ds-text-marketing-small);line-height:1.7;color:var(--fl-training-muted);margin-top:19px} .fl-training-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;padding-top:38px;padding-bottom:70px} .fl-training-back{display:inline-flex;align-items:center;min-height:44px;font-size:var(--ds-text-marketing-small);color:var(--fl-training-muted);text-decoration:none;margin-bottom:30px} .fl-training-back:hover{text-decoration:underline} .fl-training-hero h1{font-size:var(--ds-text-marketing-hero);line-height:1.08;letter-spacing:-.065em;font-weight:700;margin-bottom:26px} .fl-training-hero-copy>p:not(.fl-training-small){max-width:500px;font-size:var(--ds-text-marketing-lead);line-height:1.85;color:var(--fl-training-muted)} .fl-training-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:30px} .fl-training-art{position:relative;min-width:0;aspect-ratio:1.1;background:var(--fl-training-silver);border-radius:var(--ds-radius-training-art);overflow:hidden;margin-top:30px} .fl-training-orbit{width:100%;height:100%;color:var(--fl-training-blue)} .fl-training-art-label{position:absolute;background:var(--ds-white);box-shadow:var(--ds-shadow-marketing);border:1px solid var(--ds-marketing-line);border-radius:var(--ds-radius-lg);padding:14px;font-size:var(--ds-text-marketing-caption);font-weight:700;white-space:nowrap} .fl-training-art-ask{top:19%;left:5%}.fl-training-art-explore{top:33%;right:3%}.fl-training-art-review{bottom:19%;left:8%} .fl-training-art-caption{position:absolute;bottom:6%;width:100%;text-align:center;font-size:var(--ds-text-marketing-caption);font-weight:600;color:var(--fl-training-muted);padding:0 12px} .fl-training-art-caption span{display:inline-block;width:6px;height:6px;background:var(--fl-training-red);border-radius:50%;margin-right:6px} .fl-training-values{background:var(--fl-training-silver);border-block:1px solid var(--fl-training-line)} .fl-training-values>.fl-w{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-top:23px;padding-bottom:23px} .fl-training-values p{font-size:var(--ds-text-marketing-small);line-height:1.9;color:var(--fl-training-muted)} .fl-training-values strong{display:block;color:var(--fl-training-ink);font-weight:700;font-size:var(--ds-text-input)} .fl-training-connection{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-top:68px;padding-bottom:58px;border-bottom:1px solid var(--fl-training-line)} .fl-training-connection h2{max-width:560px;font-size:var(--ds-text-marketing-heading);letter-spacing:-.05em;line-height:1.18;font-weight:700} .fl-training-connection>div:last-child p{max-width:560px;font-size:var(--ds-text-input);line-height:1.85;color:var(--fl-training-muted)} .fl-training-connection .fl-training-text-link{margin-top:14px} .fl-course-section{padding-top:96px;padding-bottom:70px;scroll-margin-top:100px} .fl-course-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:35px} .fl-course-heading h2,.fl-training-approach h2,.fl-enquiry h2,.fl-training-feature h2{font-size:var(--ds-text-marketing-heading);letter-spacing:-.05em;line-height:1.18;font-weight:700} .fl-course-heading>p{max-width:360px;font-size:var(--ds-text-input);line-height:1.8;color:var(--fl-training-muted)} .fl-course-filters{display:flex;flex-wrap:wrap;gap:10px} .fl-course-filters button{min-height:44px;cursor:pointer;padding:10px 19px;background:var(--ds-white);color:var(--fl-training-muted);border:1px solid var(--fl-training-line);border-radius:var(--ds-radius-pill);font:inherit;font-size:var(--ds-text-marketing-small);font-weight:700;transition:background .18s,color .18s} .fl-course-filters button:hover{background:var(--fl-training-silver)} .fl-course-filters button[aria-pressed="true"]{background:var(--fl-training-ink);color:var(--ds-white);border-color:var(--fl-training-ink)} .fl-course-result{margin:20px 0;font-size:var(--ds-text-marketing-small);color:var(--fl-training-muted)} .fl-course-list{display:grid;gap:24px} .fl-course-card{display:grid;grid-template-columns:.85fr 1.15fr;border:1px solid var(--fl-training-line);border-radius:var(--ds-radius-marketing-inner);overflow:hidden;background:var(--ds-white)} .fl-course-card-intro{padding:38px;background:var(--fl-training-silver);position:relative} .fl-course-card-intro::after{content:"";width:80px;height:80px;position:absolute;right:25px;bottom:24px;border:1px solid var(--fl-training-line);border-radius:50%;pointer-events:none} .fl-course-educators .fl-course-card-intro{background:var(--ds-marketing-sky)}.fl-course-workflows .fl-course-card-intro{background:var(--ds-marketing-peach)} .fl-course-status{display:inline-flex;align-items:center;gap:6px;font-size:var(--ds-text-marketing-caption);font-weight:700;color:var(--fl-training-red);margin-bottom:26px} .fl-course-status::before{content:"";height:6px;width:6px;border-radius:50%;background:currentColor} .fl-course-audience{display:block;color:var(--fl-training-muted);font-size:var(--ds-text-marketing-caption);font-weight:600;margin-bottom:12px} .fl-course-card h3{font-size:var(--ds-text-marketing-card);line-height:1.2;letter-spacing:-.04em;max-width:300px} .fl-course-card-intro>p{font-size:var(--ds-text-input);line-height:1.85;color:var(--fl-training-muted);margin-top:18px;max-width:340px} .fl-course-level{display:inline-block;font-size:var(--ds-text-marketing-caption);font-weight:700;margin-top:30px;padding:8px 12px;border:1px solid var(--fl-training-line);border-radius:var(--ds-radius-lg);background:var(--ds-white);position:relative;z-index:var(--ds-z-base)} .fl-course-card-content{padding:38px}.fl-course-card h4{font-size:var(--ds-text-input);font-weight:700} .fl-course-card ul{padding:0;margin:20px 0;list-style:none;display:grid;gap:13px} .fl-course-card li{padding-left:21px;position:relative;font-size:var(--ds-text-marketing-small);line-height:1.7;color:var(--fl-training-muted)} .fl-course-card li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--fl-training-blue)} .fl-course-card details{border-top:1px solid var(--fl-training-line);border-bottom:1px solid var(--fl-training-line)} .fl-course-card summary{cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;font-size:var(--ds-text-marketing-small);font-weight:700;list-style:none;padding:12px 0} .fl-course-card summary::-webkit-details-marker{display:none}.fl-course-card summary::after{content:"+";font-size:var(--ds-text-marketing-card);font-weight:400}.fl-course-card details[open] summary::after{content:"−"} .fl-course-card details p{font-size:var(--ds-text-marketing-small);line-height:1.8;color:var(--fl-training-muted);padding-bottom:20px;max-width:420px} .fl-course-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px} .fl-course-card-bottom p{font-size:var(--ds-text-marketing-caption);line-height:1.8;color:var(--fl-training-muted)}.fl-course-card-bottom strong{color:var(--fl-training-ink);font-size:var(--ds-text-marketing-small)} .fl-course-card-bottom p a{color:var(--fl-training-ink);font-weight:700;text-underline-offset:4px} .fl-training-approach{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:40px;padding-bottom:95px} .fl-training-approach-list{display:grid;gap:25px}.fl-training-approach-list article{padding-bottom:22px;border-bottom:1px solid var(--fl-training-line)} .fl-training-approach-list h3{font-size:var(--ds-text-marketing-lead);letter-spacing:-.02em;margin-bottom:10px} .fl-training-approach-list p{font-size:var(--ds-text-input);line-height:1.8;color:var(--fl-training-muted);max-width:420px} .fl-enquiry{background:var(--fl-training-silver);padding:85px 0;scroll-margin-top:90px} .fl-enquiry-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start} .fl-enquiry-copy>p{font-size:var(--ds-text-input);line-height:1.85;color:var(--fl-training-muted);margin-top:24px} .fl-enquiry-note{border-top:1px solid var(--fl-training-line);margin-top:35px;padding-top:25px}.fl-enquiry-note strong{font-size:var(--ds-text-input)}.fl-enquiry-note p{font-size:var(--ds-text-marketing-small);line-height:1.85;color:var(--fl-training-muted);margin-top:12px} .fl-enquiry-copy>.fl-training-text-link{margin-top:20px} .fl-enquiry-form{padding:34px;border-radius:var(--ds-radius-marketing-inner);background:var(--ds-white);border:1px solid var(--fl-training-line)} .fl-enquiry-required{font-size:var(--ds-text-marketing-caption);color:var(--fl-training-muted);margin-bottom:22px} .fl-enquiry-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 18px}.fl-enquiry-wide{grid-column:1/-1} .fl-enquiry-choice-field{padding:0;margin:0;border:0;min-width:0}.fl-enquiry-choice-field legend{font-size:var(--ds-text-marketing-caption);font-weight:700;margin-bottom:10px;line-height:1.6}.fl-enquiry-choice-field legend span{font-weight:400;color:var(--fl-training-muted)} .fl-enquiry-choices{display:flex;flex-wrap:wrap;gap:8px}.fl-enquiry-choices label{display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 12px;border:1px solid var(--ds-control-border);border-radius:var(--ds-radius-lg);cursor:pointer;font-size:var(--ds-text-marketing-caption);line-height:1.6}.fl-enquiry-choices label:has(input:checked){background:var(--ds-marketing-sky);border-color:var(--fl-training-blue)}.fl-enquiry-choices input{width:17px;height:17px;margin:0;flex-shrink:0;accent-color:var(--fl-training-blue)}.fl-enquiry-course-choices{display:grid;grid-template-columns:1fr}.fl-enquiry-choice-field[aria-invalid="true"] .fl-enquiry-choices label{border-color:var(--fl-training-red)} .fl-enquiry-field{min-width:0;display:flex;flex-direction:column;gap:9px}.fl-enquiry-field label{font-size:var(--ds-text-marketing-caption);font-weight:700;line-height:1.6}.fl-enquiry-field label span{font-weight:400;color:var(--fl-training-muted)} .fl-enquiry-field :is(input,select,textarea){min-height:46px;width:100%;border:1px solid var(--ds-control-border);border-radius:var(--ds-radius-lg);background:var(--ds-white);color:var(--fl-training-ink);padding:12px;font:inherit;font-size:var(--ds-text-input);line-height:1.5} .fl-enquiry-field textarea{resize:vertical;min-height:110px}.fl-enquiry-field textarea::placeholder{color:var(--fl-training-muted);opacity:1} .fl-enquiry-field [aria-invalid="true"]{border-color:var(--fl-training-red)} .fl-enquiry-help{font-size:var(--ds-text-marketing-caption);line-height:1.7;color:var(--fl-training-muted)} .fl-enquiry-consent{display:flex;gap:12px;align-items:flex-start;min-height:44px;cursor:pointer;margin-top:22px;font-size:var(--ds-text-marketing-caption);line-height:1.75}.fl-enquiry-consent input{width:19px;height:19px;flex-shrink:0;margin-top:2px;accent-color:var(--fl-training-blue)} .fl-enquiry-privacy{font-size:var(--ds-text-marketing-caption);line-height:1.8;color:var(--fl-training-muted);margin:15px 0 22px}.fl-enquiry-privacy a{color:var(--fl-training-blue);text-underline-offset:3px} .fl-enquiry-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .fl-enquiry-field-error{font-size:var(--ds-text-marketing-caption);line-height:1.7;color:rgb(var(--ds-error-text))}.fl-enquiry-error-summary{padding:15px;border:1px solid var(--fl-training-red);border-radius:var(--ds-radius-lg);margin-bottom:24px;font-size:var(--ds-text-marketing-small);line-height:1.7;color:rgb(var(--ds-error-text))}.fl-enquiry-error-summary ul{padding-left:20px;margin:10px 0 0}.fl-enquiry-error-summary a{color:inherit;display:inline-flex;align-items:center;min-height:44px} .fl-enquiry-status:empty{display:none}.fl-enquiry-status>p{margin-top:20px;line-height:1.8;font-size:var(--ds-text-marketing-small)}.fl-enquiry-success{color:rgb(var(--ds-success-text));padding:14px;background:rgb(var(--ds-success-subtle));border-radius:var(--ds-radius-lg)} .fl-training-feature{padding:100px 0;background:var(--ds-marketing-mist)}.fl-training-feature-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .fl-training-feature-image{position:relative;aspect-ratio:1.18;min-width:0;border-radius:var(--ds-radius-training-image);overflow:hidden;background:var(--ds-marketing-sky)} .fl-training-feature-image img{width:100%;height:100%;object-fit:cover;display:block}.fl-training-image-tag{position:absolute;bottom:22px;left:22px;right:22px;width:max-content;max-width:calc(100% - 44px);background:var(--ds-white);padding:11px 16px;border-radius:var(--ds-radius-lg);font-size:var(--ds-text-marketing-caption);font-weight:700;color:var(--fl-training-ink)} .fl-training-feature-copy>p:not(.fl-training-small){font-size:var(--ds-text-marketing-body);line-height:1.85;color:var(--fl-training-muted);margin-top:22px;max-width:470px} .fl-training-feature-copy ul{padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:23px 0 30px}.fl-training-feature-copy li{padding:8px 11px;border:1px solid var(--ds-marketing-line);border-radius:var(--ds-radius-lg);font-size:var(--ds-text-marketing-caption);font-weight:600;color:var(--fl-training-ink)} @media(min-width:1440px){.fl-training-hero h1{font-size:var(--ds-text-marketing-hero)}} @media(max-width:1024px){.fl-training-hero{gap:30px}.fl-enquiry-inner{gap:35px;grid-template-columns:.8fr 1.2fr}.fl-enquiry-form{padding:25px}.fl-training-feature-inner{gap:40px}.fl-course-card-intro,.fl-course-card-content{padding:28px}.fl-training-art-label{padding:10px;font-size:var(--ds-text-marketing-caption)}} @media(max-width:768px){.fl-training-hero{grid-template-columns:1fr;padding-top:20px;padding-bottom:45px;gap:15px}.fl-training-hero h1{font-size:var(--ds-text-marketing-hero)}.fl-training-back{margin-bottom:18px}.fl-training-art{max-width:540px;width:100%;aspect-ratio:1.35;margin-top:15px;border-top-left-radius:var(--ds-radius-marketing)}.fl-training-art-label{font-size:var(--ds-text-marketing-caption)}.fl-training-art-caption{font-size:var(--ds-text-marketing-caption);bottom:5%}.fl-training-values>.fl-w{gap:15px}.fl-training-values p{font-size:var(--ds-text-marketing-caption)}.fl-training-values strong{font-size:var(--ds-text-marketing-caption)}.fl-training-connection{grid-template-columns:1fr;gap:18px;padding-top:45px;padding-bottom:42px}.fl-course-section{padding-top:60px;padding-bottom:45px}.fl-course-heading{display:block}.fl-course-heading>p{margin-top:20px;max-width:500px}.fl-course-card{grid-template-columns:1fr}.fl-course-card-intro{padding:27px}.fl-course-status{margin-bottom:18px}.fl-course-card h3{max-width:none}.fl-course-card-intro>p{max-width:520px}.fl-course-level{margin-top:20px}.fl-course-card-intro::after{width:62px;height:62px}.fl-training-approach{grid-template-columns:1fr;gap:32px;padding-top:20px;padding-bottom:55px}.fl-training-approach-list p{max-width:none}.fl-enquiry{padding:55px 0}.fl-enquiry-inner{grid-template-columns:1fr;gap:30px}.fl-enquiry-copy>p{max-width:550px}.fl-enquiry-note{margin-top:22px;padding-top:20px}.fl-training-feature{padding:60px 0}.fl-training-feature-inner{grid-template-columns:1fr;gap:35px}.fl-training-feature-image{aspect-ratio:1.5}.fl-training-feature-copy>p:not(.fl-training-small){max-width:550px}} @media(max-width:480px){.fl-training-art-label{font-size:var(--ds-text-marketing-caption);padding:9px}.fl-training-art-explore{right:2%}.fl-training-art-review{bottom:23%}.fl-training-art-caption{font-size:var(--ds-text-marketing-caption)}.fl-training-values>.fl-w{grid-template-columns:1fr;gap:12px;padding-top:18px;padding-bottom:18px}.fl-training-values p{font-size:var(--ds-text-marketing-caption)}.fl-training-values strong{display:inline;font-size:var(--ds-text-marketing-caption);margin-right:5px}.fl-course-filters{gap:8px}.fl-course-filters button{padding:9px 13px;font-size:var(--ds-text-marketing-caption)}.fl-course-card-content{padding:25px}.fl-course-card-bottom{gap:12px}.fl-enquiry-form{padding:22px}.fl-enquiry-grid{grid-template-columns:1fr;gap:22px}.fl-training-feature-copy li{font-size:var(--ds-text-marketing-caption)}.fl-training-image-tag{font-size:var(--ds-text-marketing-caption);bottom:16px;left:16px}.fl-training-actions{gap:12px}.fl-training-hero-copy>p:not(.fl-training-small){font-size:var(--ds-text-marketing-body)}.fl-enquiry-form>.fl-training-button{width:100%}} @media(prefers-reduced-motion:reduce){.fl-training-page *,.fl-training-feature *{scroll-behavior:auto;transition:none;animation:none}} .fl.fl-training-page a.fl-training-button,.fl .fl-training-feature a.fl-training-button{color:var(--ds-ink)} .fl-enquiry-field :is(input,textarea){font-size:var(--ds-text-marketing-body)} .fl-enquiry-fields{margin:0;padding:0;border:0;min-width:0} .fl-editorial{min-height:100vh;background:var(--ds-white)} .fl-editorial-main{padding-top:72px;padding-bottom:96px} .fl-editorial-hero{max-width:850px;padding:46px 0 66px;border-bottom:1px solid var(--ds-marketing-line)} .fl-editorial-kicker{margin:0 0 22px;color:var(--ds-marketing-blue);font-size:var(--ds-text-marketing-small);font-weight:700} .fl-editorial-hero h1,.fl-editorial-article h1{max-width:850px;margin:0;color:var(--ds-marketing-ink);font-size:var(--ds-text-marketing-hero);font-weight:700;letter-spacing:-.065em;line-height:1.08;text-wrap:balance} .fl-editorial-hero>p:not(.fl-editorial-kicker){max-width:650px;margin:25px 0 0;color:var(--ds-marketing-muted);font-size:var(--ds-text-marketing-lead);line-height:1.8} .fl-editorial-section-title{margin:58px 0 0;font-size:var(--ds-text-marketing-heading);letter-spacing:-.05em} .fl-editorial-list{margin-top:10px} .fl-editorial-row{display:grid;grid-template-columns:170px minmax(0,1fr) auto;align-items:start;gap:28px;padding:30px 0;border-bottom:1px solid var(--ds-marketing-line)} .fl-editorial-meta{margin:6px 0 0;color:var(--ds-marketing-muted);font-size:var(--ds-text-marketing-caption)} .fl-editorial-row h3{margin:0;font-size:var(--ds-text-marketing-card);letter-spacing:-.035em;line-height:1.25} .fl-editorial-row h3 a{color:var(--ds-marketing-ink);text-decoration:none;text-underline-offset:5px} .fl-editorial-row h3 a:hover{text-decoration:underline} .fl-editorial-row>div>p{max-width:620px;margin:12px 0 0;color:var(--ds-marketing-muted);font-size:var(--ds-text-marketing-small);line-height:1.8} .fl-editorial-read{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ds-marketing-ink);font-size:var(--ds-text-marketing-small);font-weight:700;text-underline-offset:5px;white-space:nowrap} .fl-editorial-callout{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:78px;padding:35px 38px;background:var(--ds-marketing-mist);border:1px solid var(--ds-marketing-line);border-radius:var(--ds-radius-marketing)} .fl-editorial-callout h2{margin:0;font-size:var(--ds-text-marketing-card);letter-spacing:-.035em} .fl-editorial-callout p{max-width:620px;margin:10px 0 0;color:var(--ds-marketing-muted);font-size:var(--ds-text-marketing-small);line-height:1.75} .fl-editorial-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin:0 0 46px;color:var(--ds-marketing-muted);font-size:var(--ds-text-marketing-caption)} .fl-editorial-breadcrumb a{color:var(--ds-marketing-ink);text-underline-offset:4px} .fl-editorial-article{max-width:900px;margin-inline:auto} .fl-editorial-article-head{padding-bottom:42px;border-bottom:1px solid var(--ds-marketing-line)} .fl-editorial-article-head .fl-editorial-deck{max-width:700px;margin:25px 0 0;color:var(--ds-marketing-muted);font-size:var(--ds-text-marketing-lead);line-height:1.8} .fl-editorial-byline{margin:18px 0 0;color:var(--ds-marketing-ink);font-size:var(--ds-text-marketing-small);font-weight:700} .fl-editorial-prose{max-width:720px;margin:56px auto 0} .fl-editorial-prose section+section{margin-top:44px} .fl-editorial-prose h2{margin:0 0 16px;font-size:var(--ds-text-marketing-card);letter-spacing:-.035em;line-height:1.3} .fl-editorial-prose p,.fl-editorial-prose li{color:var(--ds-marketing-muted);font-size:var(--ds-text-marketing-body);line-height:1.9} .fl-editorial-prose p{margin:0 0 17px} .fl-editorial-prose ul,.fl-editorial-prose ol{display:grid;gap:11px;padding-left:25px;margin:18px 0} .fl-course-hero{padding-bottom:54px} .fl-editorial-hero>p.fl-course-status-note{margin-top:22px;padding:17px 20px;border-left:3px solid var(--ds-amber-500);background:var(--ds-marketing-mist);font-size:var(--ds-text-marketing-small)} .fl-editorial-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px} .fl-course-detail-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;padding:66px 0;border-bottom:1px solid var(--ds-marketing-line)} .fl-course-detail-grid h2,.fl-course-outline h2{margin:0;font-size:var(--ds-text-marketing-heading);letter-spacing:-.05em;line-height:1.18} .fl-course-outcomes{display:grid;gap:15px;margin:0;padding:0;list-style:none} .fl-course-outcomes li{padding:17px 20px;border:1px solid var(--ds-marketing-line);border-radius:var(--ds-radius-marketing-inner);font-size:var(--ds-text-marketing-small);line-height:1.7} .fl-course-outline{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;padding:75px 0 10px} .fl-course-outline header>p:last-child{max-width:380px;color:var(--ds-marketing-muted);font-size:var(--ds-text-marketing-small);line-height:1.8} .fl-course-outline ol{display:grid;gap:0;margin:0;padding:0;list-style:none} .fl-course-outline li{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--ds-marketing-line)} .fl-course-step{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ds-marketing-mist);color:var(--ds-marketing-blue);font-size:var(--ds-text-marketing-caption);font-weight:700} .fl-course-outline h3{margin:3px 0 8px;font-size:var(--ds-text-marketing-body);letter-spacing:-.02em} .fl-course-outline li p{margin:0;color:var(--ds-marketing-muted);font-size:var(--ds-text-marketing-small);line-height:1.8} @media(max-width:768px){.fl-editorial-main{padding-top:46px;padding-bottom:70px}.fl-editorial-hero{padding-top:26px}.fl-editorial-row{grid-template-columns:130px minmax(0,1fr);gap:18px}.fl-editorial-read{grid-column:2}.fl-course-detail-grid,.fl-course-outline{grid-template-columns:1fr;gap:30px}} @media(max-width:480px){.fl-editorial-main{padding-top:28px;padding-bottom:55px}.fl-editorial-hero{padding-bottom:42px}.fl-editorial-hero>p:not(.fl-editorial-kicker),.fl-editorial-article-head .fl-editorial-deck{font-size:var(--ds-text-marketing-body)}.fl-editorial-row{grid-template-columns:1fr;gap:8px;padding:24px 0}.fl-editorial-meta{margin:0}.fl-editorial-read{grid-column:1}.fl-editorial-callout{align-items:flex-start;flex-direction:column;margin-top:46px;padding:26px}.fl-editorial-article-head{padding-bottom:30px}.fl-editorial-prose{margin-top:38px}.fl-editorial-prose section+section{margin-top:34px}.fl-course-detail-grid,.fl-course-outline{padding-block:48px}}