/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap";

@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *, :before, :after, ::backdrop {
            --tw-font-weight: initial
        }
    }
}

@layer theme {
    :root, :host {
        --font-sans: "Open Sans",sans-serif;
        --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
        --color-cyan-400: oklch(78.9% .154 211.53);
        --color-neutral-100: oklch(97% 0 0);
        --color-neutral-300: oklch(87% 0 0);
        --color-neutral-500: oklch(55.6% 0 0);
        --color-neutral-700: oklch(37.1% 0 0);
        --color-white: #fff;
        --spacing: .25rem;
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-3xl: 1.875rem;
        --text-4xl: 2.25rem;
        --text-6xl: 3.75rem;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --tracking-tighter: -.05em;
        --tracking-normal: 0em;
        --leading-snug: 1.375;
        --leading-normal: 1.5;
        --leading-relaxed: 1.625;
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --color-brand-black: #181b1a;
        --color-brand-cyan: #22d3ee;
        --color-brand-cyan-light: #a5f3fc;
        --container-8xl: 1440px
    }
}

@layer base {
    *, :after, :before, ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html, :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings,normal);
        font-variation-settings: var(--default-font-variation-settings,normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b, strong {
        font-weight: bolder
    }

    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
        font-feature-settings: var(--default-mono-font-feature-settings,normal);
        font-variation-settings: var(--default-mono-font-variation-settings,normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub, sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol, ul, menu {
        list-style: none
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display: block
    }

    img, video {
        max-width: 100%;
        height: auto
    }

    button, input, select, optgroup, textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple],[size])) optgroup {
        font-weight: bolder
    }

        :where(select:is([multiple],[size])) optgroup option {
            padding-inline-start: 20px
        }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab,currentcolor 50%,transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button, input:where([type=button],[type=reset],[type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }

    h1 {
        color: var(--color-brand-black,#181b1a);
        font-size: var(--text-6xl,60px);
        font-style: normal;
        font-weight: var(--font-weight-bold,700);
        line-height: var(--font-leading-9,36px);
        letter-spacing: -.4px
    }

    h2 {
        color: var(--color-brand-black,#181b1a);
        font-size: var(--text-3xl,30px);
        font-style: normal;
        font-weight: var(--font-weight-bold,700);
        line-height: var(--font-leading-9,36px);
        letter-spacing: -.4px
    }

    a {
        color: var(--color-cyan-400,#22d3ee);
        text-decoration: underline
    }

    header {
        background-color: var(--color-brand-black);
        padding: calc(var(--spacing)*4)calc(var(--spacing)*6);
        z-index: 100;
        position: relative;
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: var(--container-8xl, 1440px);
        margin: 0 auto;
    }

    .header-left {
        flex: 0 0 auto;
    }

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

    .header-right {
        flex: 0 0 auto;
    }

    .site-logo {
        width: 15.625rem;
        display: block;
    }

        .site-logo img {
            width: 100%;
            height: auto;
        }

    .content-block-small {
        gap: calc(var(--spacing,24px)*4);
        padding: 0 calc(var(--spacing,24px)*6);
        z-index: 0;
        flex-direction: column;
        margin: 4rem auto;
        display: flex;
        position: relative
    }

    .content-seperator {
        background-color: var(--color-neutral-500,#737373);
        place-self: stretch stretch;
        width: auto;
        height: 1px;
        margin: 32px 0
    }

    .solutions-list {
        gap: calc(var(--spacing,24px)*2);
        display: flex
    }

    .solutions-list-item > img {
        width: 1.5rem;
        height: 1.5rem
    }

    .bg-cubes {
        opacity: .15;
        z-index: 0;
        background: url(https://awapistorage.blob.core.windows.net/portal-content/images/hero-cubes-background.png) 50% fixed;
        position: absolute;
        inset: 0
    }

    .stacked-title, .stacked-title-top {
        color: #fff;
        font-size: var(--text-xl,20px);
        font-style: normal;
        font-weight: var(--font-weight-medium,500);
        line-height: var(--leading-7,28px);
        letter-spacing: var(--tracking-normal,0)
    }

    .stacked-title-bottom {
        color: var(--cyan-400,#22d3ee);
        font-size: var(--text-4xl,36px);
        font-style: normal;
        font-weight: var(--font-weight-medium,500);
        line-height: var(--leading-10,40px);
        letter-spacing: var(--tracking-normal,0)
    }

    @media (min-width:64rem) {
        .content-block-small {
            flex-direction: row;
            width: 54.9375rem
        }

        .content-seperator {
            background-color: var(--color-neutral-500,#737373);
            width: 1px;
            height: auto;
            margin: 0 64px
        }
    }
}

@layer components {
    .hero {
        color: var(--color-white);
        background: radial-gradient(circle,#181b1a00 7px 0%,#181b1a 100%);
        position: relative
    }

    .hero-container {
        justify-content: start;
        align-items: start;
        gap: calc(var(--spacing,24px)*10);
        width: 100%;
        max-width: var(--container-8xl,1440px);
        padding: calc(var(--spacing,24px)*20)calc(var(--spacing,24px)*6);
        z-index: 1;
        flex-flow: column wrap;
        margin: 0 auto;
        display: flex;
        position: relative
    }

    .hero-background-container {
        opacity: .15;
        z-index: 0;
        background: url(https://awapistorage.blob.core.windows.net/portal-content/images/hero-cubes-background.png) 50% fixed;
        position: absolute;
        inset: 0
    }

    .hero-cloud-image {
        opacity: .75;
        z-index: 0;
        width: 100%;
        max-width: 28.125rem;
        height: auto;
        position: absolute;
        bottom: 0;
        right: 0
    }

        .hero-cloud-image.hero-cloud-image-small {
            max-width: 18.75rem;
            right: 0
        }

    .hero-gradient {
        background-blend-mode: screen;
        z-index: 1;
        background: linear-gradient(90deg,#ffc947 5.29%,#ef7437 28.85%,#e83744 49.04%,#581a55 72.6%,#0089be 100%);
        height: 6px
    }

    .hero-title {
        color: var(--cyan-400,#22d3ee);
        font-size: var(--font-size-3xl,30px);
        font-style: normal;
        font-weight: var(--font-weight-normal,400);
        line-height: var(--font-leading-9,36px);
        letter-spacing: var(--font-tracking-normal,0)
    }

    .hero-site-title {
        color: var(--white,#fff);
        font-size: var(--font-size-6xl,60px);
        font-style: normal;
        font-weight: var(--font-weight-semibold,600);
        line-height: var(--font-size-6xl,60px);
        letter-spacing: var(--font-tracking-tight,-.4px)
    }

    .hero-breadcrumb {
        font-size: var(--text-xl,20px);
        align-items: center;
        display: flex
    }

        .hero-breadcrumb .hero-title {
            color: #fff;
            font-size: var(--text-xl,20px);
            font-style: normal;
            font-weight: var(--font-weight-semibold,600)
        }

        .hero-breadcrumb .hero-breadcrumb-link {
            color: var(--cyan-400,#22d3ee);
            font-family: var(--font-family-paragraoh,"Open Sans");
            font-size: var(--font-size-xl,20px);
            font-style: normal;
            font-weight: var(--font-weight-semibold,600);
            line-height: var(--font-leading-7,28px);
            letter-spacing: var(--font-tracking-normal,0)
        }

        .hero-breadcrumb .hero-breadcrumb-separator {
            margin: 0 calc(var(--spacing,12px)*3);
            color: var(--neutral-300,#22d3ee)
        }

    .hero-description {
        color: var(--neutral-300,#d4d4d4);
        font-size: var(--font-size-lg,18px);
        font-style: normal;
        font-weight: var(--font-weight-normal,400);
        line-height: var(--leading-relaxed,28px);
        letter-spacing: var(--tracking-normal,0);
        margin: calc(var(--spacing,24px)*8)0
    }

    .hero-solutions-list {
        gap: calc(var(--spacing,24px)*4);
        display: flex
    }

    @media (min-width:1024px) {
        .hero-cloud-image {
            opacity: 1;
            max-width: 600px;
            right: 10%
        }

            .hero-cloud-image.hero-cloud-image-small {
                max-width: 18.75rem;
                right: 0
            }

        .hero-container {
            align-items: center;
            gap: calc(var(--spacing,24px)*14);
            flex-direction: row;
            justify-content: space-between
        }
    }

    .collapsible-content {
        flex-wrap: wrap;
        flex-basis: 100%;
        align-items: center;
        display: flex
    }

    /* Navigation Styles */
    .nav {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing)*6);
        list-style: none;
        margin: 0;
        padding: 0;
        
    }

    .nav-item {
        position: relative;
    }

    .nav-link {
        display: block;
        color: var(--color-white,#fff);
        font-size: var(--text-sm,14px);
        font-style: normal;
        font-weight: var(--font-weight-semibold,600);
        line-height: var(--leading-normal,20px);
        letter-spacing: var(--tracking-normal,0);
        padding: calc(var(--spacing)*3) calc(var(--spacing)*4);
        text-decoration: none;
        transition: all .2s ease-in-out;
        position: relative;
        white-space: nowrap;
    }

    /* Underline effect for regular nav items */
    .nav-item:not(.nav-item-has-submenu) .nav-link::after {
        content: "";
        background: var(--color-brand-cyan,#22d3ee);
        width: 0;
        height: 2px;
        transition: width .2s ease-in-out;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .nav-item:not(.nav-item-has-submenu) .nav-link:hover::after,
    .nav-link-active::after {
        width: 100%;
    }

    /* Underline effect for nav items WITH submenus */
    .nav-item-has-submenu > .nav-link::before {
        content: "";
        background: var(--color-brand-cyan, #22d3ee);
        width: 0;
        height: 2px;
        transition: width 0.2s ease-in-out;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .nav-item-has-submenu:hover > .nav-link::before {
        width: 100%;
    }

    /* Dropdown arrow indicator */
    .nav-item-has-submenu > .nav-link {
        padding-right: calc(var(--spacing) * 7);
    }

        .nav-item-has-submenu > .nav-link::after {
            content: "";
            position: absolute;
            right: calc(var(--spacing) * 2);
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid var(--color-brand-cyan, #22d3ee);
            transition: transform 0.2s ease-in-out;
        }

    .nav-item-has-submenu:hover > .nav-link::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Submenu container */
    .nav-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 280px;
        background-color: rgba(64, 64, 64, 0.98);
        padding: calc(var(--spacing) * 4) 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0.25s;
        z-index: 1000;
        margin-top: calc(var(--spacing) * 3);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        list-style: none;
    }

    .nav-item-has-submenu:hover .nav-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Submenu items - simplified hover */
    .nav-subitem {
        padding: 0;
        margin: 0;
    }

    .nav-sublink {
        display: block;
        color: var(--color-white, #fff);
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
        font-size: var(--text-base, 16px);
        font-weight: var(--font-weight-normal, 400);
        text-decoration: none;
        transition: color 0.2s ease-in-out;
        position: relative;
    }

        .nav-sublink:hover {
            color: var(--color-brand-cyan, #22d3ee);
        }

    /* Sign In Button */
    .nav-link-signin {
        display: inline-block;
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
        background-color: var(--color-brand-cyan, #22d3ee);
        color: var(--color-brand-black, #181b1a);
        font-size: var(--text-sm, 14px);
        font-weight: var(--font-weight-semibold, 600);
        text-decoration: none;
        transition: background-color 0.2s ease-in-out;
        white-space: nowrap;
    }

        .nav-link-signin:hover {
            background-color: var(--color-brand-cyan-light, #a5f3fc);
        }

    /* Remove old styles */
    .collapsible-content {
        display: none;
    }

    .button {
        padding: calc(var(--spacing,12px)*3)calc(var(--spacing,14px)*6);
        justify-content: center;
        align-items: center;
        text-decoration: none;
        transition: all .2s ease-in-out;
        display: inline-flex
    }

    .button-primary, .button-default {
        color: var(--color-brand-black,#181b1a);
        background: var(--color-brand-cyan,#22d3ee)
    }

        .button-primary:hover, .button-default:hover {
            background: var(--color-brand-cyan-light,#a5f3fc)
        }

    .button-outline {
        border-radius: var(--radius-none,0);
        background: var(--color-brand-black,#181b1a);
        color: var(--color-white,#fff);
        border: 2px solid var(--color-white,#fff)
    }

        .button-outline:hover {
            border-color: var(--color-brand-cyan-light,#a5f3fc)
        }

    .button-small {
        padding: calc(var(--spacing,12px)*2)calc(var(--spacing,14px)*4)
    }

    .button-arrow {
        padding: calc(var(--spacing,12px)*3)calc(var(--spacing,14px)*5)calc(var(--spacing,12px)*3)calc(var(--spacing,14px)*6)
    }

        .button-arrow:after {
            content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAzNCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgeDE9IjEiIHkxPSI0LjM3MTE0ZS0wOCIgeDI9IjAuOTk5OTk5IiB5Mj0iMjgiIHN0cm9rZT0iIzE4MUIxQSIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxtYXNrIGlkPSJtYXNrMF82Nl8xMDAiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjEwIiB5PSIyIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPgo8cmVjdCB4PSIxMCIgeT0iMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRDlEOUQ5Ii8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF82Nl8xMDApIj4KPHBhdGggZD0iTTI0IDIwTDIyLjYgMTguNTVMMjYuMTUgMTVIMTRWMTNIMjYuMTVMMjIuNiA5LjQ1TDI0IDhMMzAgMTRMMjQgMjBaIiBmaWxsPSIjMUMxQjFGIi8+CjwvZz4KPC9zdmc+Cg==);
            height: 28px;
            margin-left: calc(var(--spacing,12px)*5);
            transition: all .2s ease-in-out
        }

    .button-no-text.button-arrow {
        background-color: var(--color-brand-black,#181b1a);
        padding: .625rem
    }

        .button-no-text.button-arrow:hover {
            background-color: var(--color-brand-cyan,#22d3ee)
        }

        .button-no-text.button-arrow:after {
            content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAzNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgeDE9IjEiIHkxPSI0LjM3MTE0ZS0wOCIgeDI9IjAuOTk5OTk5IiB5Mj0iMjQiIHN0cm9rZT0iIzIyRDNFRSIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxtYXNrIGlkPSJtYXNrMF8xOTlfNTQ5IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIxMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4KPHJlY3QgeD0iMTAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0Q5RDlEOSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMTk5XzU0OSkiPgo8cGF0aCBkPSJNMjQgMThMMjIuNiAxNi41NUwyNi4xNSAxM0gxNFYxMUgyNi4xNUwyMi42IDcuNDVMMjQgNkwzMCAxMkwyNCAxOFoiIGZpbGw9IiMyMkQzRUUiLz4KPC9nPgo8L3N2Zz4K);
            width: 34px;
            height: 24px;
            margin-left: 0;
            transition: all .2s ease-in-out
        }

        .button-no-text.button-arrow:hover:after {
            content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzQgMjQiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMCBCdWlsZCAxMzcpICAtLT4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgbWFzazogdXJsKCNtYXNrKTsKICAgICAgfQoKICAgICAgLnN0MSB7CiAgICAgICAgZmlsbDogIzFjMWIxZjsKICAgICAgfQoKICAgICAgLnN0MiB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgICBzdHJva2U6ICMxODFiMWE7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiAycHg7CiAgICAgIH0KCiAgICAgIC5zdDMgewogICAgICAgIGZpbGw6ICNkOWQ5ZDk7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8bWFzayBpZD0ibWFzayIgeD0iMTAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxnIGlkPSJtYXNrMF8xOTlfNTQ5Ij4KICAgICAgICA8cmVjdCBjbGFzcz0ic3QzIiB4PSIxMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgICAgIDwvZz4KICAgIDwvbWFzaz4KICA8L2RlZnM+CiAgPGxpbmUgY2xhc3M9InN0MiIgeDE9IjEiIHkxPSIwIiB4Mj0iMSIgeTI9IjI0Ii8+CiAgPGcgY2xhc3M9InN0MCI+CiAgICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjQsMThsLTEuNC0xLjUsMy41LTMuNWgtMTIuMXYtMmgxMi4xbC0zLjUtMy42LDEuNC0xLjQsNiw2LTYsNloiLz4KICA8L2c+Cjwvc3ZnPg==)
        }

    .button-no-text.button-arrow-small {
        padding: calc(var(--spacing,12px)*2);
        background-color: var(--color-brand-black,#181b1a)
    }

        .button-no-text.button-arrow-small:hover {
            padding: calc(var(--spacing,12px)*2);
            background-color: var(--color-brand-cyan,#22d3ee)
        }

        .button-no-text.button-arrow-small:after {
            content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNiAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgeDE9IjEiIHkxPSIzLjI3ODM1ZS0wOCIgeDI9IjAuOTk5OTk5IiB5Mj0iMTgiIHN0cm9rZT0iIzIyRDNFRSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPG1hc2sgaWQ9Im1hc2swXzIwOV84NjUiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjciIHk9IjAiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOCI+CjxyZWN0IHg9IjcuNzUiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgZmlsbD0iI0Q5RDlEOSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMjA5Xzg2NSkiPgo8cGF0aCBkPSJNMTguMjUgMTMuNUwxNy4yIDEyLjQxMjVMMTkuODYyNSA5Ljc1SDEwLjc1VjguMjVIMTkuODYyNUwxNy4yIDUuNTg3NUwxOC4yNSA0LjVMMjIuNzUgOUwxOC4yNSAxMy41WiIgZmlsbD0iIzIyRDNFRSIvPgo8L2c+Cjwvc3ZnPgo=);
            height: 18px;
            margin-left: 0;
            transition: all .2s ease-in-out
        }

        .button-no-text.button-arrow-small:hover:after {
            content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNiAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgeDE9IjEiIHkxPSIzLjI3ODM1ZS0wOCIgeDI9IjAuOTk5OTk5IiB5Mj0iMTgiIHN0cm9rZT0iIzE4MUIxQSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPG1hc2sgaWQ9Im1hc2swXzIwOV84NjYiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjciIHk9IjAiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOCI+CjxyZWN0IHg9IjcuNzUiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgZmlsbD0iI0Q5RDlEOSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMjA5Xzg2NikiPgo8cGF0aCBkPSJNMTguMjUgMTMuNUwxNy4yIDEyLjQxMjVMMTkuODYyNSA5Ljc1SDEwLjc1VjguMjVIMTkuODYyNUwxNy4yIDUuNTg3NUwxOC4yNSA0LjVMMjIuNzUgOUwxOC4yNSAxMy41WiIgZmlsbD0iIzE4MUIxQSIvPgo8L2c+Cjwvc3ZnPgo=)
        }

    input[type=text], input[type=email], input[type=password], input[type=textarea], input[type=date], input:valid, select {
        padding: calc(var(--spacing,12px)*2)calc(var(--spacing,14px)*3);
        background-color: #fff;
        border-color: #e5e7eb;
        border-radius: .375rem;
        width: 100%;
        margin-top: .25rem;
        transition: box-shadow .2s,border-color .2s;
        display: block;
        box-shadow: 0 1px 2px #0000000d
    }

        input[type=text]:focus, input[type=textarea]:focus, input[type=date]:focus, input:valid:focus, select:focus {
            border-color: #2563eb;
            outline: none;
            box-shadow: 0 0 0 2px #2563eb
        }

    label {
        color: var(--color-neutral-300,#d4d4d4);
        font-size: var(--text-sm,14px);
        font-style: normal;
        font-weight: var(--font-weight-medium,500);
        line-height: var(--leading-5,20px);
        letter-spacing: var(--tracking-normal,0)
    }

    .input-group {
        margin-bottom: calc(var(--spacing,12px)*7)
    }

    .card {
        padding: calc(var(--spacing,24px)*6);
        border: 1px solid var(--color-neutral-300,#d4d4d4);
        background: var(--color-white,#fff);
        flex-direction: column;
        flex: 1 0 0;
        align-self: stretch;
        align-items: flex-start;
        width: 100%;
        display: flex;
        position: relative;
        box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d
    }

    .card-small {
        padding: calc(var(--spacing,24px)*4);
        justify-content: start
    }

    .card-title {
        color: var(--color-brand-black,#181b1a);
        font-size: var(--text-3xl,30px);
        font-style: normal;
        font-weight: var(--font-weight-bold,700);
        line-height: var(--leading-snug,40px);
        letter-spacing: var(--tracking-tighter,-.8px);
        margin-bottom: calc(var(--spacing,24px)*6)
    }

    .card-description {
        color: var(--color-neutral-700,#404040);
        font-size: var(--text-sm,14px);
        font-style: normal;
        font-weight: var(--font-weight-normal,400);
        line-height: var(--leading-relaxed,24px);
        letter-spacing: var(--tracking-normal,0px);
        margin: calc(var(--spacing,24px)*2)0
    }

    .card-link {
        gap: var(--spacing-2-5,10px);
        position: absolute;
        inset: 0
    }

        .card-link:after {
            content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAzNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgeDE9IjEiIHkxPSI0LjM3MTE0ZS0wOCIgeDI9IjAuOTk5OTk5IiB5Mj0iMjQiIHN0cm9rZT0iIzIyRDNFRSIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxtYXNrIGlkPSJtYXNrMF8xOTlfNTQ5IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIxMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4KPHJlY3QgeD0iMTAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0Q5RDlEOSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMTk5XzU0OSkiPgo8cGF0aCBkPSJNMjQgMThMMjIuNiAxNi41NUwyNi4xNSAxM0gxNFYxMUgyNi4xNUwyMi42IDcuNDVMMjQgNkwzMCAxMkwyNCAxOFoiIGZpbGw9IiMyMkQzRUUiLz4KPC9nPgo8L3N2Zz4K);
            background: var(--color-brand-black,#181b1a);
            width: 54px;
            height: 44px;
            padding: var(--spacing-2-5,10px);
            transition: all .2s ease-in-out;
            position: absolute;
            top: 24px;
            right: 24px;
            overflow: hidden
        }

        .card-link:hover:after {
            content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzQgMjQiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMCBCdWlsZCAxMzcpICAtLT4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgbWFzazogdXJsKCNtYXNrKTsKICAgICAgfQoKICAgICAgLnN0MSB7CiAgICAgICAgZmlsbDogIzFjMWIxZjsKICAgICAgfQoKICAgICAgLnN0MiB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgICBzdHJva2U6ICMxODFiMWE7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiAycHg7CiAgICAgIH0KCiAgICAgIC5zdDMgewogICAgICAgIGZpbGw6ICNkOWQ5ZDk7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8bWFzayBpZD0ibWFzayIgeD0iMTAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxnIGlkPSJtYXNrMF8xOTlfNTQ5Ij4KICAgICAgICA8cmVjdCBjbGFzcz0ic3QzIiB4PSIxMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgICAgIDwvZz4KICAgIDwvbWFzaz4KICA8L2RlZnM+CiAgPGxpbmUgY2xhc3M9InN0MiIgeDE9IjEiIHkxPSIwIiB4Mj0iMSIgeTI9IjI0Ii8+CiAgPGcgY2xhc3M9InN0MCI+CiAgICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjQsMThsLTEuNC0xLjUsMy41LTMuNWgtMTIuMXYtMmgxMi4xbC0zLjUtMy42LDEuNC0xLjQsNiw2LTYsNloiLz4KICA8L2c+Cjwvc3ZnPg==);
            background: var(--cyan-400,#22d3ee)
        }

        .card-link.no-icon:after {
            display: none
        }

    .card-image-container {
        background: var(--color-neutral-100,#f5f5f5);
        width: 100%;
        height: 12rem;
        overflow: hidden
    }

    .card-image-container-small {
        height: 5rem
    }

    .card-image {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%
    }

    .card-grid {
        gap: calc(var(--spacing,24px)*6);
        grid-template-columns: repeat(auto-fit,minmax(21.875rem,1fr));
        display: grid
    }

    .card-black {
        background-color: var(--color-brand-black,#181b1a);
        color: var(--color-white,#fff)
    }

        .card-black .card-title {
            color: var(--white,#fff);
            font-size: var(--text-base,16px);
            font-style: normal;
            font-weight: 600;
            line-height: var(--leading-6,24px);
            letter-spacing: var(--tracking-normal,0);
            margin: calc(var(--spacing,24px)*2)0
        }

        .card-black .card-title, .card-black .card-description {
            color: var(--color-white,#fff)
        }

    .white-band {
        background: var(--color-white,#fff);
        padding: calc(var(--spacing,24px)*10)calc(var(--spacing,24px)*6);
        color: var(--color-brand-black,#181b1a);
        font-size: .875rem
    }

    .grey-band {
        background: var(--color-neutral-100,#f5f5f5);
        padding: calc(var(--spacing,24px)*10)calc(var(--spacing,24px)*6);
        color: var(--color-brand-black,#181b1a);
        font-size: .875rem
    }

    /* Hero Section */
    .hero {
        background: linear-gradient(135deg, var(--color-brand-black) 0%, #2d3332 100%);
        color: var(--color-white);
        padding: calc(var(--spacing)*16) calc(var(--spacing)*6);
        position: relative;
        overflow: hidden
    }

    .hero-content {
        max-width: var(--container-8xl);
        margin: 0 auto;
        position: relative;
        z-index: 1
    }

    .hero-title {
        font-size: var(--text-6xl);
        font-weight: var(--font-weight-bold);
        line-height: 1.1;
        margin-bottom: 0;
        letter-spacing: -0.02em;
        color: var(--color-white)
    }

    .hero-subtitle {
        font-size: var(--text-xl);
        line-height: var(--leading-relaxed);
        max-width: 800px;
        opacity: 0.95;
        margin-bottom: calc(var(--spacing)*8)
    }

    .hero-cta {
        display: inline-block;
        background: var(--color-brand-cyan);
        color: var(--color-brand-black);
        padding: calc(var(--spacing)*4) calc(var(--spacing)*8);
        font-weight: var(--font-weight-semibold);
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.3s ease
    }

        .hero-cta:hover {
            background: var(--color-brand-cyan-light);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(38, 198, 218, 0.3)
        }

    /* Page Container */
    .page-container {
        max-width: var(--container-8xl);
        margin: 0 auto;
        padding: calc(var(--spacing)*10) calc(var(--spacing)*6)
    }

    /* Section Headers */
    .section-header {
        margin-top: calc(var(--spacing)*16);
        margin-bottom: calc(var(--spacing)*8)
    }

        .section-header h2 {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-brand-black);
            margin-bottom: calc(var(--spacing)*4);
            letter-spacing: -0.02em
        }

    .section-intro {
        font-size: var(--text-lg);
        line-height: var(--leading-relaxed);
        color: var(--color-neutral-700);
        max-width: 900px
    }

        .section-intro p + p {
            margin-top: calc(var(--spacing)*4)
        }

    /* Accordion */
    .accordion {
        margin-bottom: calc(var(--spacing)*6)
    }

    .accordion-item {
        border: 1px solid var(--color-neutral-300);
        border-radius: 4px;
        margin-bottom: calc(var(--spacing)*4);
        overflow: hidden;
        background: var(--color-white);
        transition: all 0.3s ease
    }

        .accordion-item:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)
        }

    .accordion-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(var(--spacing)*6);
        cursor: pointer;
        background: var(--color-white);
        transition: background 0.3s ease;
        user-select: none
    }

        .accordion-header:hover {
            background: var(--color-neutral-100)
        }

    .accordion-title {
        font-size: var(--text-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-brand-black);
        margin: 0;
        flex: 1
    }

    .accordion-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        color: var(--color-brand-cyan);
        font-size: 24px;
        font-weight: 300
    }

    .accordion-item.active .accordion-icon {
        transform: rotate(45deg)
    }

    .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease;
        padding: 0 calc(var(--spacing)*6)
    }

    .accordion-item.active .accordion-content {
        max-height: 2000px;
        padding: 0 calc(var(--spacing)*6) calc(var(--spacing)*6)
    }

    .accordion-content-inner {
        padding-top: calc(var(--spacing)*2);
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
        color: var(--color-neutral-700)
    }
        .accordion-content-inner p {
            margin-bottom: calc(var(--spacing)*4)
        }

        .accordion-content-inner ul {
            list-style: disc;
            padding-left: calc(var(--spacing)*8);
            margin: calc(var(--spacing)*4) 0
        }

        .accordion-content-inner li {
            margin-bottom: calc(var(--spacing)*3)
        }

        .accordion-content-inner h4 {
            margin-top: calc(var(--spacing)*6);
            margin-bottom: calc(var(--spacing)*3);
            font-weight: var(--font-weight-semibold);
            color: var(--color-brand-black)
        }

        .accordion-content-inner a {
            color: var(--color-brand-cyan);
            text-decoration: underline
        }

            .accordion-content-inner a:hover {
                color: var(--color-brand-cyan-light)
            }

    /* Capability Cards */
    .capability-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: calc(var(--spacing)*6);
        margin-bottom: calc(var(--spacing)*12)
    }

    .capability-card {
        background: var(--color-white);
        border: 1px solid var(--color-neutral-300);
        border-radius: 4px;
        padding: calc(var(--spacing)*6);
        transition: all 0.3s ease
    }

        .capability-card:hover {
            border-color: var(--color-brand-cyan);
            box-shadow: 0 8px 20px rgba(38, 198, 218, 0.15);
            transform: translateY(-2px)
        }

    .capability-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, var(--color-brand-cyan) 0%, var(--color-brand-cyan-light) 100%);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: calc(var(--spacing)*4);
        font-size: 24px;
        color: var(--color-brand-black)
    }

    .capability-title {
        font-size: var(--text-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-brand-black);
        margin-bottom: calc(var(--spacing)*3)
    }

    .capability-description {
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
        color: var(--color-neutral-700)
    }

    /* CTA Section */
    .cta-section {
        background: linear-gradient(135deg, var(--color-brand-black) 0%, #2d3332 100%);
        color: var(--color-white);
        padding: calc(var(--spacing)*16) calc(var(--spacing)*6);
        margin-top: calc(var(--spacing)*16);
        text-align: center
    }

    .cta-content {
        max-width: 800px;
        margin: 0 auto
    }

    .cta-section h2 {
        font-size: var(--text-4xl);
        font-weight: var(--font-weight-bold);
        margin-bottom: calc(var(--spacing)*4);
        color: var(--color-white)
    }

    .cta-section p {
        font-size: var(--text-lg);
        line-height: var(--leading-relaxed);
        margin-bottom: calc(var(--spacing)*8);
        opacity: 0.9
    }

    /* Contact Cards */
    .contact-info {
        display: flex;
        justify-content: center;
        gap: calc(var(--spacing)*8);
        flex-wrap: wrap;
        margin-top: calc(var(--spacing)*8)
    }

    .contact-card {
        background: rgba(255, 255, 255, 0.1);
        padding: calc(var(--spacing)*6);
        border-radius: 8px;
        backdrop-filter: blur(10px);
        min-width: 280px;
        text-align: left
    }

        .contact-card h4 {
            font-size: var(--text-base);
            font-weight: var(--font-weight-semibold);
            margin-bottom: calc(var(--spacing)*2);
            color: var(--color-brand-cyan)
        }

        .contact-card p {
            font-size: var(--text-sm);
            margin: calc(var(--spacing)*1) 0;
            opacity: 0.9
        }

        .contact-card a {
            color: var(--color-brand-cyan-light);
            text-decoration: none;
            transition: color 0.3s ease
        }

            .contact-card a:hover {
                color: var(--color-brand-cyan)
            }

    /* Dark Theme Components for Home Page */
    .hero-dark {
        background: var(--color-brand-black);
        color: var(--color-white);
        padding: calc(var(--spacing)*16) calc(var(--spacing)*6);
        position: relative;
        overflow: hidden
    }

        .hero-dark .hero-content {
            max-width: var(--container-8xl);
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: calc(var(--spacing)*12);
            position: relative;
            z-index: 1
        }

        .hero-dark .hero-text {
            flex: 1;
            max-width: 600px
        }

        .hero-dark .hero-media {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .hero-dark .hero-supertitle {
            font-size: var(--text-xl);
            color: var(--color-brand-cyan);
            font-weight: var(--font-weight-semibold);
            margin-bottom: calc(var(--spacing)*3);
            letter-spacing: 0.05em
        }

        .hero-dark .hero-title {
            font-size: var(--text-6xl);
            font-weight: var(--font-weight-bold);
            line-height: 1.1;
            margin-bottom: calc(var(--spacing)*4);
            letter-spacing: -0.02em;
            color: var(--color-white)
        }

        .hero-dark .hero-subtitle {
            font-size: var(--text-lg);
            line-height: var(--leading-relaxed);
            margin-bottom: calc(var(--spacing)*8);
            opacity: 0.9
        }

    .hero-divider {
        height: 4px;
        background: linear-gradient(90deg, #ffa500 0%, var(--color-brand-cyan) 100%);
        width: 100%;
        margin: 0
    }

    .hero-graphic {
        max-width: 500px;
        width: 100%
    }

    .product-icons {
        display: flex;
        gap: calc(var(--spacing)*3);
        margin-top: calc(var(--spacing)*4)
    }

    .product-icon {
        width: 48px;
        height: 48px;
        background: var(--color-neutral-500);
        border-radius: 4px
    }

    /* Dark Section */
    .section-dark {
        background: var(--color-brand-black);
        color: var(--color-white);
        padding: calc(var(--spacing)*16) calc(var(--spacing)*6)
    }

        .section-dark .section-content {
            max-width: var(--container-8xl);
            margin: 0 auto
        }

        .section-dark h2 {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-bold);
            margin-bottom: calc(var(--spacing)*2);
            color: var(--color-white)
        }

        .section-dark .section-link {
            color: var(--color-brand-cyan);
            text-decoration: none;
            font-size: var(--text-base);
            display: inline-flex;
            align-items: center;
            gap: calc(var(--spacing)*2);
            margin-bottom: calc(var(--spacing)*8)
        }

            .section-dark .section-link:hover {
                color: var(--color-brand-cyan-light)
            }

    /* Feature Grid - Dark */
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: calc(var(--spacing)*1);
        margin-top: calc(var(--spacing)*12)
    }

    .feature-column {
        padding: calc(var(--spacing)*8);
        border-right: 1px solid rgba(255, 255, 255, 0.1)
    }

        .feature-column:last-child {
            border-right: none
        }

        .feature-column h3 {
            font-size: var(--text-xl);
            font-weight: var(--font-weight-semibold);
            margin-bottom: calc(var(--spacing)*4);
            color: var(--color-white)
        }

        .feature-column p {
            font-size: var(--text-base);
            line-height: var(--leading-relaxed);
            opacity: 0.85;
            margin: 0
        }

    /* Start Exploring Cards */
    .explore-section {
        background: var(--color-neutral-100);
        padding: calc(var(--spacing)*16) calc(var(--spacing)*6)
    }

    .explore-content {
        max-width: var(--container-8xl);
        margin: 0 auto
    }

    .explore-header {
        margin-bottom: calc(var(--spacing)*4)
    }

        .explore-header h2 {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-brand-black);
            margin-bottom: calc(var(--spacing)*2)
        }

        .explore-header .section-link {
            color: var(--color-brand-cyan);
            text-decoration: none;
            font-size: var(--text-base);
            display: inline-flex;
            align-items: center;
            gap: calc(var(--spacing)*2)
        }

    .explore-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: calc(var(--spacing)*6);
        margin-top: calc(var(--spacing)*8)
    }

    .explore-card {
        background: var(--color-white);
        border: 1px solid var(--color-neutral-300);
        border-radius: 4px;
        overflow: hidden;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column
    }

        .explore-card:hover {
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
            transform: translateY(-4px)
        }

    .explore-card-content {
        padding: calc(var(--spacing)*8);
        flex: 1
    }

    .explore-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: calc(var(--spacing)*4)
    }

    .explore-card h3 {
        font-size: var(--text-xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-brand-black);
        margin: 0
    }

    .explore-card-icon {
        background: var(--color-brand-cyan);
        color: var(--color-brand-black);
        width: 40px;
        height: 40px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: var(--font-weight-bold);
        flex-shrink: 0
    }

    .explore-card p {
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
        color: var(--color-neutral-700);
        margin: 0
    }

    .explore-card-image {
        width: 100%;
        height: 180px;
        background: var(--color-neutral-100);
        object-fit: cover
    }

    /* Responsive Styles */
    @media (max-width: 768px) {
        .hero-dark {
            padding: calc(var(--spacing)*10) calc(var(--spacing)*4)
        }

            .hero-dark .hero-content {
                flex-direction: column;
                gap: calc(var(--spacing)*8)
            }

            .hero-dark .hero-text {
                max-width: 100%
            }

            .hero-dark .hero-title {
                font-size: var(--text-4xl)
            }

        .feature-grid {
            grid-template-columns: 1fr;
            gap: 0
        }

        .feature-column {
            border-right: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1)
        }

            .feature-column:last-child {
                border-bottom: none
            }

        .explore-grid {
            grid-template-columns: 1fr
        }

        .product-icons {
            justify-content: flex-start
        }
    }

    /* Responsive Styles */
    @media (max-width: 768px) {
        .hero {
            padding: calc(var(--spacing)*10) calc(var(--spacing)*4)
        }

        .hero-title {
            font-size: var(--text-4xl)
        }

        .page-container {
            padding: calc(var(--spacing)*6) calc(var(--spacing)*4)
        }

        .section-header h2 {
            font-size: var(--text-3xl)
        }

        .capability-grid {
            grid-template-columns: 1fr
        }

        .contact-info {
            flex-direction: column;
            gap: calc(var(--spacing)*4)
        }
    }
}

@layer utilities {
    .sr-only {
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        position: absolute;
        overflow: hidden
    }

    .relative {
        position: relative
    }

    .z-10 {
        z-index: 10
    }

    .col-span-2 {
        grid-column: span 2/span 2
    }

    .mx-auto {
        margin-inline: auto
    }

    .my-7 {
        margin-block: calc(var(--spacing)*7)
    }

    .mt-4 {
        margin-top: calc(var(--spacing)*4)
    }

    .mt-6 {
        margin-top: calc(var(--spacing)*6)
    }

    .mb-7 {
        margin-bottom: calc(var(--spacing)*7)
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing)*8)
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .h-screen {
        height: 100vh
    }

    .w-full {
        width: 100%
    }

    .max-w-8xl {
        max-width: var(--container-8xl)
    }

    .flex-1 {
        flex: 1
    }

    .grid-rows-\[auto_1fr_auto\] {
        grid-template-rows: auto 1fr auto
    }

    .flex-col {
        flex-direction: column
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .items-center {
        align-items: center
    }

    .items-start {
        align-items: flex-start
    }

    .justify-between {
        justify-content: space-between
    }

    .gap-6 {
        gap: calc(var(--spacing)*6)
    }

    .gap-10 {
        gap: calc(var(--spacing)*10)
    }

    .bg-brand-black {
        background-color: var(--color-brand-black)
    }

    .p-6 {
        padding: calc(var(--spacing)*6)
    }

    .text-center {
        text-align: center
    }

    .text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading,var(--text-lg--line-height))
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height))
    }

    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .text-white {
        color: var(--color-white)
    }

    @media (min-width:64rem) {
        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .lg\:items-end {
            align-items: flex-end
        }

        .lg\:gap-10 {
            gap: calc(var(--spacing)*10)
        }
    }
}

@layer support-page {
    /* Support Section Styles */
    .support-intro {
        background: var(--color-neutral-100);
        padding: calc(var(--spacing)*12) calc(var(--spacing)*6);
        border-bottom: 3px solid var(--color-brand-cyan)
    }

    .support-intro-content {
        max-width: var(--container-8xl);
        margin: 0 auto
    }

    .support-intro h1 {
        font-size: var(--text-4xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-brand-black);
        margin-bottom: calc(var(--spacing)*6);
        text-align: center
    }

    .support-split {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--spacing)*8);
        margin-top: calc(var(--spacing)*8)
    }

    .support-box {
        background: var(--color-white);
        border: 2px solid var(--color-neutral-300);
        border-radius: 8px;
        padding: calc(var(--spacing)*8);
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
    }

        .support-box:hover {
            border-color: var(--color-brand-cyan);
            box-shadow: 0 8px 20px rgba(38, 198, 218, 0.15)
        }

        .support-box h3 {
            font-size: var(--text-xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-brand-cyan);
            margin-bottom: calc(var(--spacing)*4)
        }

        .support-box h4 {
            font-size: var(--text-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--color-brand-black);
            margin: calc(var(--spacing)*4) 0 calc(var(--spacing)*3)
        }

        .support-box p, .support-box li {
            font-size: var(--text-base);
            line-height: var(--leading-relaxed);
            color: var(--color-neutral-700)
        }

        .support-box ul {
            list-style: disc;
            padding-left: calc(var(--spacing)*8);
            margin: calc(var(--spacing)*3) 0
        }

        .support-box li {
            margin-bottom: calc(var(--spacing)*2)
        }

    /* Support box link styling */
    .support-box-link {
        display: inline-block;
        margin-top: calc(var(--spacing) * 4);
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
        background: var(--color-brand-cyan);
        color: var(--color-brand-black);
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

        .support-box-link:hover {
            background: var(--color-brand-cyan-light);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(38, 198, 218, 0.3);
        }

    /* Jump navigation button styling */
    .support-jump-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: calc(var(--spacing) * 2);
        margin-top: auto;
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
        background: var(--color-brand-black);
        color: var(--color-white);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        text-align: center;
        text-decoration: none;
        border: 1px solid var(--color-brand-black);
        border-radius: 0;
        transition: all 0.2s ease;
        cursor: pointer;
        align-self: flex-start;
        white-space: nowrap;
    }

        .support-jump-button::after {
            content: "→";
            font-size: var(--text-base);
            transition: transform 0.2s ease;
        }

        .support-jump-button:hover {
            background: var(--color-brand-cyan);
            color: var(--color-brand-black);
            border-color: var(--color-brand-cyan);
        }

            .support-jump-button:hover::after {
                transform: translateX(3px);
            }

        .support-jump-button:active {
            transform: scale(0.98);
        }

    /* Smooth scrolling for the entire page */
    html {
        scroll-behavior: smooth;
    }

    /* Add offset for smooth scroll to account for any fixed headers */
    section[id] {
        scroll-margin-top: calc(var(--spacing) * 8);
    }

    /* Quick Guide */
    .quick-guide {
        background: var(--color-neutral-100);
        border-left: 4px solid var(--color-brand-cyan);
        padding: calc(var(--spacing)*6);
        margin: calc(var(--spacing)*6) 0;
        border-radius: 4px
    }

        .quick-guide h4 {
            font-size: var(--text-base);
            font-weight: var(--font-weight-bold);
            color: var(--color-brand-black);
            margin-bottom: calc(var(--spacing)*4)
        }

    .quick-guide-item {
        margin-bottom: calc(var(--spacing)*3);
        padding: calc(var(--spacing)*2);
        font-size: var(--text-sm)
    }

        .quick-guide-item code {
            background: var(--color-white);
            padding: calc(var(--spacing)*1) calc(var(--spacing)*2);
            border-radius: 3px;
            font-family: var(--font-mono);
            color: var(--color-neutral-700)
        }

    .quick-guide-arrow {
        color: var(--color-brand-cyan);
        font-weight: var(--font-weight-bold);
        margin: 0 calc(var(--spacing)*2)
    }

    .quick-guide-target {
        font-weight: var(--font-weight-semibold);
        color: var(--color-brand-black)
    }

    /* Notice Box */
    .notice-box {
        background: #fff8e1;
        border: 2px solid #ffc107;
        border-radius: 8px;
        padding: calc(var(--spacing)*6);
        margin: calc(var(--spacing)*8) 0
    }

    .notice-box-title {
        font-size: var(--text-lg);
        font-weight: var(--font-weight-bold);
        color: #f57c00;
        margin-bottom: calc(var(--spacing)*3);
        display: flex;
        align-items: center;
        gap: calc(var(--spacing)*2)
    }

    .notice-box p {
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
        color: #5d4037;
        margin: 0
    }

    .notice-box a {
        color: #f57c00;
        text-decoration: underline
    }

    /* Support Form */
    .support-form-container {
        max-width: 800px;
        margin: calc(var(--spacing)*12) auto;
        padding: 0 calc(var(--spacing)*6)
    }

    .support-form {
        background: var(--color-white);
        border: 1px solid var(--color-neutral-300);
        border-radius: 8px;
        padding: calc(var(--spacing)*10);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)
    }

        .support-form h2 {
            font-size: var(--text-3xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-brand-black);
            margin-bottom: calc(var(--spacing)*2);
            text-align: center
        }

    .support-form-subtitle {
        font-size: var(--text-base);
        color: var(--color-neutral-700);
        text-align: center;
        margin-bottom: calc(var(--spacing)*8)
    }

    .form-required-notice {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        text-align: center;
        margin-bottom: calc(var(--spacing)*6);
        font-style: italic
    }

        .form-required-notice:before {
            content: "*";
            color: #dc2626
        }

    .form-group {
        margin-bottom: calc(var(--spacing)*6)
    }

    .form-label {
        display: block;
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-brand-black);
        margin-bottom: calc(var(--spacing)*2)
    }

    .form-label-required:after {
        content: " *";
        color: #dc2626
    }

    .form-input,
    .form-select,
    .form-textarea {
        width: 100%;
        padding: calc(var(--spacing)*3);
        border: 1px solid var(--color-neutral-300);
        border-radius: 4px;
        font-size: var(--text-base);
        font-family: var(--font-sans);
        transition: all 0.2s ease
    }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--color-brand-cyan);
            box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1)
        }

    .form-textarea {
        min-height: 150px;
        resize: vertical
    }

    .form-help {
        font-size: var(--text-sm);
        color: var(--color-neutral-500);
        margin-top: calc(var(--spacing)*2)
    }

    .form-button {
        background: var(--color-brand-cyan);
        color: var(--color-brand-black);
        padding: calc(var(--spacing)*4) calc(var(--spacing)*10);
        border: none;
        border-radius: 4px;
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        transition: all 0.3s ease;
        display: block;
        width: 100%;
        margin-top: calc(var(--spacing)*8)
    }

        .form-button:hover {
            background: var(--color-brand-cyan-light);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(38, 198, 218, 0.3)
        }

        .form-button:active {
            transform: translateY(0)
        }

    /* Product Support Links */
    .product-support-section {
        background: var(--color-white);
        padding: calc(var(--spacing)*16) calc(var(--spacing)*6)
    }

    .product-support-content {
        max-width: var(--container-8xl);
        margin: 0 auto
    }

        .product-support-content h2 {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-brand-black);
            margin-bottom: calc(var(--spacing)*4);
            text-align: center
        }

    .product-support-intro {
        font-size: var(--text-lg);
        color: var(--color-neutral-700);
        text-align: center;
        max-width: 800px;
        margin: 0 auto calc(var(--spacing)*12)
    }

    .product-support-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: calc(var(--spacing)*6)
    }

    .product-support-card {
        background: var(--color-white);
        border: 1px solid var(--color-neutral-300);
        border-radius: 8px;
        padding: calc(var(--spacing)*8);
        transition: all 0.3s ease
    }

        .product-support-card:hover {
            border-color: var(--color-brand-cyan);
            box-shadow: 0 8px 20px rgba(38, 198, 218, 0.15);
            transform: translateY(-4px)
        }

        .product-support-card h3 {
            font-size: var(--text-xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-brand-black);
            margin-bottom: calc(var(--spacing)*4)
        }

        .product-support-card p {
            font-size: var(--text-base);
            line-height: var(--leading-relaxed);
            color: var(--color-neutral-700);
            margin-bottom: calc(var(--spacing)*6)
        }

        .product-support-card a {
            color: var(--color-brand-cyan);
            font-weight: var(--font-weight-semibold);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: calc(var(--spacing)*2);
            transition: color 0.3s ease
        }

            .product-support-card a:hover {
                color: var(--color-brand-cyan-light)
            }

    /* Responsive */
    @media (max-width: 768px) {
        .support-split {
            grid-template-columns: 1fr
        }

        .support-intro h1 {
            font-size: var(--text-3xl)
        }

        .support-form {
            padding: calc(var(--spacing)*6)
        }

        .form-button {
            padding: calc(var(--spacing)*4) calc(var(--spacing)*6)
        }
    }
}

/* Guide-specific extensions to main.css */
@layer guides {

    /* New layout container for sidebar + content */
    .guide-layout {
        display: flex;
        align-items: flex-start;
        width: 100%;
    }

    /* Sidebar: sticky with no top gutter; fills viewport and scrolls internally */
    .guide-nav-sidebar {
        position: sticky;
        top: 0; /* remove whitespace gutter */
        height: 100vh; /* fill viewport height */
        overflow-y: auto;
        flex: 0 0 280px;
        width: 280px;
        background: var(--color-neutral-100);
        border-right: 1px solid var(--color-neutral-300);
        padding: calc(var(--spacing) * 4);
        padding-top: calc(var(--spacing) * 4); /* ensure consistent padding */
        z-index: 50;
    }

    .guide-nav-section {
        margin-bottom: calc(var(--spacing) * 6);
    }

    .guide-nav-section-title {
        font-weight: var(--font-weight-semibold);
        color: var(--color-neutral-500);
        text-transform: uppercase;
        font-size: var(--text-sm);
        letter-spacing: 0.05em;
        margin-bottom: calc(var(--spacing) * 2);
    }

    .guide-nav-link {
        display: block;
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
        color: var(--color-neutral-700);
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.2s;
        font-size: var(--text-sm);
        margin-bottom: calc(var(--spacing) * 1);
    }

        .guide-nav-link:hover {
            background: var(--color-white);
            color: var(--color-brand-black);
        }

        .guide-nav-link.active {
            background: var(--color-brand-cyan);
            color: var(--color-brand-black);
            font-weight: var(--font-weight-semibold);
        }

    /* Content wrapper now flexes beside sidebar */
    .guide-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }

        /* Hero should align with content area only (no bleed under sidebar) */
        .guide-wrapper .hero {
            width: 100%;
            margin: 0;
            border-left: 1px solid var(--color-neutral-300);
        }

        .guide-wrapper .page-container {
            max-width: var(--container-8xl);
            margin: 0 auto;
            padding: calc(var(--spacing)*10) calc(var(--spacing)*6);
        }

    .code-tabs {
        margin: calc(var(--spacing) * 6) 0;
    }

    .tab-nav {
        display: flex;
        gap: calc(var(--spacing) * 2);
        border-bottom: 2px solid var(--color-neutral-300);
        margin-bottom: 0;
    }

    .tab-btn {
        padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
        background: transparent;
        border: none;
        color: var(--color-neutral-500);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        transition: all 0.2s;
        position: relative;
        font-size: var(--text-base);
    }

        .tab-btn:hover {
            color: var(--color-brand-black);
        }

        .tab-btn.active {
            color: var(--color-brand-cyan);
        }

            .tab-btn.active::after {
                content: '';
                position: absolute;
                bottom: -2px;
                left: 0;
                right: 0;
                height: 2px;
                background: var(--color-brand-cyan);
            }

    .tab-panel {
        display: none;
    }

        .tab-panel.active {
            display: block;
        }

    .code-example {
        background: var(--color-neutral-100);
        border: 1px solid var(--color-neutral-300);
        border-left: 4px solid var(--color-brand-cyan);
        border-radius: 4px;
        padding: calc(var(--spacing) * 6);
        margin: calc(var(--spacing) * 6) 0;
        overflow-x: auto;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        line-height: 1.6;
        position: relative;
        cursor: pointer;
    }

        .code-example.dark {
            background: #1e293b;
            color: #e2e8f0;
            border-color: #334155;
        }

    .code-lang {
        position: absolute;
        top: calc(var(--spacing) * 2);
        right: calc(var(--spacing) * 3);
        background: var(--color-brand-cyan);
        color: var(--color-brand-black);
        padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
    }

    .code-example pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .info-panel {
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        border-left: 4px solid #0284c7;
        padding: calc(var(--spacing) * 5);
        margin: calc(var(--spacing) * 8) 0;
        border-radius: 4px;
    }

    .warning-panel {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border-left: 4px solid #f59e0b;
        padding: calc(var(--spacing) * 5);
        margin: calc(var(--spacing) * 8) 0;
        border-radius: 4px;
    }

    .success-panel {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        border-left: 4px solid #16a34a;
        padding: calc(var(--spacing) * 5);
        margin: calc(var(--spacing) * 8) 0;
        border-radius: 4px;
    }

    .panel-title {
        font-weight: var(--font-weight-semibold);
        font-size: var(--text-lg);
        margin-bottom: calc(var(--spacing) * 3);
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
    }

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: calc(var(--spacing) * 6);
        margin: calc(var(--spacing) * 8) 0;
    }

    .feature-card {
        background: var(--color-white);
        border-radius: 12px;
        padding: calc(var(--spacing) * 6);
        box-shadow: 0 4px 6px rgba(0,0,0,0.07);
        transition: transform 0.3s, box-shadow 0.3s;
    }

        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 12px rgba(0,0,0,0.12);
        }

    .feature-icon {
        font-size: 2.5rem;
        margin-bottom: calc(var(--spacing) * 4);
    }

    .feature-title {
        font-size: var(--text-xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-brand-black);
        margin-bottom: calc(var(--spacing) * 3);
    }

    .complexity-badge {
        display: inline-block;
        padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: var(--font-weight-semibold);
        margin-left: calc(var(--spacing) * 2);
    }

    .complexity-beginner {
        background: #dcfce7;
        color: #16a34a;
    }

    .complexity-intermediate {
        background: #fed7aa;
        color: #c2410c;
    }

    .complexity-advanced {
        background: #fecaca;
        color: #dc2626;
    }

    .data-table {
        width: 100%;
        margin: calc(var(--spacing) * 6) 0;
        border-collapse: separate;
        border-spacing: 0;
        background: var(--color-white);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

        .data-table th {
            background: var(--color-brand-cyan);
            color: var(--color-brand-black);
            padding: calc(var(--spacing) * 4);
            text-align: left;
            font-weight: var(--font-weight-semibold);
        }

        .data-table td {
            padding: calc(var(--spacing) * 4);
            border-top: 1px solid var(--color-neutral-300);
        }

        .data-table tr:hover td {
            background: var(--color-neutral-100);
        }

    .section-header {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 6);
        padding-bottom: calc(var(--spacing) * 4);
        border-bottom: 2px solid var(--color-brand-cyan);
    }

    .section-intro {
        font-size: var(--text-lg);
        color: var(--color-neutral-700);
        line-height: var(--leading-relaxed);
        margin-bottom: calc(var(--spacing) * 8);
    }

    @property --tw-font-weight {
        syntax: "*";
        inherits: false
    }