/**
 * =========================================================
 * 2IQ Elementor Widgets — shared stylesheet
 * ---------------------------------------------------------
 * One file for all five widgets, same as inject-solutions.css
 * being the single stylesheet for the inject_solutions
 * shortcode. Colour values below match the 2cloudnine design
 * system per the "2IQ feature page" developer handoff.
 * =========================================================
 */

:root {
    --iq-blue: #1978C8;
    --iq-blue-light: #2491EB;
    --iq-navy: #0E3B63;
    --iq-mint: #A1FCDF;
    --iq-teal: #1FBA87;
    --iq-gray-bg: #F5F7FA;
    --iq-border: #EDF0F4;
    --iq-border-2: #E6EBF1;
    --iq-input-border: #DEE3EA;
    --iq-text: #333333;
    --iq-text-muted: #4A5260;
    --iq-text-faint: #9AA4B2;
    --iq-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Shared "continuous panel" system for the Agent Detail, FAQ and
       CTA Form widgets. Per the design, these are three separate
       Elementor widgets meant to be stacked directly on top of one
       another (inside one shared Section/Container that supplies the
       Blue-600 background across all three) so together they read as
       ONE white panel floating on blue, divided only by thin hairline
       rules — not as three separate floating cards. Each widget's
       white inner wrapper shares --iq-panel-width and is joined to
       its neighbour with a 1px --iq-panel-join rule; only the very
       first widget in the stack rounds its TOP corners and only the
       very last rounds its BOTTOM corners (set per-widget below). */
    --iq-panel-width: 1300px;
    --iq-panel-radius: clamp(18px, 2.4vw, 28px);
    --iq-panel-join: #CFDDEC;
}

.iq-hero,
.iq-agents,
.iq-agent-detail,
.iq-faq,
.iq-cta {
    font-family: var(--iq-font);
    box-sizing: border-box;
}

.iq-hero *,
.iq-agents *,
.iq-agent-detail *,
.iq-faq *,
.iq-cta * {
    box-sizing: border-box;
}

/**
 * Guard against the browser's built-in `[hidden]{display:none}`
 * user-agent rule losing to an author rule that sets an explicit
 * `display` (e.g. `display:grid` on a mockup row, `display:inline-block`
 * on a tag chip, `display:flex`/`block` on a whole section). Origin
 * precedence means a same-specificity author rule always beats the
 * UA stylesheet, so without this, `element.hidden = true` (used for
 * search filtering and tag/footer toggling) would not actually hide
 * the element. `!important` here beats any non-important author
 * `display` declaration regardless of selector specificity.
 */
[hidden] {
    display: none !important;
}

/* =========================================================
   1. HERO
   ========================================================= */

.iq-hero {
    position: relative;
    overflow: hidden;
    background: var(--iq-blue);
}

.iq-hero__waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 260px;
    pointer-events: none;
}

.iq-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(52px, 7vw, 96px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.iq-hero__eyebrow {
    display: inline-block;
    background: none;
    border: 0;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 0;
    margin-bottom: clamp(18px, 2vw, 26px);
}

.iq-hero__heading {
    position: relative;
    display: inline-block;
    margin: 0 0 clamp(28px, 3.4vw, 40px);
    font-size: clamp(72px, 12vw, 164px);
    line-height: .9;
    font-weight: 800;
    letter-spacing: -.05em;
    color: #fff;
}

.iq-hero__heading-shadow {
    position: absolute;
    left: 0;
    right: 0;
    top: 0.055em;
    color: var(--iq-navy);
    z-index: 0;
}

.iq-hero__heading-live {
    position: relative;
    z-index: 1;
}

.iq-hero__heading-accent {
    color: var(--iq-mint);
}

.iq-hero__heading-white {
    color: #fff;
}

.iq-hero__description {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 clamp(28px, 3.4vw, 38px);
    max-width: 720px;
}

.iq-hero__description p {
    font-size: clamp(17px, 1.5vw, 19px);
    line-height: 1.6;
    color: #fff;
    margin: 0;
}

.iq-hero__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    border-radius: 999px;
    padding: 14px 26px;
    background: var(--iq-mint);
    color: var(--iq-blue-light);
    text-decoration: none;
    transition: background-color 160ms cubic-bezier(.2, 0, 0, 1);
}

.iq-hero__button:hover {
    background-color: rgb(108, 239, 194) !important;
    color: var(--iq-blue-light);
}

/* =========================================================
   2. AGENTS FLEET
   ========================================================= */

