/* ==========================================================================
   AI Containment page

   Loaded after css/msp-page/style.css (hpb-*), which provides the tokens, shell,
   headings, buttons and section layout; this file only holds what is specific
   to this page.

   01. Hero
   02. Overview
   03. Challenges
   04. Solution
   05. Practical
   06. Capabilities
   07. Benefits (the cards of 03, no rules of its own)
   08. Demo
   09. Resources
   10. CTA
   ========================================================================== */

/* Smooth scroll for the in-page anchors */
@media (prefers-reduced-motion: no-preference) {
    html:has(.hpb-page) {
        scroll-behavior: smooth;
    }
}

/* ==========================================================================
   01. Hero
   Same grid as the MSP hero. The radar is an inline SVG animated by
   js/ai-containment-page/hero-radar.js; the panel under it shows the selected
   pillar and the containment switch.
   ========================================================================== */
.aic-hero__grid {
    align-items: center;
}

.aic-hero__content {
    max-width: 49.25rem;
}

.aic-hero__tagline {
    color: var(--hpb-copy);
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: clamp(1.25rem, 1.458vw, 1.75rem);
    font-weight: 500;
    line-height: 1.21;
    margin-bottom: 1.5rem;
}

.aic-hero .hpb-lead {
    max-width: none;
}

.aic-hero .hpb-lead+.hpb-lead {
    margin-top: 1.364em;
}

/* The download icon is white; on the white hover background it has to turn dark. */
.aic-hero .hpb-button--secondary:hover>img {
    filter: invert(1);
}

.aic-hero__visual {
    display: flex;
    flex-direction: column;
    gap: 2.4375rem;
    justify-self: center;
    max-width: 39.0625rem;
    width: 100%;
}

.aic-stage {
    isolation: isolate;
    margin-inline: auto;
    max-width: 35.875rem;
    position: relative;
    width: 100%;
}

