style.css

@import "./style.base.css";
@import "./style.page.css";
@import "./style.nohero.css";
@import "./style.handbook.css";
@import "./style.catalog.css";
@import "./style.eleventy.nav.css";
@import "./style.components.css";
@import "./style.animations.css";
@import "./style.docs.css";
@import "./algolia-theme.css";
@import "./roadmap.css";
@import "./zoom-style.css";
@import "./node-red-style.css";
@import "../../node_modules/@flowforge/forge-ui-components/dist/forge-ui-components.css";
@import "../../node_modules/vanilla-cookieconsent/dist/cookieconsent.css";

@tailwind components;
@tailwind utilities;

/* Skip to main content link */
.skip-to-main {
    position: fixed;
    top: 0;
    left: 1rem;
    z-index: 9999;
    padding: 0.25rem 0.75rem;
    background-color: theme(colors.indigo.600);
    color: theme(colors.white);
    border-radius: 0 0 0.375rem 0.375rem;
    transform: translateY(-100%);
    transition: transform 0.2s ease;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
}
.skip-to-main:hover {
    background-color: theme(colors.indigo.700);
}
.skip-to-main:focus {
    transform: translateY(0);
    outline: 2px solid theme(colors.indigo.600);
    outline-offset: 2px;
}

html, body {
    font-size: 16px;
    font-family: 'Helvetica Neue', sans-serif;
    scroll-padding-top: 75px;
}

*{
    --tdur: 0.15s;
    transition: var(--tdur) background-color, var(--tdur) color, var(--tdur) fill, var(--tdur) stroke;
    -webkit-transition: var(--tdur) background-color, var(--tdur) color, var(--tdur) fill, var(--tdur) stroke;
}

/*
    Standard FlowFuse Sizings
*/
h1 {
    font-size: 2.75rem;
    line-height: 3.1rem;
}

@media (min-width: 1024px) {
    h1.home {
        font-size: 3.75rem;
        line-height: 1.05;
    }
}

h2 {
    font-size: 2.25rem;
    line-height: 2.65rem;
}

h3 {
    font-size: 1.85rem;
    line-height: 2.3rem;
}

h4 {
    font-size: 1.4rem;
    line-height: 1.9rem;
}

h5 {
    font-size: 1.1rem;
    line-height: 1.85rem;
    font-weight: 600;
}

p {
    font-size: 1rem;
    line-height: 1.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: 300;
}

h1, h2, h3, h4, h5, p {
    color: theme(colors.gray.700);
}

h1, h2, h3, h4 {
    font-weight: 400;
}

.prose .ff-blue-card > h1:first-of-type,
.prose .ff-blue-card > h2:first-of-type,
.prose .ff-blue-card > h3:first-of-type,
.prose .ff-blue-card > h4:first-of-type,
.prose .ff-blue-card > h5:first-of-type,
.prose .ff-blue-card > h6:first-of-type {
    margin-top: 0;
}

.prose .ff-blue-card > p:last-of-type {
    margin-bottom: 0;
}

.prose figcaption {
    text-align: center;
    margin-bottom: 1rem;
}

.container {
    position: relative;
    z-index: 2;
}

.ff-bg-dark h1, .ff-bg-mid h1,
.ff-bg-dark h2, .ff-bg-mid h2,
.ff-bg-dark h3, .ff-bg-mid h3,
.ff-bg-dark h4, .ff-bg-mid h4,
.ff-bg-dark h5, .ff-bg-mid h5 {
    color: theme(colors.teal.300);
}
.ff-bg-dark p, .ff-bg-mid p {
    color: theme(colors.white);
}


.ff-website {
    /* background-color: theme(colors.gray.800); */
}

*:has(> .ff-helper) {
    position: relative;
}
*:has(> .ff-helper):hover .ff-helper {
    visibility: visible;
}

.ff-helper {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 3px 6px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    font-size: 0.75rem;
}

.ff-helper::after {
    content: "";
    position: absolute;
    top: 100%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

/* .ff-bg-flows {
    background-image: url('/images/ff-bg-flows.svg');
    background-repeat: repeat-x;
    background-position-x: 50%;
    background-position-y: calc(100% + 50px);
    background-size: contain;
} */

/* .hero .ff-bg-flows {
    background-size: 100%;
    background-position-y: calc(100% + 100px);
}

@media (max-width: 1250px) {
    .ff-bg-flows {
        background-size: 100%;
        background-position-y: bottom;
    }
    .hero .ff-bg-flows {
        background-size: 100%;
        background-position-y: calc(100% + 25px);
    }
} */

.gradient-bg {
    background: radial-gradient(circle 80vw at 100% 0%, theme(colors.indigo.50), transparent);
}

.gradient-roi-bottom-right {
    background: radial-gradient(farthest-side at 100% 100%, theme(colors.indigo.100), transparent);
}

.hard-shadow-indigo300 {
    box-shadow: 4px 4px 0 0 theme(colors.indigo.300);
}

.pricing .gradient-bg {
    background: radial-gradient(circle 70vw at 50% 0%, theme(colors.indigo.50), transparent);
}

main a {
    color: theme(colors.blue.600);
}
main  a:hover {
    text-decoration: underline;
}
main  a.ff-btn:hover {
    text-decoration: none;
}

main .ff-bg-dark a, main .ff-bg-mid a {
    color: theme(colors.blue.600);
}
main .ff-bg-dark a:hover, main .ff-bg-mid a:hover {
    color: theme(colors.teal.500);
}
pre code {
    background: #030303
}

.prose code {
    font-weight: 500;
    padding-right: 0.25rem;
}

.prose .zoomable-image + em,
.prose img + em,
.prose picture + em {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    color: theme(colors.gray.600);
}

/* ensure any images smaller than width of the content are centrally aligned */
.prose .zoomable-image {
    text-align: center;
}

.prose picture {
    margin: auto;
}

.nodered table {
    text-align: center;
}

dl.message-properties {
    border-radius: 2px;
    /* margin: 5px auto 10px; */
}

dl.message-properties > dt {
    padding: 0px 6px 2px 6px;
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 0.875em;
    font-weight: 500;
    margin: 5px 3px 1px;
    color: theme(colors.indigo.600);
    white-space: nowrap;
    background-color: theme(colors.gray.100);
}

dl.message-properties > dt.optional {
    font-style: italic;
}

dl.message-properties > dt .property-type {
    color: theme(colors.gray.400);
    font-style: italic;
    font-size: 11px;
    float: right;
    padding-top: 4px;
}

dl.message-properties > dt:after {
    content: "";
    display: table;
    clear: both;
}

dl.message-properties > dd {
    margin: 0px 8px 12px 13px;
    vertical-align: top;
}

.ff-blue-card {
    box-shadow:  inset 13px 13px 26px theme('colors.indigo.100'),
    inset -13px -13px 26px theme('colors.white'),
    10px 10px 26px theme('colors.indigo.100'),
    -10px -10px 26px theme('colors.white');
    @apply m-auto text-center sm:text-left p-8 max-w-md sm:max-w-screen-lg bg-indigo-50 border border-white rounded-lg mt-6;
}

.main-content .ff-blue-card {
    @apply mb-6;
}

/*
    Event banner
*/
.event-banner-container {
    position: relative;
    height: 44px;
    width: 100%;
}

.event-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    animation: slideDown 0.5s ease-in-out;
}

