.hero {
  overflow: hidden;
  padding-top: 126px;
  position: relative;
  border-bottom: 1px solid #B1B1B1;
}
.hero__content {
    /* overflow-x: hidden; */
    max-width: 1440px;
    margin: 0px auto;
    position: relative;
    padding: 64px 0px 0 76px;
    display: flex;
    gap:50px;
     /* dgrid-template-columns: 1fr 1fr;
    gap: 40px; */
}

.hero__text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 608px;
    width: calc(50% - 50px);
  padding-bottom: 60px;
}

.hero__link {
  margin-bottom: 32px;
}
.hero-image-eyebrow{
  width: 218px;
  margin-bottom: 32px;
}
.hero__link:hover {
   text-decoration: underline !important;
  color: black;
}

.hero__title {
    font-family: 'Inter';
    color: #222326;
    line-height: 111%;
}

.hero__subtitle {
    font-family: 'Inter';
    font-weight: 500;
    font-size: 20px;
    line-height: 150%;
    color: #222326;
}

.hero__btn {
    font-family: 'Inter';
    font-size: 16px;
    line-height: 27.2px;
    text-align: center;
    background: #053242;
    color: #FFFFFF;
    border: 1px solid #053242;
    transition: all 0.3s ease;
}

.hero__btn:hover {
    background: white;
    color: black;
}

.hero__btn_arrow {
    transition: all 0.3s ease;
}

.hero__btn:hover .hero__btn_arrow {
    filter: invert(100%);
    fill: black;
}

.hero__btn span {
    width: 165px;
    display: inline-block;
}
.hero__img {
    justify-content: flex-end;
    align-items: end;
    border-radius: 8px;
    display: flex;
    position: relative;
        width: 100%;
    transform: scale(1.1);
    transform-origin: top left;
}
.hero__position{
    display: flex;
    height: auto;
    justify-content: end;
    left: 0;
    position: relative;
    width: 50vw;
}
.hero__img img {
    border-radius: 10px;
   /* box-shadow: 0 -5px 10.21px rgba(0, 0, 0, .15); */
    height: auto;
    object-fit: contain;
    width: auto;
  scale: 1.1;
    transform-origin: top left;
        box-shadow: 0 0 19.8px 0 #00000040;
        margin-top: 40px;
  max-height: 660px;
}
/* .hero__img {
    transform: translate(-30px, 53px);
    width: calc(100% + 117px);
    overflow: hidden;
    box-shadow: 0px -5px 10.21px rgba(0, 0, 0, 0.15);    border-radius: 8px;
}

.hero__img img {
    min-width: 763px;
    object-fit: cover;
    height: 100%;
    object-position: left;

} */

