/* ==================================================================
   Hero – AI decisioning
   Scoped to .iv-hero so it can't collide with theme styles.
   Email form + pop-up CTA styles are at the end of this file.

   Layout model
   - ≥1200px: overlapping CSS grid. Copy and visual share grid row 1
     with column lines taken from the design, so they overlap exactly
     like the mockup without absolute positioning. Spacing, heading
     and eyebrow scale in cqw (% of the ≤1440px inner width).
     Body copy and button text use px, stepped per breakpoint so the
     paragraph always ends above the timeline card.
   - <1200px: normal flow, copy on top, visual below. No overlap.
================================================================== */

.iv-hero {
  --iv-white: #ffffff;
  --iv-ink: #0a0a0a;
  --iv-muted: rgba(255, 255, 255, 0.86);
  --iv-accent: #c638d5;
  --iv-button: #c94fd8;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--iv-white);
  font-family: var(--iv-sans);
  -webkit-font-smoothing: antialiased;
}

/* ==================================================================
   DESKTOP (≥1200px) – overlapping grid, no absolute positioning
   Column lines measured from the design (content width = 100%):
     0%      text starts
     29.3%   image starts
     46%     text column ends
     100%    image ends
   Both items sit in grid row 1, so they overlap like the design
   while the section height still comes from the real content.
================================================================== */

.iv-hero__inner {
  container-type: inline-size;   /* cqw = % of this (≤1440px) width */
  display: grid;
  grid-template-columns:
    [copy-start] 29.3fr
    [visual-start] 18.7fr
    [copy-end] 22fr
    [visual-end];
  grid-template-rows: auto;
  width: 100%;
  margin: 0 auto;
  padding: clamp(40px, 4cqw, 64px) 0;
}

/* ---- Copy ------------------------------------------------------- */

.iv-hero__copy {
  grid-column: copy-start / copy-end;
  grid-row: 1;
  align-self: start;
  margin-top: 1.4cqw;            /* design: eyebrow sits just below image top */
  position: relative;            /* only for z-index stacking above the image */
  z-index: 2;
  min-width: 0;
  width:100%;
}

.iv-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7cqw;
  margin: 0 0 2.2cqw;
  padding: 0.75cqw 1.6cqw 0.75cqw 1.1cqw;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.45);
  font-size: 1.3cqw;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--iv-white);
  backdrop-filter: blur(6px);
}

.iv-hero__spark {
  width: 1.15em;
  height: 1.15em;
  color: #de5dec;
  flex: none;
}

.iv-hero__title { margin: 0 0 2.4cqw; }

.iv-hero__title h1 {
  margin: 0;
  color: #FBFBFB;
  font-size: 4.9cqw;
  line-height: 0.95;
  letter-spacing: -0.02em;
  word-wrap: normal;
  line-height: 1.1;
/*   white-space: nowrap;           /* keeps the 2-line heading from wrapping into 3 */ */
}

.iv-hero__title-line { display: block; color: var(--iv-white); }
.iv-hero__title-line--accent { color: var(--iv-accent); }

.iv-hero__body {
  max-width: 39cqw;
  margin: 0 0 3.4cqw;
  line-height: 1.2;
  color: var(--iv-muted);
}

.iv-hero__body p {
  margin: 0;
  color: #fff;
  font-size: 22px;               /* px – stepped down at 1399px / 1299px */
  line-height: inherit;
  letter-spacing: -0.3px;
}

.iv-hero__body p + p { margin-top: 0.8em; }

.iv-hero__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---- Email form (HubSpot) ---------------------------------------
   Turns the HubSpot form into the design's pill: the email input is
   the white pill and the submit button sits inside its right end.
   Covers legacy (.hs-form, v2) and new-editor (.hsfc-*, v4) markup.
   The email field must be the first field in the form.
------------------------------------------------------------------- */

.iv-hero .iv-hero__form { max-width: 470px; }

.iv-hero .iv-hero__form form, .iv-hero .iv-hero__form .form-title{
  background-color: transparent;
}

.iv-hero .iv-hero__form form,
.iv-hero .iv-hero__form .hsfc-Step__Content {
  position: relative;
  margin: 0;
}
.iv-hero .iv-hero__form form{
  margin-left:2px;
  margin-right:2px;
}
.iv-hero .iv-hero__form fieldset { max-width: none; }