.event-banner:first-child {
    visibility: visible;
}

@keyframes slideDown {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}

/*
    Blog
*/
.pagination a{
    color: theme(colors.gray.500) !important;
}

.pagination a:hover{
    color: theme(colors.gray.500) !important;
}

.ff-nav-blog-p::before{
    content: url('/images/icons/chevron-left.svg');
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    padding-top: 2px;
    margin-right: 0.5rem;
}

.ff-nav-blog-n::after{
    content: url('/images/icons/chevron-right.svg');
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    padding-top: 2px;
    margin-left: 0.5rem;
}

.blog-update-notes {
    background-color: theme(colors.indigo.50);
    border-radius: 4px;
    border: 2px solid theme(colors.indigo.200);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.blog-update-notes p:last-child {
    margin-bottom: 0;
}

/*
    prevent top margin on first/hero img of a blog post
*/
.prose .hero-img img {
    margin-top: 0;
}

/*
    Eleventy Code Clipboard Plugin
*/
.code-copy {
    color: theme(colors.teal.300);
}

.code-copy * {
    transition: none;
    -webkit-transition: none;
}
.code-copy:hover {
    color: white;
}

.tooltipped::before {
    color: black !important;
    border-bottom-color: black !important;
}

.tooltipped::after {
    background-color: black !important;
    color: white !important;
}

/* Icon from https://icon-sets.iconify.design/mdi/content-copy/ */
/* Instead of importing the whole of materialdesignicons.min.css as suggested by plugin docs */
.mdi {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: no-repeat center / 100%;
    mask: no-repeat center / 100%;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
}
.mdi.mdi-content-copy {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12V1Z'/%3E%3C/svg%3E");
}

/*
    Other
*/

body {
    --cc-btn-primary-bg: theme(colors.teal.500);
    --cc-btn-primary-text: var(--cc-bg);
    --cc-btn-primary-hover-bg: #1d2e38;
}

video, iframe {
    max-width: 100%;
}

h1,h2,h3,h4 {
    position: relative;
}
a.header-anchor {
    text-decoration: none !important;
    color: var(--tw-prose-headings);
    font-weight: 400
}
a.header-anchor:hover {
    text-decoration: inherit !important;
}
.header-anchor::before {
    content: '#';
    display: none;
    position:absolute;
    padding-right: 0.5rem;
    text-decoration: none !important;
    right: calc(100%);
}

h1:hover .header-anchor::before,
h2:hover .header-anchor::before,
h3:hover .header-anchor::before,
h4:hover .header-anchor::before {
    display: inline;
}

.ff-bg-dark {
    background-color: theme(colors.gray.800);
}
.ff-bg-mid {
    background-color: theme(colors.gray.700);
}
/* .ff-bg-light {
    background-color: theme(colors.gray.50);
} */

.ff-website .ff-input.ff-text-input {
    background-color: white;
}

.ff-website .ff-dropdown-selected {
    background-color: white;
}

.ff-website textarea {
    background-color: white;
}

.ff-tooltip {
    position: relative;
}

.ff-tooltip:after,
.ff-tooltip:before {
    content: '';
    opacity: 0;
    transition: opacity 0.15s;
}

.ff-tooltip:hover:after {
    content: attr(data-tooltip);
    background: theme(colors.gray.800);
    padding: 3px;
    border-radius: 6px;
    display: inline-block;
    position: absolute;
    transform: translate(-50%, -100%);
    margin: 0 auto;
    color: #FFF;
    min-width: 100px;
    min-width: 150px;
    top: -5px;
    left: 50%;
    text-align:center;
    font-size: 12pt;
    opacity: 1;
}

.ff-tooltip:hover:before {
    top: -5px;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    opacity: 1;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000;
    border-width: 5px;
    margin-left: -5px;
    transform: translate(0,0px);
}

.story .ff-tooltip:after {
    z-index: 1000;
}

.story .ff-tooltip:after {
    transform: translate(-50%, 100%);
    top: auto;
    bottom: -10px;
}

.story .ff-tooltip:before {
    top: auto;
    bottom: -10px;
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #000;
    transform: translate(0,0px);
}

.story .ff-tooltip:hover:after {
    min-width: 80px;
}

.ff-image-contain img,
.ff-image-contain picture {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.ff-image-contain.right img,
.ff-image-contain.right picture {
    object-position: right;
    width: auto;
    height: 100%;
    @apply border-4 border-red-600;
}

.ff-image-cover {
    overflow: hidden;
}

.ff-image-cover img,
.ff-image-cover picture {
    object-fit: cover;
    height: 100%;
    width: 100%;
    transition: transform 0.5s;
}
.ff-image-cover .event img,
.ff-image-cover .event picture {
    @apply object-right-top;
}

.ff-image-cover.right img,
.ff-image-cover.right picture {
    @apply object-right;
}
.ff-image-cover.left img,
.ff-image-cover.left picture {
    @apply object-left;
}
.ff-image-cover.center img,
.ff-image-cover.center picture {
    @apply object-center;
}

.ff-image-cover.top img,
.ff-image-cover.top picture {
    @apply object-top;
}

.ff-image-cover.blueprint img,
.ff-image-cover.blueprint picture {
    object-position: left top;
}

.ff-image-cover.scale:hover img,
.ff-image-cover.scale:hover picture {
    transform: scale(1.1);
}

.ff-image-cover.scale,
.ff-image-cover.scale {
    @apply cursor-pointer;
}

.ff-image-rounded,
.ff-image-rounded img,
.ff-image-rounded picture {
    @apply rounded-lg;
}

.ff-image-top-rounded img,
.ff-image-top-rounded picture {
    @apply rounded-t-lg;
}

.ff-image-left-rounded img,
.ff-image-left-rounded picture {
    @apply rounded-l-lg;
}

.ff-image-t-left-rounded img,
.ff-image-t-left-rounded picture {
    @apply rounded-tl-lg;
}

.partner-logo img,
.partner-logo picture {
    height: 100%;
    width: auto;
    max-height: 50px;
    object-fit: contain;
}

.partners > div:nth-child(2) {
    @apply bg-gray-50;
}

@media (min-width: 768px) {
    .ff-min-h-56 {
        min-height: 56px;
    }
}
/*
    Header
*/
@layer components {
    .ff-website .ff-header {
        @apply bg-white w-full px-6 py-4 sm:py-6 md:py-0 top-0 z-50 sticky;
    }

    .ff-website header .ff-wordmark path,
    .ff-website header .ff-icon--gh path {
        fill: theme(colors.indigo.600);
    }

    .ff-website header nav {
        @apply z-10 flex justify-between xl:grid xl:grid-cols-header;
    }

    .ff-website header nav .ff-nav-chevron {
        @apply block md:hidden transition-transform p-0 min-h-0 leading-none;
    }

    .ff-website header .ff-nav-dropdown:hover .ff-nav-chevron,
    .ff-website header .ff-nav-dropdown:focus-within .ff-nav-chevron {
        @apply transform rotate-180;
    }

    .ff-website header #nav-content {
        height: calc(100% - 64px - 64px);
        @apply top-8 md:top-0 transition-height fixed mt-8 w-full overflow-hidden border-none max-h-0 right-0 border-t shadow-sm z-10 bg-gray-50 flex-col items-center justify-between no-underline; /* font-light */
        @apply md:mt-0 md:h-auto md:overflow-visible md:max-h-20 md:relative md:shadow-none md:border-0 md:bg-transparent md:w-auto lg:static md:float-none md:flex md:flex-row md:flex-nowrap;
    }

    .ff-website header #nav-content > li {
        @apply md:whitespace-nowrap;
    }

    .ff-website header #nav-toggle {
        @apply py-2 px-3 ;
    }

    .ff-website header #nav-toggle.mobile-open {
        @apply py-1 px-2;
    }

    .ff-website header #nav-toggle.mobile-open .close,
    .ff-website header #nav-toggle .burger {
        @apply block;
    }

    .ff-website header #nav-toggle.mobile-open .burger,
    .ff-website header #nav-toggle .close {
        @apply hidden;
    }

    .ff-website header #mobile-ctas {
        transition: 0.3s bottom;
        @apply -bottom-32 fixed w-full flex flex-col left-0 pl-4 right-0 pr-4 bg-gray-50 py-4 gap-3;
    }
    .ff-website header #mobile-ctas button,
    .ff-website header #mobile-ctas a {
        @apply uppercase flex-grow;
    }
    .ff-website header #mobile-ctas a.ff-btn--primary-outlined {
        @apply text-indigo-600 border-indigo-600 border border-solid;
    }

    .ff-website header #nav-content li {
        @apply border-none;
    }

    .ff-website header .ff-icon--gh:hover path {
        @apply sm:bg-white;
    }

    .ff-website header a .ff-icon--down path {
        @apply sm:text-indigo-400;
    }

    .ff-website header a, .ff-website header span {
        color: theme(colors.gray.800);
    }

    .ff-website header .cta a {
        color: theme(colors.indigo.600);
        @apply md:px-3 font-normal whitespace-nowrap;
    }


    .ff-website header ul a, .ff-website header ul span {
        border-color: theme(colors.gray.200);
        @apply py-3 sm:py-4 px-4 text-base sm:border-b-0 text-center;
    }
    .ff-website header ul.narrow span {
        border-color: theme(colors.gray.200);
        @apply sm:pt-2 sm:pb-4;
    }

    .ff-website header ul a.ff-btn {
        @apply text-sm font-bold;
    }

    .ff-website header a:hover .ff-icon--down path,
    .ff-website header ul a:hover, .ff-website header ul span:hover {
        @apply text-indigo-700 md:text-indigo-700;
    }

    .ff-website header ul li.title span:hover {
        @apply text-current;
    }

    .ff-website header a > span {
        transform: scale(0.75);
    }

    .ff-website header a:hover > span {
        transform: scale(0.75)rotate(180deg);
    }

    .ff-website header .ff-nav-dropdown > ul {
        top: 100%;
        z-index: 10;
        right: 0;
        min-width: 100%;
        white-space: nowrap;
        width: max-content;
        max-height: 0;
        overflow: hidden;
        @apply md:mt-3 md:absolute md:rounded-lg md:shadow-nav md:bg-gray-50; /* dropdown bg color */
        @apply transition-navdropdown;
    }

    .ff-website header .ff-nav-dropdown > ul.align-left {
        right: auto;
        left: 0;
    }

    .ff-website header .ff-nav-dropdown > ul:before {
        content: url("/images/nav-arrow.svg");
        z-index: 10;
        position: absolute;
        top: -16px;
        right: 3rem;
        @apply hidden md:block;
    }
    .ff-website header .ff-nav-dropdown > ul.align-left:before {
        right: auto;
        left: 3rem;
    }

    .ff-website header .ff-nav-dropdown a {
        cursor: default;
        @apply w-full sm:w-auto py-3;
    }

    /* nested list */
    .ff-website header .ff-nav-dropdown:hover > ul:not(.ff-nav-nested-cols),
    .ff-website header .ff-nav-dropdown:focus-within > ul:not(.ff-nav-nested-cols) {
        max-height: none;
        @apply sm:py-2 sm:overflow-visible text-gray-700;
    }

    .ff-website header .ff-nav-dropdown:hover > ul.narrow,
    .ff-website header .ff-nav-dropdown:focus-within > ul.narrow {
        @apply sm:pb-4;
    }

    .ff-website header .ff-nav-dropdown ul li {
        @apply text-left sm:bg-gray-50 sm:text-right font-light; /* bg each list item */
    }
    .ff-website header .ff-nav-dropdown ul li.title {
        @apply font-normal;
    }
    .ff-website header .ff-nav-dropdown >ul li a {
        cursor: pointer;
        @apply text-left pl-6 md:text-right md:pr-6 text-gray-700;
    }

    .ff-website header .ff-nav-dropdown ul.sub-menu a {
        @apply py-3 pl-3;
    }

    .ff-website header .ff-nav-dropdown >ul li a .ff-icon--solid {
        fill: theme(colors.gray.700);
    }

    /* double nested */
    .ff-website header .ff-nav-dropdown .ff-nav-dropdown >ul {
        @apply sm:max-h-full sm:overflow-visible;
    }

    .ff-website header .ff-nav-dropdown .ff-nav-dropdown >ul li a {
        @apply pl-12;
    }

    .ff-website header .ff-nav-dropdown:hover {
        @apply md:text-indigo-700;
    }

    .ff-website header .ff-nav-dropdown >ul li:hover > a,
    .ff-website header .ff-nav-dropdown >ul li:hover > a svg {
        color: theme(colors.indigo.700);
    }

    .ff-website header .ff-nav-dropdown >ul li:hover > a .ff-icon--solid {
        fill: theme(colors.indigo.700);
    }

    .ff-website header.mobile-open {
        @apply border-b sticky;
    }

    .ff-website header.mobile-open #nav-content {
        overflow-y: auto;
        @apply max-h-full fixed;
    }

    .ff-website header.mobile-open #mobile-ctas {
        @apply bottom-0;
    }
}