.iq-agents {
    background: var(--iq-gray-bg);
    border-bottom: 1px solid var(--iq-border);
    padding: clamp(56px, 7vw, 104px) 0;
}

.iq-agents__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}

.iq-agents__head {
    max-width: 720px;
    margin: 0 auto clamp(36px, 4vw, 52px);
    text-align: center;
}

.iq-agents__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iq-blue-light);
    margin-bottom: 16px;
}

.iq-agents__heading {
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.12;
    font-weight: 700;
    color: var(--iq-blue-light);
    margin: 0 0 16px;
    letter-spacing: -.02em;
}

.iq-agents__description {
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.65;
    color: var(--iq-text-muted);
    margin: 0;
}

.iq-agents__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(24px, 2.4vw, 32px);
    align-items: start;
}

/* mockup */

.iq-agents__mockup-wrap {
    display: flex;
    justify-content: center;
}

.iq-agents__mockup {
    background: #E3E9F0;
    border: 1px solid #D6DEE8;
    border-radius: 22px;
    padding: 9px;
    box-shadow: 0 26px 56px rgba(16, 24, 40, .18);
    max-width: 378px;
    width: 100%;
}

.iq-agents__mockup-frame {
    background: #fff;
    border: 1px solid #E6EBF1;
    border-radius: 14px;
    max-width: 360px;
    width: 100%;
    overflow: hidden;
}

.iq-agents__mockup-topbar {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--iq-border);
    background: linear-gradient(90deg, #F0FFFB, #fff);
}

.iq-agents__mockup-topbar img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
}

.iq-agents__mockup-brand {
    font-size: 16px;
    font-weight: 700;
    color: var(--iq-text);
    letter-spacing: -.01em;
}

.iq-agents__mockup-search-row {
    padding: 14px 14px 6px;
}

.iq-agents__mockup-search {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--iq-input-border);
    border-radius: 8px;
    padding: 9px 12px;
    background: #FAFBFC;
}

.iq-agents__mockup-search-input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--iq-text);
    background: transparent;
    border: 0;
    outline: none;
    padding: 0;
}

.iq-agents__mockup-search-input::placeholder {
    color: var(--iq-text-faint);
}

.iq-agents__mockup-list-wrap {
    padding: 12px 14px 4px;
}

.iq-agents__mockup-list-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iq-blue-light);
    padding: 4px 2px 10px;
}

.iq-agents__mockup-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 8px;
}

.iq-agents__mockup-empty {
    font-size: 13px;
    color: var(--iq-text-faint);
    padding: 16px 14px;
    text-align: center;
}

.iq-agents__mockup-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color 120ms;
}

.iq-agents__mockup-row:not(.is-active):hover,
.iq-agents__mockup-row:not(.is-active):focus-visible {
    background: rgb(245, 247, 250) !important;
}

.iq-agents__mockup-row.is-active {
    background: #EBF5FE;
    border-left-color: var(--iq-blue-light);
}

.iq-agents__mockup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C7D0DB;
}

.iq-agents__mockup-row.is-active .iq-agents__mockup-dot {
    background: var(--iq-blue-light);
}

.iq-agents__mockup-row-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--iq-text);
}

.iq-agents__mockup-row-desc {
    font-size: 12px;
    color: var(--iq-text-faint);
    margin-top: 2px;
}

/* spotlight card */

.iq-agents__spotlight-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.iq-agents__spotlight-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--iq-blue);
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
}

.iq-agents__spotlight-badge-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--iq-mint);
}

.iq-agents__spotlight-connector {
    display: block;
    width: 0;
    height: 16px;
    margin: 2px 0 2px 19px;
    border-left: 2px dotted #A6D0F8;
}

.iq-agents__spotlight-card {
    display: block;
    background: #fff;
    border: 2px solid var(--iq-mint);
    border-radius: 14px;
    padding: clamp(22px, 2.6vw, 28px);
    color: var(--iq-text) !important;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(161, 252, 223, .5);
    transition: box-shadow 160ms cubic-bezier(.2, 0, 0, 1);
}

.iq-agents__spotlight-card:hover,
.iq-agents__spotlight-card:focus-visible {
    box-shadow: rgba(161, 252, 223, .75) 0px 16px 36px !important;
    color: var(--iq-text) !important;
}

.iq-agents__spotlight-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.iq-agents__spotlight-name {
    font-size: clamp(19px, 1.9vw, 22px);
    font-weight: 700;
    color: var(--iq-text) !important;
    letter-spacing: -.01em;
}

