/* FreeQ — 1440px reference, fluid desktop. All theme styles live here. */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
    }

    html:has(.fq-dialog[open]) {
        overflow: hidden;
    }

    body, h1, h2, h3, h4, p, figure, ul, ol {
        margin: 0;
    }

    body {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    button, input, textarea, select {
        font: inherit;
    }

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

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

    button {
        cursor: pointer;
    }

    .screen-reader-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .screen-reader-text:focus {
        clip-path: none;
        width: auto;
        height: auto;
        padding: 12px 20px;
        margin: 0;
        z-index: 100000;
        top: 8px;
        left: 8px;
        background: #fff;
        color: #1d1d1b;
    }
}

/* Local fonts supplied with the previous package. */
@font-face {
    font-family: Tenon;
    src: url(../fonts/tenon-regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Tenon;
    src: url(../fonts/tenon-medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Tenon;
    src: url(../fonts/tenon-bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Tenon;
    src: url(../fonts/tenon-xbold.woff2) format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* archivo-vietnamese-wght-normal */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/archivo-vietnamese-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* archivo-latin-ext-wght-normal */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/archivo-latin-ext-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* archivo-latin-wght-normal */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/archivo-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Figma desktop 42:389, reference width 1440px.
* Tenon Regular, Medium, Bold and X-Bold supplied by the user are included.
* Archivo is included under the SIL Open Font License (fonts/Archivo-OFL.txt).
* Alternatively set your HTTPS Adobe Fonts kit in FreeQ settings.
*/

:root {
    /* Shared spacing scale, in rem for text-size accessibility. */
    --fq-s4: 0.25rem;
    --fq-s8: 0.5rem;
    --fq-s12: 0.75rem;
    --fq-s16: 1rem;
    --fq-s20: 1.25rem;
    --fq-s24: 1.5rem;
    --fq-s28: 1.75rem;
    --fq-s32: 2rem;
    --fq-s40: 2.5rem;
    --fq-s48: 3rem;
    --fq-s64: 4rem;
    --fq-s72: 4.5rem;
    --fq-s80: 5rem;

    /* Semantic roles: components depend on these, not literal colors. */
    --fq-ink: #1d1d1b;
    --fq-muted: #6b6b67;
    --fq-paper: #fff;
    --fq-soft: #f3f3f1;
    --fq-accent: #2a4b9b;
    --fq-line: #dcdcd8;
    --fq-focus-ring: 3px solid var(--fq-blue-light);
    --fq-duration: 180ms;
    --fq-ease: cubic-bezier(.22, 1, .36, 1);

    --fq-gray-dark: #8e8e89;

    --fq-blue-dark: #1f3a7a;
    --fq-blue-light: #7d9ce2;
    --fq-blue-pale: #c9d5f2;
    --fq-font-body: 'Tenon', 'Archivo', Arial, sans-serif;
    --fq-font-ui: 'Archivo', Arial, sans-serif;
    --fq-font-display: var(--fq-font-body);
    --fq-gutter: 4.444444vw;
    --fq-section-space: 100px;

    --fq-display-xl: 8vw;
    --fq-display-lg: 4.8vw;
    --fq-display-md: 2vw;
    --fq-text-lg: 1.5rem;
    --fq-text-base: 1.125rem;
    --fq-radius-sm: 6px;
    --fq-radius-md: 10px;
    --fq-radius-lg: 16px;
    --fq-border: 1px solid var(--fq-line);
    --fq-shadow: 0 24px 60px rgb(0 0 0 / 8%);
}

/* Layouts, components and page illustrations. */
.fq-flex, .fq-row, .fq-stack, .fq-grid {
    --gap: 0;
    gap: var(--gap);
}

.fq-flex, .fq-row, .fq-stack {
    display: flex;
}

.fq-row {
    align-items: center;
}

.fq-stack {
    flex-direction: column;
}

.fq-grid {
    display: grid;
}

.freeq-site {
    color: var(--fq-ink);
    background: var(--fq-paper);
    font-family: var(--fq-font-body);
    font-size: var(--fq-text-base);
    line-height: 1.37;
}

::selection {
    background: var(--fq-accent);
    color: var(--fq-paper);
}

:focus-visible {
    outline: var(--fq-focus-ring);
    outline-offset: 5px;
}

.fq-site, .fq-hero-upload img {
    width: 100%;
}

.fq-main {
    display: block;
}

.fq-shell {
    width: 100%;
    padding-inline: var(--fq-gutter);
}

.fq-section {
    padding-block: var(--fq-section-space);
    scroll-margin-top: var(--fq-s32);
}

.fq-title {
    font-family: var(--fq-font-display);
    font-size: var(--fq-display-lg);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.01em;
}

.fq-lead {
    font-size: var(--fq-text-lg);
    line-height: 1.35;
}

.fq-muted, .fq-benefit p {
    color: var(--fq-muted);
}

.fq-dark {
    color: var(--fq-paper);
    background: var(--fq-ink);
}

.fq-stack-lg {
    --gap: var(--fq-s72);
}

.fq-asset {
    flex: none;
    object-fit: contain;
}

.fq-header {
    --fq-admin-offset: 0px;
    position: relative;
    background: var(--fq-paper);
    justify-content: space-between;
    --gap: var(--fq-s32);
    padding-block: var(--fq-s24);
}

.fq-header.is-floating {
    position: fixed;
    top: var(--fq-admin-offset, 0px);
    inset-inline: 0;
    width: 100%;
    z-index: 1000;
    transition: all 400ms var(--fq-ease);
}

.fq-header.is-scrolled {
    /*box-shadow: 0 8px 24px rgb(0 0 0 / 5%), inset 0 -1px var(--fq-line);*/
    box-shadow: 5px 5px 14px 6px rgba(0, 0, 0, 0.24);
    -webkit-box-shadow: 5px 5px 14px 6px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 5px 5px 14px 6px rgba(0, 0, 0, 0.24);
}

.fq-header.is-hidden {
    transform: translateY(calc(-100% - var(--fq-admin-offset, 0px) - 2px));
    pointer-events: none;
}

.fq-header.is-hidden a {
    visibility: hidden;
}

.fq-section, #content {
    scroll-margin-top: 140px;
}

.fq-reveal {
    opacity: 0;
    translate: 0 32px;
    transition: opacity 600ms ease-out, translate 800ms var(--fq-ease);
    transition-delay: var(--fq-reveal-delay, 0ms);
}

.fq-reveal.is-revealed {
    opacity: 1;
    translate: none;
}

.fq-reveal--instant {
    transition: none;
}

/* CSS starts with the first paint, avoiding a visible-then-hidden JS flash. */
@keyframes fq-enter {
    from {
        opacity: 0;
        translate: 0 32px;
    }
    to {
        opacity: 1;
        translate: none;
    }
}

.fq-hero > :is(.fq-hero-title, .fq-hero-bottom, .fq-cockpit-visual, .fq-hero-upload),
.fq-contact-page > :is(.fq-contact-heading, .fq-contact-content) {
    animation: fq-enter 900ms var(--fq-ease) backwards;
}

.fq-hero > .fq-hero-bottom, .fq-contact-page > .fq-contact-content {
    animation-delay: 120ms;
}

.fq-hero > :is(.fq-cockpit-visual, .fq-hero-upload) {
    animation-delay: 240ms;
}

.fq-brand {
    flex: none;
}

.fq-custom-logo {
    width: 118px;
    height: auto;
}

.fq-nav-list {
    --gap: 36px;
    padding: 0;
    list-style: none;
    font-family: var(--fq-font-ui);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.fq-nav-list a {
    padding-block: 6px;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
    transition: background-size 240ms var(--fq-ease), color 180ms ease;
}

.fq-nav-list :is(.current-menu-item > a, a:focus-visible) {
    background-size: 100% 1px;
}

.fq-brand, .fq-footer-logo, .fq-pixlab {
    transition: opacity 200ms ease;
}

.fq-legal-links a {
    text-underline-offset: 4px;
    text-decoration-color: transparent;
    transition: text-decoration-color 180ms ease;
}

.fq-legal-links a:focus-visible {
    text-decoration: underline;
}

.fq-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--fq-s12);
    padding: 18px min(26px, 1.805556vw);
    font: 600 min(16px, 1.111111vw)/1 var(--fq-font-ui);
    border: 0;
    box-shadow: inset 0 0 0 0 var(--fq-accent), inset 0 0 0 1.5px var(--fq-button-line, transparent);
    white-space: nowrap;
    transition: color 400ms ease, box-shadow 400ms var(--fq-ease), translate 400ms var(--fq-ease);
}

.fq-button--dark {
    background: var(--fq-ink);
    color: var(--fq-paper);
}

.fq-button--light {
    background: var(--fq-paper);
    color: var(--fq-ink);
}

.fq-button--outline {
    --fq-button-line: var(--fq-ink);
    color: var(--fq-ink);
}

.fq-footer {
    align-items: flex-start;
    --gap: var(--fq-s64);
    padding-top: var(--fq-s72);
    padding-bottom: var(--fq-s40);
}

.fq-footer .fq-nav-list {
    gap: var(--fq-s32);
}

.fq-footer-meta {
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    border-top: var(--fq-border);
    padding-top: var(--fq-s24);
    color: var(--fq-muted);
    font: 500 13px/1.3 var(--fq-font-ui);
}

.fq-legal-links, .fq-chat-identity {
    --gap: var(--fq-s12);
}

.fq-legal-links a + a::before {
    content: "·";
    margin-right: var(--fq-s12);
}

.fq-hero {
    padding-top: 40px;
    padding-bottom: var(--fq-section-space);
    --gap: var(--fq-s48);
}

.fq-hero-title {
    font-family: var(--fq-font-display);
    font-size: var(--fq-display-xl);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.fq-hero-title > span {
    color: var(--fq-accent);
}

.fq-hero-bottom {
    justify-content: space-between;
    align-items: flex-end;
    --gap: var(--fq-s28);
}

.fq-hero-intro {
    width: 50%;
    flex: none;
    padding-inline-start: 4px;
}

.fq-actions {
    --gap: var(--fq-s12);
    align-items: flex-start;
    flex: none;
}

.fq-section-heading {
    --fq-heading-copy-width: 30.1067%;
    align-items: flex-end;
    justify-content: space-between;
    --gap: 1.2957%;
}

.fq-section-heading > h2, .fq-cockpit-menu > span, .fq-task-label {
    flex: 1;
}

.fq-section-heading > p {
    width: var(--fq-heading-copy-width);
    flex: none;
}

.fq-how {
    background: var(--fq-soft);
}

.fq-eyebrow {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 500;
}

.fq-benefits, .fq-cta-action {
    --gap: var(--fq-s28);
}

.fq-benefit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    --gap: var(--fq-s24);
}

.fq-benefit {
    border-top: 2px solid var(--fq-ink);
    padding-top: var(--fq-s20);
}

.fq-benefit h3 {
    font-size: var(--fq-text-lg);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.005em;
    margin-bottom: var(--fq-s8);
}

.fq-how-note {
    font-size: 2.1875rem;
    font-weight: 800;
    line-height: 1.31;
    letter-spacing: -.005em;
}

.fq-verbs, .fq-stats--hero {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fq-verb {
    padding: var(--fq-s32) var(--fq-s40) 0 var(--fq-s32);
    border-top: 2px solid var(--fq-ink);
}

.fq-verb:first-child {
    padding-left: 0;
}

.fq-verb h2 {
    font: 800 var(--fq-display-md)/1.04 var(--fq-font-display);
    margin-bottom: var(--fq-s20);
}

.fq-ai-layout {
    grid-template-columns: minmax(0, 580fr) minmax(0, 700fr);
    align-items: center;
    justify-content: space-between;
    --gap: var(--fq-s32);
}

.fq-ai-copy {
    align-items: flex-start;
    --gap: var(--fq-s32);
}

.fq-title--ai {
    font-size: 4.444444vw;
}

.fq-ai-subtitle {
    color: var(--fq-gray-dark);
    font-weight: 700;
    line-height: 1.26;
}

.fq-examples {
    --gap: var(--fq-s16);
    padding: 0;
    list-style: none;
}

.fq-examples li {
    display: flex;
    gap: 14px;
    align-items: center;
    line-height: 1.5;
}

.fq-examples li::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: none;
    background: var(--fq-blue-light);
}

.fq-motion {
    justify-content: center;
    padding-block: var(--fq-s80);
}

.fq-motion video {
    width: 82.3171%;
}

.fq-about {
    grid-template-columns: minmax(0, 700fr) minmax(0, 520fr);
    --gap: 7.012195%;
}

.fq-about-copy {
    --gap: var(--fq-s28);
    align-items: flex-start;
}

.fq-pixlab {
    margin-top: var(--fq-s12);
}

.fq-commitment {
    padding: var(--fq-s24) 0 var(--fq-s28);
    border-top: 1px solid var(--fq-ink);
}

.fq-commitment:first-child {
    /*border-top-width: 2px;*/
}

.fq-commitment h3 {
    margin-bottom: 6px;
    font-size: var(--fq-text-lg);
    line-height: 1.3;
    font-weight: 700;
}

.fq-commitment p {
    color: var(--fq-muted);
}

.fq-cta {
    padding-block: 11.111111vw;
}

.fq-cta h2 {
    font: 800 9.2vw/.96 var(--fq-font-ui);
    letter-spacing: -.03em;
    margin-bottom: 56px;
}

.fq-cta-action p {
    width: 420px;
    color: var(--fq-gray-dark);
}

.fq-setup-hint {
    margin-top: var(--fq-s32);
    padding: var(--fq-s16);
    border: 1px dashed var(--fq-gray-dark);
    color: var(--fq-gray-dark);
    font-size: 0.875rem;
}

.fq-page {
    min-height: 50vh;
}

.fq-page > h1 {
    margin-bottom: var(--fq-s64);
}

.fq-prose {
    line-height: 1.6;
}

.fq-prose > :is(p, ul, ol, h2, h3, blockquote) + :is(p, ul, ol, h2, h3, blockquote) {
    margin-top: var(--fq-s24);
}

.fq-prose h2 {
    font-size: 2.5rem;
    line-height: 1.1;
}

.fq-prose h3 {
    font-size: 1.75rem;
    line-height: 1.2;
}

.fq-prose a {
    color: var(--fq-accent);
    text-decoration: underline;
}

.fq-prose :is(ul, ol) {
    padding-left: var(--fq-s24);
}

.fq-contact-page {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 6vw;
    align-items: start;
    padding-block: 6vw 9vw;
    background: linear-gradient(90deg, var(--fq-soft) 0 38%, var(--fq-paper) 38%);
}

.fq-contact-page > .fq-contact-heading {
    position: sticky;
    top: 150px;
    /*padding-block-start: var(--fq-s16);*/
}

.fq-contact-page .fq-title {
    font-size: 5.277778vw;
    line-height: .98;
}

.fq-contact-content {
    min-width: 0;
}

.fq-contact-heading {
    --gap: var(--fq-s24);
    margin-block-end: var(--fq-s48);
}

.fq-contact-content > p {
    font-size: var(--fq-text-lg);
    color: var(--fq-muted);
}

.fq-contact .wpcf7 {
    margin-block-start: var(--fq-s32);
    padding-block-start: var(--fq-s32);
    border-block-start: 1px solid var(--fq-ink);
}

.fq-form-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --gap: var(--fq-s28) var(--fq-s32);
}

.fq-form-grid > p {
    margin: 0;
}

.fq-field--full {
    grid-column: 1 / -1;
}

.fq-field label > br {
    display: none;
}

.fq-field .wpcf7-form-control-wrap {
    display: block;
    min-width: 0;
}

.fq-field label {
    display: grid;
    gap: var(--fq-s8);
    font-family: var(--fq-font-ui);
    font-size: 1rem;
    font-weight: 500;
}

.fq-field :is(input, select, textarea) {
    inline-size: 100%;
    min-block-size: 56px;
    padding: var(--fq-s16);
    color: var(--fq-ink);
    background: var(--fq-soft);
    border: 1px solid transparent;
    border-bottom-color: var(--fq-line);
    border-radius: 0;
    transition: background-color 180ms ease, border-color 180ms ease;
    font-family: var(--fq-font-ui);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    outline: 0!important;
}

.fq-field textarea {
    block-size: 160px;
    min-block-size: 160px;
    resize: vertical;
}

.fq-field :is(input, select, textarea):focus-visible {
    background: var(--fq-paper);
    outline: var(--fq-focus-ring);
    outline-offset: 2px;
    border-color: var(--fq-accent);
}

.fq-field :is(input, select, textarea)[aria-invalid="true"] {
    border-color: #b42318;
    background: #fff8f6;
}
.fq-field textarea{
    resize: none;
}
.fq-form-note {
    color: var(--fq-muted);
    font-family: var(--fq-font-ui);
    font-size: 0.875rem;
    line-height: 1.5;
}

.fq-contact .wpcf7-not-valid-tip {
    margin-block-start: var(--fq-s8);
    font-size: 0.875rem;
}

.fq-contact .wpcf7 form .wpcf7-response-output {
    margin: var(--fq-s24) 0 0;
    padding: var(--fq-s16);
    font-size: 1rem;
}

.fq-contact .wpcf7-form .wpcf7-submit {
    min-height: 56px;
    cursor: pointer;
}

.fq-contact .wpcf7-form.submitting .wpcf7-submit {
    cursor: progress;
    opacity: 0.65;
}

.fq-cockpit-visual {
    position: relative;
    width: 100%;
    height: 670px;
    font-family: var(--fq-font-ui);
}

.fq-cockpit {
    position: absolute;
    top: 36px;
    left: 0;
    width: 100%;
    height: 600px;
    grid-template-columns: 18.902439% minmax(0, 1fr);
    overflow: hidden;
    border: var(--fq-border);
    border-radius: var(--fq-radius-lg);
    background: var(--fq-paper);
    box-shadow: var(--fq-shadow);
}

.fq-cockpit-sidebar {
    padding: var(--fq-s28) var(--fq-s20);
    background: var(--fq-ink);
    color: var(--fq-gray-dark);
    --gap: var(--fq-s4);
}

.fq-cockpit-logo {
    padding: 0 0 var(--fq-s28) var(--fq-s12);
}

.fq-cockpit-menu {
    --gap: var(--fq-s12);
    padding: 11px var(--fq-s12);
    border-radius: var(--fq-radius-sm);
    font-size: 0.875rem;
    line-height: 1.3;
    font-weight: 500;
}

.fq-cockpit-menu.is-current {
    background: var(--fq-paper);
    color: var(--fq-ink);
    font-weight: 600;
}

.fq-cockpit-menu b {
    padding: 2px 7px;
    background: var(--fq-paper);
    color: var(--fq-ink);
    font-size: 0.75rem;
}

.fq-cockpit-main {
    padding: 36px 44px;
    --gap: var(--fq-s28);
}

.fq-cockpit-top {
    justify-content: space-between;
    --gap: var(--fq-s20);
}

.fq-cockpit-greeting {
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.02em;
    margin-bottom: 6px;
}

.fq-mock-muted {
    color: var(--fq-muted);
    font: 500 14px/1.4 var(--fq-font-body);
}

.fq-cockpit-input {
    --gap: 10px;
    padding: 13px var(--fq-s16);
    border: var(--fq-border);
    border-radius: 8px;
    color: var(--fq-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    width: 322px;
}

.fq-stats {
    --gap: var(--fq-s16);
}

.fq-stat {
    --gap: var(--fq-s4);
    background: var(--fq-soft);
    padding: var(--fq-s20) 22px;
    border-radius: var(--fq-radius-md);
}

.fq-stat b {
    font: 800 44px/1.04 var(--fq-font-ui);
    letter-spacing: -.02em;
}

.fq-stat--accent b {
    color: var(--fq-accent);
}

.fq-stat span {
    color: var(--fq-muted);
    font: 500 14px/1.4 var(--fq-font-body);
}

.fq-cockpit-columns {
    align-items: start;
    grid-template-columns: minmax(0, 624fr) minmax(0, 330fr);
    --gap: var(--fq-s20);
}

.fq-tasks, .fq-agenda {
    border: var(--fq-border);
    border-radius: var(--fq-radius-md);
    padding: var(--fq-s20) 22px var(--fq-s12);
}

.fq-mock-title {
    font: 600 15px/1.3 var(--fq-font-ui);
}

.fq-task {
    --gap: var(--fq-s12);
    padding-block: 13px;
    font-size: 0.875rem;
    line-height: 1.4;
}

.fq-checkbox {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--fq-ink);
    border-radius: 3px;
    flex: none;
    justify-content: center;
}

.fq-task.is-complete .fq-checkbox {
    background: var(--fq-ink);
}

.fq-task.is-complete .fq-task-label {
    color: var(--fq-gray-dark);
    text-decoration: line-through;
}

.fq-task small {
    padding: 3px var(--fq-s8);
    font-size: 0.75rem;
    color: var(--fq-muted);
    background: var(--fq-soft);
    border-radius: 4px;
}

.fq-agenda {
    --gap: 14px;
    padding-bottom: var(--fq-s20);
}

.fq-event {
    border-left: 3px solid var(--fq-line);
    padding-left: var(--fq-s12);
    min-height: 40px;
}

.fq-event--highlight {
    border-left-color: var(--fq-ink);
}

.fq-event--highlight p {
    font-weight: 600;
}

.fq-event > span {
    color: var(--fq-muted);
    font-size: 0.75rem;
}

.fq-event > p {
    font-size: 0.875rem;
}

.fq-cockpit-bubble {
    position: absolute;
    top: 0;
    right: 3.658537%;
    padding: var(--fq-s16) 22px var(--fq-s16) var(--fq-s20);
    --gap: var(--fq-s12);
    border-radius: 14px;
    background: var(--fq-accent);
    color: var(--fq-paper);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.5;
    box-shadow: 0 16px 40px rgb(0 0 0 / 18%);
}

.fq-cockpit-notification {
    --gap: 14px;
    position: absolute;
    top: 588px;
    left: -32px;
    padding: var(--fq-s16) var(--fq-s24) var(--fq-s16) 18px;
    border: var(--fq-border);
    border-radius: 14px;
    background: var(--fq-paper);
    box-shadow: 0 16px 40px rgb(0 0 0 / 12%);
}

.fq-cockpit-notification b, .fq-overview-assistant b {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.fq-cockpit-notification p {
    color: var(--fq-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 3px;
}

.fq-avatar {
    justify-content: center;
    padding: var(--fq-s8);
    flex: none;
    border-radius: 8px;
    background: var(--fq-accent);
}

.fq-cockpit-notification .fq-avatar {
    padding: 10px;
}

.fq-diagram {
    --fq-diagram-gap: 5.792683%;
    position: relative;
    grid-template-columns: minmax(0, 330fr) minmax(0, 500fr) minmax(0, 330fr);
    --gap: var(--fq-diagram-gap);
    align-items: start;
    min-height: 714px;
}

.fq-diagram-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fq-diagram-lines :is(img, svg) {
    display: block;
    width: 100%;
    height: 100%;
}

.fq-wire {
    fill: none;
    stroke: var(--fq-ink);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.fq-wire--tools {
    stroke: var(--fq-muted);
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
}

.fq-wire-node {
    fill: var(--fq-accent);
}

.fq-wire-node--tools {
    fill: var(--fq-muted);
}

.fq-diagram-column {
    position: relative;
    --gap: var(--fq-s12);
}

.fq-diagram-column--tools {
    grid-column: 1;
    grid-row: 1;
}

.fq-diagram-column--modules {
    grid-column: 3;
    grid-row: 1;
}

.fq-diagram-label {
    margin-bottom: 0;
}

.fq-diagram-label h3 {
    font: 500 16px/1.2 var(--fq-font-body);
}

.fq-diagram-label p {
    font: 500 14px/1.4 var(--fq-font-body);
    margin-top: var(--fq-s4);
    color: var(--fq-muted);
}

.fq-tool-card {
    align-items: flex-start;
    --gap: 14px;
    padding: 14px var(--fq-s16);
    border: 1px dashed var(--fq-gray-dark);
    background: var(--fq-paper);
    font-family: var(--fq-font-ui);
}

.fq-tool-card > .fq-asset {
    margin-top: 0;
}

.fq-card-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: none;
}

.fq-tool-card > div {
    flex: 1;
    min-width: 0;
}

.fq-tool-card h4 {
    font-size: 0.9375rem;
    line-height: 1.3;
    font-weight: 600;
}

.fq-tool-card p {
    margin-top: 3px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--fq-muted);
}

.fq-tool-card--dark {
    border-color: transparent;
    background: var(--fq-ink);
    color: var(--fq-paper);
}

.fq-tool-card--dark p {
    color: var(--fq-gray-dark);
}

.fq-site-example {
    --gap: var(--fq-s8);
    padding-top: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.fq-overview {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    margin-top: 55px;
    padding: 26px var(--fq-s28) var(--fq-s28);
    border: 2px solid var(--fq-ink);
    background: var(--fq-paper);
    font-family: var(--fq-font-ui);
    --gap: var(--fq-s20);
}

.fq-overview-header {
    justify-content: space-between;
}

.fq-overview-header > span {
    font: 500 14px/1.4 var(--fq-font-body);
    color: var(--fq-muted);
}

.fq-stats--overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.fq-stats--overview .fq-stat {
    padding: 14px var(--fq-s16);
    gap: 2px;
    border-radius: 0;
}

.fq-stats--overview .fq-stat b {
    font-size: 2.25rem;
}

.fq-stats--overview .fq-stat span {
    font: 500 13px/1.3 var(--fq-font-ui);
}

.fq-revenue {
    grid-template-columns: 1fr 1fr;
    --gap: var(--fq-s8);
}

.fq-revenue-card {
    align-items: flex-start;
    --gap: 3px;
    padding: 10px var(--fq-s12);
    background: var(--fq-soft);
}

.fq-revenue p {
    color: var(--fq-muted);
    font-size: 0.6875rem;
    font-weight: 600;
}

.fq-revenue b {
    font-size: 1.375rem;
    font-weight: 800;
    white-space: nowrap;
}

.fq-revenue small {
    font-size: 0.625rem;
    color: var(--fq-muted);
}

.fq-revenue-card--forecast {
    background: var(--fq-accent);
    color: var(--fq-paper);
}

.fq-revenue-card--forecast :is(p, small) {
    color: var(--fq-blue-pale);
}

.fq-bars {
    --gap: 3px;
    align-items: flex-end;
    height: 20px;
}

.fq-bars i {
    width: 7px;
    height: 9px;
    background: var(--fq-gray-dark);
}

.fq-bars i:nth-child(2) {
    height: 12px;
}

.fq-bars i:nth-child(3) {
    height: 10px;
}

.fq-bars i:nth-child(4) {
    height: 14px;
}

.fq-bars i:last-child {
    height: 16px;
    background: var(--fq-accent);
}

.fq-revenue-card--forecast .fq-bars i {
    background: var(--fq-blue-light);
    height: 14px;
}

.fq-revenue-card--forecast .fq-bars i:nth-child(2) {
    height: 17px;
}

.fq-revenue-card--forecast .fq-bars i:last-child {
    height: 20px;
    background: var(--fq-paper);
}

.fq-feed > div {
    display: flex;
    align-items: center;
    gap: var(--fq-s12);
    padding-block: 10px;
    border-top: var(--fq-border);
}

.fq-feed p {
    font-size: 0.8125rem;
    line-height: 1.3;
}

.fq-feed b, .fq-chat b {
    font-weight: 600;
}

.fq-feed span {
    color: var(--fq-muted);
}

.fq-overview-assistant {
    padding: var(--fq-s16) 18px;
    background: var(--fq-accent);
    color: var(--fq-paper);
}

.fq-overview-assistant > div {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.fq-overview-assistant span {
    font-size: 0.8125rem;
    color: var(--fq-blue-pale);
}

.fq-overview-assistant > p {
    padding: 10px 14px;
    background: var(--fq-blue-dark);
    font-size: 0.875rem;
}

.fq-chat {
    width: 100%;
    background: var(--fq-paper);
    border-radius: var(--fq-radius-lg);
    overflow: hidden;
    color: var(--fq-ink);
    font: 400 15px/1.5 var(--fq-font-ui);
}

.fq-chat-header {
    justify-content: space-between;
    padding: var(--fq-s20) var(--fq-s28);
    border-bottom: var(--fq-border);
}

.fq-chat-identity small {
    display: block;
    font-size: 0.75rem;
    color: var(--fq-muted);
}

.fq-status {
    --gap: var(--fq-s8);
    padding: 5px var(--fq-s12) 5px 10px;
    border-radius: 20px;
    background: var(--fq-soft);
    font-size: 0.75rem;
    font-weight: 500;
}

.fq-chat-messages {
    --gap: var(--fq-s20);
    padding: var(--fq-s28);
}

.fq-chat-user {
    align-self: flex-end;
    background: var(--fq-ink);
    color: var(--fq-paper);
    border-radius: 14px;
    padding: var(--fq-s12) 18px;
}

.fq-chat-response {
    width: 100%;
    align-items: flex-start;
    --gap: var(--fq-s12);
}

.fq-chat-response > .fq-avatar {
    padding: 7px;
}

.fq-chat-reply {
    width: 80.745341%;
    min-width: 0;
    padding: 14px 18px var(--fq-s16);
    background: var(--fq-soft);
    border-radius: 14px;
    --gap: 14px;
}

.fq-chat-document {
    --gap: var(--fq-s12);
    padding: var(--fq-s12) 14px;
    background: var(--fq-paper);
    border: var(--fq-border);
    border-radius: var(--fq-radius-md);
}

.fq-chat-document b {
    display: block;
    font-size: 0.875rem;
    line-height: 1.3;
}

.fq-chat-document small {
    display: block;
    color: var(--fq-muted);
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 2px;
}

.fq-chat-actions {
    --gap: var(--fq-s8);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.fq-chat-actions > span {
    background: var(--fq-paper);
    border: var(--fq-border);
    padding: 7px var(--fq-s12);
}

.fq-chat-actions > span + span {
    background: var(--fq-ink);
    color: var(--fq-paper);
    border-color: var(--fq-ink);
}

.fq-chat-compose {
    --gap: var(--fq-s12);
    padding: var(--fq-s16) var(--fq-s20) var(--fq-s20) var(--fq-s28);
}

.fq-chat-compose > span {
    flex: 1;
    padding: 14px var(--fq-s16);
    border: var(--fq-border);
    border-radius: var(--fq-radius-md);
    color: var(--fq-muted);
}

.fq-chat-compose > div {
    background: var(--fq-accent);
    padding: 14px;
}

.fq-dialog {
    width: 84vw;
    max-width: none;
    max-height: 90dvh;
    margin: auto;
    padding: 0;
    border: 0;
    color: var(--fq-ink);
    background: var(--fq-paper);
    box-shadow: var(--fq-shadow);
    overscroll-behavior: contain;
}

.fq-dialog::backdrop {
    background: rgb(0 0 0 / 60%);
    backdrop-filter: blur(8px);
}

.fq-dialog-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--fq-s48);
    padding: var(--fq-s48);
}

.fq-dialog-close {
    position: sticky;
    top: var(--fq-s16);
    float: right;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: var(--fq-s16) var(--fq-s16) -60px 0;
    border: var(--fq-border);
    border-radius: 50%;
    color: var(--fq-ink);
    background: var(--fq-paper);
    font-size: 28px;
    line-height: 1;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.fq-dialog .fq-title {
    font-size: 3.5rem;
}

.fq-dialog .fq-contact-heading {
    align-content: start;
    margin-block-end: var(--fq-s24);
}

.fq-dialog .fq-prose > p + p {
    margin-block-start: var(--fq-s16);
}

.fq-dialog .fq-contact-content > p {
    font-size: 1.125rem;
}

.fq-dialog .wpcf7 {
    margin-block-start: var(--fq-s28);
    padding-block-start: var(--fq-s28);
}

.fq-dialog .fq-field textarea {
    min-block-size: 140px;
}

.fq-button > .fq-asset {
    transition: translate 400ms var(--fq-ease);
    margin-top: -2px;
}
.fq-button:hover > .fq-asset {
    filter: brightness(0) invert(1);
}

.fq-prose a {
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: color 180ms ease;
}

/* Hover belongs to controls and links; the product illustrations remain static. */
@media (hover: hover) and (pointer: fine) {
    .fq-nav-list a:hover {
        background-size: 100% 1px;
    }

    .fq-button:not(:disabled):hover {
        box-shadow: inset 0 -5em 0 0 var(--fq-accent), inset 0 0 0 1.5px var(--fq-accent);
        color: var(--fq-paper);
    }

    .fq-button:not(:disabled):hover > .fq-asset {
        translate: 5px 0;
        /*filter: brightness(0) invert(1);*/
    }

    .fq-button:not(:disabled):active {
        translate: 0 1px;
    }

    :is(.fq-brand, .fq-footer-logo, .fq-pixlab):hover {
        opacity: .72;
    }

    .fq-legal-links a:hover {
        text-decoration: underline;
        text-decoration-color: currentColor;
    }

    .fq-dialog-close:hover {
        background: var(--fq-ink);
        border-color: var(--fq-ink);
        color: var(--fq-paper);
    }

    .fq-field :is(input, select, textarea):not(:focus-visible):not([aria-invalid="true"]):hover {
        border-bottom-color: var(--fq-muted);
    }

    .fq-prose a:hover {
        color: var(--fq-ink);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .fq-hero > :is(.fq-hero-title, .fq-hero-bottom, .fq-cockpit-visual, .fq-hero-upload),
    .fq-contact-page > :is(.fq-contact-heading, .fq-contact-content) {
        animation: none;
    }

    :is(.fq-button, .fq-button > .fq-asset, .fq-header, .fq-reveal, .fq-nav-list a, .fq-brand, .fq-footer-logo, .fq-pixlab, .fq-dialog-close, .fq-legal-links a, .fq-prose a) {
        transition: none;
    }

    .fq-button:not(:disabled):active, .fq-button:not(:disabled):hover > .fq-asset {
        translate: none;
    }

    .fq-reveal {
        opacity: 1;
        translate: none;
    }
}

.fq-field select {
    -webkit-appearance: none;
    appearance: none;

    padding-right: 52px;
    cursor: pointer;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m4.5 6.75 4.5 4.5 4.5-4.5' stroke='%231D1D1B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 18px;
}

/* FREEQ — Interactions visuelles */

.fq-cockpit-menu,
.fq-cockpit-visual .fq-stat,
.fq-task,
.fq-event,
.fq-cockpit-input,
.fq-cockpit-mobile-search,
.fq-cockpit-bubble,
.fq-cockpit-notification,
.fq-tool-card,
.fq-overview .fq-stat,
.fq-revenue-card,
.fq-feed > div,
.fq-overview-assistant,
.fq-chat-actions > span,
.fq-chat-user {
    cursor: pointer;
    transition:
            transform .22s ease,
            background-color .22s ease,
            box-shadow .22s ease,
            opacity .22s ease;
}

@media (hover: hover) {
    .fq-cockpit-menu:hover {
        background: #383838;
        color: #fff;
    }

    .fq-cockpit-menu.is-current:hover {
        background: #f3f3f1;
        color: #1d1d1b;
    }

    .fq-cockpit-visual .fq-stat:hover,
    .fq-task:hover,
    .fq-event:hover,
    .fq-cockpit-input:hover,
    .fq-cockpit-bubble:hover,
    .fq-cockpit-notification:hover,
    .fq-tool-card:hover,
    .fq-overview .fq-stat:hover,
    .fq-revenue-card:hover,
    .fq-feed > div:hover,
    .fq-overview-assistant:hover,
    .fq-chat-actions > span:hover {
        transform: translateY(-2px);
        /*box-shadow: 0 8px 22px rgb(0 0 0 / 10%);*/
    }
}

/* Checkbox interactive */
.fq-task.is-complete .fq-checkbox::after {
    content: '';
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.fq-task .fq-checkbox img {
    display: none;
}

/* Sélection visuelle */
.fq-stat.is-demo-selected,
.fq-tool-card.is-demo-selected,
.fq-revenue-card.is-demo-selected {
    box-shadow: inset 0 0 0 2px var(--fq-blue-light, #7d9ce2);
}

.fq-tool-card.is-demo-selected {
    transform: translateY(-2px);
}

.fq-chat-user[role="button"]:hover {
    opacity: .82;
}

/* Accessibilité clavier */
.fq-cockpit-visual [role="button"]:focus-visible,
.fq-diagram [role="button"]:focus-visible,
.fq-chat [role="button"]:focus-visible {
    outline: 2px solid var(--fq-blue-light, #7d9ce2);
    outline-offset: 3px;
}

/* Notification de démonstration */
.fq-demo-toast {
    position: absolute;
    z-index: 15;
    right: 16px;
    bottom: 18px;
    max-width: min(330px, 90%);
    padding: 11px 15px;
    background: #1d1d1b;
    color: #fff;
    font: 500 13px/1.4 var(--fq-font-ui, sans-serif);
    box-shadow: 0 12px 30px rgb(0 0 0 / 15%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}

.fq-demo-toast.is-visible {
    opacity: 1;
    transform: none;
}

/* Chat interactif */
.fq-chat {
    position: relative;
}

.fq-chat-messages {
    max-height: 520px;
    overflow-y: auto;
}

.fq-chat-compose > input {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    border: var(--fq-border, 1px solid #ddd);
    border-radius: var(--fq-radius-md, 10px);
    font: inherit;
    outline: 0;
}

.fq-chat-compose > button {
    border: 0;
    padding: 14px;
    background: var(--fq-accent, #2a4b9b);
    color: #fff;
    cursor: pointer;
}

.fq-demo-preview,
.fq-demo-relance {
    padding: 12px;
    background: #fff;
    border: 1px solid #dcdcd8;
    font-size: 13px;
    line-height: 1.5;
}

.fq-demo-preview[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .fq-cockpit-visual [role="button"],
    .fq-diagram [role="button"],
    .fq-chat [role="button"],
    .fq-demo-toast {
        transition: none;
    }
}