/*
    Specific Page Styling
*/
@layer components {
    .ff-blog-tile img,
    .ff-blog-tile svg {
        object-fit: cover;
        aspect-ratio: 1.78;
        margin-bottom: 0.7rem;
    }
    .ff-blog-tile img,
    .prose img {
        @apply rounded-lg;
    }
}

.event img,
.event picture {
    @apply mix-blend-luminosity;
}

.hannover-logo-container {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 85px;
    height: auto;
}

.ff-full-bg {
    min-height: calc(100vh - 310px);
}

.indigo-gradient {
    background: linear-gradient(127.44deg, #C63A3A 32.29%, #3A2828 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.testimonial-button span {
    background-color: theme(colors.gray.100);
    display: inline-block;
    padding: 6px;
    border: 1px solid theme(colors.gray.200);
    border-radius: 26px;
    transition: all 0.5s ease;
}

.testimonial-button.active span {
    background-color: theme(colors.indigo.200);
    border: 1px solid theme(colors.indigo.300);
}

.testimonial {
    transition: opacity 0.7s ease, transform 0.7s ease;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 0%;
    transform: translateX(20px);
}

.testimonial #container {
    @apply md:min-h-[284px] min-h-[650px];
}

.testimonial.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    width: 100%;
    transform: translateX(0);
}