.iq-agents__spotlight-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--iq-text) !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--iq-mint);
    border-radius: 999px;
    padding: 4px 9px;
}

.iq-agents__spotlight-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.iq-agents__spotlight-feature {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--iq-border);
}

.iq-agents__spotlight-feature:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.iq-agents__spotlight-feature-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iq-text-muted) !important;
    margin-bottom: 6px;
}

/* First capability listed is the accent one (matches the design's
   "Read-only" badge-like first item); any items after it read as
   plain boundaries/notes in muted grey. */
.iq-agents__spotlight-feature:first-child .iq-agents__spotlight-feature-title {
    color: var(--iq-blue-light) !important;
}

.iq-agents__spotlight-feature-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--iq-text-muted) !important;
    margin: 0;
}

.iq-agents__spotlight-footer {
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--iq-blue-light) !important;
}

/* =========================================================
   3. AGENT DETAIL / USE CASES
   ========================================================= */

.iq-agent-detail {
    /* No background here on purpose — this section is meant to be
       combined with the FAQ and CTA Form widgets inside one shared
       container (e.g. an Elementor Section/Container), which supplies
       the Blue-600 background across all three, joined edge to edge. */
    padding: clamp(32px, 4vw, 56px) clamp(14px, 3vw, 40px) 0;
}

.iq-agent-detail__inner {
    max-width: var(--iq-panel-width);
    margin: 0 auto clamp(24px, 3vw, 36px);
    padding: 0 clamp(4px, 1vw, 12px);
}

.iq-agent-detail__header {
    text-align: left;
    color: #fff;
}

.iq-agent-detail__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 14px;
}

.iq-agent-detail__breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.iq-agent-detail__breadcrumb a:hover {
    color: #fff;
}

.iq-agent-detail__breadcrumb svg {
    opacity: .7;
}

.iq-agent-detail__heading {
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -.02em;
    max-width: 900px;
}

.iq-agent-detail__heading-highlight {
    color: #fff;
    display: block;
}

.iq-agent-detail__heading-rest {
    display: block;
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.3;
    margin-top: 10px;
    color: #fff;
}

/* The use-cases panel: the white, top-rounded card that the Blue-600
   #agent band sits on. It joins directly to the FAQ panel below with
   no gap (see .iq-faq / .iq-cta), so together they read as one panel. */
.iq-usecases-panel {
    max-width: var(--iq-panel-width);
    margin: 0 auto;
    background: #fff;
    border-radius: var(--iq-panel-radius) var(--iq-panel-radius) 0 0;
    padding: clamp(24px, 3.2vw, 44px);
}

.iq-usecases {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 3vw, 44px);
    align-items: flex-start;
}

.iq-usecases__rail {
    flex: 0 0 236px;
    min-width: 0;
}

.iq-usecases__rail-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--iq-blue);
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--iq-mint);
}

.iq-usecases__nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.iq-usecases__nav .iq-usecases__tab {
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 9px;
    padding: 11px 14px;
    min-height: 44px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: block;
    background-color: #fff;
    border: 1px solid #E3E9F0;
    color: var(--iq-text-muted);
    transition: background 160ms cubic-bezier(.2, 0, 0, 1), border-color 160ms cubic-bezier(.2, 0, 0, 1), color 160ms cubic-bezier(.2, 0, 0, 1);
}

.iq-usecases__nav .iq-usecases__tab.is-active {
    background-color: var(--iq-blue);
    border-color: var(--iq-blue);
    color: #fff;
}

.iq-usecases__pane {
    flex: 1 1 520px;
    min-width: 0;
    margin-bottom: clamp(24px, 3vw, 36px);
}

.iq-usecases__panel {
    display: none;
}

.iq-usecases__panel.is-active {
    display: block;
}

.iq-usecases__heading {
    font-size: clamp(21px, 2.4vw, 30px);
    line-height: 1.16;
    font-weight: 700;
    color: var(--iq-text);
    margin: 0 0 18px;
    letter-spacing: -.018em;
}

.iq-usecases__list-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iq-text-faint);
    margin-bottom: 12px;
}

.iq-usecases__list {
    list-style: none;
    margin: 0 0 clamp(28px, 3.2vw, 40px);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iq-usecases__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    align-items: start;
    font-size: clamp(14px, 1.35vw, 15.5px);
    line-height: 1.55;
    color: var(--iq-text-muted);
}

.iq-usecases__list svg {
    flex: 0 0 auto;
    margin-top: 4px;
}