.aic-stage::before {
    background: radial-gradient(circle, rgb(0 101 254 / 30%) 0%, rgb(0 101 254 / 0%) 62%);
    content: "";
    inset: -20%;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.aic-radar {
    -webkit-tap-highlight-color: transparent;
    display: block;
    height: auto;
    overflow: visible;
    width: 100%;
}

.aic-radar [data-layer] {
    transition: opacity .4s ease;
}

.aic-ring {
    fill: none;
    transition: opacity .4s, stroke .4s, stroke-width .4s;
}

.aic-ring--spin {
    animation: aic-spin 120s linear infinite;
    transform-origin: 260px 260px;
}

.aic-ring.is-zap {
    stroke: #fff !important;
    stroke-width: 3 !important;
    transition: none;
}

.aic-ring.is-sel {
    filter: url(#aic-ring-glow);
    stroke: #9cc2ff;
    stroke-width: 2.5;
}

.aic-ring--soon.is-sel {
    stroke: #c9b0ff;
    stroke-dasharray: 5 6;
}

.aic-guides line {
    fill: none;
    stroke: rgb(255 255 255 / 22%);
    stroke-dasharray: 2 5;
    stroke-width: 1.2;
}

.aic-ring-hit {
    cursor: pointer;
    fill: none;
    pointer-events: stroke;
    stroke: transparent;
    stroke-width: 24;
}

.aic-pillar {
    cursor: pointer;
    outline: none;
}

.aic-pillar rect {
    fill: #001433;
    stroke: var(--hpb-blue-light);
    stroke-width: 1;
    transition: fill .25s, stroke .25s, stroke-width .25s;
}

.aic-pillar:hover rect {
    stroke: #fff;
}

.aic-pillar:focus-visible rect {
    stroke: #fff;
    stroke-width: 2.5;
}

.aic-pillar[aria-pressed="true"] rect {
    fill: #0065fe;
    stroke: #fff;
    stroke-width: 1.5;
}

.aic-pillar--soon rect {
    fill: #211233;
    stroke: #d1acff;
    stroke-dasharray: 4 4;
}

.aic-pillar--soon[aria-pressed="true"] rect {
    fill: #a459ff;
    stroke: #fff;
    stroke-dasharray: none;
}

[data-aic-radar][data-sel] [data-layer]:not(.is-sel) {
    opacity: .22;
}

[data-aic-radar][data-sel] .aic-pillar:not(.is-sel) {
    opacity: .55;
}

[data-aic-radar][data-sel] .aic-arc-fx:not(.is-sel),
[data-aic-radar][data-sel] .aic-ring-fx:not(.is-sel) {
    visibility: hidden;
}

[data-aic-radar][data-sel] .aic-ring.is-zap:not(.is-sel) {
    stroke: rgb(127 176 255 / 50%) !important;
    stroke-width: 1.5 !important;
}

.is-off .aic-ring {
    opacity: .16;
    stroke-dasharray: 2 7;
}

.is-off .aic-ring-fill {
    opacity: .2;
}

.is-off .aic-pillar {
    opacity: .4;
}

.is-off [data-aic="sweep"] {
    opacity: 0;
}

.aic-core-glow {
    animation: aic-breathe 3.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.aic-pt-dot {
    fill: #fff;
    filter: url(#aic-dot-glow);
}

.aic-pt-tail {
    stroke: rgb(156 194 255 / 60%);
    stroke-linecap: round;
    stroke-width: 2;
}

.is-off .aic-pt-dot {
    fill: #ffd2b3;
}

.is-off .aic-pt-tail {
    stroke: rgb(254 108 0 / 65%);
}

.aic-arc-fx {
    animation: aic-arc .75s ease-out forwards;
    fill: none;
    filter: url(#aic-ring-glow);
    stroke: #fff;
    stroke-linecap: round;
    stroke-width: 3.5;
}

.aic-ring-fx {
    animation: aic-ring-out .8s ease-out forwards;
    fill: none;
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
}

.aic-chip {
    cursor: pointer;
}

.aic-chip__bg {
    fill: #262b33;
    stroke: var(--hpb-copy);
    transition: fill .5s, stroke .5s;
}

.aic-chip.is-struck .aic-chip__bg {
    fill: rgb(254 108 0 / 30%);
    stroke: #fe6c00;
    transition: none;
}

.aic-chip--shadow .aic-chip__bg {
    fill: #211233;
    stroke: #d1acff;
    stroke-dasharray: 3 4;
}

.aic-chip--shadow.is-found .aic-chip__bg {
    stroke-dasharray: none;
}

@keyframes aic-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes aic-breathe {
    50% {
        opacity: .75;
        transform: scale(1.18);
    }
}

@keyframes aic-arc {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        stroke-width: 1;
    }
}

@keyframes aic-ring-out {
    from {
        opacity: 1;
        transform: scale(.2);
    }

    to {
        opacity: 0;
        transform: scale(2);
    }
}

.aic-panel {
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5625rem;
    transition: box-shadow .5s ease;
}

.aic-panel:hover {
    box-shadow: 0 0 20px 8px #408bfe8c;
}

.aic-panel p {
    margin-bottom: 0;
}

.aic-panel__status {
    align-items: center;
    border-bottom: 1px solid var(--hpb-blue-light);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    justify-content: space-between;
    padding-bottom: 1rem;
}

.aic-panel__switch {
    align-items: center;
    background: none;
    border: 0;
    border-radius: .75rem;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    gap: .625rem;
    line-height: 1.364;
    padding: 0;
}

.aic-panel__switch:focus-visible {
    outline: 3px solid var(--hpb-blue-light);
    outline-offset: 4px;
}

.aic-panel__track {
    background: var(--hpb-blue);
    border-radius: .625rem;
    flex: none;
    height: 1.25rem;
    position: relative;
    transition: background .2s;
    width: 2.3125rem;
}

.aic-panel__track::after {
    background: #fff;
    border-radius: 50%;
    content: "";
    height: 1rem;
    left: 1.1875rem;
    position: absolute;
    top: .125rem;
    transition: left .2s;
    width: 1rem;
}

.aic-panel__switch[aria-checked="false"] .aic-panel__track {
    background: #626c99;
}

.aic-panel__switch[aria-checked="false"] .aic-panel__track::after {
    left: .125rem;
}

.aic-panel__counters {
    align-items: center;
    display: flex;
    gap: 1.5rem;
}

.aic-panel__counters p {
    color: var(--hpb-copy);
    font-size: .875rem;
    line-height: 1.364;
}

.aic-panel__counters strong {
    color: #fff;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    margin-right: .625rem;
}

.aic-panel__counter--escaped strong {
    color: #fe6c00;
}

/* A fixed minimum height keeps the card from jumping when the text changes. */
.aic-panel__info {
    display: flex;
    flex-direction: column;
    gap: .3125rem;
    min-height: 8.25rem;
}

.aic-panel__info.is-swapping {
    animation: aic-swap .35s ease-out;
}

@keyframes aic-swap {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.aic-panel__kicker {
    color: var(--hpb-blue-light);
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.is-off .aic-panel__kicker {
    color: #ffb27a;
}

.aic-panel__info.is-soon .aic-panel__kicker {
    color: #c9b0ff;
}

.aic-panel__title {
    color: #fff;
    font-family: "Inter", "Nunito Sans", Arial, sans-serif;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.21;
    margin-bottom: .5625rem;
}

.aic-panel__copy {
    color: var(--hpb-copy);
    font-size: .875rem;
    line-height: 1.364;
}

.aic-panel__note {
    color: var(--hpb-pink);
    font-size: .8125rem;
    line-height: 1.4;
    margin-top: .375rem;
}

@media (prefers-reduced-motion: reduce) {

    .aic-core-glow,
    .aic-ring--spin,
    .aic-panel__info.is-swapping {
        animation: none;
    }
}

/* Hero responsive: the grid itself collapses with the MSP rules (1024px). */
@media (max-width: 1024px) {
    .aic-hero__visual {
        max-width: 39.0625rem;
    }
}

@media (max-width: 640px) {
    .aic-hero__tagline {
        margin-bottom: 1rem;
    }

    .aic-hero__visual {
        gap: 1.5rem;
    }

    .aic-panel {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   02. Overview
   ========================================================================== */
.aic-overview__grid {
    align-items: start;
    display: grid;
    gap: 4.5rem;
    grid-template-columns: minmax(0, 788fr) minmax(0, 820fr);
}

.aic-overview .hpb-eyebrow {
    margin-bottom: .375rem;
}

.aic-overview .hpb-lead {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    line-height: 1.364;
    margin-bottom: 2rem;
}

.aic-overview__text {
    color: var(--hpb-copy);
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: 1.364;
}

.aic-overview__text p {
    margin-bottom: 1.364em;
}

.aic-overview__text p:last-child {
    margin-bottom: 0;
}

/* Card 820x464 holding a 678x368 visual: the inset is a % of the card width, so it scales with it */
.aic-overview__media {
    background: linear-gradient(to top, #000, #0e1120);
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    overflow: hidden;
    padding: 5.87% 8.64%;
    transition: box-shadow .5s ease;
}

.aic-overview__media:hover {
    box-shadow: 0 0 20px 8px #408bfe8c;
}

.aic-overview__media img {
    aspect-ratio: 678 / 368;
    display: block;
    height: auto;
    object-fit: contain;
    width: 100%;
}

@media (max-width: 1200px) {
    .aic-overview__grid {
        gap: 3.5rem;
    }
}

@media (max-width: 1024px) {
    .aic-overview__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aic-overview__copy {
        max-width: 48rem;
    }

    .aic-overview__media {
        justify-self: center;
        max-width: 51.25rem;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .aic-overview__grid {
        gap: 3rem;
    }
}

/* ==========================================================================
   03. Challenges (also the base of 05. Practical, via .aic-cards)
   The MSP value cards (hpb-value-card, carousel from page-builder.js). The image
   box is blue (#0065fe), which is what a card without an image shows.
   ========================================================================== */
.aic-cards .hpb-value-card__media {
    background: #0065fe;
}

.aic-cards .hpb-value-card__media img {
    height: 100%;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
}

.aic-cards .aic-media--shadow-ai img {
    height: 132.29%;
    left: -1.81%;
    top: -2.67%;
    width: 103.75%;
}

/* Practical and Challenges: the images are uncropped sources, placed in % of the box.
   The Practical box is black so the 2px the crops leave uncovered don't show blue. */
.aic-practical .hpb-value-card__media {
    background: #000;
}

.aic-practical .aic-media--1 img {
    height: 119.4%;
    left: -10.01%;
    top: .59%;
    width: 119.7%;
}

.aic-practical .aic-media--2 img {
    height: 123.3%;
    left: -4.18%;
    top: -3.63%;
    width: 108.3%;
}

.aic-practical .aic-media--3 img {
    height: 126.9%;
    left: .32%;
    top: -.62%;
    width: 99.17%;
}

.aic-challenges .aic-media--2 img {
    height: 135.8%;
    left: -10.38%;
    top: -9.49%;
    width: 120.7%;
}

.aic-challenges .aic-media--3 {
    background: #000;
}

.aic-challenges .aic-media--3 img {
    height: 126.5%;
    left: 1.06%;
    top: -3.56%;
    width: 97.69%;
}

.aic-cards .hpb-value-card__copy p {
    margin-bottom: 1.364em;
}

.aic-cards .hpb-value-card__copy p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   04. Solution
   Four rows of copy and a visual card, alternating sides.
   ========================================================================== */
.aic-solution .hpb-section-heading .hpb-lead,
.aic-practical .hpb-section-heading .hpb-lead,
.aic-resources .hpb-section-heading .hpb-lead {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    line-height: 1.364;
    max-width: 53.8125rem;
}

.aic-solution .hpb-section-heading .hpb-lead+.hpb-lead {
    margin-top: 1.364em;
}

.aic-solution__rows {
    display: grid;
    gap: 6.25rem;
}

.aic-solution__row {
    align-items: start;
    display: grid;
    gap: 4.5rem;
    grid-template-columns: minmax(0, 788fr) minmax(0, 820fr);
}

.aic-solution__row--reverse {
    grid-template-columns: minmax(0, 820fr) minmax(0, 788fr);
}

.aic-solution__row--reverse .aic-solution__copy {
    order: 2;
}

.aic-solution__intro {
    margin-bottom: 2rem;
}

.aic-solution__intro .hpb-eyebrow {
    margin-bottom: .5rem;
}

.hpb-page .aic-solution h3 {
    font-size: clamp(1.75rem, 1.875vw, 2.25rem);
    font-weight: 600;
    line-height: 1.21;
    margin-bottom: 0;
}

.aic-solution__list {
    color: var(--hpb-copy);
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: 1.4;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aic-solution__list li {
    margin-bottom: .75rem;
}

.aic-solution__list li:last-child {
    margin-bottom: 0;
}

.aic-solution__list li::before {
    content: "| ";
    white-space: pre;
}

.aic-solution .aic-solution__note {
    color: var(--hpb-pink);
    font-size: clamp(.8125rem, .78vw, .9375rem);
    line-height: 1.4;
    margin: 1.25rem 0 0;
}

.aic-solution__visual {
    align-items: center;
    aspect-ratio: 820 / 464;
    background: linear-gradient(to top, #000, #0e1120);
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    display: flex;
    justify-content: center;
    overflow: hidden;
    transition: box-shadow .5s ease;
}

.aic-solution__visual:hover {
    box-shadow: 0 0 20px 8px #408bfe8c;
}

.aic-solution__image {
    aspect-ratio: 600 / 410.959;
    background: #0065fe;
    border-radius: 11.83% / 17.28%;
    overflow: hidden;
    width: 73.17%;
}

/* The screenshots are about 80% of the card width, centred; the Application Control
   one sits 5px lower in the design. */
.aic-solution__screen {
    display: block;
    height: auto;
    width: 79.5%;
}

.aic-solution__screen--1 {
    width: 80.16%;
}

.aic-solution__screen--2 {
    position: relative;
    top: 1.08%;
    width: 79.41%;
}

.aic-solution__screen--3 {
    width: 79.5%;
}

.aic-solution__screen--4 {
    width: 79.56%;
}

@media (max-width: 1200px) {

    .aic-solution__row,
    .aic-solution__row--reverse {
        gap: 3.5rem;
    }
}

@media (max-width: 1024px) {
    .aic-solution__rows {
        gap: 4rem;
    }

    .aic-solution__row,
    .aic-solution__row--reverse {
        grid-template-columns: minmax(0, 1fr);
    }

    .aic-solution__row--reverse .aic-solution__copy {
        order: 0;
    }

    .aic-solution__copy {
        max-width: 48rem;
    }

    .aic-solution__visual {
        justify-self: center;
        max-width: 51.25rem;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .aic-solution__rows {
        gap: 3rem;
    }

    .aic-solution__row,
    .aic-solution__row--reverse {
        gap: 2rem;
    }

    .aic-solution__intro {
        margin-bottom: 1.5rem;
    }
}

/* ==========================================================================
   05. Practical
   The same cards as 03, with a kicker above the title.
   ========================================================================== */
.aic-practical .hpb-card-kicker {
    margin-bottom: .625rem;
}

/* ==========================================================================
   06. Capabilities
   The MSP platform layout (hpb-split-list: sticky copy, list of icon + title +
   text rows).
   ========================================================================== */
.aic-capabilities .hpb-actions {
    margin-top: .5rem;
}

/* The arrow is white; on the white hover background it has to turn dark. */
.aic-capabilities .hpb-button--secondary:hover>img {
    filter: invert(1);
}

/* ==========================================================================
   08. Demo
   The form inside the card is the [heimdal-form] shortcode. Its markup uses
   Bootstrap's grid and .form-control, which this template does not load, so the
   grid and the dark field styles of the product page form (product-page.css)
   are redone under .aic-demo__form.
   ========================================================================== */
/* This page has no sticky section menu, so the "Request a Demo" anchors only need to clear
   the fixed site header (the MSP rule on section[id] also adds the sub menu height). */
.hpb-page section.aic-demo[id] {
    scroll-margin-top: var(--hpb-site-header);
}

.aic-demo__grid {
    align-items: start;
    column-gap: clamp(2rem, 7vw, 8.375rem);
    display: grid;
    grid-template-columns: minmax(0, 861px) minmax(0, 550px);
}

.aic-demo__copy {
    max-width: 765px;
}

.aic-demo .hpb-lead {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    line-height: 1.364;
    margin-bottom: 0;
}

.aic-demo .hpb-lead+.hpb-lead {
    margin-top: 1.364em;
}

.aic-demo__card {
    background: linear-gradient(to top, #000, #0e1120);
    border: 1px solid #408bfe;
    border-radius: 1.875rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 2.5rem;
    transition: box-shadow .5s ease;
}

.aic-demo__card:hover {
    box-shadow: 0 0 20px 8px #408bfe8c;
}

.aic-demo__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hpb-page .aic-demo__intro h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.21;
    margin-bottom: 0;
    text-align: center;
}

.aic-demo__intro p {
    color: #fff;
    font-size: 1.0625rem;
    line-height: 1.364;
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .aic-demo__grid {
        gap: 3rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .aic-demo__copy {
        max-width: 48rem;
    }

    .aic-demo__card {
        max-width: 34.375rem;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .aic-demo__card {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   09. Resources
   The MSP resource cards (hpb-resource-card) with a 534 x 300 black image box.
   ========================================================================== */
.aic-resources .hpb-resource-card__media {
    aspect-ratio: 534 / 300;
    background: #000;
    position: relative;
}

.aic-resources .hpb-resource-card__image {
    height: 100%;
    left: 0;
    max-width: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.aic-resources .hpb-resource-card .hpb-card-kicker {
    margin-bottom: .625rem;
}

.aic-resources__text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.aic-resources__copy {
    color: var(--hpb-copy);
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: 1.364;
    margin-bottom: 0;
}

/* ==========================================================================
   10. CTA
   Black card with the copy on the left and an image cut by the edges of the card.
   ========================================================================== */
.aic-cta__card {
    align-items: center;
    aspect-ratio: 1681 / 627;
    background: #000;
    border: 1px solid #408bfe;
    border-radius: 1.25rem;
    display: flex;
    overflow: hidden;
    padding: 0 4.7%;
    position: relative;
    transition: box-shadow .5s ease;
}

.aic-cta__card:hover {
    box-shadow: 0 0 20px 8px #408bfe8c;
}

.aic-cta__copy {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 2.75rem;
    position: relative;
    width: 39.7%;
    z-index: 1;
}

.hpb-page .aic-cta h2 {
    margin-bottom: 0;
}

.aic-cta .hpb-lead {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    line-height: 1.364;
    margin-bottom: 0;
}

.aic-cta .hpb-actions {
    margin-top: .5rem;
}

.aic-cta__image {
    display: block;
    height: 123.9%;
    left: 51.49%;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
    position: absolute;
    top: -6.86%;
    width: 46.22%;
}

@media (max-width: 1024px) {
    .aic-cta__card {
        aspect-ratio: auto;
        flex-direction: column;
        gap: 2rem;
        padding: 3rem 2rem 0;
    }

    .aic-cta__copy {
        padding-bottom: 0;
        width: 100%;
    }

    .aic-cta__image {
        height: auto;
        left: auto;
        max-width: 28rem;
        position: static;
        top: auto;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .aic-cta__card {
        padding: 2rem 1.5rem 0;
    }
}

.aic-demo__form {
    font-family: "Nunito Sans", Arial, sans-serif;
}

/* Bootstrap's 12-column row, as a grid. */
.aic-demo__form .row {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin: 0;
}

.aic-demo__form [class*="col-sm-"] {
    grid-column: 1 / -1;
}

@media (min-width: 576px) {
    .aic-demo__form .col-sm-1 {
        grid-column: span 1;
    }

    .aic-demo__form .col-sm-2 {
        grid-column: span 2;
    }

    .aic-demo__form .col-sm-3 {
        grid-column: span 3;
    }

    .aic-demo__form .col-sm-4 {
        grid-column: span 4;
    }

    .aic-demo__form .col-sm-5 {
        grid-column: span 5;
    }

    .aic-demo__form .col-sm-6 {
        grid-column: span 6;
    }

    .aic-demo__form .col-sm-7 {
        grid-column: span 7;
    }

    .aic-demo__form .col-sm-8 {
        grid-column: span 8;
    }

    .aic-demo__form .col-sm-9 {
        grid-column: span 9;
    }

    .aic-demo__form .col-sm-10 {
        grid-column: span 10;
    }

    .aic-demo__form .col-sm-11 {
        grid-column: span 11;
    }

    .aic-demo__form .col-sm-12 {
        grid-column: 1 / -1;
    }

}

.aic-demo__form .form-group {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    min-width: 0;
}

/* Fields the form script fills in itself; heimdal-forms-front.css hides them too,
   but the rule above is more specific. */
.aic-demo__form .hidden-fullname,
.aic-demo__form .hidden-fullphone {
    display: none;
}

.aic-demo__form label {
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

.aic-demo__form .form-control {
    background: #0e1120;
    border: 1px solid #408bfe;
    border-radius: .625rem;
    box-shadow: 0 1px 10px 0 rgb(2 80 198 / 9%);
    box-sizing: border-box;
    color: #fff;
    font-family: inherit;
    font-size: .875rem;
    height: 2.5rem;
    padding: .625rem;
    width: 100%;
}

.aic-demo__form textarea.form-control {
    height: 6.75rem;
    resize: vertical;
}

.aic-demo__form .form-control::placeholder {
    color: #6571a9;
}

.aic-demo__form .form-control:focus {
    border-color: var(--hpb-blue-light);
    outline: 0;
}

.aic-demo__form select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right .8rem center;
    background-repeat: no-repeat;
}

.aic-demo__form .fieldError {
    color: var(--hpb-pink);
    margin-top: -.3125rem;
}

/* An empty message would still take its gap and margin. */
.aic-demo__form .fieldError:empty {
    display: none;
}

.aic-demo__form .iti {
    width: 100%;
}

.aic-demo__form .iti__selected-dial-code {
    color: #fff;
}

.aic-demo__form .iti__arrow {
    border-top-color: #fff;
}

.aic-demo__form .iti__arrow--up {
    border-bottom-color: #fff;
}

.aic-demo__form .consultant-description {
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .625rem;
    margin: 0;
}

.aic-demo__form .consultant-description+.consultant-description {
    margin-top: .75rem;
}

.aic-demo__form .consultant-description label {
    flex: 1 1 0;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.214;
    min-width: 0;
}

.aic-demo__form .consultant-description a {
    color: #fff;
    text-decoration: underline;
}

/* The template gives the checkbox an inline top offset. */
.aic-demo__form .consultant-description input[type="checkbox"] {
    flex: none;
    height: .8125rem;
    margin: .125rem 0 0;
    top: 0 !important;
    width: .8125rem;
}

.aic-demo__form .consultant-description .fieldError {
    flex-basis: 100%;
}

.aic-demo__form .button-container {
    margin-top: 1.25rem;
}

.aic-demo__form .submit-btn {
    align-items: center;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.125rem;
    gap: 1.25rem;
    letter-spacing: -.02em;
    margin-top: 0;
    padding: .875rem 2.5rem;
}

.aic-demo__form .submit-btn img {
    height: auto;
    margin: 0;
    width: 1rem;
}

/* Headings with a manual line break (<br>) wrap on their own on phones. */
@media (max-width: 640px) {

    .aic-overview h2 br,
    .aic-capabilities h2 br,
    .aic-benefits h2 br {
        display: none;
    }
}