/*
    Migration Service
*/

.ff-file-drop-zone {
    background-color: theme(colors.blue.50);
    border: 1px dashed theme(colors.blue.300);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 100%;
    padding: 64px;
    text-align: center;
}

.ff-file-drop-zone:hover {
    background-color: theme(colors.blue.100);
    border: 1px solid theme(colors.blue.300);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ff-file-drop-zone input[type="file"] {
    display: none;
}

.ff-dashboard-migration {
    display: grid;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
    @apply max-md:px-6;
}

.ff-dashboard-migration-actions {
    margin: auto;
}

@media (min-width: 680px) {
    .ff-dashboard-migration {
        grid-template-columns: 1fr 1fr;
    }
}

/*
    Footer
*/
@layer components {

    .ff-footer-columns {
        grid-template-columns: 1fr 38% 25%;
    }

    .ff-footer-columns > div {
        @apply mb-6 md:mb-0;
    }

    .ff-footer-columns > div:first-child {
        @apply mb-2;
    }

    .ff-footer h4 {
        color: theme(colors.gray.800);
        @apply mb-2;
    }

    .ff-footer .copyright-statement {
        font-size: 0.75rem;
        margin-top: 0.75rem;
        color: theme(colors.gray.600);
        font-weight: 200;
    }

    .ff-footer li {
        color: theme(colors.gray.800);
        font-weight: 200;
    }

    .ff-footer li:hover {
        color: theme(colors.indigo.700);
        text-decoration: underline;
    }

    .ff-footer svg {
        color: theme(colors.gray.800);
        opacity: 1;
    }
    /*
        Components
    */

    .ff-icon {
        width: 24px;
        height: 24px;
        display: inline-flex;
        stroke-width: 2px;
        /* color: theme(colors.indigo.600); */
    }

    .ff-icon-sm {
        width: 20px;
        height: 20px;
        display: inline-flex;
        stroke-width: 1.5px;
    }

    .ff-icon-lg {
        height: 48px;
        width: 48px;
        stroke-width: 1px;
    }

    .ff-icon-lg:not(.ff-icon--solid) {
        stroke: theme(colors.indigo.600);
    }

    .ff-bg-dark .ff-icon-lg:not(.ff-icon--solid),
    .ff-bg-dark .ff-icon-lg:not(.ff-icon--solid) {
        stroke: theme(colors.teal.200);
    }

    .ff-select {
        background-color: theme(colors.white);
        padding: 3px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image:
                linear-gradient(45deg, transparent 50%, gray 50%),
                linear-gradient(135deg, gray 50%, transparent 50%),
                linear-gradient(to right, theme(colors.gray.700), theme(colors.gray.700));
        background-position:
                calc(100% - 16px) calc(1em + 2px),
                calc(100% - 11px) calc(1em + 2px),
                calc(100% - 2.25em) 0.5em;
        background-size:
                5px 5px,
                5px 5px,
                1px 1.5em;
        background-repeat: no-repeat;
    }

    /*
        FF Dialog
    */

    .ff-dialog-container {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        justify-content: center;
        align-items: center;
    }

    .ff-dialog-shadow {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #00000042;
    }

    .ff-dialog-modal {
        background-color: white;
        z-index: 2;
        width: calc(100% - 48px);
        max-width: 42rem;
        text-align: left;
    }

    .ff-dialog-header {
        height: 48px;
        line-height: 48px;
        background-color: #1F2937;
        border-bottom: 2px solid #ED4E4E;
        padding: 0 18px;
        color: white;
        font-weight: 600;
    }

    .ff-dialog-content {
        background-color: white;
        padding: 0 1.5rem;
        text-align: left;
    }

    .ff-dialog-container.active {
        display: flex;
    }

    .ff-website .ff-video {
        border-radius: 12px;
        border: 2px solid theme(colors.indigo.500);
        background-color: theme(colors.white);
    }

    .ff-website .ff-btn {
        justify-content: center;
        font-weight: bold;
        height: auto;
        padding: 8px 16px;
        border: 0;
        border-radius: 4px;
    }

    .ff-website .ff-btn.ff-btn--primary {
        background-color: theme(colors.indigo.600);
        color: white;
    }

    .ff-website .ff-btn.ff-btn--primary:hover {
        background-color: theme(colors.indigo.700);
        color: white;
    }

    .ff-website .ff-btn.ff-btn--primary-outlined {
        box-sizing: border-box;
        background-color: transparent;
        color: theme(colors.indigo.600);
        border: 1px solid theme(colors.indigo.600);
    }

    .ff-website .ff-btn.ff-btn--primary-outlined:hover {
        background-color: theme(colors.indigo.700);
        color: theme(colors.white);
        border: 1px solid theme(colors.indigo.700);
    }

    .ff-website .ff-btn.ff-btn--highlight {
        background-color: theme(colors.red.600);
        color: white;
    }

    .ff-website .ff-btn.ff-btn--highlight:hover {
        background-color: theme(colors.red.700);
        color: white;
    }

    .ff-website .ff-btn.ff-btn--highlight-outlined {
        background-color: transparent;
        color: theme(colors.red.600);
        border: 1px solid theme(colors.red.600);
    }

    .ff-website .ff-btn.ff-btn--highlight-outlined:hover {
        background-color: theme(colors.red.700);
        color: theme(colors.white);
        border: 1px solid theme(colors.red.700);
    }

    .ff-website .ff-bg-dark .ff-text-input {
        background-color: theme(colors.gray.700);
        border-color: theme(colors.teal.500);
        border-width: 1px;
        padding: 8px 12px;
        font-weight: 200;
        height: 36px;
        color: theme(colors.white);
    }

    .ff-website .ff-text-input {
        background-color: theme(colors.gray.50);
        border-color: theme(colors.gray.300);
        color: theme(colors.gray.800);
    }

    .ff-toggle-switch {
        background-color: theme(colors.gray.800);
        color: theme(colors.white);
        border-radius: 2rem;
        text-transform: uppercase;
        padding: .25rem;
        line-height: 2rem;
    }

    .ff-toggle-switch {
        background-color: theme(colors.gray.800);
        color: theme(colors.white);
        border-radius: 2rem;
        text-transform: uppercase;
        padding: .25rem;
        line-height: 2rem;
        display: flex;
        grid-gap: 1rem;
    }

    .ff-toggle-switch .ff-option {
        padding: 0.25rem 1.5rem;
        border-radius: 1.5rem;
        cursor: pointer;
    }

    .ff-toggle-switch .ff-option:hover {
        background-color: theme(colors.teal.700);
    }

    .ff-toggle-switch .ff-option.ff--active {
        background-color: theme(colors.indigo.700);
        cursor: default;
    }

    .ff-tab-content {
        display: none;
        @apply px-8 sm:py-0;
    }

    .ff-tab-content.ff--active {
        display: block;
    }

    .ff-feature-table {
        @apply sm:max-w-screen-lg w-full md:px-9;
        margin-top: 3rem;
        position: relative;
        color: theme(colors.gray.800);
        border-radius: 12px;
        min-width: 600px;
    }

    .ff-feature-table--body {
        margin-top: 0;
    }

    .ff-feature-table li .ff-icon {
        width: 32px;
        height: 32px;
        stroke: theme(colors.gray.800);
    }

    .ff-feature-table .ff-feature-table-section li.ff-feature--column-buttons .ff-btn{
        padding: 0px;
        height: 100%;
    }

    .ff-feature-table-section {
        position: relative;
        text-align: left;
    }

    .ff-feature-table-section li {
        display: grid;
        grid-template-columns: 270px 1fr 1fr 1fr;
        align-items: center;
        column-gap: 0.5rem;
        @apply bg-indigo-50/30;
    }

    .self-hosted.ff-feature-table-section li {
        grid-template-columns: 320px repeat(3, 1fr);
    }

    .ff-feature-table-section li:first-child {
        @apply bg-white;
    }

    @media (max-width: 720px) {
        .ff-feature-table-section li {
            grid-template-columns: 220px 1fr 1fr 1fr;
        }
        .self-hosted.ff-feature-table-section li {
            grid-template-columns: 220px repeat(3, 1fr);
        }
    }

    @media (max-width: 680px) {
        .ff-feature-table-section li {
            grid-template-columns: 170px 1fr 1fr 1fr;
        }
        .self-hosted.ff-feature-table-section li {
            grid-template-columns: 170px repeat(3, 1fr);
        }
    }

    .ff-feature-table-section li.ff-feature-row:nth-child(odd) {
        @apply bg-white;
    }

    .ff-feature-table-section li.ff-feature-row label {
        @apply py-3 pr-3 px-4 md:px-6;
    }

    main .ff-feature-row a {
        @apply text-gray-800 no-underline;
    }

    .ff-feature-row a:hover {
        @apply no-underline;
    }

    .ff-feature-table-section li.ff-feature--column-header {
        padding: 0;
        margin-top: 0;
    }

    .ff-feature-table-section li.ff-feature--column-header label {
        text-align: center;
        font-weight: 600;
        font-size: 1.25rem;
        line-height: 1.5rem;
        padding: 10px 6px;
        height: 100%;
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
        background: linear-gradient(theme(colors.indigo.50), theme(colors.white));
        @apply flex items-center justify-center flex-col text-indigo-700;
    }

    .ff-feature-table-section li.ff-feature--column-header label.ff-blank {
        height: 100%;
        border-top: 0;
        border-bottom: 0;
        border-radius: 0;
        margin-top: -20px;
        @apply flex items-center justify-center flex-col;
    }

    .ff-feature-table-section li.ff-feature--column-buttons {
        background-color: white;
        padding: 0;
        column-gap: 0.75rem;
    }
    .ff-feature-table-section li.ff-feature--column-buttons label {
        text-align: center;
        font-weight: 600;
        font-size: 1.25rem;
        line-height: 1.5rem;
        padding: 0;
        height: 100%;
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
        @apply flex items-center justify-center;
    }

    .ff-feature-table-section li:not(.ff-feature--column-header) label {
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .ff-feature-table-section li:not(.ff-feature--column-header):not(.ff-feature--column-buttons) label {
        border-right: 1px solid theme(colors.indigo.100);
    }

    .ff-feature-table-section li:not(.ff-feature--column-header):nth-child(even) label {
        background-color: #FAFBFF;
    }

    .ff-feature-table-section li:not(.ff-feature--column-header):nth-child(odd) label {
        @apply bg-white;
    }

    .ff-feature-table-section li:not(.ff-feature--column-header) label .ff-icon {
        margin-left: auto;
        width: 20px;
        color: theme(colors.gray.400);
        transition: none;
    }

    .ff-feature-table-section li:not(.ff-feature--column-header) label:hover,
    .ff-feature-table-section li:not(.ff-feature--column-header) label:hover .ff-icon {
        cursor: pointer;
        color: theme(colors.blue.600);
    }

    .ff-feature-table-section li span {
        text-align: center;
        height: 100%;
        @apply px-1 py-2 flex items-center justify-center text-sm;
    }

    .ff-feature-table-section li span:has(.ff-feature-note) {
        flex-wrap: wrap;
    }

    .ff-feature-table-section li span.ff-feature-note {
        font-size: 0.75rem;
        line-height: 1rem;
        color: #4338ca;
        background-color: #eef2ff;
        border-radius: 9999px;
        padding: 0.125rem 0.5rem;
        white-space: nowrap;
        font-weight: 500;
        height: auto;
    }

    .ff-feature-table-section li button {
        width: 100%;
    }

    .ff-feature--header {
        background-color: theme(colors.indigo.50) !important;
        color: theme(colors.indigo.700);
        /* padding: 12px 24px; */
        width: 100%;
        text-align: left;
        z-index: 1;
    }

    li.ff-feature--header span {
        text-align: left;
        height: 100%;
        display: flex;
        justify-content: left !important;
        padding-top: 12px;
        padding-bottom: 12px;
        @apply px-1 px-4 md:px-6;
    }

    .ff-feature-table--body .ff-feature-table-section:first-child .ff-feature--header {
        @apply rounded-tl-lg;
    }

    .ff-feature-table--body .ff-feature-table-section:nth-child(2) li:last-child {
        @apply rounded-bl-lg;
    }

    /* Enterprise column highlight border */
    .ff-feature-table-section li > :nth-child(4) {
        border-left: 2px solid theme(colors.indigo.200);
        border-right: 2px solid theme(colors.indigo.200);
    }

    /* Column header Enterprise label: top border + rounded top */
    .ff-feature-table-section li.ff-feature--column-header > :nth-child(4) {
        border-top: 2px solid theme(colors.indigo.200);
        border-radius: 12px 12px 0 0;
        margin: 0;
    }

    /* Bottom border + rounded corners on last data section */
    .ff-feature-table > ul:nth-last-child(2) li:last-child > :nth-child(4) {
        border-bottom: 2px solid theme(colors.indigo.200);
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    /* No highlight on buttons row */
    .ff-feature-table-section li.ff-feature--column-buttons > :nth-child(4) {
        border-left: none;
        border-right: none;
    }

    .ff-features-key {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 48px;
        margin-top: 64px;
    }

    .ff-features-key label {
        margin-left: 12px;
    }
    /*
        Certify hardware lists
    */

    .ff-certify-list {
        @apply flex flex-col gap-y-10 sm:gap-y-0;
    }

    .ff-certify-list > .ff-item {
        @apply grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-flow-col md:px-10 sm:gap-x-6 sm:grid-rows-[minmax(18px,1fr),60px,minmax(18px,1fr)];
    }

    .ff-certify-list > .ff-item:first-of-type {
        @apply sm:grid-rows-[36px,minmax(18px,1fr)];
    }

    .ff-certified {
        @apply sm:grid-cols-[24px,1fr,86px];
    }

    .ff-line-container {
        @apply grid items-stretch my-auto sm:my-0 sm:mx-auto;
    }

    .ff-line {
        @apply sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500;
    }

    .ff-certify-list-icon {
        @apply m-auto text-gray-500 w-[24px];
    }

    /*
        Used for nicely formatting links
    */

    .ff-website .ff-nodered-resources {
        @apply gap-y-4;
    }

    ul.ff-nodered-resources {
        @apply flex flex-col;
    }

    .ff-website .ff-nodered-resources a {
        @apply block border rounded-xl text-black hover:text-blue-600 hover:no-underline hover:cursor-pointer h-full;
    }

    .ff-website .ff-nodered-resources--icon {
        @apply border-r p-2 bg-gray-50 text-indigo-600 rounded-tl-xl rounded-bl-xl transition-colors;
    }

    .ff-website .ff-nodered-resources--icon svg {
        stroke-width: 1.5px;
    }

    .ff-website .ff-nodered-resources--icon svg,
    .ff-website .ff-nodered-resources--icon path {
        @apply transition-none;
    }

    .ff-website .ff-nodered-resources a:hover .ff-nodered-resources--icon {
        @apply bg-blue-600 text-white;
    }

    .ff-website .ff-nodered-resources a:hover .ff-nodered-resources--icon {
        @apply bg-blue-600;
    }

    .ff-website .ff-nodered-resources li {
        @apply text-base flex items-center gap-2 bg-white rounded-xl h-full;
    }

    .ff-website .ff-nodered-resources img,
    .ff-website .ff-nodered-resources picture {
        @apply w-full h-full;
    }

    .ff-website .ff-nodered-resources li label {
        @apply p-2 pointer-events-none;
    }

    /*
        SVG Dividers
    */
    .ff-divider {
        position: relative;
        width: 100%;
    }

    .ff-divider svg {
        position: absolute;
        height: 100%;
        width: 100%;
        /* height: 400px; */
        /* margin-top: -200px; */
        @apply h-40 -mt-20 md:h-80 md:-mt-40;
    }

    .ff-divider--shallow {
        margin-bottom: -1px;
    }

    .ff-divider--shallow svg {
        height: 180px;
        margin-top: -180px;
        /* @apply mt-20; */
        @apply h-20 -mt-20 md:h-28 md:-mt-28;
    }

    .ff-hardware-partners {
        @apply flex gap-x-16 gap-y-8 flex-wrap items-center pt-6 pb-10 justify-center;
    }
    .ff-hardware-partners svg{
        @apply flex-shrink-0 text-gray-500 opacity-60;
    }

    /*
        Social proof
    */

    @keyframes slide {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%);
        }
    }

    .social-proof-carousel {
        overflow: hidden;
        @apply py-10;
        white-space: nowrap;
        position: relative;
        display: flex;
    }

    .social-proof-carousel:hover div {
        animation-play-state: paused;
    }

    .social-proof-carousel div {
        display: flex;
        flex-shrink: 0;
        width: auto;
        align-items: center;
        animation: 60s slide infinite linear;
    }

    .social-proof-carousel div img,
    .social-proof-carousel div picture {
        flex-shrink: 0;
        max-height: 60px;
        width: auto;
        display: inline-block;
        @apply mx-6;
        overflow-clip-margin: content-box;
        overflow: clip;
    }
}

/* Tier badges for changelog & blog */
.ff-tier-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px 0;
}