.iq-usecases__seeit {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(18px, 2.2vw, 26px);
}

.iq-usecases__seeit-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iq-text-faint);
    flex: 0 0 auto;
}

.iq-usecases__seeit-rule {
    flex: 1 1 0;
    height: 1px;
    background: var(--iq-border);
    display: block;
}

.iq-usecases__examples {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 4vw, 48px);
}

.iq-usecases__example-caption {
    margin: 0 0 14px;
    font-size: clamp(13.5px, 1.3vw, 15px);
    line-height: 1.6;
    color: var(--iq-text-muted);
    max-width: 720px;
}

.iq-usecases__example-frame {
    border: 1px solid #E6EAF0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 32px rgba(23, 43, 77, .07);
    max-width: 786px;
}

.iq-usecases__example-frame-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 15px 12px;
}

.iq-usecases__example-frame-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}

.iq-usecases__example-frame-dot:nth-child(1) { background: #FF5F57; }
.iq-usecases__example-frame-dot:nth-child(2) { background: #FEBC2E; }
.iq-usecases__example-frame-dot:nth-child(3) { background: #28C840; }

.iq-usecases__example-shot {
    width: 100%;
    height: auto;
    display: block;
    border-top: 1px solid var(--iq-border);
}

/* =========================================================
   4. FAQ ACCORDION
   ========================================================= */

.iq-faq {
    /* Part of the same continuous Blue-600 panel system as Agent
       Detail and CTA Form above/below it — see --iq-panel-* tokens. */
    background: var(--iq-blue);
    padding: 0 clamp(14px, 3vw, 40px);
}

.iq-faq__inner {
    max-width: var(--iq-panel-width);
    margin: 0 auto;
    background: #fff;
    border-top: 1px solid var(--iq-panel-join);
    padding: clamp(30px, 4vw, 52px) clamp(20px, 4vw, 44px) clamp(24px, 3vw, 44px);
}

.iq-faq__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(26px, 3vw, 38px);
}

.iq-faq__heading {
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.12;
    font-weight: 700;
    color: var(--iq-blue-light);
    margin: 0;
    letter-spacing: -.018em;
}

.iq-faq__heading-highlight {
    color: inherit;
}

.iq-faq__list {
    max-width: 820px;
    margin: 0 auto;
    border-top: 1px solid var(--iq-border);
}

.iq-faq__item {
    border-bottom: 1px solid var(--iq-border);
    background: transparent !important;
}

.iq-faq__question {
    width: 100% !important;
    max-width: none;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 17px 2px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: clamp(15px, 1.4vw, 16.5px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--iq-text) !important;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    white-space: normal;
}

.iq-faq__question > span:first-child {
    color: inherit;
    background: none;
}

.iq-faq__icon {
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 400;
    color: var(--iq-blue-light);
    line-height: 1;
    background: none;
    transition: transform 200ms;
}

.iq-faq__item.is-open .iq-faq__icon {
    transform: rotate(45deg);
}

.iq-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    background: transparent;
    transition: grid-template-rows 220ms ease;
}

.iq-faq__item.is-open .iq-faq__answer {
    grid-template-rows: 1fr;
}

.iq-faq__answer-inner {
    overflow: hidden;
    background: transparent;
}

.iq-faq__answer p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--iq-text-muted);
    margin: 0 0 20px;
    background: none;
}

/* =========================================================
   5. CTA FORM
   ========================================================= */

.iq-cta {
    /* Last panel in the continuous Blue-600 stack — rounds its
       bottom corners (see .iq-cta__inner) where Agent Detail rounds
       the top and FAQ stays flat between the two. */
    background: var(--iq-blue);
    padding: 0 clamp(14px, 3vw, 40px) clamp(48px, 6vw, 84px);
}

.iq-cta__inner {
    max-width: var(--iq-panel-width);
    margin: 0 auto;
    background: #fff;
    border-top: 1px solid var(--iq-panel-join);
    border-radius: 0 0 var(--iq-panel-radius) var(--iq-panel-radius);
    padding: clamp(28px, 3.5vw, 48px) clamp(20px, 4vw, 44px) clamp(32px, 4vw, 52px);
}

.iq-cta__head {
    max-width: 540px;
    text-align: center;
    margin: 0 auto clamp(20px, 2.4vw, 28px);
}

.iq-cta__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iq-blue-light);
    margin-bottom: 12px;
}

.iq-cta__heading {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 700;
    color: var(--iq-text);
    margin: 0;
    letter-spacing: -.02em;
}

