.elementor-19069 .elementor-element.elementor-element-41a2d1c{width:100%;max-width:100%;}/* Credibled interactive demo: styles. Paste into Elementor > page settings (Advanced > Custom CSS), or enqueue as a file. Everything is scoped to #credibled-demo, so nothing here touches the rest of the page. Section 1 shields the demo from theme and Elementor kit styles; the rest is the Credibled design system tokens and components, scoped to the demo. */ /* 1. Container and theme shield */ #credibled-demo { display: block; position: relative; width: 100%; min-height: 720px; isolation: isolate; text-align: left; font-size: 16px; font-weight: 400; font-style: normal; line-height: normal; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; white-space: normal; } #credibled-demo :where(button, input, select, textarea, label, fieldset, legend, table, caption, thead, tbody, tfoot, tr, th, td, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figure, figcaption, hr, a, header, footer, nav, section, article, aside, main) { all: revert; } #credibled-demo #credibled-demo-template { display: none !important; } /* 2. Design tokens */ #credibled-demo { --indigo-950: #0D0530; --indigo-900: #190A5A; --indigo-800: #200B6A; --indigo-700: #250C77; --indigo-600: #3D1FA0; --indigo-500: #5A4994; --indigo-400: #7B6CB5; --indigo-300: #A593D4; --indigo-200: #C9BEE8; --indigo-100: #ECEAF3; --indigo-50: #F5F4FA; --lavender: #D8D4E4; --lavender-50: #ECEAF3; --orange-900: #7A2606; --orange-800: #A33008; --orange-700: #C23C0A; --orange-600: #D85220; --orange-500: #EE642B; --orange-400: #F08A5A; --orange-300: #F5A882; --orange-200: #FAC9AE; --orange-100: #FDF0EB; --orange-50: #FEF7F4; --peach: #FCE0D8; --peach-50: #FDF0EB; --cream: #EEEEE0; --cream-dark: #E2E2CF; --app-gray: #EEEEEE; --white: #FFFFFF; --bg: #FAFAFA; --ink-50: #F7F7F5; --ink-100: #EFEFED; --ink-150: #E5E5E5; --ink-200: #D5D5D5; --ink-300: #BBBBBB; --ink-400: #888888; --ink-500: #666666; --ink-600: #404040; --ink-700: #2A2A2A; --ink-800: #1A1A1A; --ink-900: #0F0F0F; --green-50: #E8F6EF; --green-200: #9DDABF; --green-500: #2BA36C; --green-600: #238A5B; --green-700: #1A6E48; --amber-50: #FEF5E7; --amber-200: #F5CE81; --amber-500: #E8A33D; --amber-700: #B87B1A; --red-50: #FDECEA; --red-200: #F0AAAA; --red-500: #D64545; --red-700: #A83333; --blue-50: #E7F3FD; --blue-100: #C6E3FB; --blue-200: #93CBF8; --blue-300: #5FB2F3; --blue-400: #2E9CEF; --blue-500: #1396ED; --blue-600: #0F7AC4; --blue-700: #0C5E97; --blue-800: #094672; --blue-900: #07304F; --brand-green-50: #F1F9ED; --brand-green-100: #D1F1C4; --brand-green-200: #B9E6A6; --brand-green-300: #A0E085; --brand-green-400: #96CB88; --brand-green-500: #7BB86A; --brand-green-600: #5E9C4D; --brand-green-700: #467A39; --maple-500: #D8232A; --red-600: #BE3B3B; --navy-50: var(--indigo-50); --navy-100: var(--indigo-100); --navy-200: var(--indigo-200); --navy-300: var(--indigo-300); --navy-400: var(--indigo-400); --navy-500: var(--indigo-500); --navy-600: var(--indigo-600); --navy-700: var(--indigo-700); --navy-800: var(--indigo-800); --navy-900: var(--indigo-900); --navy-950: var(--indigo-950); --cobalt-500: var(--blue-500); --ink-950: var(--ink-900); --brand: var(--indigo-700); --brand-hover: var(--indigo-900); --brand-strong: var(--indigo-950); --brand-subtle: var(--lavender-50); --brand-subtle-2: var(--lavender); --on-brand: var(--white); --accent: var(--orange-500); --accent-hover: var(--orange-600); --accent-strong: var(--orange-700); --accent-subtle: var(--orange-100); --on-accent: var(--white); --text-strong: var(--indigo-700); --text-body: var(--ink-600); --text-muted: var(--ink-400); --text-subtle: var(--ink-300); --text-on-dark: var(--white); --text-on-dark-muted: rgba(255,255,255,0.65); --text-link: var(--indigo-700); --text-accent: var(--orange-500); --surface-page: var(--white); --surface-subtle: var(--bg); --surface-card: var(--white); --surface-sunken: var(--ink-100); --surface-cream: var(--cream); --surface-lavender: var(--lavender-50); --surface-peach: var(--peach-50); --surface-brand: var(--indigo-700); --surface-brand-dark: var(--indigo-900); --surface-accent: var(--orange-500); --surface-brand-subtle: var(--lavender-50); --border-subtle: var(--ink-150); --border-default: var(--ink-200); --border-strong: var(--ink-300); --border-brand: var(--indigo-700); --border-accent: var(--orange-500); --border-inverse: rgba(255,255,255,0.14); --ring: 0 0 0 3px rgba(37, 12, 119, 0.22); --ring-accent: 0 0 0 3px rgba(238, 100, 43, 0.30); --ring-error: 0 0 0 3px rgba(214, 69, 69, 0.28); --status-complete-fg: var(--green-700); --status-complete-bg: var(--green-50); --status-complete-bd: var(--green-200); --status-progress-fg: var(--blue-700); --status-progress-bg: var(--blue-50); --status-progress-bd: #B4CDFB; --status-waiting-fg: var(--amber-700); --status-waiting-bg: var(--amber-50); --status-waiting-bd: var(--amber-200); --status-flag-fg: var(--red-700); --status-flag-bg: var(--red-50); --status-flag-bd: var(--red-200); --info: var(--blue-500); --text-info: var(--blue-600); --surface-info: var(--blue-50); --report-clear: var(--brand-green-300); --report-clear-soft: var(--brand-green-100); --report-brand-green: var(--brand-green-400); } #credibled-demo { --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold:800; --fs-display-1: 64px; --fs-display-2: 50px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-overline:12px; --lh-tight: 1.04; --lh-snug: 1.18; --lh-heading: 1.25; --lh-body: 1.6; --lh-relaxed: 1.7; --ls-display: -0.03em; --ls-heading: -0.02em; --ls-tight: -0.01em; --ls-normal: 0; --ls-overline: 0.08em; --type-display-1: var(--fw-bold) var(--fs-display-1)/var(--lh-tight) var(--font-display); --type-display-2: var(--fw-bold) var(--fs-display-2)/var(--lh-tight) var(--font-display); --type-h1: var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display); --type-h2: var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-display); --type-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-heading) var(--font-display); --type-h4: var(--fw-semibold) var(--fs-h4)/var(--lh-heading) var(--font-sans); --type-body-lg: var(--fw-regular) var(--fs-body-lg)/var(--lh-relaxed) var(--font-sans); --type-body: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); --type-body-sm: var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-sans); --type-caption: var(--fw-medium) var(--fs-caption)/1.4 var(--font-sans); --text-display-1: var(--type-display-1); --text-display-2: var(--type-display-2); --text-h1: var(--type-h1); --text-h2: var(--type-h2); --text-h3: var(--type-h3); --text-h4: var(--type-h4); --text-body-lg: var(--type-body-lg); --text-body-sm: var(--type-body-sm); --text-caption: var(--type-caption); } #credibled-demo { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; --control-sm: 36px; --control-md: 44px; --control-lg: 52px; --container-max: 1200px; --container-narrow: 760px; --gutter: var(--space-6); --bw-1: 1px; --bw-2: 2px; } #credibled-demo { --shadow-xs: 0 1px 2px rgba(26, 8, 88, 0.05); --shadow-sm: 0 1px 2px rgba(26, 8, 88, 0.05), 0 2px 6px -2px rgba(26, 8, 88, 0.06); --shadow-md: 0 1px 2px rgba(26, 8, 88, 0.04), 0 4px 10px -3px rgba(26, 8, 88, 0.07), 0 12px 26px -14px rgba(26, 8, 88, 0.10); --shadow-lg: 0 1px 2px rgba(26, 8, 88, 0.035), 0 8px 20px -8px rgba(26, 8, 88, 0.09), 0 26px 50px -26px rgba(26, 8, 88, 0.16); --shadow-xl: 0 2px 4px rgba(26, 8, 88, 0.04), 0 14px 32px -14px rgba(26, 8, 88, 0.11), 0 44px 76px -34px rgba(26, 8, 88, 0.20); --shadow-brand: 0 10px 26px -14px rgba(238, 100, 43, 0.85), 0 1px 2px rgba(26, 8, 88, 0.08); --shadow-brand-hover: 0 16px 32px -14px rgba(238, 100, 43, 0.90), 0 1px 2px rgba(26, 8, 88, 0.08); --shadow-inset: inset 0 1px 2px rgba(26, 8, 88, 0.05); } /* 3. Base elements */ #credibled-demo *, #credibled-demo *::before, #credibled-demo *::after { box-sizing: border-box; } #credibled-demo { margin: 0; font: var(--type-body); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-optical-sizing: auto; text-rendering: optimizeLegibility; } #credibled-demo h1, #credibled-demo h2, #credibled-demo h3, #credibled-demo h4 { margin: 0; color: var(--text-strong); letter-spacing: var(--ls-heading); text-wrap: balance; } #credibled-demo h1 { font: var(--type-h1); } #credibled-demo h2 { font: var(--type-h2); } #credibled-demo h3 { font: var(--type-h3); } #credibled-demo h4 { font: var(--type-h4); } #credibled-demo p { margin: 0; text-wrap: pretty; } #credibled-demo a { color: var(--text-link); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; } #credibled-demo a:hover { text-decoration: underline; } #credibled-demo code, #credibled-demo kbd, #credibled-demo samp, #credibled-demo pre { font-family: var(--font-mono); } #credibled-demo ::selection { background: var(--blue-200); color: var(--ink-900); } #credibled-demo { scroll-behavior: smooth; } #credibled-demo { overflow-x: clip; max-width: 100%; } #credibled-demo section[id] { scroll-margin-top: 84px; } #credibled-demo button { -webkit-tap-highlight-color: transparent; } #credibled-demo :focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; border-radius: 8px; } @media (prefers-reduced-motion: reduce) { #credibled-demo *, #credibled-demo *::before, #credibled-demo *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } #credibled-demo .t-display-1 { font: var(--type-display-1); letter-spacing: var(--ls-display); color: var(--text-strong); } #credibled-demo .t-display-2 { font: var(--type-display-2); letter-spacing: var(--ls-display); color: var(--text-strong); } #credibled-demo .t-h1 { font: var(--type-h1); } #credibled-demo .t-h2 { font: var(--type-h2); } #credibled-demo .t-h3 { font: var(--type-h3); } #credibled-demo .t-h4 { font: var(--type-h4); } #credibled-demo .t-body-lg { font: var(--type-body-lg); color: var(--text-body); } #credibled-demo .t-body { font: var(--type-body); color: var(--text-body); } #credibled-demo .t-body-sm { font: var(--type-body-sm); color: var(--text-body); } #credibled-demo .t-caption { font: var(--type-caption); color: var(--text-muted); } #credibled-demo .t-overline { font-family: var(--font-sans); font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-muted); } #credibled-demo .t-mono { font-family: var(--font-mono); } #credibled-demo .cb-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* 4. Components */ #credibled-demo .cb-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-8); } #credibled-demo .cb-wrap--narrow { max-width: var(--container-narrow); } #credibled-demo .cb-section { padding: var(--space-20) 0; } #credibled-demo .cb-section--tight { padding: var(--space-12) 0; } #credibled-demo .cb-section--cream { background: var(--surface-cream); } #credibled-demo .cb-section--lavender { background: var(--surface-lavender); } #credibled-demo .cb-section--brand { background: var(--surface-brand); color: var(--text-on-dark); } #credibled-demo .cb-section--brand h1, #credibled-demo .cb-section--brand h2, #credibled-demo .cb-section--brand h3 { color: var(--text-on-dark); } @media (max-width: 860px) { #credibled-demo .cb-wrap { padding: 0 var(--space-5); } #credibled-demo .cb-section { padding: var(--space-12) 0; } } #credibled-demo .cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-md); font-family: var(--font-sans); font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background-color .16s cubic-bezier(.4,0,.2,1), border-color .16s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1); } #credibled-demo .cb-btn--sm { height: var(--control-sm); padding: 0 14px; font-size: var(--fs-body-sm); } #credibled-demo .cb-btn--md { height: 42px; padding: 0 18px; font-size: 15px; } #credibled-demo .cb-btn--lg { height: 48px; padding: 0 24px; font-size: 15px; } #credibled-demo .cb-btn--xl { height: 56px; padding: 0 28px; font-size: var(--fs-body); } #credibled-demo .cb-btn--primary { background: var(--brand); color: var(--on-brand); } #credibled-demo .cb-btn--primary:hover { background: var(--brand-hover); color: var(--on-brand); text-decoration: none; } #credibled-demo .cb-btn--secondary { background: var(--surface-card); color: var(--brand); border-color: var(--border-default); box-shadow: var(--shadow-xs); } #credibled-demo .cb-btn--secondary:hover { background: var(--ink-50); border-color: var(--border-strong); color: var(--brand); text-decoration: none; } #credibled-demo .cb-btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-brand); } #credibled-demo .cb-btn--accent:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); box-shadow: var(--shadow-brand-hover); text-decoration: none; } #credibled-demo .cb-btn--accent:active { transform: translateY(.5px); } #credibled-demo .cb-btn--ghost { background: transparent; color: var(--brand); } #credibled-demo .cb-btn--ghost:hover { background: var(--ink-50); color: var(--brand); text-decoration: none; } #credibled-demo .cb-btn--onbrand { background: var(--white); color: var(--brand); } #credibled-demo .cb-btn--onbrand:hover { background: var(--ink-50); color: var(--brand); text-decoration: none; } #credibled-demo .cb-btn--block { width: 100%; } @media (max-width: 860px) { #credibled-demo .cb-btn--block-sm { width: 100%; } } #credibled-demo .cb-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 4px 10px; font: var(--fw-semibold) 11.5px/1 var(--font-sans); } #credibled-demo .cb-badge--success { background: var(--status-complete-bg); color: var(--status-complete-fg); border: 1px solid var(--status-complete-bd); } #credibled-demo .cb-badge--progress { background: var(--status-progress-bg); color: var(--status-progress-fg); border: 1px solid var(--status-progress-bd); } #credibled-demo .cb-badge--waiting { background: var(--status-waiting-bg); color: var(--status-waiting-fg); border: 1px solid var(--status-waiting-bd); } #credibled-demo .cb-badge--flag { background: var(--status-flag-bg); color: var(--status-flag-fg); border: 1px solid var(--status-flag-bd); } #credibled-demo .cb-badge--neutral { background: var(--ink-50); color: var(--ink-600); border: 1px solid var(--border-subtle); } #credibled-demo .cb-eyebrow { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--orange-50); border: 1px solid var(--orange-200); border-radius: var(--radius-pill); padding: 6px 14px; font: var(--fw-semibold) var(--fs-overline)/1 var(--font-sans); color: var(--orange-700); letter-spacing: var(--ls-overline); text-transform: uppercase; } #credibled-demo .cb-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1); } #credibled-demo .cb-card--pad { padding: var(--space-6); } #credibled-demo a.cb-card, #credibled-demo .cb-card--link { display: block; text-decoration: none; color: inherit; } #credibled-demo .cb-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--indigo-100); } #credibled-demo a.cb-card:hover, #credibled-demo a.cb-card:hover * { color: inherit; text-decoration: none; } #credibled-demo .cb-tab { border: none; cursor: pointer; padding: 9px 20px; border-radius: var(--radius-pill); font: var(--fw-semibold) var(--fs-body-sm)/1 var(--font-sans); background: transparent; color: var(--ink-500); transition: background .15s, color .15s; } #credibled-demo .cb-tab:hover { color: var(--brand); } #credibled-demo .cb-tab.is-active { background: var(--brand); color: var(--on-brand); } #credibled-demo .cb-field { display: block; margin-bottom: var(--space-4); } #credibled-demo .cb-label { display: block; margin-bottom: 6px; font: var(--fw-medium) var(--fs-body-sm)/1.4 var(--font-sans); color: var(--text-strong); } #credibled-demo .cb-input, #credibled-demo .cb-select, #credibled-demo .cb-textarea { width: 100%; min-height: var(--control-md); padding: 10px 14px; font: var(--type-body); color: var(--ink-700); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-inset); transition: border-color .15s ease, box-shadow .15s ease; } #credibled-demo .cb-textarea { min-height: 110px; resize: vertical; } #credibled-demo .cb-input:hover, #credibled-demo .cb-select:hover, #credibled-demo .cb-textarea:hover { border-color: var(--border-strong); } #credibled-demo .cb-input:focus, #credibled-demo .cb-select:focus, #credibled-demo .cb-textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } #credibled-demo .cb-input::placeholder, #credibled-demo .cb-textarea::placeholder { color: var(--text-subtle); } #credibled-demo .cb-help { margin-top: 6px; font: var(--type-caption); color: var(--text-muted); } #credibled-demo .cb-error { margin-top: 6px; font: var(--type-caption); color: var(--red-700); } #credibled-demo .cb-input[aria-invalid="true"], #credibled-demo .cb-select[aria-invalid="true"], #credibled-demo .cb-textarea[aria-invalid="true"] { border-color: var(--red-500); } #credibled-demo .cb-linkarrow { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); color: var(--brand); text-decoration: none; } #credibled-demo .cb-linkarrow:hover, #credibled-demo .cb-linkarrow:hover * { color: var(--accent) !important; text-decoration: none; } #credibled-demo .cb-linkarrow svg { transition: transform .18s cubic-bezier(.4,0,.2,1); } #credibled-demo .cb-linkarrow:hover svg { transform: translateX(4px); } #credibled-demo .cb-inline-link { color: var(--text-link); border-bottom: 1px solid var(--indigo-100); text-decoration: none; } #credibled-demo .cb-inline-link:hover { color: var(--brand) !important; border-color: var(--brand); } #credibled-demo .cb-navlink:hover { background: var(--ink-50); color: var(--brand) !important; } #credibled-demo .cb-faq { border-bottom: 1px solid var(--border-subtle); } #credibled-demo .cb-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font: var(--fw-semibold) var(--fs-body-lg)/1.4 var(--font-sans); color: var(--text-strong); } #credibled-demo .cb-faq > summary::-webkit-details-marker { display: none; } #credibled-demo .cb-faq > summary::marker { content: ""; } #credibled-demo .cb-faq-chev { flex: none; color: var(--accent); transition: transform .2s cubic-bezier(.4,0,.2,1); } #credibled-demo .cb-faq[open] .cb-faq-chev { transform: rotate(180deg); } #credibled-demo .cb-faq-body { padding: 0 0 var(--space-5); font: var(--type-body); color: var(--text-body); max-width: 70ch; } #credibled-demo .cb-faq-btn:hover { background: var(--ink-50); } #credibled-demo a.cb-btn--accent, #credibled-demo a.cb-btn--accent:visited, #credibled-demo a.cb-btn--accent:hover, #credibled-demo a.cb-btn--accent:focus, #credibled-demo a.cb-btn--accent * { color: #fff !important; } #credibled-demo section[data-screen-label="CTA"] h2, #credibled-demo section[data-screen-label="CTA"] h2 * { color: #fff !important; } #credibled-demo [data-om-page-part] img { max-width: 100%; } #credibled-demo [data-om-page-part] img[height="26"] { height: 26px !important; width: auto !important; max-width: 160px !important; } #credibled-demo [data-om-page-part] img[height="22"] { height: 22px !important; width: auto !important; max-width: 120px !important; } #credibled-demo [data-om-page-part] a[href]:hover { color: var(--orange-500); } #credibled-demo [data-om-page-part] a[href]:hover .cb-btn { color: inherit; } #credibled-demo [data-om-page-part] a[href]:hover .cb-btn--primary { background: var(--brand-hover); } #credibled-demo .cb-on-dark, #credibled-demo .cb-on-dark h1, #credibled-demo .cb-on-dark h2, #credibled-demo .cb-on-dark h3, #credibled-demo .cb-on-dark p { color: #fff !important; } /* 5. Demo */ #credibled-demo { margin:0;background:#F4F4F1;font-family:Inter,system-ui,sans-serif;color:var(--ink-800);-webkit-font-smoothing:antialiased } #credibled-demo *, #credibled-demo *::before, #credibled-demo *::after { box-sizing:border-box } #credibled-demo a { color:var(--indigo-700) } #credibled-demo a:hover { color:var(--orange-700) } #credibled-demo button { font-family:inherit } #credibled-demo button:focus-visible, #credibled-demo a:focus-visible, #credibled-demo input:focus-visible, #credibled-demo [tabindex]:focus-visible { outline:3px solid var(--orange-600);outline-offset:2px } @keyframes cdpulse { 0%{box-shadow:0 0 0 0 rgba(237,100,43,.6)}70%{box-shadow:0 0 0 14px rgba(237,100,43,0)}100%{box-shadow:0 0 0 0 rgba(237,100,43,0)} } @keyframes cdscan { 0%{top:0}50%{top:calc(100% - 3px)}100%{top:0} } @keyframes cdspotmid { 0%{box-shadow:0 0 0 0 rgba(237,100,43,.7),0 0 0 3px rgba(237,100,43,.18)}70%{box-shadow:0 0 0 18px rgba(237,100,43,0),0 0 0 3px rgba(237,100,43,.18)}100%{box-shadow:0 0 0 0 rgba(237,100,43,0),0 0 0 3px rgba(237,100,43,.18)} } @keyframes cdspot { 0%{box-shadow:0 0 0 0 rgba(237,100,43,.8),0 0 0 4px rgba(237,100,43,.28)}70%{box-shadow:0 0 0 22px rgba(237,100,43,0),0 0 0 4px rgba(237,100,43,.28)}100%{box-shadow:0 0 0 0 rgba(237,100,43,0),0 0 0 4px rgba(237,100,43,.28)} } #credibled-demo [data-spot] { outline:2.5px solid var(--orange-500)!important;outline-offset:4px!important;animation:cdspotmid 1.45s cubic-bezier(.4,0,.2,1) infinite;position:relative;z-index:2 } #credibled-demo [data-spot="boost"] { outline-width:3px!important;animation:cdspot 1.3s cubic-bezier(.4,0,.2,1) infinite } @media (prefers-reduced-motion:reduce) { #credibled-demo * { animation:none!important;transition:none!important } }