.ff-tier-badges--h2 {
    margin-top: -15.2px;
}

.ff-tier-badge {
    @apply inline-flex whitespace-nowrap text-current;
    font-size: 0.75rem;
    line-height: 1rem;
}

.ff-tier-badge__label {
    @apply px-2.5 py-0.5 text-gray-600 font-medium bg-gray-100 border border-r-0 border-gray-200 rounded-l;
}

.ff-tier-badge__value {
    @apply px-2.5 py-0.5 text-gray-500 font-light bg-white border border-l-0 border-gray-200 rounded-r;
}

.ff-feature-info {
    margin: 4px 0 16px 0;
}

.ff-related-changelogs {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.ff-related-changelogs a {
    color: #4338ca;
}

pre.mermaid {
    background-color: #ffffff
}
/*
    FlowFuse markdown-it rendered footnote styles
*/
div.content hr.footnotes-sep {
    margin-top: 3em;
    margin-bottom: 1em;
}
div.content section.footnotes ol li,
div.content section.footnotes ol li:before,
div.content section.footnotes ol li p {
    font-weight: 300;
    font-family: 'roboto', sans-serif, 'system-ui';
    color: theme(colors.gray.400);
    font-size: 0.8rem;
    line-height: 0.8rem;
}

.nodered-pillar-bg {
    background-image: url('../images/bg-nodered-editor.png');
    background-blend-mode: luminosity;
    background-color: theme(colors.indigo.600);
    background-size: cover;
    background-position-y: bottom;
}

.features-bg {
    background-image: url('../images/features/features-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: center;
}

/*
    Overwrite HubSpot Z Index
*/

#hubspot-messages-iframe-container {
    z-index: 5 !important;
}

/*
    Hide HubSpot cookie banner
*/
#hs-banner-parent {
    display: none !important;
}