.hero__bg {
    position: absolute;
    height: calc(100% + 1px);
    width: 100%;
    bottom: -1px;
    z-index: -1;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media (max-width: 1024px) {
  
  .hero {
  padding-top: 116px;
}
  .hero__link{
    margin-top: 20px;
  }
    .hero__content {
        display: flex;
        padding: 33px 0px 15px;
    }

    .hero__text-container {
        max-width: 100%;
        width: 100%;
        margin-bottom: 28px;
        padding: 0px 24px;
        margin-right: 0px;
    }

    .hero__title {
        font-size: 50px;
    }

    .hero__img {
        position: relative;
        transform: translate(24px, 0px);
        width: calc(100% - 2px);
        justify-self: end;
        left: -40px;
    }

    .hero__img img {
        width: 100%;
        object-position: left top;
        margin-top: 0;
    }
    .hero__img_tablet {
        display: block;
    }
    .hero__bg img {
        object-position: left;
    }
  
    .hero__position {
     width: 100%;
  }
  
  .hero__img {
    width: calc(100% - 40px);
  }
  
  .hero__position img {
    max-height: unset;
  }
  
      .hero__img {
        left: -20px;
  }

}
@media(max-width: 768px){
  .hero__content{
    flex-direction: column;
  }
  .hero__img{
        position: static;
    width: 100%;
    display: none;
  }
}

@media (max-width: 600px) {
  
    .hero__text-container {
        gap: 24px;
    }

    .hero__title {
        font-size: 42px;
    }

    .hero__subtitle {
        font-size: 16px;
    }

    .hero__img {
        height: 330px;
        width: calc(100% - 40px);
        transform: translate(0px, 0px);
    }

   .hero__img {
        left: -20px;
    }
}


@media (max-width: 450px) {
    .hero__img {
        height: 280px;
  }
}
@media (max-width: 393px) {
  .hero__img {
    margin-top: 0;
  }
  .hero__content {
    gap: 0;
  }
}


/* =========================================================================
   ELISITY ASK BOX — SYNCED COPY. DO NOT EDIT HERE.
   =========================================================================
   Source of truth: hubspot/elisity-ask-box.module/module.css in the
   ai-resource-center repo. ./hubspot/deploy-ask-box.sh writes the identical
   bytes to BOTH the standalone ElisityAskBox module and this Hero module, so
   the hero CTA and any dropped-in Ask Box are always the same component.

   Why a copy rather than a shared reference: module.css/module.js load only
   for modules present on the page, and no theme module here uses css_assets,
   so the cross-module path form is unverified. A wrong guess renders an
   unstyled box on the homepage. Duplication that a script keeps in sync beats
   an unverified reference on the highest-traffic page on the site.

   These rules are inert unless the hero's CTA style is set to Ask Box — the
   JS scanner finds no [data-elisity-abx] and returns immediately.
   ========================================================================= */

/* ============================================================================
   Elisity Ask Box — module.css
   ============================================================================

   STATIC RULES ONLY. NO HubL IN THIS FILE.

   HubSpot links module.css ONCE per page per module TYPE, not once per module
   INSTANCE. If this file contained HubL referencing `module.<field>`, the FIRST
   instance's field values would be baked into the stylesheet and silently
   applied to every other box on the page. Every per-instance value therefore
   arrives as a CSS custom property set inline on `.elisity-abx` by module.html.

   ---------------------------------------------------------------------------
   SPECIFICITY POLICY — read before editing. SPECIFICITY, NOT `!important`.
   ---------------------------------------------------------------------------
   Every rule anchors on `.elisity-abx[data-elisity-abx]`, giving (0,2,0) for
   the root and (0,3,0) for descendants. That is what does the work here.

   `!important` does NOT win on its own: two `!important` declarations of EQUAL
   specificity resolve by source order, and a host stylesheet can load after
   this one. Anchoring at (0,3,0) means a single-class or element-level theme
   rule cannot tie, so order stops mattering — no `!important` required.

   Measured against the LIVE elisity.com theme rather than assumed. Fetching
   and parsing template_main.min.css (Neambo/Act3 parent, 540 rules) shows the
   only bare element rules that touch this component are
       a { cursor:pointer; text-decoration:none }
       a, a:hover { color:#296180 }
       a:hover { text-decoration:underline }      <- (0,1,1)
       .dnd-module > * { width:100% }             <- (0,1,1)
   and NONE of them carry `!important`. `.flex-col` is `{flex-direction:column}`
   with no `!important`, and there is no `header{position:absolute}` rule at
   all. The "hostile theme sprays !important" premise in CLAUDE.md's V4 design
   DNA is stale — CLAUDE.md's own V6.37 entry already records the correction
   (the blanket `a{color:inherit!important}` reset is the WIDGET's own rule,
   scoped to `.elisity-widget-root`, and does not exist outside it). (0,3,0)
   beats every one of the real rules above outright.

   WHY BLANKET `!important` WOULD BE ACTIVELY HARMFUL HERE — this is the part
   that is specific to a DRAG-AND-DROP module. Reading the live <head>, the
   load order is: theme stylesheets (1-2), every module stylesheet (3-35), then
   `<style id="hs_editor_style">` (36). The page editor's OWN generated styles
   load AFTER module CSS. Every `!important` left on a property the editor
   exposes — margin, padding, width, alignment, background — silently disables
   that control for the marketer, with no error and nothing to debug. A module
   whose whole point is being configured in the editor must not do that.

   So: `!important` survives on exactly three kinds of declaration, where a
   silent failure would be visually catastrophic rather than merely cosmetic —
   the field's flex row, the typed line's nowrap/overflow clipping, and the
   conic-gradient background. Everything else relies on specificity alone, and
   the module root carries none at all so the editor keeps control of layout.

   The `.elisity-abx-text *` lockdown below is NOT redundant: `[data-abx-typed]`
   is a bare <span> with no class, so a host rule as weak as
   `span { white-space: normal }` beats the nowrap it would otherwise INHERIT
   from its parent — observed wrapping a question across six lines in a harness.
   An inherited value loses to any direct declaration, however weak.

   Corollary for future edits: never add a rule at (0,1,0); never rely on
   inheritance for a property a host might set on a bare element selector; and
   never add `!important` to a property the HubSpot editor lets a marketer set.

   ---------------------------------------------------------------------------
   NAMESPACE: `elisity-abx` / `--abx-*` / `abx-*` keyframes.
   ---------------------------------------------------------------------------
   Deliberately distinct from BOTH:
     - the Resource Center widget's `elisity-arc-*` / `--arc-ang` / `arc-spin`, and
     - the live homepage headHtml swap's `elisity-askbox-*` / `--eab-ang` / `eab-spin`
       (hubspot/homepage-askbox-experiment/head-swap.html).
   That second one matters: the head-swap hard-sets `.elisity-askbox-aurora {
   width:520px!important; margin:16px 0 0!important }`. Reusing its class names
   would let the homepage's swap override this module's width the moment someone
   drops the module on the homepage. Duplicate @keyframes names also resolve to
   the LAST definition globally, so a shared `spin` name lets one surface hijack
   the other's animation — that exact bug shipped once (V6.36, the export
   spinner physically rotating the aurora Ask box).
   ============================================================================ */

@property --abx-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes abx-spin {
  to {
    --abx-ang: 360deg;
  }
}

@keyframes abx-caret-blink {
  50% {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------------
   Wrapper. A plain BLOCK element — this is load-bearing.

   A block box takes its width from its containing block, never from its
   content. The inner <a> is `width:100%` of THIS element, so the box's width is
   decoupled from the typed string.

   This is the fix for the regression documented in
   hubspot/homepage-askbox-experiment/README.md ("a %-width regressed because it
   rode the hero's flex column"): in the hero, a percentage width resolved
   against a shrink-to-fit flex parent whose own width grew with the typed text,
   so the box visibly resized on every keystroke. The head-swap solved it with a
   hard `width:520px`, which a drag-and-drop module cannot do. Instead this
   module inserts its own block-level containing block AND makes the text span
   unable to push width (see `min-width:0` on `.elisity-abx-text`).

   Verified: in a deliberately shrink-to-fit `inline-flex` parent, the box held
   exactly one width across 120 samples while a 100-character phrase typed in.
   --------------------------------------------------------------------------- */
.elisity-abx[data-elisity-abx] {
  --abx-max-width: 520px;
  --abx-font-size: 16px;
  --abx-radius: 18px;
  --abx-ring: 2.5px;
  --abx-field-bg: #ffffff;
  --abx-text-color: #4a5263;
  --abx-icon-color: #0b6280;
  --abx-send-bg: #053242;
  --abx-send-color: #ffffff;

  /* No `!important` anywhere on the root: hs_editor_style loads after this
     file, and the marketer's own margin / padding / width / alignment controls
     must keep working. (0,2,0) already beats `.dnd-module > * { width:100% }`
     at (0,1,1), which is the only theme rule that targets this position. */
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;

  /* Two independent antidotes to a column-flex parent sizing this box to
     fit-content, which is what actually caused the documented "resized with
     the type" regression — `align-items: flex-start` on the hero's
     `.hero__text-container` (a COLUMN flex container) sets each child's cross
     size, i.e. its WIDTH, to fit-content = min(max-content, available). The
     box's max-content is its nowrap typed string, so the box grew one
     character at a time. The repo README blames "a %-width riding the flex
     column", which is the wrong mechanism — a percentage resolves against the
     container's definite content box and would have been fine.
     `align-self: stretch` overrides an inherited `align-items: flex-start`;
     `flex: 0 1 auto` stops it growing if the parent is a shrink-to-fit ROW. */
  align-self: stretch;
  flex: 0 1 auto;

  /* Neutralise inherited host typography before it reaches the field. */
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}

.elisity-abx[data-elisity-abx] *,
.elisity-abx[data-elisity-abx] *::before,
.elisity-abx[data-elisity-abx] *::after {
  box-sizing: border-box;
}

/* Alignment inside the wrapper. */
.elisity-abx[data-elisity-abx][data-abx-align='center'] .elisity-abx-aurora {
  margin-left: auto !important;
  margin-right: auto !important;
}
.elisity-abx[data-elisity-abx][data-abx-align='left'] .elisity-abx-aurora {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.elisity-abx[data-elisity-abx][data-abx-align='right'] .elisity-abx-aurora {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* ---------------------------------------------------------------------------
   The aurora ring. The whole box is ONE anchor — a CTA, not an input.
   --------------------------------------------------------------------------- */
.elisity-abx[data-elisity-abx] .elisity-abx-aurora {
  /* REQUIRED FALLBACK — do not delete, and do not assume @property covers it.
     If the browser lacks @property support (Firefox < 128, Safari < 16.4), the
     registration below never happens, `--abx-ang` has no value, `var(--abx-ang)`
     is guaranteed-invalid, and the whole `background` declaration becomes
     Invalid At Computed-Value Time — which computes to `unset`, i.e. NO
     BACKGROUND. The ring does not "degrade to a static gradient": it vanishes
     entirely, leaving a white box with no border. Declaring the property here
     as an ordinary custom property means var() always resolves, so those
     browsers get a correct static ring that simply does not rotate. The
     animation still wins over this declaration where @property IS supported. */
  --abx-ang: 0deg;

  display: block;
  box-sizing: border-box;

  /* Small-screen sizing. Fill the column, capped at the setting. The definite
     width that makes the setting work in a shrink-to-fit parent is applied at
     >=768px only -- see the media query below for why it must not run here. */
  width: 100%;
  max-width: var(--abx-max-width);
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  border-radius: var(--abx-radius);
  padding: var(--abx-ring);
  text-align: left;
  /* !important IS required on this pair, and specificity cannot substitute for
     it. Against the CURRENT live theme, (0,3,0) does beat
     `a:hover{text-decoration:underline}` (0,1,1) and `a,a:hover{color:#296180}`
     — but an `!important` declaration beats a non-important one at ANY
     specificity, so a single `a { text-decoration: underline !important }`
     anywhere in a host theme wins outright no matter how tightly this selector
     is anchored. Removing these two and re-testing produced exactly that: the
     typed question rendered underlined and red, because text-decoration and
     colour both propagate into the descendant spans.
     Safe to keep !important here — link paint is not something the HubSpot page
     editor lets a marketer set on a module, so this blocks no editor control. */
  text-decoration: none !important;
  color: inherit !important;
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* !important kept: a lost background is a silently invisible component, not
     a cosmetic slip. */
  background: conic-gradient(
    from var(--abx-ang),
    #053242,
    #0b6280,
    #54b9f1,
    #65f1fc,
    #b5fc7b,
    #65f1fc,
    #54b9f1,
    #0b6280,
    #053242
  ) !important;
  /* iOS-safe glow. NEVER filter:blur() on a pseudo-element — iOS Safari
     rasterizes the blurred pseudo into a visible rectangular plate. box-shadow
     follows the border-radius and is rendered natively. */
  box-shadow:
    0 8px 26px -8px rgba(11, 98, 128, 0.4),
    0 0 16px rgba(101, 241, 252, 0.35) !important;
  transition:
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

/* The ring spins only when configured to animate and not paused by module.js
   (offscreen / hidden tab / reduced motion). */
.elisity-abx[data-elisity-abx][data-abx-animate='true'] .elisity-abx-aurora {
  animation: abx-spin 5s linear infinite;
}
.elisity-abx[data-elisity-abx][data-abx-paused='true'] .elisity-abx-aurora {
  animation-play-state: paused;
}

.elisity-abx[data-elisity-abx] .elisity-abx-aurora > * {
  position: relative;
  z-index: 1;
}

.elisity-abx[data-elisity-abx] .elisity-abx-aurora:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px -8px rgba(11, 98, 128, 0.5),
    0 0 22px rgba(101, 241, 252, 0.5) !important;
}

/* Focus ring is deep blue, NOT the cyan #65f1fc the widget uses on dark
   surfaces. #65f1fc measures ~1.4:1 against white — it fails WCAG 1.4.11 and
   2.4.11, and CLAUDE.md explicitly bans it as a foreground on white. #053242
   is ~14:1. The box sits on marketer-chosen backgrounds, so a white-page-safe
   ring is the only defensible default. */
.elisity-abx[data-elisity-abx] .elisity-abx-aurora:focus-visible {
  outline: 3px solid #053242;
  outline-offset: 3px;
}

/* Fallback for browsers without :focus-visible — better a ring on mouse click
   than no visible focus at all. */
@supports not selector(:focus-visible) {
  .elisity-abx[data-elisity-abx] .elisity-abx-aurora:focus {
    outline: 3px solid #053242;
    outline-offset: 3px;
  }
}

/* WCAG 2.2.2 (Pause, Stop, Hide): the typed line is auto-updating text that
   runs indefinitely. prefers-reduced-motion is a good mitigation but it is not
   discoverable and is not a documented sufficient technique on its own, and a
   <button> cannot legally be nested inside this <a> to act as a pause control.
   Hover and keyboard focus therefore pause everything — the ring, the caret,
   and (via module.js) the typing itself. That also makes the box readable:
   pointing at it freezes the question instead of deleting it out from under
   you. Combined with the "Animate the questions" field, a visitor who wants it
   stopped has a mechanism and an author who wants it off has a switch. */
.elisity-abx[data-elisity-abx]:hover .elisity-abx-aurora,
.elisity-abx[data-elisity-abx]:focus-within .elisity-abx-aurora,
.elisity-abx[data-elisity-abx]:hover .elisity-abx-caret,
.elisity-abx[data-elisity-abx]:focus-within .elisity-abx-caret {
  animation-play-state: paused;
}

/* ---------------------------------------------------------------------------
   Inner white field.
   `flex-direction: row` is stated explicitly — elisity.com ships
   `.flex-col { flex-direction: column !important }`, and a harness rule at
   equal specificity beat an unqualified `.elisity-abx-field` and stacked the
   icon, text and glyph vertically.
   --------------------------------------------------------------------------- */
.elisity-abx[data-elisity-abx] .elisity-abx-field {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 13px !important;
  min-width: 0 !important;
  width: 100% !important;
  background: var(--abx-field-bg) !important;
  border-radius: calc(var(--abx-radius) - var(--abx-ring)) !important;
  padding: 16px 16px 16px 18px !important;
  margin: 0 !important;
  box-shadow: 0 1px 2px rgba(5, 50, 66, 0.04) !important;
}

.elisity-abx[data-elisity-abx] .elisity-abx-icon {
  flex: 0 0 auto !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}

/* ---------------------------------------------------------------------------
   The typed line.

   `min-width: 0` is the load-bearing declaration. A flex item defaults to
   `min-width:auto`, which refuses to shrink below its content — that is exactly
   what lets a long typed string push its container wider. With `min-width:0`
   the span shrinks freely, so the string can never influence the box's width;
   it just clips. This is what makes the width content-independent in ANY
   container, including ones this module has never seen.

   The `*` rule is not belt-and-braces. `[data-abx-typed]` is a bare <span> with
   no class, so a host rule as weak as `span { white-space: normal !important }`
   beats the nowrap it would otherwise INHERIT from this parent — observed
   wrapping a question across six lines. Declare, never inherit.
   --------------------------------------------------------------------------- */
.elisity-abx[data-elisity-abx] .elisity-abx-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: var(--abx-font-size) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  color: var(--abx-text-color) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  /* `ellipsis`, not `clip`. A question longer than the configured width is a
     marketer's choice, not a bug, and it should read as deliberate truncation
     rather than a glyph sliced in half against the send button. Nothing is
     truncated while a question fits, so this is invisible in the normal case. */
  text-overflow: ellipsis !important;
  text-align: left !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elisity-abx[data-elisity-abx] .elisity-abx-text * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elisity-abx[data-elisity-abx] .elisity-abx-text [data-abx-typed] {
  color: var(--abx-text-color) !important;
  background: none !important;
}

.elisity-abx[data-elisity-abx] .elisity-abx-caret {
  display: inline-block !important;
  width: 2px !important;
  height: 1.05em !important;
  background: var(--abx-icon-color) !important;
  margin-left: 1px !important;
  vertical-align: -2px !important;
  flex: 0 0 auto !important;
}

.elisity-abx[data-elisity-abx][data-abx-animate='true'] .elisity-abx-caret {
  animation: abx-caret-blink 1.05s steps(1) infinite;
}
.elisity-abx[data-elisity-abx][data-abx-paused='true'] .elisity-abx-caret {
  animation-play-state: paused;
}

/* No animation => no caret. A frozen caret beside static text reads as a
   rendering bug rather than a design choice. */
.elisity-abx[data-elisity-abx][data-abx-animate='false'] .elisity-abx-caret {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Send glyph. Decorative — the whole box is the click target.
   --------------------------------------------------------------------------- */
.elisity-abx[data-elisity-abx] .elisity-abx-send {
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: var(--abx-send-bg) !important;
  color: var(--abx-send-color) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.elisity-abx[data-elisity-abx] .elisity-abx-send svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
}

/* ---------------------------------------------------------------------------
   Making "Maximum width" actually do something in a shrink-to-fit parent.

   `width:100%; max-width:520px` and `width:520px; max-width:100%` look
   equivalent in a dnd column. They are NOT equivalent when an ancestor sizes
   itself to its content, and that is where this shipped broken -- in this very
   module, the hero.

   `.hero__text-container` is a flex item with `width:auto`, so its width is its
   max-content. The aurora declares `container-type: inline-size` (below), which
   applies inline-size containment: its inline size is computed as if it had no
   contents. Under `width:100%` its max-content contribution was therefore ZERO
   -- the column sized to the <h1> alone (measured: 416px) and the box just rode
   along at 416px. `max-width` never bound, the control did nothing at any value
   above 416, and all five stock questions (323-396px of text against 299px of
   room) clipped mid-word.

   A definite width contributes that width, so the column grows to the setting
   and the control works. Measured live at 1512px: 520 -> 520, 560 -> 560,
   600 -> 600, 700 and 900 -> 608, the column's own max-width. It clamps instead
   of overflowing.

   WHY THIS IS GATED AT 768px, AND MUST STAY GATED
   Inflating an ancestor is only safe when there is room to inflate into. At a
   500px viewport the same declaration pushed that column from 460px to its
   608px max-width and pushed the box's right edge past the viewport, where an
   ancestor's overflow clipped it. Below 768px the hero stacks and the column is
   effectively full-width anyway, so a definite width buys nothing and costs
   correctness. The viewport cap is a second, independent guarantee on the box's
   WIDTH; the percentage is ignored while intrinsic sizes are computed, so it
   does not interfere with the column growing.

   The cap bounds width, not position, so it cannot save a box that starts at a
   large left offset. That is why the field's ceiling is 720 and not 900:
   measured on the hero at a 768px viewport, settings up to 720 sit inside the
   viewport (right edge 764) and 760+ clip by 20px against the container's 44px
   gutter. Raise the ceiling and that clipping comes back.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .elisity-abx[data-elisity-abx] .elisity-abx-aurora {
    width: var(--abx-max-width);
    max-width: min(100%, calc(100vw - 24px));
  }
}

/* ---------------------------------------------------------------------------
   The HubL-rendered phrase source list. Read by module.js via textContent, then
   never shown. `display:none` keeps it out of layout AND the accessibility tree.
   --------------------------------------------------------------------------- */
.elisity-abx[data-elisity-abx] .elisity-abx-phrases {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Narrow containers. Below ~380px of available width, 16px type plus both
   glyphs leaves almost no room for the question, so tighten the padding and
   drop the send glyph rather than clip the question to two words.
   Container queries where supported; a viewport fallback otherwise.
   --------------------------------------------------------------------------- */
@supports (container-type: inline-size) {
  /* The container is the AURORA, not the wrapper. The wrapper is always the
     full width of its dnd column; the aurora is what `--abx-max-width` actually
     constrains. Querying the wrapper measured the column, so a marketer who set
     max width to 320px inside a 900px column got no narrow treatment at all —
     the send glyph stayed and the question was clipped after four words. */
  .elisity-abx[data-elisity-abx] .elisity-abx-aurora {
    container-type: inline-size;
    container-name: abx;
  }

  @container abx (max-width: 380px) {
    .elisity-abx[data-elisity-abx] .elisity-abx-field {
      gap: 10px !important;
      padding: 13px 13px 13px 14px !important;
    }
    .elisity-abx[data-elisity-abx] .elisity-abx-send {
      display: none !important;
    }
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 420px) {
    .elisity-abx[data-elisity-abx] .elisity-abx-field {
      gap: 10px !important;
      padding: 13px 13px 13px 14px !important;
    }
    .elisity-abx[data-elisity-abx] .elisity-abx-send {
      display: none !important;
    }
  }
}

/* ---------------------------------------------------------------------------
   Reduced motion. WCAG 2.2.2: the typed string is auto-updating text and needs
   a way to stop. `prefers-reduced-motion` is that mechanism; module.js also
   swaps the animated string for the configured static line so the box still
   reads as an AI prompt when frozen.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .elisity-abx[data-elisity-abx] .elisity-abx-aurora,
  .elisity-abx[data-elisity-abx] .elisity-abx-caret {
    animation: none !important;
  }
  .elisity-abx[data-elisity-abx] .elisity-abx-aurora {
    transition: none !important;
  }
  .elisity-abx[data-elisity-abx] .elisity-abx-aurora:hover {
    transform: none !important;
  }
  .elisity-abx[data-elisity-abx] .elisity-abx-caret {
    display: none !important;
  }
}

/* Forced-colors / high-contrast: the conic ring and the white field both
   collapse to system colors, so restore a visible boundary. */
@media (forced-colors: active) {
  .elisity-abx[data-elisity-abx] .elisity-abx-aurora {
    border: 2px solid CanvasText !important;
  }
  .elisity-abx[data-elisity-abx] .elisity-abx-send {
    border: 1px solid CanvasText !important;
  }
}