.elementor-21766 .elementor-element.elementor-element-19b0b7cf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-21766 .elementor-element.elementor-element-9120cc4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:070px;--padding-bottom:50px;--padding-left:80px;--padding-right:80px;}.elementor-21766 .elementor-element.elementor-element-9120cc4:not(.elementor-motion-effects-element-type-background), .elementor-21766 .elementor-element.elementor-element-9120cc4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-21766 .elementor-element.elementor-element-da00b59 .elementor-heading-title{color:var( --e-global-color-32c8460 );}.elementor-21766 .elementor-element.elementor-element-6665634{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-21766 .elementor-element.elementor-element-d48869a{--display:flex;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-21766 .elementor-element.elementor-element-f30f492 .elementor-heading-title{color:#FFFFFF;}.elementor-21766 .elementor-element.elementor-element-4d9cd22{color:#FFFFFF;}.elementor-21766 .elementor-element.elementor-element-82cd082 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(10px/2);}.elementor-21766 .elementor-element.elementor-element-82cd082 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(10px/2);}.elementor-21766 .elementor-element.elementor-element-82cd082 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(10px/2);}.elementor-21766 .elementor-element.elementor-element-82cd082 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-10px/2);}.elementor-21766 .elementor-element.elementor-element-82cd082 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-10px/2);}.elementor-21766 .elementor-element.elementor-element-82cd082 .elementor-icon-list-icon i{color:var( --e-global-color-32c8460 );transition:color 0.3s;}.elementor-21766 .elementor-element.elementor-element-82cd082 .elementor-icon-list-icon svg{fill:var( --e-global-color-32c8460 );transition:fill 0.3s;}.elementor-21766 .elementor-element.elementor-element-82cd082{--e-icon-list-icon-size:17px;--icon-vertical-align:flex-start;--icon-vertical-offset:3px;}.elementor-21766 .elementor-element.elementor-element-82cd082 .elementor-icon-list-icon{padding-inline-end:2px;}.elementor-21766 .elementor-element.elementor-element-82cd082 .elementor-icon-list-text{color:#FFFFFFD1;transition:color 0.3s;}.elementor-21766 .elementor-element.elementor-element-8b3e611{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-21766 .elementor-element.elementor-element-fed660e{--display:flex;--gap:90px 90px;--row-gap:90px;--column-gap:90px;--padding-top:48px;--padding-bottom:96px;--padding-left:80px;--padding-right:80px;}.elementor-21766 .elementor-element.elementor-element-17874c3{--animation-duration:1200ms;width:100%;max-width:100%;--dynamic-text-color:var( --e-global-color-text );}.elementor-21766 .elementor-element.elementor-element-17874c3 .elementor-headline{text-align:start;}.elementor-21766 .elementor-element.elementor-element-17874c3 .elementor-headline-plain-text{color:var( --e-global-color-text );}.elementor-21766 .elementor-element.elementor-element-17874c3 .elementor-headline-dynamic-wrapper path{stroke:var( --e-global-color-32c8460 );stroke-width:100px;}.elementor-21766 .elementor-element.elementor-element-6de1e44{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-21766 .elementor-element.elementor-element-c76e2a8{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-21766 .elementor-element.elementor-element-c76e2a8:not(.elementor-motion-effects-element-type-background), .elementor-21766 .elementor-element.elementor-element-c76e2a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://stensul.com/wp-content/uploads/2025/10/circle-teal-dark.svg");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-21766 .elementor-element.elementor-element-4f08927 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-21766 .elementor-element.elementor-element-4f08927 img{width:201px;max-width:100%;}.elementor-21766 .elementor-element.elementor-element-b8e80cd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:48px;--padding-bottom:48px;--padding-left:48px;--padding-right:48px;}.elementor-21766 .elementor-element.elementor-element-b8e80cd:not(.elementor-motion-effects-element-type-background), .elementor-21766 .elementor-element.elementor-element-b8e80cd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-32c8460 );}.elementor-21766 .elementor-element.elementor-element-471d5dd .elementor-heading-title{font-weight:600;}.elementor-21766 .elementor-element.elementor-element-ffe1bb8 .elementor-image-box-wrapper{text-align:start;}.elementor-21766 .elementor-element.elementor-element-ffe1bb8.elementor-position-right .elementor-image-box-img{margin-left:0px;}.elementor-21766 .elementor-element.elementor-element-ffe1bb8.elementor-position-left .elementor-image-box-img{margin-right:0px;}.elementor-21766 .elementor-element.elementor-element-ffe1bb8.elementor-position-top .elementor-image-box-img{margin-bottom:0px;}.elementor-21766 .elementor-element.elementor-element-ffe1bb8 .elementor-image-box-title{margin-bottom:0px;}.elementor-21766 .elementor-element.elementor-element-ffe1bb8 .elementor-image-box-wrapper .elementor-image-box-img{width:57px;}.elementor-21766 .elementor-element.elementor-element-ffe1bb8 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-21766 .elementor-element.elementor-element-d389071{--display:flex;--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:41px;--padding-bottom:41px;--padding-left:80px;--padding-right:80px;}.elementor-21766 .elementor-element.elementor-element-cd5f29d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-21766 .elementor-element.elementor-element-8579178{text-align:center;}.elementor-21766 .elementor-element.elementor-element-d198fed{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-21766 .elementor-element.elementor-element-893e9d6 img{width:138px;max-width:100%;}.elementor-21766 .elementor-element.elementor-element-2cbb1be img{width:84px;max-width:100%;}.elementor-21766 .elementor-element.elementor-element-5bd8508 img{width:170px;max-width:100%;}.elementor-21766 .elementor-element.elementor-element-00baaf3 img{width:113px;max-width:100%;}.elementor-21766 .elementor-element.elementor-element-66ce8b6 img{width:243px;max-width:100%;}.elementor-21766 .elementor-element.elementor-element-05e1c57 img{width:123px;max-width:100%;}@media(max-width:1024px){.elementor-21766 .elementor-element.elementor-element-9120cc4{--padding-top:60px;--padding-bottom:60px;--padding-left:40px;--padding-right:40px;}.elementor-21766 .elementor-element.elementor-element-82cd082{--e-icon-list-icon-size:16px;--icon-vertical-offset:4px;}.elementor-21766 .elementor-element.elementor-element-fed660e{--gap:48px 48px;--row-gap:48px;--column-gap:48px;--padding-top:32px;--padding-bottom:48px;--padding-left:40px;--padding-right:40px;}.elementor-21766 .elementor-element.elementor-element-6de1e44{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-21766 .elementor-element.elementor-element-4f08927 img{width:145px;}.elementor-21766 .elementor-element.elementor-element-b8e80cd{--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-21766 .elementor-element.elementor-element-d389071{--gap:24px 24px;--row-gap:24px;--column-gap:24px;--padding-top:24px;--padding-bottom:25px;--padding-left:40px;--padding-right:40px;}}@media(max-width:767px){.elementor-21766 .elementor-element.elementor-element-9120cc4{--content-width:480px;--padding-top:40px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-21766 .elementor-element.elementor-element-82cd082{--icon-vertical-offset:3px;}.elementor-21766 .elementor-element.elementor-element-fed660e{--gap:24px 24px;--row-gap:24px;--column-gap:24px;--padding-top:32px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-21766 .elementor-element.elementor-element-c76e2a8{--width:200px;--min-height:150px;--justify-content:center;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-21766 .elementor-element.elementor-element-4f08927 img{width:80px;}.elementor-21766 .elementor-element.elementor-element-b8e80cd{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-21766 .elementor-element.elementor-element-ffe1bb8 .elementor-image-box-img{margin-bottom:0px;}.elementor-21766 .elementor-element.elementor-element-d389071{--gap:24px 0px;--row-gap:24px;--column-gap:0px;--padding-top:24px;--padding-bottom:30px;--padding-left:20px;--padding-right:20px;}.elementor-21766 .elementor-element.elementor-element-d198fed{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:20px 30px;--row-gap:20px;--column-gap:30px;}.elementor-21766 .elementor-element.elementor-element-893e9d6 img{width:115px;}.elementor-21766 .elementor-element.elementor-element-2cbb1be img{width:69px;}.elementor-21766 .elementor-element.elementor-element-5bd8508 img{width:121px;}.elementor-21766 .elementor-element.elementor-element-00baaf3 img{width:85px;}.elementor-21766 .elementor-element.elementor-element-66ce8b6 img{width:200px;}.elementor-21766 .elementor-element.elementor-element-05e1c57 img{width:95px;}}@media(min-width:768px){.elementor-21766 .elementor-element.elementor-element-d48869a{--width:50%;}.elementor-21766 .elementor-element.elementor-element-8b3e611{--width:50%;}.elementor-21766 .elementor-element.elementor-element-c76e2a8{--width:500px;}.elementor-21766 .elementor-element.elementor-element-b8e80cd{--width:60%;}}@media(max-width:1024px) and (min-width:768px){.elementor-21766 .elementor-element.elementor-element-d48869a{--width:50%;}.elementor-21766 .elementor-element.elementor-element-8b3e611{--width:50%;}.elementor-21766 .elementor-element.elementor-element-c76e2a8{--width:300px;}}/* Start custom CSS *//* form styling */
.hero-ai-form .mktoRadioList {
    color:#fff;
}
/* ==========================================================================
   hero-ai-form — Marketo form (mktoForm_3704) styling
   Target: dark chip-style radio grid + white input / yellow button footer,
   matching the stensul.com/connect mock.
   Paste into: Elementor widget's Advanced > Custom CSS (on the HTML widget
   that has class .hero-ai-form), or your theme's Additional CSS.
   ========================================================================== */

.hero-ai-form {
  --bg: #112828;          /* card / page background (sampled from mock) */
  --chip-bg: #1c3535;     /* unselected chip fill */
  --chip-bg-hover: #223f3f;
  --chip-bg-checked: #274142; /* selected chip fill */
  --chip-border: rgba(255, 255, 255, 0.10);
  --chip-ring: #c7d8d8;   /* pale ring/halo around the selected chip */
  --text: #ffffff;
  --text-muted: #9fb0b0;
  --accent: var(--e-global-color-c9ad67c);
  --accent-hover: #eae94f;
}

/* ---- Base form overrides ------------------------------------------------ */
/* Card look (background, padding, border-radius, width/centering) is handled
   in Elementor instead — this just resets the typography Marketo's inline
   style forces (Helvetica, 13px, #333) and box-sizing math for the layout
   below. */
.hero-ai-form .mktoForm {
  width: 100% !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  color: var(--text) !important;
  box-sizing: border-box;
}

.hero-ai-form .mktoForm * {
  box-sizing: border-box;
}

/* ---- Layout: radio row full-width, email + button share the bottom row - */
.hero-ai-form .mktoForm {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 22px;
  align-items: end;
}

/* the hidden UTM tracking rows take no visual space, but drop them from
   the grid flow entirely so they don't create empty rows/gaps */
.hero-ai-form .mktoFormRow:has(input[type="hidden"]) {
  display: none !important;
}

/* the row holding the AI-tool radio list spans the full card width */
.hero-ai-form .mktoFormRow:has(.mktoRadioList) {
  grid-column: 1 / -1;
}

/* reset Marketo's inline label-left spacer columns */
.hero-ai-form .mktoOffset,
.hero-ai-form .mktoGutter {
  width: 0 !important;
  display: none !important;
}

.hero-ai-form .mktoFieldDescriptor,
.hero-ai-form .mktoFormCol,
.hero-ai-form .mktoFieldWrap {
  width: 100% !important;
  display: block;
}

.hero-ai-form .mktoAsterix {
  display: none; /* asterisks read poorly on dark cards; drop or restyle */
}

/* ---- "AI tool to connect:" label --------------------------------------- */
.hero-ai-form .mktoLabel {
  width: auto !important;
  display: block;
  color: var(--text) !important;
  font-size:.9rem;
  font-weight: 600;
  margin-bottom: 12px;
}

/* ==========================================================================
   THE RADIO CHIP GRID — this is the main piece.
   Requires the small JS snippet (see hero-ai-form-radio-chips.js) that wraps
   each radio input + its label into a single .mkto-chip element, since
   Marketo renders them as flat siblings with no wrapper to style directly.
   ========================================================================== */

.hero-ai-form .mktoRadioList {
  width: 100% !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hero-ai-form .mkto-chip {
  /* Now that this wrapper is a real <label> (needed for click-anywhere
     behavior), it also matches your theme's generic `label { ... }`
     styling — that's what was adding stray margin and forcing
     display:block, which broke the flex layout of the dot + text. */
  display: flex !important;
  margin: 0 !important;
  position: relative;
  align-items: center;
  gap: 10px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hero-ai-form .mkto-chip:hover {
  background: var(--chip-bg-hover);
  border-color: rgba(255, 255, 255, 0.2);
}

/* selected state — relies on :has(), supported in all current browsers */
.hero-ai-form .mkto-chip:has(input:checked) {
  background: var(--chip-bg-checked);
  border-color: var(--chip-ring);
  box-shadow: 0 0 0 1px var(--chip-ring);
}

/* The native <input> is kept in the DOM (for a11y / keyboard / form
   submission) but made fully invisible and non-interactive — Safari does
   not support ::before/::after on <input> at all (it's a replaced element),
   which is why the dot previously showed the browser's own default radio
   glyph (black dot + focus glow) instead of our custom one. Drawing the
   ring/dot on the .mkto-chip <label> itself sidesteps that entirely and
   renders identically in every browser. */
.hero-ai-form .mkto-chip input[type="radio"] {
  /* Fully clip the native control to zero visible pixels rather than just
     fading it with opacity — opacity alone can still leave a sliver of the
     OS's own radio widget visible in some browsers. appearance:none also
     stops the OS from attempting to paint its own widget at all. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}

.hero-ai-form .mkto-chip input[type="radio"]:focus {
  outline: none; /* suppress the native focus glow on the hidden input */
}

/* !important throughout — your theme apparently has its own generic
   `label::before` rule (looks like a toggle-switch pattern, based on the
   oval-with-circle shape it was producing) that was winning out over the
   un-flagged version of this rule. */
.hero-ai-form .mkto-chip::before {
  content: "" !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hero-ai-form .mkto-chip:has(input:checked)::before {
  border-color: #ffffff !important;
  background: #ffffff !important;
  /* punches an inset ring the color of the chip's own background, leaving
     a small solid dot — always perfectly centered since it's symmetric */
  box-shadow: inset 0 0 0 4px var(--chip-bg-checked) !important;
}

/* clean, deliberate focus indicator on the whole chip instead of the
   browser's native glow around the (now-hidden) input */
.hero-ai-form .mkto-chip:has(input:focus-visible) {
  outline: 2px solid var(--chip-ring);
  outline-offset: 2px;
}

.hero-ai-form .mkto-chip label {
  display: inline !important;
  margin: 0 !important;
  color: var(--text);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  line-height: 1.3;
}

/* Found the real cause of the oval/toggle-switch look: your theme has its
   own generic label::before rule (a plain white circle, presumably used to
   skin checkboxes/radios elsewhere on the site) that was rendering on top
   of — and overlapping with — our own dot. Kill it outright here. */
.hero-ai-form .mkto-chip label::before,
.hero-ai-form .mkto-chip label::after {
  content: none !important;
  display: none !important;
}

/* Stack to 1 column on narrow widths */
@media (max-width: 800px) {
  .hero-ai-form .mktoRadioList {
    grid-template-columns: 1fr;
  }
}

/* ---- Email field -------------------------------------------------------- */

.hero-ai-form .mktoFieldDescriptor {
    margin-bottom:0 !important;
}
.hero-ai-form .mktoFieldWrap.mktoRequiredField {
  position: relative;
  display: flex;
  flex-direction: column;
}

.hero-ai-form .mktoFieldWrap.mktoRequiredField .mktoLabel {
  /* visually hidden, not display:none — keeps the field's accessible name
     for screen readers while taking up no visual space (the placeholder
     carries the visual label instead) */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-ai-form input.mktoEmailField {
  width: 100% !important;
  height: 52px;
  background: #ffffff;
  color: #142c2c;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 15px;
  margin-bottom:0 !important;
}

.hero-ai-form input.mktoEmailField::placeholder {
  color: #8a9494;
}

.hero-ai-form input.mktoEmailField:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Submit button — overrides Marketo's inline gradient <style> block -- */
.hero-ai-form .mktoButtonRow {
  margin: 0 !important;
}

.hero-ai-form .mktoButtonWrap.mktoShadow {
  margin-left: 0 !important;
  display: block;
}

/* #mktoForm_3704 id is added here purely for specificity — your theme has
   a button/element rule (margin-top + padding: 10px) that was outweighing
   the class-only version of this body.elementor-page-21766, which is what pushed the
   button 10px lower than the email field. */
.hero-ai-form #mktoForm_3704 .mktoButtonWrap.mktoShadow .mktoButton,
.hero-ai-form .mktoButtonWrap.mktoShadow .mktoButton,
#mktoForm_3704 .mktoButtonWrap.mktoShadow .mktoButton {
  background: var(--accent) !important;
  background-image: none !important;
  color: #0f1f1f !important;
  border: none !important;
  box-shadow: none !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  line-height: 52px !important;
  font-size: 15px !important;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box !important;
  transition: background 0.15s ease;
}

.hero-ai-form #mktoForm_3704 .mktoButtonWrap.mktoShadow .mktoButton:hover,
.hero-ai-form #mktoForm_3704 .mktoButtonWrap.mktoShadow .mktoButton:focus {
  background-color: var(--e-global-color-0784168) !important;
  border: none !important;
  outline: none;
}

.hero-ai-form .mktoButtonWrap.mktoShadow .mktoButton:active {
  box-shadow: none !important;
}


/* ---- Optional: heading above the form -----------------------------------
   "Which AI tool do you want to connect?" is NOT part of the Marketo form
   markup — it's a separate Elementor Heading widget sitting above the form
   in the mock. Add that heading widget above the form and give it the class
   below (or adjust the body.elementor-page-21766 to whatever class you use). */
.hero-ai-form-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 20px;
  text-align: left;
}/* End custom CSS */