/* biome-ignore-all format: legacy hand-maintained stylesheet; preserve existing author formatting */
/* biome-ignore-all lint/correctness/noUnknownMediaFeatureName: intentional -ms-high-contrast legacy high-contrast support */
/* biome-ignore-all lint/correctness/noUnknownTypeSelector: pre-existing legacy selector */
.ms-Button {
    border-radius: 4px;
    padding: 0 12px;
    min-height: initial;
}

button.ms-Button--primary,
button.ms-Button--default,
button.ms-Button--command,
button.ms-Button--icon {
    display: inline-block;
}

button.ms-Button--icon.ms-UpButton,
button.ms-Button--icon.ms-DownButton {
    display: block;
}

button.ms-Dropdown-item {
    min-height: 36px;
}

/* Accessible gradient (per design Style guide). The previous purple stop (#9692ff) only
   reached 2.67:1 against the white button label, failing WCAG 1.4.3. #6a5ae0 keeps the
   brand ramp while giving 5.06:1 at the purple end and 4.53:1 at the blue end.
   Bugs 10684150, 10684879, 10684911, 10698143, 10698148, 10698151 */
.ms-Button--primary {
    background: linear-gradient(280.75deg, #0078d4 0%, #6a5ae0 94.81%);
    border: 1px solid transparent;
    height: 32px;
}

.ms-Button--default {
    border: 1px solid #0078d4;
    color: #004578;
    height: 32px;
}

.ms-Button--default i {
    color: #004578;
}

.ms-Pivot-link.is-selected::before {
    background-color: #9692ff;
}

.ms-Pivot-link.is-selected {
    background-color: transparent;
}

.ms-Button--default:hover,
.ms-Button--default.is-checked,
.ms-Button--hasMenu.is-checked {
    background-color: #eff6fc;
}

.ms-Button--primary.is-disabled,
.ms-Button--default.is-disabled {
    background: #edebe9;
    color: #bebbb8;
    border: 1px solid #e0e0e0;
}

.ms-Button--default.is-disabled path,
.ms-Button--commandBar.is-disabled path {
    fill: #bebbb8;
}

/* Hover keeps the same "one shade darker" relationship as rest, and must also clear 4.5:1
   against the white label (#7974ff was 3.65:1). #5a4bd0 gives 6.26:1. */
.ms-Button--primary:hover {
    background: linear-gradient(281deg, #106ebe 0%, #5a4bd0 94.81%);
    color: #fff;
}

.ms-Button--hasMenu.is-disabled {
    border: none;
}
.ms-Button--icon {
    padding: 0;
}

button.ms-Button.is-disabled,
button.ms-Button.is-disabled i,
button.ms-Button.is-disabled span {
    background: transparent;
    color: #bebbb8;
}

button.ms-Button.is-disabled i path {
    fill: #bebbb8;
}

/* biome-ignore lint/correctness/noUnknownTypeSelector: pre-existing legacy selector; not altering modal styling in this a11y change */
.ms-Modal-scrollableContent scrollableContent {
    border-radius: 8px;
}

.ms-ContextualMenu-link:hover {
    background-color: #eaeaff;
}

.ms-SearchBox {
    border-radius: 4px;
    border: 1px solid #d1d1d1;
}

/*Checkbox override*/

.ms-Checkbox-label {
    margin-top: 5px;
    margin-bottom: 7px;
}

.ms-Checkbox-checkbox {
    width: 16px;
    height: 16px;
    border-color: #616161;
}

.ms-Checkbox span {
    line-height: 20px;
    color: #616161;
}

.ms-Checkbox-text,
.ms-ComboBox-optionText {
    margin-left: 12px;
}

.ms-Checkbox.is-checked.is-enabled.ms-ComboBox-option,
.ms-Checkbox.is-enabled.ms-ComboBox-option:hover {
    background-color: #eaeaff;
}

.ms-Checkbox.is-checked.is-enabled.ms-ComboBox-option .ms-Checkbox-checkbox {
    background-color: black;
}

.ms-Checkbox.is-checked.is-enabled .ms-Checkbox-checkbox {
    background-color: #827dff;
    border: none;
}

.ms-Checkbox.is-checked.is-enabled span {
    color: black;
}

/* disable checkmark on hover for checkboxes for mobile screens*/
@media screen and (max-width: 670px) {
    .ms-Checkbox:not(.is-checked):hover .ms-Checkbox-checkmark {
        opacity: 0;
    }
}

/*Radio Button*/
label.ms-ChoiceField-field.is-checked::after,
label.ms-ChoiceField-field.is-checked::before {
    border-color: #827dff;
}

label.ms-ChoiceField-field:hover::before,
label.ms-ChoiceField-field:hover::after {
    border: 1px solid #827dff;
}

label.ms-ChoiceField-field:hover::after,
.ms-Toggle.is-checked.is-enabled button {
    background-color: #827dff;
}

.ms-BasePicker-text,
.ms-Dropdown-title,
.ms-TextField-field,
.ms-TextField-fieldGroup {
    border-radius: 4px;
}

.ms-BasePicker-text,
.ms-Dropdown-title,
.ms-Dropdown:active .ms-Dropdown-title .ms-TextField-fieldGroup:hover,
.ms-TextField-fieldGroup {
    border: 1px solid #d1d1d1;
    border-bottom-color: #616161;
}

.ms-BasePicker-text::after,
.ms-Dropdown:focus::after,
.ms-TextField-fieldGroup::after {
    border-color: #827dff;
    border-radius: 4px;
}

/* Bugs 10698321 / 10698400 — keyboard focus indicator below the 3:1 non-text
   minimum (MAS 1.4.11).

   A previous fix used a single dark-blue (#0f548c) ring. That measures 7.87:1 on
   a white page but only 1.37:1 against the dark banner behind the close button and
   1.74:1 against the primary button's own blue fill, so both bugs were reopened.
   No single fixed colour can clear 3:1 on every surface the ring is drawn over.

   Use the dual-ring treatment from the Accessible design toolkit instead: a black
   inner ring plus a light (#1aebff) outer ring. The two rings sit at 14.37:1 to each
   other, so whichever one loses contrast against the underlying surface, the other
   remains clearly visible. Verified: black is 21:1 on white, 4.64:1 on the primary
   button fill and 3.66:1 on the banner; the cyan ring adds 3.93:1 on the banner.

   forced-colors mode drops box-shadow, so high contrast falls back to a single
   Highlight outline — the system palette guarantees that against Canvas, and it
   keeps the user's chosen theme (hard-coding the cyan would require
   forced-color-adjust: none and break Desert).

   Scoped to keyboard focus via Fluent's .ms-Fabric--isFocusVisible so mouse clicks
   are unaffected. */
.ms-Fabric--isFocusVisible .ms-Button:focus::after {
    outline: 2px solid #000 !important;
    outline-offset: 1px !important;
    box-shadow: 0 0 0 5px #1aebff !important;
    border-color: transparent !important;
}

.ms-Fabric--isFocusVisible a.ms-Link:focus {
    outline: 2px solid #000 !important;
    outline-offset: 1px !important;
    box-shadow: 0 0 0 5px #1aebff !important;
}

@media (forced-colors: active) {
    .ms-Fabric--isFocusVisible .ms-Button:focus::after,
    .ms-Fabric--isFocusVisible a.ms-Link:focus {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
    }
}

.ms-TextField.is-disabled .ms-TextField-fieldGroup {
    border-bottom-color: #d1d1d1;
}

/* Dropdown */
.ms-Dropdown.is-disabled span,
.ms-TextField.is-disabled input,
.ms-TextField.is-disabled div {
    border: none;
}

.ms-Dropdown-items .ms-Button[aria-selected="true"],
.ms-Dropdown-items .ms-Button:hover {
    background-color: #eaeaff;
}

/* biome-ignore lint/correctness/noUnknownMediaFeatureName: -ms-high-contrast is a css known media feature */
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .ms-Dropdown-items .ms-Button[aria-selected="true"],
    .ms-Dropdown-items .ms-Button:hover {
        color: #323130;
    }
}

/* BasePicker */
.ms-Suggestions-item .ms-Suggestions-itemButton.is-suggested,
.ms-Suggestions-item:hover {
    background: #eaeaff;
}

/* FilterPanel */
.ms-Nav-compositeLink.is-selected button,
.ms-Nav-compositeLink:hover .ms-Button {
    background-color: #eaeaff;
}

.ms-Nav-compositeLink.is-selected button::after {
    border: none;
}

.ms-Nav-compositeLink:hover .ms-Button {
    color: #424242;
}

.ms-Nav-group div.isSelected button {
    background-color: #eaeaff;
}

/*
    Setting !important here because the style was set in JS in fluentUI
    All other methods (root style, theme provider) are all being overwritten
*/
.ms-ComboBox-optionsContainer > .ms-ComboBox-option:hover,
.ms-ComboBox-optionsContainer > .ms-ComboBox-option:focus {
    background-color: #eaeaff !important;
}

.ms-ComboBox-optionsContainer > .ms-Button--command {
    background-color: white !important;
}

.ms-ComboBox-optionsContainerWrapper .ms-Button-flexContainer {
    min-height: 32px;
}

/*Toogle overrides*/
.ms-Toggle {
    margin-bottom: 0;
}

.ms-Toggle.is-checked .ms-Toggle-background:hover,
.ms-Toggle.is-checked .ms-Toggle-background {
    background: #9692ff;
}

.ms-Callout-container > .ms-Callout.ms-ContextualMenu-Callout {
    border: unset;
}

.ms-ContextualMenu-Callout {
    border-radius: 4px;
    background: #fff;
    border: unset;
}

.ms-ContextualMenu-Callout {
    border-radius: 4px;
}

.ms-ContextualMenu-Callout > .ms-Callout-main {
    border-radius: 4px;
    background: #fff;
    box-shadow:
        0px 0px 2px 0px rgba(0, 0, 0, 0.12),
        0px 8px 16px 0px rgba(0, 0, 0, 0.14);
}

.ms-SearchBox-iconContainer,
.ms-SearchBox:hover .ms-SearchBox-iconContainer {
    color: #424242;
}

.ms-ComboBox-CaretDown-button:hover {
    background-color: #eaeaff;
}

.ms-Callout-container > .ms-Callout {
    border-radius: 4px;
}

/*fluent UI use !important to set this style so I need to use !important to override*/
.ms-CalendarDay-daySelected,
.ms-CalendarDay-hoverStyle {
    background-color: #eaeaff !important;
}

.ms-MessageBar-text {
    margin: 4px 12px 4px 8px;
}

.ms-MessageBar-icon {
    margin: 4px 0 4px 12px;
}

.ms-TeachingBubble-content {
    background: linear-gradient(281deg, #0078d4 0%, #9692ff 94.81%);
}
/* This should be white instead of purple */
.ms-TeachingBubble-primaryButton {
    color: #0078d4;
    background: #fff !important;
}
.ms-TeachingBubble-primaryButton:hover {
    background-color: rgb(243, 242, 241) !important;
    color: #0078d4;
}

.ms-TeachingBubble .ms-Callout-beak {
    background: #5c88ef;
}

/* biome-ignore lint/correctness/noUnknownMediaFeatureName: -ms-high-contrast is a css known media feature */
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .ms-Pivot-link.is-selected::before {
        background-color: highlight;
    }

    button.ms-Button.is-disabled,
    button.ms-Button.is-disabled i,
    button.ms-Button.is-disabled span {
        background: transparent;
        color: #504c4c;
        opacity: 80%;
    }

    /* Bug 10698288 / 10698291 — the checkbox box and label were hardcoded (label
       to black via `.is-checked.is-enabled span`, box to #827DFF), which is
       invisible/low-contrast in HC. Use CSS system colors, and match the
       `.is-checked.is-enabled` specificity so these win over the base rules. */
    .ms-Checkbox-checkbox {
        border-color: CanvasText;
    }

    /* Checked checkboxes hardcode a purple (#827DFF) fill and a black label/checkmark in the
       base overrides above. forced-colors mode keeps those author colors (forced-color-adjust:
       none), so in Aquatic the black label/checkmark sits on the dark Canvas and disappears.
       Re-map the selected state to system colors, matching the base rules' specificity
       (.is-checked.is-enabled) so these win the cascade. */
    .ms-Checkbox.is-checked.is-enabled .ms-Checkbox-checkbox {
        background-color: Highlight;
        border-color: Highlight;
    }

    .ms-Checkbox.is-checked.is-enabled .ms-Checkbox-checkmark {
        color: HighlightText;
    }

    .ms-Checkbox span,
    .ms-Checkbox-text,
    .ms-Checkbox-label,
    .ms-Checkbox.is-checked.is-enabled span,
    .ms-Checkbox.is-checked.is-enabled .ms-Checkbox-text,
    .ms-Checkbox.is-checked.is-enabled .ms-Checkbox-label {
        color: CanvasText;
    }

    /* Radio (ChoiceGroup) ring + selected dot use theme colors that flatten to invisible in
       light high-contrast themes (Aquatic/Desert); pin them to system colors instead. */
    .ms-ChoiceField-field::before {
        border-color: CanvasText;
    }

    .ms-ChoiceField-field.is-checked::after {
        border-color: Highlight;
        background-color: Highlight;
    }

    /* Bug 10698166 — tooltip content/boundary measured < 3:1 in HC. Give the
       tooltip an explicit boundary and system colors so it stays legible. */
    .ms-Tooltip {
        color: CanvasText;
        background-color: Canvas;
        border: 1px solid CanvasText;
    }

    .ms-Tooltip-subText {
        color: CanvasText;
    }
}

/* Side-pane action icons ("Open in new tab", "Close the side pane") are registered inline
   SVGs with hardcoded dark fills (#161514 / #424242 / #605E5C / #323130) that forced-colors
   mode does not remap, leaving them <3:1 and hard to perceive in Aquatic/Desert. Map them to a
   system color so they adapt to the active contrast theme. (MAS 4.3.1)
   NOTE: the heatmap side pane's "Open in new tab" uses the "openLink" icon (not "newTabIcon"),
   so it must be listed explicitly. */
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    [data-icon-name="newTabIcon"] svg path,
    [data-icon-name="openLink"] svg path,
    [data-icon-name="chevronDoubleLeftIcon"] svg path,
    [data-icon-name="chevronDoubleRightIcon"] svg path,
    [data-icon-name="editV2"] svg path,
    [data-icon-name="saveIconV2"] svg path,
    [data-icon-name="downloadV2"] svg path,
    [data-icon-name="trends"] svg path {
        fill: CanvasText;
    }
}

/* antd styles */
html,
body {
    width: 100%;
    height: 100%;
}
input::-ms-clear,
input::-ms-reveal {
    display: none;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* biome-ignore lint/suspicious/noUnknownAtRules: legacy IE/Edge viewport rule kept for compat */
@-ms-viewport {
    width: device-width;
}
body {
    font-variant: tabular-nums;
    font-feature-settings: "tnum";
}
[tabindex="-1"]:focus {
    /* biome-ignore lint/complexity/noImportantStyles: legacy global reset — !important needed to override Fluent */
    outline: none !important;
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
    -webkit-appearance: none;
}
b,
strong {
    font-weight: bolder;
}
a {
    color: #0078d7;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color 0.3s;
    -webkit-text-decoration-skip: objects;
}
a:hover {
    color: #2494e3;
}
a:active {
    color: #005bb0;
}
a:active,
a:hover {
    text-decoration: none;
    outline: 0;
}
a:focus {
    text-decoration: none;
    outline: 0;
}
a:focus-visible[data-is-focusable="true"] {
    outline: auto;
}
img {
    vertical-align: middle;
    border-style: none;
}
svg:not(:root) {
    overflow: hidden;
}
a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
    touch-action: manipulation;
}
table {
    border-collapse: collapse;
}
::selection {
    color: #fff;
    background: #0078d7;
}

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
textarea {
    margin: 0;
    padding: 0;
    border: 0;
    /* biome-ignore lint/suspicious/noShorthandPropertyOverrides: legacy reset — font shorthand intentionally overrides font-size above */
    font: inherit;
    vertical-align: baseline;
    font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
    line-height: inherit;
}

.rowFlex {
    display: flex;
    flex-direction: row;
}

.columnFlex {
    display: flex;
    flex-direction: column;
}

.justifyCenter {
    justify-content: center;
}

.alignCenter {
    align-items: center;
}

.alignBaseline {
    align-items: baseline;
}

.flexAuto {
    flex: auto;
}

.textEllipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.collapsibleContentHeader {
    display: flex;
    cursor: pointer;
    user-select: none;
    align-items: center;
}

/* adding some unnecessary specification to make the selector stronger*/
html body .wholePage .hidden {
    display: none;
}

strong,
.strong {
    font-weight: 600;
}

.info {
    white-space: pre-line;
}

.wholePage {
    width: 100%;
    line-height: 1.4;
    font-size: 14px;
}

/*
 * The root Fluent UI v9 provider rule used to live here. It now lives in
 * `./fluentRootProvider.css`, which is imported by `components/Shared/ClarityFluentProvider.tsx`
 * so that every bundle rendering that provider picks the rule up.
 */

::-webkit-scrollbar {
    width: 10px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: solid 2px #fff;
    background: #bcbab7;
    min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
    background: #99a3a6;
}

.separator {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.skipToContent {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    padding: 12px;
    box-sizing: border-box;
    z-index: 1001;
    transform: translate(-100%);
}

.skipToContent:focus {
    border: 2px black dashed;
    transform: translate(0);
}

.header {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.darkHeader:not(.newHomepage .newHeader) {
    background-color: #0078d4;
    fill: #ffffff;
}

.header a {
    color: unset;
    position: relative;
}

.header i {
    color: #323130;
}

.header a.ms-Button:not(#feedbackButton):not(#blogLink a) {
    margin-left: 16px;
}

.feedbackButton {
    border: unset;
    background: unset;
    padding: 0;
}

.darkHeader *,
.darkHeader i {
    background-color: transparent;
    color: #ffffff;
}

.header button {
    height: 32px;
}

.header.newHeader .ms-Button--commandBar {
    margin-right: 16px;
    margin-left: 16px;
}

.darkHeader.newHeader .ms-Button--commandBar {
    background: transparent;
}

.header a.ms-Button--commandBar .ms-Button-textContainer {
    height: 32px;
    color: #323130;
    display: flex;
    align-items: center;
}

.header #signInIdentity {
    margin-left: 32px;
}

.identity {
    overflow: hidden;
    white-space: nowrap;
}

.identity button:last-child {
    margin-left: 16px;
    overflow: hidden;
}

.identity button span {
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 18px;
}

.identity button svg {
    margin: 0 8px 0;
}

.identity .menuSpacer {
    margin: 0 4px;
}

.profileSpacer {
    margin: 0 8px;
}

.leftSpacer8 {
    margin-left: 8px;
}

.header:not(.newHeader.darkHeader) #headerSignIn {
    color: #006abe;
    border-color: #006abe;
}

.clarityLogo span {
    padding-bottom: 2px;
}

.darkHeader:not(.newHeader) #headerSignIn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.newHeader.darkHeader #headerSignIn {
    border: none;
}

.newHeader.darkHeader #headerSignIn:not(:active):not(:hover) {
    background: white;
}

.newHeader.darkHeader #headerSignIn .ms-Button-label {
    color: #3a6be4;
}

.darkHeader #headerGetStarted:not(:active):not(:hover) {
    background-color: rgb(0, 120, 212);
}

.darkHeaderButton ~ .ms-Button:hover,
.darkHeader .hamburger:hover {
    background-color: #106ebe;
    color: white;
}

.darkHeaderButton ~ .ms-Button:active,
.darkHeader ~ .hamburger:active {
    background-color: #0f64ad;
}

.newHeader .darkHeaderButton ~ .ms-Button i,
.newHeader .darkHeaderButton ~ .ms-Button:hover i {
    background: transparent;
    color: white;
}

.darkHeader .ms-TooltipHost .ms-Button:hover {
    background-color: #106ebe;
}

#headerProjects button:first-child > span,
.clarityLogo > span {
    position: relative;
}

#blogLink {
    margin-right: 24px;
}

#blogLink a:focus::after {
    outline: none;
    text-decoration: underline;
    border-bottom: 1px solid black;
}

#blogLink a:first-child > span {
    position: relative;
}

#headerProjects {
    margin-left: 28px;
}

#headerProjects button:first-child > span:before,
#blogLink a:first-child > span:before,
.clarityLogo > span::before {
    background: black;
    content: "";
    display: none;
    height: 2px;
    position: absolute;
    width: 100%;
    bottom: -3px;
}

.darkHeader #headerProjects button:first-child > span:before,
.clarityLogo.darkHeaderButton > span::before {
    background: #ffffff;
}

.header.darkHeader.selectedSession {
    display: none;
}

#headerProjects button:first-child:hover span:before,
#blogLink a:first-child:hover > span:before,
.clarityLogo:hover span::before {
    display: block;
}

.clarityLogo:hover span::before {
    bottom: -5px;
}

.clarityLogo:focus-visible {
    outline: 1px solid;
}

.msLogo {
    margin-right: 8px;
    width: 92px;
}

.msLogo img {
    display: block;
}

.msLogo:focus-visible {
    outline: 1px solid;
}

.flexSpacer {
    flex: 1 0 auto;
}

a.clarityLogo {
    font-size: 20px;
    color: black;
    margin: 0 8px;
    position: relative;
    line-height: 28px;
}

.clarityLogo.darkHeaderButton {
    color: white;
}

a.clarityLogo.darkHeaderButton:before {
    background-color: white;
}

.hamburger {
    margin-right: 18px;
}

.hamburgerPanel .userInfo {
    width: calc(100% - 12px);
    overflow: hidden;
}

.hamburgerPanel .userInfo > * {
    overflow: hidden;
    text-overflow: ellipsis;
}

.hamburgerPanel .identityButton {
    width: 100%;
    margin-bottom: 9px;
}

.panelLogos {
    display: flex;
    align-items: center;
    flex: 1;
}

.panelLogos + button.ms-Panel-closeButton {
    margin: 0 4px 0;
    width: 24px;
    height: 24px;
    align-self: end;
}

.hamburgerPanel .ms-Nav-groupContent {
    margin-bottom: 0;
}

.hamburgerPanel .feedbackButton {
    line-height: 44px;
    cursor: pointer;
    width: 100%;
    background: transparent;
    text-align: left;
}

.hamburgerPanel .feedbackButton.leftPadding {
    padding-left: 32px;
}

.hamburgerPanel .feedbackButton:hover {
    background: rgb(243, 242, 241);
    color: rgb(0, 120, 212);
}

.confirmEmailModal {
    height: 394px;
    width: 480px;
    overflow: hidden;
    text-align: center;
}

.confirmEmailModal a {
    color: black;
    text-decoration: underline;
}

.confirmEmailModal .title {
    font-size: 32px;
    line-height: 42px;
    text-align: center;
    padding: 40px 32px;
}

.confirmEmailContainer {
    max-height: 213px;
    overflow: hidden;
    display: flex;
    text-align: center;
    flex-direction: column;
}

.confirmEmailContainer .email {
    min-height: 86px;
    padding: 0px 90px 32px 90px;
}

.acceptTOSContainer a,
.content .setupLearnMore {
    margin-left: 4px;
}

.content .setupLearnMore {
    margin-right: 4px;
}

.content .setupLearnMore:focus-visible {
    outline: 2px solid #605e5c;
    outline-offset: 2px;
}

.content .setupUETWarning {
    margin: 16px 0;
}

.summary {
    height: 100%;
}

.confirmEmailContainer .acceptTOSContainer {
    padding: 0 125px;
    display: flex;
}

.confirmEmailButtonContainer {
    padding: 28px 24px;
}

.confirmEmailButtonContainer.confirmEmail {
    padding: 48px 0 16px 0;
}

.confirmEmailContainerInstall .addProjHeaderInstall {
    margin-top: 134px;
}

.appsBeta {
    background-color: #0078d4;
    width: 48px;
    height: 16px;
    border-radius: 12px;
    color: white;
    font-size: 11px;
    line-height: 15px;
}

.mainContentInstall .email {
    margin-bottom: 11px;
}

.mainContentInstall .ms-TextField {
    height: 54px;
}

.acceptTOSContainer.confirmEmail a,
.promoConsentNotice a {
    color: #0078d4;
    text-decoration: underline;
}

.acceptTOSContainer.confirmEmail {
    display: flex;
}

.acceptTOSContainer.confirmEmail.withMargin {
    margin-bottom: 12px;
}

a.clarityLogo:before {
    height: 18px;
    width: 1px;
    background-color: black;
    content: "";
    display: block;
    position: absolute;
    left: -8px;
    top: 5px;
}

.ms-Callout-container > .ms-Callout {
    border: 1px solid lightgray;
    margin-top: 9px;
    z-index: 100;
}

.ms-Callout-container > .suggestionContainer.ms-Callout {
    margin-top: 0px;
}

/* The gap above is meant for dropdowns opening below their target; it pushes side-anchored tooltips off centre. */
.ms-Callout-container > .ms-Tooltip.info {
    margin-top: 0;
}

.ms-ComboBox-optionsContainer > .ms-ComboBox-option:hover,
.ms-ComboBox-optionsContainer > div > .ms-ComboBox-option:hover {
    background: #f3f2f1;
}

.separate:before {
    background-color: lightgray;
    height: 1px;
    content: "";
    display: block;
    position: absolute;
    width: 90%;
    left: 5%;
}

.separate i {
    color: #000000;
    margin-left: 16px;
}

.separate button {
    padding: 8px 0;
    height: fit-content;
}

.userInfo {
    margin: 12px 12px 12px 8px;
    display: grid;
    grid-template-columns: 45px;
    grid-column-gap: 12px;
    grid-template-rows: 25px 20px;
}
.userInfo #name {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#avatar,
.userIcon {
    grid-column: 1;
    grid-row-end: 3;
    grid-row-start: 1;
    border-radius: 45px;
    background: linear-gradient(130deg, #3a4fce 0%, #3384ae 100%);
}

#avatar span {
    line-height: 45px;
    transform: scale(1) translateX(-50%);
    display: inline-block;
    left: 50%;
    position: relative;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

#name {
    font-size: 16px;
    font-weight: 500;
    grid-column: 2;
}

#email {
    color: rgb(102, 102, 102);
    grid-column: 2;
}

.userSettingsContainer {
    margin: 12px 0;
}

.userSettingsContainer h2 {
    margin: 24px 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
}

.basicSettingsContainer,
.preferencesContainer {
    margin-top: 12px;
    border-top: 1px solid #b3adb2;
}

.preferencesContainer {
    margin-top: 24px;
}

.basicSettingsContainer > *,
.preferencesContainer > * {
    margin-bottom: 16px;
    max-width: 600px;
}

.preferencesContainer .ms-Toggle {
    margin-top: 12px;
}

.compareMessageFirst {
    color: #004578;
}

#compareMessageSecond {
    color: #5b0073;
}

#dashboardCompareMenuItems ul > li:last-child > button {
    color: #0078d4;
}

.userSettingsContainer .ms-TextField,
.userSettingsContainer .ms-Dropdown-container {
    width: 300px;
}

.userSettingsContainer .title {
    display: flex;
    justify-content: space-between;
}

.userSettingsContainer .closeIcon {
    border: none;
}

.userSettingsContainer .closeIcon i {
    border: none;
}

.userSettingsContainer .closeIcon span {
    flex-direction: row-reverse;
    font-weight: 400;
}

.projHeader {
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

.projHeader,
.timelineHeader {
    border-bottom: 1px solid #edebe9;
}

.projHeader .title,
.timelineHeader {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    color: #323130;
    font-weight: 600;
}

.timelineHeader {
    padding: 16px;
    height: 45px;
}

.projHeader .tabs {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.ms-Pivot-link.is-disabled:hover {
    font-weight: normal;
}

.projHeader .ms-Pivot-link::before {
    height: 4px;
}

.caseStudyIllustration {
    margin: 24px;
    max-width: 389px;
}

.caseStudyButtons {
    margin: 0 24px 24px 24px;
    justify-content: flex-end;
    display: flex;
}

.confirmJoinCaseStudy {
    margin-right: 8px;
}

.caseStudyIllustration span {
    color: #605e5c;
}

.caseStudyIllustration svg {
    margin-bottom: 16px;
}

.wholePage .setup,
.wholePage .tos {
    padding: 24px;
    overflow: auto;
}

.wholePage.noScroll {
    overflow: hidden;
}

.markdownTutorials img {
    margin-top: 12px;
    margin-bottom: 12px;
    max-width: 100%;
}

.markdownTutorials {
    margin-left: 30px;
}

.markdownTutorials h2 {
    font-size: 20px;
    line-height: 32px;
    margin: 20px 0px;
}

.markdownTutorials a {
    cursor: pointer;
    color: #0078d4;
}

.markdownTutorials a:hover {
    color: #2494e3;
}

.markdownTutorials a:focus-visible {
    outline: 3px solid;
    color: #2494e3;
}

.project,
.projectsDeck {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: calc(100% - 48px);
    background-color: #eff6fc;
}

.tabs button {
    text-transform: capitalize;
}

.tabs button:hover {
    background-color: inherit;
    font-weight: 600;
}

/********************************************/
/***********      Settings     **************/
/********************************************/
.settingsVertical {
    display: flex;
    height: 100%;
}

.navContent {
    border-right: 1px solid rgb(237, 235, 233);
}

.settingsContent {
    width: 100%;
    min-height: 100%;
    overflow: auto;
}

.settingsContent.base {
    padding: 22px 48px;
}

.settingsContent .title,
.userSettingsContainer .title {
    font-weight: 600;
    font-size: 26px;
    line-height: 36px;
}

.overviewContainer {
    margin-top: 16px;
    max-width: 300px;
}

.overviewContainer > * {
    margin-bottom: 32px;
}

.overviewLabel {
    font-weight: 500;
    margin-bottom: 5px;
    user-select: none;
}

.overviewContainer .projectID > * {
    margin-right: 12px;
    vertical-align: middle;
}

.attestationCollapsible #attestationComplete {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 4px;
}

.attestationCollapsible #attestationComplete .collapsibleContentExtra span {
    padding: 0;
}

.attestationCollapsible #attestationComplete .collapsibleContentExtra {
    background: unset;
    height: unset;
    width: unset;
}

.attestationCollapsible {
    margin-top: 8px;
}

.attestationCollapsible.collapsed {
    margin-bottom: 36px;
}

.attestationCollapsible.expanded {
    margin-bottom: 12px;
}

.attestationModalContainer {
    max-width: 560px;
}

.attestationModalContainer .ms-Modal-scrollableContent {
    margin: 16px 24px 24px;
}

.attestationModalTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.attestationModalTitle h1 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.attestationModalBody {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.attestationModalFooter {
    margin-top: 36px;
    gap: 8px;
    display: flex;
    justify-content: end;
}

.attestationCompleteIndicator {
    display: flex;
    align-items: center;
    color: #707070;
}

.attestationCompleteIndicator i {
    height: 16px;
    margin-right: 4px;
}

.attestationTermsLink {
    margin-top: 16px;
}

.attestationTermsLink .ms-MessageBar-innerText span a:last-child {
    padding-left: 0;
}

.setupContainer.appsSetupContainer {
    max-width: 680px;
}

.appsSetupContainer .projectID {
    font-weight: 500;
    display: flex;
    line-height: 20px;
    padding-top: 5px;
}

.appsSetupContainer .projectID .ms-Button {
    width: 32px;
    height: 20px;
    margin-left: 8px;
}

.siteCategory .ms-Label.ms-Dropdown-label {
    color: black;
}

.radioButtonWrapper .radioButton {
    margin-right: 8px;
    width: 20px;
    height: 20px;
}

.actionsContainer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.radioButtonWrapper {
    display: flex;
    margin: 8px 0;
}

.deleteConfirmationText {
    font-weight: 600;
    margin: 15px 0;
}

.surveyTextarea,
.exitSurveyDropdown {
    margin-left: 24px;
}

.exitSurveyDropdown span {
    border-radius: 0;
    margin-bottom: 8px;
}

.actionsContainer .delete > button {
    background: white;
    border: none;
    cursor: pointer;
    color: #0078d4;
    padding-left: 0px;
}

.actionsContainer .disabled > button {
    color: #a79f9d;
    font-weight: 600;
}

.buttonsContainer,
.addUserButtonsContainer {
    margin: 24px;
    display: flex;
    justify-content: flex-end;
}

.buttonsContainer {
    margin-bottom: 16px;
}

.buttonsContainer .confirmDeleteButton.cancel {
    margin-left: 16px;
}

.buttonsContainer .gaModalButton {
    margin-left: 16px;
}

.connectGTMContainer {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gtmIntegartionPanel .ms-Panel-main {
    width: 380px;
}

.gtmIntegartionPanel .ms-Panel-content {
    height: 80%;
}

.gtmPanelFooter .ms-MessageBar {
    background: #eff6fc;
    margin-bottom: 16px;
}

.gtmPanelButtonsContainer {
    padding: 16px;
    border-top: 1px solid #edebe9;
    display: flex;
    justify-content: start;
    align-items: center;
}

.gtmPanelButtonsContainer .ms-Button {
    margin-right: 8px;
}

.gtmDialogStyles .ms-Dialog-main,
.hubspotDialogStyles .ms-Dialog-main {
    min-height: 151px;
    border-radius: 2px;
    min-width: 480px;
}

.loadingContainer {
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 1 1 auto;
}

.overlaySpinner {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(128, 128, 128, 0.4);
}

.overlayHeatmapSpinner {
    height: 100%;
}

.loadingCentered {
    position: absolute;
    left: 50%;
}

.loadingIcon {
    font-size: 24px;
}

.loadingSmall {
    min-width: 12px;
    max-width: 12px;
}

.loadingSmall .ant-spin .anticon {
    font-size: 12px;
}

.deleteProjectContainer,
.connectGAContainer {
    margin: 0px 16px;
}

.connectGAContainer {
    margin-top: 25px;
}

.deleteProjectContainer {
    width: 480px;
}

.gaDatePickerContainer {
    margin: 6px 16px;
}

.gaDatePickerContainer .buttonRow {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
}

.connectGTMContainer .optionsError {
    font-size: 12px;
    color: #a80000;
}

.connectGTMContainer .optionsErrorLink {
    font-size: 12px;
}

.connectGTMContainer .containerLabel {
    font-size: 12px;
    color: #106ebe;
}

.connectGTMContainer .linkingContainer {
    margin: auto;
}

.connectGTMContainer .linkingContainer > div {
    text-align: center;
}

.addingGAMessage {
    font-size: 13px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.gaDocumentLink {
    font-size: 13px;
    margin-top: 6px;
    margin-bottom: 16px;
}

.manualGAInputLabel {
    font-weight: 500;
}

.manualGAInput {
    margin-top: 8px;
    margin-bottom: 20px;
}

.manualGAInputTextWrapper {
    height: 75px;
}

.deleteConfirmationContainer {
    margin: 0px 16px;
}

.panelHeader,
.modalHeader {
    display: flex;
    font-weight: 600;
    font-size: 20px;
    margin: 16px;
    justify-content: space-between;
}

.panelHeader {
    margin: 0 0 21px 0;
}

.panelSubHeader {
    margin-bottom: 21px;
    font-weight: 600;
}

.deleteModalHeader {
    align-items: baseline;
}

.deleteModalHeader .title,
.removeUserModalHeader .title {
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deleteModalHeader .title:focus,
.removeUserModalHeader .title:focus,
.actionsContainer .delete > button:focus,
.elementActionsContainer > button:focus,
.deleteProjectHeader .title:focus,
.noFocusBorder:focus,
.seeAllFAQ:focus {
    outline: none;
}

.deleteModalHeader .title:focus-visible,
.removeUserModalHeader .title:focus-visible,
.actionsContainer .delete > button:focus-visible,
.deleteProjectHeader .title:focus-visible,
.seeAllFAQ:focus-visible {
    outline: 3px solid;
}

.removeUserContainer {
    margin: 16px;
}

.removeUserContainer > span {
    height: 20px;
    display: inline-block;
}

.removeUserButtonsContainer,
.deleteProjectButtonsContainer,
.addElementButtonsContainer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

.removeUserButtonsContainer > *,
.deleteProjectButtonsContainer > *,
.addElementButtonsContainer > * {
    margin-left: 8px;
}

.confirmDeleteButton.confirm .ms-Button-label {
    margin: 0px;
}

.instructions,
.maskingElementsContainer {
    margin-top: 16px;
    border-top: 1px solid #b3adb2;
}

.maskElementsNameContainer {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 400px;
}

.setupContainer {
    max-width: 615px;
    margin-top: 24px;
}

.setupContainer .title > span {
    font-size: 18px;
}

.trackingCodeContent .collapsibleTitle .collapsibleContentHeader,
.setupContainer .collapsibleTitle .collapsibleContentHeader {
    margin-top: 10px;
}

.collapsibleContentHeaderEvents.event {
    border: 1px solid #edebe9;
}

.collapsibleSessionInfoContainer {
    border-bottom: 1px solid #edebe9;
    border-right: 1px solid #edebe9;
    border-left: 1px solid #edebe9;
    background-color: #faf9f8;
}

.collapsibleSessionInfoContainer .sessionInfoLine .eventText {
    padding-left: 20px;
}

.collapsibleSessionInfoContainer .sessionInfoLine .purpleIcon + .eventText {
    padding-left: 5px;
}

.collapsibleContentHeaderEvents .headerText {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 12px;
    cursor: pointer;
}

.collapsibleSessionInfoContainer .sessionInfoLine {
    padding-left: 36px;
}

.eventTimelineContainer.expanded .sessionInfoButton,
.sessionInfoDetails .sessionInfoButton {
    font-size: 12px;
    color: #0078d4;
    height: fit-content;
    margin: 8px 0px;
}

.eventTimelineContainer.expanded {
    margin-bottom: 0px;
}

.sessionInfoContainer .sessionInfoButton {
    color: #0078d4;
    transform: translateX(-8px);
}

.trackingCodeContent .collapsibleTitle > *,
.setupContainer .collapsibleTitle > * {
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
    color: #0078d4;
}

.trackingCodeContent .collapsibleTitle .ms-Icon,
.setupContainer .collapsibleTitle .ms-Icon {
    margin-right: 10px;
}

.setupContainer .instructions .content {
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
}

.setupOptionContainer {
    margin-bottom: 40px;
}

.copilotWaitlistContainer .setupOptionContainer {
    border-top: 1px solid #b3adb2;
}

.setupOptionContainer.thirdParty {
    margin-bottom: 20px;
    display: inline-block;
}

.setupOptionContainer.manual {
    margin-top: 20px;
    margin-bottom: 20px;
}

.setupOptionContainer .expanded {
    font-weight: 600;
}

.setupOptionContainer .collapsibleContentTitle {
    margin-left: 32px;
    font-size: 16px;
    line-height: 22px;
}

.setupOptionContainer .advancedSettingsTitle {
    display: flex;
    align-items: center;
}

.setupOptionContainer .advancedSettingsTitle > span {
    font-weight: 600;
}

.setupOptionContainer .advancedSettingsTitle svg {
    margin-right: 8px;
    width: 20px;
    height: 20px;
}

.collapsibleContentTitle {
    display: flex;
}

.collapsibleContentExtra {
    background: #c7e0f4;
    color: #0078d4;
    height: 24px;
    width: 24px;
    font-weight: 600;
    margin-left: 8px;
    border-radius: 15px;
}

.collapsibleContentExtra span {
    padding-left: 7px;
    position: relative;
}

.setupContainer .setupSection {
    margin-left: 32px;
}

.setupSection .code {
    margin-top: 5px;
    display: inline-block;
}

.setupOptionContent {
    margin-left: 46px;
    margin-top: 12px;
    margin-bottom: 40px;
}

.setupOptionContent .content {
    cursor: pointer;
    color: #0078d4;
    margin-top: 8px;
}

.appsSetupContainer .instructions {
    font-weight: 600;
    padding-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 20px;
    margin-top: 29px;
}

.trackingCodeContent .setupStep,
.appsSetupContainer .setupStep {
    margin-top: 29px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.trackingCodeContent .setupStep {
    margin-left: 32px;
}

.trackingCodeContent .setupStep:last-child {
    margin-bottom: 32px;
}

.trackingCodeContent .setupStep.noTitle .markdownCode,
.trackingCodeContent .setupStep.noTitle .setupStepCopy {
    margin-left: 0;
}

.setupStep .stepNumber {
    display: inline-flex;
    justify-content: center;
    width: 20px;
    border-radius: 10px;
    background-color: #c7e0f4;
    margin-right: 8px;
}

.setupStep .titleNoOrder {
    margin-left: 28px;
}

.sessionDetailsContainer {
    margin: 18px 16px;
}

.sessionDetailsContainer .sessionInfo {
    border-bottom: none;
}

.timeLineTabsWrapper {
    margin: 16px 16px 0;
}

.timeLineTabsWrapper .ms-Pivot {
    display: grid;
    grid-template-columns: 50% 50%;
    border-bottom: 1px solid #edebe9;
}

.timeLineTabsWrapper .ms-Button {
    line-height: 22px;
    font-size: 16px;
    margin-right: 0;
}

.setupStep .markdownCode {
    font-weight: 400;
    margin-left: 28px;
    max-width: 640px;
}

.setupStep .setupStepCopy {
    margin-left: 28px;
    margin-top: 12px;
    font-size: 12px;
    color: #0078d4;
    padding-left: 0;
}

.setupStepCopy {
    height: 28px;
    min-width: 32px;
}

.setupStep .setupStepCopy:hover {
    background-color: transparent;
}

.setupStep .setupStepCopy i {
    margin-left: 0;
}

.trackingCodeContent .appsSetupStepsContainer {
    margin: 32px;
}

.appsNeedHelpModal .setupOptions {
    min-height: unset;
}

.appsNeedHelpModal .needHelpContent .step {
    position: relative;
}

.appsNeedHelp,
.appsPrivacyStatement {
    margin-top: 32px;
    width: 628px;
    display: flex;
    flex-direction: column;
}

.appsPrivacyStatement {
    border-top: 1px solid #b3b0ad;
}

.appsNeedHelp .helpEnvelope,
.appsPrivacyStatement .privacyMonkey {
    position: relative;
    display: flex;
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
    margin: 8px 0;
    height: 21px;
}

.appsNeedHelp .ms-Button {
    margin-top: 16px;
    width: 200px;
}

.appsNeedHelp .helpEnvelope::before,
.appsPrivacyStatement .privacyMonkey::before {
    content: "";
    width: 44px;
    height: 44px;
}

.appsPrivacyStatement .privacyMonkey span,
.appsNeedHelp .helpEnvelope span {
    position: absolute;
    left: 30px;
}

.appsPrivacyStatement .privacyMonkey::before {
    background: url(https://claritystatic.azureedge.net/images/thirdPlatformSprite.png) no-repeat 0 0;
    transform: translate(0, -11px) scale(0.65);
    position: absolute;
    left: -10px;
    background-position-x: -36px;
}

.appsNeedHelp .helpEnvelope::before {
    background: url(https://claritystatic.azureedge.net/images/needHelpSprite.png) no-repeat 0 0;
    transform: translate(-13px, -11px) scale(0.5);
}

.appsSetupNpmLink {
    margin: 12px 28px 0;
}

.tutorial-Panel-header {
    width: 100%;
    padding: 0 0 12px 24px;
}

.tutorial-Panel-header .ms-Panel-header {
    padding: 0;
}

.collapsibleTutorial {
    margin-top: 12px;
}

.collapsibleTutorial .collapsibleContentHeader {
    color: #0078d4;
    padding-left: 0;
}

.collapsibleTutorial .ms-Icon {
    color: #0078d4;
    margin-right: 10px;
}

.recommendedTag {
    width: 112px;
    height: 20px;
    background-color: #004578;
    color: white;
    border-radius: 2px;
    padding: 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    line-height: 16px;
}

code {
    font-family: monospace;
    font-size: 12px;
}

.markdownCode {
    background: #edebe9;
    padding: 2px 8px 6px;
    margin-top: 4px;
    overflow: auto;
}

.code span {
    font-weight: 500;
}

.code .ms-Button {
    margin-top: 16px;
}

.privacyStatement {
    margin: 24px 0 8px;
}

.privacyStatement > h3 {
    font-weight: 600;
}

.privacyStatementButton {
    margin-bottom: 22px;
}

.analytics .action {
    font-size: 14px;
    line-height: 16px;
    color: #484644;
    margin: 0px 8px;
}

.settingsContent .content {
    margin-top: 16px;
}

.settingsContent.smartEvents {
    overflow: hidden;
}

.team thead {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.teamMember,
.maskingElements,
.ipElements {
    margin: 24px;
    align-items: center;
    white-space: nowrap;
}

.teamLoading,
.smartEventsLoading {
    margin-top: 100px;
}

.teamMember {
    width: 100%;
}

.teamMember.mobileView {
    margin: 24px 0px;
}

.teamMember td {
    padding: 5px 24px 5px 0;
}

.teamMember > .ms-layer,
.maskingElements > .ms-layer,
.ipElements > .ms-layer {
    position: absolute;
}

.teamMember > * {
    border-bottom: solid 1px #f3f2f1;
    height: 33px;
    line-height: 32px;
    padding: 5px 24px 5px 0;
    box-sizing: content-box;
}

.teamMember > *:nth-child(5) {
    padding-right: 24px;
}

.teamMember > .status {
    text-align: center;
}

.teamMember .role,
.teamMember .inviteRole {
    text-align: right;
}

.role > button.ms-Button.is-disabled {
    background: white;
}

.userNameContainer > * {
    display: inline-block;
}

.actionContainer {
    text-align: end;
    display: flex;
    gap: 16px;
    justify-content: flex-end;
}

.membershipList {
    border: none;
}

.userNameContainer .name {
    margin-left: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 90%;
    vertical-align: bottom;
}

.userNameContainer {
    max-width: 250px;
}

.userIcon {
    width: 28px;
    height: 28px;
    background: #4f6bed;
    text-align: center;
    position: relative;
    top: 2px;
}

.userIcon > span {
    color: white;
    font-size: 10px;
    font-weight: 600;
    position: relative;
    top: -3px;
}

.addUserContainer {
    margin: 16px 16px;
    width: 288px;
}

.addUserContainer .email {
    min-height: 82px;
}

.addUserContainer .email > span,
.addUserContainer .userRole > span {
    font-weight: 600;
}

.addUserButtonsContainer .confirmAddUser.cancel {
    margin-left: 16px;
}

.deleteModalHeader .title > i,
.deleteProjectHeader .title > i {
    margin-right: 8px;
}

.deleteModalHeader .title,
.deleteProjectHeader .title {
    display: flex;
    align-items: center;
}

.deleteSegmentContainer {
    margin: 24px 16px 20px;
}

.deleteProjectUserContainer {
    margin: 16px;
}

.maskingElementsContainer .title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 5px;
    line-height: 31px;
}

.maskingElementsContainer .content {
    margin: 10px 0 16px;
}

.maskingInfoBubble {
    display: flex;
    padding: 10px 14px;
}

.addElementContainer {
    width: 448px;
    margin: 16px;
    height: 80px;
}

.addElementButtonsContainer {
    margin-top: 24px;
}

.addElementButtonsContainer {
    margin: 24px 16px 16px 16px;
}

.copilotWaitlistContainer {
    margin-top: 24px;
}

.copilotWaitlistContainer,
.maskingContainer,
.ipExclusionContainer {
    max-width: 717px;
}

.copilotWaitlistContainer .checklistArea {
    flex-direction: column;
    max-width: 600px;
    margin: 24px 0;
}

.copilotWaitlistContainer li {
    margin-left: 32px;
}

.copilotChecklistTitle {
    font-size: 18px;
    font-weight: 600;
    line-height: 31px;
    margin-top: 16px;
}

.copilotGAContainer,
.copilotThirdPartyContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
    gap: 4px;
}

.copilotThirdPartyContainer .ms-TextField {
    flex-grow: 1;
    margin-right: 24px;
}

.copilotThirdPartyContainer .ms-Button {
    margin-right: 24px;
    align-self: end;
}

.copilotWaitlistIntegrations {
    display: flex;
    align-items: center;
    gap: 16px;
}

.copilotWaitlistIntegrations .setupOptionTile {
    margin-right: 0;
}

.copilotWaitlistIntegrations .ms-TextField {
    width: 100%;
}

.copilotWaitlistIntegrations .setupButtonWrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.copilotWaitlistIntegrations .setupButtonWrapper .ms-Button--primary {
    margin-top: 24px;
}

.copilotPlatforms::after {
    content: url("https://claritystatic.azureedge.net/images/copilotPlatfromsTile.png");
}

.maskingAllContainer .title {
    font-size: 18px;
    border-top: 1px solid #b3adb2;
    line-height: 31px;
    padding-top: 5px;
    margin: 16px 0;
}

.maskingElements {
    grid-template-columns: 470px auto auto;
}

.maskingElements,
.ipElements {
    margin-left: 0;
    width: 100%;
}

.maskingElements td,
.ipElements td {
    padding: 5px 8px 5px 16px;
}

.maskingElements > *,
.ipElements > * {
    border-bottom: solid 1px #f3f2f1;
    height: 33px;
    line-height: 32px;
    padding: 5px 5px 5px 0;
    box-sizing: content-box;
}

.maskingElements .status,
.maskingElements .maskElementActionContainer {
    display: flex;
    justify-content: flex-end;
}

.maskingElements .maskElementActionContainer {
    min-width: 67px;
}

.unmaskButton {
    width: 112px;
}

.maskButton {
    width: 99px;
}

.maskingElements .status button.ms-Button.is-checked.is-disabled,
.maskingElements .status button.ms-Button.is-checked.is-disabled i.ms-Icon.ms-Button-icon {
    color: black;
}

.maskingElements .ms-Button.ms-Button--default.is-checked {
    background-color: #eff6fc;
}

.maskingTogg {
    width: 66px;
}

.unmaskingTogg {
    width: 82px;
}

.maskChoiceGroup .ms-ChoiceField-innerField {
    padding: 0;
}

.maskChoiceGroup img.ms-Image-image {
    padding: 16px 24px 16px 24px;
}

.maskChoiceGroup .ms-ChoiceField-labelWrapper div:first-child {
    font-weight: 500;
    line-height: 16px;
}

.maskChoiceGroup .ms-ChoiceField-labelWrapper {
    margin: 0 8px 10px;
}

.maskChoiceGroup .ms-ChoiceField-labelWrapper {
    min-height: 32px;
    height: unset;
}

.ms-Button--default.normal span.ms-Button-label {
    font-weight: 400;
}

.listElementsContainer {
    margin-top: 16px;
}

.ipActionSeparator {
    border-left: solid 1px #c8c6c4;
    height: 18px;
    align-items: center;
    margin-right: 8px;
    margin-left: 3px;
}

.ipNameModalContainer,
.ipAddressModalContainer,
.ipCurrentContainer {
    margin: 16px;
}

.ipNameModalContainer,
.ipAddressModalContainer {
    height: 80px;
    width: 308px;
}

.emptyMessage {
    text-align: center;
    max-width: 250px;
    margin-top: 16px;
    left: calc(50vw);
    position: absolute;
}

.ipAddressModalContainer .ms-Label {
    color: black;
}

/********************************************/
/***********      Project Page     **************/
/********************************************/

.projContent,
.tabContentWithFilter {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    position: relative;
}

.projContentEmpty {
    padding-top: 100px;
}

.addSegmentHeader,
.saveEditSegmentHeader {
    color: #323130;
    display: flex;
    padding: 16px 20px 24px 24px;
    position: relative;
}

.addProjHeader {
    color: #323130;
    display: flex;
    justify-content: space-between;
    padding: 16px;
    position: relative;
}

.addProjHeader > span:first-child,
.addSegmentHeader .title,
.saveEditSegmentHeader .title {
    font-size: 20px;
    line-height: 28px;
    width: 100%;
    font-weight: 500;
}

.iconsContainer .ms-Button,
.closeIcon,
.segmentRemoveFilter .ms-Button {
    color: #666;
}

.segmentRemoveFilter .ms-Icon {
    color: #0078d4;
}

.filterArea > .numberInput,
.filterArea > .textInput {
    display: flex;
    padding-top: 12px;
}

.ipNameContainer {
    display: flex;
}

.ipName {
    font-weight: 600;
    max-width: 176px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width: 25%;
}

/********************************************/
/***********      Impressions    **************/
/********************************************/

.tabContentHeader {
    padding: 6px 16px;
    display: flex;
    border-bottom: 1px solid #ddd;
    align-items: center;
    position: relative;
}

.tabContentHeader.publicShare {
    padding-left: 2px;
}

.tabContentHeader .search {
    flex: 0 0 354px;
    margin-right: 40px;
}

.tabContentHeader .ms-Button {
    flex: 0 0 auto;
}

.tabContentHeader.hidden {
    display: none;
}

.filtersActions,
.filtersContent {
    display: flex;
}

.filtersActions {
    min-width: fit-content;
    align-items: center;
}

.filtersContent {
    display: flex;
    overflow: hidden;
}

.insightsDiv {
    margin-left: auto;
    margin-right: 16px;
    flex: 0 0 auto;
    display: flex;
}

/********************************************/
/***********      Segments     **************/
/********************************************/
.segments {
    display: flex;
    margin-left: 10px;
    max-width: fit-content;
}

.segmentsPanel {
    padding: 0 0 12px;
}

.segmentBadges,
.gaSegmentBadges {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: max-content;
}

.gaSegmentBadges {
    width: 100%;
}

.segmentPadding {
    padding-right: 36px;
}

.segmentsHeader {
    display: flex;
    justify-content: space-between;
    height: 44px;
    padding: 6px 12px 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #ddd;
}

.segmentsHeaderLabel {
    padding-top: 6px;
}

.segmentsHeader > span {
    font-weight: 600;
}

.segmentsDropdown {
    max-width: 210px;
}

.segmentRow {
    display: flex;
    align-items: center;
    height: 44px;
    overflow: hidden;
    cursor: pointer;
}

.segmentRow.disabled {
    opacity: 0.3;
}

.gaSegmentTooltip {
    overflow: hidden;
    display: inline;
}

.segmentRow.highlight {
    background-color: #f3f2f1;
    color: #000;
}

.segmentRow .segmentBadge {
    overflow: hidden;
}

.segmentRow.emptyList {
    height: 184px;
    justify-content: center;
}

.importGAContainer {
    display: flex;
    background-color: #eff6fc;
    line-height: 32px;
    justify-content: space-between;
}

.importGAContainer .messageContainer {
    display: flex;
}

.importGAContainer .messageContainer .lightBulbIcon {
    margin: 8px 12px;
    display: flex;
}

.importGAContainer .messageContainer .importGAText {
    font-size: 12px;
}

.importGAContainer .importGAButton {
    height: 24px;
    border-radius: 2px;
    margin: 4px 12px;
}

.noSegmentsTitle {
    display: flex;
    align-items: center;
}

.noSegmentsTitle .content {
    margin-left: 16px;
    width: 460px;
}

.createSegmentSteps {
    margin-top: 8px;
}

.createSegmentSteps span {
    font-weight: 600;
}

.createSegmentSteps ul {
    margin-top: 8px;
}

.createSegmentSteps li {
    line-height: 18px;
    margin: 0px 26px 8px;
}

.badgesSegmentWrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.segmentRow:hover {
    background-color: #f3f2f1;
}

.segments button.ms-Button {
    max-width: 210px;
}

.addSegmentContainer button.ms-Button {
    border: 1px solid #8a8886;
}

.segmentsDropdown .ms-Button-label {
    line-height: 1.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.addSegmentHeader {
    padding: 16px 16px 12px 16px;
}

.segmentRow .title {
    width: 180px;
    min-width: 180px;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.segmentRow .iconsContainer {
    display: flex;
    margin: 10px 12px;
}

.addSegmentsContainer .nameContainer {
    height: 73px;
}

.nameDropdownContainer {
    height: 138px;
}

.nameContainer,
.badgesContainer,
.nameDropdownContainer {
    margin: 8px 16px;
    min-height: 72px;
}

.nameContainer > span,
.badgesContainer > span,
.nameDropdownContainer > span,
.dropdownContainer > span {
    font-weight: 600;
}

.addSegmentsContainer {
    height: auto;
    margin-bottom: 16px;
}

.dropdownContainer {
    margin-bottom: 12px;
}

.nameContainer .ms-TextField,
.dropdownContainer .ms-Dropdown-container,
.nameDropdownContainer .ms-TextField {
    margin-top: 5px;
}

.badgesContainer {
    max-height: 199px;
    height: auto;
}

.footerContainer {
    display: flex;
    align-items: baseline;
    margin-left: 16px;
    margin-right: 16px;
    justify-content: space-between;
}

.saveSegmentButtonContainer button.ms-Button--primary {
    margin-right: 8px;
}

.errorContainer > span {
    font-size: 12px;
    color: #a4262c;
}

.saveSegmentButtonContainer {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.badgesContainer .badges {
    max-height: 173px;
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 2px;
}

.segmentBadge,
.badgesError {
    margin-top: 12px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #edebe9;
    height: 32px;
}

.segmentBadge .segmentText {
    width: 100%;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
}

.badges .badgesError {
    font-size: 12px;
}

.addSegmentButton,
.moreDetailsHeaderButton,
.addTeamMemberButton {
    white-space: nowrap;
}

.saveEditSegmentHeader {
    padding: 16px 20px 12px 24px;
}

.saveEditSegmentContainer .text,
.saveEditSegmentContainer .buttons {
    padding: 0 24px;
}

.saveEditSegmentContainer .buttons {
    padding-top: 29px;
    display: flex;
    justify-content: flex-end;
}

.saveSegmentButton.newSegment,
.saveSegmentButton.editSegment {
    padding: 0px 9px;
    width: 134px;
}

.saveSegmentButton.editSegment {
    margin-left: 8px;
}

.segmentsList span.ms-Button-textContainer {
    overflow: hidden;
}

.segmentsList .ms-Button-flexContainer,
.closeScreenshots .ms-Button-flexContainer {
    flex-direction: row-reverse;
}

.segmentsList .ms-Icon,
.speedButton .ms-Icon {
    font-size: 12px;
}

.deleteSegmentButtonsContainer {
    display: flex;
    justify-content: flex-end;
    margin-top: 26px;
}

.deleteSegmentButtonsContainer .ms-Button.confirmDeleteButton {
    margin-right: 8px;
}

.segmentRow .errorTitle {
    color: #a4262c;
}

.segmentsNav {
    position: relative;
    background: rgba(255, 255, 255, 0.5);
}

.segmentRow .iconsContainer span.ms-Button-flexContainer {
    color: #0078d4;
}

.secondary .deleteSegment span.ms-Button-flexContainer {
    color: #e3008c;
}

/********************************************/
/***********      filter badges     **************/
/********************************************/

.filterBadge,
.tagBadge,
.gaFilterBadge {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 3px 8px;
    flex: 0 0 auto;
    border-radius: 2px;
    line-height: 20px;
    margin-left: 16px;
    height: 32px;
}

.filterBadge,
.heatmapCompare .primary .heatmapMetrics .badge {
    background: #eff6fc;
    color: #004578;
}

.blueFilterBadge {
    background: #004578;
    color: #fff;
}

.gaFilterBadge {
    background: #ffe7da;
    color: #952f15;
}

.gaFilterBadge span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filterBadge.inactive {
    background-color: #f3f2f1;
    color: #b3b0ad;
}

.filterBadgeNavWrapper {
    position: relative;
    overflow: hidden;
}

.heatmapCompare .filterBadges {
    margin-left: -12px;
}

.heatmapCompare .filterBadges.topLevel {
    margin-left: 0;
}

.filterBadges {
    overflow: hidden;
}

.scrollingBadges {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: max-content;
}

.badgesNav {
    font-size: 10px;
    line-height: 32px;
    padding: 0 8px;
    cursor: pointer;
    top: 0;
    user-select: none;
}

.filterNav {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
}

#next {
    right: 0;
    z-index: 10;
}

#prev {
    left: 0;
    z-index: 10;
}

.filterBadge i {
    color: #004578;
    font-size: 14px;
    line-height: 1em;
    cursor: pointer;
    margin-left: 10px;
}

.blueFilterBadge i {
    color: #fff;
}

.filterBadge .badgeClear,
.tagBadge .badgeClear,
.gaFilterBadge .badgeClear {
    padding: 10px 12px;
    margin: -3px -8px -3px 6px;
    font-size: 12px;
}

.filterBadge .filterBadgeIcon {
    padding: 8px 8px 8px 0;
    font-size: 12px;
    margin-left: 0;
}

.gaFilterText {
    padding: 10px 0px 10px;
    font-size: 14px;
}

.gaFilterSpacer {
    border: 1px solid #edebe9;
    margin-top: 20px;
}

.segmentSpacer {
    border: 1px solid #edebe9;
}

.segmentUpsellMessage {
    font-weight: 500;
}

.segmentUpsellImport {
    font-weight: normal;
    text-decoration: underline;
}

.filterBadgeLabel,
.filterBadgeOp,
.segmentBadgeLabel {
    white-space: pre;
}

.filterBadgeLabel {
    flex: 1 0 auto;
}

.filterBadgeVal {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filterBadgeNavWrapper ~ .reset {
    margin-left: 10px;
}

.verticalLine {
    width: 1px;
    height: inherit;
    margin-left: 17px;
    background: #ccc;
}

.tabContent {
    display: flex;
    overflow-y: hidden;
    flex: 1;
}

.tabContentRecordingsVideo.publicShareView {
    top: 0px;
    height: 100%;
}

.scrollingImpressions {
    display: none;
}

.sortDivContainer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sortDivContainer.withChildren {
    justify-content: space-between;
}

.sessionInfoPivotTab {
    height: 100%;
}

.chatPivotTab,
.eventsPivotTab {
    padding: 8px 16px;
    height: 100%;
    overflow: auto;
}

.eventsV2PivotTab {
    height: 100%;
}

.sessionInfoPivotTab .staticMoreDetailsContainer {
    box-shadow: none;
}

.recordingsPivot .ms-Pivot-link,
.sessionInfoPivot .ms-Pivot button {
    width: 50%;
}

.recordingsPivot .ms-Pivot-link .favoritesTabHeader {
    width: 100%;
}

.favoritesTabinfoIcon {
    margin-left: 8px;
}

.sessionCount {
    padding: 0px 12px 12px 12px;
    display: flex;
    justify-content: flex-end;
    z-index: 1;
    color: rgb(50, 49, 48);
}

.impressionList {
    outline: none;
}

.impressionList.hidden {
    display: none;
}

.impressionList.scrollable {
    overflow-y: scroll;
    padding-right: 5px;
    padding-bottom: 12px;
}

.digestRecordings .impressionList.scrollable {
    height: calc(100vh - 180px);
}

.impressions {
    flex: 0 0 auto;
    border-right: 1px solid rgb(237, 235, 233);
    background-color: #faf9f8;
}

.sessionSidebar,
.regionsPanel,
.heatmapSidebar {
    flex: 0 0 auto;
    border-right: 1px solid rgb(237, 235, 233);
    overflow: hidden auto;
    padding: 12px 16px;
    background-color: #faf9f8;
}

.heatmapSidebar.smallMargin {
    padding: 8px 16px 12px 16px;
}

.heatmapSidebarWrapper {
    flex: 0 0 auto;
    border-right: 1px solid rgb(237, 235, 233);
    background-color: #faf9f8;
    width: 394px;
}

.heatmapSidebarWrapper .heatmapSidebar {
    height: 100%;
}

.heatmapSidebarWrapper .withEditArea {
    height: calc(100% - 90px);
}

.heatmapSidebarWrapper .withShadow {
    box-shadow:
        0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
        0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    position: relative;
}

.heatmapSidebar .topNavbar {
    border-bottom: 1px solid #edebe9;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
}

.heatmapSidebarClosed {
    flex: 0 0 auto;
    border-right: 1px solid rgb(237, 235, 233);
    overflow: hidden auto;
    background-color: #faf9f8;
    width: 29px;
}

.heatmapSidebarClosed .ms-Button {
    margin-top: 8px;
}

.sidebarPanelActionWrapper {
    padding: 10px 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    background-color: #faf9f8;
    border-bottom: 1px solid #edebe9;
    box-shadow: none;
}

.sidebarPanelTitleWrapper {
    margin-bottom: 12px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebarPanelTitleWrapper.areaTitle {
    margin-top: 4px;
}

.screenSidebar .screenToggle,
.sidebarPanelTitleWrapper .screenToggle {
    margin-top: 12px;
    margin-bottom: 0;
}

.screenSidebar .screenToggle {
    margin-top: 4px;
}

.heatmapPanelTop {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

.panelTop.favoriteSession {
    margin-bottom: 6px;
    display: flex;
    flex-direction: row;
}

.impressions > div:not(.moreDetailsPanelActions) {
    overflow: hidden;
    padding: 12px;
    background-color: #faf9f8;
    height: 100%;
    width: 100%;
}

.impressions > .sessionsListContainer {
    padding: 12px 12px 0 12px;
}

.moreDetailsPanelActions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.impressions.scrollable > .moreDetailsContainer {
    display: flex;
    flex-direction: column;
    padding: 0;
    height: calc(100% - 38px);
}

.impressions.scrollable > .sessionInfoPivot {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 38px);
}

.sessionInfoPivot div[role="tabpanel"] {
    height: calc(100% - 50px);
}

.sessionInfoPivotTab > .moreDetailsContainer {
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 100%;
}

.sortingContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    text-align: end;
}

.sortingContainer.favoriteSession {
    align-self: flex-end;
    margin-left: auto;
}

.sortingContainer i,
.closeScreenshots i,
.backToScreenshots i,
.panelBack i,
.closePanelButton i {
    color: #0078d4;
}

.sortingContainer .is-disabled i {
    color: rgb(161, 159, 157);
}

.closeScreenshots i {
    padding-top: 1px;
}

.digestSessionBack,
.sortingContainer button:not(.highlightsToggle button),
.closeScreenshots,
.panelBack,
.closePanelButton {
    background: transparent;
    border: none;
    line-height: 20px;
    padding: 0 10px;
}

.closePanelButton {
    margin-top: 12px;
}

.digestSessionBack {
    margin-right: auto;
}

.panelBack {
    margin-top: 6px;
}

.impressions .heatmapSidebar .panelTop {
    margin-bottom: 18px;
}

.panelTitle {
    display: flex;
    justify-content: space-between;
}

.panelTitle,
.eventTimelineContainer .collapsibleContentTitle {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
}

.scrollReachY {
    color: #0078d4;
}

.scrollReachY:hover {
    text-decoration: underline;
    cursor: pointer;
}

.eventTimelineContainer .collapsibleContentTitle {
    margin-bottom: 16px;
}

.eventTimelineContainer .toggleCollapseAll {
    display: flex;
    justify-content: space-between;
}

.toggleCollapseAll label:first-child {
    font-size: 16px;
}

.panelUrl {
    word-break: break-all;
}

.panelInfo {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
}

.panelInfoSub {
    margin-left: 40px;
}

.card {
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #e1dfdd;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;
    color: 323130;
    font-size: 14px;
    line-height: 20px;
}

.card.actionCard {
    padding-bottom: 0px;
}

.cardRow {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.cardRow .heatmapElementMetaData {
    flex: 1;
}

.cardRow:last-child {
    margin-bottom: 0;
}

.cardRow.urlDate {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}

.cardRow.urlDate > *:first-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 12px;
}

.cardRow.urlDate > *:last-child {
    flex: 0;
}

.cardRow .badge,
.heatmapMetrics .badge {
    background-color: #f3f2f1;
    padding: 3px 8px;
    margin-right: 8px;
    flex: 0 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 16px;
}

.cardRow .badge:last-child {
    margin-right: 0;
    overflow: hidden;
}

.viewed .cardRow {
    opacity: 0.6;
}

.card.selected {
    border: #0078d7 2px solid;
}

.card:hover {
    box-shadow:
        0px 0.6px 1.8px rgba(0, 0, 0, 0.1),
        0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
}

.favoriteIcon,
.filterIcon,
.shareIcon,
.sessionInsightsIcon,
.heatmapInsightsIcon {
    size: 16px;
}

.favoriteIcon.ms-Button,
.shareIcon.ms-Button,
.sessionInsightsIcon.ms-Button {
    min-width: unset;
    height: 32px;
}

.heatmapInsightsIcon.ms-Button {
    height: 32px;
    margin-left: 14px;
}

.heatmapInsightsIcon:hover {
    background-color: transparent;
}

.favoriteIcon.disabled *,
.sessionInsightsIcon.disabled * {
    fill: rgb(161, 159, 157);
}

/* Session insights / Favorite / Share / Profile controls use inline SVG icons with hardcoded
   dark fills that forced-colors mode does not remap, leaving them invisible in Aquatic/Desert.
   Map them to a system color so they stay perceivable. (MAS 4.3.1) */
@media (forced-colors: active) {
    .sessionInsightsIcon svg *,
    .favoriteIcon svg *,
    .shareIcon svg *,
    [data-icon-name="contactCardFilledIn"] svg * {
        fill: CanvasText;
    }
}

.ms-Button-menuIcon.filterIcon {
    visibility: hidden;
    display: none;
}

.cardSeparator {
    height: 1px;
    margin-top: 12px;
    background-color: rgb(237, 235, 233);
}

.actionCardDetails {
    display: flex;
    align-items: center;
}

.seeDetails {
    color: #0078d4;
    font-size: 12px;
    line-height: 16px;
    float: right;
}

.seeDetails .ms-Button-label {
    margin: 0px;
}

.seeDetails.ms-Link {
    line-height: 40px;
    border-bottom: 0px;
    text-decoration: none;
    margin-right: 5px;
}

.noFavorites {
    font-size: 14px;
    line-height: 20px;
}

.noFavoritesIllustration {
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.favoritesErrorText {
    margin: 16px 0px;
}

/********************************************/
/***********      Video Player    **************/
/********************************************/

.replayHeader {
    display: flex;
    background: white;
    align-items: center;
}

.replayHeaderButtons {
    display: flex;
    padding: 6px 16px;
}

.replayHeaderMapButtons {
    display: flex;
}

.replayHeader > .shareButtonContainer {
    padding: 6px 16px 6px 0;
}

.replayHeaderBack {
    background-color: #faf9f8;
    border-right: 1px solid rgb(237, 235, 233);
}

.replayHeader button {
    margin-right: 12px;
}

.replayHeader .shareIcon {
    margin-right: -8px;
}

.replay {
    min-width: 350px;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    position: relative;
    justify-content: center;
    flex-direction: column;
}

.expandingArea .titleArea {
    display: flex;
    cursor: pointer;
}

.expandingContent {
    margin-top: 12px;
    margin-left: 36px;
    text-align: left;
}

.titleArea i {
    margin-right: 22px;
}

.notFound {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.errorWrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    min-height: 100%;
}

/* Pins the page to the viewport so the header can't be pushed out of view and the region
   below it becomes the only scroller. */
.wholePage.authErrorLayout {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

.wholePage.authErrorLayout > header {
    flex: 0 0 auto;
}

.authErrorPage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    overflow-y: auto;
}

.errorFooter {
    margin-bottom: 0;
}

.fullScreen {
    height: calc(100% - 48px);
}

.shareError {
    height: 1100px;
}

.fullScreenMessage {
    text-align: center;
    align-self: center;
    font-size: 14px;
    line-height: 20px;
    max-width: 410px;
}

/* `safe` keeps the top of the message reachable once it outgrows the viewport. */
.authErrorPage .fullScreenMessage {
    align-self: safe center;
    padding: 24px 0;
}

/* Keeps "Still stuck? Contact us at <email>" from breaking across lines. */
.authErrorContactLine {
    white-space: nowrap;
}

.errorSeparator {
    margin-bottom: 24px;
    margin-top: 24px;
    height: 1px;
    background-color: #e1dfdd;
    width: 100%;
}

.fullScreenMessage .expandingArea {
    margin-left: 10px;
}

.fullScreenMessage .fullScreenTitle {
    font-size: 20px;
    line-height: 28px;
}

.fullScreenMessage .fullScreenSubTitle {
    font-size: 14px;
    line-height: 20px;
}

.fullScreenMessage > *:not(.errorSeparator):not(.errorFooter) {
    margin-bottom: 16px;
}

.fullScreenMessage > button {
    margin-bottom: 36px;
}

.centeredFullScreenMessage {
    height: 100%;
    align-content: center;
}

.noData {
    display: flex;
    flex: 1;
    justify-content: center;
}

.videoWrapper,
.heatmapVisual,
.noData,
.replay,
.notFound,
.droppedFrame,
.errorWrapper,
.authErrorPage {
    background-color: #f3f2f1;
}

.videoWrapper,
.selectorArea {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}

.video {
    position: relative;
    margin: 0 auto;
    transform-origin: 0 0 0;
}

.appVideo {
    position: relative;
    margin: 0 auto;
    transform-origin: 0 0 0;
}

.videoHeatmap {
    position: absolute;
    overflow-y: scroll;
}

.cover {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    box-sizing: border-box;
}

.video iframe,
.videoHeatmap iframe {
    border: 1px solid #ccc;
    overflow: hidden;
}

.videoControlPanel {
    padding: 18px 16px 12px;
    background-color: white;
}

.videoControls {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
}

.videoControls > *:not(.ms-layer) {
    width: max-content;
}

.newVideoControls .ms-Toggle,
.newVideoControls .ms-Button {
    margin-right: 20px;
}

@media (forced-colors: active) {
    .newVideoControls path {
        fill: highlight;
    }
}

.videoControls i {
    font-size: 16px;
}

.videoSettingsButton.ms-Button {
    color: #323130;
    margin-right: 0;
}

.hideAllMenuIcons .ms-ContextualMenu-icon,
.hideAllMenuIcons .ms-Icon-placeHolder {
    display: none;
}

.hideCheckPlaceholder .ms-Icon-placeHolder {
    display: none;
}

.hideIconPlaceHolder .ms-ContextualMenu-icon {
    display: none;
}

.videoTimestamp {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

.playContainer {
    display: flex;
    align-items: center;
}

.disabledVideoControl path {
    fill: rgb(161, 159, 157);
}

.playerLegendInfoBubble,
.heatmapInfoBubbble {
    margin: 20px 24px;
    max-width: 524px;
}

.playerInfoIcon i {
    color: #323130;
}

.playerLegendInfoTitle {
    font-weight: 400;
    line-height: 28px;
    font-size: 20px;
    display: grid;
}

.keyboardShortcutsTitle,
.playerLegendInfoTitle span,
.heatmapInfoBubbleTitle span {
    font-weight: 600;
    line-height: 20px;
    font-size: 14px;
    margin-top: 12px;
}

.keyboardShortcutsTitle {
    border-top: 1px solid #edebe9;
    padding-top: 20px;
}

.playerLegendItemsList {
    display: grid;
    justify-content: space-between;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 138px);
    margin: 20px 0;
    gap: 12px;
}

.playerKeyboardControls {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    flex-wrap: wrap;
    margin-top: 16px;
    gap: 12px;
}

.playerLegendItem {
    display: flex;
    align-items: center;
    min-width: 24px;
}

.playerLegendItem span:not(:first-child) {
    margin-left: 8px;
}

.playerLegendItemIcon {
    box-shadow:
        0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
        0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    padding: 4px 8px;
}

.heatmapInfoBubbble {
    margin-top: 16px;
    border-top: solid 1px #edebe9;
}

.heatmapInfoBubbleTitle {
    justify-content: left;
}

.heatmapInfoBubbleTitle {
    margin: 16px 0 12px;
}

.heatmapInfoBubbleContent span:first-child {
    margin-right: 5px;
}

.heatmapInfoBubbleContent span:last-child {
    margin-left: 5px;
}

.heatmapInfoBubbleContent {
    display: flex;
    align-content: stretch;
    flex: 1;
    align-items: baseline;
}

.disableIcon {
    color: #c50f1f;
}

#playButton {
    cursor: pointer;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    box-shadow:
        0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132),
        0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
    margin: 0 16px;
}

#playButton:hover {
    box-shadow:
        0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22),
        0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
}

.newVideoControls #playButton {
    margin-right: 20px;
    margin-left: 0;
}

.ms-Button.speedButton {
    border: unset;
    border-bottom: 1px solid #8a8886;
    padding: 0;
    min-width: 60px;
    margin-right: 12px;
}

.newVideoControls .ms-Button.speedButton {
    border-bottom: unset;
}

.speedButton .ms-Button-flexContainer {
    justify-content: space-around;
}

.speedButton .ms-Button-textContainer {
    flex-grow: 0;
}

.ms-BasePicker.basePickerListBelow {
    border-bottom: 1px solid #8a8886;
    border-radius: 0px;
}

.newSkipInactivity,
.skipInactivity {
    cursor: pointer;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    margin-right: 12px;
}

.newSkipInactivity .ms-Checkbox-checkbox {
    border: 1px solid #d2d0ce;
    background-color: transparent;
}

.newSkipInactivity:hover .ms-Checkbox-checkbox {
    border: 1px solid #484644;
    background-color: transparent;
}

.newSkipInactivity .ms-Checkbox-checkmark {
    color: #0078d4;
}

.newSkipInactivity:hover .ms-Checkbox-checkmark {
    opacity: 0;
}

.is-checked.newSkipInactivity:hover .ms-Checkbox-checkmark {
    opacity: 1;
}

.autoPlayControl {
    margin-bottom: 0;
}

.autoPlayControl .ms-Toggle-background {
    padding: 0 1px;
}

.autoPlayControl .ms-Toggle-thumb {
    background-image: url("https://claritystatic.azureedge.net/images/autoPlayIcons.png");
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: -24px;
    width: 18px;
    height: 18px;
}

.autoPlayControl.is-checked .ms-Toggle-thumb {
    background-position-x: 0;
}

.projectsLoading {
    width: 274px;
    height: 144px;
}

.recordingEndedWrapper {
    z-index: 3;
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #11100f;
    justify-content: center;
}

.recordingEndedContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
    row-gap: 2px;
    width: 47%;
    max-width: 716px;
}

.recordingEndedHeader {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    padding-bottom: 16px;
}

.recordingEndedContainer .ms-Button {
    background-color: transparent;
}

.recordingEndedContainer .ms-Button-label {
    color: white;
}

.recordingEndedContainer .dialogCard {
    padding: 16px;
    background: #3b3a39;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.recordingEndedContainer > div:first-of-type {
    border-radius: 8px 8px 0px 0px;
}

.recordingEndedContainer > div:last-of-type {
    border-radius: 0px 0px 8px 8px;
}

.dialogCard.rowContainer {
    flex-direction: row;
    column-gap: 16px;
    margin-bottom: 2px;
}

.thumbsContainer .ms-Button:last-child {
    margin-left: 24px;
}

.rowContainer .ms-Button {
    background: #1b1a19;
    border-radius: 2px;
}

.rowContainer .ms-Button:hover {
    background: #292827;
}

.quickLabelsContainer {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

.quickLabel {
    background: #1b1a19;
    border-radius: 2px;
    padding: 4px 8px;
    display: flex;
}

.quickLabel:hover {
    cursor: pointer;
    background: #292827;
}

.quickLabel .labelName {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.quickLabel i {
    margin-left: 16px;
}

.quickLabel.selectedLabel {
    background: #2899f5;
    color: #1b1a19;
}

.recordingEndFooter {
    width: 72%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    padding-top: 24px;
}

.recordingEndFooter .ms-Button {
    flex-grow: 1;
    border-radius: 2px;
}

.recordingEndFooter .ms-Button--default {
    background: #292827;
}

.recordingEndFooter .ms-Button--primary .ms-Button-label {
    color: #092c47;
}

.recordingEndFooter .primaryControl.ms-Button {
    background: #2899f5;
}

.recordingEndFooter .nextDisabled.ms-Button {
    background: rgb(161, 159, 157);
}

.nextCountDown.ms-Button {
    background: #c7e0f4;
}

.nextCountDown .ms-Button-label {
    position: relative;
    z-index: 2;
}

.nextCountDown.animation .ms-Button-flexContainer::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    height: 100%;
    background-color: #2899f5;
    animation: load 5s linear;
}

@keyframes load {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@media only screen and (min-width: 1085px) {
    .playerInfoIcon.ms-Button {
        margin-right: 0;
    }
}

/********************************************/
/***********      Filters    **************/
/********************************************/

.filtersPanel,
.segmentsPanel,
.gaFilterPanel,
.heatmapURLPanel {
    background-color: white;
    z-index: 14;
    width: 100%;
    left: 0;
    box-shadow:
        0px 1.2px 3.6px rgba(0, 0, 0, 0.1),
        0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
    max-height: calc(100vh - 138px); /* hardcoded: this is the sum of three headers above the panel*/
    font-size: 14px;
    line-height: 20px;
}

.segmentsPanel,
.gaFilterPanel,
.heatmapURLPanel {
    padding: 0 16px 12px;
    position: absolute;
    overflow: auto;
    top: calc(100% + 1px);
}

.gaFilterPanel {
    width: 330px;
    height: fit-content;
}

.heatmapURLPanel {
    width: 50%;
    min-width: fit-content;
    height: fit-content;
    min-height: 330px;
    padding: 4px;
    gap: 24px;
    margin-left: 16px;
}

.filtersPanel {
    padding: 0;
    position: fixed;
    height: 80%;
    top: 93px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.filtersHeader {
    margin-bottom: 0;
    padding: 0 16px;
    display: flex;
    border-bottom: 1px solid #e2e2e2;
    line-height: 20px;
    align-items: center;
}

.filtersHeader > * {
    cursor: pointer;
}

.filtersHeader > *:not(:first-child) {
    margin-left: 12px;
}

.activeFilters {
    display: flex;
    padding: 0 16px 8px 0;
    border-bottom: 1px solid #edebe9;
    flex-wrap: wrap;
}

.activeFilters .filterBadge,
.activeFilters .gaFilterBadge {
    margin-top: 8px;
}

.panelOverlay,
.coachmarkOverlay,
.xRayOverlay {
    opacity: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.panelOverlay {
    background-color: #000;
    z-index: 10; /*filter panel is 14*/
    opacity: 40%;
}

.coachmarkOverlay {
    z-index: 10;
}

.maskButton.is-checked i.ms-Icon.ms-Button-icon,
.unmaskButton.is-checked i.ms-Icon.ms-Button-icon {
    font-weight: 600;
}

#heatmap-rank-toggle,
#heatmap-rank-toggle_sec {
    padding: 0;
}

.hideHeatmapRanksButton {
    height: 32px;
    min-width: 32px;
}

.hideHeatmapRankToggle .ms-ContextualMenu-link {
    height: 100%;
    padding: 0 12px;
}

.hideHeatmapRanksButton .ms-Button-menuIcon {
    display: none;
}

.hideHeatmapRankToggle {
    height: 60px;
}

.hideHeatmapRankToggle .ms-Toggle {
    margin: 0 auto;
}

.hideHeatmapRankToggle .ms-Toggle-stateText {
    margin-right: 0;
}

.hideHeatmapRankToggle .ms-Label {
    font-weight: 400;
}

.hideHeatmapRankToggle .ms-Toggle-innerContainer {
    align-items: center;
}

.universalFilters {
    display: flex;
    height: 100%;
    overflow: hidden;
    flex: 1;
}

.filterPanelTitle {
    line-height: 44px;
    font-size: 14px;
    font-weight: 600;
}

.filterPanelNav {
    width: 206px;
    min-width: 206px;
    border-right: 1px solid #edebe9;
    margin-right: 32px;
    height: 100%;
    overflow: auto;
}

.filterPanelNav.dontShowChevron .ms-Nav-group:last-child i {
    display: none;
}

.filterPanelNav .ms-Nav-chevronButton {
    border-bottom: 0;
    font-size: 14px;
    line-height: 20px;
}

.filterPanelNav i {
    line-height: 20px;
    height: 20px;
}

.filterPanelNav .ms-Nav-groupContent {
    margin-bottom: 0;
}

.filterPanelNav .ms-Nav-compositeLink.is-selected a {
    border-left: none;
}

.filters {
    padding: 0 16px 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-column-gap: 48px;
    grid-row-gap: 36px;
    user-select: none;
    padding-top: 16px;
    padding-right: 16px;
    height: 100%;
    overflow: auto;
    min-width: 600px; /*TODO: support one column in the future*/
}

.filters:last-child {
    margin-bottom: 0;
}

.filter:last-child {
    padding-bottom: 48px;
}

.filters .ms-layer {
    position: absolute;
}

.filterCategoryTitle {
    grid-column: 1 / -1;
    margin-bottom: -20px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    display: flex;
}

.filterCategoryTitle:not(:first-child) {
    margin-top: -20px;
}

.filterCategoryNewBadge {
    margin-left: 10px;
    margin-top: 4px;
    color: #faf9f8;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0px;
    text-align: left;
    background: linear-gradient(80.61deg, #3a6ad8 1.06%, #4094eb 98.23%);
    padding: 2px 10px;
    width: 44px;
    height: 20px;
    border-radius: 24px;
}

.filterHeader,
#dashboard_date .ms-Lable,
#recordings_date .ms-Label,
#heatmaps_date .ms-Label {
    font-weight: normal;
    margin-bottom: 12px;
    padding-bottom: 0;
}

#dashboard_date .ms-Lable,
#recordings_date .ms-Label,
#heatmaps_date .ms-Label {
    color: #0078d7;
}

#dashboard_date,
#recordings_date,
#heatmaps_date {
    padding: 6px 12px 12px 12px;
}

.filterHeader .ms-TooltipHost > * {
    vertical-align: middle;
}

.filterHeader .ms-TooltipHost {
    width: fit-content;
}

.filterHeader .ms-FocusZone {
    display: inline-block;
}

a.filterLabel:focus {
    box-shadow: rgb(96 94 92) 0px 0px 0px 1px inset;
    outline: rgb(96, 94, 92) auto 1px;
}

a.filterLabel {
    color: #323130;
}

.customFilterZeroStateImg {
    margin-top: 18px;
    width: 100%;
}

.options {
    position: relative;
}

.options a:hover {
    color: #2494e3;
}

#dashboard_location .options > div:not(:last-child),
#recordings_location .options > div:not(:last-child),
#heatmaps_location .options > div:not(:last-child) {
    margin-bottom: 8px;
}

.filterLabel {
    color: #323130;
    flex: 1 0 auto;
    cursor: default;
    margin-right: 12px;
    font-weight: 500;
    display: inline-block;
}

.filterBarButtonContainer {
    display: flex;
}

i + .filterLabel {
    margin-left: 8px;
    cursor: pointer;
}

.ms-DatePicker {
    margin-bottom: 12px;
}

.filterOptions {
    display: grid;
    grid-template-columns: 50% 50%;
    border: 1px solid rgb(96, 94, 92);
    border-radius: 2px;
    margin-top: 5px;
    cursor: pointer;
}

.filterOptions > * {
    padding: 2px 12px;
    opacity: 0.7;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.filterOptions > .selected {
    color: white;
    font-weight: 600;
    opacity: 1;
}

button.ms-Button.filtersBarButtons {
    border: none;
    padding: 2px;
    margin-left: 12px;
}

.filtersBarButtons .ms-Icon {
    color: #0078d4;
}

.filtersBarButtons.is-disabled .ms-Icon {
    color: #bcbab7;
}

.filtersBarButtons .ms-Button-label {
    font-weight: 400;
}

.filtersBarButtons button.ms-Button {
    border: 1px solid #8a8886;
}

.clearFiltersButton .ms-Button-textContainer {
    flex-grow: 0;
}

.filters .ms-SearchBox {
    margin-bottom: 12px;
}

.filter.inline {
    display: flex;
    align-items: center;
}

.filter.inline .filterHeader {
    margin-bottom: 0;
}

.filter.inline .filterLabel {
    margin-right: 12px;
    width: 50px;
    text-transform: capitalize;
}

.filter.inline .options {
    flex: 1;
}

.option > * {
    display: inline-block;
}

.option > .ms-TooltipHost {
    margin-left: 10px;
}

.option .ms-Checkbox-label {
    align-items: center;
}

.filter.inline .ms-SearchBox {
    margin-bottom: 0;
}

.filter.range:not(:last-child) {
    margin-bottom: 24px;
}

.range .filterHeader {
    margin-bottom: 8px;
}

.chevron {
    transform: rotate(0);
    transform-origin: 50% 50%;
    transition: transform 0.1s linear 0s;
}

.downChevron {
    transform: rotate(90deg);
}

.upChevron {
    transform: rotate(-180deg);
}

.fromRightToUpChevron {
    transform: rotate(-90deg);
}

.filters .options .ms-Checkbox {
    margin-bottom: 5px;
}

.operators .ms-ChoiceField {
    margin-right: 12px;
}

.inputGroup {
    display: flex;
    margin-top: 8px;
}

.inputGroup span {
    font-size: 14px;
    line-height: 20px;
    color: #777674;
    margin-bottom: 0;
}

.filters .input input {
    border: 1px solid rgb(96, 94, 92);
    padding: 4px;
    box-sizing: border-box;
    margin-right: 16px;
}

.filters .input input,
.filters .ms-ComboBox::after,
.filters .ms-SearchBox,
.filters .ms-Dropdown-title {
    border-width: 0 0 1px 0;
    border-radius: 0;
}

.filters .input input[type="number"] {
    width: 48px;
    display: block;
}

.filters .input input[type="text"] {
    display: block;
}

.filters .input input[type="number"] {
    width: 105px;
}

.filters .input input:focus {
    outline: 1px solid #177ecc;
}

.filters .invalidError {
    color: #ca1616;
    position: absolute;
    margin-bottom: 12px;
    margin-top: 4px;
}

.suggestionContainer {
    min-width: 351px;
    max-width: 1000px;
    margin-left: 8px;
}

.suggestionsLoading {
    padding: 8px;
}

.noUrlSuggestions {
    padding-left: 8px;
    margin: 8px;
}

.suggestionItem {
    padding: 0px 8px;
    font-size: 14px;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 26px;
}

.suggestionItem.topPath {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    line-height: 32px;
}

.suggestionItem:hover,
.suggestionItem:focus {
    background: rgb(237 235 233);
}

.suggestionCount {
    color: #0078d4;
}

.pageTargeting {
    border-top: 1px solid #ddd;
    margin-top: 8px;
    padding: 8px;
}

.pageTargeting span:first-child {
    margin-right: 16px;
    width: 60px;
    display: inline-block;
}

.pageTargeting > * {
    margin-bottom: 8px;
    display: block;
}

.noVariables {
    margin-bottom: 12px;
}

/********************************************/
/**********     share modal    ************/
/********************************************/
.shareModalContainer {
    min-height: 312px;
    max-height: 456px;
    width: 500px;
}

.ms-Dialog-main.shareModalContainer {
    /* biome-ignore lint/complexity/noImportantStyles: override Fluent Dialog default border-radius */
    border-radius: 2px !important;
}

.shareHeader {
    display: flex;
    position: relative;
    padding: 16px;
}

.shareHeader .title {
    font-size: 20px;
    line-height: 28px;
    width: 100%;
    font-weight: 500;
}

.shareHeader .closeIcon {
    color: #666;
}

.shareSettingsLabel {
    color: #323130;
    flex: 1 0 auto;
    cursor: default;
    margin-right: 12px;
    font-weight: 500;
    display: inline-block;
}

.shareSettingsGroup {
    display: inline-block;
}

.shareSettingsGroup .ms-ChoiceField {
    display: inline-block;
    padding-right: 8px;
}

.shareModalPivot {
    margin: 0px 10px 10px;
}

.shareModalPivotTab {
    width: 100%;
    padding: 10px 8px 8px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.shareModalPivotTab > :not(:last-child) {
    margin-bottom: 8px;
}

.shareModalCloseButtonGroup {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-left: auto;
    height: 48px;
    right: 0px;
    bottom: 16px;
}

.shareModalCloseButton {
    align-self: flex-end;
}

.shareModalSendEmailButton {
    margin-right: 16px;
}

.shareModalLinkDescription,
.shareModalToggleGroup {
    padding: 6px 0px;
}

.shareModalLinkContainer {
    display: flex;
    padding: 6px 0px;
}

.shareModalLinkContainer > div {
    display: inline-block;
    margin-right: 8px;
    flex-grow: 1;
}

.shareModalLinkContainer input:disabled {
    color: transparent;
    text-shadow: 0 0 2px rgb(161, 159, 157);
}

.shareModalEmailPivotTab {
    min-height: 200px;
}

.shareModalEmailRecipientTextField {
    margin: 8px 0px 0px;
    position: relative;
}

.shareModalEmailRecipientTextField::after {
    content: "*";
    color: rgb(164, 38, 44);
    position: absolute;
    top: -5px;
    right: -10px;
}

.shareRecipientCallout {
    width: 512px;
    max-width: calc(100vw - 20%);
}

.shareRecipientCallout .ms-Persona {
    width: 100%;
}

.shareRecipientCallout .ms-Persona-primaryText > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shareRecipientCallout .ms-Suggestions > div[role="status"] {
    display: none;
}

.shareModalEmailMessage {
    height: 72px;
    margin: 8px 0px;
    flex-grow: 1;
}

.shareModalEmailMessage .ms-TextField-fieldGroup {
    height: 72px;
}

.shareModalExpirationDropdown {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    /* To counteract the 1px border on the dropdown: */
    position: relative;
    top: -2px;
}

/********************************************/
/**********     sign in  page    ************/
/********************************************/

.signInModal {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000;
}

.signInModal .overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
}

.signIn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: white;
    padding: 28px 0 38px;
    box-shadow:
        0px 2.4px 7.2px rgba(0, 0, 0, 0.18),
        0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
    border-radius: 2px;
}

button.ms-Button--icon.closeSignIn {
    display: none;
}

.closeSignInUpsell {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    color: black;
}

.signInTitle {
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 8px;
}

.signInSubtitle {
    font-size: 13px;
    line-height: 17px;
    margin-bottom: 32px;
}

.signInButton {
    width: 240px;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 30px;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 122px 16px;
}

.signInButton.disabled {
    cursor: default;
    opacity: 0.4;
}

.signInButton.disabled .providerLogo,
.signInButton .providerLogo {
    margin-right: 16px;
}

.signInButton.disabled svg,
.signInButton svg {
    display: block;
}

#msSignIn {
    background-color: #235a9f;
    color: white;
}

#fbSignIn {
    background-color: #1671e5;
    color: white;
}

#googleSignIn {
    border: 1px solid #8a8886;
}

/********************************************/
/***********     recording    **************/
/********************************************/

.fullscreenRecording {
    display: flex;
    height: calc(100% - 48px);
    width: 100%;
    position: absolute;
}

.embeddedFullscreen {
    display: flex;
    height: 100%;
    width: 100%;
    position: absolute;
    background: #eff6fc;
}

.slider {
    position: relative;
    display: flex;
    margin-bottom: 19px;
}

.sliderSlice {
    box-sizing: border-box;
    border-color: white;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    height: 8px;
    cursor: pointer;
}

.sliderSlice.isDead {
    border-radius: 6px;
}

.scrubber {
    position: absolute;
    top: -4px;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    cursor: pointer;
    background-color: white;
    border: 2px solid #0078d7;
    z-index: 3;
}

.progress {
    height: 7px;
    position: absolute;
    border-color: white;
    border-style: solid;
    border-width: 0 0 1px 0;
}

.scrubberEvent {
    position: absolute;
}

.scrubberEventIndicator {
    height: 12px;
    width: 2px;
    border-radius: 1px;
    margin-top: -3px;
}

.comment {
    position: absolute;
    bottom: -2px;
}

.react-tabs {
    height: 50%;
}

.inactivityNotice {
    position: absolute;
    background: white;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    padding: 32px;
    box-sizing: border-box;
    border: 2px solid rgb(23, 126, 204);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.05);
    text-align: center;
    font-size: 16px;
}

.inactivityNoticeMobile {
    top: 20%;
    padding: 12px 16px;
    z-index: 100;
}

.droppedFrame {
    width: 100%;
    height: 100%;
    background: #f3f2f1;
    position: absolute;
}

.flexCenter {
    display: flex;
    align-items: center;
}

.noHeatmapModal {
    position: absolute;
    background: white;
    left: 50%;
    transform: translateX(-50%);
    top: 100px;
    width: 560px;
    padding: 24px;
    border-radius: 2px;
    box-shadow:
        0px 4.8px 14.4px rgba(0, 0, 0, 0.18),
        0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    font-size: 16px;
}

.noHeatmapModalTitle {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: #323130;
}

.noHeatmapModalMessage {
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filterBadgeValue {
    padding-left: 4px;
}

.filterBadgeSeparator {
    padding: 0 4px;
}

.noHeatmapModalIllustration {
    text-align: center;
    margin-bottom: 32px;
}

.clearFilterModalButton {
    float: right;
}

.deadSessionSnapshot {
    opacity: 0.5;
}

/********************************************/
/***********      graphs       **************/
/********************************************/
.chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    background: #fff;
    margin: 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
}

.gradientChartBackround {
    background: rgb(60, 83, 197);
    /* biome-ignore lint/suspicious/noDuplicateProperties: fallback for browsers without gradient support */
    background: linear-gradient(
        90deg,
        rgba(60, 83, 197, 1) 0%,
        rgba(58, 94, 191, 1) 25%,
        rgba(56, 104, 186, 1) 50%,
        rgba(56, 115, 181, 1) 75%,
        rgba(55, 129, 175, 1) 100%
    );
}

.graphsContainer {
    display: flex;
    flex-wrap: wrap;
}

.graphComponent {
    background: #f8f8f8;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

.chartContainer {
    overflow: hidden;
    max-width: 100%;
}

.chartTitle {
    width: 100%;
    padding-left: 20px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #676767;
}

.lightChartTitle {
    color: #f8f8f8;
}

.popularPages {
    width: 100%;
    overflow: scroll;
    height: 300px;
    overflow-x: hidden;
    padding-top: 16px;
    padding-bottom: 20px;
}

.popularPages table {
    border-collapse: collapse;
    width: 100%;
}

.popularPages td,
.popularPages th {
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    border-right: 0px;
    border-left: 0px;
}

.popularPages th {
    color: #54555a;
    background: #f4f7fe;
    font-weight: 600;
    font-size: 14px;
}

.popularPages tr > th:first-child {
    padding-left: 24px;
}

.popularPages tr > td:first-child {
    padding-left: 24px;
}

/********************************************/
/***********   Regex tester    **************/
/********************************************/
.regexTesterModal .ms-Dialog-main {
    border-radius: 2px;
}

.regexTesterHeader {
    padding: 16px 24px;
    display: flex;
    width: 560px;
    justify-content: space-between;
}

.regexTesterModal.mobile .regexTesterHeader {
    width: unset;
}

.regexTesterHeader .title {
    font-size: 20px;
    font-weight: 600;
    padding-right: 8px;
    padding-top: 4px;
}

.regexTesterInput {
    padding: 4px 24px 24px;
}

.regexTesterInput .ms-Label {
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
}

.regexTesterInput > *:not(:last-child) {
    margin-bottom: 16px;
}

.regexTesterInput textarea {
    width: 100%;
    font-size: 14px;
    height: 36px;
    line-height: 20px;
    border: 1px solid #323130;
    box-sizing: border-box;
    padding: 8px 12px;
    resize: none;
}

.regexTestStringValidation .noMatchIcon {
    color: #990000;
}

.regexTestStringValidation .matched {
    color: #107c10;
}

.regexTestStringValidation {
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    display: flex;
    height: 32px;
    align-items: center;
}

.regexTestStringValidation .stringValidationLabel {
    margin-left: 4px;
}

.regexTesterInput .reedmoreLink {
    font-size: 13px;
    line-height: 20px;
    text-decoration: none;
}

.regexTesterActions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.regexTesterActions > *:first-child {
    margin-right: 12px;
}

.regexTesterActions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.regexTesterActions > *:first-child {
    margin-right: 12px;
}

/********************************************/
/***********      feedback     **************/
/********************************************/

.feedbackModal .ms-Dialog-main {
    border-radius: 2px;
}

.feedbackHeader {
    padding: 16px;
    display: flex;
    width: 380px;
    justify-content: space-between;
}

.feedbackModal.mobile .feedbackHeader {
    width: unset;
}

.feedbackHeader .title {
    font-size: 20px;
    font-weight: 600;
    padding-right: 8px;
    padding-top: 4px;
}

.feedbackInput {
    padding: 4px 16px 16px;
}

.feedbackInput > *:not(:last-child),
.feedbackInput .feedbackCheckbox .ms-Checkbox {
    margin-bottom: 12px;
}

.feedbackInput textarea {
    width: 100%;
    font-size: 13px;
    height: 120px;
    line-height: 20px;
    border: 1px solid #323130;
    box-sizing: border-box;
    padding: 8px 12px;
    resize: none;
}

.feedbackInput .privacyLink {
    font-size: 13px;
    line-height: 20px;
    text-decoration: none;
}

.feedbackInput .emailText {
    min-height: 53px;
}

.feedbackActions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.feedbackActions > *:first-child {
    margin-right: 12px;
}

.feedbackOption {
    background-color: #f5f5f5;
    padding: 4px 16px;
    font-size: 13px;
    line-height: 20px;
    color: #666;
    margin-bottom: 16px;
    cursor: pointer;
    display: table;
    border: unset;
}

.feedbackOption:hover,
.feedbackOption:focus,
.suggestionItemContainer:focus {
    background-color: #ececec;
    color: #111;
    border-color: #ccc;
}

.feedbackOption:last-child {
    margin-bottom: 0;
}

/********************************************/
/***********      timeline     **************/
/********************************************/

.eventTimelineContainer .collapsibleContentHeader,
.impressionTimeline .collapsibleContentHeader {
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
}

.impressionTimeline .collapsibleContentHeader {
    margin: 8px 10px;
}

.impressionTimeline {
    background-color: #fff;
    margin-bottom: 4px;
}

.collapsibleContentHeader.event,
.eventTimelineContainer.expanded .collapsibleContentHeader {
    border: none;
}

.collapsibleContentHeader.event .sessionInfoLine {
    max-width: 280px;
}

.eventTimelineContainer:not(:first-child) {
    margin: 16px 0;
}

.eventTimelineContainer i {
    color: #0078d4;
    font-size: 16px;
}

.sessionInfo,
.taggingContainer {
    border-bottom: 1px solid #ddd;
}

.sessionInfo .loadingContainer {
    margin-bottom: 10px;
}

.sessionInfoContainer {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    margin-bottom: 16px;
}

.sessionInfoContainer i {
    font-size: 16px;
    line-height: 14px;
    margin-right: 8px;
}

.timelineImpressionIconContainer {
    display: flex;
}

.timelineImpressionIconContainer i {
    color: #0078d4;
}

.timelineImpressionTime {
    font-weight: 600;
    margin-right: 12px;
}

.sessionInfoLine,
.sessionInfoLineDetails {
    display: flex;
    padding: 6px 0;
    align-items: center;
}

.sessionInfoContainer .sessionInfoLine {
    height: 32px;
}

.sessionInfoLine strong,
.sessionInfoLineDetails strong {
    margin-right: 8px;
}

.sessionInfoLine span,
.sessionInfoLineDetails span,
.sessionInfoLine a,
.sessionInfoLineDetails a {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sessionInfoLine.oneLine strong:not(:first-child),
.sessionInfoLineDetails.oneLine strong:not(:first-child) {
    margin-left: 16px;
}

.sessionInfoLineDetails.oneLine.details {
    margin-left: 12px;
    white-space: nowrap;
}

.sessionInfoLineDetails.oneLine.details.customTagsDetails {
    display: block;
}

.customTagsDetailsContainer {
    display: flex;
    flex-wrap: wrap;
}

.sessionInfoLine.dashed {
    flex-wrap: wrap;
    height: fit-content;
}

.sessionInfoLine.dashed span {
    margin-right: 4px;
}

.sessionTimeline {
    overflow: auto;
    padding: 16px 4px 4px 12px;
}

.sessionTimeline .sessionInfoLine {
    padding: 8px 10px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collapsibleSessionInfoContainer .sessionInfoLine {
    padding-bottom: 0;
    padding-top: 0;
}

.staticMoreDetailsContainer {
    box-shadow:
        0 3.2px 7.2px 0 rgb(0 0 0 / 13%),
        0 0.6px 1.8px 0 rgb(0 0 0 / 11%);
    z-index: 1;
    padding: 12px 16px 0;
}

.sessionInfoLine .lineDot {
    display: flex;
    align-content: center;
    padding-left: 12px;
    position: relative;
}

.sessionInfoLine .line {
    border-left: 2px solid #edebe9;
    height: 36px;
}

.sessionInfoLine .dot {
    z-index: 1;
    background-color: #323130;
    height: 8px;
    width: 8px;
    left: 9px;
    top: 35%;
    position: absolute;
    border-radius: 50%;
}

.sessionInfoLine .dot.purple {
    background-color: #a864cd;
}

.purpleIcon {
    color: #a864cd;
    font-size: 16px;
}

.sessionInfoLine .time {
    margin-left: 12px;
}

.sessionTimeline > .impressionTimeline:last-child {
    margin-bottom: 24px;
}

.impressionTimeline {
    width: 100%;
    background-color: #fff;
    margin-bottom: 4;
}

.impressionTimeline:nth-child(2) {
    border-top-width: 1px;
}

.impressionTimeline:nth-child(2n) {
    background: white;
}

.activeImpression {
    outline: 2px solid #0078d7;
}

.activeImpression:nth-child(2) {
    border-top: 1px solid rgba(221, 221, 221, 0.55);
}

.filterableInfoTooltip {
    display: inline-grid;
}

.truncatedLine {
    text-overflow: ellipsis;
    overflow: hidden;
}

.eventSelected {
    background-color: #0078d7;
    color: white;
    font-weight: 600;
}

.eventText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.eventMetadata {
    flex: 1;
    margin-left: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noteTitle {
    white-space: unset;
}

.taggingContainer {
    margin-top: 16px;
    margin-bottom: 4px;
}

.timelineTitle {
    font-size: 16px;
    margin-bottom: 8px;
}

.playbackContainer {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.tagHeader {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    margin: 5px;
}

.basePickerListBelow.error {
    border-bottom: 1px solid #a80000;
}

.inputTextError {
    color: #a80000;
    font-size: 12px;
}

.promoEmailToggles {
    margin-left: 16px;
}

.promoEmailToggles .digestProjectsList {
    max-height: 172px;
    overflow-y: scroll;
    margin: 8px 0;
}

.promoEmailToggles .digestProjectsList.overflowBorder {
    border: 1px solid #cccccc;
    padding: 0 16px;
}

.basePickerListBelow .ms-BasePicker-text {
    border: none;
}

.basePickerListBelow .ms-BasePicker-input {
    background-color: #faf9f8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.taggingContainer .ms-SelectionZone {
    display: none;
}

.tagElement {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tagElement i {
    cursor: default;
}

.tagBadge {
    color: #004578;
    background: #eff6fc;
    max-width: calc(100% - 2 * 4px);
    display: flex;
    justify-content: space-between;
    margin: 4px;
    width: fit-content;
}

.taggingContainer .ms-FocusZone {
    flex-wrap: wrap;
    display: flex;
}

.suggestedTagItem {
    line-height: 30px;
    margin: 6px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 334px;
    max-width: 334px;
    text-align: left;
}

.suggestedTagItem span {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tagBadge span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.taggingContainer .basePickerListBelowDisabled .ms-BasePicker-text,
.taggingContainer .basePickerListBelowDisabled .ms-BasePicker-text:after {
    border-color: transparent;
}

.basePickerListBelowDisabled {
    background-color: #f3f2f1;
}

.basePickerListBelowDisabled input,
.selectedTagsContainer.empty,
.selectedTagsContainer.emptyerror {
    border: none;
}

.selectedTagsContainer {
    margin-top: 24px;
    border: solid 1px #605e5c;
    flex-wrap: wrap;
    background-color: #ffffff;
}

.selectedTagsContainer.error {
    margin-top: 8px;
}

.suggestedTagItem {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.createNewTag {
    align-items: baseline;
    color: #106ebe;
}

.createNewTagIcon {
    margin-right: 8px;
    color: #106ebe;
}

.newTaggingContainer > div {
    margin-top: 8px;
}

.newTaggingContainer .tagBadge {
    width: unset;
    border: 1px solid rgba(96, 94, 92, 1);
    margin: 12px 0;
    max-width: 100%;
}

/********************************************/
/***********      footer       **************/
/********************************************/

.footer {
    background-color: #f2f2f2;
    padding: 0 54px;
    color: #767676;
    font-size: 11px;
    line-height: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer > * {
    color: #6a6a6a;
}

.footerLink {
    cursor: pointer;
    color: #6a6a6a;
    text-decoration: none;
}

.footerLink:hover {
    text-decoration: none;
    color: #2494e3;
}

.footerLink:focus-visible {
    outline: 3px solid;
}

.footerNavContainer {
    max-width: 1540px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 77px 0;
}

.footerNavLinks {
    font-size: 16px;
    line-height: 21px;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.footerNavList {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.footerNavList li,
.footerSocials li,
.rightFooterLinks li {
    margin: 0;
    padding: 0;
}

.footerNavTitle {
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* The social-media title was a <div> in master; as an <h2> it leaks the UA
   top margin and grows the footer. Zero it so rendering is unchanged. */
#socialMedia .footerNavTitle {
    margin-top: 0;
}

.footerLinksContainer {
    display: flex;
    column-gap: 16px;
    padding: 26px 0;
    width: 100%;
    justify-content: flex-end;
}

.rightFooterLinks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    column-gap: 16px;
}

.footerLinksContainer.compactFooter {
    padding: 10px 24px;
    justify-content: space-between;
    backdrop-filter: blur(6px);
}

.footerLinksContainer.compactFooter .rightFooterLinks {
    column-gap: 16px;
    display: flex;
}

.fontWeight600 {
    font-weight: 600;
}

.size14Text {
    font-size: 14px;
    line-height: 20px;
}

.size12Text {
    font-size: 12px;
    line-height: 16px;
}

.newFooterLinksContainer {
    justify-content: center;
}

.newFooterLinksContainer .userLanguage {
    display: flex;
    column-gap: 8px;
}

.footerSocials {
    display: flex;
    column-gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footerSocials li {
    display: flex;
}

.footerSocials .ms-Link {
    height: 32px;
    padding: 0px;
    box-sizing: content-box;
}

/* Bug 10698274 / 10698326 — the footer social icons (Twitter, Facebook,
   LinkedIn, Email) use fixed SVG fills and disappear in both Desert (light HC)
   and Aquatic (dark HC). Force system colors so they adapt to every theme. */
/* biome-ignore lint/correctness/noUnknownMediaFeatureName: -ms-high-contrast is a css known media feature */
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .footerSocials .ms-Link,
    .footerSocials .ms-Link svg,
    .footerSocials .ms-Link path {
        color: CanvasText;
        fill: CanvasText;
    }
}

@media only screen and (max-width: 900px) {
    .footerNavContainer {
        flex-direction: column-reverse;
        padding: 26px 0;
        row-gap: 24px;
    }

    .footerNavContainer #socialMedia {
        order: 1;
    }

    .footerNavContainer #resources {
        order: -1;
    }

    .footerLinksContainer {
        padding: 12px 24px;
        justify-content: center;
    }

    .newFooterLinksContainer {
        padding: 26px 0;
    }
}

@media only screen and (max-width: 600px) {
    .newFooterLinksContainer {
        flex-direction: column;
        row-gap: 16px;
        width: 100%;
    }

    .newFooterLinksContainer .rightFooterLinks {
        flex-direction: column;
        row-gap: 16px;
    }

    .footerLinksContainer.compactFooter .rightFooterLinks {
        flex-direction: column;
        gap: 16px;
    }
}

@media only screen and (max-width: 400px) {
    #headerProjects {
        position: absolute;
        right: 2px;
    }
}
/* end of mobile header hack */

@media only screen and (max-width: 500px) {
    .signIn {
        border: none;
        box-shadow: unset;
        top: 48px;
        left: 0;
        transform: unset;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        padding-bottom: 55px;
        border-radius: 0;
        border-top: 1px solid #edebe9;
    }

    .signInButton {
        margin-left: auto;
        margin-right: auto;
    }

    .signInModal .overlay,
    .signInModal ~ .wholePage .identity,
    .signInModal ~ .wholePage .feedbackIcon {
        display: none;
    }

    button.ms-Button--icon.closeSignIn {
        display: block;
        position: absolute;
        right: 8px;
        top: 0;
        color: black;
    }
}

.regionNaming {
    background: white;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    box-shadow:
        0 1px 24px rgba(0, 0, 0, 0.5),
        0 0 0 0.5px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    background-color: white;
    box-sizing: border-box;
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;
}

.regionNaming > *:not(button) {
    margin-bottom: 12px;
}

.regionNaming button {
    margin-right: 12px;
}

.regionsOverlay {
    display: flex;
    position: absolute;
    background: white;
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: 3;
}

.selectorArea {
    justify-content: center;
    overflow: hidden auto;
    flex: 1 1 auto;
    align-items: unset;
}

.selectorArea > div {
    width: 100%;
}

.selectorArea iframe {
    border: 1px solid #cccccc;
}

.regionsPanel > button {
    width: 100%;
    margin-bottom: 12px;
}

.cardTitle {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    width: 90%;
    display: flex;
}

.cardTitle,
.heatmapUrl,
.sessionImpression span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cardInfo {
    margin-top: 12px;
    font-size: 13px;
    line-height: 18px;
}

.card3dots {
    position: absolute;
    right: 7px;
    top: 7px;
}

.card3dots i {
    color: #000;
    font-size: 16px;
}

.panelDescription {
    margin-bottom: 12px;
}

.regionsPanel .cardInfo {
    word-break: break-word;
}

.regionNamingTitle {
    font-size: 16px;
    line-height: 1.4em;
    cursor: default;
}

.regionNaming .errorMessage {
    color: red;
}

.regionsPanel .loading {
    margin-bottom: 12px;
}

.spanFilter {
    grid-column: span 2;
}

.googleOptimizeFilterArea {
    margin-top: 20px;
}

.spanFilter .optionSection {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.spanFilter .options > .optionSection {
    margin-bottom: 12px;
}

.spanFilter .optionSection > * {
    flex: 1;
    margin-right: 12px;
}

.spanFilter .selectedOptions div:first-child {
    margin-right: 60px;
}

.googleOptimizeLearnMoreModal {
    width: 420px;
    display: flex;
    text-align: center;
    box-shadow:
        0px 25.600000381469727px 57.599998474121094px 0px #00000038,
        0px 4.800000190734863px 14.399999618530273px 0px #0000002e;
    border-radius: 2px;
}

.googleOptimizeLearnMoreModal > div {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.googleOptimizeLearnMoreModalHeader {
    padding: 16px 24px 16px 22px;
    display: flex;
    justify-content: start;
}

.googleOptimizeLearnMoreModalHeader h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #323130;
    text-align: left;
    min-width: 350px;
}

.googleOptimizeLearnMoreModalBody a {
    color: rgb(0, 120, 212);
    margin: 0 3px;
    text-decoration: underline;
}

.googleOptimizeLearnMoreModalHeader .closeIcon {
    color: #666;
    margin-left: 3px;
}

.googleOptimizeLearnMoreModalBody {
    padding: 8px 24px;
}

.hasExperiments .googleOptimizeLearnMoreModalBody {
    padding-top: 4px;
}

.googleOptimizeLearnMoreModalBody h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    letter-spacing: 0px;
    text-align: left;
    color: #333333;
    margin-top: 18px;
}

.googleOptimizeLearnMoreModalBody h4:first-of-type {
    margin-top: 3px;
}

.googleOptimizeLearnMoreModalBody h5 {
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0px;
    text-align: left;
    margin-top: 8px;
    color: #605e5c;
}

.googleOptimizeLearnMoreModalActionButtons {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
}

.googleOptimizeLearnMoreModalActionButtons a {
    background: #0078d4;
    padding: 6px 20px;
    height: 32px;
    border-radius: 2px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    margin: 0 4px;
    margin-top: 7px;
}

.googleOptimizeLearnMoreModalActionButtons button {
    margin: 0 4px;
    margin-top: 7px;
}

.googleOptimizeLearnMoreModalActionButtons a:hover {
    text-decoration: none;
    background-color: #106ebe;
}

.spanFilter .optionSection button,
.spanFilter .iconPlaceholder {
    flex: 0;
    margin-right: 0;
}

.spanFilter .optionSection .multiSelectValue {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filterHeader button {
    height: 20px;
    color: rgb(0, 120, 212);
    padding-left: 0;
}

.learnMoreButton {
    margin-left: 0;
}

.learnMoreButton :hover {
    color: rgb(0, 120, 212);
    text-decoration: underline;
}

.spanFilter .iconPlaceholder {
    width: 32px;
}

.regionSetup .title {
    font-size: 17px;
    font-weight: 500;
    margin-top: 40px;
    margin-bottom: 12px;
    line-height: 1.4em;
}

.regionSetup .description {
    margin-bottom: 30px;
}

.regionRow {
    display: flex;
    margin-top: 20px;
    max-width: 1000px;
}

.regionRow > * {
    flex: 1;
    margin-right: 20px;
}

.regionRow > button {
    flex: 0;
}

.regionRow.newRegion > button:last-child {
    visibility: hidden;
}

.analytics,
.goSettings {
    font-size: 14px;
    line-height: 18px;
    color: #323130;
    margin: 8px 0px;
    border-top: 1px solid #b3adb2;
}

.goActions {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    margin-top: 20px;
}

.goError {
    margin-top: 10px;
    display: block;
}

.goError .ms-Toggle {
    margin-top: 5px;
}

.gtmWrapper {
    border-bottom: 1px solid #b3adb2;
}

.tutorialsContent > :first-child {
    border-bottom: 1px solid #b3adb2;
    padding-bottom: 14px;
    margin-bottom: 19px;
}

.analytics .ms-MessageBar {
    margin-bottom: 24px;
}

.analytics .ms-MessageBar > div {
    margin-bottom: 0;
}

.analytics .gtmLabel {
    font-weight: 600;
    margin-right: 4px;
}

.analytics .heading,
.goSettings .heading {
    font-size: 18px;
    line-height: 20px;
    margin: 10px 0px;
    font-weight: 600;
}

.analytics .subheading,
.goSettings .subheading {
    color: #323130;
}

.analytics .subheading .ms-Link,
.goSettings .subheading .ms-Link {
    margin-right: 4px;
}

.analytics .heading > *,
.goSettings .heading > * {
    vertical-align: bottom;
    display: inline-block;
}

.analytics .action,
.goSettings .action {
    font-size: 14px;
    line-height: 16px;
    color: #484644;
    margin: 0px 8px;
}

.connectedLabel {
    font-weight: 600;
    margin-right: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.connectedContainerFRE {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 39px;
}

.toggleContainerFRE {
    display: flex;
    justify-content: space-between;
}

.toggleContainerFRE span.ms-layer {
    position: absolute;
}

.toggleContainerFRE .gaRemove {
    color: #0078d4;
    cursor: pointer;
}

.settingsSubtitle {
    font-size: 26px;
    line-height: 32px;
    margin: 24px 0 40px 0;
    font-weight: 600;
}

.googleContainer {
    margin-bottom: 24px;
}

.googleContainer > * svg {
    margin-right: 8px;
}

.googleContainer ~ div > * {
    margin-bottom: 24px;
}

.analytics .signInAgainLink {
    font-size: 12px;
    margin-left: 6px;
}

.analytics .gtmRemoving,
.analytics .gaRemove,
.analytics .hubspotRemoving {
    color: #0078d4;
    font-size: 14px;
}

.analytics .gtmRemove:hover,
.analytics .gtmRemove:focus,
.analytics .gaRemove:hover,
.analytics .gaRemove:focus {
    text-decoration: underline;
    cursor: pointer;
}

.compatContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 150px;
}

.compatBrowser {
    display: flex;
    align-items: center;
    padding: 8px;
}

.browserIcon {
    margin-right: 16px;
}

.browserLink {
    margin-left: 8px;
}

.browserGrid {
    display: flex;
    flex-direction: column;
}

.msoDel {
    display: none;
}

#wcpConsentBannerCtrl {
    position: fixed;
    bottom: 0;
    border-top: 1px solid #ddd;
    /* biome-ignore lint/complexity/noImportantStyles: override consent banner theming */
    background-color: white !important;
}

#wcpConsentBannerCtrl > *:last-child {
    margin-right: 12px;
}

#wcpConsentBannerCtrl > *:first-child {
    padding-left: 5px;
}

.userViewError {
    padding: 16px;
    font-size: large;
    font-weight: 600;
}

.orAndOption {
    color: #323130;
    font-weight: normal;
    display: flex;
}

.orFilterLabel {
    margin-right: 63px;
}

.orAndFilterLabel {
    display: flex;
    align-items: center;
}

.orAndFilterRadio {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0 8px 0 0;
    font: inherit;
    color: #323130;
    width: 20px;
    height: 20px;
    border: 1px solid #323130;
    border-radius: 50%;
    display: grid;
    place-content: center;
}

.orAndFilterRadio:checked {
    border: 1px solid #0078d4;
}

.orAndFilterLabel:hover > .orAndFilterRadio {
    border-width: 1.5px;
    border-color: #0078d4;
}

.orAndFilterRadio::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    transition: 80ms transform ease-in;
    box-shadow: inset 10px 10px #0078d4;
}

.orAndFilterRadio:checked::before {
    transform: scale(1);
}

#ScriptErrorTextbox__JSError__,
#ScriptErrorTextbox__ClickError__ {
    background-color: #f3f2f1;
    color: #323130;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.jsFilterOptionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.hideJsError div[aria-labelledby="ScriptErrorTextbox__JSError__"] > .ms-ComboBox-option,
.hideClickError div[aria-labelledby="ScriptErrorTextbox__ClickError__"] > .ms-ComboBox-option {
    display: none;
}

.showJsError div[aria-labelledby="ScriptErrorTextbox__JSError__"] > .ms-ComboBox-option,
.showClickError div[aria-labelledby="ScriptErrorTextbox__ClickError__"] > .ms-ComboBox-option {
    display: flex;
}

.jsErrorExpandIcon {
    transition: transform 0.1s linear 0s;
}

.jsErrorCollapsed {
    transform: rotate(180deg);
}

/*OVERRIDING FLUENT UI PANEL BEHAVIOR*/
@media (min-width: 480px) {
    .hamburgerPanel .ms-Panel-main {
        width: 242px;
    }
}

.googleIntegrationsFRE {
    display: flex;
}

.googleIntegrationsFRE > :first-child {
    margin-right: 12px;
}

.connectedGTM > :last-child,
.connectedGTMFRE > :last-child {
    margin-top: 16px;
}

.connectedGTMFRE .gtmLabel {
    font-weight: 600;
    margin-right: 5px;
}

.connectedGTMFRE .gtmLabelWrapper:last-child {
    margin-top: 8px;
}

.gtmFact {
    margin-top: 10px;
    position: relative;
}

.smallIconsSprite {
    position: absolute;
    overflow: hidden;
    transform-origin: top left;
}

.smallIconsSprite::after {
    content: url(https://claritystatic.azureedge.net/images/smallReactionsIcons.png);
    position: relative;
}

.emoji.smallIconsSprite {
    width: 20px;
}

.emoji.smaillLinkIcon::after {
    left: 0;
}

.emoji.smallEyesIcon::after {
    left: -22px;
}

.emoji.smallMonkeyIcon::after {
    left: -44px;
}

.gtmConnectButtonFRE > :last-child {
    margin: 135px 0 29px 0;
}

.gtmFact span {
    margin-top: 5px;
    margin-left: 30px;
}

.gtmConnectButtonFRE .gtmFact:first-child {
    margin-top: 31px;
}

.gtmConnectButtonFRE > :last-child {
    margin: 32px 0 29px 0;
}

.gtmConnectButtonFRE {
    border-bottom: solid 1px #b3b0ad;
    margin-bottom: 19px;
}

.gtmFact .ms-Link {
    margin-left: 4px;
}

.finishSetupGTMFRE {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 12px;
}

.hundredPercentHeight {
    height: 100%;
}

.excludeFilterCheckbox {
    margin-top: 12px;
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
    .msLogo {
        background-color: black;
    }

    .playerInfoIcon path {
        fill: white;
    }
}

@media (forced-colors: active) and (prefers-color-scheme: light) {
    .msLogo {
        background-color: white;
    }
}

#myProjectsInPanel {
    display: none;
    width: 100%;
}

#myProjectsInPanel > div,
#myProjectsInPanel > div > span {
    width: 100%;
}

#myProjectsInPanel .ms-Button:first-child {
    flex-grow: 1;
}

/* biome-ignore lint/correctness/noUnknownMediaFeatureName: vendor-prefixed pixel ratio for high-DPI screens */
@media only screen and (-webkit-min-device-pixel-ratio: 4) {
    .projHeader.hiddenOnZoom {
        display: none;
    }

    #headerProjects {
        display: none;
    }

    #myProjectsInPanel {
        display: block;
    }
}

.appMaskCodeBlock {
    background-color: #edebe9;
    padding: 20px;
}

.liveRecordingContainer {
    display: flex;
    height: 64px;
    background-color: #2f95961a;
    border-radius: 4px;
    padding: 18px;
    margin-bottom: 12px;
    align-items: center;
    position: relative;
}

.liveRecordingContainer.clickable {
    cursor: pointer;
}

.liveRecordingContainer.expanded {
    margin-bottom: 0px;
}

.liveUserContentHeader {
    align-items: center;
    display: flex;
}

.liveUserHeader {
    height: 28px;
    background-color: #2f9596;
    color: white;
    font-weight: 600;
    border-radius: 2px;
    padding: 5px 12px;
    margin-left: 4px;
}

.liveUserHeaderZero {
    padding: 5px 12px;
    margin-left: 4px;
}

.liveUserHeaderZeroBold {
    font-weight: 600;
}

.liveRecordingContainer .ms-Icon {
    position: absolute;
    right: 24px;
}

.liveRecordingCardContainer {
    overflow-y: scroll;
    padding: 0 8px;
    background-color: #2f95961a;
    height: 100%;
}

.liveRecordingsHeader {
    font-weight: 600;
}

.liveLabelContainer {
    display: flex;
    align-items: center;
    height: 16px;
}

.liveLabel {
    background-color: #2f9596;
    color: white;
    margin-left: 4px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    width: 48px;
    display: flex;
    justify-content: center;
}

.videoControlLiveIcon {
    align-items: center;
    display: flex;
    padding-right: 4px;
}

.liveButton {
    background-color: #2f9596;
    color: white;
    margin-left: 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    width: 69px;
    text-align: center;
}

.goLiveButton {
    background-color: white;
    color: #2f9596;
    border-color: #2f9596;
    border-style: solid;
    border-width: 1px;
    margin-left: 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    width: 69px;
    text-align: center;
    cursor: pointer;
}

.cardRow.urlDate > .flexAuto {
    flex: auto;
}

.filterUrlWrapper {
    display: flex;
    align-items: center;
    margin-right: 10px;
    flex: 0 0 auto;
    border: none;
}

.filterUrlWrapper.gap {
    gap: 16px;
}

.filterUrlWrapper .urlActionWrapper {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 8px 0;
}
.filterUrlWrapper .urlActionWrapper.withPadding {
    padding-left: 16px;
}

.filterUrlWrapper .separator {
    height: 16px;
    width: 8px;
    padding: 8px;
    background-color: #fff;
}

.filterUrlWrapper .heatmapUrlSearchBox {
    border-width: 0 0 1px 0;
    border-radius: 0;
    flex-grow: 1;
}

.filterUrlWrapper .ms-SearchBox {
    margin-bottom: 0;
}

.filterUrlWrapper .ms-Dropdown {
    width: 132px;
    border-width: 0 0 1px 0;
    border-radius: 0;
}

.filterUrlWrapper .badgeView .ms-Dropdown {
    width: unset;
    min-width: 120px;
}

.filterUrlWrapper .ms-Dropdown-title {
    border-width: 0 0 1px 0;
    border-radius: 0;
}

.filterUrlWrapper.badgeView {
    margin-right: 0px;
}

.filterUrlWrapper .badgeView .ms-Dropdown,
.filterUrlWrapper .badgeView .ms-Dropdown-title,
.filterUrlWrapper .badgeView.ms-SearchBox,
.filterUrlWrapper .badgeView .ms-Dropdown-caretDownWrapper {
    border: none;
    height: 24px;
}

.filterUrlWrapper .badgeView .ms-Dropdown-title,
.filterUrlWrapper .badgeView .ms-Dropdown-caretDownWrapper {
    display: flex;
    align-items: center;
}

.filterUrlWrapper .addURLButton {
    height: 32px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px;
    gap: 8px;
    line-height: 100%;
    border: none;
    text-align: center;
}
.filterUrlWrapper .addURLButton .ms-Button-label {
    color: #323130;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    min-width: 54px;
}
.filterUrlWrapper .addURLButton i {
    color: #0078d4;
    font-size: 12px;
    font-weight: 900;
}

.filterUrlWrapper .deleteURLButton {
    margin-left: 2px;
}

.filterUrlWrapper .addURLButton.is-disabled,
.filterUrlWrapper .addURLButton.is-disabled .ms-Button-label,
.filterUrlWrapper .addURLButton.is-disabled i {
    color: #a19f9d;
    background-color: #fff;
}

.selectedurlsWrapper {
    margin-top: 16px;
}

.selectedURL {
    display: flex;
    align-items: center;
}

.selectedUrlRow {
    border-bottom: 1px solid #d9d9d9;
    margin-left: 34px;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 8px;
}
.selectedUrlRow.firstRow {
    border-top: 1px solid #d9d9d9;
}
.selectedUrlRow .selectedPattern {
    color: #605e5c;
    width: 148px;
    vertical-align: center;
}

.selectedUrlRow .selectedValue {
    color: #605e5c;
    width: 460px;
}

.selectedUrlRow .actionButton {
    width: 24px;
    height: 32px;
    display: flex;
    align-items: center;
    background-color: #fff;
    margin-right: 12px;
}

.selectedUrlRow .actionButton i {
    font-size: 12px;
}

.goToVpButton {
    transform: translateY(-12px);
    display: flex;
    justify-content: space-between;
}

.goToVpButton .ms-Button {
    margin-top: 6px;
}

/* Adding this here for WebHeatmapPage rebrand background*/
.embedZapier {
    padding: 24px 32px;
    min-height: 1000px;
}

.zapierContainer {
    visibility: hidden;
}

.zapierContainerLoading {
    visibility: hidden;
}

.downloadContainer {
    margin-left: auto;
}

.downloadButton {
    color: #0078D4;
    min-width: auto;
    width: fit-content;
    padding: 0px;
    box-shadow: 0px transparent;
    border: 0px solid transparent;
    text-shadow: 0px transparent;
}

.downloadButton.disabled * {
    fill: rgb(161, 159, 157);
}

.downloadButton > span {
    justify-content: right;
}

.csvDownloadSpin {
    margin-right: 12px;
}

.csvDownloadOption {
    line-height: 36px;
    display: flex;
    justify-content: left;
    flex-direction: row;
    cursor: pointer;
}

.csvDownloadOption:hover {
    background-color: rgb(239, 239, 239);
}

.csvDownloadOptionText {
    padding:0px 12px;
    width: 100%;
}

.csvDownloadOptionText > a {
    color: rgb(50, 49, 48);
}

.csvDownloadOptionText:hover > a {
    color: rgb(50, 49, 48);
}

.csvDownloadDropdownText {
    padding: 5px 4px;
}

.csvDownloadDropdownText > span {
    margin: 8px;
}

.csvDownloadDropdownText.title > div {
    font-weight: 600;
    color: #323130;
    font-size: 14px;
    padding: 0 4px;
}


.downloadRecordingsButton {
    color: #000000;
}

.downloadRecordingsButton.disabled {
    color: rgb(161, 159, 157);
}

.downloadRecordingsList {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.csvDropdownContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 2px;
}

.csvDropdownContainer .ms-ContextualMenu-list {
    width: 100%;
}

.cvsDownloadDropdownActions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5px 12px 12px;
}

.downloadCSVButton {
    width: 105px;
    height: 32px;
    background: #0078D4;
    border-radius: 2px;
    color: #FFFFFF;
    text-align: center;
}

.downloadCSVButton > a {
    color: #FFFFFF;
}

.downloadErrorModal {
    width: 545px;
    height: 430px;
    display: flex;
    text-align: center;
    box-shadow: 0px 1.2px 3.6px rgb(0 0 0 / 10%), 0px 6.4px 14.4px rgb(0 0 0 / 13%);
    border-radius: 2px;
}

.downloadErrorModal > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.downloadErrorModalHeader {
    position: absolute;
    width: 100%;
    height: 9px;
    left: 0px;
    top: 0px;  
    background: #C43E1C;
}

.downloadErrorModalSubHeader {
    position: absolute;
    left: 92.52%;
    right: 4.98%;
    top: 5.61%;
    bottom: 90.65%;
}

.downloadErrorModalSubHeader .closeIcon {
    color: #666;
}

.downloadFailTitle {
    font-size: 28px;
    line-height: 36px;
    padding-bottom: 15px;
}

.downloadFailCaption {
    font-size: 18px;
    line-height: 24px;
    padding-bottom: 38px;
}

.downloadFailOptions {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.downloadErrorModalCancel {
    margin-right: 12px;
}

.downloadHeatmap {
    margin-right: 16px;
}

/********************************************/
/**********     GA Dashboard    ************/
/********************************************/
.gaCardHeader {
    display: flex;
    width: 100%;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.gaCardTitle {
    padding: 11px 0px 8px 16px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.gaCardHeader .ms-Dropdown-container {
    position:absolute;
    right: 16px;
    top: 4px;
}

.gaPivotHeader {
    padding: 10px;
}

.gaCardHeader .ms-Dropdown-title {
    border-width: 0 0 1px 0;
    border-radius: 0;
    width: 100%;
    min-width: 120px;
}

.gaCard,
.gaCardLarge {
    display: inline-table;
    margin-bottom: 24px;
    margin-right: 24px;
}

.gaCard {
    width: 432px;
    min-height: 350px;
}

.gaCardLarge {
    width: 660px;
    height: 490px;
}

.gaChart {
    min-height: 350px;
}

.gaPageColumn {
    width: 265px;
}

.gaCardPivotHeader {
    height: 25px;
}

.gaCardPivotBody {
    font-size: 28px;
    height: 50px;
}

.gaCardFooter {
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    background-color: #0078D4;
    position: relative;
    display: flex;
    align-items: center;
}

.gaCardFooter .ms-Button {
    display: flex;
    width: 100%;
}

.gaCardFooter .ms-Button:hover {
    background-color: #106ebe;
}

.gaCardFooterText {
    display: inline-block;
    color: white;
    margin-right: 10px;
}

.gaCardFooter .bold {
    font-weight: 600;
}

.gaCardFooter * .ms-Icon {
    color: white;
}

.gaCardFooter .badgeClear {
    font-size: 12px;
    color:white;
    cursor: pointer;
    position: absolute;
    right: 12px;
}

.wideChart {
    font-size: 12px;
    line-height: 20px;
}

.centerDiv {
    width: 644px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.gaChartHeight {
    height: 345px;
}

.gaShortChartHeight {
    height: 316px;
}

.gaHintDiv {
    padding-top: 11px;
}

@media only screen and (min-width: 1920px) {
    .gaCardLarge {
        width: 886px;
        height: 490px;
    }
}
/* biome-ignore-all format: legacy hand-maintained stylesheet; preserve existing author formatting */
/* biome-ignore-all lint/correctness/noUnknownMediaFeatureName: intentional -ms-high-contrast legacy high-contrast support */
/* biome-ignore-all lint/a11y/useGenericFontNames: pre-existing legacy font stacks */
/* biome-ignore-all lint/suspicious/noDuplicateProperties: pre-existing legacy declarations */
.heatmapContainer,
.emptyHeatmapContainer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: auto;
}

.heatmapContent,
.heatmapCompare {
    display: flex;
    overflow: hidden;
    flex: 1;
}

.heatmapShareDownloadStack {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    gap: 8px;
}

.heatmapCompareButton {
    margin-left: auto;
    margin-right: 12px;
    flex: 0 0 auto;
}

.heatmapCompare .heatmapSidebarWrapper {
    float: inline-end;
    padding-top: 0;
    position: absolute;
    z-index: 1000000;
    transition: 0.2s;
    height: 100%;
}

.heatmapCompare .heatmapSidebarWrapper .topNavbar {
    padding-top: 12px;
}

.heatmapCompare .sidebarClosed,
.heatmapSidebarWrapper.sidebarClosed.canClose {
    transform: translateX(-100%);
}

.heatmapSidebarWrapper.sidebarClosed.canClose .sidebarPanelActionWrapper,
.heatmapSidebarWrapper.sidebarClosed.canClose .sidebarPanelTitle{
    visibility:hidden;
}

.heatmapSidebarWrapper.sidebarClosed.canClose {
    padding: 0;
    width: 0;
    visibility:hidden;
}

.heatmapSidebarWrapper.canClose {
    padding-top: 0;
}


.heatmapSidebar.appsHeatmapSidebar {
    height: 100%;
    overflow: hidden;
}

.heatmapCompareResizer {
    width: 2px;
    cursor: col-resize;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    background: #E1DFDD;
    margin-top: 143px;
}

.heatmapCompareResizer .resizerButton {
    background: #0078D4;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 0 4px;
    z-index: 1;
}

.heatmapCompareResizer .resizerButton .dragerIcon {
    width: 12px;
    height: 12px;
    color: #FFF;
    background: #0078D4;
    cursor: pointer;
}

.dragerIcon .ms-Icon{
    color: #FFF;
}

.heatmapCompare .secondary .sidebarClosed {
    transform: translateX(100%);
}

.heatmapCompare .secondary .heatmapSidebarWrapper {
    border-left: 1px solid rgb(237, 235, 233);
}

.heatmapCompare .tabContentHeader {
    flex-direction: column;
    border: hidden;
    padding: 0;
}
.heatmapCompare .filterBadgeNavWrapper {
    width: 100%;
}

.heatmapCompare .heatmapContent{
    position: relative;
}

.changingScreenshots .heatmapPanelTop {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 18px;
}

.changingScreenshots .panelTitle {
    padding-bottom: 12px;
}

.changingScreenshots .screenshotsListWrapper {
    display: grid;
    gap: 12px;
}

.heatmapScreenshotIframeWrapper {
    margin: 0 2.5px;
    width: 328px;
    height: 213px;
    border: 1px solid #C8C6C4;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    background-color: #F3F2F1;
}

.changingScreenshots .heatmapScreenCard {
    margin: 0 2.5px;
    width: 150px;
    border: 1px solid #C8C6C4;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    background-color: #F3F2F1;
}


.changingScreenshots .screenshotsLoading {
    justify-content: center;
    margin-top: 137px;
}

.heatmapCompare .secondary .heatmapContent,
.heatmapCompare .primary .heatmapFooter,
.heatmapCompare .secondary .heatmapSidebarWrapper .heatmapPanelTop { 
    flex-direction: row-reverse;
}

#heatmapSidebarPortal {
    overflow: hidden;
    padding: 0 0 12px 0;
    margin-top: 12px;
}

#heatmapSidebarPortal .panelTop{
    overflow: hidden;
    padding: 0 16px;
}

#heatmapSidebarPortal .heatmapSidebar {
    height: calc(100% - 95px);
}

#heatmapSidebarPortal .withEditArea {
    height: calc(100% - 150px);
}

#heatmapSidebarPortal .withShadow {
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    position: relative;
    z-index: 10;
}

#heatmapSidebarPortal .panelTopWrapper {
    padding-bottom: 12px;
    border-bottom: 1px solid #EDEBE9;
}

#heatmapSidebarPortal .sidebarPanelActionWrapper {
    border: none;
    padding-bottom: 0;
}

#heatmapSidebarPortal:focus-visible {
    outline: 1px solid;
}

.heatmapCompare .secondary .cardOrder,
.heatmapCompare .secondary .heatmapElements .elementRank,
.heatmapCompare .secondary .ms-Button--primary,
.heatmapCompare .secondary .is-checked .ms-Checkbox-checkbox,
.calloutStylesSecondary .is-checked .ms-Checkbox-checkbox {
    background-color: #E3008C;
}

.heatmapCompare .secondary .heatmapElements .heatmapElement {
    outline-color: #E3008C;
}

.heatmapCompare .secondary .filtersBarButtons .ms-Icon, 
.heatmapCompare .secondary .seeDetails,
.heatmapCompare .secondary .cardAction i {
    color: #E3008C;
}

.heatmapSidebar .cardAction .ms-Button {
    margin: 1px;
}

.moneymapMetadataActions {
    padding: 0px 12.5px 8px;
}

@media screen and (-ms-high-contrast: active) { 
    .heatmapSidebar .cardAction .ms-Button:focus-visible {
        outline: windowtext solid 1px;
    }
}

@media screen and (prefers-contrast: more) {
    .xRaySliderContainer .ms-Button path {
        fill: white;
    }
}

.heatmapCompare .secondary .ms-Button--primary,
.heatmapCompare .secondary .is-checked .ms-Checkbox-checkbox,
.heatmapCompare .secondary .is-checked::before,
.heatmapCompare .secondary .is-checked::after,
.calloutStylesSecondary .is-checked .ms-Checkbox-checkbox {
    border-color: #E3008C;
}

.heatmapCompare .secondary .filterBadge,
.heatmapCompare .secondary .heatmapMetrics .badge {
    background: rgba(227, 0, 140, 0.1);
    color: #E3008C;
}

.heatmapCompare .tabContentWithFilter {
    min-width: 720px;
}

.heatmapCompare .primary {
    flex: none; 
    max-width: calc(100% - 720px);  
}

.heatmapCompare .secondary {
    flex: 1 1 0%;
}

.heatmapCompare .heatmapSidebar .heatmapPanelTop,
.canClose .heatmapPanelTop {
   position: sticky;
   top: 0;
   background-color: #FAF9F8;
   z-index: 10;
   padding: 0 5px;
   margin-top: 12px;
   max-width: 100%;
}

.heatmapPanelTop.noMargin {
    margin-top: 8px;
}

.heatmapCompare .filtersActions,
.heatmapCompare .filtersContent {
    width: 100%;
    display: flex;
    overflow: hidden;
    align-items: flex-start;
    padding: 6px 16px;
}

.heatmapCompare .heatmapZeroState {
    height: 100%;
}

.heatmapCompare .filtersActions {
    padding-bottom: 6px;
    min-width: unset;
}

.heatmapCompare .heatmapZeroState {
    height: 100%;
    overflow: hidden;
    padding-bottom: 124px;
}

.heatmapCompare .heatmapFooter {
    border-top: 1px solid #CCC;
}

.heatmapCompare .filtersActions .cancelIconContainer {
    border: 1px solid #D83B01;
    box-sizing: border-box;
    border-radius: 2px;
    margin-left: auto;
}

.heatmapCompare .filtersActions .closeIcon {
    color: #D83B01;
    width: 30px;
    height: 30px;
}

.urlActionWrapper .grayIcon:hover {
    color: #666;
}

.heatmapCompare .filtersContent {
    padding-top: 8px;
}

.heatmapCompare .filtersBarButtons:first-child {
    margin-left: 0px;
}

.emptyHeatmapContainer {
    font-size: 20px;
    text-align: center;
    padding-top: 250px;
}

.heatmapCompare .heatmapUrlSearchBox {
    width: 50%;
    max-width: 351px;
    min-width: 230px;
}

.heatmapCompare .heatmapURLPanel {
    width: 95%;
    overflow: scroll;
    top: calc(50% + 1px);
}

.heatmapCompare .heatmapURLPanel .heatmapUrlSearchBox{
    width: 50%;
    min-width: 50%;
}

.heatmapCompare .secondary .heatmapCompareFilterButton {
    background-color: #E3008C;
}

.heatmapCompare .heatmapCompareFilterButton {
    color: white;
    background-color: #0078D4;
    width: 56px;
}

.heatmapUrlSearchBox.urlPathFilter.withNoRightMargin {
    margin-right: 0;
}

.heatmapUrlSearchBox {
    width: 351px;
    margin-right: 10px;
    flex: 0 0 auto;
}

.heatmapUrlSearchBox.urlPathFilter.withRightMargin {
    margin-right: 16px;
}

.heatmapUrlSearchBox.urlPathFilter.badgeView .ms-SearchBox-clearButton,
.heatmapUrlSearchBox.urlPathFilter.badgeView .ms-SearchBox-iconContainer {
    display: none;
}

.heatmapUrlSearchBox.urlPathFilter.badgeView {
    width: unset;
    margin-right: 0;
}

.heatmapUrlFilterHeaderWrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 24px;
    align-items: center;
    padding: 6px 20px;
    line-height: 20px;
}

.heatmapURLPanel .heatmapUrlFilterHeader {
   font-size: 18px;
   font-weight: 600;
   line-height: 24px;
}

.heatmapURLPanel .filtersActionHeader {
 display: flex;
 line-height: 20px;
 align-items: center;
}

.heatmapURLPanel .filter {
    padding: 6px 20px;
}

.filtersActionHeader > * {
    cursor: pointer;
}

.filtersActionHeader > *:not(:first-child) {
    margin-left: 12px;
}

.pathFilterAddorEditButton {
    margin-right: 10px;
}

.heatmapUrlWrapper .urlActionWrapper{
    display: flex;
    align-items: center;
    margin-right: 10px;
    flex: 0 0 auto;
    border: 1px solid #605E5C;
    border-radius: 2px;
}

.heatmapUrlWrapper .separator {
    height: 16px;
    width: 1px;
    background-color: #C8C6C4;
}

.heatmapUrlWrapper .heatmapUrlSearchBox {
    flex: 0 0 auto;
    border: none;
}

.heatmapUrlWrapper .heatmapUrlDropDown {
    width: 128px;
    border: none;
}
.heatmapUrlWrapper .ms-Dropdown-title {
    border: none;
}

.heatmapSidebar .card {
    width: 100%;
    white-space: nowrap;
    padding: 0;
}

.heatmapSidebar .cardSingleRow {
    padding: 12px;
}

.heatmapSidebar .cardOrder {
    background-color: #0078D4;
    color: white;
    flex: 0 0 auto;
    height: 32px;
    width: 32px;
    border-radius: 32px;
    text-align: center;
    line-height: 32px;
    margin-right: 10px;
}

.heatmapSidebar .cardBody {
    display:  flex;
    white-space: nowrap;
    padding-bottom: 8px;
    border-bottom: 1px solid #EDEBE9;
    margin: 12px 12px 0;
}

.heatmapSidebar .cardAction {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 8px 0 4px;
}

.heatmapSidebar .card div {
    text-overflow: ellipsis;
    overflow: hidden
}

.heatmapSidebar .ms-DetailsHeader-cellTitle {
    padding: 0;
}

.heatmapSidebar .ms-DetailsHeader,
.heatmapSidebar .ms-DetailsRow {
    background-color: #FAF9F8;
}

.heatmapSidebar .ms-DetailsHeader {
    color:#323130
}

.heatmapSidebar .ms-DetailsRow {
    color:#605E5C
}

.heatmapSidebar .ms-DetailsRow:hover,
.heatmapSidebar .ms-DetailsHeader-cell:hover {
    background-color: #FAF9F8;
}

.heatmapSidebar .ms-DetailsRow:hover {
    color: #605E5C;
}

/*Heatmap header begin */
.heatmapHeader {
    display: flex;
    padding: 10px 16px;
    border-bottom: 1px solid #ddd;
    align-items: center;
}

.heatmapHeader > .heatmapButtonGroup {
    display: flex;
}

.heatmapHeader > :first-child {
    margin-right: 24px;
}

.heatmapHeader > .ms-TooltipHost {
    margin-left: 9px;
}

.heatmapHeader .ms-Button-label {
    margin-left: 8px;
    float: left;
}

.heatmapCompare .heatmapDeviceButton .ms-Button-label{
    margin: 0;
}

.heatmapChangeScreenshotButtonDisabled {
    background-color: #FFF;
    border-width: 1px;
    border-color: rgb(220, 220, 219);
}

.clickMapButton {
    padding: 0 0 0 16px;
}

.heatmapHeaderInfoIcon {
    font-size: 18px;
    color: #0078D7;
}

.heatmapHeaderInfoIcon:hover {
    color: #627B8E;
}

.heatmapHeaderInfoBubble {
    padding: 8px;
}

.heatmapHeaderInfoBubble > *:not(:last-child) {
    border-bottom: 1px solid #EEE;
    padding-bottom: 13px;
}

.clickMenuHighlight, .moneyMenuHighlight {
    background-color: #f3f2f1;
}

.heatmapInfoTitle {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    justify-content: center;
}

.listItem {
    display: flex;
    padding-top: 13px;
}

.listItem > :first-child {
    width: 15%;
    padding-top: 3px;
}

.listItem > :last-child {
    width: 85%;
}

.listItem svg {
    margin-left: -5px;
}

.listItemTitle {
    color: #333;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
}

.listItemsClickmap {
    margin-left: 15px;
}

.listItemDescription,
.listItemDescriptionBold {
    margin-top: 9px;
    font-size: 13px;
    line-height: 18px;
    color: #666;
}

.listItemDescriptionBold {
    color: #333;
    font-weight: 600;
}

/*Heatmap header end */

.heatmapVisual {
    overflow:  hidden auto;
    display: flex;
    position: relative;
    justify-content: center;
    flex: 1;
}

.noHeat {
    flex: 1;
    display: flex;
    justify-content: center;
    background-color: #F3F2F1;
    position: relative;
}

.noHeat .fragmentsNoResults {
    position: absolute;
    left: 0;
    padding: 24px 0 0 32px;
}

.fragmentsNoResults .urlParamToggle {
    padding: 16px 0;
}

.unscaledHeatmapArea {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heatmap-wrapper iframe {
    position: relative;
    border: 1px solid #CCC
}

.app-heatmap-wrapper iframe {
    position: relative;
}

.heatmapElements {
    position: absolute;
    z-index: 2;
}

.heatmapElements .heatmapElement {
    position: absolute;
    border: 1px solid white;
    outline: 1px solid #0078D4;
}

.heatmapElements .elementRank {
    position: absolute;
    width: 36px;
    height: 36px;
    background: #0078D4;
    color: white;
    border: 1px solid #FFFFFF;
    border-radius: 32px;
    text-align: center;
    line-height: 32px;
    filter: drop-shadow(0px 1.2px 3.6px rgba(0, 0, 0, 0.1));
    cursor: default;   
}

.heatmapElements .missingElement {
    padding: 24px;
    background: white;
    font-size: 16px;
    line-height: 22px;
    position: relative;
    left: 50%;
    top: 250px;
    display: inline-block;
    box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    border-radius: 2px;
    transform-origin: left;
}

.elementMetadata {
    padding: 8px 8px 8px 20px;
    display: flex;
    align-items: center;
}

.elementMetadata .metadataText{
    margin-right: 12px;
    line-height: 30px;
}

.moneymapMetadata .elementMetadata {
    padding-bottom: 0px;
}

#disclaimerIcon {
    font-size: 32px;
    color: #2c2c2c;
    position: fixed;
    right: 20px;
}

.scrollmap-canvas{
    position: absolute;
    z-index: 2;
}

.scrollMarker {
    width: 100%;
    position: absolute;
    text-align: center;
    z-index: 3;
}

.scrollMarkerIndicatorWrapper {
    position: absolute;
    display: flex;
    width: 100%;
    z-index: 3;
    align-items: center;
}

.scrollMarkerIndicator {
    height: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
    font-size: 12px;
    font-family: Arial;
    background: #fff;
    font-weight: 500;
    color: #323130;
}

.scrollMarkerIndicator.avgFoldMarker {
    width: 84px;
}

.scrollMarkerIndicator.percentageMarker {
    width: 35px;
}

.scrollMarkerLine {
    width: 100%;
    height:2px;
    display:inline-block;
    background:repeating-linear-gradient(90deg, #323130, transparent 2px 3px);
  }

.scrollMarkerInfo {
    display: inline-block;
    width: 230px;
    padding: 8px;
    font-size: 12px;
    background: #fff;
    font-weight: 700;
    text-transform: uppercase;
    color: #323130;
    border: 1px solid #323130;
    border-radius: 2px;
}

.scrollMarkerInfo::before,
.scrollMarkerInfo::after {
    content: "";
    border-top: 1px solid #323130;
    margin: auto;
    display: block;
    width: calc((100% - 230px)/2);
    position: absolute;
    left: 0;
    top: 16px;
}

.scrollMarkerInfo::after {
    right: 0;  
    left: auto;
}

.heatmapFooter {
    position: relative;
    display: flex;
    padding: 9px 20px;
    height: 44px;
    background-color: #FFF;
    color: #323130;
    align-items: center;
    min-height: 44px;
}

.heatmapZeroState{
    padding: 24px 32px 44px;
}

.heatmapZeroState .showMore,
.heatmapZeroState .showLess {
    color: #0078D4;
    text-decoration: underline;
}

.heatmapZeroState .paginationLoading {
    margin-top: 10px;
}

.heatmapZeroState .projectContent {
    background-color: #FFF;
    overflow: unset;
    height: 100%;
    padding: 0;
}

.heatmapZeroState .projectContent table {
    min-width: 100%;
}

.heatmapZeroState .projectContent td {
    width: auto;
    max-width: 730px;
}

.heatmapZeroState .projectContent td:first-child{
    width: 80%;
}

.heatmapZeroState .projectContent tr:hover {
    cursor: pointer;
    background-color: rgb(243, 242, 241);
}

.heatmapZeroStateTitle {
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.heatmapZeroState .urlParamToggle {
    padding: 16px 0;
}

.heatmapZeroState .viewHeatmapAction {
    color: #0078D4;
    font-size: 16px;
    line-height: 31px;
    display: flex;
    width: max-content;
}

.heatmapZeroState .urlColoumn {
    display: flex;
}

.heatmapZeroState .urlColoumn span:first-child{
    min-width: 40px;
}

.heatmapZeroState tr td:last-child {
    padding-left: 5px;
}

.heatmapMetrics {
    display: flex;
    cursor: default;
}

.heatmapTooltipBadge {
    border: none;
}

.backToScreenshots {
    background: transparent;
    border: none;
    padding-left: 0;
}

.heatmapColorScale,
.heatmapColorScaleScroll {
    width: 100px;
    height: 8px;
    border-radius: 1px;
    margin: 0 13px;
}

.heatmapColorScale {
    background: linear-gradient(to right, red 0%, yellow 25%, lime 50%, cyan 75%, blue 100%);
}

.heatmapColorScaleScroll {
    background: linear-gradient(to right, hsla(0, 100%, 50%, 0.6) 10%, hsla(30, 100%, 50%, 0.6) 20%, hsla(60, 100%, 50%, 0.6) 30%, hsla(90, 100%, 50%, 0.6) 0% 40%, hsla(120, 100%, 50%, 0.6) 0% 50%, hsla(150, 100%, 50%, 0.6) 0% 60%, hsla(180, 100%, 50%, 0.6) 0% 70%, hsla(210, 100%, 50%, 0.6) 0% 80%, hsla(240, 100%, 50%, 0.6) 0% 90%);
}

.xRaySliderContainer {
    background-color: white;
    display: flex;
    position: absolute;
    flex-direction: column;
    height: 272px;
    bottom: 35px;
    right: 45px;
    justify-content: center;
    box-shadow:  0px 0.6px 1.8px rgb(0 0 0 / 10%), 0px 3.2px 7.2px rgb(0 0 0 / 13%);
    border-radius: 2px;
    height: 270px;
}

.xRaySliderContainer .ms-Slider {
    margin-right: 0;
}

.xRaySliderContainer .ms-Slider-thumb {
    border: 2px solid rgb(0, 90, 158);
}

.xRaySliderContainer .ms-Slider-active {
    background-color:rgb(0, 120, 212);
}

.xRaySliderContainer .ms-Slider-inactive {
    background-color: rgb(222, 236, 249);
}

.ms-Callout-container > .xrayCallout.ms-Callout {
    border: none;
    box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
}

.ms-Callout-container > .xrayCallout .ms-Slider {
    margin: 0;
}

.heatmapPage {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.createButtonContainer {
    padding: 20px;
}

.createHeatmapButton {
    width: 100%;
    margin-bottom: 10px;
}

/* Heatmap cards begin */

.heatmapsList {
    overflow-y: scroll;
	padding: 0 10px 0 20px;
}

.heatmapsList .cardTitle svg {
    margin-right: 9px;
}

.heatmapMenuItem {
    min-width: max-content;
}

.heatmapInfo > div {
    display: flex;
}

.heatmapInfo > div > span:first-child  {
    width: 33%;
    color: #333;
}

.heatmapInfo > div > span:last-child {
    width: 67%;
    color: #666;
}

/* Heatmap cards end */
/* Heatmap creation modal begin */

.ms-Dialog-main {
    border-radius: 6px;
}

.createHeatmapLabel {
    margin-left: 4px;
}

.createHeatmapClose {
    position: absolute;
    top: 22px;
    right: 24px;
    color: #666;
}

.createHeatmapClose:hover {
    color: #000;
}

.createHeatmapClose i {
    font-size: 18px;
}

.createHeatmapBody {
    display: flex;
    width: 650px;
    height: 450px;
    position: relative;
}

.createHeatmapBody .ms-Label,
.createHeatmapBody .ms-Checkbox-text,
.createHeatmapInfoTitle,
.createHeatmapdefinitionHeader {
    font-weight: 400;
    color: #000;
}

.createHeatmapForm {
    width: 60%;
    padding: 23px;
}

.createHeatmapForm > *:not(:last-child) {
    margin-bottom: 15px;
}

.createHeatmapInfo {
    width: 40%;
    background-color: #F5F5F5;
    border-left: 1px solid #B5AFAF;
    padding: 23px;
    overflow-y: scroll;
}

.heatmapTitleLabel {
    font-size: 24px;
}

.createHeatmapForm .dateControl {
    width: 150px;
    margin-bottom: 0;
}

.createHeatmapSubmitButton {
    display: flex;
    margin: 25px auto 0;
}

.createHeatmapInfo {
    padding: 30px 20px;
}

.createHeatmapInfoTitle {
    font-size: 18px;
    margin-bottom: 10px;
}

.createHeatmapdefinition {
    color: #666;
}

.createHeatmapdefinitionHeader {
    padding: 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.createHeatmapdefinitionHeader i {
    font-size: 12px;
    margin-right: 15px;
    color: #999;
}

/* Heatmap creation modal end */

@media (forced-colors: active) {
    .heatmapColorScale {
        forced-color-adjust: none;
    }

    /* The "View Heatmap" icon is an inline SVG with a hardcoded fill (#424242) which
       forced-colors mode does not remap, leaving it invisible (<3:1) in Aquatic/Desert
       themes. Map it to a system color so it stays perceivable. (MAS 4.3.1) */
    [data-icon-name="darkHeatmapFilledIn"] svg path {
        fill: CanvasText;
    }
}

/* Heatmap screen sidebar start */

.screenSidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 0px;
    gap: 12px;
    position: absolute;
    height: 100%;
}

.screenPanelTop {
    width: 394px;
    height: 44px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.backToElementsWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    position: absolute;
    width: 146px;
    height: 32px;
    cursor: pointer;
}

.backToElementsButton {
    width: 16px;
    height: 16px;
    font-family: 'Fabric MDL2 Assets';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #0078D4;
    cursor: pointer;
}

.backToElementsText {
    width: 106px;
    height: 20px;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: flex-end;
    color: #323130;
}

.screenStatsWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    height: 50px;
}

.screensListWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 374px;
    overflow-y: scroll;
    margin-bottom: 100px;
    height: 100%;
}

.screenWrapper {
    display: flex;
    flex-direction: row;
    gap: 80px;
    padding: 12px;
    height: 261px;
}

.screenCardLoading {
    padding-top: 15px;
    padding-left: 60px;
    height: 100%;
}

.heatmapScreenCard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 362px;
    height: 261px;
    background: #FFFFFF;
    border: 1px solid #D2D0CE;
    border-radius: 2px;
    cursor: pointer;
}

.heatmapScreenCard.selected {
    border: #0078D4 2px solid;
}

.screenIndex {
    width: 32px;
    height: 32px;
    border-radius: 30px;
    background: #0078D4;
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    display: inline-flex;
    color: #FFFFFF;
    align-items: center;
    justify-content: center;
}

/* Heatmap screen sidebar end */

/* Heatmap screen navigator start */

.screenNavigator {
    position: absolute;
    width: 216px;
    height: 104px;
    left: 16px;
    top: 14px;
    background: #FFFFFF;
    box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.screenNavigatorGroup {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.screenNavigator .screenNavigatorGroup {
    justify-content: center;
    gap: 8px;
}

.screenNavigator .screenNavigatorGroup {
    flex-direction: column;
    width: 184px;
    height: 72px;
}

.inPanelScreenNav {
    padding-bottom: 8px;
    border-bottom: 1px solid #EDEBE9;
}

.screenNavigationOptions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 32px;
}

.screenChevron {
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screenTextField {
    height: 32px;
    width: 32px;
    border-radius: 2px;
}

.screenTextField .ms-TextField-field {
    text-align: center;
}

.showScreensButton {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 168px;
    height: 32px;
    border: 1px solid #8A8886;
    border-radius: 2px;
    cursor: pointer;
    justify-content: center;
}

.showScreensText {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #323130;
}

/* Heatmap screen navigator end */

.heatmapContainer.appHeatmapContainer .heatmapFooter{
    margin-top: auto;
}
.homepageHeader {
    border: none;
    box-sizing: content-box;
    padding-right: 0;
    padding-left: 0;
    width: unset;
}

.centered,
.homepageHeader {
    max-width: 1340px;
    margin: 0 auto;
}

.homepage img {
    display: inline-block;
    width: 100%;
}

.homepage .banner {
    padding: 110px 80px;
    background:
        linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #fdfeff 0%, #f0f8ff 100%), #ffffff;
}

.banner .centered,
.valueProp {
    display: flex;
    align-items: center;
}

.bannerText:not(.newHomepage .bannerText) {
    width: 360px;
    flex: 1 0 auto;
}

.bannerTitle {
    font-size: 40px;
    line-height: 1.2em;
    margin-bottom: 24px;
}

.bannerDescription {
    font-size: 18px;
    line-height: 1.2em;
    margin-bottom: 60px;
}

.bannerButtons .liveDemoButton {
    color: #0078d7;
    border-color: #0078d7;
    background-color: transparent;
    margin-left: 16px;
}

.bannerButtons .liveDemoButton:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.jumplinks {
    width: max-content;
    padding: 20px 0 40px;
}

.jumplink,
.jumplink > * {
    display: inline-block;
    color: black;
    font-size: 14px;
    line-height: 19px;
    text-transform: uppercase;
    vertical-align: middle;
}

.jumplink:focus-visible {
    outline: 3px solid;
}

.jumplinkIcon {
    margin-right: 10px;
}

.jumplink:not(:last-child) {
    margin-right: 48px;
}

.valueProp {
    padding: 40px 0;
    cursor: default;
}

.valueProp:nth-child(2n) {
    flex-direction: row-reverse;
}

.valueProp > * {
    width: 50%;
}

.valueTextWrapper {
    display: flex;
    color: black;
    margin-right: 20px;
    flex: 1;
}

.valueProp:nth-child(2n + 1) .valueTextWrapper {
    justify-content: flex-end;
    margin-left: 20px;
    margin-right: 0;
}

.valueImg {
    justify-self: center;
}

.valueImg img {
    max-width: 610px;
    display: block;
    margin: 0 auto;
}

.valueText {
    max-width: 470px;
}

.valueTitle {
    margin-top: 16px;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
}

.valueSubtitle {
    margin-top: 8px;
    font-size: 18px;
    line-height: 28px;
    color: #737373;
}

.valueDescription {
    margin-top: 16px;
    font-size: 18px;
    line-height: 28px;
}

.clarityVideo {
    margin: 40px auto;
}

.clarityVideo .videoTitle {
    text-align: center;
    font-size: 32px;
    line-height: 42px;
    margin: 40px 0;
    font-weight: 600;
}

.clarityVideo iframe {
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

.clarityVideoWrapper {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    max-height: 475px;
}

.highlightedFaqs {
    background-color: #faf9f8;
    padding: 24px 16px;
    margin-bottom: 80px;
    margin-top: 40px;
}

.highlightedFaq {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.highlightedFaqsTitle {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
}

.seeAllFAQ {
    font-size: 14px;
}

.seeAllLink:focus-visible {
    outline: 3px solid;
}

.seeAllLink {
    color: #3a6be4;
}

.faqHeader {
    padding: 12px;
    font-weight: 600;
    color: #323130;
    cursor: pointer;
}

.faqHeader > * {
    display: inline-block;
}

.faqHeader .faqQuestion {
    margin-left: 12px;
}

.faqAnswer {
    padding: 12px;
    padding-left: 37px;
}

.getClarity {
    padding: 136px 0;
    background: linear-gradient(255.81deg, #55adff -6.3%, #3a6be4 105.73%), #3a6be4;
    color: white;
    text-align: center;
}

.getClarity button {
    color: #3a6be4;
    border-color: #fff;
    border-radius: 2px;
}

.getClarity .centered {
    max-width: 350px;
}

.getClarityTitle {
    font-size: 34px;
    line-height: 40px;
    margin-bottom: 26px;
}

.getClarityText {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 26px;
}

.localizationDropdown {
    width: 110px;
    margin-right: 16px;
    margin-left: 24px;
}

.languageDropdownDivider {
    margin-left: 8px;
}

.localizationMenuDropdown {
    margin-bottom: 16px;
}

.darkHeader .localizationDropdown .ms-Dropdown:focus i,
.darkHeader .localizationDropdown .ms-Dropdown:focus span {
    color: white;
}

.localizationDropdown .ms-Dropdown:focus i,
.localizationDropdown .ms-Dropdown:focus span {
    color: black;
}

.myProjectsLoading {
    width: 180px;
    height: 72px;
}

.newHomepage .banner .newHeader .ms-Dropdown-title,
.homepageHeader .ms-Dropdown-title {
    border-width: 0;
    border-radius: 0;
}

.newHomepage .banner .newHeader .ms-Dropdown:hover {
    background-color: #106ebe;
}

.homepageHeader .ms-Dropdown-title:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.newHomepage .banner .newHeader .ms-Dropdown:hover i,
.newHomepage .banner .newHeader .ms-Dropdown:hover span {
    background: transparent;
    color: white;
}

.goToProjectsRow {
    border-top: 1px solid #edebe9;
    padding: 8px;
    cursor: pointer;
}

.header .projectsButton .ms-Button-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: normal;
}

@media only screen and (min-width: 1660px) {
    .homepageHeader.stickyHeader {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media only screen and (max-width: 1660px) {
    .homepageHeader,
    .valueProps {
        padding-left: 80px;
        padding-right: 80px;
        box-sizing: content-box;
    }

    .highlightedFaqs {
        margin-left: 80px;
        margin-right: 80px;
    }
}

@media only screen and (max-width: 798px) {
    .homepage .homepageHeader {
        padding-left: 0px;
        padding-right: 0px;
        justify-content: center;
    }
}

@media only screen and (max-width: 530px) {
    .homepage .banner,
    .homepage .homepageHeader,
    .homepage .valueProps {
        padding-left: 16px;
        padding-right: 16px;
    }

    .header .projectsButton .ms-Button-label {
        max-width: 100px;
    }

    .homepage .highlightedFaqs {
        margin-left: 26px;
        margin-right: 26px;
    }

    .homepage .bannerText {
        text-align: center;
        width: fit-content;
    }

    .homepage .bannerTitle {
        font-size: 32px;
        line-height: 40px;
    }

    .homepage .valueTitle,
    .homepage .clarityVideo .videoTitle {
        font-size: 24px;
        line-height: 32px;
    }

    .homepage .valueSubtitle {
        font-size: 16px;
        line-height: 22px;
    }
}

@media only screen and (max-width: 400px) {
    .homepage .banner,
    .homepage .homepageHeader,
    .homepage .valueProps {
        padding-left: 8px;
        padding-right: 8px;
    }
    .header .projectsButton .ms-Button-label {
        max-width: 70px;
    }
}

/* NEW HOMEPAGE */

.newHomepage {
    overflow: hidden;
}

.newHomepage .banner {
    height: calc(51vw + 397px);
    min-height: 1140px;
}

.banner.updatedHomePage {
    height: calc(57vw + 397px);
    min-height: 1340px;
}

.newHomepage .bannerShape {
    width: 100%;
    height: calc(51vw + 397px);
    position: absolute;
    background: #faf9f8;
    z-index: -1;
    overflow: hidden;
    min-height: 1140px;
}

.banner.updatedHomePage .bannerShape {
    height: calc(57vw + 397px);
    min-height: 1340px;
}

.newHomepage .bannerShape > svg {
    width: 100%;
    height: 55vw;
    min-width: 1600px;
    min-height: 880px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -3px;
}

.newHomepage .banner .newHeader {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.newHomepage .banner .newHeader:not(.darkHeader) {
    background-color: white;
}

.newHomepage .bannerContent {
    height: 50vw;
    min-height: 800px;
    color: white;
}

.newHomepage .bannerTextArea {
    max-width: 823px;
    margin: 0 auto;
    padding-top: calc(17vw - 149px);
}

.newHomepage .bannerTitle {
    font-size: 48px;
    line-height: 52px;
}

.bannerTitleIcon {
    margin-right: 10px;
}

.newHomepage .bannerText {
    font-size: 22px;
    line-height: 30px;
    margin: 36px 0;
}

.newHomepage .pageBannerFeatures {
    margin-bottom: 50px;
}

.newHomepage .pageBannerFeature {
    color: white;
}

.newHomepage .bannerTextArea .ms-Button--default {
    border: none;
    color: #3a6be4;
    margin-right: 12px;
}

.newHomepage .bannerTextArea .ms-Button--primary {
    border-color: white;
    background: transparent;
}

.newHomepage .bannerTextArea .ms-Button--primary:hover {
    background: rgba(0, 0, 0, 0.05);
}

.newHomepage .swoosh {
    position: absolute;
    top: calc(20vw - 446px);
    right: calc(79vw - 1557px);
}

.newHomepage .narrowSwoosh {
    position: absolute;
    width: 100%;
    height: 164vw;
    top: calc(-149vw + 729px);
    right: 50%;
    transform: translateX(50%);
}

.newHomepage .narrowSwoosh svg {
    height: 100%;
    min-width: 600px;
    min-height: 984px;
}

.newHomepage:not(.narrowPage) .phoneIllustration {
    position: absolute;
    left: 0;
    top: 192px;
    max-width: 38%;
}

.newHomepage .laptopIllustration {
    position: absolute;
    max-width: 38%;
    top: -97px;
    right: 0;
}

.newHomepage .laptopIllustration > svg,
.newHomepage:not(.narrowPage) .phoneIllustration > svg,
.newHomepage .narrowSwoosh > svg,
.newHomepage .freeIllustration svg {
    width: 100%;
}

.newHomepage.narrowPage .phoneIllustration > svg {
    display: block;
    margin: 0 auto;
}

.newHomepage .companiesUsingClarityTitle {
    width: 100%;
}

.newHomepage .companies {
    margin: 40px 0;
}

.newHomepage .learnMoreContainer {
    display: flex;
    justify-content: space-between;
}

.selectedTitleContainer span {
    padding: 8px;
}

.newHomepage .learnMore {
    font-size: 16px;
    line-height: 20px;
    text-decoration: underline;
    color: #005a9e;
}

.newHomepage .learnMore:focus-visible {
    outline: 2px solid #605e5c;
    outline-offset: 2px;
}

.newHomepage .subBannerContainer {
    padding-left: 80px;
    background: #deecf9;
    width: 100%;
}

.newHomepage .subBannerCentered {
    display: flex;
    align-items: center;
    max-width: 1512px;
    margin: 0 auto;
}

.subBannerTextArea {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.subBannerTextArea .landingSectionTitle {
    text-align: left;
    margin-bottom: 16px;
}

.subBannerTextArea .landingTemplatePageHeaderSubtitle {
    margin-bottom: 0;
}

.subBannerTextArea .ms-Button {
    max-width: 128px;
    border-color: #0078d4;
    color: #0066b4;
    margin-top: 48px;
}

.subBannerTextArea .topAction {
    margin-top: 8px;
}

.subBannerTextArea .bottomAction {
    margin-top: 40px;
}

.newHomepage .freeIllustration {
    flex: 1;
    margin-left: 152px;
}

.newHomepage .subBannerIllustration {
    flex: 1;
    min-height: 594px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
}

.newHomepage .subBannerIllustration.free {
    background-image: url("https://claritystatic.azureedge.net/images/PricingBanner.png");
}

.newHomepage .subBannerIllustration.extension {
    background-image: url("https://claritystatic.azureedge.net/images/extension.png");
}

.subBannerContainer.liveExtensionBanner {
    background-color: #ffffff;
}

.stickyHeader {
    position: -webkit-sticky;
    /* biome-ignore lint/suspicious/noDuplicateProperties: standard property after -webkit- vendor prefix fallback */
    position: sticky;
    top: 0;
    background: white;
    z-index: 1000;
    border-bottom: 1px solid lightgray;
}

.homepageHeader.stickyHeader {
    max-width: initial;
}

.newHomepage .platformsRatingWrapper {
    background-color: #faf9f8;
    width: 100%;
}

.newHomepage .platformsRatingContainer {
    display: flex;
    justify-content: space-around;
    max-width: 1165px;
    margin: 0 auto;
    width: 100%;
    background-color: #faf9f8;
    padding-bottom: 32px;
}

.platformsRatingContainer .platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    max-width: 244px;
}

.platformsRatingContainer .platform img {
    position: relative;
}

.platformsRatingContainer .capterraLogo {
    left: 90px;
}

.platformsRatingContainer .g2Logo {
    left: -168px;
}

.platform .ratingContainer {
    display: flex;
    margin: 26px 0 8px;
    align-items: baseline;
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;
    column-gap: 24px;
}

.ratingContainer .ms-Link {
    color: #106ebe;
}

.platform .ms-Rating-button {
    margin-right: 12px;
}

.platform .ms-Rating-star .ms-RatingStar-back {
    color: #a19f9d;
}

.platform .ms-Rating-star .ms-RatingStar-front {
    color: #f2c811;
}

@media only screen and (max-width: 1600px) {
    .newHomepage .bannerTextArea {
        padding-top: 109px;
    }
}

@media only screen and (min-width: 1101px) {
    .newHomepage .companiesUsingClarityContainer {
        padding-top: 0;
        margin-top: -25px;
        background-color: transparent;
    }
}

@media only screen and (max-width: 1100px) {
    .newHomepage .banner {
        height: fit-content;
        min-height: unset;
    }

    .banner.updatedHomePage .bannerShape,
    .newHomepage .bannerShape,
    .newHomepage .bannerContent {
        min-height: unset;
        height: calc(-30vw + 1150px);
    }

    .newHomepage .narrowSwoosh {
        top: unset;
        height: unset;
        bottom: 0;
        min-width: 600px;
        left: 50%;
        transform: translateX(-50%);
    }

    .newHomepage .phoneIllustration {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .newHomepage .subBannerContainer {
        padding: 80px;
    }
}

@media only screen and (max-width: 750px) {
    .platform .ratingContainer {
        font-size: 24px;
        column-gap: 14px;
    }

    .platformsRatingContainer .platform img {
        transform: scale(0.75);
    }

    .platformsRatingContainer .capterraLogo {
        left: 68px;
    }

    .platformsRatingContainer .g2Logo {
        left: -130px;
    }
}

.maxHomePageBanner .bannerContent {
    position: relative;
}

.maxHomePageBanner .bannerContent,
.maxHomePageBanner .bannerContent .pageBannerFeature {
    color: #343434;
}

.maxHomePageBanner .bannerContent .pageBannerFeature {
    font-weight: 600;
}

.maxHomePageBanner .bannerTextArea .ms-Button--primary {
    margin-right: 12px;
}

.maxHomePageBanner .bannerContent .bannerTextArea {
    padding-top: calc(5vw + 52px);
    padding-left: calc(5vw + 52px);
    max-width: 823px;
    margin: unset;
}

.maxBannerShape {
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
}

.maxBannerShape img {
    position: absolute;
    width: 100%;
    object-fit: contain;
    bottom: 0;
    right: 0;
}

#corkImg {
    top: 0;
    padding-top: 48px;
}

.maxHomePageBanner .bannerContainer {
    background: linear-gradient(90.33deg, #f1f1f1 -1.13%, #c2beb2 103.38%);
    position: relative;
}

.maxHomePageBanner .maxHomePageBanner .bannerTitle {
    font-weight: 350;
}

.maxHomePageBanner .landingSection.newCompaniesUsingClarity {
    background-color: #faf9f8;
    padding-top: 80px;
    position: relative;
}

.maxHomePageBanner #firstContentItem {
    border: 1px solid rgb(0, 120, 212);
    background-color: rgb(0, 120, 212);
}

@media only screen and (max-width: 500px) {
    .newHomepage .featureImage img {
        border-radius: 5px;
    }

    .newHomepage .platformsRatingContainer {
        flex-direction: column;
        row-gap: 52px;
        align-items: center;
    }

    .responsiveFeatures .featureImage img {
        border-radius: 5px;
    }

    .newHomepage .companiesUsingClarityBody {
        margin-top: -120px;
    }

    .newHomepage .companiesUsingClarityTitle {
        width: 240px;
        margin: 0 30px;
    }

    .newCompaniesUsingClarity .companiesUsingClarityTitle {
        width: unset;
    }
}

@media only screen and (max-width: 1200px) {
    .maxHomePageBanner .bannerContent .bannerTextArea {
        max-width: 1000px;
    }
}

@media only screen and (min-width: 2881px) {
    .maxHomePageBanner .bannerContent .bannerTextArea {
        margin-left: 391px;
        padding-left: 0;
    }
}

@media only screen and (max-width: 900px) {
    .newHomepage .bannerTextArea {
        padding-right: 30px;
        padding-left: 30px;
    }

    .newHomepage .bannerTitle {
        text-align: center;
        font-size: 42px;
        line-height: 52px;
    }

    .newHomepage .bannerText {
        font-size: 20px;
        line-height: 28px;
        margin: 24px 0 20px;
    }

    .newHomepage .pageBannerFeatures {
        width: fit-content;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 36px;
    }

    .newHomepage .buttonArea {
        text-align: center;
        position: static;
    }

    .newHomepage .featureImage img {
        border-radius: 10px;
    }

    .maxHomePageBanner .bannerContent .bannerTextArea {
        margin: 0 61px auto;
        padding-left: unset;
        padding-top: calc(5vw + 82px);
        max-width: 817px;
    }
    .jumplinkTitle {
        display: none;
    }

    .valueProps {
        margin: 40px 0 48px;
    }

    .valueProp {
        flex-wrap: wrap;
        padding: 0;
    }

    .valueProp > * {
        width: 100%;
        margin-bottom: 48px;
    }

    .valueImg {
        max-width: unset;
    }

    .valueProps .valueProp .valueTextWrapper {
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    .responsiveFeatures .featureImage img {
        border-radius: 10px;
    }
}

@media only screen and (max-width: 600px) {
    .maxHomePageBanner .bannerContent .bannerTextArea {
        margin: 0 61px 0 61px;
        padding-right: unset;
        padding-left: unset;
    }

    .maxHomePageBanner .bannerContainer .buttonArea {
        display: flex;
        justify-content: center;
    }

    .maxHomePageBanner .bannerTextArea {
        padding: 0 61px;
    }

    #desktopImg {
        padding-top: 510px;
    }

    .newHomepage .narrowSwoosh,
    .newHomepage .phoneIllustration {
        left: 0;
        transform: unset;
    }

    .newHomepage .pageBannerFeature {
        font-size: 19px;
        line-height: 22px;
        margin: 5px 0;
    }

    .newHomepage .companiesUsingClarityContainer {
        padding-bottom: 40px;
    }

    .newHomepage .companiesUsingClarityBody {
        margin: 0 auto;
    }
}

@media only screen and (max-width: 375px) {
    .maxHomePageBanner .bannerContent .bannerTextArea {
        margin: 0 41px 0 41px;
        padding-right: unset;
        padding-left: unset;
    }
}

.maxHomePageBanner .homepageHeader {
    max-width: unset;
}

@media only screen and (min-width: 1800px) {
    .maxHomePageBanner .header.newHeader.homepageHeader {
        padding-left: 10%;
        padding-right: 10%;
    }
}

@media only screen and (max-width: 700px) {
    .maxHomePageBanner .bannerContainer {
        height: 880px;
        max-height: 880px;
    }

    .newHeader.homepageHeader {
        padding: 8px;
    }

    .subBannerTextArea,
    .subBannerTextArea .landingSectionTitle,
    .subBannerTextArea .landingTemplatePageHeaderSubtitle {
        text-align: center;
        align-items: center;
    }

    .subBannerTextArea .ms-Button {
        align-self: center;
    }
}

/* features container */
.responsiveFeatures {
    overflow: hidden;
}

.responsiveFeatures .features {
    padding: 60px;
    max-width: 1776px;
    box-sizing: content-box;
    margin: 0 auto;
    position: relative;
}

.highlightContainer .responsiveFeatures .features {
    padding: 60px 0;
}

.responsiveFeatures .features .landingSectionTitle {
    text-align: start;
    margin-bottom: 40px;
}

.highlightContainer .responsiveFeatures .features .featuresArea .landingSectionTitle {
    margin-bottom: 40px;
    color: white;
    /* below should come from landingPageTitle */
    font-size: 32px;
    line-height: 42px;
    font-weight: 500;
}

/* featuresStack */
.featuresStack {
    text-align: center;
}

.featuresStack .featureImage {
    position: relative;
    width: 100%;
    margin-bottom: 44px;
}

.featuresStack img {
    width: 100%;
    max-width: 770px;
}

.featuresStack .featureTitle {
    font-size: 28px;
    line-height: 1.2em;
}

.featuresStack .featureText {
    margin: 24px auto 32px;
    font-size: 18px;
    line-height: 24px;
    max-width: 460px;
}

.featureStack:not(:last-child) {
    margin-bottom: 112px;
}

/* features */
.subBannerTextArea .landingSectionTitle {
    text-align: left;
    margin-bottom: 16px;
}

.responsiveFeatures .featuresArea {
    display: flex;
    width: 100%;
    color: black;
}

.responsiveFeatures .featuresArea .featureImage {
    flex: 1 1 1190px;
}

.responsiveFeatures .featuresArea img {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

.responsiveFeatures .featuresList {
    margin-right: 130px;
}

.responsiveFeatures .featuresListWithRightTiles {
    margin-left: 130px;
}

.responsiveFeatures .feature {
    padding: 24px;
    border: 1px solid #e1dfdd;
    border-radius: 4px;
    margin-top: 24px;
    cursor: pointer;
    width: 456px;
    min-height: 169px;
    display: flex;
    flex-direction: column;
}

.responsiveFeatures .feature.selected {
    background: #eff6fc;
    box-shadow:
        0px 0.6px 1.8px rgb(0 0 0 / 10%),
        0px 3.2px 7.2px rgb(0 0 0 / 13%);
}

.responsiveFeatures .learnMoreContainer {
    display: flex;
    justify-content: space-between;
    height: 20px;
    margin-top: auto;
}

.selectedTitleContainer {
    margin-left: auto;
}

.selectedTitleContainer span {
    padding: 8px;
}

/* common */
.responsiveFeatures .featureTitle {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

.responsiveFeatures .featureText {
    margin-top: 8px;
}

.responsiveFeatures .learnMore {
    font-size: 16px;
    line-height: 20px;
    text-decoration: underline;
    color: #0072c9;
}

.responsiveFeatures .featureImage img {
    border-radius: 21px;
    box-shadow:
        0 25.6px 57.6px 0 rgb(0 0 0 / 22%),
        0 4.8px 14.4px 0 rgb(0 0 0 / 18%);
}

.dashboardVertical {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dashboardContent {
    background-color: #FAFAFA;
    width: 100%;
    padding: 22px 48px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    color: #323130;
}

.dashboardScroll {
    display: flex;
    flex-direction: column;
}

.dashboardCard {
    background-color: white;
    box-shadow: 0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108);
}


:focus > .cardFocusContent {
    box-shadow: 0 0 1px 1px black;
}
.upsellDismissLink {
    color: #0078D4;
}

.bold {
    font-weight: 500;
}

.metricValue {
    line-height: 36px;
    font-size: 28px;
    font-weight: 500;
}

.hintButton * {
    color: #0078D4;
}

.hintButton {
    background-color: white;
    height: 21px;
    transform: translateY(1px);
}


.dashboardMasonryHorizontal {
    padding: 24px 0;
    width: 1368px;
}

.chartContentLoading {
    height: 350px;
}


.pieChart {
    width: 100%;
    height: 176px;
    display: flex;
    justify-content: center;
}


.pieToolTip {
    display: flex;
    padding: 10px;
}

.pieChartToolTipLegend {
    width: 4px;
    margin-right: 8px;
}

.pieToolTipLabel {
    font-size: 12px;
    line-height: 16px;
}

.topChart {
    padding: 9px 8px 0 0;
    font-size: 12px;
    line-height: 20px;
}

.topListGrid {
    display: grid;
    width: 100%;
    align-items: center;
    grid-auto-flow: row;
    padding-left: 16px;
}

.topListItemLabel {
    grid-column: span 4;
}

.topListBar {
    height: 16px;
    border-bottom: 16px solid #0078D4;
}

.topListCount {
    margin: 0 16px 0 12px;
}

.dashboardButton * {
    color: #0078D4;
}

.dashboardButtonLight {
    color: white;
}

.topListButtons {
    padding: 0 8px;
}

.topListButton {
    height: 28px;
}

.urlParamToggle {
    padding: 8px 16px 8px 16px;
}

.chartEmpty {
    padding: 24px 0 32px;
    text-align: center;
}

.distChart {
    display: flex;
    flex-direction: column;
    padding: 21px 0 24px 0;
}

.listChart {
    display: flex;
    flex-direction: column;
    padding-top: 21px;
}

.pieTable {
    display: grid;
    align-items: center;
    padding: 0px 16px;
    grid-template-columns: auto repeat(3, max-content);
}

.listTable {
    display: grid;
    align-items: center;
    padding: 0 16px 0;
    grid-template-columns: auto repeat(3, max-content);
    font-size: 12px;
}

.listTable h5 {
    font-weight: 600;
}

.listTableActionHeader {
    grid-column: span 3 / 6;
    text-align: center;
}

.listTableSessions {
    text-align: right;
    color: rgba(0, 0, 0, 0.6);
    margin-right: 10px;
}

.pieTable5Column {
    grid-template-columns: auto repeat(4, max-content);
}

.distTableItemBorder {
    grid-column: span 4;
    border-bottom: 1px solid #F4F4F4;
}

.distTableItemBorder5Column {
    grid-column: span 5;
}

.distTableSubItem {
    font-size: 12px;
    line-height: 14px;
}

.distTablePercentItem {
    margin-right: 24px;
    text-align: right;
}

.distTableSessions {
    margin-right: 39px;
    color: rgba(0, 0, 0, 0.6);
}

.distColorLegend {
    display: inline-block;
    margin-right: 8px;
    height: 12px;
    width: 12px;
}

.pieCalloutHost {
    display: inline-block;
    height: 177px;
    width: 177px;
}

.break-long-words {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.livePopupArea {
    padding: 20px 24px;
    width: 343px;
    color: #323130;
}

.livePopupTitle {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 12px;
}

.livePopupInfo {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 20px;
}

.livePopupButton {
    width: fit-content;
    align-self: end;
    background-color: #2F9596;
}

.livePopupButton:hover {
    background-color: #226a6b;
}

.livePopupTitle > span {
    margin-left: 4px;
}

.sessionsToolTip {
    padding: 12px;
}

.sessionToolTipTitle {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 12px;
}


@media only screen and (min-width: 1920px) {
    .dashboardMasonryHorizontal {
        width: 1826px;
    }
}

@media only screen and (min-width: 1440px) {
    .dashboardScroll {
        align-items: center;
    }
}

@media only screen and (max-width: 1440px) {
    .dashboardScroll {
        min-width: 1392px;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio : 4) {
    .dashboardScroll {
        min-width: unset;
    }

    .dashboardMasonryHorizontal {
        width: unset; 
        flex-direction: column;
    }
    .filtersActions #dashboard_FiltersButton .ms-Button-textContainer{
        display: none;
    }
}

/* General */
.centeredElement {
    margin: 0 auto;
    color: inherit;
}

.landingSection {
    padding-top: 80px;
    padding-bottom: 80px;
}

.rebrand .landingSectionTitle {
    background-image: linear-gradient(90deg, #8f58ab -8.93%, #3d60e0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 20px 0;
    width: 100%;
}

.landingSectionTitle {
    font-size: 32px;
    line-height: 42px;
    font-weight: 500;
    text-align: center;
}

.boldText {
    font-weight: 500;
}

.bolderText {
    font-weight: 600;
}

.focusSection {
    background:
        linear-gradient(42.14deg, #3a6ad8 0.64%, #3d7fdb 51.71%, #4094eb 98.69%), linear-gradient(42.14deg, #3c70e6 0.64%, #53a7fd 98.69%);
    color: #fff;
    text-align: center;
    width: 100%;
}

.focusSection h3 {
    color: #fff;
}

.focusSectionLight {
    background-color: #deecf9;
    color: #fff;
    text-align: center;
    width: 100%;
}

.flexContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.columnFlexContainer {
    flex-direction: column;
}

.mediumText {
    font-size: 16px;
    line-height: 22px;
}

.normalText {
    font-size: 18px;
    line-height: 24px;
}

/* Page Header */
.rebrand .landingTemplatePageHeader {
    background: linear-gradient(280.24deg, #a0d6ff 0%, #c2e3ff 36.46%, #dff0ff 50%, #f5fbff 77.08%);
}

.landingTemplatePageHeader {
    padding: 90px 10vw;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #fdfeff 0%, #f0f8ff 100%), #fff;
}

.landingTemplatePageHeader svg {
    display: inline-block;
    width: 44%;
    max-width: 800px;
}

.landingTemplatePageHeaderContent {
    width: 58%;
    max-width: 760px;
}

.animatedText {
    font-family: monospace;
    font-weight: 400;
}

.landingTemplatePageHeaderContent h1 {
    font-size: 42px;
    font-weight: 600;
    line-height: 52px;
    margin-bottom: 20px;
}

.landingTemplatePageHeaderContent h2 {
    font-size: 20px;
}

.landingTemplatePageHeaderSubtitle {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 18px;
}

.landingTemplatePageHeaderContent a,
.landingTemplatePageHeaderContent button {
    margin: 0;
    margin-right: 15px;
    width: max-content;
    min-width: 113px;
    text-align: center;
    height: 31px;
    border-radius: 2px;
}

.rebrand .landingTemplatePageHeaderContent a,
.rebrand .landingTemplatePageHeaderContent button {
    border-radius: 47px;
    background: #0078d4;
    box-shadow:
        0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13),
        0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1);
    min-width: 156px;
    min-height: 38px;
}

.rebrand .landingTemplatePageHeaderContent .extraButtons a,
.rebrand .landingTemplatePageHeaderContent .extraButtons button {
    border-radius: 47px;
    color: #0078d4;
    background-color: #fff;
    border: 1px solid #005493;

    box-shadow:
        0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13),
        0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1);
}

.landingTemplatePageHeaderContent a:focus-visible,
.landingTemplatePageHeaderContent button:focus-visible {
    outline: 2px solid #0078d4;
}

.landingTemplatePageHeaderContent a {
    background: #0078d4;
    color: white;
    padding: 5px 16px;
    font-weight: 600;
}

.landingActionButtons a:hover {
    background-color: #106ebe;
    border-color: #106ebe;
}

.extraButtons .ms-Button {
    border-color: #0078d4;
    color: #0078d4;
    min-width: 132px;
}

.extraButtons a {
    background-color: #fff;
    border: 1px solid #0078d4;
}

.extraButtons a:hover {
    background-color: #0000000d;
}

.landingTemplatePageHeaderBody {
    min-height: 320px;
}

.landingTemplatePageHeaderBody img {
    height: 320px;
}

.mobileFeaturesSectionRebrand,
.mobileWorksWithSectionRebrand {
    display: none;
}

.landingActionButtons {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.landingActionButtons .ms-Button {
    margin-top: 30px;
}

.landingActionButtons a {
    margin-top: 30px;
}

.pageBannerFeature {
    display: inline-flex;
    align-items: center;
    margin-right: 36px;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
}

.pageBannerFeatureIcons {
    display: inline-block;
    padding-left: 12px;
}

.pageBannerFeatureIconsList {
    display: flex;
    gap: 8px;
}

.pageBannerFeatureIconsList img {
    height: 24px;
}

.pageBannerFeature:last-child {
    margin-right: 0;
}

.pageBannerFeature i {
    margin-right: 4px;
}

/* Highlights */
.keyFeatures {
    margin: 80px 40px;
    font-size: 28px;
    line-height: 36px;
}

.keyFeatures i {
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 24px;
}

.keyFeatures h4 {
    width: 200px;
    color: #fff;
}

.highlightContainer {
    text-align: left;
}

.highlightContainer .highlight,
.highlightContainer .responsiveFeatures {
    padding: 60px 10vw;
}

.highlightContainer:nth-child(odd) .highlight {
    flex-direction: row-reverse;
}

.highlightContainer:nth-child(even) .highlight {
    color: #fff;
    padding: 110px 81px;
}

.rebrand .highlightContainer:nth-child(even) .highlightTextWrapper {
    padding: 0 40px;
}

.highlightContainer:nth-child(odd) .highlightTextWrapper,
.highlightContainer:nth-child(even) .highlightMedia {
    padding-right: 40px;
}

.highlightContainer:nth-child(odd) .highlightMedia,
.highlightContainer:nth-child(even) .highlightTextWrapper {
    padding-left: 40px;
}

.highlightContainer:nth-child(even) .highlight {
    margin: auto;
}

.rebrand .highlight {
    color: #323130;
}

.highlight {
    justify-content: center;
    cursor: default;
    color: white;
}

.highlightMedia {
    justify-self: center;
    width: 55%;
    max-width: 800px;
}

.highlightMedia > div {
    display: flex;
    align-items: center;
}

.highlightMedia img {
    width: 100%;
    display: block;
    margin: 0;
    border-radius: 10px;
    filter: drop-shadow(0px 4.8px 14.4px rgba(0, 0, 0, 0.18));
}

.landingSection .responsiveFeatures .featureImage img {
    border-radius: 10px;
    filter: drop-shadow(0px 4.8px 14.4px rgba(0, 0, 0, 0.18));
    box-shadow: none;
}

.rebrand .highlightContainer h4 {
    color: #323130;
}

.highlightContainer h4 {
    margin: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: white;
    text-align: center;
}

.rebrand .highlightTextWrapper {
    color: #323130;
}

.highlightTextWrapper {
    align-items: flex-start;
    color: white;
    flex: 1;
    max-width: 670px;
}

.highlightTextWrapper ul {
    padding: 20px 0px;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 17px;
    font-size: 16px;
    line-height: 26px;
}

.highlightTextWrapper .ms-Link {
    color: white;
}

.highlightTextWrapperDarkerText {
    color: black;
}

.rebrand .paragraph .highlightContainer h3 {
    font-size: 38px;
}

.highlightContainer h3 {
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    color: inherit;
    text-align: left;
}

.highlightText {
    font-size: 20px;
    line-height: 26px;
    margin-top: 8px;
    color: inherit;
}

.highlightsSubtitle {
    margin: 16px 0;
}

.rebrand .paragraph .highlightPointsList {
    list-style-type: none;
    margin: 32px 1px 4px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.highlightPointsList {
    margin: 16px;
}

.rebrand .paragraph .highlightPoint {
    font-size: 16px;
}

.highlightPoint {
    font-size: 20px;
    line-height: 26px;
    margin: 6px;
}

.rebrand .paragraph .highlightPoint span {
    display: block;
    font-weight: 600;
}

.highlightPoint span {
    font-weight: 700;
    margin-right: 5px;
}

.highlightLineSeparator {
    max-width: 1000px;
    width: 80%;
    height: 0;
    border: 3px solid #fff;
    opacity: 0.25;
    margin: 120px auto;
}

.largeRebrandedFaqs {
    padding: 0 95px;
    flex-direction: row;
}

.largeRebrandedFaqsContainer {
    width: 50%;
    row-gap: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.rebrand .landingFaqs {
    background-image: url("https://claritystatic.azureedge.net/images/faqBG1920.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: contain;
    flex-direction: column;
    justify-content: center;
    background-position: center center;
    min-height: 650px;
    padding: 20px;
}

.landingFaqs {
    flex-wrap: wrap;
    padding: 75px 22vw 75px 15vw;
    background-color: #faf9f8;
}

.rebrand .landingFaq {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.landingFaq {
    background-color: #fff;
    box-shadow:
        0 0.3px 0.9px rgba(0, 0, 0, 0.1),
        0 1.6px 3.6px rgba(0, 0, 0, 0.13);
    margin: 15px 0;
    padding: 10px 12px;
}

.landingFaqsTitle {
    margin: 75px 0;
    margin-right: 70px;
    width: 32%;
    max-width: 404px;
}

.rebrand .landingFaqsTitleLarge {
    margin: unset;
    max-width: 404px;
}

.landingFaqsTitle .mediumText {
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    margin-top: 10px;
    color: #72716f;
}

.landingFaqsTitle .faqIllustration {
    margin: 20px 0;
    max-width: 400px;
    width: 100%;
}

/* Benefits */
.mergeBenefitsandFeatures {
    flex-wrap: wrap;
    align-items: stretch;
}

.mergeBenefitsandFeatures .centeredElement {
    position: relative;
    flex: 1;
    min-width: 620px;
    min-height: 600px;
}

.verticalSeparator {
    width: 4px;
    opacity: 0.25;
    margin: 80px 0;
    background-color: #fff;
}

.benefitsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
}

.benefit {
    font-size: 24px;
    line-height: 32px;
    margin: 30px;
}

.benefit svg {
    margin: 25px;
}

/* FeaturesList */
.featuresContainer table {
    margin: 50px auto 0;
    font-weight: 500;
    max-width: 1180px;
    box-shadow:
        0px 0.6px 1.8px rgb(0 0 0 / 10%),
        0px 3.2px 7.2px rgb(0 0 0 / 13%);
    border-radius: 4px;
    overflow: hidden;
}

.featuresContainer tr > * {
    padding: 12px 24px;
}

.featuresContainer th {
    background-color: #f0eeee;
    color: #62605f;
}

.featuresContainer td {
    background-color: #fff;
    color: #484644;
}

.featuresContainer th:nth-child(even) {
    text-align: center;
    width: 100px;
}

.featuresContainer td:nth-child(odd) {
    text-align: left;
    width: 480px;
}

.standaloneFeaturesContainer td:nth-child(odd) {
    width: 100%;
}

.featuresContainer i {
    color: #55b17e;
}

/* Free Text */
.freeText {
    background-color: #faf9f8;
    padding-right: 10%;
    padding-left: 10%;
}

.freeText h3 {
    text-align: left;
    margin-bottom: 30px;
}

.freeText p {
    margin: 15px 0;
    font-size: 18px;
}

.landingBanner {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 320px;
    flex-grow: 1;
}

.gaBanner {
    background-image: url("https://claritystatic.azureedge.net/images/gaBanner.png");
}

.liveExtensionBanner {
    background-image: url("https://claritystatic.azureedge.net/images/liveExtensionBanner.png");
}

.shopifyBanner {
    background-image: url("https://claritystatic.azureedge.net/images/shopifyBanner.png");
}

.softrBanner {
    background-image: url("https://claritystatic.azureedge.net/images/softrBanner.png");
}

.bubbleBanner {
    background-image: url("https://claritystatic.azureedge.net/images/bubbleBanner.png");
}

.privacyBanner {
    background-image: url("https://claritystatic.azureedge.net/images/privacyBanner.png");
}

.faqIllustration {
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 320px;
    flex-grow: 1;
    background-image: url("https://claritystatic.azureedge.net/images/faqIllustration2.png");
}

.gaPanelLogo {
    background-image: url("/static/MicrosoftLogo.png");
    width: 20px;
    height: 20px;
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ClarityOffers */
.clarityOffersContainer {
    padding: 40px 14vw;
    align-items: flex-start;
}

.rebrand .clarityOfferInstance {
    max-width: calc(100% - 40px);
}

.clarityOfferInstance {
    width: 33%;
    max-width: 630px;
    margin: 20px;
}

.clarityOfferImage {
    max-width: 100%;
    max-height: 350px;
    min-width: 250px;
    width: auto;
    margin: 20px 0;
}

.denseOffers {
    min-width: 170px;
}

.clarityOfferText {
    min-height: 150px;
}

.clarityOfferText h3 {
    font-size: 32px;
    line-height: 42px;
    font-weight: 500;
    text-align: center;
}

.clarityOfferInstance p {
    width: 100%;
    max-width: 320px;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    margin: 10px auto 0;
}

.clarityOfferLearnMore {
    margin: 24px 0;
    color: #000;
    border: 1px solid #000;
    border-radius: 2px;
    padding: 6px 20px;
    font-size: 14px;
    line-height: 24px;
}

.clarityOfferLearnMore:hover {
    background-color: #0000000d;
    color: #000;
}

.privacyHighlightsButtonGrpContainer {
    margin: 15px 0 30px;
    display: flex;
    gap: 8px;
}

.privacyHighlightsButtonContainer {
    margin: 15px 0 30px;
}

.privacyHighlightsButton {
    font-size: 14px;
    line-height: 20px;
    padding: 12px;
    font-weight: 600;
    color: #020057;
    border-radius: 4px;
    border: 1px solid var(--Accent-Tropical-Indigo-Primary, #827dff);
    background: rgba(255, 255, 255, 0.3);
}

.privacyHighlightsButton:hover {
    background: #f5f5f5;
    text-decoration: none;
}
/* FAQ */
.landingFaqQuestion {
    justify-content: space-between;
    cursor: pointer;
}

.selectedQuestion i,
.landingFaqQuestion i:hover,
.selectedQuestion h1 {
    color: #0078d4;
}

.viewAllFAQ a {
    color: #0072c9;
}

.rebrand .landingFaqsContent {
    width: 100%;
    margin: 0 auto;
    display: flex;
    column-gap: 10px;
    max-width: 1300px;
}

.rebrand .landingFaqsContentRebradedLarge {
    width: 50%;
}

.landingFaqsContent {
    max-width: 720px;
    width: 42%;
    margin-left: 70px;
}

.rebrand .landingFaqsCol {
    width: 100%;
}

.rebrand .faqRow {
    display: flex;
    gap: 20px;
}

.viewAllFAQNewLarge {
    padding: 5px 12px;
    width: 248px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #827dff;
    border-radius: 4px;
}

.viewAllFAQNewLarge a {
    width: 224px;
    font-weight: 600;
    display: flex;
    color: #020057;
}

.viewAllFAQ {
    font-size: 12px;
    margin-top: 25px;
    text-decoration: underline;
}

.viewAllFAQ a:focus-visible,
.clarityOfferLearnMore:focus-visible {
    outline: 1px solid;
}

.rebrand .landingFaqHeader {
    padding: 0 12px;
}

.landingFaqHeader {
    padding: 12px;
    color: #323130;
    cursor: pointer;
}

.landingFaqHeader > * {
    display: inline-block;
}

.rebrand .faqAnswer {
    padding: 12px 0 0 20px;
}

.faqAnswer {
    padding: 12px 0;
}

.faqAnswer a {
    text-decoration: underline;
}

/* Testimonials */

.paginationIndicator {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #0078d4;
    margin-right: 12px;
}

.paginationIndicator.selected {
    width: 6px;
    height: 6px;
    border-radius: 6px;
}

.horizontalCenteredFlex {
    display: flex;
    justify-content: center;
    align-items: center;
}

button.paginationChevron {
    margin-right: 40px;
    padding: 22px;
}

.mobilePaginationChevron.previous,
.paginationChevron.previous {
    transform: rotate(180deg);
}

.mobilePaginationChevron {
    margin-left: auto;
    display: none;
}

.mobilePaginationChevron.previous {
    margin-left: 0;
    margin-right: auto;
}

.paginationChevron.previous {
    margin: 0 0 0 40px;
}

.mobilePaginationChevron svg,
.mobilePaginationChevron i,
.paginationChevron i,
.paginationChevron svg {
    width: 40px;
    height: 40px;
}

.mobilePaginationChevron path,
.paginationChevron path {
    fill: #a7a5f5;
}

.testimonialsContainer {
    overflow: hidden;
    padding: 96px 60px;
}

.testimonialsContainer h2 {
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(90deg, #8f58ab -8.93%, #3d60e0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.testimonialsWrapper {
    max-width: 1032px;
    min-height: 380px;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    gap: 120px;
}

.testimonialRebrand {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 264px;
    min-width: 180px;
    min-height: 136px;
}

.testimonialRebrand img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 48px;
}

.testimonialRebrand h3 {
    color: #605e5c;
    font-size: 16px;
}

.testimonialRebrand h3::after,
.testimonialRebrand h3::before {
    content: '"';
}

.testimonialRebrand p {
    align-self: flex-start;
    margin-top: 24px;
}

.whatUsersSay {
    background: #deecf9;
}

.whatUsersSayBody {
    overflow: hidden;
    position: relative;
    margin: auto;
}

.whatUsersSayBody .testimonialIllustration {
    position: absolute;
    width: 17%;
    height: auto;
}

.howToConnect {
    background: #deecf9;
}

.howToConnectBody {
    overflow: hidden;
    position: relative;
    margin: auto;
}

.howToConnectContainer {
    flex-wrap: wrap;
    max-width: 1000px;
    margin: auto;
}

.howToConnectImgContainer {
    margin: auto;
}

.howToConnectImg {
    height: 100px;
    margin-left: -13px;
}

.howToConnectCardHeadline {
    margin-top: 16px;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #323130;
}

.howToConnectCardDescription {
    color: #484644;
    margin-top: 12px;
    margin-bottom: 41px;
}

.howToConnectCardSignInText {
    font-size: 16px;
    line-height: 20px;
    text-decoration-line: underline;
    color: #0078d4;
}

.howToConnectCardContainer {
    display: flex;
    flex-flow: row nowrap;
    width: auto;
    height: auto;
    box-sizing: border-box;
}

.howToConnectCardNumber {
    width: 13px;
    height: 40px;
    left: 24px;
    top: 24px;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    color: #000000;
}

.alreadyACustomerContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0px;
    gap: 12px;
    text-align: center;
}

.alreadyACustomerSectionTitle {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    padding: 0px 10px;
}

.alreadyACustomerSectionSubtitle {
    font-size: 14px;
    padding: 0px 10px;
    max-width: 536px;
}

.alreadyACustomerActionButtons {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px 0px 0px;
    gap: 16px;
}

.alreadyACustomerActionButtons .linkButton {
    color: #0078d4;
    border: 1px solid #0078d4;
}

.whatUsersSayBody .testimonialIllustration:first-of-type {
    bottom: -4px;
    left: 1vw;
}

.whatUsersSayBody .testimonialIllustration:last-of-type {
    bottom: 169px;
    right: -30px;
    width: 12%;
}

.whatUsersSayBody .pagination i:not([data-icon-name="StatusCircleOuter"]) {
    color: #0066b4;
}

.whatUsersSayContainer {
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 40px auto;
}

.testimonial {
    background-color: white;
    border-radius: 5px;
    max-width: 240px;
    height: 260px;
    min-height: 260px;
    margin: 15px;
    padding: 41px 10px 15px 28px;
}

.howToConnectCard {
    background-color: white;
    border-radius: 8px;
    max-width: 300px;
    height: 300px;
    min-height: 300px;
    margin: 15px;
    padding: 24px;
}

.howToConnectCard.centered {
    text-align: center;
}

.howToConnect a {
    text-decoration-line: underline;
    color: #0072cc;
}

.howToConnect a:active,
.howToConnect a:hover {
    text-decoration: none;
    outline: 0;
}

.testimonial h3 {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    max-height: 200px;
    text-align: center;
}

.testimonialSource {
    margin: 10px;
}

.quotations {
    display: block;
    position: relative;
    left: -10px;
    top: -3px;
}

.testimonialSource img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: transparent;
    margin-bottom: 20px;
}

.testimonialSource p {
    color: #8a8886;
    font-size: 11px;
}

.pagination {
    margin-bottom: 5px;
}

.paginationChevron:hover {
    background-color: transparent;
}

.paginationButton {
    height: 12px;
    width: 12px;
    border: 1px solid #605e5c;
    margin: 4px;
    padding: 0;
    color: transparent;
    border-radius: 50%;
}

.selectedPaginationButton {
    color: #005a9e;
}

/* Companies Using Clarity */
.companiesUsingClarityContainer {
    background-color: #faf9f8;
}

.companiesUsingClarityBody {
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 10px;
}

.newCompaniesUsingClarity .companiesUsingClarityBody {
    max-width: 1150px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.companiesUsingClarityTitle {
    margin: 0;
}

.companies {
    align-items: flex-start;
    max-height: 160px;
    flex-wrap: wrap;
    min-width: 200px;
}

.newCompaniesUsingClarity .companies {
    column-gap: 20%;
    row-gap: 32px;
    margin: 40px 60px 0;
    max-height: unset;
    width: 100%;
}

.newCompaniesUsingClarity .companies div {
    min-width: 60px;
    width: 100%;
    max-width: 120px;
    height: 78px;
    overflow: hidden;
}

.newCompaniesUsingClarity .companies img {
    position: relative;
}

.company {
    border-left: 4px solid #0078d4;
    padding: 10px 20px;
}

/* Integrations */
.integrationsContainer {
    padding: 66px 15.7vw;
    display: flex;
    flex-direction: column;
    background-color: #deecf9;
    align-items: center;
}

.lightBackgroundOverride {
    background-color: white;
}

.IntegrationsSection {
    padding: 24px 0px;
}

.IntegrationsSection h2,
.integrationTitle {
    line-height: 40px;
    font-size: 32px;
    font-weight: 600;
    padding-top: 20px;
}

.integrationSubtitle {
    font-size: 20px;
    padding: 12px 0px;
}

.platformGridContainer {
    display: grid;
    gap: 40px;
    padding-top: 36px;
    grid-template-columns: repeat(auto-fill, 320px);
    min-width: 1400px;
}

.paddingTopOverride {
    padding-top: 40px;
}

.platformCard {
    width: 320px;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow:
        0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
        0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
}

.platformCard:hover {
    box-shadow:
        0px 4.8px 14.4px rgba(0, 0, 0, 0.18),
        0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}

.platformCardSmaller {
    width: 280px;
    height: 64px;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow:
        0px 0.3px 0.9px rgb(0 0 0 / 10%),
        0px 1.6px 3.6px rgb(0 0 0 / 13%);
    display: flex;
    flex-flow: row nowrap;
    box-sizing: border-box;
    align-items: center;
}

.platformCardSmaller img {
    width: 40px;
    margin-left: 12px;
}

.platformCardSmaller:hover {
    box-shadow:
        0px 4.8px 14.4px rgba(0, 0, 0, 0.18),
        0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}

.platformCardSmaller:focus-visible {
    outline: 2px solid #106ebe;
    outline-offset: 2px;
}

.platformLogo {
    height: 160px;
    border-bottom: 1px solid #edebe9;
    display: flex;
    justify-content: center;
    align-items: center;
}

.platformLogoSmaller {
    border-bottom: 1px solid #edebe9;
    justify-content: center;
    align-items: center;
}

.platformLogo .platformsIcons {
    position: absolute;
    overflow: hidden;
    transform-origin: top left;
    height: 100px;
    width: 110px;
    min-width: 100px;
}

.platformLogo .platformsIcons::after {
    content: url(https://claritystatic.azureedge.net/images/allIntegrationsIcons5.png);
    position: relative;
}

.platformLogo .abtastyIcon::after {
    top: -538px;
}

.platformLogo .bubbleIcon::after {
    left: -130px;
}

.platformLogo .GAIcon::after {
    left: -250px;
}

.platformLogo .GOIcon::after {
    left: -370px;
}

.platformLogo .optimizelyIcon::after {
    left: -500px;
}

.platformLogo .adobeIcon::after {
    top: -138px;
}

.platformLogo .clickFunnelsIcon::after {
    top: -138px;
    left: -122px;
}

.platformLogo .gatsbyIcon::after {
    top: -138px;
    left: -250px;
}

.platformLogo .gtagIcon::after {
    top: -138px;
    left: -385px;
}

.platformLogo .joomlaIcon::after {
    top: -138px;
    left: -515px;
}

.platformLogo .shopifyIcon::after {
    top: -275px;
}

.platformLogo .squarespaceIcon::after {
    top: -275px;
    left: -112px;
}

.platformLogo .unbounceIcon::after {
    top: -275px;
    left: -245px;
}

.platformLogo .webflowIcon::after {
    top: -275px;
    left: -370px;
}

.platformLogo .aitocIcon::after {
    top: -413px;
    left: -260px;
}

.platformLogo .analyzifyIcon::after {
    top: -413px;
    left: -130px;
}

.platformLogo .softrIcon::after {
    top: -412px;
}

.platformLogo .wordpressIcon::after {
    top: -413px;
    left: -390px;
}

.platformLogo .sharePointIcon::after {
    top: -538px;
    left: -130px;
}

.platformLogo .kameleoonIcon::after {
    top: -538px;
    left: -256px;
}

.platformLogo .wixIcon {
    width: 155px;
}

.platformLogo .wixIcon::after {
    top: -410px;
    left: -520px;
}

.platformLogo .weeblyIcon {
    width: 135px;
}

.platformLogo .weeblyIcon::after {
    top: -275px;
    left: -508px;
}

.platformLogo .zapierIcon::after {
    top: -538px;
    left: -390px;
}

.platformLogo .hubspotIcon::after {
    top: -530px;
    left: -520px;
}

.platformInfo {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 12px;
}

.platformName {
    color: #0078d4;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

.platformNameSmaller {
    color: rgba(0, 0, 0, 0.83);
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    margin-left: 12px;
}

.platformDescription {
    font-size: 12px;
    color: black;
}

@media only screen and (max-width: 1920px) {
    .integrationsContainer {
        padding: 66px 13vw;
    }
    .rebrand .landingFaqs {
        background-image: url("https://claritystatic.azureedge.net/images/faqBG1440.png");
    }
}

@media only screen and (max-width: 1660px) {
    .platformGridContainer {
        min-width: 1040px;
    }
}

@media only screen and (max-width: 1300px) {
    .platformGridContainer {
        min-width: 680px;
    }

    .rebrand .landingFaqs {
        padding: 40px;
    }
}

@media only screen and (max-width: 1000px) {
    .rebrand .landingFaqs {
        background-image: url("https://claritystatic.azureedge.net/images/faqBG1000.png");
    }
}

@media only screen and (max-width: 767px) {
    .platformGridContainer {
        min-width: 320px;
        justify-content: center;
    }

    .rebrand .landingFaqsContent {
        flex-wrap: wrap;
        padding: 0;
    }
}

@media only screen and (max-width: 440px) {
    .rebrand .landingFaqs {
        background-image: url("https://claritystatic.azureedge.net/images/faqBG440.png");
    }
}

@media only screen and (max-width: 320px) {
    .integrationTitle,
    .integrationSubtitle {
        padding: 0px 20px;
    }

    .platformCard {
        width: 280px;
        margin: auto;
    }
}

/* Footer */
.rebrand .focusSection.landingFooter {
    background: url("data:image/svg+xml,<svg width=\"1440\" height=\"401\" viewBox=\"0 0 1440 401\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1440 228.36H0V60.4003C57.6 55.9003 400.2 49.4043 542.4 52.4043C684.6 55.4043 950.546 27.1758 1070 27.1758C1242.2 27.1758 1340.4 61.4043 1440 48.4043V228.36Z\" fill=\"url%28%23paint0_linear_292_25%29\"/><path d=\"M1440 248.414H0V64.9138C57.6 60.4138 322.8 24.1762 465 27.1762C607.2 30.1762 934.146 59.9138 1053.6 59.9138C1225.8 59.9138 1340.4 61.4132 1440 48.4132V248.414Z\" fill=\"url%28%23paint1_linear_292_25%29\"/><path d=\"M1440 400.176H0V51.1758C57.6 46.6758 397.2 52.6758 539.4 55.6758C681.6 58.6758 935.346 67.1758 1054.8 67.1758C1227 67.1758 1340.4 59.6758 1440 46.6758V400.176Z\" fill=\"url%28%23paint2_linear_292_25%29\"/><defs><linearGradient id=\"paint0_linear_292_25\" x1=\"725.5\" y1=\"58.1763\" x2=\"1805.5\" y2=\"80.1764\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%2397C7FD\"/><stop offset=\"1\" stop-color=\"%23F3FCFF\"/></linearGradient><linearGradient id=\"paint1_linear_292_25\" x1=\"471\" y1=\"35.9043\" x2=\"1547.57\" y2=\"119.715\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23B8B6FF\"/><stop offset=\"1\" stop-color=\"%2383ADFF\"/></linearGradient><linearGradient id=\"paint2_linear_292_25\" x1=\"720\" y1=\"46.6758\" x2=\"720\" y2=\"260.176\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%235AB2F1\"/><stop offset=\"0.5625\" stop-color=\"%23308ADB\"/><stop offset=\"1\" stop-color=\"%23025EC4\"/></linearGradient></defs></svg>");
    background-repeat: no-repeat;
    color: #fff;
    padding: 110px 0 81px;
    background-size: cover;
}

.landingFooter {
    padding: 120px 0;
}

.landingFooter .centeredElement {
    padding: 0 40px;
}

.landingFooter button {
    color: #3a6be4;
    border: none;
    border-radius: 2px;
    margin: 10px;
}

.landingFooter button:hover {
    color: #3a6be4;
    background-color: #eee;
}

.landingFooter button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* biome-ignore lint/correctness/noUnknownMediaFeatureName: -ms-high-contrast is a css known media feature */
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .landingFooter button:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}

.landingFooterTitle {
    margin-bottom: 24px;
    font-size: 32px;
    line-height: 42px;
    font-weight: 500;
    text-align: center;
}

.landingFooterText {
    margin-bottom: 30px;
}

.gaLandingPanel .ms-Panel-footer {
    height: 64px;
    border-top: 1px solid #edebe9;
}

.gaLandingPanel .ms-Panel-footerInner {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 24px;
    padding: 0;
}

.gaLandingPanel .ms-Panel-footerInner .ms-Button:not(:last-child) {
    margin-right: 8px;
}

.gaLandingPanel .ms-Panel-header {
    margin-bottom: 26px;
}

.gaLandingPanelSection {
    border: none;
    border-top: 1px solid #b3b0ad;
    margin: 0;
    padding: 0;
}

.gaLandingPanelSection:not(:last-child) {
    margin-bottom: 14px;
}

.gaLandingPanelSection .sectionTitle {
    margin: 12px 0 16px 0;
    padding: 0;
    color: #323130;
    font-weight: 600;
    font-size: 18px;
    line-height: 21px;
    display: flex;
    align-items: center;
    width: 100%;
}

.gaLandingPanelSection .sectionTitle span {
    margin-left: 12px;
}

.gaLandingPanelSection .displayEmail,
.gaLandingPanelSection .name,
.gaLandingPanelSection .website,
.gaLandingPanelSection .siteCategory {
    min-height: 62px;
    font-weight: 500;
    padding-bottom: 12px;
}

.gaLandingPanelSection .ms-TextField {
    margin-top: 5px;
}

.gaLandingPanelSection .termsOfServiceContainer {
    display: flex;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 16px;
}

.gaLandingPanelSection .termsOfServiceContainer a {
    margin-left: 4px;
}

.gaLandingPanelSection .gaManualEnterContainer .collapsibleContentHeader {
    color: #0078d4;
    font-weight: 500;
}

.gaLandingPanel .gaSuccessWrapper .collapsibleContentTitle,
.gaLandingPanelSection .gaManualEnterContainer .collapsibleContentTitle {
    margin-left: 8px;
}

.gaLandingPanelSection .gaManualEnterContainer .gaManualEnter {
    margin-left: 26px;
}

.gaLandingPanelSection .gaManualEnterContainer .manualGAInputTextWrapper {
    height: unset;
}

.gaLandingPanelSection .gaManualEnterContainer .ms-TextField:not(:first-child) {
    margin-top: 17px;
    margin-bottom: 0;
}

.gaLandingPanelSection .gaManualEnterContainer .ms-TextField:first-child {
    margin-top: 12px;
    margin-bottom: 0;
}

.gaLandingPanelSection .cannotAddGAMessage {
    font-size: 13px;
    margin: 16px 0;
}

.gaLandingPanelSection .GaLoading {
    min-height: 150px;
}

.gaLandingPanelSection .noWebPropertiesFound {
    color: #a4262c;
    font-size: 12px;
    margin-top: 8px;
}

.gaLandingPanelSection .webPropertiesError {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: 600;
}

.gaLandingPanelSection .webPropertiesError span {
    max-width: 80%;
    font-weight: normal;
    margin-top: 8px;
}

.gaLandingPanelSection .webPropertiesError .ms-Link {
    margin-right: 4px;
}

.gtmSectionWrapper .collapsibleContentHeader {
    margin: 10px 0px;
    font-weight: 600;
    color: #0078d4;
    display: flex;
}

.gtmSectionWrapper .collapsibleContentHeader div {
    margin-left: 8px;
}

.gtmSectionWrapper .gtmContent {
    margin-left: 24px;
}

.gtmSectionWrapper .gtmSubHeader {
    margin-bottom: 24px;
}

.gtmSectionWrapper .gtmButtonMargin {
    margin-top: 8px;
}

.creatingAndLinkingContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.creatingAndLinkingContainer img {
    padding-bottom: 36px;
}

.creatingAndLinkingTitle {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 16px;
    align-self: flex-start;
}

.creatingAndLinkingContainer svg {
    margin-bottom: 36px;
}

.gaLandingPanel .gaSuccessWrapper .collapsibleContentHeader {
    font-weight: 500;
    display: flex;
    align-items: center;
}

.gaLandingPanel .gaSuccessWrapper {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}

.gaLandingPanel .gaSuccessWrapper .nextSteps {
    margin-top: 40px;
    font-weight: 600;
}

.gaLandingPanel .gaSuccessWrapper img {
    align-self: center;
    margin-top: 18px;
}

.manualInstallWrapper .collapsibleContentHeader {
    font-weight: 600;
    margin-bottom: 10px;
    padding-top: 8px;
    color: #0078d4;
    display: flex;
}

.manualInstallWrapper .manualInstallContent {
    margin-left: 24px;
}

.manualInstallWrapper .collapsibleContentHeader div {
    margin-left: 8px;
}

.manualInstallWrapper .manualInstallMessage {
    margin-bottom: 17px;
}

.gaPanelErrorWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gaPanelErrorWrapper div {
    margin-top: 16px;
    text-align: center;
}

.gaPanelErrorWrapper > div:first-of-type {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

.gaLandingPanelSection .gtmLabel {
    font-weight: 600;
    margin-right: 4px;
}

.gaLandingPanelSection .gtmSubHeader .ms-Link {
    margin: 0 4px;
}

.gaLandingPanelSection .privacyLink {
    text-decoration: underline;
}

.gaLandingPanelSection .privacyLink:hover {
    color: #005a9e;
}

.gaLandingPanelSection .privacyLink:focus {
    border: 1px solid #605e5c;
    box-sizing: border-box;
}

.rebrand .footer {
    padding: 0;
}

.rebrand .footerNavContainer {
    background: #eaeaff;
    color: #323130;
    padding: 80px 54px;
}

.rebrand .footerLink {
    color: #323130;
}

.rebrand ~ .footer {
    background-color: #eaeaff;
}

@media only screen and (min-width: 1920px) {
    .rebrand .landingFaqs {
        background-size: cover;
    }
}

@media only screen and (max-width: 1300px) {
    /* Benefits & FeatureList */
    .verticalSeparator {
        display: none;
    }

    .standaloneFeaturesContainer table {
        margin: 50px 60px 60px;
    }

    .mergeBenefitsandFeatures .featuresContainer table {
        width: 90%;
        max-width: 550px;
    }
}

@media only screen and (max-width: 1700px) {
    .rebrand .clarityOfferText {
        min-height: 110px;
    }

    .clarityOfferText {
        min-height: 180px;
    }
}

@media only screen and (max-width: 1400px) {
    .clarityOfferText {
        min-height: 130px;
    }
}

@media only screen and (max-width: 900px) {
    .testimonialsContainer {
        padding: 80px 38px;
    }

    .testimonialsContainer {
        padding: 80px 38px;
    }

    .paginationChevron {
        display: none;
    }

    .mobilePaginationChevron {
        display: block;
    }

    .howToConnectBody img.howToConnectImg {
        display: inherit;
    }

    .howToConnectBody img {
        display: none;
    }

    .whatUsersSayBody img {
        display: none;
    }

    /* Page Header */
    .landingTemplatePageHeader {
        padding: 110px 80px;
    }

    .landingTemplatePageHeaderContent {
        margin-right: 15px;
    }

    .landingTemplatePageHeaderContent h1 {
        font-size: 36px;
        line-height: 40px;
    }

    .landingTemplatePageHeader svg {
        margin-left: 15px;
    }

    .landingTemplatePageHeaderSubtitle,
    .pageHeaderFeature {
        font-size: 18px;
    }

    .landingTemplatePageHeaderSubtitle {
        margin-bottom: 16px;
    }

    .pageBannerFeature {
        display: block;
        margin: 8px 0;
        white-space: nowrap;
    }

    .landingTemplatePageHeaderContent button,
    .landingTemplatePageHeaderContent a {
        margin-right: 8px;
    }

    .landingActionButtons .ms-Button {
        margin-top: 24px;
    }

    /* Highlights */
    .highlightContainer:first-child {
        padding-top: 0;
    }

    .highlight {
        flex-wrap: wrap;
        padding: 0;
    }

    .highlightContainer h3 {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 12px;
        margin-top: 4px;
        text-align: center;
    }

    .highlightsSubtitle {
        margin: 14px 0;
    }

    .highlightPointsList {
        margin: 4px 0;
    }

    .highlightMedia {
        width: 100%;
    }

    .rebrand .highlightMedia img {
        width: 100%;
        min-width: 300px;
        max-width: 500px;
    }

    .rebrand .highlightContainer:nth-child(even) .highlight {
        padding: 20px;
    }

    .highlightMedia img {
        order: 2;
    }

    .highlightContainer:nth-child(odd) .highlightTextWrapper,
    .highlightContainer:nth-child(even) .highlightTextWrapper,
    .highlightContainer:nth-child(odd) .highlightMedia,
    .highlightContainer:nth-child(even) .highlightMedia {
        padding: 0;
    }

    .highlightTextWrapper {
        text-align: center;
        align-items: center;
        width: 90%;
        margin: auto;
        margin-top: 40px;
        max-width: 550px;
    }

    .highlightText,
    .highlightPoint {
        font-size: 18px;
        line-height: 24px;
        text-align: start;
    }

    /* Free Text */
    .freeText,
    .freeText h3 {
        text-align: center;
    }

    /* ClarityOffers */
    .clarityOfferInstance {
        width: 90%;
    }

    .clarityOffersContainer {
        flex-wrap: wrap;
    }

    .clarityOfferText {
        min-height: unset;
    }

    .clarityOfferInstance p {
        max-width: 450px;
    }

    .standaloneFeaturesContainer table {
        margin: 50px 30px 60px;
    }

    /* Companies Using Clarity */
    .companiesUsingClarityTitle {
        width: 100%;
        margin-bottom: 20px;
    }

    .companies {
        margin: 20px 0;
    }

    /* Benefits */
    .benefitsTitle {
        position: static;
    }

    /* FAQs */
    .landingFaqs {
        padding: 0 0 75px;
        flex-direction: column;
        justify-content: center;
    }

    .landingFaqsContent {
        max-width: 660px;
        width: 90%;
        padding: 0 10vw;
        margin: 0;
    }

    .landingFaqsTitle {
        font-size: 28px;
        line-height: 36px;
        margin: 70px 0 40px 0;
        width: 90%;
    }

    .landingFaqsTitle p {
        font-size: 18px;
        line-height: 28px;
    }

    .landingFaqsTitle .faqIllustration {
        order: -1;
    }

    /* Testimonials */
    .testimonial {
        width: 100%;
    }
}

@media only screen and (max-width: 700px) {
    /* Page Header */
    .landingTemplatePageHeader {
        padding: 70px 16px;
    }

    .landingTemplatePageHeaderContent a {
        margin: 30px auto;
    }

    .landingTemplatePageHeaderContent {
        text-align: center;
        width: fit-content;
        margin: 0;
        padding: 0 20px;
    }

    .landingTemplatePageHeaderSubtitle {
        text-align: left;
        max-width: 480px;
        margin: 0 auto;
        margin-bottom: 16px;
    }

    .pageBannerFeatures .pageBannerFeature {
        margin: 8px auto;
        width: 220px;
        text-align: left;
    }

    .landingTemplatePageHeaderContent button {
        margin: 20px auto;
    }

    .landingTemplatePageHeader .landingBanner,
    .landingTemplatePageHeader svg,
    .extraButtons {
        display: none;
    }
}

@media only screen and (max-width: 750px) {
    .newCompaniesUsingClarity .companies {
        margin: 28px 8% 0;
        column-gap: 17%;
    }

    .newCompaniesUsingClarity .companies div {
        max-width: 90px;
    }

    .newCompaniesUsingClarity .companies img {
        transform: scale(0.75);
    }
}

@media only screen and (max-width: 600px) {
    /* General */
    .landingSectionTitle {
        font-size: 28px;
        line-height: 36px;
    }

    /* FAQ */
    .landingFaqsTitle .faqIllustration {
        display: none;
    }

    .mergeBenefitsandFeatures .centeredElement {
        min-width: auto;
    }

    /* Features */
    .featuresContainer {
        margin: 0 20px;
    }

    /* Testimonials */
    .quote {
        width: 90%;
        height: 300px;
        min-height: 300px;
        margin: 10px;
        padding: 20px;
    }

    .companies {
        width: 40%;
        min-width: unset;
    }

    /* ClarityOffers */
    .clarityOfferInstance p {
        max-width: 315px;
    }

    /* Footer */
    .landingFooter {
        padding: 65px 10px;
    }
}

@media only screen and (max-width: 500px) {
    .newCompaniesUsingClarity .companies img {
        transform: scale(0.5);
    }

    .newCompaniesUsingClarity .companies {
        column-gap: 8%;
    }
}

@media only screen and (max-width: 400px) {
    /* Page Header & Highlights */
    .landingTemplatePageHeader,
    .landingSection {
        padding-left: 8px;
        padding-right: 8px;
    }

    .benefitsGrid {
        margin: 0;
    }

    .newCompaniesUsingClarity .companies {
        column-gap: 12px;
    }

    .rebrand .highlight {
        padding: 40px 20px;
    }
}

.freeFeaturesSectionRebrand {
    display: none;
}

/********************************************/
/***********      Footer     **************/
/********************************************/

.mobileFooter {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    min-width: 320px;
    height: 57px;
    border-top: 1px solid #EDEBE9;
}

.footerNavButton {
    text-align: center;
    width: 100%;
    height: 100%;
    margin: 8px;
}

.footerNavButton.selected div {
    font-weight: 600;
}

/********************************************/
/***********      Dashboard     **************/
/********************************************/

.projContent.mobile .fullScreenMessage.welcomeMessage {
    margin: 0 24px;
}

.dashboardContent.mobile {
    overflow-x: hidden;
    min-width: 352px;
    padding: unset;
}

.dashboardContent.mobile .dashboardMasonry {
    width: 100%;
    min-width: 288px;
    padding: 16px 0;
}

.dashboardContent.mobile .chartCard {
    width: 100%;
    min-width: 288px;
}

.mobile .frustrationArea .topChart {
    padding-right: 8px;
}

.dashboardContent.mobile .cardFocus {
    width: 100%;
    min-width: 320px;
}

.dashboardContent.mobile .dashboardColumn {
    width: 100%;
    margin-right: unset;
}

.dashboardContent.mobile .dashboardScroll {
    width: 100%;
    min-width: 288px;
    padding: 24px 16px;
}

.dashboardContent.mobile .cardFocusContent.metricSection.pageMetricSection,
.dashboardContent.mobile .cardFocusContent.metricSection.sessionMetricSection,
.dashboardContent.mobile .sessionsCard {
    width: 100%;
}

.dashboardContent.mobile .sessionMetricContent {
    width: 100%;
    display: block;
}

.mobile .sessionMetricContent .sessionMetricGroup:not(:last-child) {
    margin-bottom: 25px;
}

.dashboardContent.mobile .sessionMetricGroup:not(:last-child) {
    border: none;
}

.impressions.mobile {
    width: 100%;
}

.impressions.mobile .loadingContainer {
    margin: 8px 0;
}

.noRecordingsFound {
    margin-top: 8px;
}

.impressions.mobile .actionCardDetails {
    margin-bottom: 12px;
}

.mobile .card.impression.actionCard:first-child {
    margin-top: 8px;
}

.mobile .recordingsPivotTab {
    padding-top: 0;
}

.impressions.mobile .shareIcon i {
    font-size: 20px;
    margin-top: 6px;
}

.tabContentHeader.mobile.noHeader {
    display: none;
}

.mobile .sessionMetricSectionHeader {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

/********************************************/
/***********      Player     **************/
/********************************************/

.closeMobilePlayer {
    position: absolute;
    z-index: 100;
    width: fit-content;
    top: 0;
    right: 0;
    background-color: rgba(250, 250, 250, 0.1);
}

.closeMobilePlayer i {
    color: #212121;
    font-weight: 600;
}

.closeMobilePlayer .closeIcon {
    height: 45px;
    width: 45px;
}

.projContent.mobile .slider,
.fullscreenRecording .mobile .slider {
    margin: 0px;
    height: 8px;
}

.mobile .sliderSlice,
.mobile .progress {
    border: 0;
}

.projContent.mobile .videoControlPanel {
    width: 100%;
    padding: unset;
    border-bottom: solid 1px #EDEBE9;
    z-index: 101;
    position: absolute;
    bottom: 0;
}

.projContent.mobile .impressionList.scrollable.live {
    height: calc(100vh - 245px);
}

.fullscreenRecording .mobile .videoControlPanel {
    padding: unset;
}

.mobile .slider {
    background-color: rgb(210, 208, 206);
}

.projContent.mobile .scrubber,
.fullscreenRecording .mobile .scrubber {
    position: absolute;
    top: unset;
    width: unset;
    height: unset;
    border-radius: unset;
    cursor: pointer;
    border: none;
    z-index: 3;
}

.playbackContainer.mobile {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.overlayWrapper {
    width: 100%;
    height: 100%;
    position: relative;
    transition: "transform 0.2s";
}

.mobile .videoWrapper {
    height: 100%;
}

.mobileOpaqueCover {
    position: absolute;
    z-index: 10;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreenRecording .mobile .mobileOpaqueCover {
    margin-bottom: 100px;
}

.mobileOpaqueCover.stopped {
    background-color: #484644;
    opacity: 0.5;
}

.mobileReplayHeader {
    display: grid;
    position: absolute;
    right: 0;
    z-index: 100;
    bottom: 0;
    padding-bottom: 22%;
    margin-right: 20px;
    gap: 12px;
}

.mobileReplayHeader.landscape {
    display: grid;
    display: flex;
    position: absolute;
    padding-bottom: 10%;
    gap: 8px;
}

.mobileReplayHeader .favoriteIcon.ms-Button,
.mobileReplayHeader .shareIcon.ms-Button,
.mobileReplayHeader button {
    background-color: white;
    min-width: unset;
    height: 56px;
    width: 56px;
    border-radius: 40px;
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108);
}

.mobile .noFavorites {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
}

.mobileReplayHeader i {
    height: 20px;
    width: 20px;
    font-size: 20px;
    line-height: 20px;
}

.mobileControlers {
    position: absolute;
    display: flex;
    align-items: center;
    left: 50%;
    z-index: 101;
    transition: "transform 0.2s";
}

.mobileControlers .is-disabled.disabledVideoControl {
    background-color: transparent;
}

.mobileControlers .ms-Button--icon:hover {
    background-color: transparent;
}

#mobilePlayButton {
    align-items: center;
    height: 50px;
    width: 50px;
    margin: 0 21px;
}

#mobilePlayButton svg {
    top: -7px;
    left: -15px;
    position: relative;
}

.mobile .videoTimestamp {
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    margin-left: 12px;
    background-color: white;
    margin-right: 5px;
}

.panelOverlayTimeline {
    height: 100%;
    z-index: 100;
    width: 100%;
    position: absolute;
}

.mobileTimelineEvent.timeline {
    padding: 3px;
    margin-top: 0;
}

.mobileTimelineEvent.timeline strong {
    margin: 3px;
}

.rewindTenMobile {
    margin-left: 21px;
}

.forwardTenMobile {
    margin-right: 21px;
}

.rewindTenMobile:active,
.rewindTenMobile:hover,
.is-disabled.rewindTenMobile,
.forwardTenMobile:active,
.forwardTenMobile:hover,
.is-disabled.forwardTenMobile {
    background-color: transparent;
}


/********************************************/
/***********     Timeline      **************/
/********************************************/

.mobileTimeline {
    width: 100%;
    height: 75%;
    bottom: 0;
    z-index: 101;
    position: absolute;
    padding: 32px 24px 0;
    background: #FAF9F8;
    box-shadow: 0px -2px 4px rgb(0 0 0 / 4%);
    border-radius: 14px 14px 0px 0px;
    display: flex;
    flex-direction: column;
    transition: "transform 0.2s";
}

.mobileTimelineTitle {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}

.mobileTimelinePages {
    overflow: auto;
}

.mobileTimelinePage {
    background-color: white;
    padding: 8px 8px 10px 8px;
    margin-bottom: 12px;
    border: 1px solid #E1DFDD;
}

.mobileTimelineURL {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.mobileTimelineURL span {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.mobileTimelineURL.desktop span {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.eventTag {
    font-size: 12px;
    overflow: hidden;
    display: flex;
    padding-left: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobileTimelineURL strong {
    margin-right: 4px;
}

.mobileTimelineEvent {
    margin-top: 12px;
    padding: 3px 8px;
    margin-right: 8px;
    display: inline-block;
}

.mobileTimelineEvent strong {
    margin-left: 8px;
}

.closeTimeline {
    position: absolute;
    right: 10px;
    top: 10px;
}

.mobileTimelineDuration {
    background-color: #F3F2F1;
    border-radius: 2px;
    font-size: 12px;
    line-height: 16px;
    padding: 1px 8px 3px;
    font-weight: 600;
}

/********************************************/
/***********   Projects Page   **************/
/********************************************/

.projectGridContainer.mobile .projectCard {
    width: 100%;
    height: 100%;
    margin-bottom: 16px;
}

.mobile .projectActions {
    justify-content: end;
}

.projectGridContainer.mobile {
    display: block;
}

.firstExperienceWindow.mobile {
    width: 90%;
}

.firstExperienceWindow.mobile .confirmEmailContent:first-child {
    margin: 0 24px 80px 24px;
}

.firstExperienceWindow.mobile .mainContentInstall {
    width: 100%;
}

.firstExperienceWindow.mobile .confirmEmailContainerInstall .addProjHeaderInstall {
    margin-top: 134px;
    margin-top: 80px;
}

.sliderSlice.highlight {
    display: block;
}

@media only screen and (-webkit-min-device-pixel-ratio : 4) {
    .projContent.mobile .impressionList.scrollable.live {
        height: unset;
    }

    .impressionList.scrollable {
        overflow-y: unset;
    }

    .impressions > div:not(.moreDetailsPanelActions) {
        overflow: auto;
        padding: 4px 4px 0 4px;
    }
}

@keyframes swipDownAnimation {
    0% {
        top: 0px;
    }

    50% {
        top: 50%;
    }

    100% {
        top: 100%;
    }
}

@keyframes swipUpAnimation {
    0% {
        top: 0px;
    }

    50% {
        top: -50%;
    }

    100% {
        top: -100%;
    }
}
.projectsDeck .projHeader {
    padding: 6px 16px;
}

.projectsDeck .projHeader > button:first-child {
    margin-right: 12px;
}

.projectContent {
    background-color: #fafafa;
    overflow: auto;
    height: 100%;
    padding: 32px;
}

.projectContent table {
    overflow: visible;
    max-width: 1200px;
    background: #fff;
    margin: auto;
    width: 100%;
}

.projectContent th,
.projectContent td {
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #edebe9;
    border-top: 0;
    height: 42px;
    max-width: 313px;
    min-width: 50px;
    padding: 2px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projectContent td:nth-child(2) {
    width: 45%;
}

.projectContent td:first-child {
    width: 30%;
}

.projectContent tr:hover:nth-child(n + 2) {
    cursor: pointer;
    background-color: rgb(243, 242, 241);
}

td.centerdColumn {
    justify-content: center;
    display: flex;
    align-items: center;
}

.disabledRow:hover:nth-child(n + 2) {
    cursor: unset !important;
    background-color: unset !important;
}

.projectContent th {
    color: #323130;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    padding: 11px 12px;
}

.projectContent td button:first-child {
    width: 100%;
    display: flex;
}

.projectContent td button:hover,
.projectContent td button:active,
.projectContent td button:active:hover {
    text-decoration: none;
}

.projectContent .projectGridContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(276px, 0fr));
    grid-gap: 32px;
}

.listViewCell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    min-height: 20px;
    width: max-content;
}

.projectCard {
    background: #fff;
    box-shadow:
        0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
        0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    border-radius: 2px;
    width: 276px;
    height: 100%;
}

.projectCard:hover {
    box-shadow:
        0px 0.6px 1.8px rgba(0, 0, 0, 0.1),
        0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
}

.projectCard.isDisabled:hover {
    box-shadow:
        0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
        0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
}

.projectActions {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 12px;
    padding: 4px 0;
    border-top: 1px solid #edebe9;
    min-height: 42px;
}

.projectBody {
    color: #0078d4;
    width: 100%;
    font-weight: 600;
    font-size: 12px;
    padding: 0px 12px;
}

.projectBody > div {
    padding-top: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projectBody > div:last-child {
    padding-bottom: 24px;
}

.projectTitleContainer {
    display: flex;
    vertical-align: middle;
}

.projectTitleContainer > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projectTitleContainer i {
    font-size: 16px;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.projectIcon {
    background: url(https://claritystatic.azureedge.net/images/projectTypes.png) no-repeat 0 0;
    width: 16px;
    height: 16px;
    background-position-y: center;
    margin-right: 8px;
}

.mobileIcon {
    background-position-x: -24px;
}

.projectCard.isDisabled .projectActions i {
    color: gray;
}

.projectCard.isDisabled .projectBody {
    color: gray;
}

.projectCard.isDisabled .projectTitle {
    color: gray;
}

.projectCard.isDisabled .projectBody:hover {
    cursor: unset;
}

.verifyEmailModal {
    border-radius: 2px !important;
    min-width: 560px;
    min-height: 172px;
    padding: 24px;
}

.verifyEmailModal .modalHeader {
    margin: 0 0 20px;
}

.verifyEmailModal .verifyingStatusContainer {
    padding: 8px 12px;
    background-color: rgb(243, 242, 241);
    display: flex;
    min-height: 32px;
}

.verifyEmailModal .verifyingStatusContainer > span {
    margin-left: 8px;
    font-size: 12px;
}

.verifyEmailModal .verificationStatus {
    margin-top: 20px;
}

.verifyEmailModal .modalFooter {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.verifyEmailModal .modalFooter .ms-Button--primary {
    margin-right: 8px;
}

.verifyEmailLink {
    text-decoration: underline;
    font-size: 12px;
    margin-left: 4px;
}

.verifyCountDown {
    display: flex;
    flex-direction: row;
    column-gap: 8px;
}

.projectTitle {
    color: #323130;
}

.addNewProjectContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 121px;
}

.addNewProjectContainer:hover,
.projectBody:hover {
    cursor: pointer;
}

.addNewProjectText {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.addNewProjectIcon {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    width: 32px;
    height: 32px;
    color: #0078d4;
}

.welcomeBannerContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 100%;
}

.welcomeBannerDescription {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    margin: 16px 0px;
}

.projectModalContainer {
    width: 480px;
    overflow: hidden;
}

.ms-Dialog-main.projectModalContainer {
    border-radius: 2px;
    min-height: 0;
}

.addProjectContainer {
    padding: 0 16px 16px;
}

.addProjectContainer .name,
.addProjectContainer .website,
.addProjectContainer .siteCategory {
    min-height: 62px;
    font-weight: 500;
    padding-bottom: 12px;
}

.addProjectContainer > span {
    line-height: 20px;
}

.confirmEmailContent:first-child {
    display: flex;
    margin: 0 40px 70px 40px;
}

.promoEmailsCard .checkEmailModal,
.confirmEmailContent .checkEmailModal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 24px;
    margin-top: 70px;
}

.checkEmailModal .emailModalTitle {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}

.checkEmailModal .ms-Button--primary {
    max-width: fit-content;
}

.checkEmailModal .skipLink {
    margin-top: 24px;
    text-decoration: underline;
}

.deleteUETProjectWarning {
    margin-top: 16px;
}

.confirmEmailContainer .confirmEmailButton {
    color: white;
    border-color: #0078d7;
    background-color: #0078d7;
}

.addProjectButtonContainer,
.deleteProjectButtonContainer {
    display: flex;
    justify-content: center;
}

.addProjectButtonContainer {
    margin-top: 4px;
}

.addProjectButtonContainerInstall {
    margin-top: 26px;
    margin-bottom: 18px;
    display: flex;
}

.addProjectButtonContainerInstall .loadingContainer {
    max-width: 145px;
}

.confirmEmailContainerInstall {
    overflow: hidden;
}

.deleteProjectButtonContainer {
    margin-top: 16px;
}

.addProjectButtonContainer > *:first-child,
.addProjectButtonContainerInstall > *:first-child,
.deleteProjectButtonContainer > *:first-child {
    margin-right: 8px;
}

.newProjectForm {
    overflow: hidden;
}

.webContentPivot {
    width: 100%;
}

.appContentPivot {
    margin-top: 16px;
    color: #605e5c;
}

.howtoInstallContainer {
    margin-top: 57px;
}

.howtoInstallContainer.gtm {
    margin-top: 134px;
}

.howtoInstallContainer .ms-Spinner {
    align-items: end;
    flex-flow: nowrap;
    justify-content: start;
    margin: 24px 0 32px 0;
}

.howtoInstallContainer .ms-Spinner div:first-child {
    margin-right: 8px;
}

.addProjHeaderInstall {
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 32px;
    color: #323130;
}

.addProjHeaderInstall.confirmEmail {
    margin-top: 126px;
}

.projectModalContainerInstall {
    width: 880px;
    overflow: hidden;
}

.mainContentInstall {
    display: flex;
    width: 370px;
}

.mainContentInstall.projectTypeContainer {
    flex-direction: column;
}

.mainContentInstall.confirmEmail {
    display: block;
}

.projectTypeContainer .projectCreationPivots {
    margin-top: 26px;
}

.projectTypeContainer > span {
    color: #605e5c;
}

.howtoInstallPivot {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.howtoInstallPivot .ms-FocusZone {
    display: flex;
    justify-content: center;
}

.newProjectFormContainer {
    display: flex;
    padding: 0 40px 40px 48px;
}

.projectModalContainerInstall {
    width: min-content;
}

.sideContentInstall {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 95px 0 37px 42px;
}

.sideContentInstall img {
    height: 310px;
    width: 380px;
}

.sideContentInstall.gtm {
    margin-top: 95px;
}

.websiteLabel {
    font-weight: 600;
    margin-top: 16px;
}

.webContentLabel {
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 5px;
}

.webContentPivot .name {
    margin-top: 24px;
}

.sideContentInstall > * {
    justify-content: center;
    display: flex;
}

.sideContentInstall span {
    font-weight: 600;
    margin-bottom: 16px;
}

.promoEmailsCardContainer,
.firstExperience {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #e5e5e5;
}

.promoEmailsCard,
.firstExperienceWindow {
    width: min-content;
    height: min-content;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    box-shadow:
        0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
        0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
}

.promoEmailsCard {
    display: flex;
    padding: 0 40px 70px 40px;
}

.promoCardIllustration {
    margin: 95px 0 37px 42px;
    height: 310px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sideContentInstall.maxImage {
    margin: unset;
}

.firstRunSide.maxImage {
    height: 300px;
    width: 350px;
}

.firstRunSide.sideContentInstall.maxImage img {
    position: relative;
    height: fit-content;
    width: fit-content;
    margin-right: -90px;
    z-index: -1;
}

.sideContentInstall.maxImage {
    height: 440px;
    width: 400px;
}

.newProjectSide.maxImage img {
    height: 100%;
    width: 100%;
    margin-right: -78px;
}

.newProjectSide {
    position: relative;
    height: 310px;
    width: 380px;
}

.newProjectSide img {
    width: 100%;
    height: 100%;
    position: absolute;
}

.newProjectSide .fadeIn {
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.newProjectSide .fadeOut {
    animation: fadeOut 0.5s;
    opacity: 0;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Exit Survey */
.exitSurveyModal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 0px 24px;
    position: relative;
    width: 560px;
    background: #ffffff;
    box-shadow:
        0px 4.8px 14.4px rgba(0, 0, 0, 0.18),
        0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    border-radius: 2px;
    overflow-x: hidden;
}

.exitSurveyModal > .ms-Modal-scrollableContent {
    width: 100%;
    overflow-x: hidden;
}

.exitSurveyDeleteProjectTitle {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px 24px 20px;
    gap: 8px;
    width: 560px;
    height: 64px;
    background: #ffffff;
    order: 0;
    align-self: stretch;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #323130;
    margin: 0;
}

.exitSurveyDeleteProjectPrompt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 24px;
    height: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #323130;
    order: 1;
    align-self: stretch;
}

.exitSurveyContactSupport {
    margin-bottom: 0px;
}

.exitSurveyDeletionReasons {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px 24px;
    gap: 24px;
    order: 2;
}

.exitSurveyDeletionReason {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    width: 100%;
}

.exitSurveyDeletionReasonGroup {
    width: 100%;
}

.exitSurveyDeletionReasonCheckbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    height: 20px;
    border: 1px #323130;
    border-radius: 2px;
}

.exitSurveyDeletionReasonRow {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 8px;
    gap: 8px;
    width: 100%;
}

.exitSurveyDeletionAction {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #323130;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 36px;
}

.exitSurveyDeletionText {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exitSurveyTechnicalIssuesDropdown {
    box-sizing: border-box;
    background: #ffffff;
    border: 2px solid #0078d4;
    border-radius: 2px;
    width: 100%;
}

.exitSurveyTextBox {
    box-sizing: border-box;
    background: #ffffff;
    border: 1px #605e5c;
    border-radius: 2px;
    width: 100%;
}

.exitSurveyActionButtonsContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0px 24px;
    gap: 8px;
    height: 48px;
    bottom: 24px;
}

.exitSurveyDeleteButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 20px;
    width: 82px;
    height: 32px;
    background: #0078d4;
    border-radius: 2px;
}

.exitSurveyCloseButton {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 20px;
    width: 75px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #8a8886;
    border-radius: 2px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.exitSurveyLinkText {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-decoration-line: underline;
    color: #0078d4;
}

.exitSurveyTroubleshootInstallation {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.exitSurveyNoUnderline {
    text-decoration-line: none;
    /* biome-ignore lint/suspicious/noDuplicateProperties: intentional override for specific state */
    text-decoration-line: underline;
}

.exitSurveyNoUnderline:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    border-radius: 2px;
}

/*
 * Root Fluent UI v9 provider, used by the client-side render roots that mount one: the dashboard
 * (`#clarity-app-root`), the embed iframe (`#clarity-embed-root`), and the prerendered marketing
 * homepage (under a prerendered app root). `display: contents` keeps it out of
 * the layout so it generates no box of its own, preserving each root's existing flex/width chain.
 * Resetting the inherited properties stops the provider's default palette/typography from
 * cascading onto legacy v8 markup - the selectors are kept specific enough (id child, or body
 * child) to outrank Griffel's own single-class rules, which are injected later in the cascade, so
 * any replacement selector must keep specificity at least as high as `#id > .class` or
 * `body > .class`. Theme tokens are CSS custom properties, so they still reach every v9
 * descendant; only components that reference them are affected.
 *
 * Rules are ordered by ascending specificity (`body >` before `#id >`) to satisfy
 * no-descending-specificity; the roots target different elements, so order does not change which
 * declarations apply.
 *
 * Besides color/font-family/font-size, FluentProvider also sets the inherited `line-height`
 * (`lineHeightBase300`, i.e. 20px), `font-weight`, and `text-align`. Because the provider is
 * `display: contents` it still participates in inheritance, so those leak onto the legacy v8 tree
 * - notably `line-height: 20px` replacing the page's own `line-height: normal`, which shifts text
 * spacing (e.g. the homepage sign-in modal). The embed iframe and the homepage neutralize these
 * too, because their screenshot baselines predate any provider and must render as if none exists.
 * The dashboard root (`#clarity-app-root`) is deliberately left with only the base reset: its
 * baselines were captured with the provider already present, so they bake in the inherited
 * line-height/font-weight/text-align and must not shift.
 *
 * IMPORTANT - `:not([data-portal-node])` on the `body >` selector: Fluent copies a provider's
 * `className` onto the portal mount nodes it creates for popups (Combobox/Dropdown listboxes,
 * menus, tooltips), and those mount nodes are appended as *direct children of `body`* and tagged
 * `data-portal-node="true"`. So a bare `body > .fluentRootProvider` also matches every v9 popup
 * container and applies `display: contents` to it, which collapses the popup's box and breaks its
 * absolute/`transform` positioning and stacking (the popup ends up behind other content and its
 * options become unclickable). The `#id >` selectors never hit these (portal nodes are body
 * children, not id children); the `body >` selector must exclude them explicitly. The neutralizer
 * is only ever meant for the *root* provider, never for portal popups.
 *
 * `#adminRoot` is listed but currently matches nothing: the admin overlay renders no v9 component
 * (only v8 `@fluentui/react` and standalone `@fluentui/react-icons`), so it deliberately has no
 * provider. The selector is pre-wired so that wrapping admin in `ClarityFluentProvider` later is
 * all that is needed - without it, a future provider there would generate a box and restyle the
 * overlay. An unmatched selector costs nothing at runtime.
 *
 * This rule ships with `components/Shared/ClarityFluentProvider.tsx`, which imports it, so every
 * bundle that renders the provider also gets the rule.
 */

/*
 * Homepage root (`body >`, specificity 0,2,1): fully neutralized to match pre-provider baselines.
 * `:not([data-portal-node])` excludes v9 popup portal mount nodes, which are also body-level
 * `.fluentRootProvider` elements but must keep their own box for positioning (see note above).
 */
body > .fluentRootProvider:not([data-portal-node]) {
    display: contents;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
}

/* Dashboard / embed / admin roots (`#id >`, specificity 1,1,0): base neutralization. */
#clarity-app-root > .fluentRootProvider,
#clarity-embed-root > .fluentRootProvider,
#adminRoot > .fluentRootProvider {
    display: contents;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

/* Embed and the prerendered homepage predate their providers; preserve their inherited typography. */
#clarity-embed-root > .fluentRootProvider,
#clarity-app-root[data-prerendered="true"] > .fluentRootProvider {
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
}

#messageContainer {
    position: fixed;
    top: 8px;
    font-size: 18px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    z-index: 1000010;
    width: 100%;
    text-align: center;
}

.messageBar {
    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
    border-radius: 4px;
    padding: 10px 16px;
    background: #fff;
    pointer-events: all;
    margin: 8px;
}

.messageContent {
    font-size: 16px;
}

.successIcon {
    color: #2F8208;
}

.errorIcon {
    color: #ff4d4f;
}

.messageBar .messageIcon {
    margin-right: 3px;
    position: relative;
    top: 1px;
    vertical-align: -0.124em;
}

.messageAnimation-enter {
    opacity: 0;
    transform: translateY(-20px);
}

.messageAnimation-enter-active {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.messageAnimation-exit {
    opacity: 1;
    transform: translateY(0px);
}

.messageAnimation-exit-active {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.integrationsRebrand_integrationsContainer__QA1bA {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.integrationsRebrand_title__aQtkP {
    font-weight: 600;
    font-size: 36px;
    line-height: 48px;
    background: linear-gradient(90deg, #8f58ab -8.93%, #3d60e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}

.integrationsRebrand_integrationSubtitle__OTCNN {
    font-size: 20px;
    color: #161514;
    padding-top: 16px;
}

.integrationsRebrand_toolsToUseClarityWithContainer__N\+xt0 {
    background-image: url("https://claritystatic.azureedge.net/images/faqBG1920.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding-top: 60px;
}

.integrationsRebrand_IntegrationsSection__1sOQl {
    width: 100%;
    padding: 96px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.integrationsRebrand_integrationsToInstallClarityContainer__aPYL6 {
    background-image: url(https://claritystatic.azureedge.net/images/module-wave-L.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding-top: 60px;
}

.integrationsRebrand_wordpressTitle__zgZmX {
    font-weight: 600;
    font-size: 32px;
}

.integrationsRebrand_platformGrid3ColContainer__DP2Ce {
    display: grid;
    grid-template-columns: repeat(3, 360px);
    gap: 48px;
    justify-items: center;
    align-items: center;
}

.integrationsRebrand_platformGridContainer__xmGfs {
    display: grid;
    grid-template-columns: repeat(2, 400px);
    gap: 48px 80px;
    justify-items: center;
    align-items: center;
}

.integrationsRebrand_platformCard__xkysR {
    width: 400px;
    height: 160px;
    border-radius: 8px;
    padding: 36px 24px;
    gap: 36px;
    background-color: #ffffff;
    box-shadow:
        0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
        0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    display: flex;
    align-items: center;
}

.integrationsRebrand_platformCardCompact__Cj4Ir {
    width: 360px;
    height: 112px;
    gap: 32px;
    padding: 24px;
}

.integrationsRebrand_platformCard__xkysR:hover {
    box-shadow:
        0px 4.8px 14.4px rgba(0, 0, 0, 0.18),
        0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}

/* Dual-ring focus treatment — see fluentUIOverrides.css for the rationale. */
.integrationsRebrand_platformCard__xkysR:focus-visible,
.integrationsRebrand_platformCardCompact__Cj4Ir:focus-visible {
    outline: 2px solid #000;
    outline-offset: 1px;
    box-shadow: 0 0 0 5px #1aebff;
}

/* Bug 10698361 — in High Contrast the 1px focus outline on the integration
   ("Better Together") cards was thin and low-contrast against the page
   background. Thicken it and use the Highlight system color so the keyboard
   focus indicator is clearly visible in Aquatic/Desert. */
/* biome-ignore lint/correctness/noUnknownMediaFeatureName: -ms-high-contrast is a css known media feature */
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .integrationsRebrand_platformCard__xkysR:focus-visible,
    .integrationsRebrand_platformCardCompact__Cj4Ir:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* Bug 10698361 — the "Better Together" integration cards on the homepage render as
   `.platformLogo.v3` buttons, not `.platformCard`, so the rules above never matched
   them and they fell back to the UA focus ring (invisible in high contrast). Give
   them the same dual-ring treatment used for buttons in fluentUIOverrides.css. */
.integrationsRebrand_platformLogo__cCAQx:focus-visible {
    outline: 2px solid #000;
    outline-offset: 1px;
    box-shadow: 0 0 0 5px #1aebff;
}

/* biome-ignore lint/correctness/noUnknownMediaFeatureName: -ms-high-contrast is a css known media feature */
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .integrationsRebrand_platformLogo__cCAQx:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}

.integrationsRebrand_platformInfo__mceOy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.integrationsRebrand_platformName__3Emak {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #106ebe;
}

.integrationsRebrand_platformDescription__Xq0r7 {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #323130;
}

.integrationsRebrand_platformLogo__cCAQx {
    width: 64px;
    height: 64px;
}

.integrationsRebrand_platformsIcons__RGXNG {
    position: absolute;
    overflow: hidden;
    transform-origin: top left;
    height: 64px;
    width: 64px;
    min-width: 64px;
}

.integrationsRebrand_platformsIcons__RGXNG {
    background-image: url(https://claritystatic.azureedge.net/images/allIntegrationsIcons11.png);
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    background-size: 372px 482px;
}

.integrationsRebrand_platformLogo__cCAQx.integrationsRebrand_v3__-VW5h {
    width: 80px;
    height: 80px;
    border: 1px solid #eaeaff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.integrationsRebrand_platformLogo__cCAQx.integrationsRebrand_v3__-VW5h:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Bug 10698361 — in High Contrast the default focus outline on the homepage
   integration ("Better Together") logo buttons was thin and low-contrast.
   Thicken it and use the Highlight system color so the keyboard focus
   indicator is clearly visible in Aquatic/Desert. */
/* biome-ignore lint/correctness/noUnknownMediaFeatureName: -ms-high-contrast is a css known media feature */
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
    .integrationsRebrand_platformLogo__cCAQx.integrationsRebrand_v3__-VW5h:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_abtastyIcon__cHr6D {
    background-position: 5px -290px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_optimizelyIcon__\+Jv7K {
    background-position: -270px 0px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_kameleoonIcon__8Rc3p {
    background-position: -137px -290px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_zapierIcon__h4E8\+ {
    background-position: -211px -290px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_firebaseIcon__8W9QS {
    background-position: -280px -290px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_firebaseCrashlyticsIcon__tcW-d {
    background-position: 0px -415px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_amplitudeIcon__LiFO1 {
    background-position: -210px -354px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_mixpanelIcon__UTK-H {
    background-position: -140px -354px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_sentryIcon__K6AXZ {
    background-position: -295px -354px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_elevarIcon__Hy2Na {
    background-position: 0px 0px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_bubbleIcon__wz5n9 {
    background-position: -66px 5px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_GAIcon__5NsUj {
    background-position: -133px 0px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_GOIcon__y1vtC::after {
    left: -370px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_adobeIcon__MOAc5 {
    background-position: 5px -72px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_clickFunnelsIcon__oyBus {
    background-position: -70px -76px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_gatsbyIcon__1Fpza {
    background-position: -136px -72px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_gtagIcon__UVzXR {
    background-position: -212px -72px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_joomlaIcon__StZOe {
    background-position: -280px -70px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_shopifyIcon__inxYh {
    background-position: 8px -149px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_squarespaceIcon__bchYZ {
    background-position: -62px -152px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_unbounceIcon__PBmIt {
    background-position: -131px -149px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_webflowIcon__9nWc4 {
    background-position: -203px -148px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_aitocIcon__Ovcdl {
    background-position: -138px -220px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_analyzifyIcon__aayEF {
    background-position: -66px -225px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_softrIcon__QADhg {
    background-position: 0px -225px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_wordpressIcon__3Hp0U {
    background-position: -209px -222px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_gadsIcon__720g8 {
    background-position: 3px -354px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_msAdsIcon__KMz52 {
    background-position: -66px -354px;
}

/* Placeholder: reuse Microsoft Ads sprite position until Meta Ads icon is added */
.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_metaAdsIcon__nI5Pj {
    background-position: -66px -354px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_sharePointIcon__9mfaO {
    background-position: -64px -293px;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_wixIcon__x3D8U {
    background-image: url(https://claritystatic.azureedge.net/images/integrations_wixIcon.png);
    background-position: 0px 50%;
    background-size: 64px auto;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_blueTriangleIcon__RT-M\+ {
    background-image: url(https://claritystatic.azureedge.net/images/BlueTriangle.png);
    background-size: 64px auto;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_visualSPIcon__LDU8t {
    background-image: url(https://claritystatic.azureedge.net/images/integrations_visualSPIcon.png);
    background-size: 64px auto;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_userFeedbackIcon__g6oh8 {
    background-image: url(https://claritystatic.azureedge.net/images/integrations_userFeedbackIcon.png);
    background-size: 64px auto;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_weeblyIcon__w7Mu3 {
    background-image: url(https://claritystatic.azureedge.net/images/integrations_weeblyIcon.png);
    background-size: 64px auto;
    background-position: 0 50%;
}

.integrationsRebrand_platformLogo__cCAQx .integrationsRebrand_hubspotIcon__ZESZp {
    background-image: url(https://claritystatic.azureedge.net/images/hubspotIcon.png);
    background-size: 64px auto;
    background-position: 0 50%;
}

@media (max-width: 1300px) {
    .integrationsRebrand_platformGrid3ColContainer__DP2Ce {
        grid-template-columns: repeat(2, 360px);
    }
}

@media only screen and (max-width: 900px) {
    .integrationsRebrand_platformGrid3ColContainer__DP2Ce {
        grid-template-columns: repeat(1, 360px);
    }

    .integrationsRebrand_platformGridContainer__xmGfs {
        grid-template-columns: repeat(1, 400px);
    }

    .integrationsRebrand_title__aQtkP,
    .integrationsRebrand_integrationSubtitle__OTCNN {
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
    }
}

@media only screen and (max-width: 500px) {
    .integrationsRebrand_platformCard__xkysR,
    .integrationsRebrand_platformCardCompact__Cj4Ir {
        width: 350px;
    }

    .integrationsRebrand_platformGrid3ColContainer__DP2Ce,
    
    platformGridContainer {
        grid-template-columns: repeat(1, 350px);
    }
}

@media only screen and (max-width: 380px) {
    .integrationsRebrand_platformCard__xkysR,
    .integrationsRebrand_platformCardCompact__Cj4Ir {
        width: 280px;
    }

    .integrationsRebrand_platformCard__xkysR {
        height: 180px;
    }

    .integrationsRebrand_platformGrid3ColContainer__DP2Ce,
    
    platformGridContainer {
        grid-template-columns: repeat(1, 250px);
    }
}

.shared_hide__I24ob {
    display: none !important;
}

.shared_bold__Dlnqb {
    font-weight: 600;
}

.shared_normal__AGbmz {
    font-weight: 400;
}

.shared_pointer__CJfQS {
    cursor: pointer;
}

.shared_darkBlueFont__owkq3 {
    color: #004578;
}

.shared_darkGrayFontBold__bK3Bp {
    color: #1b1a19;
    font-weight: 600;
}

.shared_darkGrayFont__0lQKR {
    color: #323130;
}

.shared_lightGrayFont__IAlG3 {
    color: #605e5c;
}

.shared_linkColor__niUKx {
    color: #0078d4;
}

.shared_regularFont__8a4Vb {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.shared_flip__j5YnL {
    transform: rotate(180deg);
}

.shared_absolute__D6fiX {
    position: absolute;
}

.shared_absoluteTopRight__XjT6K {
    position: absolute;
    top: 16px;
    right: 16px;
}

.shared_flex__bW95Y {
    display: flex;
}

.shared_wrap__9gLie {
    flex-flow: wrap;
}

.shared_hidden__w7KpR {
    display: none;
}

.shared_visibilityHidden__tYFZV {
    visibility: hidden;
}

.shared_absolutePosition__wX8j\+ {
    position: absolute;
}

.shared_verticalFlex__rAS0M {
    flex-direction: column;
}

.shared_verticalCenteredFlex__Ehs7- {
    justify-content: center;
    align-items: center;
}

.shared_horizontalFlex__3OY6i {
    flex-direction: row;
}

.shared_horizontalCenteredFlex__RU29j {
    justify-content: center;
    align-items: center;
}

.shared_horizontalSpacedFlex__PWCyz {
    align-items: center;
    justify-content: space-between;
}

.shared_horizontalAlignCenteredFlex__12A87 {
    align-items: center;
}

.shared_alignEnd__wdHVN {
    align-items: flex-end;
}

.shared_rowReverseFlex__v-tpC {
    flex-direction: row-reverse;
}

.shared_shadowBold__dOyIg::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}

.shared_breakLongWords__79IOm {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.shared_tabContent__c7sZa {
    display: flex;
    overflow-y: hidden;
    flex: 1;
    position: relative;
}

.shared_projContent__nZv89,
.shared_tabContentWithFilter__opvdU {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    position: relative;
}

.shared_chartContentLoading__a2vWq {
    height: 350px;
}

.shared_capitalizeText__K4Itj {
    text-transform: capitalize;
}

.shared_fullHeight__sNI5B {
    height: 100%;
}

.shared_fullWidth__8U\+Sq {
    width: 100%;
}

.shared_forceFullWidth__VFFWX {
    width: 100% !important;
}

.shared_autoOverflow__Jgnu7 {
    overflow: auto;
}

.shared_hiddenOverflow__t0prM {
    overflow: hidden;
}

.shared_oneLineText__6z5KE {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared_filterButton__4bxHY i {
    height: 20px;
}

.shared_clearFiltersButton__-3\+No {
    background: transparent;
}

.shared_clearFiltersButton__-3\+No span {
    color: #424242;
}

.shared_clearFiltersButton__-3\+No path {
    fill: #424242;
}

.shared_horizontalDivider__hrc6y {
    width: 100%;
    height: 1px;
    background-color: #edebe9;
}

.shared_modalHeader__hR1UB {
    display: flex;
    font-weight: 600;
    font-size: 20px;
    margin: 16px 24px;
    justify-content: space-between;
}

.shared_modalHeader__hR1UB .shared_title__TeR3r {
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared_modalHeader__hR1UB .shared_title__TeR3r:focus {
    outline: none;
}

.shared_modalHeader__hR1UB .shared_title__TeR3r:focus-visible {
    outline: 3px solid;
}

.shared_removeElementContainer__AvErT {
    margin: 24px;
}

.shared_uploadScreenshot__WRVr6 button.is-disabled .ms-Button-label {
    color: #bebbb8;
}

.shared_uploadScreenshot__WRVr6 button.is-disabled {
    background: #e0e0e0;
}

.shared_errorMessage__PLChM {
    color: #a80000;
    font-size: 12px;
    line-height: 16px;
}

/* OVERRIDES */
.project .tabContentHeader {
    border-bottom: 0;
    padding: 12px 16px;
}

.scrolledDashboard .tabContentHeader {
    box-shadow:
        0px 0.6px 1.8px rgba(131, 126, 255, 0.1),
        0px 3.2px 7.2px rgba(131, 126, 255, 0.12);
    z-index: 3;
}

body a:hover {
    color: inherit;
}

.shared_flexSpacer__Ewb0O {
    flex: 1 1 auto;
}

.shared_loadingContainer__k7h6y {
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 1 1 auto;
}

.shared_linkDescriptionHidden__JhnBg {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.shared_visuallyHidden__6GmVQ {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.shared_shimmerElement__aQ-Xs {
    border-radius: 4px;
    background: linear-gradient(90deg, #f3f2f1 50%, #edebea, #f3f2f1 75%);
    background-size: 400px 100%;
    animation: shared_shimmer__1bsoT 2s infinite linear;
}

.shared_buttonShimmerR__gQEpS {
    border-radius: 47px;
}

.shared_textAlignRight__0IR84 {
    text-align: right;
}

@keyframes shared_shimmer__1bsoT {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}

.homepage_homePageContainer__gH7U8 {
    /* biome-ignore lint/complexity/noImportantStyles: Ensures the container height is set to auto with !important to override other styles */
    height: auto !important;
}

.homepage_homePageContainer__gH7U8 button.ms-Button--default,
.homepage_homePageContainer__gH7U8 a.ms-Button--default {
    border-radius: 4px;
    border: 1px solid #827dff;
    background: rgba(255, 255, 255);
    color: #020057;
    font-weight: 600;
}

.homepage_homePageContainer__gH7U8 button.ms-Button--default:focus,
.homepage_homePageContainer__gH7U8 a.ms-Button--default:focus,
.homepage_homePageContainer__gH7U8 button.ms-Button--default:hover,
.homepage_homePageContainer__gH7U8 a.ms-Button--default:hover {
    background: #f5f5f5;
    color: #020057;
}

.homepage_homepageBannerWrapper__BAnB\+ {
    height: 612px;
    padding: 26px 0;
    background: linear-gradient(280deg, #a0d6ff 0%, #c2e3ff 36.46%, #dff0ff 50%, #f5fbff 77.08%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.homepage_homepageGradientDesign__dotpE .homepage_homepageBannerWrapper__BAnB\+ {
    height: 535px;
}

.homepage_homepageBanner__SizYU {
    max-width: 1248px;
    box-sizing: content-box;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    gap: 77px;
}

.homepage_homepageBannerContent__Cq2DD {
}

.homepage_homepageRatingShimmer__aJIMJ {
    margin: 4px 0;
}

.homepage_homepageBannerContent__Cq2DD h1 {
    color: #353535;
    font-size: 58px;
    font-weight: 600;
    line-height: 116.5%;
    margin-bottom: 16px;
}

.homepage_homepageBannerContent__Cq2DD .homepage_everyClickTitle__uymwz {
    font-size: 57px;
}

.homepage_homepageBanner__SizYU .homepage_assumptionsTitle__--1UO {
    margin-bottom: 0;
}

.homepage_homepageBannerContent__Cq2DD h2 {
    color: #353535;
    font-size: 24px;
    font-weight: 600;
}

.homepage_desktopBannerImg__lqtZ\+ {
    max-height: 612px;
    width: 50%;
}

.homepage_mobileBannerImg__5q8js {
    display: none;
}

.homepage_homepageBannerContent__Cq2DD .homepage_pageBannerFeatures__liG0t,
.homepage_pageBannerFeatures__liG0t {
    margin: 38px 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.homepage_pageBannerFeature__-RaDv.homepage_v3__NRFX7 {
    font-size: 18px;
    font-weight: normal;
    margin-right: -12px;
    flex-direction: row-reverse;
}

.homepage_pageBannerFeature__-RaDv.homepage_v3__NRFX7 i {
    margin-left: 14px;
    display: flex;
    align-items: center;
}

.homepage_homepageBannerContent__Cq2DD .homepage_pageBannerFeature__-RaDv,
.homepage_pageBannerFeature__-RaDv {
    display: flex;
    align-items: center;
    color: #323130;
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    margin-right: 16px;
}

.homepage_pageBannerFeature__-RaDv i {
    height: 24px;
    margin-right: 8px;
}

.homepage_pageBannerFeatureIcons__O8uNR {
    display: inline-block;
    padding-left: 12px;
}

.homepage_pageBannerFeatureIconsList__Hy\+Q0 {
    display: flex;
    gap: 8px;
}

.homepage_pageBannerFeatureIconsList__Hy\+Q0 img {
    height: 24px;
}

.homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y a:last-child {
    color: #0078d4;
    border-color: #005493;
}

.homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y a:last-child:hover {
    background: #eff6fc;
}

.homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y a,
.homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y button,
.homepage_homepageFooter__9rpDq .homepage_buttonArea__s9n6Y button,
.homepage_homepageFooter__9rpDq .homepage_buttonArea__s9n6Y a {
    width: 156px;
    height: 38px;
    box-sizing: content-box;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 47px;
    padding: 5px 12px;
    box-shadow:
        0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13),
        0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1);
}

.homepage_homepageFooter__9rpDq .homepage_buttonArea__s9n6Y button:focus-visible,
.homepage_homepageFooter__9rpDq .homepage_buttonArea__s9n6Y a:focus-visible {
    outline: 2px solid #106ebe;
    outline-offset: 2px;
}

.homepage_homepageBannerContent__Cq2DD .homepage_ratingContainer__em9JY > div {
    height: 20px;
    margin-bottom: 4px;
}

.homepage_ratingContainer__em9JY button {
    padding: 0;
    height: 20px;
}

.homepage_platformContainer__AfZnE {
    padding: 20px 0;
    margin: 38px 38px 0 0;
}

.homepage_platformContainer__AfZnE:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

.homepage_homepageBannerContent__Cq2DD .homepage_platfromLogoContainer__t9vvy {
    width: 36px;
    height: 36px;
    overflow: hidden;
    margin-right: 16px;
}

.homepage_platfromLogoContainer__t9vvy > img {
    position: relative;
}

.homepage_platfromLogoContainer__t9vvy .homepage_capterraLogo__EDZff {
    left: -62px;
}

.homepage_platfromLogoContainer__t9vvy .homepage_g2Logo__XIkLY {
    left: 0;
}

.homepage_banner__ckZwc {
    padding: 80px 96px;
    align-items: center;
    justify-content: space-between;
    max-width: 1248px;
    margin: 0 auto;
    box-sizing: content-box;
}

.homepage_bannerContent__R2vSH {
    margin-right: 80px;
    min-width: 376px;
}

.homepage_banner__ckZwc h2 {
    color: #161514;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 16px;
}

.homepage_bannerContent__R2vSH div {
    color: #323130;
    font-size: 16px;
    margin-bottom: 32px;
}

.homepage_freeModuleContent__5CQ4R button {
    width: 122px;
    height: 22px;
    padding: 5px 12px;
    box-sizing: content-box;
}

.homepage_freeModule__6QE54 img {
    height: 238px;
    margin: 26px 76px;
}

.homepage_privacyModule__8LTuQ {
    background: url("data:image/svg+xml,<svg width=\"1440\" height=\"554\" viewBox=\"0 0 1440 554\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M701 430.5C292.774 429.224 10.8679 541.873 0 554V0C199.472 46.1666 463.924 136 701 136C965 136 1296.68 46.1666 1440 0V554C1364.15 500.6 1027.58 431.521 701 430.5Z\" fill=\"url%28%23paint0_linear_467_952%29\"/><defs><linearGradient id=\"paint0_linear_467_952\" x1=\"-9.68158e-06\" y1=\"0.638248\" x2=\"1413.1\" y2=\"616.373\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23F1F1FF\"/><stop offset=\"1\" stop-color=\"%23F9F0FF\"/></linearGradient></defs></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 38vw;
}

.homepage_industryTilesContainer__imZpq,
.homepage_privacyPointsContainer__ifuCN {
    gap: 24px;
}

.homepage_industryTilesContainer__imZpq {
    flex: 1 1 auto;
    max-width: 480px;
    min-width: 380px;
}

.homepage_industryTile__AOjtH,
.homepage_privacyPoint__9A-4e {
    align-items: center;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.3);
    padding: 9px 16px;
    gap: 16px;
}

.homepage_industryTile__AOjtH {
    padding: 0 16px 0 0;
    flex: 1 1 auto;
    gap: 0;
    cursor: pointer;
}

.homepage_industryTile__AOjtH > strong {
    font-size: 16px;
    line-height: 20px;
}

.homepage_industryTile__AOjtH button {
    margin-left: auto;
}

.homepage_industryTile__AOjtH a i {
    height: 24px;
    line-height: 24px;
}

.homepage_industryTile__AOjtH a svg {
    height: 24px;
    width: 24px;
}

.homepage_privacyPoint__9A-4e span {
    color: #161514;
    font-weight: 600;
    line-height: 20px;
}

.homepage_integrationsContainer__NmI1s {
    margin: 96px 0;
}

.homepage_integrationsContainer__NmI1s > h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #8f58ab -8.93%, #3d60e0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.homepage_integrationsContainer__NmI1s > span {
    max-width: 811px;
    align-self: center;
    text-align: center;
    font-size: 16px;
    color: #323130;
}

.homepage_integrationsContainer__NmI1s > p:last-of-type {
    width: 56%;
    font-size: 16px;
    color: #323130;
    margin: 0 auto;
}

.homepage_integrationsContainer__NmI1s > a {
    margin: auto;
}

.homepage_carouselContainerWrapper__y68MJ {
    overflow: hidden;
    position: relative;
    height: 250px;
}

.homepage_carouselContainerWrapper__y68MJ.homepage_companiesCarouselWrapper__FZ9SQ {
    height: 100px;
    margin: 40px 0;
    background: linear-gradient(270deg, #fff 0%, #f9f9ff 63.75%, #f1f1ff 100.52%);
}

.homepage_carouselContainerWrapper__y68MJ::after,
.homepage_carouselContainerWrapper__y68MJ::before {
    content: "";
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    height: 100%;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.homepage_carouselContainerWrapper__y68MJ::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.homepage_carouselContainerWrapper__y68MJ::before {
    left: 0;
    top: 0;
}

.homepage_carouselContainer__-ifji {
    position: absolute;
    left: 0;
    top: 0;
    height: 132px;
    width: 300%;
    background: url(https://claritystatic.azureedge.net/images/integrationsLogoInLineV2.png);
    margin: 60px 0;
    background-repeat: repeat-x;
    background-position-y: center;
    animation: homepage_autoScroll__nznYz 50s linear infinite;
    transform: translate3d(0, 0, 0);
}

.homepage_companiesCarouselWrapper__FZ9SQ .homepage_carouselContainer__-ifji {
    background: url(https://claritystatic.azureedge.net/images/companiesWithClarity.png);
    animation: unset;
    background-repeat: no-repeat;
    width: calc(100% + 100px);
    height: 100px;
    background-position-x: center;
    margin: 0;
    left: -100px;
}

.homepage_integrationWrapper__hKa2u {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 40px 0;
    flex-flow: wrap;
}

@keyframes homepage_autoScroll__nznYz {
    0% {
        left: 0;
    }
    100% {
        left: -200%;
    }
}

.homepage_homePageContainer__gH7U8 .focusSection.landingFooter {
    background: url("data:image/svg+xml,<svg width=\"1440\" height=\"401\" viewBox=\"0 0 1440 401\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1440 228.36H0V60.4003C57.6 55.9003 400.2 49.4043 542.4 52.4043C684.6 55.4043 950.546 27.1758 1070 27.1758C1242.2 27.1758 1340.4 61.4043 1440 48.4043V228.36Z\" fill=\"url%28%23paint0_linear_292_25%29\"/><path d=\"M1440 248.414H0V64.9138C57.6 60.4138 322.8 24.1762 465 27.1762C607.2 30.1762 934.146 59.9138 1053.6 59.9138C1225.8 59.9138 1340.4 61.4132 1440 48.4132V248.414Z\" fill=\"url%28%23paint1_linear_292_25%29\"/><path d=\"M1440 400.176H0V51.1758C57.6 46.6758 397.2 52.6758 539.4 55.6758C681.6 58.6758 935.346 67.1758 1054.8 67.1758C1227 67.1758 1340.4 59.6758 1440 46.6758V400.176Z\" fill=\"url%28%23paint2_linear_292_25%29\"/><defs><linearGradient id=\"paint0_linear_292_25\" x1=\"725.5\" y1=\"58.1763\" x2=\"1805.5\" y2=\"80.1764\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%2397C7FD\"/><stop offset=\"1\" stop-color=\"%23F3FCFF\"/></linearGradient><linearGradient id=\"paint1_linear_292_25\" x1=\"471\" y1=\"35.9043\" x2=\"1547.57\" y2=\"119.715\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23B8B6FF\"/><stop offset=\"1\" stop-color=\"%2383ADFF\"/></linearGradient><linearGradient id=\"paint2_linear_292_25\" x1=\"720\" y1=\"46.6758\" x2=\"720\" y2=\"260.176\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%235AB2F1\"/><stop offset=\"0.5625\" stop-color=\"%23308ADB\"/><stop offset=\"1\" stop-color=\"%23025EC4\"/></linearGradient></defs></svg>");
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 86px;
    padding-top: 152px;
}

.homepage_homePageContainer__gH7U8 .footer {
    padding: 0;
}

.homepage_featuresPivotItems__1azxB,
.homepage_featuresPivot__HsXU4 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.homepage_homepagePivot__llIJO {
    margin: 16px 0 68px 0;
    min-height: 672px;
}

.homepage_featuresPivot__HsXU4 .ms-Pivot {
    border-bottom: 4px solid #d9d9d9;
}

.homepage_featuresPivot__HsXU4 .ms-Pivot button::before {
    bottom: -4px;
    height: 6px;
}

.homepage_featuresPivot__HsXU4 .ms-Pivot-text {
    font-weight: 600;
}

.homepage_featuresPivotItems__1azxB h1 {
    color: #201f1e;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.homepage_featuresPivotItems__1azxB p {
    margin: 28px 0 16px 0;
}

.homepage_featuresPivotItems__1azxB img {
    max-width: 800px;
    margin-top: 28px;
    border-radius: 8px;
    box-shadow:
        0px 25.6px 57.6px 0px rgba(0, 0, 0, 0.22),
        0px 4.8px 14.4px 0px rgba(0, 0, 0, 0.18);
}

.homepage_featuresPivotItems__1azxB .ms-Button-label {
    text-transform: lowercase;
}

.homepage_featuresPivotItems__1azxB .ms-Button-label::first-letter {
    text-transform: capitalize;
}

.homepage_featuresPivot__HsXU4 button:last-child {
    margin-right: 0;
}

.homepage_industriesBanner__B90PD {
    position: relative;
    overflow: hidden;
}

.homepage_industriesBanner__B90PD .homepage_bannerContent__R2vSH {
    max-width: 46%;
}

.homepage_industriesBanner__B90PD .homepage_ellipse__gVIb8 {
    position: absolute;
    border-radius: 522px;
    background: linear-gradient(180deg, #f1f1ff 0%, #f9f0ff 100%);
    z-index: -1;
    right: -261px;
    bottom: 38px;
    width: 522px;
    height: 522px;
    flex-shrink: 0;
}

.homepage_testimonialsContainer__icaYb {
    overflow: hidden;
    padding: 96px 60px;
}

.homepage_testimonialsContainer__icaYb h2 {
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(90deg, #8f58ab -8.93%, #3d60e0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.homepage_testimonialsWrapper__uXDAn {
    max-width: 1032px;
    min-height: 380px;
    margin: 50px auto;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 120px;
}

.homepage_testimonial__WBpjH {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 264px;
    min-width: 180px;
    min-height: 136px;
}

.homepage_testimonial__WBpjH img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 48px;
}

.homepage_testimonial__WBpjH blockquote {
    color: #605e5c;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

.homepage_testimonial__WBpjH blockquote::after,
.homepage_testimonial__WBpjH blockquote::before {
    content: '"';
}

.homepage_testimonial__WBpjH p {
    align-self: flex-start;
    margin-top: 24px;
}

button.homepage_paginationChevron__4m3Yg {
    margin-right: 40px;
    padding: 22px;
}

.homepage_mobilePaginationChevron__c8xp0.homepage_previous__M\+82g,
.homepage_paginationChevron__4m3Yg.homepage_previous__M\+82g {
    transform: rotate(180deg);
}

.ms-Button.homepage_mobilePaginationChevron__c8xp0 {
    margin-left: auto;
    display: none;
}

.ms-Button.homepage_mobilePaginationChevron__c8xp0.homepage_v3__NRFX7 {
    display: block;
}

.homepage_mobilePaginationChevron__c8xp0.homepage_previous__M\+82g {
    margin-left: 0;
    margin-right: auto;
}

.homepage_paginationChevron__4m3Yg.homepage_previous__M\+82g {
    margin: 0 0 0 40px;
}

.homepage_mobilePaginationChevron__c8xp0 svg,
.homepage_mobilePaginationChevron__c8xp0 i,
.homepage_paginationChevron__4m3Yg i,
.homepage_paginationChevron__4m3Yg svg {
    width: 40px;
    height: 40px;
}

.homepage_mobilePaginationChevron__c8xp0 path,
.homepage_paginationChevron__4m3Yg path {
    fill: #605e5c;
}

.homepage_paginationIndicator__JmZt2 {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #0078d4;
    margin-right: 12px;
}

.homepage_paginationIndicator__JmZt2.homepage_selected__FK14q {
    width: 6px;
    height: 6px;
    border-radius: 6px;
}

@media screen and (prefers-contrast: more) {
    .homepage_paginationIndicator__JmZt2 {
        border: 2px solid black;
    }

    .homepage_paginationIndicator__JmZt2.homepage_selected__FK14q {
        width: 8px;
        height: 8px;
        border-radius: 8px;
    }
}

.homepage_homePageContainer__gH7U8 .footerLinksContainer {
    padding: 0 54px;
}

/* Bug 10698361 — the keyboard focus ring on the "Better Together" integration
   cards is not visible in high contrast. The card's own dual-ring / Highlight
   treatment lives with the card styles in integrationsRebrand.module.css
   (.platformLogo); this rule covers any other focusable child of the wrapper. */
@media (forced-colors: active) {
    .homepage_integrationWrapper__hKa2u button:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}

.homepage_footerContainer__iRMIu {
    background: url("data:image/svg+xml,<svg width=\"1440\" height=\"1279\" viewBox=\"0 0 1440 1279\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1440 7.41149V1279H0V25.5523C14.1706 26.6105 75.3065 30.1781 206.485 35.983C370.459 43.2391 405.548 36.4365 619.456 26.0058C833.365 15.5752 879.25 3.78343 1062.12 0.608876C1208.41 -1.93077 1375 4.08577 1440 7.41149Z\" fill=\"url%28%23paint0_linear_467_666%29\"/><defs><linearGradient id=\"paint0_linear_467_666\" x1=\"720\" y1=\"29.5\" x2=\"720\" y2=\"1488\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23EDF7FF\"/><stop offset=\"0.113453\" stop-color=\"%23F9FCFF\"/><stop offset=\"0.682292\" stop-color=\"%23F7FBFF\"/><stop offset=\"1\" stop-color=\"%23DDEFFF\"/></linearGradient></defs></svg>");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.homepage_footerContainer__iRMIu .homepage_buttonArea__s9n6Y {
    z-index: 1;
}

.homepage_sdkImage__12W6D {
    width: 500px;
    margin: 0 42px;
}

.homepage_sdkModuleContent__zEVC2 > div {
    margin-bottom: 16px;
}

.homepage_sdkModuleContent__zEVC2 > a {
    margin-top: 16px;
}

.homepage_sdkSupport__qfpd7 {
    margin-bottom: 32px;
    gap: 8px;
}

.homepage_sdkSupport__qfpd7 > strong {
    margin-right: 4px;
}

.homepage_extensionModuleContent__NmaBn {
    margin: 0 0 0 80px;
}

.homepage_extensionModuleContent__NmaBn > div {
    margin-bottom: 16px;
}

.homepage_extensionModuleContent__NmaBn > a {
    display: block;
}

.homepage_extensionModuleContent__NmaBn > a:last-of-type {
    margin-top: 32px;
    padding: 0 16px;
    max-width: 128px;
}

@media screen and (width >= 1000px) {
    .homepage_smallScreen__XY73k {
        display: none;
    }
}

@media screen and (width < 1000px) {
    .homepage_bigScreen__L-pz0 {
        display: none;
    }
}

@media screen and (width <= 760px) {
    .homepage_testimonialsWrapper__uXDAn .homepage_testimonial__WBpjH:nth-child(n + 2) {
        display: none;
    }
}

@media screen and (760px < width <= 1020px) {
    .homepage_testimonialsWrapper__uXDAn .homepage_testimonial__WBpjH:nth-child(n + 3) {
        display: none;
    }
    .homepage_testimonialControls__ykGMB .homepage_paginationIndicator__JmZt2:nth-child(n + 7) {
        display: none;
    }
}

@media screen and (width > 1020px) {
    .homepage_testimonialControls__ykGMB .homepage_paginationIndicator__JmZt2:nth-child(n + 5) {
        display: none;
    }
}

.homepage_learnMoreLink__qysjz {
    color: #0078d4;
}

@media screen and (prefers-contrast: more) {
    .homepage_learnMoreLink__qysjz:focus {
        border: 2px solid aqua;
        text-decoration: underline;
    }
}

@media only screen and (max-width: 1440px) {
    .homepage_homepageBannerWrapper__BAnB\+ {
        padding: 51px 48px;
    }

    .homepage_homepageBanner__SizYU {
        gap: 40px;
    }

    .homepage_bannerContent__R2vSH {
        margin-right: 40px;
    }

    .homepage_freeModule__6QE54 img {
        margin-right: 0;
        margin-left: 0;
    }
}

/*less than a 1000px (mobile screen)*/
@media only screen and (max-width: 1000px) {
    .homepage_homepageBannerWrapper__BAnB\+ {
        height: 883px;
        padding: 48px 20px 8px 20px;
    }

    .homepage_homepageBannerWrapper__BAnB\+.homepage_homepageGradientBannerWrapper__2zuAh {
        height: fit-content;
        padding: 51px 48px;
    }

    .homepage_homepageBanner__SizYU {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .homepage_homepageBanner__SizYU .homepage_desktopBannerImg__lqtZ\+ {
        display: none;
    }

    .homepage_mobileBannerImg__5q8js {
        display: block;
    }

    .homepage_homepageBannerContent__Cq2DD {
        text-align: center;
        align-items: center;
    }

    .homepage_pageBannerFeatures__liG0t {
        justify-content: left;
    }

    .homepage_pageBannerFeature__-RaDv.homepage_v3__NRFX7 {
        font-size: 16px;
    }

    .homepage_featuresPivotItems__1azxB {
        margin: 0 20px;
        text-align: center;
    }

    .homepage_featuresPivotItems__1azxB {
        margin-top: 80px;
    }

    .homepage_featuresPivotItems__1azxB > p {
        margin: 16px 0;
    }

    .homepage_featuresPivotItems__1azxB > img {
        width: 100%;
    }

    .homepage_freeModule__6QE54 {
        margin-top: 80px;
    }

    .homepage_banner__ckZwc,
    .homepage_banner__ckZwc {
        padding: 0 48px;
        flex-direction: column;
        align-items: center;
        gap: 80px;
    }

    .homepage_banner__ckZwc.homepage_ssrBanner__qRap6 {
        flex-direction: column;
        align-items: center;
    }

    .homepage_banner__ckZwc > img {
        display: none;
    }

    .homepage_homepageGradientDesign__dotpE .homepage_banner__ckZwc > img {
        display: block;
    }

    .homepage_bannerContent__R2vSH {
        text-align: center;
        margin-right: 0;
    }

    .homepage_integrationsContainer__NmI1s {
        margin: 80px 0;
    }

    .homepage_integrationsContainer__NmI1s > p:last-of-type,
    .homepage_integrationsContainer__NmI1s p {
        margin-right: 20px;
        margin-left: 20px;
    }

    .homepage_integrationsContainer__NmI1s > p:last-of-type {
        width: calc(100% - 20px);
    }

    .homepage_industryTilesContainer__imZpq {
        margin: 0;
        flex-direction: column;
    }

    .homepage_industriesBanner__B90PD .homepage_bannerContent__R2vSH {
        width: 100%;
        max-width: unset;
    }

    .homepage_companiesCarouselWrapper__FZ9SQ .homepage_carouselContainer__-ifji {
        animation: homepage_autoScroll__nznYz 30s linear infinite;
        background-repeat: repeat-x;
        width: 300%;
        background-position-x: left;
    }

    .homepage_testimonialsContainer__icaYb {
        padding: 80px 20px;
        box-sizing: border-box;
        max-width: 100vw;
        width: 100%;
    }

    /* Bug 10698344 — at narrow widths / 200% reflow the 36px gradient heading
       overflowed its box and was clipped by the container's overflow:hidden.
       Shrink it and allow wrapping so the whole "What Clarity users say" heading
       stays visible. Verified at a 320px viewport. */
    .homepage_testimonialsContainer__icaYb h2 {
        font-size: 28px;
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    /* Bug 10698344 — the outer side chevrons squeezed the overflow:hidden
       container so the min-width:180px testimonial (quote + author) was clipped
       on both sides. Let the wrapper/testimonial fill the viewport width and wrap
       the quote so the full content stays visible. Verified at 320px. */
    .homepage_testimonialsWrapper__uXDAn {
        width: 100%;
        max-width: 100%;
    }

    .homepage_testimonialsWrapper__uXDAn > .homepage_testimonial__WBpjH {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .homepage_testimonialsContainer__icaYb blockquote {
        overflow-wrap: anywhere;
    }

    .homepage_paginationChevron__4m3Yg {
        display: none;
    }

    .homepage_mobilePaginationChevron__c8xp0 {
        display: block;
    }

    .homepage_sdkModuleContent__zEVC2 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .homepage_sdkModuleContent__zEVC2 ul {
        text-align: left;
    }

    .homepage_extensionModuleContent__NmaBn {
        margin: 0;
    }

    .homepage_extensionModuleContent__NmaBn a {
        margin-right: auto;
        margin-left: auto;
    }
}

@media only screen and (max-width: 390px) {
    .homepage_homepageBannerWrapper__BAnB\+ {
        height: unset;
        overflow: hidden;
        padding: 24px 10px;
    }

    .homepage_homepageBannerContent__Cq2DD .homepage_buttonArea__s9n6Y {
        flex-direction: column;
    }

    .homepage_homepageBannerContent__Cq2DD .homepage_platformsRating__HCPnB {
        flex-direction: column;
        margin: 38px 0 0 0;
    }

    .homepage_platformContainer__AfZnE {
        margin: unset;
    }

    .homepage_mobileBannerImg__5q8js {
        display: none;
    }

    .homepage_banner__ckZwc {
        padding: 24px 10px;
    }

    .homepage_industriesBanner__B90PD .homepage_banner__ckZwc {
        padding-bottom: 80px;
    }
}

@media only screen and (max-width: 320px) {
    .homepage_industriesBanner__B90PD,
    .homepage_extensionModuleContent__NmaBn {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .homepage_bannerContent__R2vSH,
    .homepage_industryTilesContainer__imZpq {
        min-width: unset;
    }

    .homepage_industriesBanner__B90PD .homepage_banner__ckZwc {
        margin: 0;
    }
}

/********************************************/
/*********** Homepage v3  **************/
/********************************************/

.homepage_normalText__9cLM\+ {
    font-size: 14px;
}

.homepage_homepageGradientBannerWrapper__2zuAh {
    background: unset;
    position: relative;
    overflow: hidden;
}

.homepage_homepageHeaderGradientLightBlue__FjFCv {
    position: absolute;
    border-radius: 782px;
    opacity: 0.4;
    background: rgba(0, 154, 249, 0.2);
    filter: blur(200px);
    width: 735px;
    height: 782px;
    z-index: -1;
    bottom: 150px;
}

.homepage_homepageHeaderGradientBlue__HxdAQ {
    position: absolute;
    border-radius: 736px;
    opacity: 0.3;
    background: rgba(0, 154, 249, 0.2);
    filter: blur(200px);
    height: 736px;
    width: 782px;
    left: 0;
    top: 112px;
    z-index: -1;
}

.homepage_hompageHeaderGradientPurpleBlue__tS3J7 {
    position: absolute;
    border-radius: 1298px;
    opacity: 0.2;
    background: radial-gradient(50% 50% at 50% 50%, #656aff 0%, #aa65ff 50%, #009af9 100%);
    filter: blur(200px);
    height: 1298px;
    width: 857px;
    right: 0;
    top: 170px;
    z-index: -1;
}

.homepage_announcingBannerContainer__bPLY4 {
    position: relative;
    width: 100%;
    background: linear-gradient(90deg, #4152d8 0%, #58a0df 100%);
    display: grid;
    justify-content: center;
    align-items: center;
    height: 48px;
}

.homepage_announcingBannerContainer__bPLY4 > div {
    display: flex;
    align-items: baseline;
}

.homepage_announcingBannerContainer__bPLY4 p {
    margin: 8px 4px 8px 0;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
}

.homepage_announcingBannerContainer__bPLY4 .homepage_closeButton__z008U,
.homepage_announcingBannerContainer__bPLY4 a {
    color: #fff;
}

.homepage_announcingBannerContainer__bPLY4 .homepage_announcingBannerTextWrapper__yJo3p a {
    text-decoration: underline;
    color: #fff;
}

.homepage_announcingBannerContainer__bPLY4 .homepage_announcingBannerTextWrapper__yJo3p a:hover {
    font-weight: 600;
    color: white;
}

.homepage_announcingBannerContainer__bPLY4 .homepage_closeButton__z008U {
    position: absolute;
    right: 16px;
}

.homepage_announcingBannerContainer__bPLY4 .homepage_closeButton__z008U i {
    font-size: 12px;
}

.homepage_announcingBannerContainer__bPLY4 .homepage_closeButton__z008U:hover {
    color: rgb(0, 69, 120);
    background-color: unset;
}

.homepage_homepageGradientDesign__dotpE .homepage_homepageBanner__SizYU {
    flex-wrap: nowrap;
    width: 100%;
}

.homepage_homePageContainer__gH7U8 .homepage_homepageGradientDefaultButton__YjOiP a.ms-Button--default,
.homepage_homePageContainer__gH7U8 .homepage_homepageAgentGradientDefaultButton__ohOHs .ms-Button--default {
    border: none;
}

.homepage_homePageContainer__gH7U8 .homepage_homepageGradientDefaultButton__YjOiP .ms-Button--default:hover {
    background: linear-gradient(97deg, #f8f2ff 0%, #f0f9ff 49.25%, #ebecff 98.5%);
}

.homepage_homePageContainer__gH7U8 .homepage_homepageAgentGradientDefaultButton__ohOHs .ms-Button--default:hover {
    background: linear-gradient(92deg, #f1f5ff 1.38%, #f9f0fe 50%, #fcf0f7 98.62%);
}

.homepage_homepageGradientDefaultButton__YjOiP {
    width: fit-content;
    border-radius: 4px;
    border: 1px solid transparent;
    background: linear-gradient(97deg, #aa65ff 0%, #009af9 49.25%, #656aff 98.5%);
}

.homepage_homepageAgentGradientDefaultButton__ohOHs {
    width: fit-content;
    border-radius: 4px;
    border: 1px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(90deg, #4e83ff, #ae3af1, #df3c99, #ee5e36) border-box;
}

.homepage_homepageGradientBannerContent__wHQsL {
    min-width: 600px;
    margin-right: -37px;
}

.homepage_homepageGradientDefaultButton__YjOiP .ms-Button--default:hover {
    background:
        linear-gradient(#f7ebfe) padding-box,
        linear-gradient(90deg, #4e83ff, #ae3af1, #df3c99, #ee5e36) border-box;
}

.homepage_homepageGradientBannerContent__wHQsL .homepage_buttonArea__s9n6Y .ms-Button--primary:hover {
    background: linear-gradient(97deg, #9137ff 0%, #2680b8 49.25%, #292ee0 98.5%);
}

.homepage_homepageGradientBannerContent__wHQsL h1 {
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 54px;
}

.homepage_homepageGradientBannerContent__wHQsL .homepage_bannerTitleGradientWrapper__wUE1r h1 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 24px;
}

.homepage_desktopGradientBannerImg__CiAr7 {
    height: 548px;
    max-height: 548px;
    margin-top: 100px;
}

.homepage_mobileGradientBannerImg__UH6nh {
    height: 287px;
    max-height: 287px;
    display: none;
}

.homepage_bannerTitleGradientWrapper__wUE1r {
    display: flex;
}

.homepage_homepageGradientBannerContent__wHQsL > span {
    font-size: 18px;
    line-height: 24px;
    color: #3b3a39;
}

.homepage_homepageGradientBannerContent__wHQsL .homepage_buttonArea__s9n6Y {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.homepage_homepageGradientBannerContent__wHQsL .homepage_buttonArea__s9n6Y a:last-child {
    color: #0078d4;
    border-color: #005493;
}

.homepage_homepageGradientBannerContent__wHQsL .homepage_buttonArea__s9n6Y a:last-child:hover {
    background: #eff6fc;
}

.homepage_homepageGradientBannerContent__wHQsL .homepage_buttonArea__s9n6Y a,
.homepage_homepageGradientBannerContent__wHQsL .homepage_buttonArea__s9n6Y button {
    width: 156px;
    height: 38px;
    box-sizing: content-box;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 47px;
    padding: 5px 12px;
    box-shadow:
        0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13),
        0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1);
}

.homepage_homepageGradientBannerContent__wHQsL .homepage_buttonArea__s9n6Y button {
    background: linear-gradient(96.5deg, #a43bff 0%, #006ff7 49.25%, #7442ff 98.5%);
}

.homepage_purpleBluePurpleGradient__xcrTO {
    background: linear-gradient(96.5deg, #a43bff 0%, #006ff7 49.25%, #7442ff 98.5%);
}

.homepage_homepageFooter__9rpDq {
    position: relative;
    background: linear-gradient(0deg, #f3f3ff 31.58%, #fff 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 324px;
    flex-direction: column;
    z-index: 0;
}

.homepage_homepageFooter__9rpDq h2 {
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}

.homepage_purpleGradient__\+XtHS {
    background: linear-gradient(90deg, #8f58ab -8.93%, #3d60e0 100%);
}

.homepage_landingFooterText__Nie0F {
    font-size: 18px;
    margin-bottom: 40px;
}

.homepage_homepageFooter__9rpDq svg {
    position: absolute;
    bottom: 0;
    z-index: 0;
}

.homepage_homepageFooter__9rpDq svg:first-of-type {
    left: 0;
}

.homepage_homepageFooter__9rpDq svg:nth-of-type(2) {
    right: 0;
}

.homepage_homepageFooter__9rpDq svg:nth-of-type(3) {
    display: none;
}

.homepage_homepageFeaturesContainer__iUMji {
    width: 100%;
    position: relative;
}

.homepage_homepageFeaturesPivot__Be8fR {
    position: sticky;
    top: 60px;
    z-index: 100;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0 96px;
    margin-bottom: 40px;
    height: 98px;
    align-content: center;
}

.homepage_homepageFeaturesPivot__Be8fR .ms-Pivot {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.homepage_homepageFeaturesPivot__Be8fR .ms-Pivot-link {
    font-size: 16px;
    line-height: 22px;
    padding: 20px 0;
    transition: all 0.3s ease;
}

.homepage_homepageFeaturesPivot__Be8fR .ms-Pivot-link:hover {
    color: #323130;
}

.homepage_homepageFeaturesPivot__Be8fR .ms-Pivot-link.is-selected {
    font-weight: 600;
}

.homepage_homepageFeaturesPivot__Be8fR .ms-Pivot-link.is-selected::before {
    height: 4px;
    border-radius: 100px;
    background: linear-gradient(97deg, #aa65ff 0%, #009af9 49.25%, #656aff 98.5%), #d9d9d9;
}

.homepage_homepageFeaturesPivot__Be8fR .ms-Pivot-link:last-child.is-selected::before {
    background: linear-gradient(90deg, #4e83ff 0%, #ae3af1 33%, #df3c99 66%, #ee5e36 100%);
}

.homepage_homepageFeaturesSectionsContainer__Y1DVz {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.homepage_homepageFeaturesSection__WFFWX {
    width: 100%;
    min-height: 600px;
}

.homepage_homepageFeaturesSection__WFFWX > div {
    padding: 0px 96px;
}

.homepage_featuresContentWrapper__-SZC8 {
    display: grid;
    grid-template-columns: 1fr minmax(0, 554px);
    column-gap: 80px;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    align-items: start;
}

/* Feature text sections fill the left column, stacked one per row. */
.homepage_featuresContentWrapper__-SZC8 > .homepage_homepageFeaturesSection__WFFWX {
    grid-column: 1;
}

/* Every image panel is placed in the same right-column cell (spanning all rows)
   so they overlap into a single sticky image that cross-fades between sections —
   preserving the original look while each panel stays DOM-adjacent to its section
   for a logical section -> gif -> section tab order. */
.homepage_featureImageAnimated__uhF4M {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    justify-self: center;
    position: sticky;
    top: 250px;
    width: 100%;
    max-width: 554px;
    height: 500px;
    display: grid;
    place-items: center;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.5s ease-in-out 0.3s,
        transform 0.5s ease-in-out 0.3s;
}

.homepage_featureImageAnimated__uhF4M img,
.homepage_featureImageAnimated__uhF4M video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 20px;
}

.homepage_featureImageHidden__hl69U {
    opacity: 0;
    transform: translateY(60px);
    pointer-events: none;
    transition:
        opacity 0.3s ease-in-out,
        transform 0.3s ease-in-out;
}

.homepage_factsColumns__5RE3g {
    display: flex;
    gap: 24px;
    width: 100%;
    justify-content: center;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: content-box;
}

.homepage_factsColumnComponent__EYMNv {
    display: flex;
    gap: 32px;
    flex-flow: column;
    min-width: 50%;
}

.homepage_featureCallToActions__CBOyp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.homepage_featuresContentImageColumn__Dnwup {
    display: none;
}

.homepage_featuresContentImageColumn__Dnwup .homepage_factsImageContent__Zm06U {
    border-radius: 40px;
    width: 100%;
    height: 510px;
    position: relative;
    max-width: 640px;
}

.homepage_featuresContentImageColumn__Dnwup .homepage_factsImageContent__Zm06U video,
.homepage_featuresContentImageColumn__Dnwup .homepage_factsImageContent__Zm06U img {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
}

.homepage_extensionContent__0R0Zv {
    width: 100%;
}

.homepage_extensionContent__0R0Zv.homepage_bannerContent__R2vSH h2 {
    font-size: 28px;
}

.homepage_extensionContent__0R0Zv.homepage_bannerContent__R2vSH > span {
    font-size: 16px;
    margin-bottom: 40px;
}

.homepage_extensionModule__MfYMb img {
    max-width: 640px;
    width: 100%;
    align-items: center;
    margin-bottom: 32px;
}

.homepage_extensionModule__MfYMb {
    margin-bottom: 32px;
    width: 50%;
    margin-right: 0;
}

.homepage_extensionModulesContainer__OZk65 {
    display: flex;
    line-height: 22px;
    gap: 40px;
    margin-top: 40px;
}

.homepage_extensionModulesContainer__OZk65 h3 {
    font-weight: 600;
    margin-bottom: 16px;
}

.homepage_extensionModulesContainer__OZk65 p {
    color: #323130;
    margin-bottom: 40px;
}

.homepage_extensionModulesContainer__OZk65 .ms-Button--default {
    width: fit-content;
}

.homepage_testimonialsHomepageContainer__QSwjw {
    width: 100%;
    padding: 96px;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.homepage_testimonialsHomepageContainer__QSwjw h2 {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: #201f1e;
}

.homepage_testimonialsHomepageContainer__QSwjw .homepage_readmoreButton__7Dcvf {
    width: fit-content;
    height: 32px;
}

.homepage_testimonialsHomepageCards__YuDEb {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Each card is wrapped in an <li> for list semantics; display:contents keeps
   the card itself as the flex item so equal-height layout is unchanged. */
.homepage_testimonialsHomepageCards__YuDEb li {
    display: contents;
}

.homepage_testimonialHomepageCard__TE4YO {
    background: #ffffff;
    overflow: hidden;
    width: 100%;
    max-width: 384px;
    display: flex;
    flex-direction: column;
    border: 1px solid #eaeaff;
    border-radius: 16px;
}

.homepage_testimonialHomepageCard__TE4YO[role="link"] {
    cursor: pointer;
}

.homepage_testimonialCardBanner__Z6y\+U {
    background: linear-gradient(180deg, rgba(243, 243, 255, 0.1) 0%, #f3f3ff 100%);
    padding: 32px 24px;
}

.homepage_testimonialCardBanner__Z6y\+U .homepage_percentage__2Cqj2 {
    font-size: 52px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.homepage_testimonialCardBanner__Z6y\+U .homepage_bannerDescription__P8rQE {
    font-size: 16px;
    line-height: 22px;
    color: #161514;
}

.homepage_testimonialCardContent__QVSoS {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

.homepage_testimonialCardImage__udVvI {
    width: 100px;
}

.homepage_testimonialCardQuote__JxsBq {
    font-size: 16px;
    line-height: 22px;
    color: #323130;
    flex: 1;
}

.homepage_testimonialCardAuthor__GK6u9 {
    display: flex;
    align-items: center;
    gap: 11px;
}

.homepage_testimonialCardAuthor__GK6u9 img {
    width: 40px;
    height: 40px;
    border-radius: 40px;
}

.homepage_testimonialCardAuthorInfo__4HKDD {
    display: flex;
    flex-direction: column;
}

.homepage_testimonialCardAuthorName__LxWxB {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #323130;
}

.homepage_testimonialCardAuthorPosition__mV6is {
    font-size: 16px;
    line-height: 22px;
    color: #605e5c;
}

.homepage_testimonialCardContent__QVSoS .homepage_testimonialCardReadMore__9N5mX {
    display: flex;
    color: #020057;
    font-weight: 600;
    line-height: 22px;
    gap: 6px;
    align-items: center;
}

.homepage_testimonialCardContent__QVSoS .homepage_testimonialCardReadMore__9N5mX i {
    height: 16px;
}

.homepage_companiesCarouselWrapper__FZ9SQ.homepage_carouselTitleContainer__tdSxV > h3 {
    font-size: 18px;
    line-height: 24px;
    color: #3b3a39;
    text-align: center;
    margin-top: 40px;
}

.homepage_companiesCarouselWrapper__FZ9SQ.homepage_carouselTitleContainer__tdSxV {
    height: 168px;
}

.homepage_carouselGradientContainer__JZx7w {
    position: absolute;
    left: 0;
    top: 0;
    height: 110px;
    width: 300%;
    /* Logos are baked into LogoRow.png. If this image changes, update the companiesWithClarityLogosLabel
       string in homepagev2.resx (the accessible label listing these brands) to match. */
    background: url(https://claritystatic.azureedge.net/images/LogoRow.png);
    margin: 60px 0;
    background-repeat: repeat-x;
    background-position-y: center;
    animation: homepage_autoScroll__nznYz 120s linear infinite;
    transform: translate3d(0, 0, 0);
    background-size: 2500px;
}

.homepage_carouselTitleContainer__tdSxV.homepage_companiesCarouselWrapper__FZ9SQ .homepage_carouselContainer__-ifji {
    margin-top: 64px;
}

.homepage_homepageGradientDesign__dotpE .homepage_sdkModuleContainer__1LX1f {
    background-color: #fbfbfe;
    margin-bottom: 96px;
}

.homepage_homepageGradientDesign__dotpE .homepage_sdkModuleContainer__1LX1f .homepage_banner__ckZwc {
    padding: 96px 96px 0 96px;
}

.homepage_homepageGradientDesign__dotpE .homepage_integrationsContainer__NmI1s h2,
.homepage_homepageGradientDesign__dotpE .homepage_sdkModuleContent__zEVC2 h2,
.homepage_homepageGradientDesign__dotpE .homepage_mediumTitle__WzpW0 {
    font-size: 28px;
    line-height: 36px;
}

.homepage_homepageGradientDesign__dotpE .homepage_sdkModuleContent__zEVC2 > strong {
    font-size: 16px;
    line-height: 22px;
}

.homepage_testimonialsPaginationContainer__3nXCQ {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

.homepage_testimonialsPaginationContainer__3nXCQ .homepage_paginationIndicator__JmZt2 {
    cursor: pointer;
}

.homepage_testimonialsPaginationContainer__3nXCQ .homepage_paginationIndicator__JmZt2:hover {
    opacity: 0.7;
}

.homepage_testimonialsPaginationContainer__3nXCQ .homepage_paginationIndicator__JmZt2:focus {
    outline: 2px solid #605e5c;
    outline-offset: 2px;
}

@media only screen and (max-width: 1023px) {
    .homepage_homepageGradientBannerContent__wHQsL {
        min-width: unset;
        margin-right: unset;
    }

    .homepage_homepageGradientBannerContent__wHQsL h1,
    .homepage_bannerTitleGradientWrapper__wUE1r {
        font-size: 32px;
        line-height: 40px;
    }

    .homepage_homepageGradientBannerContent__wHQsL > span {
        font-size: 16px;
    }

    .homepage_homepageBanner__SizYU .homepage_desktopGradientBannerImg__CiAr7 {
        display: none;
    }

    .homepage_mobileGradientBannerImg__UH6nh {
        display: block;
    }

    .homepage_testimonialsHomepageCards__YuDEb {
        padding: 64px 24px;
    }

    .homepage_testimonialsHomepageCards__YuDEb {
        flex-direction: column;
        align-items: center;
    }

    .homepage_testimonialsHomepageCard__yNORe {
        max-width: 100%;
    }

    .homepage_homepageFeaturesPivot__Be8fR {
        padding: 0 20px;
        top: 48px;
    }

    .homepage_homepageFeaturesPivot__Be8fR .ms-Pivot {
        gap: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .homepage_homepageFeaturesPivot__Be8fR .ms-Pivot::-webkit-scrollbar {
        display: none;
    }

    .homepage_homepageFeaturesPivot__Be8fR .ms-Pivot-link {
        font-size: 14px;
        padding: 16px 0;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .homepage_homepageFeaturesSection__WFFWX {
        scroll-margin-top: 100px;
    }
    .homepage_homepageGradientDesign__dotpE .homepage_testimonialsHomepageContainer__QSwjw {
        padding: 90px 40px;
    }

    .homepage_testimonialsHomepageCards__YuDEb {
        justify-content: center;
        display: flex;
        flex-flow: row;
        padding: 0;
        gap: 16px;
    }

    .homepage_testimonialCardContent__QVSoS {
        gap: 16px;
    }

    .homepage_testimonialHomepageCard__TE4YO {
        max-height: 420px;
        height: 420px;
    }

    .homepage_testimonialCardBanner__Z6y\+U {
        padding: 16px;
    }

    .homepage_testimonialCardBanner__Z6y\+U .homepage_percentage__2Cqj2 {
        font-size: 42px;
        margin-bottom: 0;
    }

    .homepage_homepageGradientDesign__dotpE .homepage_mobilePaginationChevron__c8xp0 {
        margin-left: 50px;
    }

    .homepage_homepageGradientDesign__dotpE .homepage_mobilePaginationChevron__c8xp0.homepage_previous__M\+82g {
        margin-left: 0;
        margin-right: 50px;
    }

    .homepage_testimonialsPaginationContainer__3nXCQ {
        margin-top: 40px;
    }

    .homepage_homepageGradientDesign__dotpE .homepage_testimonialsPaginationContainer__3nXCQ {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 999px) {
    .homepage_featuresContentImageColumn__Dnwup {
        display: flex;
        gap: 32px;
        flex-flow: column;
        min-width: 50%;
    }

    .homepage_featuresContentImageColumn__Dnwup .homepage_factsImageContent__Zm06U {
        border-radius: 40px;
        width: 100%;
        height: 410px;
        position: relative;
        max-width: 640px;
    }
}

@media only screen and (max-width: 767px) {
    .homepage_homePageContainer__gH7U8.homepage_homepageGradientDesign__dotpE {
        overflow-y: hidden;
    }

    .homepage_pageBannerFeatures__liG0t {
        justify-content: center;
    }

    .homepage_pageBannerFeature__-RaDv.homepage_v3__NRFX7 {
        font-size: 14px;
    }

    .homepage_homepageBannerWrapper__BAnB\+.homepage_homepageGradientBannerWrapper__2zuAh {
        height: fit-content;
        padding: 48px 20px 8px 20px;
    }

    .homepage_bannerContent__R2vSH {
        min-width: unset;
    }

    .homepage_homepageGradientDesign__dotpE .homepage_homepageBanner__SizYU {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .homepage_normalText__9cLM\+ .homepage_homepageGradientBannerContent__wHQsL > span {
        font-size: 14px;
    }

    .homepage_mobileGradientBannerImg__UH6nh {
        display: block;
        max-height: 548px;
        max-width: 640px;
        width: 100%;
        height: 100%;
    }

    .homepage_announcingBannerContainer__bPLY4 {
        flex-flow: column;
        justify-content: center;
        align-items: center;
        height: fit-content;
    }

    .homepage_announcingBannerContainer__bPLY4 p {
        margin: 8px 4px 0;
    }

    .homepage_announcingBannerContainer__bPLY4 > div {
        display: block;
        text-align: center;
        margin-bottom: 4px;
    }

    .homepage_homepageGradientDesign__dotpE .homepage_homepageBannerWrapper__BAnB\+ {
        align-items: baseline;
    }

    .homepage_homepageGradientBanner__83NmF {
        margin-top: 12px;
    }

    .homepage_homepageGradientBannerContent__wHQsL h1,
    .homepage_bannerTitleGradientWrapper__wUE1r,
    .homepage_buttonArea__s9n6Y {
        display: flex;
        justify-content: center;
    }

    .homepage_buttonArea__s9n6Y {
        z-index: 1;
    }

    .homepage_homepageGradientBannerContent__wHQsL h1,
    .homepage_bannerTitleGradientWrapper__wUE1r {
        text-align: center;
    }
    .homepage_homepageGradientBannerContent__wHQsL > span {
        display: flex;
        text-align: center;
    }

    .homepage_homepageGradientBannerContent__wHQsL .homepage_buttonArea__s9n6Y {
        flex-direction: column;
    }

    .homepage_homepageFeaturesPivot__Be8fR {
        top: 56px;
        padding: 0 16px;
    }

    .homepage_homepageFeaturesPivot__Be8fR .ms-Pivot {
        gap: 16px;
    }

    .homepage_homepageFeaturesPivot__Be8fR .ms-Pivot-link {
        font-size: 12px;
        padding: 12px 0;
    }

    .homepage_homepageFeaturesSection__WFFWX {
        scroll-margin-top: 90px;
    }

    .homepage_factsColumns__5RE3g {
        gap: 32px;
        flex-flow: column-reverse;
    }

    .homepage_factsColumnComponent__EYMNv {
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
    }

    .homepage_featuresContentImageColumn__Dnwup .homepage_factsImageContent__Zm06U {
        height: 510px;
    }

    .homepage_extensionModulesContainer__OZk65 {
        flex-direction: column;
        margin-top: 16px;
    }

    .homepage_extensionModule__MfYMb {
        width: 100%;
        align-items: center;
    }

    .homepage_homepageGradientDesign__dotpE .homepage_sdkModuleContainer__1LX1f .homepage_banner__ckZwc {
        padding: 96px;
    }

    .homepage_homepageGradientDesign__dotpE .homepage_sdkImage__12W6D {
        width: 400px;
    }

    .homepage_homepageGradientDesign__dotpE .homepage_testimonialsHomepageContainer__QSwjw {
        padding: 90px 20px;
    }

    .homepage_testimonialCardContent__QVSoS {
        gap: 16px;
    }

    .homepage_testimonialHomepageCard__TE4YO {
        height: fit-content;
        max-height: fit-content;
    }

    .homepage_testimonialsHomepageCards__YuDEb h2 {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .homepage_testimonialCardBanner__Z6y\+U .homepage_percentage__2Cqj2 {
        font-size: 42px;
    }

    .homepage_homepageGradientDesign__dotpE .homepage_banner__ckZwc.homepage_ssrBanner__qRap6,
    .homepage_homepageGradientDesign__dotpE .homepage_integrationsContainer__NmI1s {
        padding: 80px 20px 0 20px;
    }

    .homepage_homepageFooter__9rpDq h2 {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 12px;
        text-align: center;
    }

    .homepage_landingFooterText__Nie0F {
        text-align: center;
    }

    .homepage_homepageFooter__9rpDq svg:nth-of-type(1),
    .homepage_homepageFooter__9rpDq svg:nth-of-type(2) {
        display: none;
    }

    .homepage_testimonialsHomepageCards__YuDEb {
        justify-content: center;
    }

    .homepage_homepageFooter__9rpDq svg:nth-of-type(3) {
        display: block;
    }

    .homepage_featureImageContainer__EELJm img {
        border-radius: 8px;
    }
}

@media only screen and (min-width: 1024px) {
    .homepage_testimonialsPaginationContainer__3nXCQ {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .homepage_featuresContentImageColumn__Dnwup .homepage_factsImageContent__Zm06U {
        height: fit-content;
        min-height: 400px;
    }
}

@media only screen and (max-width: 500px) {
    .homepage_featuresContentImageColumn__Dnwup .homepage_factsImageContent__Zm06U {
        height: fit-content;
        min-height: 270px;
    }
}

@media only screen and (max-width: 450px) {
    .homepage_homepageGradientDesign__dotpE .homepage_sdkImage__12W6D {
        width: 300px;
    }
}

@media only screen and (max-width: 320px) {
    .homepage_mobileGradientBannerImg__UH6nh {
        height: 240px;
        max-height: 240px;
    }
}

.sharedComponents_chevron__qdEKw {
    transform-origin: 50% 50%;
    transition: transform 0.1s linear 0s;
}

.sharedComponents_expandedChevron__OjXZ1 {
    transform: rotate(90deg);
}

.sharedComponents_mobileCollapsible__-wmBy .sharedComponents_collapsibleHeader__yqmEY i {
    transform: rotate(90deg);
}

.sharedComponents_mobileCollapsible__-wmBy .sharedComponents_collapsibleHeader__yqmEY i.sharedComponents_expandedChevron__OjXZ1 {
    transform: rotate(270deg);
}

.sharedComponents_collapsibleHeader__yqmEY {
    display: flex;
    cursor: pointer;
    user-select: none;
    align-items: center;
}

.sharedComponents_collapsibleTitle__hlLR5 {
    margin-left: 8px;
}

.sharedComponents_collapsibleTitle__hlLR5.sharedComponents_extraContentFlex__6Yk7G {
    display: flex;
    gap: 16px;
}

.sharedComponents_baAutoPublishCollapsible__08fm6 {
    margin: 8px 0;
}

.sharedComponents_baAutoPublishCollapsible__08fm6 .sharedComponents_collapsibleTitle__hlLR5 {
    color: #161514;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}

.sharedComponents_engagementMetricsCollapse__e3gaq .sharedComponents_collapsibleHeader__yqmEY {
    margin-bottom: 8px;
}

.sharedComponents_engagementMetricsCollapse__e3gaq .sharedComponents_collapsibleTitle__hlLR5 {
    font-size: 12px;
    line-height: 16px;
}

/* Replay header V2 */
.sharedComponents_playerHeader__Pd1sO {
    align-items: center;
    padding: 8px 16px;
    margin: 0 16px 12px 0px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 4.8px 14.4px 0px rgba(131, 126, 255, 0.3);
}

.sharedComponents_playerHeader__Pd1sO i {
    line-height: 20px;
    height: 20px;
}

.sharedComponents_playerHeader__Pd1sO .ms-TooltipHost button:not(.is-disabled):hover path {
    fill: #005a9e;
}

.sharedComponents_playerHeader__Pd1sO .saveIcon i {
    height: 16px;
}

.sharedComponents_playerHeader__Pd1sO .ms-TooltipHost button.saveIcon:not(.is-disabled):hover path {
    fill: #827dff;
}

.sharedComponents_replayHeaderMapButtons__yEPUB {
    margin-left: 12px;
    display: flex;
}

.sharedComponents_replayHeaderMapButtons__yEPUB button {
    border-radius: 0;
    border-right-width: 0px;
}

.sharedComponents_replayHeaderMapButtons__yEPUB button:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.sharedComponents_replayHeaderMapButtons__yEPUB button:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-right-width: 1px;
}

.sharedComponents_playerHeader__Pd1sO .ms-TooltipHost button {
    padding: 0 2px;
    margin-left: 12px;
}

/* Bug 10698225 — replay header toolbar icons (favorite, share, download, map
   buttons) use fixed SVG fills and disappear in light HC (Desert). Force
   system colors so they adapt to every contrast theme. */
@media (forced-colors: active) {
    .sharedComponents_playerHeader__Pd1sO .ms-TooltipHost button path,
    .sharedComponents_playerHeader__Pd1sO path,
    .sharedComponents_playerHeader__Pd1sO i {
        fill: CanvasText;
        color: CanvasText;
    }
}

.sharedComponents_errorWrapper__Tj8td {
    flex: 1;
    display: flex;
    justify-content: center;
    min-height: 100%;
}

.sharedComponents_csvDownloadOption__NXJ7x {
    line-height: 36px;
    display: flex;
    justify-content: left;
    flex-direction: row;
    cursor: pointer;
}

.sharedComponents_csvDownloadOption__NXJ7x:hover {
    background-color: #eaeaff;
}

.sharedComponents_csvDownloadOptionText__cjwrT {
    padding: 0px 12px;
    width: 100%;
}

.sharedComponents_adsInsightsDownload__wi\+XK .sharedComponents_csvDownloadOptionText__cjwrT {
    padding: 0;
    height: 32px;
}

.sharedComponents_adsInsightsDownload__wi\+XK.sharedComponents_csvDownloadOption__NXJ7x {
    border-radius: 4px;
}

.fullScreenMessage img {
    width: 100%;
}

.sharedComponents_coachMarkSubText__TCtkp {
    margin-top: 16px;
}

@media only screen and (max-width: 680px) {
    .sharedComponents_collapsibleToggleTitle__d6Fzs {
        font-weight: 600;
    }
}

.sharedComponents_thirdPartyPlatformsContainer__looMd .sharedComponents_thirdPartyInstallationsContent__Q7D-7 {
    padding: 32px 32px 8px;
}

.sharedComponents_thirdPartyInstallationsContent__Q7D-7 {
    border-radius: 8px;
    background: #fff;
    width: 100%;
    padding: 24px 0;
}

.sharedComponents_thirdPartyTilesContainer__cATHi {
    position: relative;
    display: flex;
    gap: 24px;
    margin: 24px 0;
    background-color: #fff;
    flex-wrap: wrap;
}

.sharedComponents_thirdPartyTile__LuR7k {
    display: flex;
    padding-right: 16px;
    align-items: center;
    gap: 16px;
    border-radius: 8px;
    background: #fff;
    box-shadow:
        0px 0.6px 1.8px 0px rgba(131, 126, 255, 0.1),
        0px 3.2px 7.2px 0px rgba(131, 126, 255, 0.12);
    height: 64px;
    width: 256px;
}

.sharedComponents_thirdPartyTile__LuR7k:focus-visible {
    outline: 1px solid #000;
}

.sharedComponents_thirdPartyTilesContainer__cATHi > button.sharedComponents_thirdPartyTile__LuR7k {
    display: flex;
    height: 64px;
    border-radius: 8px;
    justify-content: left;
}

button.sharedComponents_thirdPartyTile__LuR7k {
    display: flex;
    border: unset;
    padding: 0;
}

button.sharedComponents_thirdPartyTile__LuR7k span {
    justify-content: flex-start;
}

button.sharedComponents_thirdPartyTile__LuR7k:hover {
    background: #fff;
}

a.sharedComponents_thirdPartyTile__LuR7k:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

button.sharedComponents_thirdPartyTile__LuR7k strong,
.sharedComponents_thirdPartyTile__LuR7k:not(button) span {
    margin-left: 76px;
    font-weight: 600;
    color: #161514;
}

.sharedComponents_thirdPartyTile__LuR7k .emoji.platformsIconsSprite.mesh {
    margin-left: 10px;
}

@media screen and (prefers-contrast: more) {
    .sharedComponents_playerHeader__Pd1sO path {
        fill: white;
    }
}

.sharedComponents_agentPrimaryButton__SXyeG {
    width: fit-content;
    border-radius: 4px;
    height: 32px;
    background: linear-gradient(90deg, #4e83ff 0%, #ae3af1 50%, #df3c99 100%);
}

.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_landingPrimaryButton__vehqi {
    background: linear-gradient(90deg, #4e83ff 0%, #ae3af1 33%, #df3c99 66%, #e27d53 100%);
}

.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_blueWrapperLandingPrimaryButton__\+EmGd {
    background: linear-gradient(90deg, #4e83ff 0%, #8b4df4 52%, #ae3af1 100%);
}

.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_loading__vI2mZ {
    background: linear-gradient(90deg, #0744d3 0%, #740daf 50%, #a90e67 100%);
}

.sharedComponents_agentDefaultButton__nvzdV {
    width: fit-content;
}

.sharedComponents_agentPrimaryButton__SXyeG .ms-Button--primary {
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    width: inherit;
    height: 100%;
    padding: 5px 12px;
    background: transparent;
    border-radius: 4px;
}

.sharedComponents_agentDefaultButton__nvzdV .sharedComponents_agentdisabledButton__sXIpw,
.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_agentdisabledButton__sXIpw {
    background: #f0f0f0;
}

.sharedComponents_agentDefaultButton__nvzdV .sharedComponents_agentdisabledButton__sXIpw .ms-Button-label,
.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_agentdisabledButton__sXIpw .ms-Button-label {
    color: #bdbdbd;
}

.sharedComponents_agentPrimaryButton__SXyeG span.ms-Button-flexContainer {
    font-weight: 600;
}

.sharedComponents_agentPrimaryButton__SXyeG .ms-Button--primary:active,
.sharedComponents_agentPrimaryButton__SXyeG .ms-Button--primary:hover {
    background: transparent;
}

.sharedComponents_agentPrimaryButton__SXyeG:not(.sharedComponents_agentdisabledButton__sXIpw):hover {
    background: linear-gradient(90deg, #2869ff 0%, #8916cc 50%, #c22780 100%);
}

.sharedComponents_agentPrimaryButton__SXyeG:not(.sharedComponents_agentdisabledButton__sXIpw):focus-visible,
.sharedComponents_agentPrimaryButton__SXyeG:not(.sharedComponents_agentdisabledButton__sXIpw):focus,
.sharedComponents_agentPrimaryButton__SXyeG:not(.sharedComponents_agentdisabledButton__sXIpw):active {
    background: linear-gradient(90deg, #4e83ff 0%, #ae3af1 50%, #df3c99 100%);
}

.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_landingPrimaryButton__vehqi:not(.sharedComponents_agentdisabledButton__sXIpw):hover {
    background: linear-gradient(90deg, #2869ff 0%, #8916cc 33%, #c22780 66%, #dd571f 100%);
}

.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_blueWrapperLandingPrimaryButton__\+EmGd:not(.sharedComponents_agentdisabledButton__sXIpw):hover {
    background: linear-gradient(90deg, #4e83ff 0%, #8b4df4 52%, #ae3af1 100%);
}

.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_landingPrimaryButton__vehqi:focus-visible,
.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_agentPrimaryButton__SXyeG.sharedComponents_landingPrimaryButton__vehqi:focus {
    background: linear-gradient(90deg, #4e83ff 0%, #ae3af1 33%, #df3c99 66%, #ee5e36 100%);
}

.sharedComponents_agentPrimaryButton__SXyeG:focus-visible .ms-Button--primary,
.sharedComponents_agentPrimaryButton__SXyeG:focus .ms-Button--primary {
    outline: 1px solid #ae3af1;
    border: unset;
}

.sharedComponents_agentDefaultButtonGrey__mZ15y.ms-Button--default {
    border: 1px solid #d1d1d1;
    color: #242424;
    width: fit-content;
}

.sharedComponents_agentDefaultButtonGrey__mZ15y.ms-Button--default i {
    align-items: center;
    height: 20px;
}

.sharedComponents_agentDefaultButtonGrey__mZ15y.ms-Button--default path {
    fill: #242424;
}

.sharedComponents_agentDefaultButton__nvzdV.ms-Button--default {
    border: 1px solid #a22ee5;
    color: #a22ee5;
}

.sharedComponents_agentDefaultButton__nvzdV.ms-Button--default i {
    color: #a22ee5;
    align-items: center;
}

.sharedComponents_agentPrimaryButton__SXyeG .ms-Button--primary i {
    color: white;
    align-items: center;
}

.sharedComponents_agentPrimaryButton__SXyeG .ms-Button--primary path {
    fill: white;
}

.sharedComponents_agentDefaultButton__nvzdV.ms-Button--default path {
    fill: #a22ee5;
}

.sharedComponents_agentDefaultButton__nvzdV:not(.sharedComponents_agentdisabledButton__sXIpw).ms-Button--default:hover {
    background: #fbf5ff;
}

.sharedComponents_agentDefaultButton__nvzdV:not(.sharedComponents_agentdisabledButton__sXIpw).ms-Button--default:active {
    background: #f7ebfe;
}

.sharedComponents_agentDefaultButton__nvzdV.ms-Button--default:focus-visible,
.sharedComponents_agentDefaultButton__nvzdV.ms-Button--default:focus {
    outline-color: #ae3af1;
}

.sharedComponents_agentTitle__RUqvo {
    background: linear-gradient(90deg, #4e83ff 0%, #ae3af1 33%, #df3c99 66%, #ee5e36 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 36px;
    font-weight: 600;
    line-height: 48px;
    text-wrap: nowrap;
}

.sharedComponents_agentGradientDefaultButton__vdzpv {
    width: fit-content;
    height: 32px;
    border-radius: 4px;
    border: 1px solid transparent;
    background:
        linear-gradient(#ffffff) padding-box,
        linear-gradient(90deg, #4e83ff, #ae3af1, #df3c99, #ee5e36) border-box;
}

.sharedComponents_agentGradientDefaultButton__vdzpv .ms-Button--default {
    border: none;
    color: #020057;
    width: 100%;
    height: 100%;
    padding: 5px 12px;
    background: transparent;
    border-radius: 3px;
}

.sharedComponents_agentGradientDefaultButton__vdzpv:focus-visible .ms-Button--default,
.sharedComponents_agentGradientDefaultButton__vdzpv:focus .ms-Button--default {
    border-width: 2px;
    background: #f7ebfe;
}

.sharedComponents_agentGradientDefaultButton__vdzpv:not(.sharedComponents_agentdisabledButton__sXIpw) a:hover {
    background: linear-gradient(92deg, #f1f5ff 1.38%, #f9f0fe 50%, #fcf0f7 98.62%);
}

.sharedComponents_headerNavOption__9DHsq i.ms-ContextualMenu-icon {
    display: none;
}

.sharedComponents_aiVisibilitySubmenuCallout__lsrqK.ms-Callout.ms-ContextualMenu-Callout {
    margin-top: 0;
}

.sharedComponents_brandAgentDropdownItem__gIB1i .ms-ContextualMenu-linkContent {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.sharedComponents_brandAgentDropdownItem__gIB1i button i.ms-ContextualMenu-icon {
    width: fit-content;
    display: flex;
}

.sharedComponents_brandAgentDropdownItem__gIB1i button span {
    margin-right: 0px;
    max-width: fit-content;
}

.sharedComponents_brandAgentFooterItem__Nr2Iy {
    display: flex;
}

.sharedComponents_brandAgentFooterItem__Nr2Iy i {
    margin-left: 6px;
}

.sharedComponents_brandAgentFooterItem__Nr2Iy i path {
    fill: #fff;
}

/* Common */
/** biome-ignore-all lint/complexity/noImportantStyles: legacy landing page styles require important declarations */

.landingPages_landingPageContainer__tt-\+M {
    /* biome-ignore lint/complexity/noImportantStyles: suppressing to unblock unrelated changes */
    height: auto !important;
}

.landingPages_focusSection__UZJ\+B {
    background: white;
    text-align: center;
    width: 100%;
}

.landingPages_focusSectionLight__rmSoa {
    background-color: #deecf9;
    color: #fff;
    text-align: center;
    width: 100%;
}

.landingPages_landingSectionTitle__1G9cc {
    background-image: linear-gradient(90deg, #8f58ab -8.93%, #3d60e0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 36px;
    font-weight: 600;
    text-align: center;
}

/* Highlights*/

.landingPages_highlightsSection__UWr9c {
    margin: 0 auto;
    color: inherit;
    padding: 0px;
}

.landingPages_highlightContainer__0ykxE {
    text-align: left;
}

.landingPages_highlightContainer__0ykxE h3 {
    font-size: 36px;
    line-height: 47px;
    font-weight: 600;
    color: inherit;
    text-align: left;
    margin-bottom: 32px;
}

.landingPages_highlight__1fLzT {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 96px;
    color: #323130;
    cursor: default;
    gap: 80px;
}

.landingPages_highlightContainer__0ykxE:nth-child(odd) .landingPages_highlight__1fLzT {
    flex-direction: row-reverse;
}

.landingPages_highlightContainer__0ykxE:nth-child(even) .landingPages_highlight__1fLzT {
    background-image: url("https://claritystatic.azureedge.net/images/module-wave-L.svg");
    background-size: cover;
    background-repeat: no-repeat;
}

.landingPages_highlightMedia__huD\+e {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    justify-self: center;
    width: calc(50% - 40px);
    max-width: 800px;
}

.landingPages_highlightMedia__huD\+e img {
    width: 100%;
    display: block;
    margin: 0;
    border-radius: 10px;
    filter: drop-shadow(0px 4.8px 14.4px rgba(0, 0, 0, 0.18));
}

.landingPages_highlightTextWrapper__Xe84t {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #323130;
    flex: 1;
    max-width: 670px;
}

.landingPages_highlightPointsList__v4HSb {
    gap: 8px;
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    text-align: left;
}

.landingPages_highlightPoint__2Rdlh {
    color: #323130;
    font-size: 16px;
}

.landingPages_highlightPoint__2Rdlh span {
    font-weight: 600;
    margin-right: 5px;
}

.landingPages_highlightSectionsList__PZHM2 {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.landingPages_highlightSection__Pb5tC {
    font-size: 16px;
    line-height: 26px;
}

.landingPages_highlightSection__Pb5tC span {
    display: block;
    font-weight: 600;
    margin-right: 5px;
}

.landingPages_highlightButtonsContainer__s9YfW {
    margin: 16px 0px 12px;
    display: flex;
    gap: 8px;
}

.landingPages_highlightButtonItem__HYUsZ {
    font-size: 14px;
    line-height: 20px;
    padding: 5px 12px;
    font-weight: 600;
    color: #020057;
    border-radius: 4px;
    border: 1px solid #827dff;
    background: rgba(255, 255, 255, 0.3);
}

.landingPages_highlightButtonItem__HYUsZ:hover {
    background: #f5f5f5;
    text-decoration: none;
}

.landingPages_highlightMediaCarousel__vkVXe {
    display: flex;
    height: fit-content;
    width: 350px;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.landingPages_highlightMediaCarousel__vkVXe h4 {
    text-align: center;
}

.landingPages_highlightMediaCarouselButtons__YaMhp {
    display: block;
}

.landingPages_highlightMediaCarouselButtons__YaMhp:hover {
    background: none;
}

.landingPages_previousButton__Cqkdz {
    transform: rotate(180deg);
}

.landingPages_highlightMediaCarouselButtons__YaMhp i,
.landingPages_highlightMediaCarouselButtons__YaMhp svg {
    width: 24px;
    height: 24px;
}

.landingPages_highlightMediaCarouselButtons__YaMhp path {
    fill: #a7a5f5;
}

.landingPages_highlightMediaPagination__OvkTW {
    display: flex;
    align-items: center;
    padding-top: 12px;
    gap: 12px;
}

.landingPages_paginationItem__onInW {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #0078d4;
}

.landingPages_paginationItemSelected__nq34L {
    width: 6px;
    height: 6px;
    border-radius: 6px;
}

@media only screen and (max-width: 900px) {
    .landingPages_highlightContainer__0ykxE:nth-child(odd) .landingPages_highlight__1fLzT,
    .landingPages_highlightContainer__0ykxE:nth-child(even) .landingPages_highlight__1fLzT {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }

    .landingPages_highlightMedia__huD\+e {
        width: 100%;
    }

    .landingPages_highlightMedia__huD\+e img {
        width: 100%;
        min-width: 300px;
        max-width: 500px;
    }

    .landingPages_highlightTextWrapper__Xe84t {
        text-align: center;
        align-items: center;
        width: 90%;
        margin: auto;
        max-width: 550px;
    }

    .landingPages_highlightContainer__0ykxE h3 {
        text-align: center;
    }

    .landingPages_highlightSection__Pb5tC {
        line-height: 24px;
    }

    .landingPages_highlightButtonsContainer__s9YfW {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Clarity Offers */

.landingPages_clarityOffersSection__T3rT\+ {
    display: flex;
    align-items: center;
    padding: 96px 80px;
    flex-direction: column;
    gap: 50px;
}

.landingPages_clarityOffersContainer__14ooD {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: center;
    gap: 50px;
    max-width: 1700px;
}

.landingPages_clarityOfferInstance__YDaJX {
    max-width: 320px;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landingPages_clarityOfferImage__e1YKD {
    max-width: 100%;
    max-height: 350px;
    min-width: 250px;
    margin-bottom: 36px;
    width: auto;
}

.landingPages_clarityOfferText__uO4ib h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    text-align: center;
}

.landingPages_clarityOfferInstance__YDaJX p {
    width: 100%;
    max-width: 320px;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    margin: 12px 0px 24px;
}

.landingPages_clarityOfferLearnMore__L4MyF {
    margin-top: auto;
    border: 1px solid #0078d4;
    color: #004578;
    border-radius: 4px;
    padding: 4px 16px;
    font-weight: 600;
    line-height: 22px;
    text-wrap: nowrap;
}

.landingPages_clarityOfferLearnMore__L4MyF:hover {
    background-color: #eff6fc;
    text-decoration: none;
    color: #004578;
}

@media only screen and (min-width: 1440px) {
    .landingPages_clarityOffersContainer__14ooD {
        gap: 120px;
    }
}

@media only screen and (max-width: 900px) {
    .landingPages_clarityOffersSection__T3rT\+ {
        padding: 40px 20px;
        gap: 30px;
    }

    .landingPages_clarityOfferInstance__YDaJX {
        width: 90%;
    }

    .landingPages_clarityOffersContainer__14ooD {
        grid-template-columns: auto;
    }

    .landingPages_clarityOfferText__uO4ib {
        min-height: unset;
    }

    .landingPages_clarityOfferInstance__YDaJX p {
        max-width: 450px;
    }

    .landingPages_standaloneFeaturesContainer__8MIvo table {
        margin: 50px 30px 60px;
    }
}

/* FAQs */

.landingPages_faqSection__WeaLW {
    background-image: url("https://claritystatic.azureedge.net/images/purpleCircle.png");
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: calc(100% + 195px);
    min-height: 520px;
    padding: 0px 80px;
    margin: 80px 0px;
    gap: 40px;
    display: flex;
    align-items: center;
    background-color: transparent;
}

@media only screen and (min-width: 1380px) {
    .landingPages_faqSection__WeaLW {
        background-position: calc(50% + 620px);
    }
    .landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqsColumn__jT8sw {
        background-position: right;
    }
}

@media only screen and (max-width: 640px) {
    .landingPages_faqSection__WeaLW {
        padding: 40px 20px;
        background-position-x: calc(100% + 255px);
    }
    .landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqsColumn__jT8sw {
        background-position: right;
    }
}

.landingPages_singleCol__poK9N {
    flex-direction: row;
    justify-content: center;
}

.landingPages_doubleCol__\+PI-m {
    flex-direction: column;
    background-position-y: 160px;
    min-height: 680px;
}

.landingPages_faqSectionSingleColTitle__F-3T3 {
    width: 50%;
    row-gap: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 624px;
}

.landingPages_faqSectionSingleColTitle__F-3T3 .landingPages_landingSectionTitle__1G9cc {
    text-align: left;
}

.landingPages_faqSectionSingleColTitleBtn__p3psy {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #827dff;
    border-radius: 4px;
}

.landingPages_faqSectionSingleColTitleBtn__p3psy a:hover {
    background: linear-gradient(92deg, #f1f5ff 1.38%, #f9f0fe 50%, #fcf0f7 98.62%);
}

.landingPages_faqSectionSingleColTitleBtn__p3psy a {
    font-weight: 600;
    color: #020057;
}

.landingPages_faqSectionSingleColTitleBtn__p3psy a:focus-visible {
    outline: 1px solid #000;
}

.landingPages_faqSectionSingleColTitleBtn__p3psy:hover {
    background-color: #eff6fc;
    text-decoration: none;
    color: #004578;
}

.landingPages_faqSectionDoubleColContainer__AZV9u {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 40px;
}

.landingPages_faqsColumn__jT8sw {
    width: 50%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media only screen and (max-width: 767px) {
    .landingPages_faqSectionDoubleColContainer__AZV9u {
        flex-wrap: wrap;
        gap: 24px;
    }

    .landingPages_faqsColumn__jT8sw {
        width: 100%;
    }
}

.landingPages_faqCard__hNF2G {
    box-shadow: 0px 4.8px 14.4px 0px #837eff4d;
    border-radius: 8px;
    background: #ffffff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
}

.landingPages_faqQuestion__iU-fw {
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
}

.landingPages_faqQuestion__iU-fw h2 {
    font-weight: 600;
    color: #161514;
    padding-right: 20px;
}

.landingPages_faqAnswer__vNYwr {
    padding-right: 34px;
}

@media only screen and (max-width: 900px) {
    .landingPages_paginationChevron__RxVFt {
        display: none;
    }

    .landingPages_paginationChevronInline__OdnR1 {
        display: block;
    }

    .landingPages_paginationControls__yiC78 {
        justify-content: space-between;
    }
}

/* Landing page header */

.landingPages_landingPageHeaderSection__Gmkp4 {
    background: linear-gradient(280.24deg, #a0d6ff 0%, #c2e3ff 36.46%, #dff0ff 50%, #f5fbff 77.08%);
    height: fit-content;
    min-height: 480px;
    padding: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.landingPages_landingPageBanner__ADvtI {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1700px;
}

.landingPages_landingPageHeaderSection__Gmkp4 img {
    width: calc(50% - 40px);
    max-height: 480px;
    object-fit: scale-down;
}

.landingPages_landingPageBannerContent__XOAxc {
    padding-left: 90px;
    display: flex;
    flex-direction: column;
    max-width: 50%;
}

.landingPages_landingPageBannerContent__XOAxc h2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #353535;
}

.landingPages_landingPageBannerContent__XOAxc h1 {
    font-weight: 600;
    font-size: 58px;
    line-height: 67px;
    color: #353535;
    padding-bottom: 16px;
}

.landingPages_landingPageBannerSubtitle__ZU0nI,
.landingPages_stepCardStep__B8b5J,
.landingPages_stepCardHeader__\+EX8t > h3,
.landingPages_stepCardText__nBqNQ {
    font-size: 16px;
    line-height: 22px;
}

.landingPages_landingPageBannerSubtitle__ZU0nI {
    font-weight: 400;
    color: #3b3a39;
}

.landingPages_landingPageActionButtons__XKIEr {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.landingPages_landingPageActionButtons__XKIEr .ms-Button,
.landingPages_extraButtons__npxRH a {
    min-width: 156px;
    height: 38px;
    box-sizing: content-box;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 47px;
    padding: 5px 0px;
    box-shadow:
        0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13),
        0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1);
}

.landingPages_landingPageActionButtons__XKIEr .ms-Button-textContainer {
    text-wrap: nowrap;
    padding: 0px 12px;
}

@media only screen and (max-width: 1440px) {
    .landingPages_landingPageBannerContent__XOAxc {
        padding: 20px 0px 20px 48px;
    }
}

@media only screen and (max-width: 1000px) {
    .landingPages_landingPageHeaderSection__Gmkp4 {
        height: fit-content;
        min-height: 480px;
    }

    .landingPages_landingPageHeaderSection__Gmkp4 img {
        display: none;
    }

    .landingPages_landingPageBanner__ADvtI {
        justify-content: center;
        max-width: 100%;
    }

    .landingPages_landingPageBannerContent__XOAxc {
        text-align: center;
        align-items: center;
        max-width: 100%;
        padding: 20px;
    }

    .landingPages_landingPageActionButtons__XKIEr {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Free Features (Pricing landing page) */

.landingPages_freeFeaturesSection__ngw8m {
    padding: 80px 96px;
    display: flex;
    gap: 80px;
    align-items: center;
    justify-content: center;
}

.landingPages_freeFeaturesTitleContainer__OCeJK {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #323130;
    width: 50%;
    max-width: 700px;
}

.landingPages_freeFeatureTitle__nEEfd {
    font-size: 36px;
    line-height: 34px;
    font-weight: 600;
    color: inherit;
    text-align: left;
    margin-bottom: 36px;
}

.landingPages_freeFeatureSubtitle__cDtt0 {
    font-size: 16px;
    line-height: 26px;
}

.landingPages_freeFeaturesListContainer__rfpSH {
    width: 50%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.landingPages_freeFeaturesList__hUhNQ {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.landingPages_freeFeatureItem__E5sjx {
    display: flex;
    align-items: center;
    gap: 12px;
}

.landingPages_freeFeatureItem__E5sjx svg {
    min-width: 32px;
    min-height: 32px;
}

.landingPages_freeFeatureItem__E5sjx span {
    color: #323130;
    font-size: 16px;
}

.landingPages_freeFeaturesToggleButton__o-DMN {
    font-size: 14px;
    line-height: 20px;
    /* biome-ignore lint/complexity/noImportantStyles: suppressing to unblock unrelated changes */
    padding: 5px 12px !important;
    font-weight: 600;
    /* biome-ignore lint/complexity/noImportantStyles: suppressing to unblock unrelated changes */
    color: #020057 !important;
    /* biome-ignore lint/complexity/noImportantStyles: suppressing to unblock unrelated changes */
    border: 1px solid #827dff !important;
    background: rgba(255, 255, 255, 0.3);
    width: fit-content;
}

@media only screen and (max-width: 900px) {
    .landingPages_freeFeaturesSection__ngw8m {
        flex-direction: column;
        padding: 80px 20px;
        gap: 40px;
    }

    .landingPages_freeFeaturesTitleContainer__OCeJK,
    .landingPages_freeFeaturesListContainer__rfpSH {
        width: 100%;
        align-items: center;
    }

    .landingPages_freeFeatureSubtitle__cDtt0,
    .landingPages_freeFeatureTitle__nEEfd {
        text-align: center;
    }
}

.landingPages_mobileWorksWithSection__mMoSe {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 96px;
    padding: 0px 96px 96px;
    gap: 60px;
    background-size: 100% 100%;
    flex-direction: column;
}

@media only screen and (min-width: 1920px) {
    .landingPages_mobileWorksWithSection__mMoSe {
        background-image: url("https://claritystatic.azureedge.net/images/purpleBG2440-1920.png");
    }
}

@media only screen and (min-width: 1440px) and (max-width: 1920px) {
    .landingPages_mobileWorksWithSection__mMoSe {
        background-image: url("https://claritystatic.azureedge.net/images/purpleBG1920-1440.png");
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1440px) {
    .landingPages_mobileWorksWithSection__mMoSe {
        background-image: url("https://claritystatic.azureedge.net/images/purpleBG1493-1000.png");
    }
}

@media only screen and (min-width: 440px) and (max-width: 1000px) {
    .landingPages_mobileWorksWithSection__mMoSe {
        background-image: url("https://claritystatic.azureedge.net/images/purpleBG999-440.png");
    }
}

@media only screen and (max-width: 440px) {
    .landingPages_mobileWorksWithSection__mMoSe {
        padding: 0px 20px 40px;
        margin-top: 40px;
        gap: 40px;
        background-image: url("https://claritystatic.azureedge.net/images/purpleBG439-380.png");
    }
}

.landingPages_mobileFrameworksContainer__aqhZJ {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    justify-content: center;
}

.landingPages_mobileFrameworkCard__NBv8r {
    width: 360px;
    height: 112px;
    padding: 24px 24px 24px 32px;
    display: flex;
    gap: 32px;
    align-items: center;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0px 4.8px 14.4px 0px #837eff4d;
}

.landingPages_mobileFrameworkCard__NBv8r:focus-visible {
    outline: 2px solid #106ebe;
    outline-offset: 2px;
}

.landingPages_mobileFrameworksContainer__aqhZJ img {
    height: 64px;
    width: 64px;
    object-fit: contain;
}

.landingPages_mobileFrameworkLabel__00ugW {
    color: #106ebe;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}

.landingPages_mobileFeaturesSection__GLZsf {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 46px;
    padding: 0px 96px 96px;
    gap: 60px;
    flex-direction: column;
}

.landingPages_mobileFeaturesContainer__Ovr-r {
    grid-template-columns: 390px 390px 390px;
    display: grid;
    gap: 40px;
}

.landingPages_mobileFeaturesCard__Ht7ZC {
    display: flex;
    flex-direction: column;
}

.landingPages_mobileFeaturesCard__Ht7ZC i,
.landingPages_mobileFeaturesCard__Ht7ZC svg {
    height: 60px;
    width: 60px;
}

.landingPages_mobileFeatureTitle__Q9VnB {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    padding: 16px 0px 8px;
    color: #323130;
    text-align: left;
}

.landingPages_mobileFeatureText__yKt1z {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: #323130;
}

@media only screen and (min-width: 1000px) and (max-width: 1440px) {
    .landingPages_mobileFeaturesContainer__Ovr-r {
        grid-template-columns: 430px 430px;
    }

    .landingPages_mobileFeaturesSection__GLZsf {
        padding: 0px 46px 46px;
    }
}

@media only screen and (max-width: 999px) {
    .landingPages_mobileFeaturesContainer__Ovr-r {
        grid-template-columns: 400px;
    }

    .landingPages_mobileFeaturesCard__Ht7ZC {
        align-items: center;
    }

    .landingPages_mobileFeatureText__yKt1z {
        text-align: center;
    }
}

@media only screen and (max-width: 400px) {
    .landingPages_mobileFeaturesContainer__Ovr-r {
        grid-template-columns: 350px;
    }
}

/********************************************/
/*********** Brand agents landing  **************/
/********************************************/

.landingPages_landingPageBrandAgent__N0VkE,
.landingPages_blueLandingPageBrandAgent__MysDt {
    overflow: hidden;
    width: 100%;
}

.landingPages_blueLandingPageBrandAgent__MysDt {
    overflow: clip;
}

.landingPages_factsLandingContent__zDt2x {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 96px;
    gap: 80px;
    align-items: flex-start;
    margin: 0 auto;
    box-sizing: content-box;
    position: relative;
}

.landingPages_factsLandingContent__zDt2x.landingPages_bluePageFactsLandingContent__K9InL {
    max-width: 1280px;
    padding: 68px 96px;
}

.landingPages_factsLandingContent__zDt2x .landingPages_factsListTitle__vCT7B,
.landingPages_setupContentContainer__0basu > h2,
.landingPages_startContentContainer__PwTQL > h2,
.landingPages_impactContentContainer__unXpo > h2,
.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqSectionSingleColTitle__F-3T3,
.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_landingSectionTitle__1G9cc {
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
}

.landingPages_bluePageStartContentBackground__P\+wre .landingPages_startContentContainer__PwTQL > h2 {
    font-size: 32px;
    color: #323559;
}

.landingPages_bluePageImpactContentContainer__rAVSy > h2 {
    font-size: 32px;
    line-height: normal;
    max-width: 654px;
    text-align: center;
}

.landingPages_factsLandingContent__zDt2x.landingPages_bluePageFactsLandingContent__K9InL .landingPages_factsListTitle__vCT7B {
    font-size: 50px;
    line-height: 61px;
}

.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqSectionSingleColTitle__F-3T3 {
    width: 100%;
    min-width: 100%;
    align-items: center;
}

.landingPages_factsLandingContent__zDt2x .landingPages_factsListTitle__vCT7B span.landingPages_orangeToPurpleGrandient__hoP4h,
.landingPages_factsLandingContent__zDt2x .landingPages_factsListTitle__vCT7B span.landingPages_blueToPurpleGrandient__RdLq0,
.landingPages_factsLandingContent__zDt2x .landingPages_factsListTitle__vCT7B span.landingPages_orangeToPinkGradient__MYD8U,
.landingPages_setupContentContainer__0basu .landingPages_factsListTitle__vCT7B span.landingPages_orangeToPurpleGrandient__hoP4h,
.landingPages_impactContentContainer__unXpo .landingPages_factsListTitle__vCT7B span.landingPages_purpleToBlueGradient__EmGp4,
.landingPages_startContentContainer__PwTQL span.landingPages_orangeToPurpleGrandient__hoP4h {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landingPages_orangeToPurpleGrandient__hoP4h {
    background: linear-gradient(90deg, #df3c99 0%, #ae3af1 100%);
}

.landingPages_blueToPurpleGrandient__RdLq0 {
    background: linear-gradient(90deg, #4e83ff 0%, #ae3af1 100%);
}

.landingPages_orangeToPinkGradient__MYD8U {
    background: linear-gradient(90deg, #ee5e36 0%, #df3c99 100%);
}

.landingPages_purpleToBlueGradient__EmGp4 {
    background: linear-gradient(97deg, #aa65ff 0%, #009af9 49.25%, #656aff 98.5%);
}

.landingPages_brandAgentLandingHeader__48xET {
    display: flex;
    position: relative;
    width: 100%;
    align-items: center;
    flex-flow: column;
    padding: 80px;
    gap: 40px;
}

.landingPages_brandAgentLandingHeaderContent__ij19- {
    display: flex;
    max-height: 875px;
    width: 100%;
    align-items: center;
    flex-flow: column;
    text-align: center;
    white-space: normal;
}

.landingPages_brandAgentLandingHeader__48xET .landingPages_brandAgentLandingHeaderContent__ij19- > .landingPages_buttonWrapper__\+7Rdc,
.landingPages_startContentBackground__5CVjO .landingPages_startContentContainer__PwTQL > .landingPages_buttonWrapper__\+7Rdc,
.landingPages_setupContentContainer__0basu > .landingPages_buttonWrapper__\+7Rdc {
    height: 44px;
    border-radius: 44px;
    z-index: 10;
}

.landingPages_brandAgentLandingHeader__48xET button.ms-Button--primary,
.landingPages_startContentBackground__5CVjO button.ms-Button--primary {
    border-radius: 44px;
}

.landingPages_landingPrimaryButton__1YWvP button.ms-Button--primary:focus::after {
    border-radius: 44px;
}

.landingPages_brandAgentLandingHeaderGradientPurple__lscy8,
.landingPages_brandAgentLandingHeaderGradientOrange__9-s7t,
.landingPages_brandAgentLandingHeaderGradientPink__HlWKd,
.landingPages_brandAgentLandingHeaderGradientPurpleBlue__O21cq,
.landingPages_brandAgentLandingHeaderGradientPurpleBlueSecond__hS4jE,
.landingPages_brandAgentLandingHeaderGradientOrangeBlue__XfvtZ,
.landingPages_brandAgentLandingHeaderGradientBlue__RsI\+W,
.landingPages_launchAiBackgroundGradient__k7HkO,
.landingPages_joinAgenticWebBackgroundGradient__VrfH5,
.landingPages_joinAgenticWebBackgroundSecondGradient__c-Zqg {
    position: absolute;
    z-index: -1;
    filter: blur(150px);
    /* Decorative blurred gradients overflow their section; keep them from eating clicks on content above. */
    pointer-events: none;
}

.landingPages_brandAgentLandingHeaderGradientPurple__lscy8 {
    width: 766px;
    height: 913px;
    left: -158px;
    top: -104px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(78, 131, 255, 0.2) 0%, rgba(174, 58, 241, 0) 100%);
    transform: rotate(51.91deg);
}

.landingPages_brandAgentLandingHeaderGradientOrange__9-s7t {
    width: 704px;
    height: 904px;
    left: auto;
    top: 40px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(238, 94, 54, 0.26) 0%, rgba(255, 255, 255, 0) 100%);
    right: 0;
}

.landingPages_brandAgentLandingHeaderGradientPink__HlWKd {
    width: 1901px;
    height: 554px;
    top: 361px;
    background: radial-gradient(74.37% 74.37% at 50% 50%, rgba(223, 60, 153, 0.26) 0%, rgba(255, 255, 255, 0) 73.3%);
}

.landingPages_brandAgentLandingHeaderGradientPurpleBlue__O21cq {
    width: 800px;
    height: 800px;
    left: 70%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(6deg);
    border-radius: 800px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(52, 77, 243, 0.24) 0%, rgba(52, 77, 243, 0) 100%);
}

.landingPages_brandAgentLandingHeaderGradientPurpleBlueSecond__hS4jE {
    width: 1500px;
    height: 1200px;
    left: 20%;
    top: 90%;
    transform: translate(-50%, -50%) rotate(-6deg);
    border-radius: 1500px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(52, 77, 243, 0.24) 0%, rgba(52, 77, 243, 0) 100%);
}

.landingPages_brandAgentLandingHeaderGradientOrangeBlue__XfvtZ {
    width: 1180px;
    height: 820px;
    left: 90%;
    top: 100%;
    transform: translate(-50%, -50%) rotate(-6deg);
    border-radius: 1180px;
    background: radial-gradient(74% 74% at 50% 50%, rgba(226, 55, 68, 0.24) 0%, rgba(226, 55, 68, 0) 73%);
}

.landingPages_brandAgentLandingHeaderGradientBlue__RsI\+W {
    width: 1960px;
    height: 1320px;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) rotate(-8deg);
    border-radius: 1500px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(78, 131, 255, 0.27) 0%, rgba(78, 131, 255, 0) 100%);
}

.landingPages_agentTitle__JvSyo {
}

.landingPages_brandAgentLandingHeader__48xET .landingPages_agentTitle__JvSyo {
    font-weight: 600;
    font-size: 72px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 116px;
    max-width: 100%;
    white-space: normal;
}

.landingPages_blueLandingPageBrandAgent__MysDt .landingPages_agentTitle__JvSyo {
    font-size: 72px;
    line-height: 72px;
    font-weight: 600;
    -webkit-background-clip: text;
    -webkit-text-fill-color: unset;
    max-width: 100%;
    white-space: normal;
    color: #000000;
    letter-spacing: -2.88px;
}

.landingPages_brandAgentLandingHeader__48xET .landingPages_agentSubtitle__-vXn9 {
    font-size: 40px;
    color: #6b4d88;
}

.landingPages_brandAgentLandingHeader__48xET .landingPages_agentDescription__penlE {
    font-size: 18px;
    color: #616161;
    margin-bottom: 40px;
    line-height: 24px;
}

.landingPages_blueLandingPageBrandAgent__MysDt .landingPages_brandAgentLandingHeader__48xET .landingPages_agentDescription__penlE {
    font-size: 35px;
    color: #6b6b73;
    line-height: 50px;
    max-width: 870px;
    margin-top: 34px;
}

.landingPages_setupContentContainer__0basu .landingPages_freeDuringBeta__SeEqc,
.landingPages_startContentContainer__PwTQL .landingPages_freeDuringBeta__SeEqc,
.landingPages_brandAgentLandingHeader__48xET .landingPages_freeDuringBeta__SeEqc {
    color: #605e5c;
    margin-top: 4px;
    font-size: 14px;
}

.landingPages_setupContentContainer__0basu .landingPages_freeDuringBeta__SeEqc {
    margin-top: -36px;
}

.landingPages_startContentContainer__PwTQL .landingPages_freeDuringBeta__SeEqc {
    margin-top: -22px;
}

.landingPages_setupContentContainer__0basu .landingPages_landingPrimaryButton__1YWvP,
.landingPages_startContentContainer__PwTQL .landingPages_landingPrimaryButton__1YWvP,
.landingPages_brandAgentLandingHeader__48xET .landingPages_landingPrimaryButton__1YWvP {
    /* biome-ignore lint/complexity/noImportantStyles: suppressing to unblock unrelated changes */
    height: 52px !important;
}

.landingPages_blueLandingPageBrandAgent__MysDt .landingPages_brandAgentLandingHeader__48xET .landingPages_landingPrimaryButton__1YWvP {
    background: linear-gradient(90deg, #4e83ff 0%, #8b4df4 52%, #ae3af1 100%);
}

.landingPages_setupContentContainer__0basu .landingPages_landingPrimaryButton__1YWvP button.ms-Button--primary,
.landingPages_startContentContainer__PwTQL .landingPages_landingPrimaryButton__1YWvP button.ms-Button--primary,
.landingPages_brandAgentLandingHeader__48xET .landingPages_landingPrimaryButton__1YWvP button.ms-Button--primary {
    font-size: 18px;
}

.landingPages_headerAnimationContainer__rKjhT {
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    padding: 48px 40px 48px 56px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    max-width: 900px;
    max-height: 400px;
    z-index: 1;
    width: 100%;
    height: 400px;
}

.landingPages_headerAnimationContainer__rKjhT video {
    width: 100%;
    max-width: 800px;
    max-height: 400px;
}

.landingPages_headerAnimationContainer__rKjhT img {
    width: 100%;
    max-width: 800px;
    max-height: 400px;
    transition: opacity 1s ease-in-out;
}

/* baLandingPage header: 1200x750 frame with a 1160x715 video inside (20px/17.5px inset). */
.landingPages_blueHeaderAnimationContainer__jAoj2.landingPages_headerAnimationContainer__rKjhT {
    box-sizing: border-box;
    padding: 17.5px 20px;
    gap: 0;
    max-width: 1200px;
    aspect-ratio: 1200 / 750;
    max-height: 750px;
    height: auto;
    overflow: hidden;
}

.landingPages_blueHeaderAnimationContainer__jAoj2.landingPages_headerAnimationContainer__rKjhT video,
.landingPages_blueHeaderAnimationContainer__jAoj2.landingPages_headerAnimationContainer__rKjhT img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 24px;
}

.landingPages_topSalesBackgroundGradient__ZYVKb,
.landingPages_smartAssistantBackgroundGradient__sN1dS,
.landingPages_configureYourAgentBackgroundGradient__ZgUNf {
    position: absolute;
    z-index: -1;
    opacity: 0.5;
    pointer-events: none;
}

.landingPages_topSalesBackgroundGradient__ZYVKb {
    filter: blur(80px);
    width: 810px;
    height: 951px;
    border-radius: 951px;
    background: linear-gradient(146deg, rgba(255, 178, 111, 0.13) 10.92%, rgba(223, 60, 153, 0.1) 89.08%);
    right: -18px;
}

.landingPages_launchAiBackgroundGradient__k7HkO {
    width: 620px;
    height: 420px;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%) rotate(-6deg);
    border-radius: 800px;
    background: radial-gradient(55% 55% at 50% 50%, rgba(47, 107, 255, 0.25) 0%, rgba(47, 107, 255, 0) 100%);
}

.landingPages_joinAgenticWebBackgroundGradient__VrfH5 {
    width: 1880px;
    height: 1280px;
    left: 20%;
    top: 20%;
    transform: translate(-50%, -50%) rotate(6deg);
    border-radius: 1880px;
    background: radial-gradient(55% 55% at 50% 50%, rgba(240, 69, 60, 0.24) 0%, rgba(240, 69, 60, 0) 100%);
}

.landingPages_joinAgenticWebBackgroundSecondGradient__c-Zqg {
    width: 1560px;
    height: 1060px;
    left: 80%;
    top: 80%;
    transform: translate(-50%, -50%) rotate(6deg);
    border-radius: 1560px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(78, 131, 255, 0.27) 0%, rgba(78, 131, 255, 0) 100%);
}

.landingPages_smartAssistantBackgroundGradient__sN1dS {
    transform: rotate(65deg);
    filter: blur(80px);
    height: 893px;
    width: 947px;
    left: -18px;
    border-radius: 947px;
    background: linear-gradient(69deg, rgba(223, 60, 153, 0.08) 9.17%, rgba(174, 58, 241, 0.08) 94.18%);
}

.landingPages_configureYourAgentBackgroundGradient__ZgUNf {
    width: 838px;
    height: 999px;
    transform: rotate(90deg);
    right: -18px;
    border-radius: 999px;
    background: linear-gradient(73deg, rgba(174, 58, 241, 0.08) 12.07%, rgba(78, 131, 255, 0.08) 84.35%);
    filter: blur(80px);
}

.landingPages_factsColumns__VDgVE {
    display: flex;
    gap: 24px;
    width: 100%;
    justify-content: center;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: content-box;
}

.landingPages_bluePageFactsLandingContent__K9InL .landingPages_factsColumns__VDgVE {
    margin: 0;
    justify-content: unset;
}

.landingPages_factsColumnComponent__92i3h {
    display: flex;
    gap: 32px;
    flex-flow: column;
    min-width: 50%;
}

.landingPages_factsLandingContent__zDt2x .landingPages_factsImageContent__35Uor {
    background-color: #fdf9ff;
    border-radius: 40px;
    width: 100%;
    height: 510px;
    position: relative;
}

.landingPages_bluePageFactsLandingContent__K9InL.landingPages_factsLandingContent__zDt2x .landingPages_factsImageContent__35Uor {
    /* Transparent container keeps its original height so the sticky card-stack reveal
       still works; the translucent frame below hugs the video itself. */
    background-color: transparent;
    opacity: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.landingPages_bluePageFactsLandingContent__K9InL.landingPages_factsLandingContent__zDt2x .landingPages_factsImageContent__35Uor .landingPages_autoplayMediaWrapper__cVt4Z {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 40px;
}

.landingPages_bluePageFactsLandingContent__K9InL.landingPages_factsLandingContent__zDt2x .landingPages_factsImageContent__35Uor video,
.landingPages_bluePageFactsLandingContent__K9InL.landingPages_factsLandingContent__zDt2x .landingPages_factsImageContent__35Uor img {
    max-height: none;
    border-radius: 24px;
}

.landingPages_factsLandingContent__zDt2x .landingPages_factsImageContent__35Uor video {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
}

.landingPages_factsLandingContent__zDt2x .landingPages_factsImageContent__35Uor img {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
}

.landingPages_autoplayMediaWrapper__cVt4Z {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.landingPages_autoplayMediaWrapper__cVt4Z > video,
.landingPages_autoplayMediaWrapper__cVt4Z > img {
    position: static !important;
    display: block;
    width: 100% !important;
    max-height: 100%;
    transform: none !important;
    top: auto !important;
    left: auto !important;
}

.landingPages_autoplayControl__zzuYf {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(32, 31, 30, 0.85);
    color: #ffffff;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition:
        opacity 120ms ease-in-out,
        background-color 120ms ease-in-out;
}

.landingPages_autoplayControl__zzuYf .ms-Icon,
.landingPages_autoplayControl__zzuYf i {
    font-size: 28px;
    line-height: 1;
    color: #ffffff;
}

.landingPages_autoplayControlVisible__PmAHs {
    opacity: 1;
    pointer-events: auto;
}

/* Robust, CSS-only reveal: show the control whenever the media is hovered or
   anything inside the wrapper (i.e. the control) receives focus. This does not
   depend on React state timing or the :focus-visible heuristic, so keyboard
   users reliably see the control the instant they tab to it. */
.landingPages_autoplayMediaWrapper__cVt4Z:hover .landingPages_autoplayControl__zzuYf,
.landingPages_autoplayMediaWrapper__cVt4Z:focus-within .landingPages_autoplayControl__zzuYf {
    opacity: 1;
    pointer-events: auto;
}

.landingPages_autoplayControl__zzuYf:hover {
    background: #201f1e;
}

.landingPages_autoplayControl__zzuYf:focus-visible {
    outline: none;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.35),
        0 0 0 3px #ffffff;
}

.landingPages_factsList__Mbwad {
    display: flex;
    gap: 32px;
    flex-flow: column;
    min-width: 50%;
}

.landingPages_factsListItem__AMfNJ {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.landingPages_factsListItem__AMfNJ .landingPages_factTitle__jdUhb {
    font-size: 18px;
    line-height: 24px;
    gap: 12px;
    display: flex;
    align-items: self-start;
    color: #17233e;
}

.landingPages_factsListItem__AMfNJ .landingPages_factTitle__jdUhb i {
    width: 20px;
    height: 20px;
}

/* Inline so it sits on the first text line and the copy wraps around it. */
.landingPages_factTag__IDITc {
    display: inline-flex;
    height: 24px;
    margin-right: 8px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #eaeaff;
    color: #020057;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    vertical-align: text-bottom;
}

.landingPages_factsListItem__AMfNJ p {
    color: #454443;
}

.landingPages_factsListItem__AMfNJ p {
    margin-left: 32px;
    font-size: 16px;
    line-height: 22px;
}

.landingPages_agentGradientDefaultButton__FXml5 {
}

.landingPages_agentGradientDefaultButton__FXml5 .ms-Button--default:hover {
    background:
        linear-gradient(#f7ebfe) padding-box,
        linear-gradient(90deg, #4e83ff, #ae3af1, #df3c99, #ee5e36) border-box;
}

.landingPages_startContentBackground__5CVjO {
    position: relative;
    background: linear-gradient(90deg, #f1ecfb 0%, #faeaf3 50%, #fef0ee 100%);
}

.landingPages_startContentBackgroundGradient__6bvu3 {
    filter: blur(160px);
    top: 0;
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(
        70.29% 70.29% at 67.5% 56.43%,
        #4e83ff 5.29%,
        #ae3af1 28.37%,
        #df3c99 50.11%,
        #ee5e36 64.42%,
        #ffb26f 82.08%
    );
    right: -305px;
    bottom: -436px;
    opacity: 0.9;
}

.landingPages_startContentBackgroundGradientPink__p7hhc,
.landingPages_startContentBackgroundGradientOrange__a5oYl,
.landingPages_startContentBackgroundGradientPurple__ooMoC {
    position: absolute;
    z-index: -1;
    filter: blur(150px);
}

.landingPages_startContentBackgroundGradientPurple__ooMoC {
    background: radial-gradient(50% 50% at 50% 50%, rgba(78, 131, 255, 0.18) 0%, rgba(174, 58, 241, 0) 100%);
    width: 803px;
    height: 1057px;
    transform: rotate(35.682deg);
    flex-shrink: 0;
    border-radius: 1057px;
}

.landingPages_startContentBackgroundGradientOrange__a5oYl {
    background: radial-gradient(50% 50% at 50% 50%, rgba(238, 94, 54, 0.26) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 1173px;
    width: 1173px;
    height: 729px;
    flex-shrink: 0;
}

.landingPages_startContentBackgroundGradientPink__p7hhc {
    fill: radial-gradient(74.37% 74.37% at 50% 50%, rgba(223, 60, 153, 0.3) 0%, rgba(255, 255, 255, 0) 73.3%);
    width: 2704px;
    height: 281px;
    flex-shrink: 0;
}

.landingPages_startContentContainer__PwTQL {
    margin: 0 auto;
    box-sizing: content-box;
    padding: 80px;
    display: flex;
    flex-flow: column;
    gap: 26px;
    position: relative;
    z-index: 100;
    max-width: 1280px;
    align-items: center;
}

.landingPages_startContentContainer__PwTQL p {
    font-size: 16px;
    line-height: 22px;
}

.landingPages_bluePageStartContentBackground__P\+wre .landingPages_startContentContainer__PwTQL p {
    color: #6b6968;
}

.landingPages_testimonialCards__-zLo0 {
    padding: 20px 0;
    max-width: 1280px;
    margin: 0 auto;
    justify-content: center;
    z-index: 10;
    width: 100%;
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
}

.landingPages_testimonialCards__-zLo0 span {
    text-align: center;
    font-weight: 600;
    line-height: 24px;
    font-size: 18px;
    color: #616161;
    margin-bottom: 12px;
}

.landingPages_testimonialCardContainer__heAzi > img {
    max-width: 120px;
    max-height: 78px;
}

.landingPages_testimonialCardsWrapper__R4KdR {
    position: relative;
    width: 100%;
    min-height: 78px;
}

/* baLandingPage logo wall: 20 logos never fit in a static row, so this variant runs the
   marquee at all viewport sizes (the 6-logo version only scrolls below 1180px). */
.landingPages_testimonialCardsWrapper__R4KdR.landingPages_blueTestimonialCardsWrapper__SmQRH {
    overflow: hidden;
}

.landingPages_testimonialCardContainer__heAzi.landingPages_blueTestimonialCardContainer__1qKus {
    width: max-content;
    gap: 0;
    align-items: center;
    animation: landingPages_scroll-left-half__GkXom 30s linear 0s infinite normal none running;
}

/* Two of these tile the track; the trailing gap makes the -50% loop seamless. */
.landingPages_blueTestimonialCardContainer__1qKus .landingPages_logoGroup__1qsIm {
    display: flex;
    flex: none;
    align-items: center;
    gap: 60px;
    padding-right: 60px;
}

.landingPages_testimonialCardContainer__heAzi.landingPages_blueTestimonialCardContainer__1qKus img {
    width: auto;
    height: 44px;
    max-width: 150px;
    max-height: 44px;
    object-fit: contain;
}

.landingPages_testimonialCardContainer__heAzi {
    display: flex;
    gap: 60px;
}

/* Bug 10698255 — the partner brand logos and the Shopify/Woo graphics
   are dark raster/brand artwork. forced-color-adjust:none alone preserves them,
   but they stay invisible on the dark HC (Aquatic) background. Put each on a
   white backing plate so they are clearly visible in every contrast theme (the
   plate blends into the light Desert background, so it is harmless there).
   Verified in-browser under Aquatic (dark) and Desert (light). */
@media (forced-colors: active) {
    .landingPages_testimonialCardContainer__heAzi img {
        forced-color-adjust: none;
        background: #ffffff;
        padding: 6px 10px;
        border-radius: 6px;
        box-sizing: border-box;
    }

    .landingPages_headerFooterContainer__mcDlF i,
    .landingPages_headerFooterContainer__mcDlF svg,
    .landingPages_headerFooterContainer__mcDlF img {
        forced-color-adjust: none;
        background: #ffffff;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .landingPages_headerAnimationContainer__rKjhT video,
    .landingPages_headerAnimationContainer__rKjhT img {
        forced-color-adjust: none;
    }
}

@keyframes landingPages_scroll-left__ScnrG {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-20%);
    }
}

/* Blue logo wall: one duplicate set, so a -50% shift lands the copy exactly where the original started. */
@keyframes landingPages_scroll-left-half__GkXom {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.landingPages_brandAgentLandingFAQ__Jfwx5 {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: baseline;
    background-image: url("data:image/svg+xml,<svg width=\"428\" height=\"812\" viewBox=\"0 0 428 812\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url%28%23filter0_f_1549_33526%29\"><ellipse cx=\"431\" cy=\"406.349\" rx=\"231\" ry=\"205.5\" fill=\"url%28%23paint0_radial_1549_33526%29\" fill-opacity=\"0.2\"/></g><defs><filter id=\"filter0_f_1549_33526\" x=\"0\" y=\"0.848633\" width=\"862\" height=\"811\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/><feGaussianBlur stdDeviation=\"100\" result=\"effect1_foregroundBlur_1549_33526\"/></filter><radialGradient id=\"paint0_radial_1549_33526\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix%28183.083 159.092 -178.833 176.968 431 406.349%29\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"%23DF3C99\" stop-opacity=\"0.13\"/><stop offset=\"1\" stop-color=\"%23FFB26F\"/></radialGradient></defs></svg>");
}

.landingPages_brandAgentLandingFAQ__Jfwx5.landingPages_faqSection__WeaLW {
    background-position: right;
    margin: 60px 0;
}

.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqsColumn__jT8sw {
    width: 100%;
    max-width: 100%;
    gap: 0px;
    font-size: 18px;
    z-index: 10;
}

.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqCard__hNF2G:first-child {
    border-top: 1px solid #a960ee29;
}

.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqCard__hNF2G {
    border-bottom: 1px solid #a960ee29;
    border-radius: 0px;
    box-shadow: none;
    background-color: transparent;
}

.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_landingSectionTitle__1G9cc {
    background-image: unset;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: unset;
    margin-bottom: 60px;
}

.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqSectionSingleColTitleBtn__p3psy {
    z-index: 10;
    cursor: pointer;
    display: flex;
    justify-self: center;
    margin: 0 auto;
    border: 1px solid transparent;
    background:
        linear-gradient(#ffffff) padding-box,
        linear-gradient(90deg, #4e83ff, #ae3af1, #df3c99, #ee5e36) border-box;
}

.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqSectionSingleColTitleBtn__p3psy:hover {
    background:
        linear-gradient(#f7ebfe) padding-box,
        linear-gradient(90deg, #4e83ff, #ae3af1, #df3c99, #ee5e36) border-box;
    text-decoration: none;
    color: #004578;
}

.landingPages_landingFAQContainer__jW1fC {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
    max-width: 1280px;
}

.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_landingFAQContainer__jW1fC {
    align-items: self-start;
    margin: 0 auto;
    box-sizing: content-box;
    display: flex;
    flex-flow: column;
}

.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_agentGradientDefaultButton__FXml5 {
    margin: auto;
}

.landingPages_setupContentContainer__0basu {
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
    padding: 80px;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: content-box;
    position: relative;
}

.landingPages_stepCards__2PLW6 {
    display: flex;
    gap: 32px;
    width: 100%;
}

.landingPages_stepCard__AuLtY {
    max-height: 380px;
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 400px;
    background: #faf8fd;
    border-radius: 20px;
    padding: 24px;
    transition: transform 0.2s ease-in-out;
}

.landingPages_stepCardHeader__\+EX8t {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-weight: 600;
}

.landingPages_brandAgentSetupGradient__d4lur {
    width: 1761px;
    height: 569px;
    position: absolute;
    z-index: -1;
    border-radius: 1761px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(78, 131, 255, 0.1) 0%, rgba(174, 58, 241, 0.07) 90%);
    filter: blur(100px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.landingPages_stepCardIcon__pfPbY {
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, 0% #f1ecfb, 50% #faeaf3, 100% #fef0ee);
}

.landingPages_stepCardImage__\+MYEf {
    display: flex;
    max-width: 100%;
}

.landingPages_stepCardText__nBqNQ {
    color: #6b6968;
    margin-bottom: 32px;
}

.landingPages_brandAgentImpactGradient__Rk3Z5 {
    width: 1271px;
    height: 778px;
    position: absolute;
    z-index: -1;
    opacity: 0.5;
    border-radius: 1761px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(78, 131, 255, 0.2) 40%, rgba(78, 131, 255, 0.07) 100%);
    filter: blur(75px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.landingPages_impactContentContainer__unXpo {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin: 0 auto;
    box-sizing: content-box;
    flex-direction: column;
    position: relative;
    max-width: 1280px;
    padding: 80px;
    align-items: center;
}

.landingPages_impactImageSection__G5B7L {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    flex-direction: row;
}

.landingPages_impactMainImage__OldNl {
    width: 100%;
    max-width: 500px;
    height: auto;
    z-index: 0;
    position: absolute;
    top: 150px;
}

.landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactMainImage__OldNl {
    top: 185px;
}

.landingPages_impactImageGroupImages__jXIj8 {
    height: fit-content;
    max-width: 100%;
    max-height: 800px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    margin-top: 28px;
    margin-left: 20px;
    z-index: 10;
}

.landingPages_impactContentImage__Q30wb {
    opacity: 0.6;
    z-index: 10;
    max-height: 230px;
    max-width: 451px;
}

.landingPages_impactImageGroupImages__jXIj8 .landingPages_impactImageWithIcon__ue11x:nth-child(1) {
    grid-column: 1 / span 2;
}

.landingPages_impactImageGroupImages__jXIj8 .landingPages_impactImageWithIcon__ue11x:nth-child(1) i {
    margin-top: -15px;
}

.landingPages_hoveredImpactImage__vjnZ0 .landingPages_impactContentImage__Q30wb {
    opacity: 1;
    box-shadow: 0 3.659px 10.977px 0 rgba(131, 126, 255, 0.3);
    transform: scale(1.2);
    transition:
        transform 0.3s ease-in-out,
        opacity 0.3s ease-in-out;
    z-index: 15;
    position: relative;
    border-radius: 8px;
}

.landingPages_impactImageWithIcon__ue11x i {
    position: absolute;
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: linear-gradient(90deg, #4e83ff 0%, #ae3af1 100%);
    align-items: center;
    z-index: 13;
    opacity: 0.6;
    justify-content: center;
    margin-top: -10px;
    transition:
        transform 0.3s ease-in-out,
        opacity 0.3s ease-in-out;
}

.landingPages_hoveredImpactImage__vjnZ0.landingPages_impactImageWithIcon__ue11x i {
    opacity: 1;
    z-index: 16;
}

.landingPages_hoveredImpactImage__vjnZ0.landingPages_impactImageWithIcon__ue11x:nth-child(1) i {
    transform: scale(1.2) translate(-35px, -10px);
}

.landingPages_hoveredImpactImage__vjnZ0.landingPages_impactImageWithIcon__ue11x:nth-child(2) i {
    transform: scale(1.2) translate(-20px, -25px);
}

.landingPages_hoveredImpactImage__vjnZ0.landingPages_impactImageWithIcon__ue11x:nth-child(3) i {
    transform: scale(1.2) translate(-15px, -25px);
}

.landingPages_impactImageWithIcon__ue11x i svg {
    align-self: center;
    height: 15px;
}

.landingPages_hoveredImpactImage__vjnZ0.landingPages_impactImageWithIcon__ue11x i {
    opacity: 1;
}

.landingPages_hoveredImpactImage__vjnZ0 svg path {
    opacity: 1;
}

.landingPages_impactImageWithIcon__ue11x svg path {
    fill: #fff;
}

.landingPages_impactCardsSection__4N6hD {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 32px;
    width: 100%;
}

.landingPages_impactCard__Ux-lo {
    cursor: default;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;
    transition: transform 0.2s ease-in-out;
}

.landingPages_impactCard__Ux-lo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4.8px 14.4px 0 rgba(131, 126, 255, 0.3);
}

.landingPages_impactMobileImageContainer__A92ZW {
    display: none;
}

.landingPages_impactCardImage__ghwwb {
    display: none;
}

.landingPages_impactCardHeader__cogRR {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.landingPages_impactCardHeader__cogRR path {
    opacity: 1;
}

.landingPages_impactCardIcon__iiJhC {
    width: 20px;
    height: 20px;
    color: #4e83ff;
}

.landingPages_impactCardTitle__anfNm {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #17233e;
    margin: 0;
    text-align: center;
}

.landingPages_impactCardDescription__Z5msO {
    font-size: 16px;
    line-height: 22px;
    color: #6b6968;
    margin: 0;
    text-align: center;
}

.landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCard__O4vks {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}

.landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCardHeading__T2P30 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCardNumber__Ym2hg {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #605e5c;
}

.landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCardIcon__9yAVw {
    width: 49px;
    height: 49px;
    color: #4e83ff;
}

.landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCardIcon__9yAVw svg {
    width: 49px;
    height: 49px;
}

.landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCardTitle__VZ6wo {
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
    color: #17233e;
    margin: 0;
}

.landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCardDescription__1RIlT {
    font-size: 16px;
    line-height: 22px;
    color: #6b6968;
    margin: 0;
}

/********************************************/
/* Client testimonials (BA landing) carousel */
/********************************************/

.landingPages_clientTestimonials__Hdd7O {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    padding: 80px 96px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    background: #fff;
}

.landingPages_clientTestimonialsPreTitle__P9Knx {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #605e5c;
    text-align: center;
}

.landingPages_clientTestimonialCard__WIkGe {
    display: flex;
    gap: 40px;
    width: 100%;
    padding: 48px;
    box-sizing: border-box;
    background: #faf7ec;
    border: 1px solid #d6e4ff;
    border-radius: 40px;
    max-width: 904px;
    max-height: 480px;
}

.landingPages_clientTestimonialContent__ATUgn {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.landingPages_clientTestimonialBody__WJczp {
    display: flex;
    flex-direction: column;
}

.landingPages_clientTestimonialBrand__6FhDa {
    margin: 0 0 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #605e5c;
}

.landingPages_clientTestimonialQuote__C8iNA {
    margin: 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 34px;
    color: #17233e;
}

.landingPages_clientTestimonialQuote__C8iNA strong {
    font-weight: 600;
}

.landingPages_clientTestimonialBrandName__AEptE {
    text-decoration: underline;
}

.landingPages_clientTestimonialAuthor__gPTx- {
    margin: 24px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #17233e;
}

.landingPages_clientTestimonialNav__abdyD {
    display: flex;
    align-items: center;
    gap: 16px;
}

.landingPages_clientTestimonialPagination__7XzmR {
    font-size: 14px;
    color: #605e5c;
}

.landingPages_clientTestimonialImage__n1JzR {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    object-fit: cover;
    background: #ece9dd;
    border-radius: 16px;
}

.landingPages_tryItOutSection__HpuPC {
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 96px;
    box-sizing: content-box;
}

.landingPages_stickyStackGroup__jr7Yg {
    position: relative;
    isolation: isolate;
}

.landingPages_stickyStackGroup__jr7Yg .landingPages_factsLandingContent__zDt2x {
    position: sticky;
    top: 0;
    z-index: 1;
}

.landingPages_stickyStackGroup__jr7Yg .landingPages_tryItOutSection__HpuPC {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin-top: -48px; /* overlap so the rounded top sits over the facts */
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 32px 32px 0 0;
}

.landingPages_stickyStackGroup__jr7Yg .landingPages_tryItOutCard__xkWUJ {
    max-width: 1280px;
    margin: 0 auto;
}

.landingPages_tryItOutBackground__H-ZWf {
    background: white;
    width: 100%;
    height: 100%;
}

.landingPages_tryItOutCard__xkWUJ {
    display: flex;
    gap: 48px;
    align-items: stretch;
    width: 100%;
}

.landingPages_tryItOutContent__RGL9N {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.landingPages_tryItOutPreTitle__Q5TbG {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #605e5c;
}

.landingPages_tryItOutTitle__lSPO7 {
    margin: 0 0 16px;
    font-size: 50px;
    font-weight: 600;
    line-height: 48px;
    color: #17233e;
}

.landingPages_tryItOutDescription__\+o9Zb {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 22px;
    color: #6b6968;
}

.landingPages_tryItOutFieldLabel__Y3NO4 {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #17233e;
}

.landingPages_tryItOutFeatures__uY8bg {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.landingPages_tryItOutPreviewLive__t\+\+Bj {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 660px;
    max-width: 474px;
    box-sizing: border-box;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e0ddd6;
}

/* Keep the preview frame defined in High Contrast where the hardcoded white bg and light border drop out. */
@media (forced-colors: active) {
    .landingPages_tryItOutPreviewLive__t\+\+Bj {
        background: Canvas;
        border-color: CanvasText;
    }
}

.landingPages_tryItOutPreviewIframe__Abdm4 {
    align-self: stretch;
    width: 100%;
    min-height: 480px;
    max-width: 474px;
    border: none;
}

.landingPages_tryItOutPreviewFallback__DTWQ\+ {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 480px;
    max-width: 474px;
    box-sizing: border-box;
    padding: 24px;
    background: #f3f2f1;
    color: #605e5c;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
}

.landingPages_tryItOutPreviewFallbackImage__wQyn\+ {
    align-self: stretch;
    width: 100%;
    min-height: 480px;
    max-width: 474px;
    object-fit: cover;
}

/* Bug 10698394 — in High Contrast (Aquatic/Desert) the impact cards in the
   "Gain clarity into..." section lose their white background and their blue
   Fluent icons (#4e83ff) do not adapt, so the card icons become invisible.
   Give each card a system border so it stays defined once the background
   collapses to Canvas, and map the card icons to CanvasText so they remain
   visible in every contrast theme. */
@media (forced-colors: active) {
    .landingPages_impactCard__Ux-lo {
        border: 1px solid CanvasText;
    }

    .landingPages_impactCardIcon__iiJhC,
    .landingPages_impactCardIcon__iiJhC i,
    .landingPages_impactCardIcon__iiJhC svg,
    .landingPages_impactCardIcon__iiJhC path,
    .landingPages_impactBaCardIcon__9yAVw,
    .landingPages_impactBaCardIcon__9yAVw i,
    .landingPages_impactBaCardIcon__9yAVw svg,
    .landingPages_impactBaCardIcon__9yAVw path {
        /* biome-ignore lint/complexity/noImportantStyles: suppressing to unblock unrelated changes */
        color: CanvasText !important;
        /* biome-ignore lint/complexity/noImportantStyles: suppressing to unblock unrelated changes */
        fill: CanvasText !important;
    }
}

/* Bug 10698394 (desktop hero illustration) — the "Gain clarity into..." mockup
   is a single cohesive product illustration: raster product screenshots plus
   gradient icon badges (chart / funnel / play). In forced-colors the badges'
   gradient background is stripped, so the badges and their white icons vanish.
   The section has no live DOM text (everything is imagery), so preserve the
   whole illustration exactly as authored in High Contrast. */
@media (forced-colors: active) {
    .landingPages_impactImageSection__G5B7L,
    .landingPages_impactImageSection__G5B7L * {
        forced-color-adjust: none;
    }
}
.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_landingFAQContainer__jW1fC {
    gap: 40px;
}

.landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqSectionSingleColTitle__F-3T3 > h2 {
    margin-bottom: 0px;
}

.landingPages_headerFooterContainer__mcDlF {
    display: flex;
    align-items: center;
    color: #616161;
    line-height: 24px;
    gap: 6px;
    z-index: 10;
}

.landingPages_blueLandingPageBrandAgent__MysDt .landingPages_headerFooterContainer__mcDlF {
    font-size: 16px;
    line-height: 24px;
}

.landingPages_headerFooterContainer__mcDlF span {
    font-size: 18px;
}

.landingPages_blueLandingPageBrandAgent__MysDt .landingPages_headerFooterContainer__mcDlF span.landingPages_pinkShowcase__BKwcl {
    font-size: 16px;
    color: #d33baf;
}

.landingPages_headerFooterContainer__mcDlF p {
    font-size: 16px;
}

.landingPages_headerFooterContainer__mcDlF i {
    display: flex;
}

.landingPages_featureFactsPreTitle__grZR- {
    display: flex;
    margin-bottom: 5px;
    gap: 8px;
}

.landingPages_featureFactsPreTitle__grZR- i {
    display: flex;
    align-items: center;
}

.landingPages_featureFactsPreTitle__grZR- span {
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(97deg, #aa65ff 0%, #009af9 49.25%, #656aff 98.5%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landingPages_featureFactsPreTitle__grZR-.landingPages_ba__cdL2Q span {
    background: linear-gradient(90deg, #4e83ff 0%, #ae3af1 33%, #df3c99 66%, #ee5e36 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.landingPages_featureFactsPreTitle__grZR-.landingPages_featureFactsPreTitleBa__jz4aE {
    margin-bottom: 25px;
}

.landingPages_featureFactsPreTitleBa__jz4aE span {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #605e5c;
    color: #605e5c;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.landingPages_factsListBa__TwMA1 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.landingPages_factsListBaItem__9AeKo {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
}

.landingPages_factsItemDivider__56hoy {
    opacity: 0.5;
    background: #8a8a8a;
    width: 32px;
    height: 1px;
}

.landingPages_factsListBaTitle__W-tkJ {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: #17233e;
}

.landingPages_factsListBaChevron__DVFQy {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #c8c6c4;
    color: #17233e;
}

.landingPages_factsListBaDescription__Acijv {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 22px;
    color: #454443;
}

.landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW h2 {
    display: none;
}

.landingPages_bluePageFactsLandingContent__K9InL .landingPages_factsListTitle__vCT7B.landingPages_factTittleOnTop__SGnOe.landingPages_factsListTitleMobile__XKysW h2 {
    display: block;
    max-width: 710px;
}

.landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR- span {
    display: none;
}

.landingPages_bluePageFactsLandingContent__K9InL .landingPages_factsListTitle__vCT7B.landingPages_factTittleOnTop__SGnOe.landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR- span {
    display: block;
}

.landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR- i,
.landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR- i svg {
    width: 0px;
    height: 0px;
}

@media only screen and (max-width: 1180px) {
    .landingPages_testimonialCardContainer__heAzi {
        display: flex;
        gap: 20px;
        width: max-content;
        animation: landingPages_scroll-left__ScnrG 10s linear 0s infinite normal none running;
    }
}

/*********** Medium screens  **************/
@media only screen and (max-width: 1023px) {
    .landingPages_factsLandingContent__zDt2x .landingPages_factsListTitle__vCT7B,
    .landingPages_setupContentContainer__0basu > h2,
    .landingPages_startContentContainer__PwTQL > h2,
    .landingPages_impactContentContainer__unXpo > h2,
    .landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqSectionSingleColTitle__F-3T3,
    .landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_landingSectionTitle__1G9cc {
        font-size: 24px;
        line-height: 32px;
    }

    .landingPages_bluePageImpactContentContainer__rAVSy > h2 {
        font-size: 32px;
        line-height: normal;
    }

    .landingPages_brandAgentLandingHeader__48xET,
    .landingPages_factsLandingContent__zDt2x,
    .landingPages_startContentContainer__PwTQL {
        padding: 80px 40px;
    }

    .landingPages_brandAgentLandingHeader__48xET .landingPages_agentTitle__JvSyo {
        font-size: 42px;
        line-height: 54px;
    }

    .landingPages_blueLandingPageBrandAgent__MysDt .landingPages_agentTitle__JvSyo {
        font-size: 72px;
        line-height: 72px;
    }

    .landingPages_brandAgentLandingHeader__48xET .landingPages_agentDescription__penlE {
        margin-top: 24px;
        font-size: 16px;
        line-height: 22px;
    }

    .landingPages_brandAgentLandingHeader__48xET .landingPages_agentSubtitle__-vXn9 {
        font-size: 16px;
        color: #6b4d88;
    }

    .landingPages_blueLandingPageBrandAgent__MysDt .landingPages_brandAgentLandingHeader__48xET .landingPages_agentDescription__penlE {
        font-size: 35px;
    }

    .landingPages_faqSection__WeaLW {
        padding: 0 40px;
    }

    .landingPages_factsList__Mbwad {
        gap: 32px;
    }

    .landingPages_factsListItem__AMfNJ .landingPages_factTitle__jdUhb,
    .landingPages_stepCardHeader__\+EX8t > h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .landingPages_factsListItem__AMfNJ p,
    .landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqQuestion__iU-fw h2,
    .landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqAnswer__vNYwr span,
    .landingPages_stepCardText__nBqNQ {
        font-size: 16px;
        line-height: 22px;
    }

    .landingPages_setupContentContainer__0basu {
        flex-direction: column;
        align-items: center;
        padding: 60px 40px;
        gap: 40px;
    }

    .landingPages_stepCards__2PLW6 {
        gap: 16px;
    }

    .landingPages_stepCard__AuLtY {
        max-width: 100%;
        width: 100%;
    }

    .landingPages_stepCardImage__\+MYEf {
        max-width: 100%;
    }

    .landingPages_stepCardText__nBqNQ {
        font-size: 16px;
    }

    .landingPages_impactCardTitle__anfNm {
        text-align: center;
        font-size: 18px;
        line-height: 24px;
    }

    .landingPages_impactCardDescription__Z5msO {
        text-align: center;
        font-size: 18px;
        line-height: 24px;
    }

    .landingPages_impactContentContainer__unXpo {
        flex-direction: column;
        padding: 60px 40px;
        gap: 40px;
        align-items: center;
    }

    .landingPages_impactMainImage__OldNl {
        top: 125px;
    }

    .landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactMainImage__OldNl {
        top: 165px;
    }

    .landingPages_impactImageSection__G5B7L,
    .landingPages_impactCardsSection__4N6hD {
        max-width: 100%;
    }

    .landingPages_impactCardsSection__4N6hD {
        gap: 16px;
    }

    .landingPages_impactCard__Ux-lo {
        padding: 20px;
        box-shadow: none;
        border: none;
    }

    .landingPages_impactCardHeader__cogRR {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqSectionSingleColTitle__F-3T3 h2 {
        min-width: 100%;
        text-align: center;
        align-self: center;
    }

    .landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCardTitle__VZ6wo,
    .landingPages_clientTestimonialQuote__C8iNA {
        font-size: 20px;
        line-height: 26px;
    }

    .landingPages_clientTestimonialQuote__C8iNA p {
        font-size: 14px;
    }

    .landingPages_tryItOutSection__HpuPC {
        padding: 60px 40px;
    }

    .landingPages_tryItOutCard__xkWUJ {
        flex-direction: column;
    }

    .landingPages_tryItOutTitle__lSPO7 {
        font-size: 32px;
        line-height: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .landingPages_factsLandingContent__zDt2x.landingPages_factsLandingContentSmall__qBHxi {
        padding: 0 40px;
        display: block;
    }

    .landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR- {
        margin-top: 60px;
        justify-content: center;
    }

    .landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR-.landingPages_featureFactsPreTitleBa__jz4aE {
        justify-content: left;
    }

    .landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW.landingPages_factsListTitleCustom__iInvt h2 {
        display: block;
        text-align: center;
        align-self: center;
        margin-bottom: 32px;
    }

    .landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW.landingPages_factsListTitleCustom__iInvt .landingPages_featureFactsPreTitle__grZR- span {
        display: flex;
    }

    .landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW.landingPages_factsListTitleCustom__iInvt .landingPages_featureFactsPreTitle__grZR- i,
    .landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW.landingPages_factsListTitleCustom__iInvt .landingPages_featureFactsPreTitle__grZR- i svg {
        width: 20px;
        height: 20px;
    }

    .landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR- {
        margin-top: 80px;
    }

    .landingPages_factsListTitle__vCT7B.landingPages_tittleBiggerThanMedium__CO6Bl.landingPages_factsListTitleCustom__iInvt {
        display: none;
    }

    .landingPages_factsListItem__AMfNJ .landingPages_factTitle__jdUhb {
        font-size: 16px;
        line-height: 22px;
    }

    .landingPages_factsLandingContent__zDt2x.landingPages_bluePageFactsLandingContent__K9InL .landingPages_factsListTitle__vCT7B {
        font-size: 50px;
        line-height: normal;
    }

    .landingPages_bluePageFactsLandingContent__K9InL .landingPages_factsListTitle__vCT7B.landingPages_factTittleOnTop__SGnOe.landingPages_factsListTitleMobile__XKysW h2 {
        text-align: left;
        font-size: 40px;
    }

    .landingPages_bluePageImpactContentContainer__rAVSy > h2 {
        text-align: center;
    }

    .landingPages_clientTestimonials__Hdd7O {
        gap: 24px;
        padding: 48px 20px;
    }

    .landingPages_clientTestimonialCard__WIkGe {
        flex-direction: column;
        gap: 32px;
        padding: 32px;
        max-height: unset;
    }

    .landingPages_clientTestimonialQuote__C8iNA {
        font-size: 22px;
        line-height: 30px;
    }

    .landingPages_clientTestimonialImage__n1JzR {
        order: -1;
        min-height: 220px;
    }

    .landingPages_clientTestimonialNav__abdyD {
        margin-top: 40px;
    }

    .landingPages_tryItOutPreviewLive__t\+\+Bj {
        min-height: 480px;
    }

    .landingPages_bluePageFactsLandingContent__K9InL .landingPages_factsColumns__VDgVE.landingPages_reverseFlex__llWTg {
        flex-direction: column-reverse;
    }

    .landingPages_bluePageFactsLandingContent__K9InL.landingPages_factsLandingContent__zDt2x .landingPages_factsImageContent__35Uor {
        height: fit-content;
    }

    .landingPages_clientTestimonialAuthor__gPTx- {
        margin: 24px 0px 0;
    }
}

/*********** Small screens  **************/
@media only screen and (max-width: 639px) {
    .landingPages_brandAgentLandingHeader__48xET,
    .landingPages_factsLandingContent__zDt2x,
    .landingPages_startContentContainer__PwTQL {
        padding: 60px 20px;
    }

    .landingPages_blueLandingPageBrandAgent__MysDt .landingPages_brandAgentLandingHeader__48xET .landingPages_agentDescription__penlE {
        font-size: 24px;
        line-height: normal;
    }

    .landingPages_topSalesBackgroundGradient__ZYVKb,
    .landingPages_smartAssistantBackgroundGradient__sN1dS,
    .landingPages_configureYourAgentBackgroundGradient__ZgUNf {
        border-radius: unset;
        opacity: 0.7;
        height: 100%;
    }

    /* The oversized desktop sizes (up to 1880x1280) bleed far past the section on mobile and cover the
       previous section's accordion controls. Pin them to their own section so they can't swallow taps. */
    .landingPages_launchAiBackgroundGradient__k7HkO,
    .landingPages_joinAgenticWebBackgroundGradient__VrfH5,
    .landingPages_joinAgenticWebBackgroundSecondGradient__c-Zqg {
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none;
        border-radius: unset;
    }

    .landingPages_topSalesBackgroundGradient__ZYVKb {
        background: linear-gradient(146deg, rgba(255, 178, 111, 0.13) 10.92%, rgba(223, 60, 153, 0.1) 89.08%);
    }

    .landingPages_smartAssistantBackgroundGradient__sN1dS {
        background: linear-gradient(69deg, rgba(223, 60, 153, 0.08) 9.17%, rgba(174, 58, 241, 0.08) 94.18%);
    }

    .landingPages_configureYourAgentBackgroundGradient__ZgUNf {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #faf4fe 20%, #f4f7ff 60%, rgba(255, 255, 255, 0) 100%);
    }

    .landingPages_brandAgentSetupGradient__d4lur {
        opacity: 1;
        height: 100%;
        border-radius: unset;
        background: linear-gradient(180deg, #fdfdfd 0%, #f7f4fe 25%, #f9f5ff 75%, #fdfdfd 100%);
    }

    .landingPages_brandAgentLandingHeaderGradientPurple__lscy8 {
        position: absolute;
        width: 384px;
        height: 558px;
        left: -158px;
        top: 0;
        transform: rotate(16.382deg);
    }

    .landingPages_brandAgentLandingHeaderGradientOrange__9-s7t {
        width: 302px;
        height: 695px;
        background: radial-gradient(50% 50% at 50% 50%, rgba(238, 94, 54, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    }

    .landingPages_brandAgentLandingHeaderGradientPink__HlWKd {
        width: 780px;
        height: 501px;
        flex-shrink: 0;
        top: 200px;
    }

    .landingPages_headerAnimationContainer__rKjhT {
        max-height: 250px;
    }

    .landingPages_blueHeaderAnimationContainer__jAoj2.landingPages_headerAnimationContainer__rKjhT {
        max-height: none;
    }

    .landingPages_headerFooterContainer__mcDlF span {
        font-size: 16px;
        line-height: 22px;
    }

    .landingPages_headerFooterContainer__mcDlF p {
        font-size: 10px;
        line-height: 12px;
    }

    .landingPages_headerFooterContainer__mcDlF {
        flex-flow: column;
        text-align: center;
    }

    .landingPages_testimonialCards__-zLo0 {
        width: 100%;
        padding: 20px 0 80px 0;
    }

    .landingPages_blueLandingPageBrandAgent__MysDt .landingPages_testimonialCards__-zLo0 {
        padding: 20px 0;
    }

    .landingPages_faqSection__WeaLW {
        padding: 0 20px;
    }

    .landingPages_setupContentContainer__0basu {
        padding: 40px 16px;
    }

    .landingPages_stepCard__AuLtY {
        padding: 20px;
    }

    .landingPages_factsColumns__VDgVE {
        flex-flow: column;
    }

    .landingPages_factsColumns__VDgVE.landingPages_reverseFlex__llWTg {
        flex-direction: column-reverse;
    }

    .landingPages_factsList__Mbwad {
        width: 100%;
    }

    .landingPages_factsLandingContent__zDt2x .landingPages_factsListTitle__vCT7B,
    .landingPages_impactContentContainer__unXpo .landingPages_factsListTitle__vCT7B,
    .landingPages_brandAgentLandingFAQ__Jfwx5 .landingPages_faqSectionSingleColTitle__F-3T3 h2,
    .landingPages_startContentContainer__PwTQL {
        text-align: center;
        align-self: center;
    }

    .landingPages_bluePageFactsLandingContent__K9InL.landingPages_factsLandingContent__zDt2x .landingPages_factsListTitle__vCT7B h2,
    .landingPages_bluePageFactsLandingContent__K9InL.landingPages_factsLandingContent__zDt2x .landingPages_featureFactsPreTitleBa__jz4aE span {
        text-align: left;
    }

    .landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW h2 {
        display: block;
    }

    .landingPages_factsListTitle__vCT7B.landingPages_tittleBiggerThanMedium__CO6Bl {
        display: none;
    }

    .landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR- span {
        display: flex;
        font-size: 14px;
    }

    .landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR- i,
    .landingPages_factsListTitle__vCT7B.landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR- i svg {
        width: 20px;
        height: 20px;
    }

    .landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR- {
        margin-top: 80px;
    }

    .landingPages_bluePageFactsLandingContent__K9InL .landingPages_factsListTitleMobile__XKysW .landingPages_featureFactsPreTitle__grZR- {
        margin-top: 0px;
    }

    .landingPages_stepCards__2PLW6 {
        flex-flow: column;
    }

    .landingPages_factsLandingContent__zDt2x,
    .landingPages_factsColumns__VDgVE {
        gap: 32px;
    }

    .landingPages_factsLandingContent__zDt2x .landingPages_factsImageContent__35Uor {
        height: 290px;
    }

    .landingPages_bluePageFactsLandingContent__K9InL.landingPages_factsLandingContent__zDt2x .landingPages_factsImageContent__35Uor {
        height: fit-content;
    }

    .landingPages_factsLandingContent__zDt2x.landingPages_bluePageFactsLandingContent__K9InL {
        padding: 38px 20px;
    }

    .landingPages_factsColumnComponent__92i3h {
        justify-content: center;
        align-items: center;
    }

    .landingPages_impactCardsSection__4N6hD {
        flex-direction: column;
    }

    .landingPages_impactCardImage__ghwwb {
        display: block;
        max-width: 272px;
    }

    .landingPages_impactCardHeader__cogRR {
        flex-direction: row;
        gap: 8px;
    }

    .landingPages_impactCard__Ux-lo {
        padding: 20px;
        background-color: transparent;
        box-shadow: none;
        border: none;
        align-self: center;
    }

    .landingPages_impactCard__Ux-lo:hover {
        transform: none;
        box-shadow: none;
    }

    .landingPages_impactMobileImageContainer__A92ZW {
        width: fit-content;
        display: block;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.4);
        align-self: center;
        margin-bottom: 24px;
    }

    /* Put the icon inline with the title (number stays as the eyebrow above, description below) and
       size the icon to match the title text. Float the icon so the title wraps under it, not in a
       separate indented column. */
    .landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCardHeading__T2P30 {
        display: block;
    }

    .landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCardIcon__9yAVw {
        float: left;
        margin-right: 12px;
    }

    .landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCardIcon__9yAVw,
    .landingPages_bluePageImpactContentContainer__rAVSy .landingPages_impactBaCardIcon__9yAVw svg {
        width: 24px;
        height: 24px;
    }

    .landingPages_stepCardImage__\+MYEf {
        max-width: 240px;
        margin: auto;
    }

    .landingPages_tryItOutSection__HpuPC {
        padding: 48px 20px;
    }
}

@media only screen and (max-width: 320px) {
    .landingPages_factsLandingContent__zDt2x.landingPages_factsLandingContentSmall__qBHxi {
        padding: 0 20px;
    }
}

/* ------------------------------------------------------------------------- */
/* AI Visibility Landing Page                                                */
/* ------------------------------------------------------------------------- */

/* Typography utilities — compose into consumers via `composes:` or directly in html tags classes */
.landingPages_typeTitle__4\+gmP {
    font-size: 24px;
    line-height: 32px;
}

.landingPages_typeMainHeading__4iJWi {
    font-size: 48px;
    line-height: 54px;
}

.landingPages_typeHeading__i-y1p {
    font-size: 28px;
    line-height: 36px;
}

.landingPages_typeBody__jgdOt {
    font-size: 18px;
    line-height: 24px;
}

.landingPages_typeBodySmall__R54WG {
    font-size: 16px;
    line-height: 22px;
}

.landingPages_weightRegular__hUSWS {
    font-weight: 400;
}

.landingPages_weightSemibold__vTDIK {
    font-weight: 600;
}

.landingPages_textPrimary__K2NGn {
    color: #201f1e;
}

.landingPages_textSecondary__8PiLM {
    color: #323130;
}

.landingPages_textTertiary__Mc9dg {
    color: #242424;
}

.landingPages_landingPageAIVisibility__GeFUT {
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.landingPages_aiVisibilitySectionWrapper__bVo7U {
    width: 100%;
    max-width: 1248px;
}

.landingPages_aiVisibilityHeader__8Q8wP {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 80px 86px 0px;
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    isolation: isolate;
}

.landingPages_aiVisibilityTitle__0V5eR {
}

.landingPages_aiVisibilityHeaderTitle__VVpqt {
    margin: 16px 0 24px;
}

.landingPages_aiVisibilityFeatureHeroButtons__cb45P {
    display: flex;
    flex-direction: row;
    gap: 26px;
}

.landingPages_landingPageAIVisibility__GeFUT .ms-Button--primary,
.landingPages_aiVisibilityFeatureHeroButtons__cb45P .landingPages_aiVisibilityGetStartedButton__PBWC4 {
    background: linear-gradient(97deg, #aa65ff 0%, #009af9 49.25%, #656aff 98.5%);
}

.landingPages_highlightText__YJ9\+g {
    background: linear-gradient(97deg, #aa65ff 0%, #009af9 49.25%, #656aff 98.5%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landingPages_aiVisibilityHeaderDescription__sJZqz {
    color: #3b3a39;
}

.landingPages_aiVisibilityHeaderButtons__R5DjW {
    display: flex;
    gap: 24px;
    margin: 40px 0 11px;
}

.landingPages_aiVisibilityGetStartedButton__PBWC4,
.landingPages_aiVisibilityGetStartedButton__PBWC4.ms-Button {
    box-sizing: border-box;
    border-radius: 100px;
    padding: 16px 20px;
    height: 52px;
    width: 180px;
    font-size: 18px;
}

.landingPages_aiVisibilityHeroImg__3RQZx {
    position: relative;
    max-width: 1236px;
}

.landingPages_aiVisibilityHeroImg__3RQZx::before {
    content: "";
    position: absolute;
    inset: -70% -13% -12%;
    background-image:
        radial-gradient(
            40% 35% at 30% 42%,
            rgba(101, 106, 255, 0.16) 0%,
            rgba(170, 101, 255, 0.1) 35%,
            rgba(0, 154, 249, 0.03) 65%,
            rgba(0, 154, 249, 0) 80%
        ),
        radial-gradient(
            38% 32% at 68% 45%,
            rgba(229, 101, 255, 0.2) 0%,
            rgba(229, 101, 255, 0.12) 35%,
            rgba(229, 101, 255, 0.04) 65%,
            rgba(229, 101, 255, 0) 80%
        ),
        radial-gradient(
            35% 28% at 65% 75%,
            rgba(0, 154, 249, 0.1) 0%,
            rgba(0, 154, 249, 0.06) 35%,
            rgba(0, 154, 249, 0.02) 65%,
            rgba(0, 154, 249, 0) 80%
        );
    pointer-events: none;
    z-index: -1;
}

.landingPages_aiVisibilityHeroImg__3RQZx img {
    width: 100%;
    height: auto;
}

.landingPages_aiVisibilityFeatureHero__jOOZG,
.landingPages_aiVisibilityFeatureRow__gsQFX {
    display: flex;
    gap: 40px;
    align-items: center;
    width: 100%;
    padding: 80px 96px;
    box-sizing: border-box;
}

.landingPages_aiVisibilityFeatureHeroContent__rZx1f,
.landingPages_aiVisibilityFeatureTextContent__YSiMR {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.landingPages_aiVisibilityFeatureHeroContent__rZx1f,
.landingPages_aiVisibilityFeatureTextContent__YSiMR,
.landingPages_aiVisibilityFeatureHero__jOOZG img,
.landingPages_aiVisibilityFeatureRow__gsQFX img {
    flex: 1;
}

.landingPages_aiVisibilityFeatureHero__jOOZG img,
.landingPages_aiVisibilityFeatureRow__gsQFX img {
    max-width: 680px;
}

.landingPages_aiVisibilityFeatureLanding__fNgD0 section,
.landingPages_aiVisibilityFeatureLanding__fNgD0 .landingPages_aiVisibilityFAQContainer__6pmSp {
    max-width: 1600px;
}

.landingPages_aiVisibilityFeatureLanding__fNgD0 section {
    margin: 0 auto;
}

.landingPages_aiVisibilityFeatureEyebrow__qGttJ {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    font-size: 16px;
}

.landingPages_aiVisibilityFeatureEyebrowLink__6Cn-3 {
    color: #1f1f24;
    text-decoration: none;
}

.landingPages_aiVisibilityFeatureEyebrowLink__6Cn-3:hover {
    text-decoration: underline;
}

.landingPages_aiVisibilityFeatureEyebrow__qGttJ i {
    color: #8a8886;
    font-size: 8px;
}

.landingPages_aiVisibilityFeatureEyebrow__qGttJ span {
    color: #8a8886;
}

.landingPages_aiVisibilityFeatureHeroTitle__dLlUS {
    margin: 0;
    color: #323130;
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
}

.landingPages_aiVisibilityFeatureHeroDescription__p6I0P {
    color: #3b3a39;
    margin: 0;
}

.landingPages_aiVisibilityFeatureRowReverse__ibZZx {
    flex-direction: row-reverse;
}

.landingPages_aiVisibilityFeatureSectionTitle__8Cbsn {
    margin: 0;
    color: #201f1e;
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
}

.landingPages_aiVisibilityFeatureBulletList__ujPSQ {
    margin: 0;
    padding-left: 24px;
}

.landingPages_aiVisibilityFeatureBulletItem__\+Pa17 {
    margin-bottom: 20px;
}

.landingPages_aiVisibilityFeatureBulletItem__\+Pa17:last-child {
    margin-bottom: 0;
}

.landingPages_botActivityGetStartedSection__jLcgN {
    width: 100%;
    padding: 80px 96px;
    box-sizing: border-box;
    text-align: center;
}

.landingPages_botActivityGetStartedTitle__Y53a4 {
    margin: 0;
}

.landingPages_botActivityGetStartedDescription__TIPKi {
    margin: 12px 0 40px;
}

.landingPages_botActivityProviders__kK2QW {
    max-width: 1232px;
    margin: 0 auto;
}

.landingPages_aiVisibilitySection__sHFje {
    padding: 80px 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.landingPages_sectionWrapper__-BoUP,
.landingPages_trafficFunnelImage__laqVD {
    max-width: 800px;
}

.landingPages_trafficFunnelImage__laqVD img {
    width: 100%;
    height: auto;
}

.landingPages_aiVisibilitySectionBackground__oUPKe {
    background: #fbfbfe;
}

.landingPages_leftAlignedText__D4WQB {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.landingPages_centerAlignedText__nUinx,
.landingPages_trafficFunnelContentWrapper__pFKMm {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.landingPages_trafficFunnelContentWrapper__pFKMm {
    max-width: 644px;
    margin-inline: auto;
}

.landingPages_aiVisibilitySectionTitle__CLhYr {
}

.landingPages_aiVisibilitySectionHeader__PJaf9 {
    margin: 12px 0;
}

.landingPages_aiVisibilitySectionDescription__USeSd {
    margin-bottom: 40px;
}

.landingPages_comparisonTable__pnZiL {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    align-self: stretch;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4.8px 14.4px 0 rgba(131, 126, 255, 0.3);
    overflow: hidden;
}

.landingPages_comparisonTableRow__YbRTu {
    display: contents;
}

.landingPages_comparisonTableCell__QN3Ua {
    display: flex;
    min-height: 36px;
    min-width: 0;
    padding: 20px 24px;
    align-items: center;
    box-sizing: border-box;
    border-top: 1px solid #e0e0e0;
}

.landingPages_comparisonTableRow__YbRTu:first-child .landingPages_comparisonTableCell__QN3Ua {
    border-top: 0;
}

.landingPages_tableHeaderText__fbObn {
}

.landingPages_primaryHeader__fnEdF {
    background: linear-gradient(97deg, #aa65ff 0%, #009af9 49.25%, #656aff 98.5%);
    color: #fff;
}

.landingPages_secondaryHeader__5HPJ9 {
    background: #edebe9;
}

.landingPages_tableContentText__IhtuF {
}

.landingPages_primaryContent__eTZdc {
    background: #fbfbfe;
    border-right: 1px solid #e0e0e0;
    box-sizing: border-box;
}

.landingPages_aiVisibilityCheckmarkIcon__rE0v0 {
    margin-right: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.landingPages_factsSection__WLw95 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 40px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 80px 86px;
    box-sizing: border-box;
}

.landingPages_factsSectionReverse__hlFWg {
    flex-direction: row-reverse;
}

.landingPages_factsSectionTitle__DM0Kx {
    margin-bottom: 32px;
}

.landingPages_factsTextContent__6oIit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 604px;
}

.landingPages_factsBulletPointsList__GjKOJ {
    list-style-type: disc;
    margin-left: 24px;
}

.landingPages_factsBulletPoint__FsHR- {
    padding-left: 6px;
    margin-bottom: 32px;
}

.landingPages_factsLearnMoreButton__mKXAf {
}

.landingPages_factsLearnMoreButton__mKXAf.ms-Button,
.landingPages_factsComingSoon__XvhSP {
    border-radius: 4px;
    padding: 8px 16px;
    height: 40px;
}

.landingPages_factsLearnMoreButton__mKXAf.ms-Button {
    color: #020057;
    border: 1px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(97deg, #aa65ff 0%, #009af9 49.25%, #656aff 98.5%) border-box;
}

.landingPages_factsComingSoon__XvhSP {
    border: 1px solid #d1d1d1;
    cursor: default;
}

.landingPages_factsLearnMoreButton__mKXAf.ms-Button:hover {
    background:
        linear-gradient(#eff6fc, #eff6fc) padding-box,
        linear-gradient(97deg, #aa65ff 0%, #009af9 49.25%, #656aff 98.5%) border-box;
}

.landingPages_factsMedia__2fzIW {
    max-width: 604px;
}

.landingPages_factsMedia__2fzIW img {
    width: 100%;
    height: auto;
}

.landingPages_testimonialsTitle__6mHlD {
}

.landingPages_testimonialsSubtitle__jl8HM {
    margin: 12px 0 40px;
}

.landingPages_aiVisibilityTestimonialsGrid__9rM6D {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
}

.landingPages_aiVisibilityTestimonialCard__KQwSP {
    background: #f3f2f1;
    border-radius: 12px;
    min-height: 260px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.landingPages_aiVisibilityGetStartedCard__Z8v-C {
    width: 100%;
    max-width: 1160px;
    background: #faf9f8;
    border: 1px solid #e8e6e3;
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.landingPages_aiVisibilityGetStartedTitle__e-nd4 {
}

.landingPages_aiVisibilityGetStartedSubtitle__YND4f {
    max-width: 640px;
    margin: 12px 0 32px;
}

.landingPages_upsellCardsContainer__6tkdZ {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 56px;
}

.landingPages_upsellCard__-5ziy {
    border-radius: 16px;
    border: 1px solid #eaeaff;
    background: #fff;
    display: flex;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 16px;
}

.landingPages_upsellCardHeader__Dv6xi {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.landingPages_upsellCardIcon__78M3R {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: 8px;
    background: #eaeaff;
}

.landingPages_upsellCardTag__U-GjD {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 12px;
    border-radius: 100px;
    background: #827dff;
    color: #fff;
    cursor: default;
}

.landingPages_upsellCardTitle__0s0a8 {
}

.landingPages_upsellCardDescription__aRAUy {
    color: #6b6968;
}

.landingPages_supportedProvidersTitle__s1a1M {
    color: #000;
    margin-bottom: 24px;
}

.landingPages_cdnProvidersWrapper__xXCpm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    justify-content: start;
    gap: 16px;
}

.landingPages_cdnProviderCard__nONeN {
    display: flex;
    height: 80px;
    padding: 16px;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    border-radius: 16px;
    border: 1px solid #eaeaff;
    background: #fff;
    color: #000;
}

.landingPages_cdnProviderCard__nONeN img {
    width: 40px;
    height: auto;
}

.landingPages_aiVisibilityFAQSection__McaYn {
    width: 100%;
    padding: 80px 60px;
}

.landingPages_aiVisibilityFAQContainer__6pmSp {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.landingPages_aiVisibilityFAQTitle__JXW0i {
    text-align: center;
    margin-bottom: 80px;
}

.landingPages_aiVisibilityFAQQuestion__GUmbj {
}

.landingPages_aiVisibilityFAQAnswer__tR-2t {
    max-width: 90%;
}

.landingPages_aiVisibilityGetStartedTodayBanner__R3lBo {
    position: relative;
    width: 100%;
    padding: 80px 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(0deg, #f3f3ff 31.58%, #fff 100%);
    overflow: hidden;
}

.landingPages_aiVisibilityGetStartedBannerTitle__L4vXM {
    background: linear-gradient(90deg, #8f58ab -8.93%, #3d60e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landingPages_aiVisibilityGetStartedBannerSubtitle__czu2a {
    margin: 12px 0 40px;
}

.landingPages_aiVisibilityFAQEntryContainer__uEIVK {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 0;
    gap: 12px;
    width: 100%;
    border-top: 1px solid #e1dfdd;
    box-sizing: border-box;
    cursor: pointer;
}

.landingPages_aiVisibilityFAQEntryLastContainer__hEDUT {
    border-bottom: 1px solid #e1dfdd;
    margin-bottom: 40px;
}

.landingPages_aiVisibilityFAQEntry__njVkx {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    align-self: stretch;
}

.landingPages_aiVisibilityGetStartedTodayMountains__H9DRr {
    position: absolute;
    bottom: 0;
    height: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.landingPages_aiVisibilityGetStartedTodayMountainsLeft__a5Vmk {
    left: 0;
    width: 50%;
    background-image: url("https://claritystatic.azureedge.net/images/mountains-left.svg");
    background-position: left bottom;
}

.landingPages_aiVisibilityGetStartedTodayMountainsRight__2iqL9 {
    right: 0;
    width: 50%;
    background-image: url("https://claritystatic.azureedge.net/images/mountains-right.svg");
    background-position: right bottom;
}

.landingPages_aiVisibilityFeatureLandingHeader__V\+xa4 {
    background: linear-gradient(0deg, #fff 31.58%, #f3f3ff 100%);
}

@media only screen and (max-width: 1600px) {
    .landingPages_aiVisibilityFeatureHero__jOOZG,
    .landingPages_aiVisibilityFeatureRow__gsQFX {
        padding: 40px 32px;
        flex-direction: column;
    }

    .landingPages_aiVisibilityFeatureRowReverse__ibZZx {
        flex-direction: column;
    }

    .landingPages_aiVisibilityFeatureHeroContent__rZx1f,
    .landingPages_aiVisibilityFeatureTextContent__YSiMR,
    .landingPages_aiVisibilityFeatureHero__jOOZG img,
    .landingPages_aiVisibilityFeatureRow__gsQFX img {
        max-width: 655px;
    }
}

@media only screen and (max-width: 1023px) {
    .landingPages_aiVisibilityHeader__8Q8wP {
        padding: 40px 32px 0px;
    }

    .landingPages_aiVisibilitySection__sHFje,
    .landingPages_aiVisibilityFAQSection__McaYn,
    .landingPages_factsSection__WLw95,
    .landingPages_aiVisibilityGetStartedTodayBanner__R3lBo,
    .landingPages_botActivityGetStartedSection__jLcgN {
        padding: 40px 32px;
    }

    .landingPages_typeTitle__4\+gmP {
        font-size: 20px;
        line-height: 28px;
    }

    .landingPages_typeMainHeading__4iJWi {
        font-size: 32px;
        line-height: 40px;
    }

    .landingPages_typeHeading__i-y1p {
        font-size: 24px;
        line-height: 32px;
    }

    .landingPages_typeBody__jgdOt {
        font-size: 16px;
        line-height: 22px;
    }

    .landingPages_typeBodySmall__R54WG {
        font-size: 14px;
        line-height: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .landingPages_aiVisibilityHeader__8Q8wP,
    .landingPages_aiVisibilitySection__sHFje,
    .landingPages_factsSection__WLw95,
    .landingPages_aiVisibilityFAQSection__McaYn,
    .landingPages_aiVisibilityGetStartedTodayBanner__R3lBo,
    .landingPages_botActivityGetStartedSection__jLcgN {
        padding-inline: 20px;
    }

    .landingPages_aiVisibilityFeatureHero__jOOZG,
    .landingPages_aiVisibilityFeatureRow__gsQFX {
        padding-inline: 20px;
    }

    .landingPages_aiVisibilityFeatureHeroContent__rZx1f,
    .landingPages_aiVisibilityFeatureTextContent__YSiMR {
        gap: 24px;
    }

    .landingPages_aiVisibilityFeatureHeroTitle__dLlUS,
    .landingPages_aiVisibilityFeatureSectionTitle__8Cbsn {
        font-size: 32px;
        line-height: 40px;
    }

    .landingPages_comparisonTableCell__QN3Ua {
        padding: 12px 16px;
    }
}

@media only screen and (max-width: 900px) {
    .landingPages_aiVisibilityFeatureHeroContent__rZx1f,
    .landingPages_aiVisibilityFeatureTextContent__YSiMR,
    .landingPages_aiVisibilityFeatureHero__jOOZG img,
    .landingPages_aiVisibilityFeatureRow__gsQFX img {
        max-width: 400px;
    }
}

@media only screen and (max-width: 500px) {
    .landingPages_aiVisibilityFeatureHeroContent__rZx1f,
    .landingPages_aiVisibilityFeatureTextContent__YSiMR,
    .landingPages_aiVisibilityFeatureHero__jOOZG img,
    .landingPages_aiVisibilityFeatureRow__gsQFX img {
        max-width: 300px;
    }
}

.landingPages_webIQLanding__SXQ2l {
    --web-iq-card-shadow: 0 1px 2px rgba(131, 126, 255, 0.1), 0 3px 8px rgba(131, 126, 255, 0.12);
    --web-iq-gradient: linear-gradient(112deg, #aa65ff 0%, #009af9 49%, #656aff 100%);

    width: 100%;
    overflow: hidden;
    background: #fff;
    color: #242424;
}

/* WebIQ consideration landing page */
.landingPages_webIQHero__tViCo {
    padding: 80px 96px;
    background-color: #fff;
    background-image:
        linear-gradient(to bottom, transparent, #fff),
        linear-gradient(to right, #f0eeff 0%, #e7f0fe 25%, #e2f2fe 50%, #e7f0fe 75%, #ecedff 100%);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 236px;
}

.landingPages_webIQHeroContent__rhidm {
    display: flex;
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.landingPages_webIQHeroTitle__7-5uR {
    display: flex;
    margin: 16px 0 0;
    flex-direction: column;
    color: #323130;
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
}

.landingPages_webIQHeroDescription__DmhGQ {
    max-width: 1248px;
    margin: 24px 0 0;
    color: #3b3a39;
    font-size: 18px;
    line-height: 24px;
}

.landingPages_webIQHeroGetStarted__PJ0cj.ms-Button {
    min-width: 180px;
    height: 52px;
    margin-top: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 9999px;
    background: linear-gradient(112deg, #aa65ff 0%, #009af9 49%, #656aff 100%);
    font-size: 18px;
}

.landingPages_webIQHeroAnimation__WKV2c {
    position: relative;
    display: flex;
    width: min(100%, 640px);
    height: 440px;
    margin-top: 40px;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    border-radius: 20px;
    background: linear-gradient(123deg, rgba(170, 101, 255, 0.08), rgba(0, 154, 249, 0.06), rgba(101, 106, 255, 0.08));
}

.landingPages_webIQHeroPrompt__Wuzrq {
    width: min(100%, 400px);
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 12px 12px 2px;
    background: #fff;
    box-shadow: var(--web-iq-card-shadow);
    color: #000;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
}

.landingPages_webIQHeroStatus__9UUgv,
.landingPages_webIQHeroCiting__DpyKN {
    width: min(100%, 400px);
    margin: 0;
    color: #605e5c;
    font-size: 14px;
    line-height: 18px;
    text-align: left;
}

.landingPages_webIQHeroStatus__9UUgv {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.landingPages_webIQHeroStatusVisible__uunBl {
    opacity: 1;
}

/* The word is clipped by its own box so each swap slides a full line height into view. */
.landingPages_webIQHeroChangingText__lmfkv {
    display: inline-block;
    height: 18px;
    overflow: hidden;
    line-height: 18px;
    vertical-align: bottom;
}

.landingPages_webIQHeroChangingText__lmfkv > span {
    display: block;
    white-space: nowrap;
    animation: landingPages_webIQHeroTextEnter__qWISl 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landingPages_webIQHeroCard__ut8EO {
    display: flex;
    position: relative;
    width: min(100%, 400px);
    padding: 8px;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    border: 1.112px solid transparent;
    border-radius: 12px;
    opacity: 0;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(transparent, transparent) border-box;
    box-shadow: var(--web-iq-card-shadow);
    color: #000;
    text-align: left;
    transform: translateY(8px);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        background 0.4s ease;
}

.landingPages_webIQHeroCardVisible__K05ej {
    opacity: 1;
    transform: none;
}

.landingPages_webIQHeroCardConsidered__FSKeM {
    background:
        linear-gradient(#fff, #fff) padding-box,
        conic-gradient(from 180deg, #aa65ff, #009af9, #656aff, #aa65ff) border-box;
}

.landingPages_webIQHeroCardConsidered__FSKeM::after {
    content: "";
    position: absolute;
    inset: -1.112px;
    padding: 1.112px;
    border-radius: 12px;
    opacity: 0;
    background: linear-gradient(115deg, transparent 35%, #fff 60%, transparent 85%);
    background-size: 250% 100%;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.landingPages_webIQHeroCardFlairing__cnZiH::after {
    animation: landingPages_webIQHeroFlair__x-CYX 3s ease-out infinite;
}

.landingPages_webIQHeroRetrieving__0Yx3A {
    height: 18px;
    margin: 0;
    opacity: 0;
    color: #605e5c;
    font-size: 14px;
    line-height: 18px;
    transition: opacity 0.4s ease;
}

.landingPages_webIQHeroRetrievingVisible__mP83A {
    opacity: 1;
}

.landingPages_webIQHeroBadges__i1HAz {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.landingPages_webIQHeroBadgesConsolidated__m1ZSg {
    flex-wrap: nowrap;
}

.landingPages_webIQHeroBadge__Si0hz {
    display: inline-flex;
    height: 24px;
    max-height: 24px;
    margin: 0 8px 8px 0;
    padding: 0 4px;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    opacity: 0;
    color: #605e5c;
    font-size: 14px;
    font-weight: 600;
    transform: translateY(6px);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        max-height 0.35s ease,
        padding 0.35s ease,
        border-width 0.35s ease,
        width 0.35s ease,
        margin 0.35s ease;
}

.landingPages_webIQHeroBadgeEntering__ykGkw {
    animation: landingPages_webIQHeroBadgeEnter__qwJGX 350ms ease-out both;
}

.landingPages_webIQHeroBadgeSettled__imVAz {
    opacity: 1;
    transform: none;
}

.landingPages_webIQHeroBadge__Si0hz i {
    font-size: 14px;
}

.landingPages_webIQHeroMoreBadge__G7TRR {
    display: none;
}

.landingPages_webIQHeroBadgesConsolidated__m1ZSg .landingPages_webIQHeroBadge__Si0hz:not(.landingPages_webIQHeroMoreBadge__G7TRR):nth-child(n + 2) {
    width: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
    opacity: 0;
}

.landingPages_webIQHeroBadgesConsolidated__m1ZSg .landingPages_webIQHeroMoreBadge__G7TRR {
    display: inline-flex;
    opacity: 1;
    transform: none;
}

.landingPages_webIQHeroCiting__DpyKN {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        opacity 0.35s ease 0.15s,
        max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.landingPages_webIQHeroCitingVisible__lMHdE {
    max-height: 22px;
    opacity: 1;
}

.landingPages_webIQHeroResponse__zDwAL {
    display: flex;
    width: min(100%, 400px);
    max-height: 0;
    padding: 12px 12px 6px;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 12px 12px 12px 2px;
    opacity: 0;
    background: #fff;
    box-shadow: var(--web-iq-card-shadow);
    transform: translateY(8px);
    transition:
        opacity 0.35s ease 0.15s,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
        max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.landingPages_webIQHeroResponseVisible__DsegC {
    max-height: 220px;
    opacity: 1;
    transform: none;
}

.landingPages_webIQHeroResponseBody__GmOGP {
    display: flex;
    align-items: center;
    gap: 8px;
}

.landingPages_webIQHeroSparkle__y63jw {
    flex: none;
}

.landingPages_webIQHeroSkeletonLines__f83Zi {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 8px;
}

.landingPages_webIQHeroSkeletonLine__EsVUE {
    display: block;
    height: 4px;
    border-radius: 6px;
    opacity: 0;
    background: #d9d9d9;
    transition: opacity 0.3s ease;
}

.landingPages_webIQHeroSkeletonLineVisible__ZFZbH {
    opacity: 1;
}

.landingPages_webIQHeroSkeletonLineFirst__Dwo7l {
    width: 92%;
}

.landingPages_webIQHeroSkeletonLineSecond__mzbHI {
    width: 68%;
}

.landingPages_webIQHeroResponseBadges__uzX3O {
    display: flex;
    margin-top: 4px;
    flex-wrap: wrap;
    gap: 8px;
}

.landingPages_webIQHeroResponseBadges__uzX3O .landingPages_webIQHeroBadge__Si0hz {
    margin: 0;
    transform: translateY(4px);
}

.landingPages_webIQHeroPlatforms__z8xcg {
    display: flex;
    margin-top: 40px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #3b3a39;
    font-size: 16px;
    line-height: 22px;
}

.landingPages_webIQHeroPlatforms__z8xcg p {
    margin: 0;
}

.landingPages_webIQHeroPlatforms__z8xcg img {
    display: block;
    width: 218px;
    height: 40px;
}

@keyframes landingPages_webIQHeroStepEnter__EuKl7 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes landingPages_webIQHeroTextEnter__qWISl {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes landingPages_webIQHeroBadgeEnter__qwJGX {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes landingPages_webIQHeroFlair__x-CYX {
    0% {
        opacity: 0;
        background-position: 120% 0;
    }

    2% {
        opacity: 1;
    }

    16% {
        opacity: 1;
        background-position: -130% 0;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        background-position: -130% 0;
    }
}

.landingPages_webIQTrySection__WXJXh {
    display: flex;
    padding: 60px 96px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    color: #201f1e;
}

.landingPages_webIQTryHeading__c77rn {
    text-align: center;
}

.landingPages_webIQTryHeading__c77rn h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
}

.landingPages_webIQTryHeading__c77rn p {
    margin: 12px 0 0;
    font-size: 18px;
    line-height: 24px;
}

.landingPages_webIQTryCard__LQ-nc {
    display: flex;
    width: min(100%, 640px);
    padding: 32px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
    border: 1px solid #eaeaff;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--web-iq-card-shadow);
}

.landingPages_webIQTryCardHeading__F8qcL {
    text-align: center;
}

.landingPages_webIQTryCardHeading__F8qcL h3 {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
}

.landingPages_webIQTryCardHeading__F8qcL p {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 22px;
}

.landingPages_webIQPromptList__eZ10R {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.landingPages_webIQTryLoading__zHW64 {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 14px;
}

.landingPages_webIQTryLoadingText__j5vti {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
}

.landingPages_webIQTryProgress__bbQaP {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 9999px;
    background: #ece9f6;
    overflow: hidden;
}

/* Held at the end state so a disabled animation still shows a filled bar. */
.landingPages_webIQTryProgressBar__bPqwE {
    display: block;
    width: 96%;
    height: 100%;
    border-radius: 9999px;
    background: var(--web-iq-gradient);
    animation: landingPages_webIQTryProgressFill__ZlsaW 4500ms ease-out both;
}

.landingPages_webIQTryQueryFlow__AVzIK {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.landingPages_webIQTryQueryRow__9KWPP {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid #e1dfdd;
    border-radius: 12px;
    background: #fff;
    animation: landingPages_webIQTryQueryRowEnter__lIkgQ 350ms ease-out both;
    transition:
        border-color 250ms ease,
        background 250ms ease;
}

.landingPages_webIQTryQueryRowDone__1TYuz {
    border-color: #c9c4ff;
    background: #f7f6ff;
}

.landingPages_webIQTryQueryLabel__mvYNS {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.landingPages_webIQTryQueryLabel__mvYNS svg {
    flex: 0 0 auto;
    color: #605e5c;
}

.landingPages_webIQTryQueryLabel__mvYNS span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landingPages_webIQTryQueryStatus__abI3v {
    flex: 0 0 auto;
    color: #605e5c;
    font-size: 12px;
    font-weight: 600;
}

.landingPages_webIQTryQueryRowDone__1TYuz .landingPages_webIQTryQueryStatus__abI3v {
    color: #0b6a3a;
}

.landingPages_webIQTryQueryRowDone__1TYuz .landingPages_webIQTryQueryStatus__abI3v::before {
    margin-right: 6px;
    content: "✓";
}

.landingPages_webIQTryResult__p4lL- {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;
    text-align: left;
    animation: landingPages_webIQHeroStepEnter__EuKl7 400ms ease-out both;
}

.landingPages_webIQTryResultSummary__YoGs7 {
    display: flex;
    margin: 0;
    flex-direction: column;
    gap: 4px;
}

.landingPages_webIQTryResultSummary__YoGs7 strong {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}

.landingPages_webIQTryResultSummary__YoGs7 span {
    font-size: 16px;
    line-height: 22px;
}

.landingPages_webIQTryQueryTags__B69jm {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.landingPages_webIQTryQueryTag__7tKAT {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #e1dfdd;
    border-radius: 9999px;
    background: #f3f2f1;
    font-size: 13px;
    font-weight: 600;
}

.landingPages_webIQTryQueryTag__7tKAT svg {
    flex: 0 0 auto;
    color: #605e5c;
}

.landingPages_webIQTryPageList__jhPKq {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.landingPages_webIQTryPageList__jhPKq li {
    display: grid;
    min-width: 0;
    padding: 12px 14px;
    gap: 3px;
    border: 1px solid #e1dfdd;
    border-radius: 12px;
    background: #fff;
}

.landingPages_webIQTryPageTitle__\+B-hA {
    display: flex;
    min-width: 0;
    margin: 0;
    align-items: center;
    gap: 6px;
    color: #0067b8;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.landingPages_webIQTryPageTitle__\+B-hA i {
    flex: 0 0 auto;
    color: #605e5c;
    font-size: 16px;
}

.landingPages_webIQTryPageTitle__\+B-hA span,
.landingPages_webIQTryPageUrl__evG1G {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landingPages_webIQTryPageUrl__evG1G {
    color: #605e5c;
    font-size: 13px;
    line-height: 18px;
}

.landingPages_webIQTryLockedPages__LeRvU {
    max-height: 132px;
    overflow: hidden;
    mask-image: linear-gradient(#000 0%, transparent 92%);
}

.landingPages_webIQTryPageListBlurred__z2a2M {
    filter: blur(4px);
    opacity: 0.55;
}

/* Pulled up so the teaser rows disappear behind the panel; the blurred list makes a stacking context, so this needs positioning to stay on top. */
.landingPages_webIQTryUnlock__OMWyT {
    position: relative;
    display: grid;
    margin-top: -72px;
    padding: 24px;
    justify-items: center;
    gap: 8px;
    border: 1px solid #eaeaff;
    border-radius: 16px;
    background: #f2f2ff;
    text-align: center;
}

.landingPages_webIQTryUnlock__OMWyT h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

.landingPages_webIQTryUnlock__OMWyT p {
    max-width: 520px;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}

.landingPages_webIQTryUnlockButton__C3xrM.ms-Button {
    min-width: 180px;
    height: 52px;
    margin-top: 12px;
    border: 0;
    border-radius: 9999px;
    background: var(--web-iq-gradient);
    font-size: 16px;
}

.landingPages_webIQTryCta__keKWD {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 16px;
}

.landingPages_webIQTryCta__keKWD > .ms-Button {
    height: 40px;
    border-color: #656aff;
    color: #020057;
}

@keyframes landingPages_webIQTryProgressFill__ZlsaW {
    from {
        width: 0;
    }
}

@keyframes landingPages_webIQTryQueryRowEnter__lIkgQ {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.landingPages_webIQFinalCta__bd8jZ {
    position: relative;
    display: flex;
    min-height: 324px;
    padding: 80px 32px 124px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: linear-gradient(180deg, #fff 0%, #f0edff 100%);
    text-align: center;
    overflow: hidden;
}

.landingPages_webIQFinalCta__bd8jZ h2 {
    margin: 0;
    background: linear-gradient(90deg, #8f58ab, #3d60e0);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 28px;
    line-height: 36px;
}

.landingPages_webIQFinalCta__bd8jZ p {
    margin: 8px 0 24px;
    color: #4d4d4d;
    font-size: 16px;
    line-height: 22px;
}

@media only screen and (max-width: 767px) {
    .landingPages_webIQHero__tViCo,
    .landingPages_webIQTrySection__WXJXh {
        padding-inline: 20px;
    }

    .landingPages_webIQHeroTitle__7-5uR {
        font-size: 32px;
        line-height: 40px;
    }

    .landingPages_webIQHeroAnimation__WKV2c {
        height: 400px;
        padding-inline: 16px;
    }

    .landingPages_webIQTryCard__LQ-nc {
        padding: 24px 20px;
    }
}

/* Only the endlessly looping shimmer is suppressed; the one-shot step animations still play. */
@media (prefers-reduced-motion: reduce) {
    .landingPages_webIQHeroCardFlairing__cnZiH::after {
        animation: none;
    }
}

@media only screen and (max-width: 640px) {
    .landingPages_aiVisibilityHeaderButtons__R5DjW,
    .landingPages_aiVisibilityFeatureHeroButtons__cb45P {
        flex-direction: column;
        gap: 12px;
    }
}

.layout_footer__DE8eA {
    background-color: #F2F2F2;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #6A6A6A ;
    font-size: 11px;
    line-height: 16px;
}

.layout_footerNavContainer__-98l6 {
    background: #EAEAFF;
    padding: 80px 54px;
    display: flex;
    gap: 96px;
    width: 100%;
    justify-content: center;
    color: #323130;
    font-size: 16px;
    line-height: 22px;
}

.layout_footerNavContainer__-98l6 path {
    fill: #323130;
}

.layout_footerLink__EJRQw {
    cursor: pointer;
    color: #323130;
    text-decoration: none;
}

div.newFooterLinksContainer {
    padding: 26px 54px;
}

@media only screen and (max-width: 1100px) {
    .layout_footerNavContainer__-98l6 {
        flex-direction: column-reverse;
        padding: 26px 54px;
        row-gap: 24px;
    }
}
.header_header__fIQUh {
    height: 60px;
    padding: 14px 32px;
    color: #3b3a39;
    background-color: white;
}

.header_header__fIQUh
    + div:not(.benchBanner):not(.header_landingPageBrandAgent__NnwKh):not(.header_landingPageAIVisibility__C6rfd):not(.ms-MessageBar):not(
        [data-terms-of-service-banner]
    ):not(.header_dashboardNavHeader__dW5ST) {
    height: calc(100% - 60px);
}

.header_landingPageAIVisibility__C6rfd {
    width: 100%;
}

.header_msLogo__PFnQS {
    margin-right: 18px;
    position: relative;
    top: 3px;
}

.header_msLogo__PFnQS:focus-visible,
.header_clarityLogo__zYzCf:focus-visible {
    outline: 1px solid #000;
}

.header_clarityLogo__zYzCf {
    font-size: 20px;
    color: black;
    position: relative;
    line-height: 28px;
    margin-right: 36px;
}

.header_logoSeparator__a6llf {
    margin-left: 18px;
}

.header_logoSeparator__a6llf::before {
    height: 18px;
    width: 1px;
    background-color: black;
    content: "";
    display: block;
    position: absolute;
    left: -18px;
    top: 5px;
}

.header_clarityLogo__zYzCf:hover span::before {
    content: "";
    display: block;
    background: #3b3a39;
    height: 2px;
    position: absolute;
    width: 100%;
    bottom: -5px;
}

.header_clarityAppLogo__GI0WV {
    margin-top: 6px;
    height: 32px;
}

/* Figma's 16px logo gap keeps the switcher from pushing the centered pivots into the narrow layout at 1440px. */
.header_clarityLogo__zYzCf:has(+ .header_surfaceMenu__b4AaC) {
    margin-right: 16px;
}

.header_myProjectsButton__A3fj\+ .ms-Button + span {
    display: none;
}

.header_myProjectsButton__A3fj\+ .ms-Button-label {
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 120px;
    line-height: 20px;
}

.header_myProjectsButtonDisabled__NGGsd {
    /* biome-ignore lint/complexity/noImportantStyles: suppressing to unblock unrelated changes */
    border: 0 !important;
}

.header_myProjectsButtonDisabled__NGGsd span {
    /* biome-ignore lint/complexity/noImportantStyles: suppressing to unblock unrelated changes */
    color: #3b3a39 !important;
}

.header_myProjectsButton__A3fj\+ button {
    border: 0;
    color: #3b3a39;
}

.header_myProjectsButton__A3fj\+ button:hover {
    color: black;
    background-color: #edebe9;
}

.header_myProjectsButton__A3fj\+ button:first-child {
    text-align: left;
    min-width: unset;
    padding: 0 12px 0 8px;
}

.header_myProjectsButton__A3fj\+ button:first-child span {
    margin: 0;
}

.header_noNotificationsIcon__MR0Xg,
.header_actionButton__430XA {
    margin-right: 20px;
}

.header_noNotificationsIcon__MR0Xg svg,
.header_actionButton__430XA svg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.header_noNotificationsIcon__MR0Xg circle {
    fill: none;
}

.header_notificationsCommandButton__jLUNZ {
    box-sizing: border-box;
}

.header_notificationsCommandButton__jLUNZ:hover {
    background: rgb(243, 242, 241);
    color: rgb(0, 120, 212);
    margin: 0px;
    width: 100%;
}

.header_identity__0AzRU button {
    margin: 0;
    padding: 0;
    margin-left: 12px;
}

.header_hamburger__lqpT0 {
    color: #000;
}

.header_identity__0AzRU button i {
    color: #161514;
}

.header_hamburgerNav__EXlYD button {
    border: none;
    text-transform: capitalize;
    text-align: left;
    width: 100%;
    color: #3b3a39;
    height: 44px; /*to match the FAQ nav link button height*/
}

.header_hamburgerNav__EXlYD span {
    font-weight: normal;
}

.header_hamburgerNav__EXlYD button:hover,
.header_feedbackButton__WsBhO:hover {
    background-color: #eaeaff;
}

.header_hamburgerNav__EXlYD button.ms-Button--default.is-disabled,
.header_hamburgerNav__EXlYD button.ms-Button.is-disabled {
    border: none;
}

.header_hamburgerNavGroup__9oLFD .ms-Nav-chevronButton {
    left: 12px;
}

.header_hamburgerNavGroup__9oLFD .ms-Nav-chevronButton + button {
    padding-left: 40px;
}

.header_hamburgerNavGroup__9oLFD .ms-Nav-compositeLink.is-disabled:hover .ms-Button {
    background: unset;
    cursor: auto;
}

.header_hamburgerNavGroup__9oLFD li ul .ms-Button-flexContainer {
    padding-left: 27px;
}

.header_hamburgerNavGroup__9oLFD li ul li ul .ms-Nav-compositeLink .ms-Nav-link {
    padding-left: 44px;
}

.header_hamburgerNavGroup__9oLFD ul li ul li button.ms-Nav-chevronButton {
    left: 34px;
}

.header_feedbackButton__WsBhO {
    line-height: 44px;
    cursor: pointer;
    width: 100%;
}

.header_feedbackButton__WsBhO span,
.header_feedbackButton__WsBhO i {
    color: #3b3a39;
}

.header_commandButton__GdApk {
    height: 32px;
    margin-left: 32px;
}

.header_commandButton__GdApk.ms-Button {
    padding: 0 4px;
}

.header_commandButton__GdApk .ms-Button-textContainer {
    height: 16px;
}

.header_languageDropdownDivider__s9Khn {
    margin-left: 24px;
}

.header_localizationDropdown__pvAQU {
    margin: 0 16px 0 24px;
    width: 110px;
}

.header_localizationDropdown__pvAQU .ms-Dropdown:focus::after,
.header_localizationDropdown__pvAQU .ms-Dropdown-title {
    border: unset;
}

.header_localizationDropdown__pvAQU .ms-Dropdown:focus-visible {
    outline: 1px solid #000;
}

.header_localizationDropdown__pvAQU .ms-Dropdown-title:hover {
    background: #f5f5f5;
}

.header_localizationDropdown__pvAQU .ms-Dropdown.is-open .ms-Dropdown-title {
    background: #ebebeb;
}

.header_publicHamburgerMenu__26tLr {
    order: -1;
    color: #161514;
    margin-right: 18px;
}

.header_publicHamburgerMenu__26tLr:hover {
    order: -1;
    color: #161514;
}

.header_publicHamurgerNav__za-Jr button.ms-Button {
    padding-left: 24px;
}

.header_publicHamurgerNav__za-Jr a.ms-Button {
    padding-left: 32px;
}

/* Public Hamburger Navigation Styles for sub menu component */
.header_publicHamurgerNav__za-Jr li ul li .ms-Nav-compositeLink > .ms-Nav-chevronButton {
    padding-left: 0;
}

.header_publicHamurgerNav__za-Jr li ul li .ms-Nav-compositeLink > .ms-Nav-chevronButton + .ms-Nav-link {
    padding-left: 46px;
}

.header_publicHamurgerNav__za-Jr li ul li ul .ms-Nav-link {
    padding-left: 56px;
}

.header_hamburgerFeedbackButton__fozC8 {
    color: #323130;
    padding-left: 32px;
}

.header_signIn__3yg9w {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: white;
    padding: 28px 0 38px;
    box-shadow:
        0px 2.4px 7.2px rgba(0, 0, 0, 0.18),
        0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
    border-radius: 2px;
}

.hamburgerPanel div.header_hamburgerFeedbackButton__fozC8:hover {
    color: #323130;
    background-color: #eaeaff;
}

.hamburgerPanel div.ms-Panel-commands {
    padding-top: 0;
}

.tabs {
    position: absolute;
    height: 45px;
}

.tabs button {
    padding: 0;
    font-size: 12px;
}

.tabs button:last-child {
    margin: 0;
}

.tabs .ms-Pivot-linkContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tabs .ms-Pivot-icon {
    line-height: 14px;
    margin: 0;
    height: 20px;
}

.tabs .ms-Pivot-text {
    line-height: 20px;
    margin: 0;
}

@media screen and (max-width: 550px) {
    .header_myProjectsButton__A3fj\+ .ms-Button-label {
        max-width: 80px;
    }

    .header_clarityLogo__zYzCf {
        margin-right: 28px;
    }
}

@media only screen and (max-width: 500px) {
    .header_signIn__3yg9w {
        border: none;
        box-shadow: unset;
        top: 58px;
        left: 0;
        transform: unset;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        padding-bottom: 55px;
        border-radius: 0;
        border-top: 1px solid #edebe9;
    }
}

@media screen and (max-width: 400px) {
    .header_clarityLogo__zYzCf {
        margin-right: 12px;
    }

    .header_identity__0AzRU > button:first-child {
        margin-left: 0;
    }
}

.header_dashboardSubMenu__jpdu0 {
    background: white;
    position: absolute;
    top: 52px;
    z-index: 101;
    left: 0;
    border-radius: 0px 0px 8px 8px;
    box-shadow:
        0px 0.3px 0.9px 0px rgba(0, 0, 0, 0.1),
        0px 1.6px 3.6px 0px rgba(0, 0, 0, 0.13);
    padding: 8px;
    opacity: 0;
    transform: translateY(-20px);
    animation: header_showButton__AoTkn 300ms ease-in forwards;
}

.header_dashboardSubMenu__jpdu0::after {
    content: "";
    width: 100%;
    height: 8px;
    background: white;
    display: block;
    position: absolute;
    z-index: 3;
    left: 0;
    top: -4px;
}

@keyframes header_showButton__AoTkn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceFieldGroup-flexContainer {
    display: flex;
    align-items: center;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceFieldGroup-flexContainer > div {
    margin-top: 0;
    padding: 5px 12px;
    border-top: 1px solid #0078d4;
    border-bottom: 1px solid #0078d4;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField-input:hover {
    background: #eff6fc;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField-input.is-disabled:hover {
    background: unset;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField:first-child {
    border-radius: 4px 0px 0px 4px;
    border: 1px solid #0078d4;
    border-right: unset;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField:not(:first-child):not(:last-child) {
    border-left: 1px solid #0078d4;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField:last-child {
    border-radius: 0px 4px 4px 0px;
    border: 1px solid #0078d4;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField-field.is-checked::after {
    background: url(https://claritystatic.azureedge.net/images/selectedCheckmark.svg);
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    left: 0;
    top: 0;
    border-width: 0;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField-field::before {
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField-input.is-disabled + .ms-ChoiceField-field:hover::before {
    border-color: #c8c6c4;
}

.header_dashboardSubMenu__jpdu0 .ms-ChoiceField-field:not(.is-checked):hover:after {
    content: unset;
}

.header_dashboardSubMenu__jpdu0 label {
    text-wrap: nowrap;
}

.header_dashboardNavContainer__hqSr0 {
    width: 100%;
    display: flex;
    align-items: center;
}

.header_dashboardNavHeader__dW5ST {
    height: 44px;
    background: #eff6fc;
    border-bottom: 1px solid #c7e0f4;
    display: flex;
    align-items: center;
    padding: 8px 20px 0;
    gap: 4px;
}

.header_dashboardNavPivot__-k6Rz .ms-Pivot-link {
    font-size: 14px;
    color: #3b3a39;
    white-space: nowrap;
    line-height: 20px;
    padding: 0 16px;
}

.header_dashboardNavPivot__-k6Rz .ms-Pivot-link:hover {
    color: #3b3a39;
    font-weight: 600;
    background-color: unset;
}

.header_dashboardNavPivot__-k6Rz .ms-Pivot-link.is-selected {
    font-weight: 600;
}

.header_dashboardNavPivot__-k6Rz .ms-Pivot-link.is-selected::before {
    background-color: #827dff;
}

.header_dashboardNavPivot__-k6Rz .ms-Pivot-link .ms-Button-flexContainer {
    flex-direction: row-reverse;
}

.header_dashboardNavPivot__-k6Rz .ms-Pivot-link.is-disabled,
.header_dashboardNavPivot__-k6Rz .ms-Pivot-link.is-disabled:hover {
    cursor: default;
    background-color: transparent;
}

.header_dashboardNavHeader__dW5ST + div.project,
.header_dashboardNavHeader__dW5ST + div.agentPlayground {
    height: calc(100% - 104px);
}

.header_dashboardNavHeader__dW5ST + div.project .dashboardContent {
    background: #eff6fc;
}

.header_dashboardNavPivotItemWithBeta__wsVao {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header_dashboardNavPivotItemWithBeta__wsVao svg {
    width: 30px;
}

.header_dashboardNavPivotLabelText__ZJHe5 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.header_dashboardNavPivotLabelText__ZJHe5::after {
    content: attr(data-text);
    font-weight: 600;
    font-size: 14px;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.header_aiVisibilitySubMenu__un7Kk {
    display: flex;
    flex-direction: column;
    padding: 4px;
    min-width: 160px;
}

.header_aiVisibilitySubMenuItem__5ZZka {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #3b3a39;
    text-align: left;
    border-radius: 4px;
    line-height: 20px;
    white-space: nowrap;
    margin: 2px;
}

.header_aiVisibilitySubMenuItem__5ZZka:hover {
    background: #eaeaff;
    color: #020057;
}

.header_aiVisibilitySubMenuItemActive__DSxhC,
.header_aiVisibilitySubMenuItemActive__DSxhC:hover {
    background: #eaeaff;
    color: #020057;
    font-weight: 600;
}

.header_aiVisibilitySubMenuItemActive__DSxhC::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    background: #827dff;
}

.header_aiVisibilitySubMenuBetaBadge__dXO3G {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    height: 20px;
    border-radius: 4px;
    background: #827dff;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    text-transform: uppercase;
}

@media only screen and (max-width: 400px) {
    .header_header__fIQUh {
        padding: 14px 12px;
    }
}

@media only screen and (max-width: 320px) {
    .header_header__fIQUh .header_logoSeparator__a6llf {
        margin-left: 10px;
    }

    .header_header__fIQUh .header_clarityLogo__zYzCf,
    .header_header__fIQUh .header_hamburger__lqpT0 {
        margin-right: 6px;
    }

    .header_header__fIQUh .header_msLogo__PFnQS {
        margin-right: 0;
    }

    .header_myProjectsButton__A3fj\+ button:first-child {
        padding: 0 0 0 8px;
    }

    .header_logoSeparator__a6llf::before {
        left: -5px;
    }
}

/* Bug 10698235 — under Windows High Contrast the header icons (Feedback, FAQ,
   Documentation, Profile) and the dashboard nav-tab icons (Dashboards,
   Recordings, Heatmaps, Settings) were painted white, which is invisible on the
   light Desert theme. Use CanvasText so they adapt to both light and dark HC. */
@media screen and (prefers-contrast: more), (forced-colors: active) {
    .header_header__fIQUh path,
    .header_header__fIQUh svg,
    .header_actionButton__430XA svg,
    .header_actionButton__430XA path,
    .header_actionButton__430XA i {
        fill: CanvasText;
        color: CanvasText;
    }

    .header_dashboardNavPivot__-k6Rz .ms-Pivot-icon svg,
    .header_dashboardNavPivot__-k6Rz .ms-Pivot-icon path,
    .tabs .ms-Pivot-icon svg,
    .tabs .ms-Pivot-icon path {
        fill: CanvasText;
        color: CanvasText;
    }
}

@media screen and (width >= 930px) {
    .header_smallScreen__R58X6 {
        display: none;
    }
}

@media screen and (width < 930px) {
    .header_bigScreen__5ywsR {
        display: none;
    }
}


/*# sourceMappingURL=homepage.efebb0ad6f19349c.css.map*/