/*
    Overwrite Cookie Banner buttons style
*/

#cc-main {
    --cc-btn-primary-bg: theme(colors.indigo.600);
    --cc-btn-primary-hover-bg: theme(colors.indigo.800);
    --cc-btn-secondary-bg: theme(colors.gray.200);
    --cc-btn-secondary-hover-bg: theme(colors.gray.200);
}

.pm__btn,
.cm__btn {
    border: none !important;
}

@media (max-width: 640px) {
    body #cc-main .cm__desc {
        font-size: .8em;
    }

    body #cc-main .cm__btns {
        padding: .25rem 1.1rem .5rem;
    }
    body #cc-main .cm__btn-group {
        display: flex;
        flex-direction: row !important;
        gap: 1rem;
    }

    body #cc-main .pm__btn,
    body #cc-main .cm__btn {
        border: none;
        align-self: end;
        flex: 1;
        padding: .4em 1em;
    }
}

/*
    Overwrite range slider default styles
*/

input[type="range"] {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    width: 100%;
    cursor: pointer;
    outline: none;
    border-radius: 15px;
    /*  overflow: hidden;  remove this line*/

    /* New additions */
    height: 6px;
    background: theme(colors.indigo.600);
}

input[type="range"]:focus-visible {
    outline: 2px solid theme(colors.indigo.600);
    outline-offset: 2px;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    height: 18px;
    width: 18px;
    background-color: theme(colors.indigo.600);
    border-radius: 50%;
    border: solid 2px theme(colors.indigo.300);
    /* box-shadow: -407px 0 0 400px theme(colors.gray.700); emove this line */
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
    height: 18px;
    width: 18px;
    background-color: theme(colors.indigo.600);
    border-radius: 50%;
    border: solid 2px theme(colors.indigo.300);

    /* box-shadow: -407px 0 0 400px theme(colors.gray.700); emove this line */
    transition: .2s ease-in-out;
}