/* The card floating on the flat white panel that holds the actual
   form fields — narrower than the panel itself, bordered and
   shadowed so it reads as its own control, per the design. */
.iq-cta__card {
    max-width: 540px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--iq-border);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .09);
    padding: clamp(24px, 3vw, 34px);
}

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

/**
 * Field grid for the admin-configurable "Form Fields" repeater.
 * Same intrinsic-wrap approach as the use-case rail (see the
 * RESPONSIVE comment near the end of this file): a "half width"
 * field gets a fixed flex-basis, so two of them sit side by side
 * whenever there's room and drop to their own line once there
 * isn't — no media query, no fixed count of columns, so it still
 * works with however many fields an admin adds or removes.
 */
.iq-cta__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 16px;
}

.iq-cta__field {
    flex: 1 1 100%;
    min-width: 0;
}

.iq-cta__field--half {
    flex: 1 1 210px;
}

.iq-cta__field--checkbox {
    flex-basis: 100%;
}

.iq-cta__form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.iq-cta__form label > span:first-child {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--iq-text-muted);
}

.iq-cta__form input[type="text"],
.iq-cta__form input[type="email"],
.iq-cta__form input[type="tel"],
.iq-cta__form select,
.iq-cta__form textarea {
    font-family: inherit;
    font-size: 14px;
    color: var(--iq-text);
    padding: 11px 13px;
    border: 1px solid var(--iq-input-border);
    border-radius: 8px;
    background: #fff;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
}

.iq-cta__form textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.5;
}

.iq-cta__form input[type="text"]:focus,
.iq-cta__form input[type="email"]:focus,
.iq-cta__form input[type="tel"]:focus,
.iq-cta__form select:focus,
.iq-cta__form textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(36, 145, 235, .35);
    border-color: var(--iq-blue-light);
}

.iq-cta__select-wrap {
    position: relative;
}

.iq-cta__select-wrap select {
    appearance: none;
    padding-right: 38px;
    cursor: pointer;
}

.iq-cta__select-wrap svg {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.iq-cta__checkbox {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px !important;
}

.iq-cta__checkbox input {
    margin-top: 3px;
}

.iq-cta__checkbox span {
    font-size: 13px;
    color: var(--iq-text-muted);
    line-height: 1.5;
}

.iq-cta__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    border: 0;
    border-radius: 999px;
    padding: 14px 26px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--iq-mint);
    color: var(--iq-blue-light);
    cursor: pointer;
    transition: transform 160ms cubic-bezier(.2, 0, 0, 1);
}

.iq-cta__submit:hover {
    transform: translateY(-1px);
}

.iq-cta__disclaimer {
    font-size: 12px;
    color: #6C7684;
    font-style: italic;
    text-align: center;
    margin: 4px 0 0;
}

.iq-cta__disclaimer a {
    color: var(--iq-blue-light);
}

.iq-cta__success {
    text-align: center;
    font-size: 15px;
    color: var(--iq-teal);
    font-weight: 600;
    padding: 24px 0;
}

.iq-cta__error {
    font-size: 13.5px;
    color: #C0392B;
    background: #FCEDEB;
    border: 1px solid #F3C6BF;
    border-radius: 8px;
    padding: 11px 14px;
    margin: 0 0 16px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/**
 * Both reflow points below are already intrinsic — driven by the
 * base layout's own flex/grid sizing math, not by these rules:
 *
 *   - `.iq-agents__body` is `grid-template-columns:
 *     repeat(auto-fit, minmax(min(100%, 300px), 1fr))`, so the
 *     mockup card and spotlight card wrap to their own stacked
 *     row on their own once the row is too narrow for both
 *     300px-minimum columns — no breakpoint needed.
 *   - `.iq-usecases__rail` (`flex: 0 0 236px`) and
 *     `.iq-usecases__pane` (`flex: 1 1 520px`) wrap the same way:
 *     once the two hypothetical sizes (236 + 520 + gap) exceed
 *     the container, the pane naturally drops to its own line
 *     below the rail.
 *
 * The one rule still needed here is cosmetic only: once the rail
 * is alone on its line, its own `flex: 0 0 236px` keeps it at a
 * fixed 236px rather than spanning the white card's full width,
 * so it's widened to match — the rail's own vertical button list
 * (`.iq-usecases__nav` stays `flex-direction: column`, matching
 * the source design's own stacked-list mobile layout) needs no
 * other change.
 */
@media (max-width: 800px) {
    .iq-usecases__rail {
        flex-basis: 100%;
        width: 100%;
    }
}