/**
 * =========================================================
 * 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: 'Poppins';
    --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;
    text-transform: uppercase;
    padding: 0;
    margin-bottom: clamp(18px, 2vw, 26px);
    font-size: 14px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 2px;
}

.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;
    font-family: 'Montserrat';
}

.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 {
    text-transform: uppercase;
    color: var(--iq-blue-light);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 2px;
}

.iq-agents__heading {
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.12;
    font-weight: 700;
    color: var(--iq-text) !important;
    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-light);
    border-color: var(--iq-blue-light);
    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-light);
    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-light);
    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 {
    text-transform: uppercase;
    color: var(--iq-blue-light);
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 2px;
}

.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%;
    }
}