/* Hover, active & focus Thumb: Webkit */

input[type="range"]::-webkit-slider-thumb:hover {
    background-color: theme(colors.indigo.800);
}

/* Hover, active & focus Thumb: Firefox */

input[type="range"]::-moz-range-thumb:hover {
    background-color: theme(colors.indigo.800);
}

/*=============
Aesthetics
=========================*/

.range {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
    height: 2rem;
    width: 100%;
}


.dashboard-image img, .ebook-images img {
    border: 2px solid theme(colors.indigo.100);
    border-radius: 8px;
}

@media (max-width: 768px) {
    .dashboard-image {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 1rem;
    }

    .dashboard-image > :nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .dashboard-image > :nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .dashboard-image > :nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
}

.ebook-images{
    display: flex;
}

.ebook-images > :nth-child(2){
    height: 100%;
}

lite-youtube {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 0.75rem;
}

lite-youtube::before {
    display: none !important;
}

.bg-radial-indigo {
    background: radial-gradient(ellipse 30% 70% at center bottom, rgb(from theme(colors.blue.200) r g b / 0.3) 0%, rgb(from theme(colors.blue.200) r g b / 0) 100%);
}

.bg-radial-indigo-small {
    background: radial-gradient(ellipse 50% 5% at center bottom, rgb(from theme(colors.blue.200) r g b / 0.3) 0%, rgb(from theme(colors.blue.200) r g b / 0) 100%);
}