.iv-hero .iv-hero__form .hs-form-field,
.iv-hero .iv-hero__form .hsfc-Row,
.iv-hero .iv-hero__form .hsfc-TextField { margin: 0; }

/* Label stays for screen readers; the placeholder is the visible label */
.iv-hero .iv-hero__form .hs-form-field > label,
.iv-hero .iv-hero__form .hsfc-FieldLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.iv-hero .iv-hero__form .hs-input:not([type="checkbox"]):not([type="radio"]),
.iv-hero .iv-hero__form .hsfc-TextInput {
  display: block;
  width: 100% !important;          /* v2 sets inline/fieldset widths */
  height: 56px;
  margin: 0;
  padding: 0 150px 0 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #0a0a0a;
  font: inherit;
  font-size: 15px;
  box-shadow: none;
  outline: none;
  transition: box-shadow 180ms ease;
}

.iv-hero .iv-hero__form .hs-input:focus,
.iv-hero .iv-hero__form .hsfc-TextInput:focus {
  box-shadow: 0 0 0 3px rgba(222, 93, 236, 0.45), 0 12px 32px rgba(212, 79, 223, 0.28);
}

.iv-hero .iv-hero__form .hs-input::placeholder,
.iv-hero .iv-hero__form .hsfc-TextInput::placeholder { color: #6b6b6b; opacity: 1; }

.iv-hero .iv-hero__form .hs-input.invalid.error,
.iv-hero .iv-hero__form .hsfc-TextInput[aria-invalid="true"] { box-shadow: 0 0 0 2px #ff9ce0; }

/* Submit pinned inside the pill */
.iv-hero .iv-hero__form .hs_submit,
.iv-hero .iv-hero__form .hsfc-NavigationRow {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
  padding: 0;
}

.iv-hero .iv-hero__form .hs_submit .actions { margin: 0; padding: 0; }

/* !important on the visual props: theme button styles otherwise win */
.iv-hero .iv-hero__form .hs_submit .hs-button,
.iv-hero .iv-hero__form .hsfc-NavigationRow .hsfc-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--iv-button) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  white-space: nowrap;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}

.iv-hero .iv-hero__form .hs_submit .hs-button:hover,
.iv-hero .iv-hero__form .hsfc-NavigationRow .hsfc-Button:hover { background: #b63fc6 !important; }
.iv-hero .iv-hero__form .hs_submit .hs-button:active,
.iv-hero .iv-hero__form .hsfc-NavigationRow .hsfc-Button:active { transform: translateY(1px); }
.iv-hero .iv-hero__form .hs_submit .hs-button:focus-visible,
.iv-hero .iv-hero__form .hsfc-NavigationRow .hsfc-Button:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }

/* Errors, consent text and inline thank-you */
.iv-hero .iv-hero__form .hs-error-msgs {
  margin: 10px 0 0 20px;
  padding: 0;
  list-style: none;
}

.iv-hero .iv-hero__form .hs-error-msg,
.iv-hero .iv-hero__form .hs-error-msgs label,
.iv-hero .iv-hero__form .hs_error_rollup,
.iv-hero .iv-hero__form .hsfc-ErrorAlert {
  margin: 10px 0 0 20px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.3;
}

/* One left edge for everything under the pill (= input text padding).
   The list carries the indent; the label inside adds none.
   ul. prefix: HubSpot also puts .inputs-list on this list, and the
   .inputs-list reset below would otherwise zero the indent. */
.iv-hero .iv-hero__form ul.hs-error-msgs { padding: 0; }
.hs-form-field .hs-fieldtype-text.hs-error-msgs label{margin-left:20px!important;}
.iv-hero .iv-hero__form .hs-error-msgs .hs-error-msg,
.iv-hero .iv-hero__form .hs-error-msgs label { margin: 0; }

/* Checkbox error: the consent block is already indented, so only
   shift by checkbox + gap to sit under the checkbox text. */
/* .iv-hero .iv-hero__form .legal-consent-container ul.hs-error-msgs { margin: 4px 0 0 28px; } */
.iv-hero .iv-hero__form .hs_error_rollup { display: none; }   /* duplicate of the field error */

