/**
 * FREEQ — Responsive layout
 * Reference: Figma mobile frame 390px (56:550).
 * custom.css remains the desktop reference (no desktop layout overrides >= 1280px).
 *
 * Range            Layout
 * 1024–1279px      Compact desktop / landscape tablet
 * 768–1023px       Tablet / touch navigation
 * 480–767px        Large phone / small tablet
 * 360–479px        Figma phone layout (390px reference)
 * <=359px          Small phone / accessibility fallbacks
 */

/* Mobile elements are hidden by default; breakpoints below reveal them. */
.fq-menu-toggle,
.fq-mobile-cta,
.fq-mobile-nav-caption,
.fq-mobile-nav-bottom,
.fq-cockpit-mobile-bar,
.fq-cockpit-mobile-search,
.fq-hero-note,
.fq-mobile-hero-cta {
    display: none;
}

/* --------------------------------------------------------------------------
   Compact desktop: preserve original composition without fixed-width overflow
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --fq-gutter: clamp(36px, 4.5vw, 58px);
        --fq-section-space: clamp(76px, 7vw, 96px);
        --fq-display-xl: clamp(82px, 8.5vw, 108px);
        --fq-display-lg: clamp(52px, 5.6vw, 70px);
        --fq-display-md: clamp(30px, 3vw, 37px);
    }

    .fq-header {
        --gap: 22px;
    }

    .fq-header .fq-nav-list {
        gap: clamp(15px, 1.9vw, 26px);
    }

    .fq-button {
        font-size: 14px;
        padding: 16px 19px;
    }

    .fq-hero-intro {
        width: min(47%, 540px);
    }

    .fq-cockpit-visual {
        height: 610px;
    }

    .fq-cockpit {
        height: 550px;
    }

    .fq-cockpit-main {
        padding: 28px;
        --gap: 20px;
    }

    .fq-cockpit-greeting {
        font-size: 30px;
    }

    .fq-cockpit-input {
        width: min(31vw, 300px);
    }

    .fq-cockpit-notification {
        top: 535px;
        left: -16px;
    }

    .fq-how .fq-section-heading {
        --fq-heading-copy-width: 36%;
    }

    .fq-revenue b {
        font-size: 18px;
    }

    .fq-cta h2 {
        font-size: 9.6vw;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .fq-diagram {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
        min-height: 0;
    }

    .fq-diagram-lines {
        display: none;
    }

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

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

    .fq-overview {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        width: min(100%, 570px);
        margin-top: 12px;
    }

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

/* --------------------------------------------------------------------------
   Tablet: accessible overlay navigation; single-column content where needed
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    :root {
        --fq-gutter: clamp(25px, 5vw, 48px);
        --fq-section-space: clamp(72px, 8vw, 100px);
        --fq-display-xl: clamp(54px, 8.5vw, 86px);
        --fq-display-lg: clamp(43px, 6.8vw, 66px);
        --fq-display-md: clamp(32px, 4vw, 42px);
        --fq-text-lg: 1.25rem;
        --fq-mobile-header-height: 78px;
    }

    html {
        scrollbar-gutter: auto;
    }

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

    .fq-hero-title {
        text-transform: none;
    }

    /* The toggle matches Figma's outlined square, with an animated 3-bar icon. */
    .fq-header {
        z-index: 1000;
        min-height: var(--fq-mobile-header-height);
        padding-block: 14px;
        --gap: 0;
    }

    .fq-header > .fq-button {
        display: none;
    }

    .fq-header .fq-brand {
        position: relative;
        z-index: 3;
    }

    .fq-menu-toggle {
        position: relative;
        z-index: 3;
        display: grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 46px;
        padding: 0;
        border: 2px solid var(--fq-ink);
        border-radius: 0;
        color: var(--fq-ink);
        background: var(--fq-paper);
        -webkit-tap-highlight-color: transparent;
        transition: background-color 180ms ease, border-color 180ms ease;
    }

    .fq-menu-icon,
    .fq-menu-icon::before,
    .fq-menu-icon::after {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 240ms ease, opacity 160ms ease;
    }

    .fq-menu-icon {
        position: relative;
    }

    .fq-menu-icon::before,
    .fq-menu-icon::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .fq-menu-icon::before {
        transform: translateY(-7px);
    }

    .fq-menu-icon::after {
        transform: translateY(7px);
    }

    .fq-header.is-menu-open .fq-menu-icon {
        background: transparent;
    }

    .fq-header.is-menu-open .fq-menu-icon::before {
        transform: rotate(45deg);
    }

    .fq-header.is-menu-open .fq-menu-icon::after {
        transform: rotate(-45deg);
    }

    .fq-header.is-menu-open .fq-menu-toggle {
        border-color: var(--fq-ink);
    }

    .fq-header.is-menu-open.is-hidden {
        transform: none;
        pointer-events: auto;
    }

    html.fq-menu-open {
        overflow: hidden;
    }

    /* Full-height navigation rather than a tiny dropdown over the hero. */
    .fq-header .fq-nav {
        position: fixed;
        z-index: 2;
        top: calc(var(--fq-mobile-header-height) + var(--fq-admin-offset, 0px));
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        padding: clamp(34px, 5vw, 54px) var(--fq-gutter) max(28px, env(safe-area-inset-bottom));
        overflow: auto;
        overscroll-behavior: contain;
        background: var(--fq-paper);
        box-shadow: 0 18px 38px rgb(0 0 0 / 10%);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-14px);
        transition: visibility 240ms, opacity 240ms, transform 240ms;
    }

    .fq-header.is-menu-open .fq-nav {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .fq-mobile-nav-caption {
        display: block;
        margin-bottom: 14px;
        color: var(--fq-accent);
        font: 700 11px/1.3 var(--fq-font-ui);
        letter-spacing: .13em;
    }

    .fq-header .fq-nav-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        font: 800 clamp(28px, 4vw, 42px)/1.12 var(--fq-font-display);
    }

    .fq-header .fq-nav-list li {
        border-bottom: 1px solid var(--fq-line);
    }

    .fq-header .fq-nav-list li:first-child {
        border-top: 1px solid var(--fq-line);
    }

    .fq-header .fq-nav-list a {
        display: block;
        padding: 20px 0;
        background: none;
    }

    .fq-header .fq-nav-list a:hover,
    .fq-header .fq-nav-list a:focus-visible {
        color: var(--fq-accent);
    }

    .fq-mobile-cta {
        display: block;
        margin-top: 38px;
    }

    .fq-mobile-cta .fq-button {
        display: flex;
        width: 100%;
        min-height: 60px;
        justify-content: space-between;
        padding: 17px 20px;
        font-size: 16px;
        white-space: normal;
    }

    .fq-mobile-nav-bottom {
        display: block;
        margin-top: auto;
        padding-top: 38px;
        color: var(--fq-muted);
        font-size: 13px;
    }

    .fq-hero {
        padding-top: 60px;
        --gap: 28px;
    }

    .fq-hero-bottom {
        flex-direction: column;
        align-items: stretch;
        --gap: 25px;
    }

    .fq-hero-intro {
        width: min(100%, 640px);
        padding-left: 0;
    }

    .fq-actions {
        flex-wrap: wrap;
        align-items: stretch;
        flex: initial;
    }

    .fq-actions .fq-button {
        min-width: 210px;
    }

    /* Tablet dashboard: keep the illustration readable. */
    .fq-cockpit-visual {
        height: auto;
        padding-top: 32px;
        padding-bottom: 34px;
    }

    .fq-cockpit {
        position: relative;
        inset: auto;
        height: auto;
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .fq-cockpit-sidebar {
        align-items: center;
        padding: 16px 6px;
    }

    .fq-cockpit-logo {
        padding: 0 0 16px;
    }

    .fq-cockpit-logo .fq-asset {
        width: 54px;
    }

    .fq-cockpit-menu {
        justify-content: center;
        padding: 11px 6px;
    }

    .fq-cockpit-menu > span,
    .fq-cockpit-menu > b {
        display: none;
    }

    .fq-cockpit-main {
        min-width: 0;
        padding: 22px;
        --gap: 18px;
    }

    .fq-cockpit-input {
        width: min(100%, 255px);
    }

    .fq-cockpit-columns {
        gap: 12px;
    }

    .fq-tasks,
    .fq-agenda {
        min-width: 0;
        padding: 15px;
    }

    .fq-cockpit-bubble {
        right: 18px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .fq-cockpit-notification {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        width: fit-content;
        margin-top: -14px;
    }

    .fq-section-heading {
        flex-direction: column;
        align-items: flex-start;
        --gap: 20px;
    }

    .fq-section-heading > p {
        width: min(100%, 610px);
    }

    .fq-how .fq-stack-lg {
        --gap: 56px;
    }

    .fq-diagram {
        grid-template-columns: 1fr;
        gap: 36px;
        min-height: 0;
    }

    .fq-diagram-lines {
        display: none;
    }

    .fq-diagram-column--tools,
    .fq-diagram-column--modules,
    .fq-overview {
        grid-column: 1;
    }

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

    .fq-overview {
        grid-row: 2;
        justify-self: center;
        margin-top: 0;
        width: min(100%, 550px);
    }

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

    .fq-diagram-column--tools {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .fq-diagram-column--tools .fq-diagram-label {
        grid-column: 1 / -1;
        width: 100%;
    }

    .fq-diagram-column--tools .fq-tool-card p {
        display: none;
    }

    .fq-diagram-column--tools .fq-tool-card {
        align-items: center;
    }

    .fq-diagram-column--modules {
        gap: 9px;
    }

    .fq-diagram-column--modules .fq-tool-card {
        padding: 14px;
    }

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

    .fq-how-note {
        font-size: clamp(22px, 3vw, 30px);
    }

    .fq-verbs {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .fq-verb,
    .fq-verb:first-child {
        padding: 20px 0 0;
    }

    .fq-verb h2 {
        margin-bottom: 8px;
    }

    .fq-ai-layout,
    .fq-about {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .fq-ai-copy {
        --gap: 24px;
    }

    .fq-title--ai {
        font-size: clamp(48px, 7vw, 66px);
    }

    .fq-chat,
    .fq-chat-upload {
        width: min(100%, 650px);
    }

    .fq-cta h2 {
        font-size: clamp(72px, 9.6vw, 100px);
        margin-bottom: 38px;
    }

    .fq-cta-action {
        flex-direction: column;
        align-items: flex-start;
        --gap: 18px;
    }

    .fq-cta-action p {
        width: min(100%, 540px);
    }

    .fq-footer {
        gap: 46px;
    }

    .fq-footer .fq-nav-list {
        gap: 22px;
        flex-wrap: wrap;
    }

    .fq-contact-page {
        grid-template-columns: 1fr;
        padding-block: 70px;
        gap: 30px;
        background: transparent;
    }

    .fq-contact-page > .fq-contact-heading {
        position: static;
        margin-bottom: 0;
    }

    .fq-contact-page .fq-title {
        font-size: clamp(48px, 7vw, 68px);
    }

    .fq-dialog {
        width: min(94vw, 720px);
    }

    .fq-dialog-panel {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 35px;
    }

    .fq-dialog .fq-contact-heading {
        margin-bottom: 0;
    }
    /* Custom WordPress admin-bar behavior retained. */
    html #wpadminbar {
        display: none !important;
    }

    html {
        margin: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   Phone layout: visual arrangement follows the 390px Figma frame
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        --fq-gutter: clamp(18px, 5vw, 30px);
        --fq-section-space: 60px;
        --fq-display-lg: clamp(37px, 10.1vw, 53px);
        --fq-display-md: clamp(27px, 7vw, 38px);
        --fq-text-base: 15px;
        --fq-text-lg: 16px;
        --fq-mobile-header-height: 72px;
    }

    .fq-header {
        padding-block: 13px;
    }

    .fq-brand .fq-asset, .fq-custom-logo {
        width: 98px;
        height: auto;
    }

    .fq-menu-toggle {
        width: 42px;
        height: 44px;
    }

    .fq-header .fq-nav {
        padding-top: 34px;
    }

    .fq-header .fq-nav-list {
        font-size: clamp(29px, 8.5vw, 38px);
    }

    .fq-header .fq-nav-list a {
        padding: 17px 0;
    }

    .fq-mobile-cta {
        margin-top: 27px;
    }

    .fq-mobile-cta .fq-button {
        min-height: 55px;
        font-size: 14px;
    }

    .fq-button {
        min-height: 53px;
        padding: 14px 16px;
        font-size: 14px;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }

    .fq-button > .fq-asset {
        width: 18px;
        height: auto;
    }

    /* Hero — mixed-case two-line title, narrow copy and stacked calls to action. */
    .fq-hero {
        padding-top: 25px;
        --gap: 27px;
    }

    .fq-hero-title {
        font-size: clamp(36px, 9.8vw, 51px);
        line-height: .96;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: none;
        overflow-wrap: normal;
    }

    .fq-hero-bottom {
        --gap: 32px;
    }

    .fq-hero-intro {
        width: 100%;
        font-size: 15px;
        line-height: 1.43;
    }

    .fq-hero-intro strong {
        font-weight: 700;
    }

    .fq-hero-note {
        display: block;
        margin-top: 15px;
        font: 400 13px/1.4 var(--fq-font-body);
        color: var(--fq-gray-dark);
    }

    .fq-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        --gap: 9px;
    }

    .fq-actions > .fq-button:first-child {
        display: none;
    }

    .fq-mobile-hero-cta {
        display: contents;
    }

    .fq-actions .fq-button {
        width: 100%;
        min-height: 52px;
    }

    /* Mobile cockpit is genuinely recomposed: toolbar / KPIs / tasks / search. */
    .fq-cockpit-visual {
        margin-top: 9px;
        padding-top: 28px;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .fq-cockpit {
        position: relative;
        top: auto;
        left: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        overflow: hidden;
        border-radius: 22px;
        border: 1px solid #e5e5e3;
        box-shadow: 0 15px 40px rgb(0 0 0 / 9%);
    }

    .fq-cockpit-sidebar {
        display: none;
    }

    .fq-cockpit-main {
        gap: 14px;
        padding: 18px;
    }

    .fq-cockpit-mobile-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 32px;
    }

    .fq-cockpit-mobile-logo .fq-asset {
        width: 53px;
        height: auto;
        filter: brightness(0) invert(1);
    }
    .fq-cockpit-mobile-logo{
        padding: 10px 10px 8px 10px;
        background-color: var(--fq-ink);
        border-radius: 5px;
    }

    .fq-cockpit-mobile-icons {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 10px 10px 8px 10px;
        background-color: var(--fq-soft);
        border-radius: 5px;
    }

    .fq-cockpit-mobile-icons .fq-asset {
        width: 18px;
    }

    .fq-cockpit-mobile-icons b {
        color: var(--fq-accent);
        font: 800 11px/1 var(--fq-font-ui);
    }

    .fq-cockpit-top {
        gap: 0;
    }

    .fq-cockpit-greeting {
        margin-bottom: 3px;
        font-size: 26px;
        line-height: 1.05;
    }

    .fq-mock-muted {
        font-size: 11px;
        line-height: 1.35;
    }

    .fq-cockpit-top .fq-cockpit-input {
        display: none;
    }

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

    .fq-stats--hero .fq-stat {
        gap: 4px;
        padding: 11px 9px;
        border-radius: 9px;
    }

    .fq-stats--hero .fq-stat b {
        font-size: 29px;
    }

    .fq-stats--hero .fq-stat span {
        font-size: 10px;
        line-height: 1.25;
    }

    .fq-cockpit-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .fq-tasks {
        padding: 13px 13px 7px;
        border-radius: 10px;
    }

    .fq-tasks .fq-mock-title {
        font-size: 13px;
    }

    .fq-task {
        flex-wrap: nowrap;
        gap: 10px;
        padding-block: 10px;
        font-size: 11px;
    }

    .fq-task-label {
        min-width: 0;
    }

    .fq-task small, .fq-tasks .fq-task:nth-of-type(n + 4) {
        display: none;
    }

    .fq-checkbox {
        width: 17px;
        height: 17px;
    }

    .fq-agenda, .fq-cockpit-notification {
        display: none;
    }

    .fq-cockpit-mobile-search {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 40px;
        padding: 10px 13px;
        border: 1px solid var(--fq-line);
        border-radius: 8px;
        color: var(--fq-muted);
        font: 500 12px/1.3 var(--fq-font-ui);
    }

    .fq-cockpit-mobile-search .fq-asset {
        width: 16px;
        height: 16px;
    }

    .fq-cockpit-bubble {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 5px;
        max-width: 88%;
        gap: 7px;
        padding: 11px 13px;
        border-radius: 22px;
        font-size: 12px;
        line-height: 1.3;
        white-space: nowrap;
        box-shadow: 0 6px 12px rgb(0 0 0 / 17%);
    }

    .fq-cockpit-bubble .fq-asset {
        width: 16px;
        height: 16px;
    }

    /* Tool tags > connected cockpit > dark modules, exactly in mobile order. */
    .fq-how .fq-stack-lg {
        gap: 50px;
    }

    .fq-section-heading {
        gap: 17px;
    }

    .fq-section-heading .fq-title {
        font-size: clamp(38px, 10vw, 52px);
        line-height: .98;
    }

    .fq-section-heading > p {
        font-size: 15px;
        line-height: 1.43;
    }

    .fq-diagram {
        gap: 0;
    }

    .fq-diagram-column--tools {
        /*grid-template-columns: repeat(6, minmax(0, 1fr));*/
        /*gap: 8px;*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .fq-diagram-label {
        margin-bottom: 6px;
    }

    .fq-diagram-label h3 {
        font-size: 13px;
        line-height: 1.3;
        font-weight: 700;
    }

    .fq-diagram-label p {
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.3;
    }

    .fq-diagram-column--tools .fq-tool-card {
        grid-column: span 2;
        justify-content: flex-start;
        min-width: 0;
        min-height: 37px;
        padding: 8px 7px;
        gap: 6px;
        width: fit-content;
        border: 1px dashed #999995;
    }

    .fq-diagram-column--tools .fq-tool-card:nth-of-type(n + 4) {
        grid-column: span 3;
    }

    .fq-diagram-column--tools .fq-tool-card h4 {
        font-size: 11px;
        line-height: 1.15;
        font-weight: 700;
    }

    .fq-diagram-column--tools .fq-tool-card .fq-asset,
    .fq-diagram-column--tools .fq-card-icon {
        width: 16px;
        height: 16px;
        max-height: 16px;
    }

    .fq-diagram-column--tools .fq-tool-card > div {
        min-width: 0;
    }

    /* The connectors are purely decorative; real content remains in the DOM. */
    .fq-overview {
        position: relative;
        width: 100%;
        margin-top: 65px;
        margin-bottom: 62px;
        padding: 15px 17px 17px;
        border: 2px solid var(--fq-ink);
        background: var(--fq-paper);
        gap: 16px;
    }

    .fq-overview::before{
        content: '';
        position: absolute;
        left: 50%;
        width: 8px;
        height: 48px;
        border-bottom: 7px solid var(--fq-accent);

        background: repeating-linear-gradient(
                to bottom,
                #92918c 0 5px,
                transparent 5px 10px
        ) center top / 2px calc(100% - 7px) no-repeat;

        transform: translateX(-50%);
    }

    .fq-overview::after {
        content: '';
        position: absolute;
        left: 50%;
        width: 8px;
        height: 48px;
        border-bottom: 7px solid var(--fq-accent);
        background: linear-gradient(var(--fq-ink), var(--fq-ink)) center / 2px 100% no-repeat;
        transform: translateX(-50%);
    }

    .fq-overview::before {
        bottom: 100%;
    }
    .fq-feed span{
        display: block;
        font-size: 11px;
    }
    .fq-overview::after {
        top: 100%;
    }

    .fq-overview-header .fq-asset {
        width: 87px;
    }

    .fq-overview-header > span {
        font-size: 11px;
    }

    .fq-stats--overview {
        gap: 8px;
    }

    .fq-stats--overview .fq-stat {
        min-width: 0;
        padding: 12px;
        gap: 4px;
    }

    .fq-stats--overview .fq-stat b {
        font-size: 30px;
    }

    .fq-stats--overview .fq-stat span {
        font-size: 11px;
        line-height: 1.25;
    }

    .fq-revenue {
        gap: 8px;
    }

    .fq-revenue-card {
        min-width: 0;
        padding: 10px;
    }

    .fq-revenue b {
        font-size: clamp(14px, 4.3vw, 19px);
        letter-spacing: -.03em;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .fq-revenue p,
    .fq-revenue small {
        font-size: 10px;
        line-height: 1.3;
    }

    .fq-bars {
        height: 16px;
    }

    .fq-feed > div {
        padding-block: 13px;
        gap: 10px;
    }

    .fq-feed > div .fq-asset {
        width: 17px;
        height: auto;
    }

    .fq-feed p {
        min-width: 0;
        font-size: 11px;
        line-height: 1.35;
    }

    .fq-overview-assistant {
        padding: 15px 12px;
    }

    .fq-overview-assistant > div {
        flex-wrap: wrap;
        gap: 5px 8px;
        margin-bottom: 8px;
    }

    .fq-overview-assistant > div .fq-asset {
        width: 18px;
        height: auto;
    }

    .fq-overview-assistant b {
        font-size: 13px;
    }
    .fq-feed b, .fq-chat b{
        font-size: 13px;

    }
    .fq-overview-assistant span {
        font-size: 11px;
        display: block;
        width: 100%;
    }

    .fq-overview-assistant > p {
        padding: 11px;
        font-size: 11px;
    }

    .fq-diagram-column--modules {
        gap: 7px;
    }

    .fq-diagram-column--modules .fq-diagram-label {
        margin-bottom: 7px;
    }

    .fq-diagram-column--modules .fq-tool-card {
        gap: 13px;
        padding: 12px;
        border: none;
    }

    .fq-diagram-column--modules .fq-tool-card > .fq-asset,
    .fq-diagram-column--modules .fq-card-icon {
        width: 20px;
        max-height: 23px;
    }

    .fq-diagram-column--modules .fq-tool-card h4 {
        font-size: 14px;
        line-height: 1.22;
    }

    .fq-diagram-column--modules .fq-tool-card p {
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.35;
    }

    .fq-site-example {
        margin-top: 7px;
        font-size: 11px;
        line-height: 1.3;
    }

    .fq-site-example .fq-asset {
        width: 15px;
    }

    .fq-eyebrow {
        font-size: 13px;
        font-weight: 700;
    }

    .fq-benefits {
        gap: 13px;
        margin-top: 20px;
    }

    .fq-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }

    .fq-benefit:nth-child(4) h3 {
        max-width: 145px;
    }

    .fq-benefit {
        padding-top: 10px;
        border-top: 2px solid #888;
    }

    .fq-benefit h3 {
        margin-bottom: 5px;
        font-size: 20px;
        line-height: 1.18;
    }

    .fq-benefit p {
        font-size: 14px;
        line-height: 1.34;
    }

    .fq-how-note {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.48;
        letter-spacing: 0;
    }

    .fq-how-note br,
    .fq-ai-subtitle br,
    .fq-about-copy > p br {
        display: none;
    }

    /* Statements section: one rule and one phrase per row. */
    .fq-verbs {
        gap: 17px;
    }

    .fq-verb,
    .fq-verb:first-child {
        padding: 17px 0 0;
        border-top-width: 1px;
    }

    .fq-verb h2 {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .fq-verb p {
        font-size: 15px;
        line-height: 1.4;
    }

    /* Assistant / conversation. */
    .fq-ai-layout {
        gap: 46px;
    }

    .fq-ai-copy {
        gap: 20px;
    }

    .fq-title--ai {
        font-size: clamp(42px, 11vw, 55px);
        line-height: .96;
    }

    .fq-ai-subtitle {
        font-size: 17px;
        font-weight: 500;
        line-height: 1.36;
    }

    .fq-examples {
        gap: 13px;
    }

    .fq-examples li {
        gap: 10px;
        font-size: 15px;
        line-height: 1.4;
        align-items: flex-start;
    }
    .fq-chat-identity small{
        display: none;
    }

    .fq-examples li::before {
        width: 6px;
        height: 6px;
        margin-top: 7px;
    }

    .fq-chat {
        font-size: 12px;
        line-height: 1.4;
        border-radius: 11px;
    }

    .fq-chat-header {
        padding: 13px 14px;
        gap: 7px;
    }

    .fq-chat-identity {
        gap: 7px;
        min-width: 0;
    }

    .fq-chat-identity > div:last-child {
        min-width: 0;
    }

    .fq-chat-identity b {
        font-size: 12px;
    }

    .fq-chat-identity small {
        font-size: 10px;
    }

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

    .fq-status {
        flex: none;
        gap: 4px;
        padding: 4px 6px;
        font-size: 10px;
    }

    .fq-chat-messages {
        gap: 14px;
        padding: 15px 14px;
    }

    .fq-chat-user {
        max-width: 86%;
        padding: 10px 12px;
        border-radius: 9px;
    }

    .fq-chat-response {
        gap: 9px;
    }

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

    .fq-chat-reply {
        flex: 1;
        width: auto;
        min-width: 0;
        padding: 11px 12px;
        gap: 10px;
        border-radius: 9px;
    }

    .fq-chat-document {
        min-width: 0;
        padding: 10px;
        gap: 9px;
    }

    .fq-chat-document > div {
        min-width: 0;
    }

    .fq-chat-document b {
        font-size: 11px;
    }

    .fq-chat-document small {
        font-size: 10px;
    }

    .fq-chat-actions {
        flex-wrap: wrap;
        gap: 7px;
    }

    .fq-chat-actions > span {
        padding: 7px 8px;
        font-size: 10px;
    }

    .fq-chat-compose {
        gap: 8px;
        padding: 12px;
    }

    .fq-chat-compose > span {
        min-width: 0;
        padding: 11px;
        font-size: 11px;
    }

    .fq-chat-compose > div {
        padding: 8px;
    }

    /* About: company logo belongs after the commitments on the mobile frame. */
    .fq-about {
        display: flex;
        flex-direction: column;
        gap: 0;
        /*padding-top: 72px;*/
        /*padding-bottom: 89px;*/
    }

    .fq-about-copy {
        display: contents;
    }

    .fq-about-copy > .fq-title {
        order: 1;
        margin-bottom: 23px;
    }

    .fq-about-copy > p {
        order: 2;
        margin-bottom: 30px;
        font-size: 15px;
        line-height: 1.42;
    }

    .fq-commitments {
        order: 3;
    }

    .fq-pixlab {
        order: 4;
        margin-top: 35px;
    }

    .fq-pixlab .fq-asset {
        width: 190px;
        height: auto;
    }

    .fq-commitment {
        padding: 20px 0 20px;
        border-top: 1px solid #9a9a96;
    }
    /* Theme-specific customization retained. */
    #seopress-js-module-seo-metabox {
        display: none;
    }
    .fq-commitment h3 {
        position: relative;
        margin-bottom: 3px;
        padding-left: 22px;
        font-size: 19px;
    }

    .fq-commitment h3::before {
        content: '';
        position: absolute;
        top: .43em;
        left: 0;
        width: 8px;
        height: 8px;
        background: var(--fq-accent);
    }

    .fq-commitment p {
        font-size: 14px;
        line-height: 1.36;
        padding-left: 22px;
    }

    .fq-cta h2 {
        margin-bottom: 28px;
        font-size: clamp(43px, 11vw, 57px);
        line-height: .96;
    }

    .fq-cta-action {
        gap: 22px;
    }

    .fq-cta-action .fq-button {
        width: 100%;
        justify-content: center;
    }

    .fq-cta-action p {
        width: auto;
        font-size: 15px;
        line-height: 1.4;
    }

    .fq-footer {
        align-items: stretch;
        padding-top: 45px;
        padding-bottom: 25px;
        gap: 30px;
    }

    .fq-footer .fq-nav-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;
        font-size: 14px;
    }

    .fq-footer-logo .fq-asset {
        width: min(100%, 360px);
        height: auto;
    }

    .fq-footer-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        font-size: 11px;
    }

    .fq-legal-links {
        flex-wrap: wrap;
    }

    /* Other theme templates: contacts, forms, dialog. */
    .fq-page > h1 {
        margin-bottom: 32px;
    }

    .fq-prose h2 {
        font-size: 29px;
    }

    .fq-prose h3 {
        font-size: 23px;
    }

    .fq-contact-page {
        padding-block: 20px var(--fq-gutter);
        gap: 24px;
    }

    .fq-contact-page .fq-title {
        font-size: 46px;
    }

    .fq-contact-content > p {
        font-size: 16px;
    }

    .fq-form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .fq-field--full {
        grid-column: auto;
    }

    .fq-field :is(input, select, textarea) {
        min-height: 48px;
        font-size: 16px;
        padding: 5px 10px;
    }

    .fq-contact .wpcf7 {
        margin-block-start: 23px;
        padding-block-start: 23px;
    }

    .fq-dialog {
        width: calc(100% - 24px);
        max-height: min(94dvh, 980px);
    }

    .fq-dialog-panel {
        padding: 26px 20px;
        gap: 20px;
    }

    .fq-dialog-close {
        top: 8px;
        width: 40px;
        height: 40px;
        margin: 8px 8px -48px 0;
    }

    .fq-dialog .fq-title {
        padding-right: 32px;
        font-size: clamp(36px, 9vw, 54px);
    }
}

/* --------------------------------------------------------------------------
   Reference phone (390px): tighten typography and align the visual sections
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
    .fq-hero-title {
        font-size: clamp(36px, 10.75vw, 43px);
    }

    .fq-overview-header > span {
        font-size: 10px;
    }

    .fq-diagram-column--tools .fq-tool-card h4 {
        font-size: 11px;
    }

    .fq-diagram-column--modules .fq-tool-card h4 {
        font-size: 14px;
    }

    .fq-diagram-column--modules .fq-tool-card p {
        font-size: 11px;
    }

    .fq-cta h2 {
        font-size: clamp(42px, 11vw, 49px);
    }
}

/* 320–359px: no squeezed labels, no horizontal overflow. */
@media (max-width: 359px) {
    :root {
        --fq-gutter: 16px;
    }

    .fq-hero-title {
        font-size: 34px;
        letter-spacing: -.02em;
    }

    .fq-cockpit-main {
        padding: 14px;
        gap: 12px;
    }

    .fq-cockpit-greeting {
        font-size: 23px;
    }

    .fq-stats--hero .fq-stat {
        padding: 9px 6px;
    }

    .fq-stats--hero .fq-stat b {
        font-size: 25px;
    }

    .fq-stats--hero .fq-stat span {
        font-size: 9px;
    }

    .fq-cockpit-bubble {
        font-size: 10px;
    }

    .fq-overview {
        padding: 11px;
    }

    .fq-revenue b {
        font-size: 13px;
    }

    .fq-diagram-column--tools .fq-tool-card h4 {
        font-size: 9px;
    }

    .fq-diagram-column--tools .fq-tool-card {
        gap: 4px;
        padding-inline: 4px;
    }

    .fq-benefit h3 {
        font-size: 18px;
    }

    .fq-chat-header .fq-status {
        display: none;
    }

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

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .fq-menu-icon,
    .fq-menu-icon::before,
    .fq-menu-icon::after,
    .fq-menu-toggle,
    .fq-header .fq-nav {
        transition: none;
    }
}