/* AI Chat Interface Styles */
.bg-gradient-purple {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
}

.bg-raster-pattern {
    position: relative;
}

.bg-raster-pattern::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
            linear-gradient(rgba(99, 102, 241, 0.15) 1px, transparent 1px),
            linear-gradient(90deg, rgba(99, 102, 241, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    border-radius: inherit;
}

.ai-chat-container {
    position: relative;
}

.ai-chat-box {
    position: relative;
    z-index: 1;
}

.ai-chat-box .textarea-wrapper {
    background: linear-gradient(white, white) padding-box,
    linear-gradient(135deg, theme(colors.red.400), theme(colors.indigo.400), theme(colors.red.400)) border-box;
    border: 1px solid transparent;
    animation: gradient-border-rotate 4s linear;
}

.ai-chat-box .textarea-wrapper:focus-within {
    outline: 2px solid theme(colors.indigo.500);
    outline-offset: 3px;
}

/* View transition names for 'morphing-content' are set dynamically via JavaScript for AI modal transitions */

/* View Transition styles for smooth morphing */
::view-transition-old(morphing-content),
::view-transition-new(morphing-content) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Let the browser handle the natural morph animation */
::view-transition-group(morphing-content) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes gradient-border-rotate {
    0% {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(0deg, theme(colors.red.600), #5048e5, theme(colors.red.600)) border-box;
    }
    10% {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(36deg, theme(colors.red.600), #5048e5, theme(colors.red.600)) border-box;
    }
    20% {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(72deg, theme(colors.red.600), #5048e5, theme(colors.red.600)) border-box;
    }
    30% {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(108deg, theme(colors.red.600), #5048e5, theme(colors.red.600)) border-box;
    }
    40% {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(144deg, theme(colors.red.600), #5048e5, theme(colors.red.600)) border-box;
    }
    50% {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(180deg, theme(colors.red.600), #5048e5, theme(colors.red.600)) border-box;
    }
    60% {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(216deg, theme(colors.red.600), #5048e5, theme(colors.red.600)) border-box;
    }
    70% {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(252deg, theme(colors.red.600), #5048e5, theme(colors.red.600)) border-box;
    }
    80% {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(288deg, theme(colors.red.600), #5048e5, theme(colors.red.600)) border-box;
    }
    90% {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(324deg, theme(colors.red.600), #5048e5, theme(colors.red.600)) border-box;
    }
    100% {
        background: linear-gradient(white, white) padding-box,
        linear-gradient(360deg, theme(colors.red.600), #5048e5, theme(colors.red.600)) border-box;
    }
}

.ai-chat-box .ff-btn {
    z-index: 2;
}

.ai-chat-box .textarea-wrapper.modal-header {
    background: linear-gradient(white, white) padding-box,
    linear-gradient(90deg, theme(colors.red.400), theme(colors.indigo.400), theme(colors.red.400), theme(colors.indigo.400), theme(colors.red.400)) border-box;
    border: none;
    border-bottom: 1px solid transparent;
    background-size: 200% 100%;
    animation: gradient-flow-lr 4s linear;
}

@keyframes gradient-flow-lr {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}

#continue-to-app.textarea-wrapper {
    background: linear-gradient(white, white) padding-box,
    linear-gradient(135deg, theme(colors.red.400), theme(colors.indigo.400), theme(colors.red.400)) border-box;
    border: 1px solid transparent;
    animation: gradient-border-rotate 4s linear;
}

.prompt-pill {
    cursor: pointer;
    transition: all 0.2s ease;
}

.prompt-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    background: white;
    border: 1px solid theme(colors.gray.200);
    color: theme(colors.gray.700);
}

.status-pill--secure {
    border-color: theme(colors.green.200);
    background: theme(colors.green.50);
    color: theme(colors.green.700);
}

.status-pill--observable {
    border-color: theme(colors.blue.200);
    background: theme(colors.blue.50);
    color: theme(colors.blue.700);
}

.status-pill--trusted {
    border-color: theme(colors.purple.200);
    background: theme(colors.purple.50);
    color: theme(colors.purple.700);
}

.raster-gradient-bg {
    background: radial-gradient(circle 80vw at 100% 0%, theme(colors.indigo.50), transparent);
    position: relative;
}

.raster-gradient-bg.red-blob {
    background: radial-gradient(circle 40vw at 20% 40%, rgb(from theme(colors.red.50) r g b / 0.5), transparent);
    position: relative;
}

.nr-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
            linear-gradient(rgba(99, 102, 241, 0.15) 1px, transparent 1px),
            linear-gradient(90deg, rgba(99, 102, 241, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;

    /* Mask using the gradient - grid fades in/out */
    mask: linear-gradient(to top,
    transparent 35%,       /* invisible at bottom */
    black 56%,             /* fully visible starts */
    black 78%,             /* fully visible ends */
    transparent 97%        /* invisible at top */
    );
    -webkit-mask: linear-gradient(to top,
    transparent 35%,
    black 56%,
    black 78%,
    transparent 97%
    );

    pointer-events: none;
    border-radius: inherit;
}