.iv-hero .iv-hero__form .legal-consent-container,
.iv-hero .iv-hero__form .hsfc-RichText {
  margin: 12px 0 0 22px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.45;
}

.iv-hero .iv-hero__form .legal-consent-container p,
.iv-hero .iv-hero__form .hsfc-RichText p { margin: 0 0 6px; font-size: inherit; }
.iv-hero .iv-hero__form .legal-consent-container a,
.iv-hero .iv-hero__form .hsfc-RichText a { color: #fff; text-decoration: underline; text-underline-offset: 0.15em; }
.iv-hero .iv-hero__form .legal-consent-container a:hover,
.iv-hero .iv-hero__form .hsfc-RichText a:hover { color: #e7a6ef; }

/* Consent checkbox (same branded box as the pop-up's blog checkbox) */
.iv-hero .iv-hero__form .legal-consent-container .hs-form-field { margin: 8px 0 0; }
.iv-hero .iv-hero__form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.iv-hero .iv-hero__form .hs-form-booleancheckbox-display,
.iv-hero .iv-hero__form .hs-form-checkbox-display,
.iv-hero .iv-hero__form .hsfc-CheckboxField label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}

.iv-hero .iv-hero__form .hs-form-booleancheckbox-display > span,
.iv-hero .iv-hero__form .hs-form-checkbox-display > span { margin: 0; padding: 0; }
.iv-hero .iv-hero__form .hs-form-booleancheckbox-display p { margin: 0; }

.iv-hero .iv-hero__form input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 18px !important;
  height: 18px;
  margin: 0 !important;
  border: 1.5px solid rgba(255, 255, 255, 1);
  border-radius: 4px;
  background: transparent center / 12px no-repeat;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.iv-hero .iv-hero__form input[type="checkbox"]:hover { border-color: #fff; }

.iv-hero .iv-hero__form input[type="checkbox"]:checked {
  border-color: var(--iv-button);
  background-color: var(--iv-button);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.iv-hero .iv-hero__form input[type="checkbox"]:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 2px; }
.iv-hero .iv-hero__form .hs-form-field.error input[type="checkbox"],
.iv-hero .iv-hero__form input[type="checkbox"][aria-invalid="true"] { border-color: #ff9ce0; }

.iv-hero .iv-hero__form .submitted-message,
.iv-hero .iv-hero__form .hsfc-PostSubmit {
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}

.iv-hero .iv-hero__form .submitted-message{
  display:none;
}
.iv-hero .iv-hero__form .submitted-message p { margin: 0; }

.iv-hero__legal {
  margin: 12px 0 0 22px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}
.iv-hero__legal p{
  font-size: 12px;
}
.iv-hero__legal p { margin: 0; }
.iv-hero__legal a { color: #fff; text-decoration: underline; text-underline-offset: 0.15em; }

/* ---- Visual ----------------------------------------------------- */

.iv-hero__visual {
  grid-column: visual-start / visual-end;
  grid-row: 1;
  align-self: start;
  position: relative;            /* only for z-index stacking */
  z-index: 1;
  min-width: 0;
/*   margin-right:30px; */
}

.iv-hero__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ---- px text steps inside the canvas ---------------------------- */

@media (max-width: 1399px) {
  .iv-hero__body p { font-size: 20px; }
}

@media (max-width: 1299px) {
  .iv-hero__body p { font-size: 18px; }
  .iv-hero .iv-hero__form .hs-input:not([type="checkbox"]):not([type="radio"]),
  .iv-hero .iv-hero__form .hsfc-TextInput { height: 54px; padding-right: 145px; }
  .iv-hero .iv-hero__form .hs_submit .hs-button,
  .iv-hero .iv-hero__form .hsfc-NavigationRow .hsfc-Button { height: 42px !important; padding: 0 22px !important; font-size: 15px !important; }
}

/* ==================================================================
   STACKED (<1200px) — normal flow, nothing overlaps
================================================================== */

@media (max-width: 1024px) {
  .iv-hero__inner {
    container-type: normal;
    grid-template-columns: 1fr;
    row-gap: clamp(32px, 12vw, 56px);
    padding: clamp(48px, 6vw, 80px) 0;
    text-align: center;
  }

  .iv-hero__copy,
  .iv-hero__visual {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .iv-hero__copy   { grid-row: 1; }
  .iv-hero__visual { grid-row: 2; max-width:750px; width:100%; margin:auto; }

  .iv-hero__copy { max-width: 100%; }

  .iv-hero__eyebrow {
    gap: 10px;
    margin-bottom: 28px;
    padding: 10px 22px 10px 16px;
    font-size: 16px;
  }

  .iv-hero__title { margin-bottom: 28px; }
  .iv-hero__title h1 {
    font-size: 60px;
    line-height: 1.05;
    white-space: normal;
    text-wrap: balance;
  }

  .iv-hero__body { max-width: 100%; margin-bottom: 36px; line-height: 1.35; }
  .iv-hero__body p { font-size: 18px; }

  .iv-hero__form { margin: 0 auto; text-align: left; }
}

@media (max-width: 1200px) and (min-width:1025px){
  .iv-hero__inner{
    grid-template-columns: [copy-start] 29.3fr [visual-start] 3fr [copy-end] 25fr [visual-end];
  }
  .iv-hero__body{
    max-width: 43cqw;
  }
  .iv-hero__copy{
    max-width:525px;
    width:100%;
  }
  
}

@media (max-width: 767px) {
  .iv-hero__visual{ margin-right:auto; }
  .iv-hero__eyebrow{ font-size:14px; }
  .iv-hero__title h1 { font-size: 35px; line-height: 1.1; letter-spacing: -1.5px; text-wrap-style: pretty; }
  .iv-hero__body p { font-size: 16px; }
  .iv-hero .iv-hero__form .hs-input:not([type="checkbox"]):not([type="radio"]),
  .iv-hero .iv-hero__form .hsfc-TextInput { height: 45px; padding: 0 18px 0 18px; font-size: 14px; }
  .iv-hero .iv-hero__form .hs_submit{ position:static; margin-top:20px;text-align:center; }
  .iv-hero .iv-hero__form .hs_submit .hs-button,
  .iv-hero .iv-hero__form .hsfc-NavigationRow .hsfc-Button { height: 40px !important; padding: 0 18px !important; font-size: 15px !important;  }
  .iv-hero__legal,
  .iv-hero .iv-hero__form ul.hs-error-msgs,
  .iv-hero .iv-hero__form .hsfc-ErrorAlert,
  .iv-hero .iv-hero__form .legal-consent-container,
  .iv-hero .iv-hero__form .hsfc-RichText { margin-left: 18px; }   /* = mobile input padding */
  .iv-hero .iv-hero__form .form-title{
  padding:0;
}
  .iv-hero .iv-hero__form .hs-error-msgs .hs-error-msg, .iv-hero .iv-hero__form .hs-error-msgs label{margin-left:0;}
  
}



/* ==================================================================
   POP-UP CTA – native <dialog> (top layer, so the section's
   overflow: hidden doesn't clip it)
   Sized to fit a laptop screen (~1366×768) without scrolling; a
   shorter-screen step below tightens it further.
================================================================== */

html.iv-hero-modal-open { overflow: hidden; }

.iv-hero-modal {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--iv-white);
  overflow: auto;
  overscroll-behavior: contain;
}

.iv-hero-modal::backdrop {
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(4px);
}

.iv-hero-modal[open] { animation: iv-modal-in 220ms ease-out; }

@keyframes iv-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.iv-hero-modal__frame {
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(135deg, #f6e4f8 0%, #e6b3ec 45%, #c94fd8 100%);
}

.iv-hero-modal__panel {
  position: relative;
  overflow: hidden;
  padding: 24px 26px 22px;
  border-radius: 18px;
  background:
    radial-gradient(60% 45% at 45% 42%, rgba(160, 50, 170, 0.32), transparent 70%),
    #0d0b0e;
}

.iv-hero-modal__arcs {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: auto;
  color: rgba(198, 56, 213, 0.28);
  pointer-events: none;
}

.iv-hero-modal__panel > :not(.iv-hero-modal__arcs) { position: relative; }

/* ---- Head ---- */

.iv-hero-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.iv-hero-modal__logo { display: block; width: auto; max-width: 150px; height: 28px; }

.iv-hero-modal__wordmark {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.iv-hero-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  margin: -6px -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #1d1b1e;
  color: #fff;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.iv-hero-modal__close:hover { background: #2c292d; }
.iv-hero-modal__close:focus-visible { outline: 3px solid var(--iv-accent); outline-offset: 2px; }
.iv-hero-modal__close svg { width: 18px; height: 18px; }

/* ---- Copy ---- */

.iv-hero-modal__title h1,
.iv-hero-modal__title h2,
.iv-hero-modal__title h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.iv-hero-modal__body {
  max-width: 620px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.4;
}

.iv-hero-modal__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.iv-hero-modal__email {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  margin-bottom: 18px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: #141215;
  color: rgba(255, 255, 255, 0.55);
  transition: border-color 180ms ease;
}

.iv-hero-modal__email:focus-within { border-color: var(--iv-accent); }
.iv-hero-modal__email svg { flex: none; width: 18px; height: 18px; }

.iv-hero-modal__email input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 15px;
  outline: none;
}

.iv-hero-modal__email input::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; }
.iv-hero-modal__email:has(input[aria-invalid="true"]) { border-color: #ff9ce0; }

/* ---- Featured centre piece ---- */

.iv-hero-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 22px;
  align-items: center;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f7e6f8 0%, #ecc6f0 60%, #e2acea 100%);
  color: #0a0a0a;
}

.iv-hero-feature__cover {
  overflow: hidden;
  aspect-ratio: 278 / 300;
  border-radius: 10px;
  background: linear-gradient(160deg, #c94fd8, #b43dc5);
}

.iv-hero-feature__cover img {
  display: block;
  width: 100%;
/*   height: 100%;
  object-fit: cover; */
}

.iv-hero-feature__fallback {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px;
  color: #fff;
}

.iv-hero-feature__fallback-brand { margin-bottom: 12px; font-size: 10px; font-weight: 700; opacity: 0.9; }
.iv-hero-feature__fallback-title { margin-bottom: 6px; font-family: Georgia, serif; font-size: 17px; line-height: 1.1; }
.iv-hero-feature__fallback-text { max-width: 92%; font-size: 9px; line-height: 1.3; opacity: 0.9; }

.iv-hero-feature__fallback svg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  color: rgba(255, 255, 255, 0.6);
}

.iv-hero-feature__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.iv-hero-feature__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #0a0a0a;
  color: #fff;
}

.iv-hero-feature__badge-icon svg { width: 15px; height: 15px; }

.iv-hero-feature__title {
  margin: 0 0 8px;
  color: #0a0a0a;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.iv-hero-feature__text {
  margin: 0 0 16px;
  color: #2b2b2b;
  font-size: 15px;
  line-height: 1.4;
}

.iv-hero-feature__btn,
.iv-hero-blog__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.iv-hero-feature__btn svg,
.iv-hero-blog__btn svg { width: 17px; height: 17px; transition: transform 180ms ease; }
.iv-hero-feature__btn:hover svg,
.iv-hero-blog__btn:hover svg { transform: translateX(3px); }

.iv-hero-feature__btn {
  width: 100%;
  height: 48px;
  padding: 0 20px;
  background: var(--iv-button);
  color: #fff;
  font-size: 16px;
}

.iv-hero-feature__btn:hover { background: #b63fc6; color: #fff; }
.iv-hero-feature__btn:focus-visible { outline: 3px solid #0a0a0a; outline-offset: 3px; }

/* ---- Blog subscribe row ---- */

.iv-hero-blog {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.iv-hero-blog__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #1d1b1e;
  color: #f0b3f5;
}

.iv-hero-blog__icon svg { width: 20px; height: 20px; }

.iv-hero-blog__form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.iv-hero-blog__form[hidden],
.iv-hero-blog__thanks[hidden] { display: none; }

/* Hidden HubSpot "Blog subscriber" form – rendered but never shown.
   visibility: hidden keeps its inputs out of the tab order while
   still letting the JS fill and submit it. */
.iv-hero-blog__hs {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  visibility: hidden;
  pointer-events: none;
}

.iv-hero-blog__btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

.iv-hero-blog__eyebrow { margin: 0 0 7px; color: #e7a6ef; font-size: 12px; font-weight: 500; }

.iv-hero-blog__check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.iv-hero-blog__check input {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.iv-hero-blog__box {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  background: transparent center / 12px no-repeat;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.iv-hero-blog__check input:checked + .iv-hero-blog__box {
  border-color: var(--iv-button);
  background-color: var(--iv-button);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.iv-hero-blog__check input:focus-visible + .iv-hero-blog__box { outline: 3px solid var(--iv-accent); outline-offset: 2px; }

.iv-hero-blog__title { font-size: 18px; font-weight: 600; line-height: 1.2; }

.iv-hero-blog__desc {
  max-width: 440px;
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.4;
}

.iv-hero-blog__error { margin: 6px 0 0; color: #ff9ce0; font-size: 13px; }

.iv-hero-blog__btn {
  flex: none;
  height: 48px;
  padding: 0 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font-size: 16px;
}

.iv-hero-blog__btn:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.iv-hero-blog__btn:focus-visible { outline: 3px solid var(--iv-accent); outline-offset: 3px; }

.iv-hero-blog__thanks {
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  outline: none;
}

.iv-hero-blog__thanks p { margin: 0; }
.iv-hero-blog__thanks strong { font-size: 18px; }

/* ---- Pop-up responsive ---- */

/* Short laptop screens (e.g. 1366×768 with browser chrome) */
@media (max-height: 760px) and (min-width: 768px) {
  .iv-hero-modal { width: min(700px, calc(100vw - 32px)); }
  .iv-hero-modal__frame { padding: 12px; }
  .iv-hero-modal__panel { padding: 20px 22px 18px; }
  .iv-hero-modal__head { margin-bottom: 12px; }
  .iv-hero-modal__title h1,
  .iv-hero-modal__title h2,
  .iv-hero-modal__title h3 { font-size: 34px; }
  .iv-hero-modal__body { margin-bottom: 14px; font-size: 14px; }
  .iv-hero-modal__email { height: 44px; margin-bottom: 14px; }
  .iv-hero-feature { padding: 14px; gap: 18px; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); }
  .iv-hero-feature__title { font-size: 26px; }
  .iv-hero-feature__text { margin-bottom: 12px; font-size: 14px; }
  .iv-hero-feature__btn,
  .iv-hero-blog__btn { height: 44px; font-size: 15px; }
  .iv-hero-blog { margin-top: 14px; padding-top: 14px; }
  .iv-hero-blog__icon { width: 44px; height: 44px; }
  .iv-hero-blog__title { font-size: 16px; }
  .iv-hero-blog__desc { font-size: 13px; }
}

@media (max-width: 767px) {
  .iv-hero-modal { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .iv-hero-modal__frame { padding: 8px; border-radius: 20px; }
  .iv-hero-modal__panel { padding: 20px 16px 18px; border-radius: 14px; }
  .iv-hero-modal__arcs { width: 100%; }
  .iv-hero-modal__wordmark { font-size: 24px; }
  .iv-hero-modal__logo { height: 24px; }
  .iv-hero-modal__title h1,
  .iv-hero-modal__title h2,
  .iv-hero-modal__title h3 { font-size: 30px; }
  .iv-hero-modal__email input { font-size: 16px; }  /* 16px stops iOS zoom on focus */

  .iv-hero-feature { grid-template-columns: 1fr; gap: 16px; padding: 14px; border-radius: 14px; }
  .iv-hero-feature__cover { aspect-ratio: 16 / 9; }
  .iv-hero-feature__title { font-size: 24px; }

  .iv-hero-blog { grid-template-columns: 1fr; gap: 0; }
  .iv-hero-blog__icon { display: none; }
  .iv-hero-blog__form { flex-direction: column; align-items: stretch; gap: 14px; }
  .iv-hero-feature__badge-icon{ width: 22px;height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .iv-hero .iv-hero__form .hs-input,
  .iv-hero .iv-hero__form .hsfc-TextInput,
  .iv-hero .iv-hero__form .hs_submit .hs-button,
  .iv-hero .iv-hero__form .hsfc-NavigationRow .hsfc-Button,
  .iv-hero-feature__btn,
  .iv-hero-blog__btn,
  .iv-hero-feature__btn svg,
  .iv-hero-blog__btn svg { transition: none !important; }
  .iv-hero-modal[open] { animation: none; }
}