/* Local typeface: bundled with the project for deterministic first paint. */
@font-face {
  font-family: "Inter";
  src: url("../../fonts/Inter-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/Inter-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/Inter-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/Inter-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}



/* slim, brand-tinted scrollbar (Firefox + WebKit) instead of the OS default */
#ideal-hero-nav,
#ideal-hero-isolated {
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 11, 15, .22) transparent;
}

#ideal-hero-nav ::-webkit-scrollbar,
#ideal-hero-isolated ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#ideal-hero-nav ::-webkit-scrollbar-track,
#ideal-hero-isolated ::-webkit-scrollbar-track {
  background: transparent;
}

#ideal-hero-nav ::-webkit-scrollbar-thumb,
#ideal-hero-isolated ::-webkit-scrollbar-thumb {
  background-color: rgba(11, 11, 15, .18);
  border-radius: var(--ih-pill, 999px);
  border: 2px solid transparent;
  background-clip: content-box;
}

#ideal-hero-nav ::-webkit-scrollbar-thumb:hover,
#ideal-hero-isolated ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(11, 11, 15, .32);
}

*,
*::after,
*::before {
	box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}

/* ==========================================================
   TOKENS
   ========================================================== */
#ideal-hero-nav,
#ideal-hero-isolated {
  --ih-z-header: 900000;
  --ih-z-dropdown: 10;
  --ih-z-scrim: 900020;
  --ih-z-panel: 900030;
  --ih-ink: #0b0b0f;
  --ih-ink-2: #1c1c22;
  --ih-soft: #55555f;
  --ih-faint: #8b8b96;
  --ih-line: rgba(11, 11, 15, .07);
  --ih-line2: rgba(11, 11, 15, .11);
  --ih-amber: #fbbf24;
  --ih-orange: #fb923c;
  --ih-rose: #fb7185;
  --ih-violet: #8b5cf6;
  --ih-sky: #38bdf8;
  --ih-teal: #2dd4bf;
  /* glass edge highlight + layered shadows (depth) */
  --ih-ring: inset 0 1px 0 rgba(255, 255, 255, .8);
  --ih-sh-1: 0 1px 2px rgba(11, 11, 15, .04), 0 4px 10px -3px rgba(11, 11, 15, .06);
  --ih-sh-2: 0 1px 2px rgba(11, 11, 15, .05), 0 8px 20px -8px rgba(11, 11, 15, .1), 0 22px 46px -20px rgba(11, 11, 15, .12);
  --ih-sh-3: 0 2px 4px rgba(11, 11, 15, .04), 0 20px 44px -14px rgba(11, 11, 15, .18), 0 52px 96px -32px rgba(11, 11, 15, .24);
  --ih-shrink: 200px;
  /* scroll distance over which the navbar finishes shrinking */
  --ih-hide-after: 140px;
  /* below this scroll position the navbar never hides */
  --ih-marquee-speed: 38s;
  /* one full logo loop; raise it to slow the marquee down */
  --ih-spring-nav: linear(0 0%, .0408 4.5%, .1356 9.1%, .2541 13.6%, .377 18.2%, .4934 22.7%, .5974 27.3%, .6866 31.8%, .7606 36.4%, .8206 40.9%, .8681 45.5%, .9049 50%, .933 54.5%, .9539 59.1%, .9692 63.6%, .9802 68.2%, .988 72.7%, .9933 77.3%, .9968 81.8%, .999 86.4%, 1.0004 90.9%, 1.0011 95.5%, 1 100%);
  --ih-spring-panel: linear(0 0%, .0635 4.5%, .2083 9.1%, .3826 13.6%, .5533 18.2%, .7022 22.7%, .8214 27.3%, .9099 31.8%, .9706 36.4%, 1.0086 40.9%, 1.0292 45.5%, 1.0375 50%, 1.0378 54.5%, 1.0337 59.1%, 1.0274 63.6%, 1.0206 68.2%, 1.0144 72.7%, 1.0092 77.3%, 1.0051 81.8%, 1.0023 86.4%, 1.0004 90.9%, .9992 95.5%, 1 100%);
  --ih-pill: 999px;
  --ih-maxw: 960px;
  --ih-maxw-stuck: 820px;
  --ih-p: 0;
  /* scroll ilerlemesi 0 -> 1, JS gunceller */
  --ih-pin: 220px;
  /* FAZ 1: menu yerinde kalip daralir */
  --ih-exit: 130px;
  /* FAZ 2: yerinde kalmaya devam ederken yumusakca soner */
  --ih-q: 0;
  /* cikis ilerlemesi 0 -> 1, JS gunceller */
  --ih-pad: clamp(16px, 4vw, 28px);
  --ih-nav-top: 16px;
  --ih-adminbar: 0px;
  --ih-nav-h: 40px;
  --ih-nav-gap: 6px;
  --ih-nav-inset: 10px;
  --ih-ease: cubic-bezier(.4, 0, .2, 1);
  --ih-spring: cubic-bezier(.22, 1.05, .36, 1);
  --ih-font: 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, -apple-system, sans-serif;
  color: var(--ih-ink) !important;
  font-family: var(--ih-font) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.admin-bar #ideal-hero-nav,
body.admin-bar #ideal-hero-isolated {
  --ih-adminbar: 32px
}

@media screen and (max-width:782px) {

  body.admin-bar #ideal-hero-nav,
  body.admin-bar #ideal-hero-isolated {
    --ih-adminbar: 46px
  }
}

/* ---- NAV ROOT: deliberately creates no stacking context ---- */
#ideal-hero-nav {
  position: static !important;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  overflow: visible !important;
}

#ideal-hero-nav:not(.ih-portaled) {
  position: relative !important;
  z-index: var(--ih-z-header) !important
}

/* ---- HERO ROOT ---- */
#ideal-hero-isolated {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  text-align: center !important;
  z-index: 0 !important;
  overflow: visible !important;
}

/* ==========================================================
   BEHAVIOR LAYER — CSS Scroll-Driven Animations
   --ih-p (0..1) is the single input for every visual rule below.
   Where supported, a scroll timeline drives it on the compositor:
   zero main-thread work while scrolling. Where it is not supported,
   the JS fallback drives the same variable from a rAF loop.
   ========================================================== */
@property --ih-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0
}

@keyframes ih-nav-shrink {
  from {
    --ih-p: 0
  }

  to {
    --ih-p: 1
  }
}

@supports (animation-timeline:scroll()) {
  @media (prefers-reduced-motion:no-preference) {
    #ideal-hero-nav {
      animation: ih-nav-shrink 1s cubic-bezier(.33, .1, .25, 1) both;
      animation-timeline: scroll(root block);
      animation-range: 0 var(--ih-shrink);
    }
  }
}

/* when JS takes over, the CSS animation stands down */
#ideal-hero-nav.ih-js-shrink {
  animation: none !important
}

/* ==========================================================
   SCOPED RESET
   ========================================================== */
#ideal-hero-nav *,
#ideal-hero-nav *::before,
#ideal-hero-nav *::after,
#ideal-hero-isolated *,
#ideal-hero-isolated *::before,
#ideal-hero-isolated *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0;
  background: transparent none !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  list-style: none !important;
  color: inherit !important;
  float: none !important;
  clear: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
  -webkit-tap-highlight-color: transparent;
  transition: none;
  animation: none;
}

#ideal-hero-nav a,
#ideal-hero-isolated a {
  cursor: pointer !important
}

#ideal-hero-nav button,
#ideal-hero-nav label,
#ideal-hero-isolated button,
#ideal-hero-isolated label {
  font: inherit !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important
}

#ideal-hero-nav svg,
#ideal-hero-isolated svg {
  display: block !important;
  flex: none !important;
  overflow: visible !important;
  fill: none !important
}

#ideal-hero-nav :focus-visible,
#ideal-hero-isolated :focus-visible {
  outline: 2px solid rgba(11, 11, 15, .55) !important;
  outline-offset: 3px !important;
  border-radius: 10px;
}

/* brand-tinted text selection instead of the browser's default blue */
#ideal-hero-nav ::selection,
#ideal-hero-isolated ::selection {
  background: rgba(139, 92, 246, .18);
  color: var(--ih-ink);
}

#ideal-hero-nav .ih-toggle{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap !important;
}

/* ==========================================================
   NAVBAR
   ========================================================== */
#ideal-hero-nav .ih-nav-outer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--ih-z-header) !important;
  display: flex !important;
  justify-content: center !important;
  padding: calc(var(--ih-nav-top) + var(--ih-adminbar)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)) !important;
  pointer-events: none !important;
}

#ideal-hero-nav .ih-nav {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: var(--ih-maxw) !important;
  max-width: calc(var(--ih-maxw) - (var(--ih-maxw) - var(--ih-maxw-stuck)) * var(--ih-p)) !important;
  min-height: calc(var(--ih-nav-h) + var(--ih-nav-gap) * 2) !important;
  padding: var(--ih-nav-gap) var(--ih-nav-gap) var(--ih-nav-gap) calc(var(--ih-nav-gap) + var(--ih-nav-inset)) !important;
  border: 0 !important;
  border-radius: var(--ih-pill) !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate !important;
}

/* ==========================================================
   GLASS SURFACE ON ITS OWN LAYER
   Fading fill, border, shadow and inner highlight alpha separately
   left a 1px white hairline behind: the high-contrast highlight
   outlived the wide, low-contrast fill. Now the entire glass is one
   layer faded by a single opacity, so no component can linger.
   ========================================================== */
#ideal-hero-nav .ih-nav::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: var(--ih-p) !important;
  visibility: hidden !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .74)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(190%);
  backdrop-filter: blur(18px) saturate(190%);
  box-shadow:
    inset 0 0 0 1px rgba(11, 11, 15, .075),
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 1px 2px rgba(11, 11, 15, .05),
    0 10px 30px -10px rgba(11, 11, 15, .15) !important;
  transition: visibility .25s linear;
  contain: paint;
}

/* at p=0 the layer is fully off, so backdrop-filter never even promotes a layer */
#ideal-hero-nav.ih-scrolled .ih-nav::before {
  visibility: visible !important
}

/* transitions are enabled AFTER first paint, so a mid-page reload does not animate */
/* GPU: hide/reveal via transform on a spring curve.
   will-change is added by JS only while the transition runs. */
#ideal-hero-nav .ih-nav-outer {
  transform: translate3d(0, 0, 0);
  transition: transform .45s var(--ih-spring-nav);
}

#ideal-hero-nav.ih-nav-hidden .ih-nav-outer {
  transform: translate3d(0, calc(-100% - 20px), 0);
}

@media (prefers-reduced-motion:reduce) {
  #ideal-hero-nav .ih-nav-outer {
    transition: none !important;
    transform: none !important
  }
}

/* ==========================================================
   MODE — ih-nav-pin (NOT fixed)
   The bar stays in flow. It holds position and shrinks across the
   first --ih-pin pixels, then releases and scrolls away with the page.
   Scrolling up re-pins it and the same curve runs in reverse.
   Note: position:sticky silently dies if any ancestor sets overflow,
   in which case the bar simply scrolls away.
   ========================================================== */
#ideal-hero-nav.ih-nav-pin {
  position: relative !important;
  z-index: var(--ih-z-header) !important;
  height: calc(var(--ih-nav-top) + var(--ih-adminbar) + var(--ih-nav-h) + var(--ih-nav-gap) * 2 + var(--ih-pin) + var(--ih-exit)) !important;
  overflow: visible !important;
}

#ideal-hero-nav.ih-nav-pin .ih-nav-outer {
  position: sticky !important;
  top: calc(var(--ih-nav-top) + var(--ih-adminbar)) !important;
  padding-top: 0 !important;
  /* PHASE 2: instead of a hard release it holds, lifts slightly and fades out */
  opacity: calc(1 - var(--ih-q)) !important;
  transform: translate3d(0, calc(-22px * var(--ih-q)), 0) scale(calc(1 - .02 * var(--ih-q))) !important;
  transform-origin: top center !important;
  transition: opacity .18s linear, transform .18s linear !important;
  will-change: opacity, transform;
}

/* ==========================================================
   DISABLE THE PIN CHOREOGRAPHY (ih-nav-flat) — the bar behaves as fixed.
   Applied on mobile and when the user prefers reduced motion, because
   in pin mode the bar leaves the viewport and the hamburger would
   become unreachable on small screens.
   ========================================================== */
#ideal-hero-nav.ih-nav-pin.ih-nav-flat {
  height: 0 !important
}

#ideal-hero-nav.ih-nav-pin.ih-nav-flat .ih-nav-outer {
  position: fixed !important;
  top: 0 !important;
  padding-top: calc(var(--ih-nav-top) + var(--ih-adminbar)) !important;
  opacity: 1 !important;
  transform: none !important;
}

#ideal-hero-nav.ih-nav-pin.ih-nav-flat+#ideal-hero-isolated {
  margin-top: 0 !important
}

/* a fully faded bar must leave the tab order, otherwise it is an invisible focus trap */
#ideal-hero-nav.ih-nav-faded .ih-nav-outer {
  visibility: hidden !important
}

#ideal-hero-nav.ih-nav-faded .ih-nav {
  pointer-events: none !important
}

/* the bar occupies flow space yet still floats over the hero's color band */
#ideal-hero-nav.ih-nav-pin+#ideal-hero-isolated {
  margin-top: calc(-1 * (var(--ih-nav-top) + var(--ih-adminbar) + var(--ih-nav-h) + var(--ih-nav-gap) * 2 + var(--ih-pin) + var(--ih-exit))) !important;
}

#ideal-hero-nav .ih-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex: none !important;
  height: var(--ih-nav-h) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.006em !important;
  color: var(--ih-ink) !important;
  white-space: nowrap !important;
}

#ideal-hero-nav .ih-mark,
#ideal-hero-isolated .ih-mark {
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  flex: none !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 28% 22%, var(--ih-amber), transparent 58%),
    radial-gradient(circle at 76% 28%, var(--ih-rose), transparent 58%),
    radial-gradient(circle at 50% 84%, var(--ih-violet), transparent 62%),
    #15151a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(11, 11, 15, .25), 0 4px 10px -4px rgba(11, 11, 15, .35) !important;
}

#ideal-hero-nav .ih-links {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  margin: 0 auto !important
}

#ideal-hero-nav .ih-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: var(--ih-nav-h) !important;
  padding: 0 13px !important;
  border-radius: var(--ih-pill) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -.002em !important;
  color: var(--ih-soft) !important;
  white-space: nowrap !important;
  transition: color .22s ease, background-color .22s ease;
}

#ideal-hero-nav .ih-link:hover,
#ideal-hero-nav .ih-item.ih-open>.ih-link,
#ideal-hero-nav .ih-item:focus-within>.ih-link {
  color: var(--ih-ink) !important;
  background: rgba(11, 11, 15, .04) !important
}

#ideal-hero-nav .ih-chev {
  width: 11px !important;
  height: 11px !important;
  opacity: .55;
  transition: transform .3s var(--ih-spring), opacity .2s ease
}

#ideal-hero-nav .ih-item.ih-open .ih-chev,
#ideal-hero-nav .ih-item:focus-within .ih-chev {
  transform: rotate(180deg);
  opacity: .85
}

#ideal-hero-nav .ih-item {
  position: relative !important;
  display: inline-flex !important
}

#ideal-hero-nav .ih-item.ih-open,
#ideal-hero-nav .ih-item:focus-within {
  z-index: var(--ih-z-dropdown) !important
}

#ideal-hero-nav .ih-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
  flex: none !important
}

#ideal-hero-nav .ih-textlink {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--ih-nav-h) !important;
  padding: 0 12px !important;
  border-radius: var(--ih-pill) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -.002em !important;
  color: var(--ih-soft) !important;
  white-space: nowrap !important;
  transition: color .22s ease;
}

#ideal-hero-nav .ih-textlink:hover {
  color: var(--ih-ink) !important
}

/* ==========================================================
   BUTTONS — gradient fill + inner highlight + layered shadow
   ========================================================== */
#ideal-hero-nav .ih-btn,
#ideal-hero-isolated .ih-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 12px 20px !important;
  border-radius: var(--ih-pill) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -.004em !important;
  white-space: nowrap !important;
  transition: transform .24s var(--ih-spring), box-shadow .28s var(--ih-ease), background .28s ease, filter .28s ease;
}

#ideal-hero-nav .ih-btn-dark,
#ideal-hero-isolated .ih-btn-dark {
  background: linear-gradient(180deg, #2a2a32 0%, #101015 52%, #08080b 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 1px 2px rgba(11, 11, 15, .24),
    0 8px 18px -8px rgba(11, 11, 15, .45) !important;
}

#ideal-hero-nav .ih-btn-dark:hover,
#ideal-hero-isolated .ih-btn-dark:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #34343d 0%, #16161c 52%, #0c0c11 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    0 2px 4px rgba(11, 11, 15, .22),
    0 14px 28px -10px rgba(11, 11, 15, .5) !important;
}

#ideal-hero-nav .ih-btn-dark:active,
#ideal-hero-isolated .ih-btn-dark:active {
  transform: translateY(0);
  filter: brightness(.94)
}

#ideal-hero-nav .ih-btn-ghost,
#ideal-hero-isolated .ih-btn-ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .74)) !important;
  border: 1px solid var(--ih-line2) !important;
  color: var(--ih-ink) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--ih-ring), var(--ih-sh-1) !important;
  /* keeps this on its own compositor layer at all times, not just mid-hover —
     without it, a ghost button sitting over another blurred layer (e.g. the
     Final CTA's blobs) can flicker on hover: the transform transition forces
     the browser to re-promote the layer while backdrop-filter is resampling
     an already-blurred backdrop, and the two recomposite out of sync. */
  will-change: transform;
}

#ideal-hero-nav .ih-btn-ghost:hover,
#ideal-hero-isolated .ih-btn-ghost:hover {
  transform: translateY(-1px);
  background: #fff !important;
  box-shadow: var(--ih-ring), 0 2px 4px rgba(11, 11, 15, .05), 0 12px 26px -12px rgba(11, 11, 15, .2) !important;
}

#ideal-hero-nav .ih-btn-ghost:active,
#ideal-hero-isolated .ih-btn-ghost:active {
  transform: translateY(0)
}

/* buttons inside the bar inherit their height from the navbar rhythm */
#ideal-hero-nav .ih-nav .ih-btn {
  height: var(--ih-nav-h) !important;
  padding: 0 clamp(16px, 1.5vw, 19px) !important;
  font-size: 13.5px !important;
  flex: none !important;
}

/* ==========================================================
   MEGA MENU
   ========================================================== */
#ideal-hero-nav .ih-mega {
  position: absolute !important;
  top: calc(100% + var(--ih-nav-gap) + 8px) !important;
  left: 50% !important;
  z-index: var(--ih-z-dropdown) !important;
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.2fr !important;
  gap: 26px !important;
  padding: 24px !important;
  border: 1px solid rgba(11, 11, 15, .07) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .92)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
  box-shadow: var(--ih-ring), var(--ih-sh-3) !important;
  text-align: left !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(-50%, -12px) scale(.96);
  transform-origin: top center;
  transition: opacity .26s var(--ih-ease), transform .4s var(--ih-spring), visibility .4s;
}

#ideal-hero-nav .ih-item.ih-open .ih-mega,
#ideal-hero-nav .ih-item:focus-within .ih-mega {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) scale(1)
}

/* the gap between trigger and panel was dead space, so the menu closed while the
   cursor crossed it. This invisible bridge keeps hover continuous. */
#ideal-hero-nav .ih-mega::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(-1 * (var(--ih-nav-gap) + 10px)) !important;
  height: calc(var(--ih-nav-gap) + 10px) !important;
  background: transparent !important;
}

#ideal-hero-nav .ih-mega>* {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .32s var(--ih-ease), transform .42s var(--ih-spring);
  transition-delay: 0ms
}

#ideal-hero-nav .ih-item.ih-open .ih-mega>*,
#ideal-hero-nav .ih-item:focus-within .ih-mega>* {
  opacity: 1;
  transform: none;
  transition-delay: calc(70ms + var(--ih-i, 0) * 60ms)
}

#ideal-hero-nav .ih-mega-title {
  margin: 0 0 13px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  color: var(--ih-faint) !important;
}

#ideal-hero-nav .ih-list {
  display: grid !important;
  gap: 1px !important
}

#ideal-hero-nav .ih-list a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  margin-left: -10px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--ih-soft) !important;
  transition: background-color .2s ease, color .2s ease, transform .24s var(--ih-ease);
}

#ideal-hero-nav .ih-list a::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  flex: none !important;
  border-radius: 50% !important;
  background: rgba(11, 11, 15, .18) !important;
  transition: background .2s ease, transform .24s var(--ih-spring);
}

#ideal-hero-nav .ih-list a:hover {
  background: rgba(11, 11, 15, .04) !important;
  color: var(--ih-ink) !important;
  transform: translateX(2px)
}

#ideal-hero-nav .ih-list a:hover::before {
  background: var(--ih-violet) !important;
  transform: scale(1.25)
}

#ideal-hero-nav .ih-card {
  padding: 18px !important;
  border: 1px solid rgba(11, 11, 15, .06) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)),
    linear-gradient(152deg, rgba(139, 92, 246, .13), rgba(56, 189, 248, .09) 46%, rgba(251, 113, 133, .12)) !important;
  box-shadow: var(--ih-ring) !important;
}

#ideal-hero-nav .ih-card h4 {
  margin: 0 0 7px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.006em !important;
  color: var(--ih-ink) !important
}

#ideal-hero-nav .ih-card p {
  margin: 0 0 14px !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--ih-soft) !important
}

#ideal-hero-nav .ih-card a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.006em !important;
  color: var(--ih-ink) !important;
  transition: gap .26s var(--ih-ease)
}

#ideal-hero-nav .ih-card a:hover {
  gap: 11px !important
}

/* ==========================================================
   MOBILE MENU
   ========================================================== */
#ideal-hero-nav .ih-burger {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: var(--ih-nav-h) !important;
  height: var(--ih-nav-h) !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 13px !important;
  color: var(--ih-ink) !important;
  transition: background-color .22s ease;
}

#ideal-hero-nav .ih-burger:hover {
  background: rgba(11, 11, 15, .05) !important
}

#ideal-hero-nav .ih-burger:active {
  background: rgba(11, 11, 15, .08) !important
}

#ideal-hero-nav .ih-burger svg {
  position: absolute !important;
  width: 19px !important;
  height: 19px !important;
  transition: opacity .24s var(--ih-ease), transform .38s var(--ih-spring)
}

#ideal-hero-nav .ih-burger .ih-x {
  opacity: 0;
  transform: rotate(-90deg) scale(.6)
}

#ideal-hero-nav .ih-toggle:checked~.ih-nav-outer .ih-burger .ih-x {
  opacity: 1;
  transform: none
}

#ideal-hero-nav .ih-toggle:checked~.ih-nav-outer .ih-burger .ih-bars {
  opacity: 0;
  transform: rotate(90deg) scale(.6)
}

#ideal-hero-nav .ih-scrim {
  position: fixed !important;
  top: var(--ih-adminbar) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: var(--ih-z-scrim) !important;
  background: radial-gradient(120% 80% at 50% 0%, rgba(11, 11, 15, .22), rgba(11, 11, 15, .42)) !important;
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  backdrop-filter: blur(3px) saturate(120%);
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .3s linear, visibility .3s;
}

#ideal-hero-nav .ih-toggle:checked~.ih-scrim {
  opacity: 1 !important;
  visibility: visible !important
}

#ideal-hero-nav .ih-mobile {
  position: fixed !important;
  top: calc(var(--ih-nav-top) + var(--ih-adminbar) + var(--ih-nav-h) + var(--ih-nav-gap) * 2 + 10px) !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  z-index: var(--ih-z-panel) !important;
  max-height: calc(100dvh - var(--ih-nav-top) - var(--ih-adminbar) - var(--ih-nav-h) - var(--ih-nav-gap) * 2 - 28px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y !important;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom)) !important;
  border: 1px solid rgba(11, 11, 15, .07) !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(255, 255, 255, .96)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--ih-ring), var(--ih-sh-3) !important;
  text-align: left !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-16px) scale(.97);
  transform-origin: top center;
  transition: opacity .24s linear, transform .62s var(--ih-spring-panel), visibility .62s;
}

#ideal-hero-nav .ih-toggle:checked~.ih-mobile {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none
}

#ideal-hero-nav .ih-mobile>* {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .26s linear, transform .5s var(--ih-spring-panel)
}

#ideal-hero-nav .ih-toggle:checked~.ih-mobile>* {
  opacity: 1;
  transform: none;
  transition-delay: calc(90ms + var(--ih-i, 0) * 65ms)
}

#ideal-hero-nav .ih-mobile .ih-list a {
  padding: 11px 12px !important;
  margin-left: -12px !important;
  font-size: 15px !important;
  min-height: 44px !important;
}

#ideal-hero-nav .ih-mgroup+.ih-mgroup {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--ih-line) !important
}

#ideal-hero-nav .ih-mactions {
  display: grid !important;
  gap: 9px !important;
  margin-top: 18px !important
}

#ideal-hero-nav .ih-mactions .ih-btn {
  width: 100% !important;
  height: 48px !important;
  padding: 0 18px !important;
  font-size: 15px !important
}

/* ==========================================================
   HERO
   ========================================================== */
#ideal-hero-isolated .ih-hero {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 0 !important;
  padding: clamp(168px, 23vw, 244px) var(--ih-pad) 0 !important;
}

#ideal-hero-isolated .ih-canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important
}

#ideal-hero-isolated .ih-blob {
  position: absolute !important;
  display: block !important;
  border-radius: 50% !important;
  filter: blur(104px) saturate(112%);
  will-change: transform
}

#ideal-hero-isolated .ih-b1 {
  width: 58vw !important;
  height: 44vw !important;
  min-width: 340px;
  min-height: 260px;
  top: -16vw !important;
  left: -8vw !important;
  background: var(--ih-amber) !important;
  opacity: .44;
  animation: ih-drift-a 26s ease-in-out infinite alternate
}

#ideal-hero-isolated .ih-b2 {
  width: 52vw !important;
  height: 40vw !important;
  min-width: 300px;
  min-height: 240px;
  top: -14vw !important;
  left: 18% !important;
  background: var(--ih-orange) !important;
  opacity: .38;
  animation: ih-drift-b 31s ease-in-out infinite alternate
}

#ideal-hero-isolated .ih-b3 {
  width: 54vw !important;
  height: 42vw !important;
  min-width: 320px;
  min-height: 250px;
  top: -18vw !important;
  left: 41% !important;
  background: var(--ih-rose) !important;
  opacity: .37;
  animation: ih-drift-a 23s ease-in-out infinite alternate-reverse
}

#ideal-hero-isolated .ih-b4 {
  width: 56vw !important;
  height: 43vw !important;
  min-width: 320px;
  min-height: 250px;
  top: -15vw !important;
  left: 60% !important;
  background: var(--ih-violet) !important;
  opacity: .36;
  animation: ih-drift-b 29s ease-in-out infinite alternate
}

#ideal-hero-isolated .ih-b5 {
  width: 54vw !important;
  height: 41vw !important;
  min-width: 300px;
  min-height: 240px;
  top: -18vw !important;
  right: -9vw !important;
  background: var(--ih-sky) !important;
  opacity: .38;
  animation: ih-drift-a 34s ease-in-out infinite alternate
}

#ideal-hero-isolated .ih-b6 {
  width: 34vw !important;
  height: 26vw !important;
  top: -8vw !important;
  left: 32% !important;
  background: var(--ih-teal) !important;
  opacity: .2;
  animation: ih-drift-b 21s ease-in-out infinite alternate-reverse
}

@keyframes ih-drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1)
  }

  to {
    transform: translate3d(3vw, 2vw, 0) scale(1.1)
  }
}

@keyframes ih-drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.06)
  }

  to {
    transform: translate3d(-2.6vw, 2.6vw, 0) scale(.96)
  }
}

/* veil that calms the color band + soft light behind the headline */
#ideal-hero-isolated .ih-veil {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(64% 44% at 50% 28%, rgba(255, 255, 255, .74), transparent 74%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .16) 10%, rgba(255, 255, 255, .62) 28%, rgba(255, 255, 255, .92) 46%, #fff 60%) !important;
}

/* fine grain — breaks up banding and the "digital" look of flat gradients */
#ideal-hero-isolated .ih-noise {
  position: absolute !important;
  inset: 0 !important;
  opacity: .05 !important;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 160px 160px !important;
}

#ideal-hero-isolated .ih-inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important
}

/* ---- announcement pill ---- */
#ideal-hero-isolated .ih-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: 100% !important;
  margin: 0 0 clamp(22px, 3.6vw, 32px) !important;
  padding: 5px 6px 5px 14px !important;
  border: 1px solid var(--ih-line2) !important;
  border-radius: var(--ih-pill) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7)) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--ih-ring), var(--ih-sh-1) !important;
  font-size: clamp(12px, 1.6vw, 12.5px) !important;
  font-weight: 500 !important;
  letter-spacing: -.002em !important;
  color: var(--ih-ink) !important;
  text-align: left !important;
  line-height: 1.35 !important;
  transition: transform .26s var(--ih-spring), box-shadow .3s var(--ih-ease);
}

#ideal-hero-isolated .ih-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--ih-ring), 0 2px 4px rgba(11, 11, 15, .05), 0 14px 30px -14px rgba(11, 11, 15, .24) !important
}

#ideal-hero-isolated .ih-dot {
  position: relative !important;
  width: 6px !important;
  height: 6px !important;
  flex: none !important;
  border-radius: 50% !important;
  background: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .16) !important;
}

#ideal-hero-isolated .ih-dot::after {
  content: "" !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(22, 163, 74, .5) !important;
  animation: ih-ping 2.6s var(--ih-ease) infinite;
}

@keyframes ih-ping {
  0% {
    transform: scale(.7);
    opacity: .8
  }

  70% {
    transform: scale(1.9);
    opacity: 0
  }

  100% {
    transform: scale(1.9);
    opacity: 0
  }
}

#ideal-hero-isolated .ih-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  flex: none !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #2a2a32, #0b0b0f) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px -2px rgba(11, 11, 15, .4) !important;
}

#ideal-hero-isolated .ih-arrow svg {
  width: 10px !important;
  height: 10px !important
}

/* ---- headline ---- */
#ideal-hero-isolated .ih-title {
  display: block !important;
  max-width: 15ch !important;
  margin: 0 auto !important;
  font-size: clamp(2.1rem, 7vw, 4.4rem) !important;
  line-height: 1.02 !important;
  font-weight: 600 !important;
  letter-spacing: -.028em !important;
  color: var(--ih-ink) !important;
  text-wrap: balance;
}

#ideal-hero-isolated .ih-title em {
  font-style: normal !important;
  background: linear-gradient(100deg, #ef8a0a, #f04f6a 34%, #7b4cf0 66%, #25a3ef) !important;
  background-size: 180% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion:no-preference) {
  #ideal-hero-isolated .ih-title em {
    animation: ih-shine 16s linear infinite
  }

  @keyframes ih-shine {
    0% {
      background-position: 0% 50%
    }

    100% {
      background-position: 180% 50%
    }
  }
}

#ideal-hero-isolated .ih-sub {
  max-width: 582px !important;
  margin: clamp(18px, 2.6vw, 24px) auto 0 !important;
  font-size: clamp(.95rem, 2.4vw, 1.075rem) !important;
  line-height: 1.66 !important;
  letter-spacing: -.004em !important;
  color: var(--ih-soft) !important;
  text-wrap: pretty;
}

#ideal-hero-isolated .ih-ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: clamp(26px, 3.8vw, 36px) !important
}

#ideal-hero-isolated .ih-ctas .ih-btn {
  height: 46px !important;
  padding: 0 26px !important;
  font-size: 14.5px !important
}

/* ==========================================================
   BROWSER FRAME + DASHBOARD
   ========================================================== */
#ideal-hero-isolated .ih-framewrap {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: clamp(44px, 7.5vw, 84px) auto 0 !important
}

#ideal-hero-isolated .ih-frame {
  position: relative !important;
  padding: clamp(6px, 1vw, 9px) !important;
  border: 1px solid rgba(11, 11, 15, .08) !important;
  border-radius: clamp(16px, 2.2vw, 20px) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .62)) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--ih-ring), var(--ih-sh-3) !important;
}

#ideal-hero-isolated .ih-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 7px 12px !important
}

#ideal-hero-isolated .ih-dots {
  display: flex !important;
  gap: 6px !important;
  flex: none !important
}

#ideal-hero-isolated .ih-dots i {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: rgba(11, 11, 15, .13) !important;
  box-shadow: inset 0 1px 1px rgba(11, 11, 15, .06) !important
}

#ideal-hero-isolated .ih-url {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  flex: 1 1 auto !important;
  height: 28px !important;
  border: 1px solid rgba(11, 11, 15, .06) !important;
  border-radius: var(--ih-pill) !important;
  background: rgba(11, 11, 15, .035) !important;
  box-shadow: inset 0 1px 2px rgba(11, 11, 15, .04) !important;
  font-size: 11.5px !important;
  letter-spacing: -.002em !important;
  color: var(--ih-faint) !important;
}

#ideal-hero-isolated .ih-url svg {
  width: 10px !important;
  height: 10px !important;
  opacity: .55
}

#ideal-hero-isolated .ih-winbtns {
  display: flex !important;
  gap: 5px !important;
  flex: none !important
}

#ideal-hero-isolated .ih-winbtns i {
  display: block !important;
  width: 13px !important;
  height: 5px !important;
  border-radius: 3px !important;
  background: rgba(11, 11, 15, .11) !important
}

#ideal-hero-isolated .ih-app {
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr) !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(11, 11, 15, .06), 0 1px 2px rgba(11, 11, 15, .03) !important;
  overflow: hidden !important;
  text-align: left !important;
}

#ideal-hero-isolated .ih-side {
  padding: 18px 15px !important;
  border-right: 1px solid var(--ih-line) !important;
  background: linear-gradient(180deg, #fcfcfd, #fafafb) !important
}

#ideal-hero-isolated .ih-sbrand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.006em !important
}

#ideal-hero-isolated .ih-sbrand .ih-mark {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important
}

#ideal-hero-isolated .ih-slabel {
  margin: 0 0 9px !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  color: var(--ih-faint) !important
}

#ideal-hero-isolated .ih-snav {
  display: grid !important;
  gap: 2px !important;
  margin: 0 0 20px !important
}

#ideal-hero-isolated .ih-snav li {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: 12.5px !important;
  color: var(--ih-soft) !important
}

#ideal-hero-isolated .ih-snav li.ih-on {
  background: #fff !important;
  color: var(--ih-ink) !important;
  font-weight: 500 !important;
  box-shadow: 0 0 0 1px rgba(11, 11, 15, .06), 0 1px 2px rgba(11, 11, 15, .04) !important;
}

#ideal-hero-isolated .ih-snav i {
  display: block !important;
  width: 5px !important;
  height: 5px !important;
  flex: none !important;
  border-radius: 50% !important;
  background: rgba(11, 11, 15, .18) !important
}

#ideal-hero-isolated .ih-snav li.ih-on i {
  background: var(--ih-violet) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .14) !important
}

#ideal-hero-isolated .ih-main {
  padding: clamp(16px, 2.2vw, 20px) clamp(16px, 2.4vw, 22px) 22px !important;
  min-width: 0 !important
}

#ideal-hero-isolated .ih-mhead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 18px !important
}

#ideal-hero-isolated .ih-mhead h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.014em !important;
  color: var(--ih-ink) !important
}

#ideal-hero-isolated .ih-mhead p {
  margin: 4px 0 0 !important;
  font-size: 11px !important;
  letter-spacing: -.002em !important;
  color: var(--ih-faint) !important
}

#ideal-hero-isolated .ih-chip {
  flex: none !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(11, 11, 15, .08) !important;
  border-radius: var(--ih-pill) !important;
  background: linear-gradient(180deg, #fff, #fafafb) !important;
  box-shadow: 0 1px 2px rgba(11, 11, 15, .03) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ih-soft) !important;
  white-space: nowrap !important;
}

#ideal-hero-isolated .ih-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 16px !important
}

#ideal-hero-isolated .ih-stat {
  padding: 13px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #fff, #fcfcfd) !important;
  box-shadow: 0 0 0 1px rgba(11, 11, 15, .055), 0 1px 2px rgba(11, 11, 15, .03) !important;
}

#ideal-hero-isolated .ih-stat span {
  display: block !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--ih-faint) !important
}

#ideal-hero-isolated .ih-stat strong {
  display: block !important;
  margin: 7px 0 4px !important;
  font-size: clamp(18px, 2.5vw, 22px) !important;
  font-weight: 600 !important;
  letter-spacing: -.022em !important;
  color: var(--ih-ink) !important;
  font-variant-numeric: tabular-nums
}

#ideal-hero-isolated .ih-stat small {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: #15803d !important
}

#ideal-hero-isolated .ih-chart {
  position: relative !important;
  padding: 15px 15px 13px !important;
  margin-bottom: 15px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #fff, #fcfcfd) !important;
  box-shadow: 0 0 0 1px rgba(11, 11, 15, .055) !important;
}

#ideal-hero-isolated .ih-ctop {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 14px !important
}

#ideal-hero-isolated .ih-ctop b {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -.006em !important;
  color: var(--ih-ink) !important
}

#ideal-hero-isolated .ih-ctop span {
  font-size: 10.5px !important;
  color: var(--ih-faint) !important;
  white-space: nowrap !important
}

#ideal-hero-isolated .ih-bars {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: clamp(3px, .7vw, 6px) !important;
  height: clamp(66px, 11vw, 100px) !important;
  background-image: repeating-linear-gradient(to top, rgba(11, 11, 15, .045) 0 1px, transparent 1px 25%) !important;
}

#ideal-hero-isolated .ih-bars i {
  display: block !important;
  flex: 1 1 0 !important;
  border-radius: 5px 5px 2px 2px !important;
  background: linear-gradient(to top, rgba(139, 92, 246, .16), rgba(139, 92, 246, .7)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45) !important;
  transform-origin: bottom center;
}

#ideal-hero-isolated .ih-bars i:nth-child(3n+1) {
  background: linear-gradient(to top, rgba(56, 189, 248, .16), rgba(56, 189, 248, .7)) !important
}

#ideal-hero-isolated .ih-bars i:nth-child(3n+2) {
  background: linear-gradient(to top, rgba(251, 113, 133, .16), rgba(251, 113, 133, .7)) !important
}

#ideal-hero-isolated .ih-bars i:last-child {
  background: linear-gradient(to top, rgba(251, 191, 36, .24), rgba(249, 115, 22, .85)) !important
}

#ideal-hero-isolated .ih-rows {
  display: grid !important;
  gap: 1px !important;
  border-radius: 12px !important;
  background: var(--ih-line) !important;
  box-shadow: 0 0 0 1px rgba(11, 11, 15, .055) !important;
  overflow: hidden !important;
}

#ideal-hero-isolated .ih-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 14px !important;
  background: #fff !important;
  transition: background-color .2s ease;
}

#ideal-hero-isolated .ih-who {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important
}

#ideal-hero-isolated .ih-av {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  flex: none !important;
  border-radius: 50% !important;
  background: linear-gradient(140deg, #8b5cf6, #38bdf8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(11, 11, 15, .14) !important;
}

#ideal-hero-isolated .ih-row:nth-child(2) .ih-av {
  background: linear-gradient(140deg, #fb7185, #fbbf24) !important
}

#ideal-hero-isolated .ih-row:nth-child(3) .ih-av {
  background: linear-gradient(140deg, #2dd4bf, #38bdf8) !important
}

#ideal-hero-isolated .ih-row:nth-child(4) .ih-av {
  background: linear-gradient(140deg, #fbbf24, #fb923c) !important
}

#ideal-hero-isolated .ih-who b {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -.004em !important;
  color: var(--ih-ink) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important
}

#ideal-hero-isolated .ih-who em {
  display: block !important;
  margin-top: 1px !important;
  font-size: 10.5px !important;
  color: var(--ih-faint) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important
}

#ideal-hero-isolated .ih-score {
  font-size: 11px !important;
  color: var(--ih-soft) !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums
}

#ideal-hero-isolated .ih-tag {
  padding: 4px 10px !important;
  border-radius: var(--ih-pill) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  background: rgba(22, 163, 74, .1) !important;
  color: #15803d !important;
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .14) !important;
}

#ideal-hero-isolated .ih-tag.ih-warm {
  background: rgba(249, 115, 22, .1) !important;
  color: #c2410c !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .16) !important
}

#ideal-hero-isolated .ih-tag.ih-new {
  background: rgba(139, 92, 246, .1) !important;
  color: #6d28d9 !important;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .16) !important
}

#ideal-hero-isolated .ih-note {
  position: relative !important;
  padding: clamp(36px, 5.2vw, 60px) var(--ih-pad) clamp(34px, 5vw, 48px) !important;
  font-size: 12px !important;
  letter-spacing: -.002em !important;
  color: var(--ih-faint) !important;
  line-height: 1.6 !important;
}

/* Final CTA footnote sits directly under the buttons, so it only needs
   top padding — used instead of an inline style="padding:..." override. */
#ideal-hero-isolated .ih-note-tight {
  padding: 24px 0 0 !important;
}

/* ==========================================================
   ENTRANCE SEQUENCE
   ========================================================== */
@media (prefers-reduced-motion:no-preference) {
  /* Initial page-load entrance: start the hero slightly blurred and lifted,
     then sharpen/fade it in after the JS-ready frame. */
  #ideal-hero-isolated.ih-js .ih-rise {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
  }

  #ideal-hero-isolated.ih-js.ih-ready .ih-rise {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity .75s var(--ih-ease), transform .9s var(--ih-spring), filter .75s var(--ih-ease);
    transition-delay: calc(var(--ih-i, 0) * 95ms)
  }

  #ideal-hero-isolated .ih-bars i {
    transform: none;
  }

  #ideal-hero-isolated.ih-js.ih-ready .ih-bars i {
    transform: none;
    transition: transform .85s var(--ih-spring);
    transition-delay: calc(700ms + var(--ih-i, 0) * 45ms)
  }
}

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

  #ideal-hero-isolated .ih-blob,
  #ideal-hero-isolated .ih-dot::after,
  #ideal-hero-isolated .ih-title em {
    animation: none !important
  }

  #ideal-hero-nav *,
  #ideal-hero-isolated * {
    transition-duration: .01ms !important
  }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1080px) {
  #ideal-hero-nav {
    --ih-maxw-stuck: 780px
  }

  #ideal-hero-isolated .ih-app {
    grid-template-columns: 172px minmax(0, 1fr) !important
  }
}

@media (max-width:960px) {

  #ideal-hero-nav .ih-links,
  #ideal-hero-nav .ih-actions .ih-textlink,
  #ideal-hero-nav .ih-actions .ih-btn-dark {
    display: none !important
  }

  #ideal-hero-nav .ih-burger {
    display: inline-flex !important
  }

  #ideal-hero-nav {
    --ih-nav-inset: 8px
  }

  #ideal-hero-nav,
  #ideal-hero-isolated {
    --ih-maxw-stuck: var(--ih-maxw);
    --ih-pin: 0px;
    --ih-exit: 0px
  }

  #ideal-hero-isolated .ih-side {
    display: none !important
  }

  #ideal-hero-isolated .ih-app {
    grid-template-columns: minmax(0, 1fr) !important
  }
}

@media (max-width:760px) {

  #ideal-hero-nav,
  #ideal-hero-isolated {
    --ih-nav-top: 12px
  }

  #ideal-hero-isolated .ih-b2,
  #ideal-hero-isolated .ih-b6 {
    display: none !important
  }

  #ideal-hero-isolated .ih-blob {
    filter: blur(70px) saturate(110%)
  }

  #ideal-hero-isolated .ih-noise {
    opacity: .04 !important
  }

  #ideal-hero-isolated .ih-title {
    max-width: 20ch !important;
    letter-spacing: -.022em !important
  }

  #ideal-hero-isolated .ih-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  #ideal-hero-isolated .ih-score {
    display: none !important
  }

  #ideal-hero-isolated .ih-row {
    grid-template-columns: minmax(0, 1fr) auto !important
  }
}

@media (max-width:560px) {
  #ideal-hero-nav {
    --ih-nav-h: 38px;
    --ih-nav-gap: 5px;
    --ih-nav-inset: 7px
  }

  #ideal-hero-nav .ih-nav {
    gap: 6px !important
  }

  #ideal-hero-nav .ih-brand {
    font-size: 14.5px !important
  }

  #ideal-hero-nav .ih-nav .ih-btn {
    padding: 0 15px !important;
    font-size: 13px !important
  }

  #ideal-hero-isolated .ih-ctas {
    flex-direction: column !important;
    align-items: stretch !important
  }

  #ideal-hero-isolated .ih-ctas .ih-btn {
    width: 100% !important;
    height: 48px !important
  }

  #ideal-hero-isolated .ih-pill {
    font-size: 11.5px !important;
    padding: 5px 5px 5px 12px !important;
    gap: 8px !important
  }

  #ideal-hero-isolated .ih-stats {
    grid-template-columns: minmax(0, 1fr) !important
  }

  #ideal-hero-isolated .ih-winbtns {
    display: none !important
  }

  #ideal-hero-isolated .ih-mhead .ih-chip {
    display: none !important
  }

  #ideal-hero-nav .ih-mega {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important
  }
}

@media (max-width:380px) {
  #ideal-hero-nav .ih-brand .ih-bt {
    display: none !important
  }

  #ideal-hero-isolated .ih-title {
    font-size: 1.9rem !important
  }
}

@media (max-height:520px) {
  #ideal-hero-nav .ih-mobile {
    max-height: calc(100dvh - var(--ih-adminbar) - 72px) !important
  }
}

/* ==========================================================
   LANDING SECTIONS — shared primitives
   Everything below reuses the hero's tokens, so a palette or
   typography change still flows through the whole page.
   ========================================================== */
#ideal-hero-isolated .ih-section {
  position: relative !important;
  display: block !important;
  padding: clamp(64px, 9vw, 120px) var(--ih-pad) !important;
  text-align: center !important;
}

#ideal-hero-isolated .ih-section-tint {
  background: linear-gradient(180deg, #fff, #fbfbfc 40%, #fafafb) !important;
  box-shadow: inset 0 1px 0 var(--ih-line), inset 0 -1px 0 var(--ih-line) !important;
}

#ideal-hero-isolated .ih-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
}

#ideal-hero-isolated .ih-wrap-narrow {
  max-width: 760px !important
}

/* section heading group */
#ideal-hero-isolated .ih-eyebrow {
  display: inline-block !important;
  margin: 0 0 14px !important;
  padding: 5px 12px !important;
  border-radius: var(--ih-pill) !important;
  background: rgba(11, 11, 15, .045) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  color: var(--ih-soft) !important;
}

#ideal-hero-isolated .ih-h2 {
  display: block !important;
  max-width: 22ch !important;
  margin: 0 auto !important;
  font-size: clamp(1.65rem, 4.4vw, 2.6rem) !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  letter-spacing: -.032em !important;
  color: var(--ih-ink) !important;
  text-wrap: balance;
}

#ideal-hero-isolated .ih-h2 em {
  font-style: normal !important;
  background: linear-gradient(100deg, #ef8a0a, #f04f6a 34%, #7b4cf0 66%, #25a3ef) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

#ideal-hero-isolated .ih-lede {
  max-width: 600px !important;
  margin: 16px auto 0 !important;
  font-size: clamp(.95rem, 2.2vw, 1.05rem) !important;
  line-height: 1.66 !important;
  letter-spacing: -.008em !important;
  color: var(--ih-soft) !important;
  text-wrap: pretty;
}

#ideal-hero-isolated .ih-h3 {
  margin: 0 !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.022em !important;
  color: var(--ih-ink) !important;
}

#ideal-hero-isolated .ih-body {
  margin: 8px 0 0 !important;
  font-size: 13.5px !important;
  line-height: 1.62 !important;
  letter-spacing: -.004em !important;
  color: var(--ih-soft) !important;
}

/* ---------- surface card ---------- */
#ideal-hero-isolated .ih-card-s {
  position: relative !important;
  padding: 22px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #fff, #fcfcfd) !important;
  box-shadow: var(--ih-ring), 0 0 0 1px rgba(11, 11, 15, .055), 0 1px 2px rgba(11, 11, 15, .03) !important;
  text-align: left !important;
  transition: transform .35s var(--ih-spring-nav), box-shadow .35s var(--ih-ease);
}

#ideal-hero-isolated a.ih-card-s:hover,
#ideal-hero-isolated button.ih-card-s:hover,
#ideal-hero-isolated a.ih-card-s:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ih-ring), 0 0 0 1px rgba(11, 11, 15, .07), 0 12px 28px -12px rgba(11, 11, 15, .16) !important;
}

#ideal-hero-isolated .ih-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  margin-bottom: 14px !important;
  border-radius: 11px !important;
  background: linear-gradient(150deg, rgba(139, 92, 246, .14), rgba(56, 189, 248, .1)) !important;
  box-shadow: inset 0 0 0 1px rgba(11, 11, 15, .05) !important;
  color: #6d47d6 !important;
  transition: transform .3s var(--ih-spring-nav);
}

#ideal-hero-isolated .ih-icon svg {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 1.9 !important
}

/* icon glyph tinted to match its own chip instead of flat ink on every color */
#ideal-hero-isolated .ih-icon-amber {
  background: linear-gradient(150deg, rgba(251, 191, 36, .2), rgba(251, 146, 60, .12)) !important;
  color: #c2650c !important;
}

#ideal-hero-isolated .ih-icon-rose {
  background: linear-gradient(150deg, rgba(251, 113, 133, .18), rgba(251, 191, 36, .1)) !important;
  color: #c23b56 !important;
}

#ideal-hero-isolated .ih-icon-teal {
  background: linear-gradient(150deg, rgba(45, 212, 191, .18), rgba(56, 189, 248, .12)) !important;
  color: #0f8f83 !important;
}

#ideal-hero-isolated a.ih-card-s:hover .ih-icon,
#ideal-hero-isolated button.ih-card-s:hover .ih-icon,
#ideal-hero-isolated a.ih-card-s:focus-visible .ih-icon {
  transform: translateY(-1px) scale(1.04);
}

/* ==========================================================
   LOGO STRIP
   ========================================================== */
#ideal-hero-isolated .ih-proof {
  padding: clamp(28px, 4vw, 44px) var(--ih-pad) clamp(36px, 5vw, 56px) !important;
  text-align: center !important;
}

#ideal-hero-isolated .ih-proof p {
  margin: 0 0 20px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--ih-faint) !important;
}

/* ---- infinite marquee, right to left ----
   The track holds the logo list twice. It animates from 0 to -50%,
   so the second copy lands exactly where the first started and the
   loop is seamless. transform only, so it runs on the compositor. */
#ideal-hero-isolated .ih-marquee {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  /* soft edges instead of a hard cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  /* decorative only: no pointer interaction (no hover pause, no drag,
     no text selection); the page scrolls normally over it */
  pointer-events: none !important;
  cursor: default !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* CRITICAL — the scoped reset above applies max-width:100% to every descendant.
   Without overriding it here, the track is clamped to the container width, its
   copies get squeezed, and -50% resolves against the container instead of the
   content. That is exactly what produces a jump, uneven gaps and a speed that
   changes with viewport width. Both the track and each copy must opt out. */
#ideal-hero-isolated .ih-track,
#ideal-hero-isolated .ih-logos {
  max-width: none !important;
  min-width: auto !important;
  flex: 0 0 auto !important;
}

#ideal-hero-isolated .ih-track {
  display: flex !important;
  width: max-content !important;
  align-items: center !important;
  /* gap MUST stay 0: spacing between copies comes from each copy's padding-right.
   A gap here would be added between copies only, so -50% would no longer land
   on the start of a copy boundary and the loop would jump once per cycle. */
  gap: 0 !important;
  padding: 6px 0 !important;
  /* travel = exactly 2 of the 4 copies, so the duration is 2x the per-copy speed
   and the visual pace stays identical to a 2-copy track. */
  animation: ih-marquee calc(var(--ih-marquee-speed, 38s) * 2) linear infinite !important;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* 4 identical copies: -50% is exactly 2 copies, an integer boundary, so the
   loop is seamless with no fractional rounding. 4 copies also guarantee the
   track is wider than any ultra-wide viewport, so no empty gap can appear. */
@keyframes ih-marquee {
  from {
    transform: translate3d(0, 0, 0)
  }

  to {
    transform: translate3d(-50%, 0, 0)
  }
}

/* The logo strip keeps moving on hover (it only stops while being dragged,
   and is static for visitors who prefer reduced motion). */

#ideal-hero-isolated .ih-logos {
  display: flex !important;
  align-items: center !important;
  gap: clamp(30px, 5vw, 64px) !important;
  /* must equal the inner gap so the seam between copies is indistinguishable */
  padding-right: clamp(30px, 5vw, 64px) !important;
}

#ideal-hero-isolated .ih-logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: none !important;
  font-size: clamp(14px, 2vw, 16px) !important;
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
  color: rgba(11, 11, 15, .4) !important;
  transition: color .25s ease;
}

#ideal-hero-isolated .ih-logo span {
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
  border-radius: 5px !important;
  background: currentColor !important;
  opacity: .5;
}

#ideal-hero-isolated .ih-logo.ih-l2 span {
  border-radius: 50% !important
}

#ideal-hero-isolated .ih-logo.ih-l3 span {
  clip-path: polygon(50% 0, 100% 100%, 0 100%)
}

#ideal-hero-isolated .ih-logo.ih-l4 span {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)
}

#ideal-hero-isolated .ih-logo.ih-l5 span {
  border-radius: 5px 12px 5px 12px !important
}

#ideal-hero-isolated .ih-logo.ih-l6 span {
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%)
}

#ideal-hero-isolated .ih-logo.ih-l7 span {
  border-radius: 50% 5px 50% 5px !important
}

#ideal-hero-isolated .ih-logo.ih-l8 span {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)
}

/* reduced motion: stop the loop and center the first copy instead */
@media (prefers-reduced-motion:reduce) {
  #ideal-hero-isolated .ih-track {
    animation: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #ideal-hero-isolated .ih-logos {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding-right: 0 !important;
    max-width: 100% !important
  }

  #ideal-hero-isolated .ih-logos[aria-hidden="true"] {
    display: none !important
  }

  #ideal-hero-isolated .ih-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ==========================================================
   FEATURE BENTO
   ========================================================== */
#ideal-hero-isolated .ih-bento {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: clamp(34px, 5vw, 52px) !important;
}

#ideal-hero-isolated .ih-bento .ih-wide {
  grid-column: span 2 !important
}

#ideal-hero-isolated .ih-card-s.ih-tall {
  display: flex !important;
  flex-direction: column !important
}

/* mini visual inside a feature card */
#ideal-hero-isolated .ih-mini {
  margin-top: 18px !important;
  padding: 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #fcfcfd, #fafafb) !important;
  box-shadow: inset 0 0 0 1px rgba(11, 11, 15, .05) !important;
}

#ideal-hero-isolated .ih-mini-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 7px 0 !important;
  font-size: 11.5px !important;
  color: var(--ih-soft) !important;
}

#ideal-hero-isolated .ih-mini-row+.ih-mini-row {
  border-top: 1px solid var(--ih-line) !important
}

#ideal-hero-isolated .ih-meter {
  position: relative !important;
  flex: 1 1 auto !important;
  height: 5px !important;
  border-radius: var(--ih-pill) !important;
  background: rgba(11, 11, 15, .07) !important;
  overflow: hidden !important;
}

#ideal-hero-isolated .ih-meter i {
  /* inset must be 0 on all sides: with right:auto the element has width:auto,
   which computes to 0 for an absolutely positioned box, so scaleX had nothing
   to scale and the meters always rendered empty. */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #8b5cf6, #38bdf8) !important;
  transform-origin: left center;
  transform: scaleX(1);
}



#ideal-hero-isolated .ih-mini-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap !important;
  color: var(--ih-ink) !important;
  font-weight: 500 !important
}

/* ==========================================================
   STEPS
   ========================================================== */
#ideal-hero-isolated .ih-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: clamp(34px, 5vw, 52px) !important;
  counter-reset: ih-step;
}

#ideal-hero-isolated .ih-step {
  position: relative !important;
  padding-top: 46px !important
}

#ideal-hero-isolated .ih-step::before {
  counter-increment: ih-step;
  content: counter(ih-step, decimal-leading-zero) !important;
  position: absolute !important;
  top: 22px !important;
  left: 22px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  color: var(--ih-faint) !important;
  font-variant-numeric: tabular-nums;
}

/* connector line between steps */
#ideal-hero-isolated .ih-step:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  top: 29px !important;
  right: -14px !important;
  width: 14px !important;
  height: 1px !important;
  background: var(--ih-line2) !important;
}

/* ==========================================================
   TESTIMONIALS — horizontal slider
   Native horizontal scroll + scroll-snap does the actual moving,
   so the browser's own scroll/drag/touch handling is always the
   source of truth — nothing in JS can fight it or freeze it. JS
   only reads scrollLeft (for the dots) and writes it (dot clicks,
   autoplay, mouse-drag). */
#ideal-hero-isolated .ih-slider {
  position: relative !important;
  margin-top: clamp(34px, 5vw, 52px) !important;
}

#ideal-hero-isolated .ih-slider-viewport {
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  cursor: grab !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  /* explicit horizontal-only touch handling: some Android/Chrome builds
     default an unset touch-action on a scroll-snap flex row to the
     page's own vertical scroll, so a horizontal swipe never starts and
     the cards just sit there instead of paging. pan-x tells the browser
     this element owns horizontal drags; vertical page scroll still
     passes through untouched. */
  touch-action: pan-x !important;
  /* extra top/bottom padding so overflow-y:hidden clips outside the
     card's own box-shadow/border and the hover lift (translateY(-3px)),
     not the card itself; the matching negative margin keeps the
     section's outer spacing unchanged */
  padding: 16px 2px 26px !important;
  margin: -16px -2px -26px !important;
}

#ideal-hero-isolated .ih-slider-viewport::-webkit-scrollbar {
  display: none !important;
}

#ideal-hero-isolated .ih-slider-viewport.ih-slider-dragging {
  cursor: grabbing !important;
  scroll-snap-type: none !important;
}

#ideal-hero-isolated .ih-slide {
  flex: 0 0 auto !important;
  width: var(--ih-slide-w, 100%) !important;
  max-width: none !important;
  min-width: auto !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

#ideal-hero-isolated .ih-slider-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 22px !important;
}

#ideal-hero-isolated .ih-slider-dots {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#ideal-hero-isolated .ih-slider-dots button {
  width: 7px !important;
  height: 7px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--ih-line2) !important;
  cursor: pointer !important;
  transition: background .2s var(--ih-ease), width .2s var(--ih-ease);
}

#ideal-hero-isolated .ih-slider-dots button:hover {
  background: var(--ih-faint) !important;
}

#ideal-hero-isolated .ih-slider-dots button[aria-selected="true"] {
  width: 20px !important;
  background: var(--ih-violet) !important;
}

#ideal-hero-isolated .ih-quote {
  padding: 28px !important;
}

#ideal-hero-isolated .ih-quote p {
  margin: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  letter-spacing: -.008em !important;
  color: var(--ih-ink) !important;
}

#ideal-hero-isolated .ih-by {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--ih-line) !important;
}

#ideal-hero-isolated .ih-by .ih-av {
  width: 36px !important;
  height: 36px !important
}

#ideal-hero-isolated .ih-slide:nth-child(2) .ih-av,
#ideal-hero-isolated .ih-slide:nth-child(5) .ih-av {
  background: linear-gradient(140deg, #fb7185, #fbbf24) !important
}

#ideal-hero-isolated .ih-slide:nth-child(3) .ih-av,
#ideal-hero-isolated .ih-slide:nth-child(6) .ih-av {
  background: linear-gradient(140deg, #2dd4bf, #38bdf8) !important
}

#ideal-hero-isolated .ih-slide:nth-child(4) .ih-av {
  background: linear-gradient(140deg, #8b5cf6, #38bdf8) !important
}

#ideal-hero-isolated .ih-by b {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--ih-ink) !important
}

#ideal-hero-isolated .ih-by em {
  display: block !important;
  font-size: 12px !important;
  color: var(--ih-faint) !important
}

#ideal-hero-isolated .ih-stars {
  display: flex !important;
  gap: 2px !important;
  margin-bottom: 16px !important;
  color: #f59e0b !important
}

#ideal-hero-isolated .ih-stars svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
  stroke: none !important
}

/* ==========================================================
   PRICING
   ========================================================== */
#ideal-hero-isolated .ih-plans {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: clamp(34px, 5vw, 52px) !important;
  align-items: start !important;
}

#ideal-hero-isolated .ih-plan {
  display: flex !important;
  flex-direction: column !important;
  padding: 24px !important
}

#ideal-hero-isolated .ih-plan-top {
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--ih-line) !important
}

#ideal-hero-isolated .ih-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin: 14px 0 6px !important;
}

#ideal-hero-isolated .ih-price b {
  font-size: clamp(1.8rem, 4vw, 2.3rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.045em !important;
  color: var(--ih-ink) !important;
  font-variant-numeric: tabular-nums;
}

#ideal-hero-isolated .ih-price span {
  font-size: 12.5px !important;
  color: var(--ih-faint) !important
}

#ideal-hero-isolated .ih-feats {
  display: grid !important;
  gap: 9px !important;
  margin: 18px 0 22px !important
}

#ideal-hero-isolated .ih-feats li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--ih-soft) !important;
}

#ideal-hero-isolated .ih-feats svg {
  width: 14px !important;
  height: 14px !important;
  flex: none !important;
  margin-top: 2px !important;
  color: #16a34a !important;
  stroke-width: 2.6 !important;
}

#ideal-hero-isolated .ih-plan .ih-btn {
  width: 100% !important;
  height: 44px !important;
  margin-top: auto !important
}

/* featured plan */
#ideal-hero-isolated .ih-plan-hi {
  background: linear-gradient(180deg, #fff, #fbfaff) !important;
  box-shadow: var(--ih-ring), 0 0 0 1px rgba(139, 92, 246, .22), 0 18px 44px -20px rgba(139, 92, 246, .28) !important;
}

#ideal-hero-isolated .ih-badge {
  position: absolute !important;
  top: -1px !important;
  right: 22px !important;
  transform: translateY(-50%);
  padding: 5px 11px !important;
  border-radius: var(--ih-pill) !important;
  background: linear-gradient(180deg, #2a2a32, #0b0b0f) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px -4px rgba(11, 11, 15, .4) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  white-space: nowrap !important;
}

/* ==========================================================
   FAQ — native <details>, no JS
   ========================================================== */
#ideal-hero-isolated .ih-faq {
  margin-top: clamp(30px, 4.5vw, 44px) !important;
  text-align: left !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--ih-ring), 0 0 0 1px rgba(11, 11, 15, .055) !important;
  overflow: hidden !important;
}

#ideal-hero-isolated .ih-q {
  border-bottom: 1px solid var(--ih-line) !important
}

#ideal-hero-isolated .ih-q:last-child {
  border-bottom: 0 !important
}

#ideal-hero-isolated .ih-q summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 17px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -.012em !important;
  color: var(--ih-ink) !important;
  cursor: pointer !important;
  list-style: none !important;
  transition: background-color .2s ease;
}

#ideal-hero-isolated .ih-q summary::-webkit-details-marker {
  display: none !important
}

#ideal-hero-isolated .ih-q summary:hover {
  background: rgba(11, 11, 15, .02) !important
}

#ideal-hero-isolated .ih-q summary svg {
  width: 15px !important;
  height: 15px !important;
  flex: none !important;
  color: var(--ih-faint) !important;
  transition: transform .34s var(--ih-spring-nav), color .2s ease;
}

#ideal-hero-isolated .ih-q[open] summary {
  background: rgba(11, 11, 15, .025) !important;
}

#ideal-hero-isolated .ih-q[open] summary svg {
  transform: rotate(45deg);
  color: var(--ih-ink) !important
}

#ideal-hero-isolated .ih-q .ih-a {
  padding: 0 20px 19px !important;
  font-size: 13.5px !important;
  line-height: 1.66 !important;
  letter-spacing: -.004em !important;
  color: var(--ih-soft) !important;
  max-width: 64ch !important;
}

/* ==========================================================
   FINAL CTA
   ========================================================== */
#ideal-hero-isolated .ih-final {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: clamp(70px, 10vw, 124px) var(--ih-pad) !important;
  text-align: center !important;
}

#ideal-hero-isolated .ih-final-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* only the blobs, not the veil: .ih-final-bg span also matched .ih-final-veil,
   which was inheriting the 96px blur it must never have. */
#ideal-hero-isolated .ih-final-bg .ih-fb {
  position: absolute !important;
  display: block !important;
  border-radius: 50% !important;
  filter: blur(96px) saturate(112%) !important;
}

#ideal-hero-isolated .ih-fb1 {
  width: 52vw !important;
  height: 32vw !important;
  min-width: 340px;
  min-height: 220px;
  bottom: -9vw !important;
  left: -8vw !important;
  background: var(--ih-amber) !important;
  opacity: .5 !important
}

#ideal-hero-isolated .ih-fb2 {
  width: 48vw !important;
  height: 30vw !important;
  min-width: 320px;
  min-height: 210px;
  bottom: -11vw !important;
  left: 32% !important;
  background: var(--ih-violet) !important;
  opacity: .44 !important
}

#ideal-hero-isolated .ih-fb3 {
  width: 50vw !important;
  height: 31vw !important;
  min-width: 320px;
  min-height: 210px;
  bottom: -10vw !important;
  right: -9vw !important;
  background: var(--ih-sky) !important;
  opacity: .46 !important
}

#ideal-hero-isolated .ih-final-veil {
  position: absolute !important;
  inset: 0 !important;
  filter: none !important;
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, .94) 26%, rgba(255, 255, 255, .72) 52%, rgba(255, 255, 255, .4) 78%, rgba(255, 255, 255, .22) 100%) !important;
}

#ideal-hero-isolated .ih-final .ih-ctas {
  margin-top: clamp(24px, 3.4vw, 32px) !important
}

/* This ghost button is the only one in the whole site sitting directly over
   another blurred layer (the section's own 96px-blurred blobs, seen through
   the veil). Stripped every GPU/compositing-related property that could be
   involved — backdrop-filter, transform, and now the transition itself —
   so there is nothing left on this specific button that can fight with the
   blurred backdrop on hover. Background/shadow still change on hover, they
   just snap instead of animating. */
#ideal-hero-isolated .ih-final .ih-ctas .ih-btn-ghost {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
}

#ideal-hero-isolated .ih-final .ih-ctas .ih-btn-ghost:hover,
#ideal-hero-isolated .ih-final .ih-ctas .ih-btn-ghost:active,
#ideal-hero-isolated .ih-final .ih-ctas .ih-btn-ghost:focus-visible {
  transform: none !important;
  transition: none !important;
}

/* ==========================================================
   FOOTER
   ========================================================== */
#ideal-hero-isolated .ih-footer {
  padding: clamp(48px, 6vw, 68px) var(--ih-pad) clamp(26px, 3vw, 34px) !important;
  background: #fff !important;
  box-shadow: inset 0 1px 0 var(--ih-line) !important;
  text-align: left !important;
}

#ideal-hero-isolated .ih-fgrid {
  display: grid !important;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(24px, 4vw, 44px) !important;
}

#ideal-hero-isolated .ih-fbrand .ih-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  color: var(--ih-ink) !important;
}

#ideal-hero-isolated .ih-fbrand p {
  margin: 12px 0 0 !important;
  max-width: 34ch !important;
  font-size: 12.5px !important;
  line-height: 1.66 !important;
  color: var(--ih-soft) !important;
}

#ideal-hero-isolated .ih-fcol h4 {
  margin: 0 0 12px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  color: var(--ih-faint) !important;
}

#ideal-hero-isolated .ih-fcol ul {
  display: grid !important;
  gap: 9px !important
}

#ideal-hero-isolated .ih-fcol a {
  font-size: 13px !important;
  color: var(--ih-soft) !important;
  transition: color .2s ease;
}

#ideal-hero-isolated .ih-fcol a:hover {
  color: var(--ih-ink) !important
}

#ideal-hero-isolated .ih-fbot {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: clamp(32px, 4vw, 48px) !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--ih-line) !important;
  font-size: 12px !important;
  color: var(--ih-faint) !important;
}

#ideal-hero-isolated .ih-fbot nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important
}

#ideal-hero-isolated .ih-fbot a {
  color: var(--ih-faint) !important;
  transition: color .2s ease
}

#ideal-hero-isolated .ih-fbot a:hover {
  color: var(--ih-ink) !important
}

/* ==========================================================
   SCROLL REVEAL — IntersectionObserver adds .ih-in
   ========================================================== */
@media (prefers-reduced-motion:no-preference) {
  /* Match the original template: sections enter slightly blurred and
     sharpen as they reach the viewport while the page is scrolled. */
  #ideal-hero-isolated .ih-rv {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(4px);
  }

  #ideal-hero-isolated .ih-rv.ih-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity .7s var(--ih-ease), transform .8s var(--ih-spring-panel), filter .7s var(--ih-ease);
    transition-delay: 0ms;
  }

  #ideal-hero-isolated .ih-rv.ih-in.ih-delay-1 { transition-delay: 80ms; }
  #ideal-hero-isolated .ih-rv.ih-in.ih-delay-2 { transition-delay: 160ms; }
  #ideal-hero-isolated .ih-rv.ih-in.ih-delay-3 { transition-delay: 240ms; }

  /* meters fill once their card is visible */
  #ideal-hero-isolated .ih-meter i {
    transform: scaleX(1);
  }

  #ideal-hero-isolated .ih-in .ih-meter i {
    transition: transform .9s var(--ih-spring-panel);
    transition-delay: .25s;
  }
}

/* ==========================================================
   SECTION RESPONSIVE
   ========================================================== */
@media (max-width:900px) {
  #ideal-hero-isolated .ih-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  #ideal-hero-isolated .ih-bento .ih-wide {
    grid-column: span 2 !important
  }

  #ideal-hero-isolated .ih-steps,
  #ideal-hero-isolated .ih-plans {
    grid-template-columns: minmax(0, 1fr) !important
  }

  /* tablet: two testimonial cards visible per view */
  #ideal-hero-isolated .ih-slide {
    width: var(--ih-slide-w, 100%) !important
  }

  #ideal-hero-isolated .ih-step:not(:last-child)::after {
    display: none !important
  }

  #ideal-hero-isolated .ih-plan-hi {
    order: -1 !important
  }

  #ideal-hero-isolated .ih-fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  #ideal-hero-isolated .ih-fbrand {
    grid-column: span 2 !important
  }
}

@media (max-width:560px) {

  #ideal-hero-isolated .ih-bento {
    grid-template-columns: minmax(0, 1fr) !important
  }

  #ideal-hero-isolated .ih-bento .ih-wide {
    grid-column: span 1 !important
  }

  /* mobile: one testimonial card fills the viewport width */
  #ideal-hero-isolated .ih-slide {
    width: var(--ih-slide-w, 100%) !important
  }

  #ideal-hero-isolated .ih-fgrid {
    grid-template-columns: minmax(0, 1fr) !important
  }

  #ideal-hero-isolated .ih-fbrand {
    grid-column: span 1 !important
  }

  #ideal-hero-isolated .ih-fbot {
    justify-content: flex-start !important
  }

  #ideal-hero-isolated .ih-final .ih-ctas .ih-btn {
    width: 100% !important
  }
}

/* ==========================================================
   INNER-PAGE COMPONENTS — added for the multi-page template
   Everything here reuses the tokens and primitives above.
   Only what didn't already exist gets defined: a page-header
   band, vertical stacks, bordered row-lists, status dots,
   long-form prose and form fields (login / signup / contact).
   ========================================================== */

/* narrower wrap for auth forms */
#ideal-hero-isolated .ih-wrap-xnarrow {
  max-width: 440px !important
}

/* simple page header band, used at the top of every inner page */
#ideal-hero-isolated .ih-pagehead {
  padding-top: clamp(132px, 15vw, 168px) !important
}

/* generic vertical stack of cards */
#ideal-hero-isolated .ih-stack {
  display: grid !important;
  gap: 14px !important;
  margin-top: clamp(30px, 4.5vw, 44px) !important;
  text-align: left !important;
}

/* bordered white container holding flush rows (roles, links, channels) */
#ideal-hero-isolated .ih-rows-card {
  margin-top: clamp(30px, 4.5vw, 44px) !important;
  text-align: left !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--ih-ring), 0 0 0 1px rgba(11, 11, 15, .055) !important;
  overflow: hidden !important;
}

#ideal-hero-isolated .ih-rowitem {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--ih-line) !important;
  transition: background-color .2s ease;
}

#ideal-hero-isolated .ih-rowitem:last-child {
  border-bottom: 0 !important
}

#ideal-hero-isolated a.ih-rowitem:hover {
  background: rgba(11, 11, 15, .015) !important
}

#ideal-hero-isolated .ih-rowitem-main {
  min-width: 0 !important;
}

#ideal-hero-isolated .ih-rowitem-main .ih-h3 {
  margin-bottom: 3px !important
}

#ideal-hero-isolated .ih-rowitem .ih-btn {
  flex: none !important
}

/* small faint meta line (byline, date, read time, category) */
#ideal-hero-isolated .ih-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
  font-size: 12px !important;
  color: var(--ih-faint) !important;
}

#ideal-hero-isolated .ih-meta .ih-dot-sep {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: var(--ih-faint) !important;
  flex: none !important;
}

/* status dots — reuse the hero pill's green dot, add two more colors */
#ideal-hero-isolated .ih-dot-warn {
  background: #d97706 !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, .16) !important;
}

#ideal-hero-isolated .ih-dot-warn::after {
  border-color: rgba(217, 119, 6, .5) !important
}

#ideal-hero-isolated .ih-dot-static::after {
  content: none !important
}

/* long-form readable text (legal pages, docs, help articles) */
#ideal-hero-isolated .ih-prose {
  text-align: left !important;
  margin-top: clamp(30px, 4.5vw, 44px) !important;
}

#ideal-hero-isolated .ih-prose h3 {
  margin: 30px 0 10px !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--ih-ink) !important;
}

#ideal-hero-isolated .ih-prose h3:first-child {
  margin-top: 0 !important
}

#ideal-hero-isolated .ih-prose p {
  margin: 0 0 14px !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--ih-soft) !important;
}

#ideal-hero-isolated .ih-prose ul,
#ideal-hero-isolated .ih-prose ol {
  margin: 0 0 14px !important;
  padding-left: 20px !important;
  display: grid !important;
  gap: 6px !important;
}

#ideal-hero-isolated .ih-prose li {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--ih-soft) !important;
}

#ideal-hero-isolated .ih-prose strong {
  color: var(--ih-ink) !important;
  font-weight: 600 !important;
}

#ideal-hero-isolated .ih-prose a {
  color: var(--ih-ink) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* inline links inside ordinary body copy (card text, lede, FAQ answers) —
   the original template never put an <a> inside a paragraph, so this is
   additive: without it an inline link would inherit color and vanish */
#ideal-hero-isolated .ih-body a,
#ideal-hero-isolated .ih-lede a,
#ideal-hero-isolated .ih-a a {
  color: var(--ih-ink) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- forms (login, signup, contact) ---------- */
#ideal-hero-isolated .ih-field-error {
  display: block !important;
  min-height: 17px !important;
  margin: 6px 2px 0 !important;
  color: #be185d !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .16s ease !important;
}

#ideal-hero-isolated .ih-field-error:not([hidden]) {
  visibility: visible !important;
  opacity: 1 !important;
}

#ideal-hero-isolated .ih-field-has-error .ih-input {
  border-color: #be185d !important;
  box-shadow: 0 0 0 3px rgba(190, 24, 93, .09) !important;
  background: rgba(190, 24, 93, .018) !important;
}

#ideal-hero-isolated .ih-input[aria-invalid="true"] {
  border-color: #be185d !important;
}

#ideal-hero-isolated .ih-checkbox-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  margin: 4px 0 20px !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--ih-soft) !important;
}

#ideal-hero-isolated .ih-checkbox-row input {
  margin-top: 3px !important;
  accent-color: #0b0b0f;
}

#ideal-hero-isolated .ih-checkbox-row input[aria-invalid="true"] {
  outline: 2px solid rgba(190, 24, 93, .35) !important;
  outline-offset: 2px !important;
}

#ideal-hero-isolated .ih-form {
  margin-top: clamp(28px, 4vw, 36px) !important;
  text-align: left !important;
}

#ideal-hero-isolated .ih-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

#ideal-hero-isolated .ih-field {
  display: block !important;
  margin-bottom: 16px !important;
}

#ideal-hero-isolated .ih-label {
  display: block !important;
  margin-bottom: 7px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -.006em !important;
  color: var(--ih-ink) !important;
}

#ideal-hero-isolated .ih-input,
#ideal-hero-isolated .ih-textarea{
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid var(--ih-line2) !important;
  border-radius: 11px !important;
  background: #fff !important;
  font-family: var(--ih-font) !important;
  font-size: 14px !important;
  color: var(--ih-ink) !important;
  box-shadow: inset 0 1px 2px rgba(11, 11, 15, .03) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

#ideal-hero-isolated .ih-textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

#ideal-hero-isolated .ih-input::placeholder,
#ideal-hero-isolated .ih-textarea::placeholder {
  color: var(--ih-faint) !important
}

#ideal-hero-isolated .ih-input:focus,
#ideal-hero-isolated .ih-textarea:focus{
  outline: none !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .14) !important;
}


#ideal-hero-isolated .ih-form .ih-btn {
  width: 100% !important;
  height: 46px !important;
}

#ideal-hero-isolated .ih-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 22px 0 !important;
  font-size: 11.5px !important;
  color: var(--ih-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

#ideal-hero-isolated .ih-divider::before,
#ideal-hero-isolated .ih-divider::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--ih-line2) !important;
}

#ideal-hero-isolated .ih-social-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

#ideal-hero-isolated .ih-social-row .ih-btn {
  width: 100% !important;
}

#ideal-hero-isolated .ih-form-foot {
  margin-top: 20px !important;
  font-size: 13px !important;
  color: var(--ih-soft) !important;
  text-align: center !important;
}

#ideal-hero-isolated .ih-form-foot a {
  color: var(--ih-ink) !important;
  font-weight: 500 !important;
}

/* single-row inline form (status page email subscribe) */
#ideal-hero-isolated .ih-inline-form {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: clamp(20px, 3vw, 28px) !important;
  text-align: left !important;
}

#ideal-hero-isolated .ih-inline-form .ih-input {
  flex: 1 1 220px !important;
}

#ideal-hero-isolated .ih-inline-form .ih-btn {
  flex: none !important;
}

/* centers a .ih-meta row — used on blog post headers, where the byline
   sits inside an otherwise-centered page header */
#ideal-hero-isolated .ih-meta-center {
  justify-content: center !important
}

/* ---------- code (api reference, docs) ---------- */
/* the scoped reset forces font-family:inherit on every element, including
   <code>, so both of these restore a monospace face explicitly */
#ideal-hero-isolated code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
}

#ideal-hero-isolated .ih-code-inline {
  display: inline-block !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: rgba(11, 11, 15, .055) !important;
  font-size: 12px !important;
  color: var(--ih-ink) !important;
  white-space: nowrap !important;
}

#ideal-hero-isolated .ih-codeblock {
  margin-top: clamp(24px, 3vw, 32px) !important;
  padding: 18px 20px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #17171c, #0b0b0f) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 30px -18px rgba(11, 11, 15, .5) !important;
  overflow-x: auto !important;
  text-align: left !important;
}

#ideal-hero-isolated .ih-codeblock code {
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: #e6e6ea !important;
  white-space: pre !important;
}

#ideal-hero-isolated .ih-method {
  display: inline-block !important;
  min-width: 52px !important;
  margin-right: 10px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  color: #fff !important;
  background: #38bdf8 !important;
}

#ideal-hero-isolated .ih-method-post {
  background: #16a34a !important
}

#ideal-hero-isolated .ih-method-delete {
  background: #e11d48 !important
}

/* current-page nav state (set by app.js from the URL, see NAV ACTIVE STATE) */
#ideal-hero-nav .ih-link.ih-current {
  color: var(--ih-ink) !important;
  font-weight: 600 !important;
}

/* 404 numeral */
#ideal-hero-isolated .ih-404-num {
  display: block !important;
  margin: 0 auto !important;
  font-size: clamp(4.5rem, 16vw, 8rem) !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
  background: linear-gradient(100deg, #ef8a0a, #f04f6a 34%, #7b4cf0 66%, #25a3ef) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 640px) {

  #ideal-hero-isolated .ih-form-row,
  #ideal-hero-isolated .ih-social-row {
    grid-template-columns: minmax(0, 1fr) !important
  }

  #ideal-hero-isolated .ih-rowitem {
    flex-wrap: wrap !important
  }
}

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(1) { height: 38% !important; }

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(2) { height: 54% !important; }

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(3) { height: 44% !important; }

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(4) { height: 66% !important; }

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(5) { height: 58% !important; }

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(6) { height: 78% !important; }

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(7) { height: 49% !important; }

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(8) { height: 70% !important; }

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(9) { height: 86% !important; }

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(10) { height: 62% !important; }

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(11) { height: 74% !important; }

#ideal-hero-isolated .ih-chart .ih-bars i:nth-child(12) { height: 96% !important; }

/* Runtime animation hint: enabled only while nav transform is transitioning. */
#ideal-hero-nav.ih-nav-animating .ih-nav-outer {
  will-change: transform;
}

/* IntersectionObserver sentinel: zero-size, non-interactive and paint-neutral. */
#ideal-hero-isolated.ih-sentinel-context {
  position: relative !important;
}
#ideal-hero-isolated .ih-scroll-sentinel {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
}

#ideal-hero-isolated .ih-meter-64 i { transform: scaleX(.64) !important; }

#ideal-hero-isolated .ih-meter-86 i {
  background: linear-gradient(90deg, #8b5cf6, #38bdf8) !important;
  transform: scaleX(.86) !important;
}
#ideal-hero-isolated .ih-meter-64 i {
  background: linear-gradient(90deg, #fb7185, #fbbf24) !important;
  transform: scaleX(.64) !important;
}
#ideal-hero-isolated .ih-meter-42 i {
  background: linear-gradient(90deg, #2dd4bf, #38bdf8) !important;
  transform: scaleX(.42) !important;
}

/* ==========================================================
   CONTENT & DOCUMENTATION SYSTEM — v2.1
   Added for the content-complete edition. Everything reuses the
   tokens above; nothing earlier in this file was changed.
   Sections:
     1. Shared content primitives (split layout, tags, facts,
        timeline, release notes, status bars, article body)
     2. Documentation shell (sidebar, article, on-this-page)
     3. Doc prose (headings + # anchors, code, tables, callouts)
     4. Prev / next, feedback, breadcrumbs
     5. Search trigger + search dialog (lives in #ideal-hero-nav
        so it can sit above the fixed navbar)
     6. Legal layout
     7. Responsive rules
   ========================================================== */

/* ---------- 1. shared content primitives ---------- */
#ideal-hero-isolated .ih-left { text-align: left !important }
#ideal-hero-isolated .ih-left .ih-h2 { margin: 0 !important }
#ideal-hero-isolated .ih-left .ih-lede { margin: 16px 0 0 !important }

/* section intro on the left, content on the right */
#ideal-hero-isolated .ih-split {
  display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
  gap: clamp(28px, 5vw, 72px) !important;
  align-items: start !important;
  text-align: left !important;
}
#ideal-hero-isolated .ih-split .ih-h2 { margin: 0 !important; font-size: clamp(1.5rem, 3.2vw, 2.1rem) !important }
#ideal-hero-isolated .ih-split .ih-lede { margin: 14px 0 0 !important; font-size: 15px !important }
#ideal-hero-isolated .ih-split-sticky { position: sticky !important; top: 104px !important }

/* definition-style list: bold term, supporting text (used inside splits) */
#ideal-hero-isolated .ih-deflist { display: grid !important; gap: 0 !important }
#ideal-hero-isolated .ih-deflist > div {
  padding: 20px 0 !important;
  border-top: 1px solid var(--ih-line) !important;
}
#ideal-hero-isolated .ih-deflist > div:first-child { border-top: 0 !important; padding-top: 4px !important }
#ideal-hero-isolated .ih-deflist dt,
#ideal-hero-isolated .ih-deflist .ih-dt {
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.02em !important; color: var(--ih-ink) !important;
}
#ideal-hero-isolated .ih-deflist dd,
#ideal-hero-isolated .ih-deflist .ih-dd {
  margin-top: 6px !important; font-size: 14px !important; line-height: 1.7 !important; color: var(--ih-soft) !important;
}
#ideal-hero-isolated .ih-deflist dd a { color: var(--ih-ink) !important; text-decoration: underline; text-underline-offset: 2px }

/* small pill labels: category, plan, level, availability */
#ideal-hero-isolated .ih-pilltag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 9px !important;
  border-radius: var(--ih-pill) !important;
  background: rgba(11, 11, 15, .045) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--ih-soft) !important;
  white-space: nowrap !important;
}
#ideal-hero-isolated .ih-pilltag-violet { background: rgba(139, 92, 246, .1) !important; color: #6d28d9 !important }
#ideal-hero-isolated .ih-pilltag-green { background: rgba(22, 163, 74, .1) !important; color: #15803d !important }
#ideal-hero-isolated .ih-pilltag-amber { background: rgba(217, 119, 6, .1) !important; color: #b45309 !important }
#ideal-hero-isolated .ih-pilltag-rose { background: rgba(225, 29, 72, .08) !important; color: #be123c !important }
#ideal-hero-isolated .ih-tagrow { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 12px !important }

/* card footer line (read time, level, plan) pinned to the bottom */
#ideal-hero-isolated .ih-card-s.ih-flexcard { display: flex !important; flex-direction: column !important }
#ideal-hero-isolated .ih-card-foot {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important;
  margin-top: auto !important; padding-top: 16px !important;
  font-size: 12px !important; color: var(--ih-faint) !important;
}
#ideal-hero-isolated .ih-card-link {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  margin-top: 14px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ih-ink) !important;
}
#ideal-hero-isolated .ih-card-link svg { width: 12px !important; height: 12px !important; transition: transform .25s var(--ih-spring) }
#ideal-hero-isolated a.ih-card-s:hover .ih-card-link svg,
#ideal-hero-isolated .ih-card-link:hover svg { transform: translateX(3px) }

/* grids with a different rhythm than the bento */
#ideal-hero-isolated .ih-grid-2,
#ideal-hero-isolated .ih-grid-3,
#ideal-hero-isolated .ih-grid-4 {
  display: grid !important; gap: 14px !important; margin-top: clamp(30px, 4.5vw, 44px) !important; text-align: left !important;
}
#ideal-hero-isolated .ih-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
#ideal-hero-isolated .ih-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important }
#ideal-hero-isolated .ih-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important }

/* a quiet row of facts (about, careers, status) */
#ideal-hero-isolated .ih-facts {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin-top: clamp(30px, 4.5vw, 44px) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--ih-ring), 0 0 0 1px rgba(11, 11, 15, .055) !important;
  text-align: left !important;
  overflow: hidden !important;
}
#ideal-hero-isolated .ih-facts > div { padding: 20px 22px !important; border-left: 1px solid var(--ih-line) !important }
#ideal-hero-isolated .ih-facts > div:first-child { border-left: 0 !important }
#ideal-hero-isolated .ih-facts b {
  display: block !important; font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.03em !important;
  color: var(--ih-ink) !important; font-variant-numeric: tabular-nums;
}
#ideal-hero-isolated .ih-facts span { display: block !important; margin-top: 4px !important; font-size: 12.5px !important; line-height: 1.5 !important; color: var(--ih-soft) !important }

/* vertical timeline (about milestones) */
#ideal-hero-isolated .ih-timeline { position: relative !important; margin-top: clamp(30px, 4.5vw, 44px) !important; text-align: left !important }
#ideal-hero-isolated .ih-timeline::before {
  content: "" !important; position: absolute !important; left: 5px !important; top: 8px !important; bottom: 8px !important;
  width: 1px !important; background: var(--ih-line2) !important;
}
#ideal-hero-isolated .ih-tl-item { position: relative !important; padding: 0 0 26px 30px !important }
#ideal-hero-isolated .ih-tl-item:last-child { padding-bottom: 0 !important }
#ideal-hero-isolated .ih-tl-item::before {
  content: "" !important; position: absolute !important; left: 0 !important; top: 6px !important;
  width: 11px !important; height: 11px !important; border-radius: 50% !important;
  background: #fff !important; box-shadow: inset 0 0 0 2px #8b5cf6 !important;
}
#ideal-hero-isolated .ih-tl-date { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .02em !important; color: var(--ih-faint) !important }
#ideal-hero-isolated .ih-tl-item .ih-h3 { margin-top: 3px !important }
#ideal-hero-isolated .ih-tl-item .ih-body { max-width: 62ch !important }

/* expandable rows (careers roles) — native <details> */
#ideal-hero-isolated .ih-disclosure { border-bottom: 1px solid var(--ih-line) !important }
#ideal-hero-isolated .ih-disclosure:last-child { border-bottom: 0 !important }
#ideal-hero-isolated .ih-disclosure > summary {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important;
  padding: 18px 20px !important; cursor: pointer !important; list-style: none !important; transition: background-color .2s ease;
}
#ideal-hero-isolated .ih-disclosure > summary::-webkit-details-marker { display: none !important }
#ideal-hero-isolated .ih-disclosure > summary:hover { background: rgba(11, 11, 15, .015) !important }
#ideal-hero-isolated .ih-disclosure > summary .ih-chev-s {
  width: 15px !important; height: 15px !important; color: var(--ih-faint) !important; transition: transform .3s var(--ih-spring-nav);
}
#ideal-hero-isolated .ih-disclosure[open] > summary .ih-chev-s { transform: rotate(180deg) }
#ideal-hero-isolated .ih-disclosure-body { padding: 0 20px 22px !important }
#ideal-hero-isolated .ih-disclosure-body .ih-doc p,
#ideal-hero-isolated .ih-disclosure-body .ih-doc li { font-size: 14px !important }

/* release notes (changelog) */
#ideal-hero-isolated .ih-release {
  display: grid !important;
  grid-template-columns: 180px minmax(0, 1fr) !important;
  gap: 32px !important;
  padding: 40px 0 !important;
  border-top: 1px solid var(--ih-line) !important;
  text-align: left !important;
  scroll-margin-top: 96px !important;
}
#ideal-hero-isolated .ih-release:first-child { border-top: 0 !important; padding-top: 0 !important }
#ideal-hero-isolated .ih-release-meta { position: sticky !important; top: 104px !important; align-self: start !important }
#ideal-hero-isolated .ih-release-ver { display: block !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.02em !important; color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-release-date { display: block !important; margin-top: 2px !important; font-size: 12.5px !important; color: var(--ih-faint) !important }
#ideal-hero-isolated .ih-release-meta .ih-pilltag { margin-top: 10px !important }
#ideal-hero-isolated .ih-release h2 {
  font-size: 21px !important; font-weight: 600 !important; letter-spacing: -.025em !important; line-height: 1.3 !important; color: var(--ih-ink) !important;
}
#ideal-hero-isolated .ih-change-group { margin-top: 22px !important }
#ideal-hero-isolated .ih-change-group h3 {
  display: flex !important; align-items: center !important; gap: 8px !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--ih-soft) !important;
}
#ideal-hero-isolated .ih-change-group ul { margin-top: 10px !important; display: grid !important; gap: 8px !important }
#ideal-hero-isolated .ih-change-group li {
  position: relative !important; padding-left: 18px !important; font-size: 14px !important; line-height: 1.65 !important; color: var(--ih-soft) !important;
}
#ideal-hero-isolated .ih-change-group li::before {
  content: "" !important; position: absolute !important; left: 3px !important; top: .7em !important;
  width: 5px !important; height: 5px !important; border-radius: 50% !important; background: var(--ih-line2) !important;
}
#ideal-hero-isolated .ih-change-group li strong { color: var(--ih-ink) !important; font-weight: 600 !important }
#ideal-hero-isolated .ih-change-group li a,
#ideal-hero-isolated .ih-release a:not(.ih-btn):not(.ih-anchor) { color: var(--ih-ink) !important; text-decoration: underline; text-underline-offset: 2px }

/* status page */
#ideal-hero-isolated .ih-banner {
  display: flex !important; align-items: center !important; gap: 12px !important;
  margin-top: clamp(28px, 4vw, 40px) !important; padding: 16px 20px !important; border-radius: 14px !important;
  background: rgba(22, 163, 74, .07) !important; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .18) !important;
  text-align: left !important; font-size: 14px !important; color: #14532d !important;
}
#ideal-hero-isolated .ih-banner b { font-weight: 600 !important }
#ideal-hero-isolated .ih-banner .ih-sdot { flex: none !important }
#ideal-hero-isolated .ih-sdot {
  display: inline-block !important; width: 9px !important; height: 9px !important; border-radius: 50% !important;
  background: #16a34a !important; box-shadow: 0 0 0 3px rgba(22, 163, 74, .16) !important;
}
#ideal-hero-isolated .ih-sdot-warn { background: #d97706 !important; box-shadow: 0 0 0 3px rgba(217, 119, 6, .16) !important }
#ideal-hero-isolated .ih-sdot-down { background: #e11d48 !important; box-shadow: 0 0 0 3px rgba(225, 29, 72, .16) !important }
#ideal-hero-isolated .ih-sdot-idle { background: #8b8b96 !important; box-shadow: 0 0 0 3px rgba(139, 139, 150, .16) !important }
#ideal-hero-isolated .ih-uptime {
  display: grid !important; grid-template-columns: repeat(90, minmax(0, 1fr)) !important; gap: 2px !important;
  height: 28px !important; margin-top: 12px !important;
}
#ideal-hero-isolated .ih-uptime i { display: block !important; border-radius: 2px !important; background: #22c55e !important; opacity: .85 }
#ideal-hero-isolated .ih-uptime i.ih-u-warn { background: #f59e0b !important }
#ideal-hero-isolated .ih-uptime i.ih-u-down { background: #e11d48 !important }
#ideal-hero-isolated .ih-uptime-scale { display: flex !important; justify-content: space-between !important; margin-top: 6px !important; font-size: 11.5px !important; color: var(--ih-faint) !important }
#ideal-hero-isolated .ih-comp { padding: 20px !important; border-bottom: 1px solid var(--ih-line) !important }
#ideal-hero-isolated .ih-comp:last-child { border-bottom: 0 !important }
#ideal-hero-isolated .ih-comp-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; flex-wrap: wrap !important }
#ideal-hero-isolated .ih-comp-name { display: flex !important; align-items: baseline !important; gap: 10px !important; flex-wrap: wrap !important }
#ideal-hero-isolated .ih-comp-name small { font-size: 12.5px !important; color: var(--ih-faint) !important }
#ideal-hero-isolated .ih-comp-state { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; color: var(--ih-soft) !important }

/* long-form article (blog posts) */
#ideal-hero-isolated .ih-article { max-width: 680px !important; margin: 0 auto !important; text-align: left !important }
#ideal-hero-isolated .ih-article .ih-doc p,
#ideal-hero-isolated .ih-article .ih-doc li { font-size: 16.5px !important; line-height: 1.78 !important }
#ideal-hero-isolated .ih-article .ih-doc h2 { font-size: 24px !important; margin-top: 48px !important }
#ideal-hero-isolated .ih-article .ih-doc h3 { font-size: 18.5px !important }
#ideal-hero-isolated .ih-byline {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important;
  margin-top: 26px !important; text-align: left !important;
}
#ideal-hero-isolated .ih-byline .ih-avatar { width: 38px !important; height: 38px !important; font-size: 13px !important }
#ideal-hero-isolated .ih-byline b { display: block !important; font-size: 14px !important; font-weight: 600 !important; color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-byline span { display: block !important; font-size: 12.5px !important; color: var(--ih-faint) !important }
#ideal-hero-isolated .ih-avatar {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: none !important;
  width: 44px !important; height: 44px !important; border-radius: 50% !important;
  background: linear-gradient(140deg, #fde68a, #fb7185 45%, #8b5cf6) !important;
  color: #fff !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .01em !important;
}
#ideal-hero-isolated .ih-avatar.ih-av-2 { background: linear-gradient(140deg, #a7f3d0, #38bdf8 50%, #6366f1) !important }
#ideal-hero-isolated .ih-avatar.ih-av-3 { background: linear-gradient(140deg, #fed7aa, #fb923c 45%, #e11d48) !important }
#ideal-hero-isolated .ih-avatar.ih-av-4 { background: linear-gradient(140deg, #ddd6fe, #8b5cf6 50%, #0ea5e9) !important }
#ideal-hero-isolated .ih-author {
  display: flex !important; gap: 16px !important; align-items: flex-start !important;
  margin-top: 48px !important; padding: 22px !important; border-radius: 16px !important;
  background: #fafafb !important; box-shadow: inset 0 0 0 1px var(--ih-line) !important; text-align: left !important;
}
#ideal-hero-isolated .ih-author b { display: block !important; font-size: 14.5px !important; font-weight: 600 !important; color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-author p { margin-top: 4px !important; font-size: 13.5px !important; line-height: 1.6 !important; color: var(--ih-soft) !important }

/* team member card */
#ideal-hero-isolated .ih-person { display: flex !important; gap: 14px !important; align-items: flex-start !important }
#ideal-hero-isolated .ih-person .ih-h3 { margin-top: 2px !important }
#ideal-hero-isolated .ih-person-role { display: block !important; margin-top: 2px !important; font-size: 12.5px !important; color: var(--ih-faint) !important }

/* select + helper text for forms */
#ideal-hero-isolated .ih-select {
  width: 100% !important; padding: 12px 38px 12px 14px !important; border: 1px solid var(--ih-line2) !important; border-radius: 11px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b96' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 15px !important;
  font-family: var(--ih-font) !important; font-size: 14px !important; color: var(--ih-ink) !important;
  -webkit-appearance: none !important; appearance: none !important; cursor: pointer !important;
}
#ideal-hero-isolated .ih-select:focus { outline: none !important; border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, .14) !important }
#ideal-hero-isolated .ih-help { display: block !important; margin-top: 6px !important; font-size: 12px !important; line-height: 1.5 !important; color: var(--ih-faint) !important }
#ideal-hero-isolated .ih-form-success {
  margin-top: 16px !important; padding: 14px 16px !important; border-radius: 12px !important;
  background: rgba(22, 163, 74, .07) !important; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .18) !important;
  font-size: 13.5px !important; line-height: 1.55 !important; color: #14532d !important;
}
#ideal-hero-isolated .ih-checklist { display: grid !important; gap: 10px !important; text-align: left !important }
#ideal-hero-isolated .ih-checklist li {
  position: relative !important; padding-left: 26px !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--ih-soft) !important;
}
#ideal-hero-isolated .ih-checklist li::before {
  content: "" !important; position: absolute !important; left: 0 !important; top: 3px !important; width: 16px !important; height: 16px !important;
  border-radius: 50% !important;
  background: rgba(139, 92, 246, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 10px !important;
}
#ideal-hero-isolated .ih-checklist li b { color: var(--ih-ink) !important; font-weight: 600 !important }

/* auth pages: form + context column */
#ideal-hero-isolated .ih-auth {
  display: grid !important; grid-template-columns: minmax(0, 440px) minmax(0, 380px) !important; justify-content: center !important;
  gap: clamp(32px, 6vw, 88px) !important; align-items: start !important; max-width: 1000px !important; margin: 0 auto !important; text-align: left !important;
}
#ideal-hero-isolated .ih-auth-main { text-align: center !important }
#ideal-hero-isolated .ih-auth-aside {
  margin-top: 8px !important; padding: 26px !important; border-radius: 18px !important;
  background: linear-gradient(180deg, #fbfbfc, #f7f7f9) !important; box-shadow: inset 0 0 0 1px var(--ih-line) !important;
}
#ideal-hero-isolated .ih-auth-aside .ih-h3 { margin-bottom: 16px !important }
#ideal-hero-isolated .ih-auth-quote {
  margin-top: 22px !important; padding-top: 20px !important; border-top: 1px solid var(--ih-line) !important;
  font-size: 13.5px !important; line-height: 1.65 !important; color: var(--ih-soft) !important;
}
#ideal-hero-isolated .ih-auth-quote cite { display: block !important; margin-top: 10px !important; font-size: 12.5px !important; color: var(--ih-faint) !important }
#ideal-hero-isolated .ih-auth-quote cite b { color: var(--ih-ink) !important; font-weight: 600 !important }

/* ---------- 2. documentation shell ---------- */
#ideal-hero-isolated .ih-docs {
  display: grid !important;
  grid-template-columns: 252px minmax(0, 1fr) !important;
  gap: clamp(28px, 3.5vw, 56px) !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 108px var(--ih-pad) 72px !important;
  text-align: left !important;
}
#ideal-hero-isolated .ih-docs-side {
  position: sticky !important; top: 92px !important; align-self: start !important;
  max-height: calc(100vh - 108px) !important; overflow-y: auto !important;
  padding: 4px 6px 24px 2px !important; overscroll-behavior: contain;
}
#ideal-hero-isolated .ih-docs-group { margin-top: 22px !important }
#ideal-hero-isolated .ih-docs-group-title {
  display: block !important; margin: 0 0 6px 10px !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: -.005em !important; color: var(--ih-ink) !important;
}
#ideal-hero-isolated .ih-docs-links { display: grid !important; gap: 1px !important }
#ideal-hero-isolated .ih-docs-links a {
  display: block !important; padding: 6px 10px !important; border-radius: 8px !important;
  font-size: 13.5px !important; line-height: 1.45 !important; color: var(--ih-soft) !important;
  transition: background-color .15s ease, color .15s ease;
}
#ideal-hero-isolated .ih-docs-links a:hover { color: var(--ih-ink) !important; background: rgba(11, 11, 15, .035) !important }
#ideal-hero-isolated .ih-docs-links a[aria-current="page"] {
  color: var(--ih-ink) !important; font-weight: 500 !important; background: rgba(11, 11, 15, .055) !important;
}
#ideal-hero-isolated .ih-docs-toggle { display: none !important }

#ideal-hero-isolated .ih-docs-main {
  display: grid !important;
  grid-template-columns: minmax(0, 740px) 212px !important;
  gap: clamp(32px, 4vw, 64px) !important;
  justify-content: space-between !important;
  min-width: 0 !important;
}
#ideal-hero-isolated .ih-docs-article { min-width: 0 !important }
#ideal-hero-isolated .ih-crumbs {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important;
  font-size: 12.5px !important; color: var(--ih-faint) !important;
}
#ideal-hero-isolated .ih-crumbs a { color: var(--ih-faint) !important; transition: color .15s ease }
#ideal-hero-isolated .ih-crumbs a:hover { color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-crumbs svg { width: 12px !important; height: 12px !important; color: var(--ih-line2) !important; stroke: #b9b9c2 !important }
#ideal-hero-isolated .ih-crumbs [aria-current] { color: var(--ih-soft) !important }
#ideal-hero-isolated .ih-doc-title {
  margin-top: 14px !important;
  font-size: clamp(1.85rem, 3.4vw, 2.45rem) !important; line-height: 1.12 !important; font-weight: 600 !important;
  letter-spacing: -.032em !important; color: var(--ih-ink) !important; text-wrap: balance;
}
#ideal-hero-isolated .ih-doc-lede {
  margin-top: 14px !important; max-width: 64ch !important;
  font-size: 17px !important; line-height: 1.65 !important; letter-spacing: -.01em !important; color: var(--ih-soft) !important; text-wrap: pretty;
}
#ideal-hero-isolated .ih-doc-meta {
  display: flex !important; flex-wrap: wrap !important; gap: 6px 16px !important; margin-top: 18px !important; padding-bottom: 26px !important;
  border-bottom: 1px solid var(--ih-line) !important; font-size: 12.5px !important; color: var(--ih-faint) !important;
}
#ideal-hero-isolated .ih-doc-meta span { display: inline-flex !important; align-items: center !important; gap: 6px !important }
#ideal-hero-isolated .ih-doc-meta svg { width: 13px !important; height: 13px !important; stroke: currentColor !important }

/* on this page (desktop column) */
#ideal-hero-isolated .ih-toc {
  position: sticky !important; top: 92px !important; align-self: start !important;
  max-height: calc(100vh - 108px) !important; overflow-y: auto !important; padding-bottom: 24px !important;
}
#ideal-hero-isolated .ih-toc-title { display: block !important; margin-bottom: 10px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-toc ol { position: relative !important; display: grid !important; gap: 0 !important; box-shadow: inset 1px 0 0 var(--ih-line2) !important }
#ideal-hero-isolated .ih-toc a {
  position: relative !important; display: block !important; padding: 5px 0 5px 14px !important;
  font-size: 12.75px !important; line-height: 1.45 !important; color: var(--ih-faint) !important; transition: color .15s ease;
}
#ideal-hero-isolated .ih-toc a:hover { color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-toc .ih-toc-l3 a { padding-left: 26px !important }
#ideal-hero-isolated .ih-toc a.ih-active { color: var(--ih-ink) !important; font-weight: 500 !important }
/* active-section indicator: one solid thumb that slides between items and can be dragged (docs.js) */
#ideal-hero-isolated .ih-toc-thumb {
  position: absolute !important; left: -5px !important; top: 0; width: 12px !important; height: 0;
  cursor: grab !important; touch-action: none !important; z-index: 1 !important;
  transition: top .28s var(--ih-spring-nav), height .28s var(--ih-spring-nav), opacity .2s ease;
}
#ideal-hero-isolated .ih-toc-thumb::before {
  content: "" !important; position: absolute !important; left: 5px !important; top: 4px !important; bottom: 4px !important; width: 2px !important;
  border-radius: 2px !important; background: var(--ih-ink) !important; transition: width .15s ease, left .15s ease;
}
#ideal-hero-isolated .ih-toc-thumb:hover::before,
#ideal-hero-isolated .ih-toc-thumb:focus-visible::before,
#ideal-hero-isolated .ih-toc-thumb.ih-dragging::before { left: 4px !important; width: 4px !important }
#ideal-hero-isolated .ih-toc-thumb:focus-visible { outline: 2px solid rgba(139, 92, 246, .45) !important; outline-offset: 2px !important; border-radius: 4px !important }
#ideal-hero-isolated .ih-toc-thumb.ih-dragging { cursor: grabbing !important; transition: none !important }
#ideal-hero-isolated .ih-toc-thumb[hidden] { display: none !important }
html.ih-toc-grabbing, html.ih-toc-grabbing * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important }
@media (prefers-reduced-motion: reduce) { #ideal-hero-isolated .ih-toc-thumb { transition: none !important } }
#ideal-hero-isolated .ih-toc-extra { margin-top: 22px !important; padding-top: 18px !important; border-top: 1px solid var(--ih-line) !important; display: grid !important; gap: 8px !important }
#ideal-hero-isolated .ih-toc-extra a {
  display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 12.75px !important; color: var(--ih-soft) !important;
}
#ideal-hero-isolated .ih-toc-extra a:hover { color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-toc-extra svg { width: 14px !important; height: 14px !important; stroke: currentColor !important }
#ideal-hero-isolated .ih-toc-top { border: 0 !important; background: none !important; font-size: 12.75px !important; color: var(--ih-soft) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important }
#ideal-hero-isolated .ih-toc-top:hover { color: var(--ih-ink) !important }

/* on this page (inline, below 1200px) */
#ideal-hero-isolated .ih-toc-inline { display: none !important }

/* ---------- 3. doc prose ---------- */
#ideal-hero-isolated .ih-doc { margin-top: 28px !important; color: var(--ih-soft) !important }
#ideal-hero-isolated .ih-doc > :first-child { margin-top: 0 !important }
#ideal-hero-isolated .ih-doc h2,
#ideal-hero-isolated .ih-doc h3,
#ideal-hero-isolated .ih-doc h4 { position: relative !important; color: var(--ih-ink) !important; scroll-margin-top: 96px !important; text-wrap: balance }
#ideal-hero-isolated .ih-doc h2 {
  margin: 52px 0 14px !important; padding-top: 4px !important;
  font-size: 23px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -.028em !important;
}
#ideal-hero-isolated .ih-doc h3 {
  margin: 34px 0 10px !important; font-size: 17.5px !important; line-height: 1.4 !important; font-weight: 600 !important; letter-spacing: -.022em !important;
}
#ideal-hero-isolated .ih-doc h4 { margin: 24px 0 8px !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.015em !important }
#ideal-hero-isolated .ih-doc p { margin: 0 0 16px !important; font-size: 15px !important; line-height: 1.75 !important; color: var(--ih-soft) !important }
#ideal-hero-isolated .ih-doc ul,
#ideal-hero-isolated .ih-doc ol { margin: 0 0 18px !important; padding-left: 22px !important; display: grid !important; gap: 8px !important }
#ideal-hero-isolated .ih-doc ul > li { list-style: disc !important }
#ideal-hero-isolated .ih-doc ol > li { list-style: decimal !important }
#ideal-hero-isolated .ih-doc li { font-size: 15px !important; line-height: 1.7 !important; color: var(--ih-soft) !important; padding-left: 2px !important }
#ideal-hero-isolated .ih-doc li::marker { color: #b3b3bd !important }
#ideal-hero-isolated .ih-doc li > ul,
#ideal-hero-isolated .ih-doc li > ol { margin: 8px 0 0 !important }
#ideal-hero-isolated .ih-doc strong,
#ideal-hero-isolated .ih-doc b { color: var(--ih-ink) !important; font-weight: 600 !important }
#ideal-hero-isolated .ih-doc em { font-style: italic !important }
#ideal-hero-isolated .ih-doc a:not(.ih-anchor):not(.ih-btn):not(.ih-linkcard) {
  color: var(--ih-ink) !important; text-decoration: underline; text-decoration-color: rgba(11, 11, 15, .25);
  text-underline-offset: 3px; transition: text-decoration-color .15s ease;
}
#ideal-hero-isolated .ih-doc a:not(.ih-anchor):not(.ih-btn):not(.ih-linkcard):hover { text-decoration-color: rgba(11, 11, 15, .8) }
#ideal-hero-isolated .ih-doc hr { height: 1px !important; margin: 36px 0 !important; background: var(--ih-line) !important }
#ideal-hero-isolated .ih-doc blockquote {
  margin: 28px 0 !important; padding: 2px 0 2px 20px !important; box-shadow: inset 2px 0 0 #8b5cf6 !important;
}
#ideal-hero-isolated .ih-doc blockquote p { font-size: 18px !important; line-height: 1.6 !important; color: var(--ih-ink) !important; letter-spacing: -.015em !important }
#ideal-hero-isolated .ih-doc blockquote cite { display: block !important; margin-top: 8px !important; font-size: 13px !important; color: var(--ih-faint) !important }

/* inline code + keyboard keys */
#ideal-hero-isolated .ih-doc :not(pre) > code,
#ideal-hero-isolated .ih-doc-lede code {
  padding: 2px 6px !important; border-radius: 6px !important; background: rgba(11, 11, 15, .055) !important;
  font-size: .86em !important; color: var(--ih-ink) !important; overflow-wrap: anywhere;
}
#ideal-hero-isolated kbd,
#ideal-hero-nav kbd {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 20px !important; height: 20px !important;
  padding: 0 5px !important; border-radius: 5px !important; background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--ih-line2), 0 1px 0 rgba(11, 11, 15, .08) !important;
  font-family: var(--ih-font) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1 !important; color: var(--ih-soft) !important;
}

/* heading anchors */
#ideal-hero-isolated .ih-anchor {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 24px !important; height: 24px !important; margin-left: 6px !important; vertical-align: 1px !important;
  border-radius: 6px !important; font-size: .78em !important; font-weight: 500 !important; color: var(--ih-faint) !important;
  opacity: 0; transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
#ideal-hero-isolated h2:hover > .ih-anchor,
#ideal-hero-isolated h3:hover > .ih-anchor,
#ideal-hero-isolated h4:hover > .ih-anchor,
#ideal-hero-isolated .ih-anchor:focus-visible { opacity: 1 }
#ideal-hero-isolated .ih-anchor:hover { background: rgba(11, 11, 15, .05) !important; color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-anchor.ih-copied { opacity: 1; color: #15803d !important }
@media (hover: none) { #ideal-hero-isolated .ih-anchor { opacity: .45 } }
#ideal-hero-isolated :target { scroll-margin-top: 96px !important }
#ideal-hero-isolated .ih-doc h2.ih-flash,
#ideal-hero-isolated .ih-doc h3.ih-flash { animation: ih-flash 1.6s var(--ih-ease) 1 }
@keyframes ih-flash { 0% { background: rgba(139, 92, 246, .16) } 100% { background: rgba(139, 92, 246, 0) } }

/* code blocks with a header + copy button */
#ideal-hero-isolated .ih-code {
  margin: 22px 0 24px !important; border-radius: 14px !important; overflow: hidden !important;
  background: linear-gradient(180deg, #17171c, #0b0b0f) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 30px -18px rgba(11, 11, 15, .5) !important;
}
#ideal-hero-isolated .ih-code-head {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
  padding: 9px 10px 9px 16px !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07) !important;
}
#ideal-hero-isolated .ih-code-lang { font-size: 12px !important; font-weight: 500 !important; color: #a1a1ab !important }
#ideal-hero-isolated .ih-copy {
  display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 9px !important; border-radius: 7px !important;
  font-size: 12px !important; font-weight: 500 !important; color: #c9c9d1 !important; transition: background-color .15s ease, color .15s ease;
}
#ideal-hero-isolated .ih-copy:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important }
#ideal-hero-isolated .ih-copy svg { width: 13px !important; height: 13px !important; stroke: currentColor !important }
#ideal-hero-isolated .ih-copy.ih-copied { color: #86efac !important }
#ideal-hero-isolated .ih-code pre { padding: 16px 18px 18px !important; overflow-x: auto !important; margin: 0 !important }
#ideal-hero-isolated .ih-code pre code {
  display: block !important; font-size: 13px !important; line-height: 1.7 !important; color: #e6e6ea !important; white-space: pre !important; tab-size: 2;
}
#ideal-hero-isolated .ih-code .t-c { color: #7c7c88 !important }   /* comment */
#ideal-hero-isolated .ih-code .t-s { color: #a7f3d0 !important }   /* string */
#ideal-hero-isolated .ih-code .t-k { color: #c4b5fd !important }   /* keyword */
#ideal-hero-isolated .ih-code .t-n { color: #fcd34d !important }   /* number / literal */
#ideal-hero-isolated .ih-code .t-p { color: #7dd3fc !important }   /* property / attr */

/* tables */
#ideal-hero-isolated .ih-table-wrap {
  margin: 20px 0 24px !important; border-radius: 12px !important; overflow-x: auto !important;
  box-shadow: inset 0 0 0 1px var(--ih-line2) !important;
}
#ideal-hero-isolated .ih-table-wrap table { width: 100% !important; border-collapse: collapse !important; font-size: 13.5px !important }
#ideal-hero-isolated .ih-table-wrap th {
  padding: 10px 14px !important; text-align: left !important; font-size: 12px !important; font-weight: 600 !important;
  color: var(--ih-ink) !important; background: #fafafb !important; border-bottom: 1px solid var(--ih-line2) !important; white-space: nowrap !important;
}
#ideal-hero-isolated .ih-table-wrap td {
  padding: 11px 14px !important; vertical-align: top !important; line-height: 1.6 !important; color: var(--ih-soft) !important;
  border-bottom: 1px solid var(--ih-line) !important;
}
#ideal-hero-isolated .ih-table-wrap tr:last-child td { border-bottom: 0 !important }
#ideal-hero-isolated .ih-table-wrap td:first-child { color: var(--ih-ink) !important; white-space: nowrap !important }
#ideal-hero-isolated .ih-table-wrap td code { white-space: nowrap !important }

/* callouts */
#ideal-hero-isolated .ih-callout {
  display: flex !important; gap: 12px !important; margin: 22px 0 !important; padding: 14px 16px !important; border-radius: 12px !important;
  background: rgba(56, 189, 248, .07) !important; box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .22) !important;
}
#ideal-hero-isolated .ih-callout > svg { width: 17px !important; height: 17px !important; margin-top: 3px !important; stroke: #0284c7 !important; flex: none !important }
#ideal-hero-isolated .ih-callout > div > p { margin: 0 !important; font-size: 14px !important; line-height: 1.65 !important; color: #1f3a4d !important }
#ideal-hero-isolated .ih-callout > div > p + p { margin-top: 8px !important }
#ideal-hero-isolated .ih-callout-tip { background: rgba(22, 163, 74, .06) !important; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .2) !important }
#ideal-hero-isolated .ih-callout-tip > svg { stroke: #15803d !important }
#ideal-hero-isolated .ih-callout-tip > div > p { color: #1d3b27 !important }
#ideal-hero-isolated .ih-callout-warn { background: rgba(217, 119, 6, .07) !important; box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .24) !important }
#ideal-hero-isolated .ih-callout-warn > svg { stroke: #b45309 !important }
#ideal-hero-isolated .ih-callout-warn > div > p { color: #4a3210 !important }

/* numbered procedure */
#ideal-hero-isolated .ih-doc ol.ih-procedure { counter-reset: ih-proc; padding-left: 0 !important; gap: 0 !important; margin: 22px 0 26px !important }
#ideal-hero-isolated .ih-doc ol.ih-procedure > li {
  position: relative !important; list-style: none !important; padding: 0 0 22px 44px !important; counter-increment: ih-proc;
}
#ideal-hero-isolated .ih-doc ol.ih-procedure > li::before {
  content: counter(ih-proc) !important; position: absolute !important; left: 0 !important; top: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; width: 27px !important; height: 27px !important;
  border-radius: 50% !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--ih-line2), var(--ih-sh-1) !important;
  font-size: 12.5px !important; font-weight: 600 !important; color: var(--ih-ink) !important;
}
#ideal-hero-isolated .ih-doc ol.ih-procedure > li::after {
  content: "" !important; position: absolute !important; left: 13px !important; top: 32px !important; bottom: 6px !important; width: 1px !important; background: var(--ih-line2) !important;
}
#ideal-hero-isolated .ih-doc ol.ih-procedure > li:last-child { padding-bottom: 0 !important }
#ideal-hero-isolated .ih-doc ol.ih-procedure > li:last-child::after { content: none !important }
#ideal-hero-isolated .ih-doc ol.ih-procedure > li > strong:first-child { display: block !important; margin-bottom: 2px !important; padding-top: 2px !important }
#ideal-hero-isolated .ih-doc ol.ih-procedure .ih-code { margin: 12px 0 4px !important }

/* link cards inside docs (hub + "next steps") */
#ideal-hero-isolated .ih-linkcards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin: 20px 0 26px !important }
#ideal-hero-isolated .ih-linkcard {
  position: relative !important; display: block !important; padding: 18px 18px 18px !important; border-radius: 14px !important;
  background: #fff !important; box-shadow: var(--ih-ring), 0 0 0 1px rgba(11, 11, 15, .07) !important;
  transition: box-shadow .2s ease, transform .25s var(--ih-spring-nav);
}
#ideal-hero-isolated .ih-linkcard:hover { transform: translateY(-2px); box-shadow: var(--ih-ring), 0 0 0 1px rgba(11, 11, 15, .1), 0 10px 24px -14px rgba(11, 11, 15, .22) !important }
#ideal-hero-isolated .ih-linkcard b { display: block !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: -.015em !important; color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-linkcard span { display: block !important; margin-top: 5px !important; font-size: 13.5px !important; line-height: 1.55 !important; color: var(--ih-soft) !important }
#ideal-hero-isolated .ih-linkcard .ih-icon { margin-bottom: 12px !important; width: 32px !important; height: 32px !important }

/* API endpoint block */
#ideal-hero-isolated .ih-endpoint {
  display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; margin: 14px 0 16px !important;
  padding: 10px 12px !important; border-radius: 10px !important; background: #fafafb !important; box-shadow: inset 0 0 0 1px var(--ih-line2) !important;
}
#ideal-hero-isolated .ih-endpoint code { font-size: 13.5px !important; color: var(--ih-ink) !important; background: none !important; padding: 0 !important }
#ideal-hero-isolated .ih-endpoint .ih-method { margin-right: 0 !important }
#ideal-hero-isolated .ih-method-patch { background: #d97706 !important }

/* ---------- 4. feedback, prev / next ---------- */
#ideal-hero-isolated .ih-doc-feedback {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px 20px !important;
  margin-top: 56px !important; padding: 16px 0 !important; border-top: 1px solid var(--ih-line) !important; border-bottom: 1px solid var(--ih-line) !important;
  font-size: 13.5px !important; color: var(--ih-soft) !important;
}
#ideal-hero-isolated .ih-fb-btns { display: flex !important; gap: 8px !important }
#ideal-hero-isolated .ih-fb-btn {
  display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 7px 12px !important; border-radius: var(--ih-pill) !important;
  background: #fff !important; box-shadow: inset 0 0 0 1px var(--ih-line2) !important; font-size: 13px !important; color: var(--ih-ink) !important;
  transition: background-color .15s ease, box-shadow .15s ease;
}
#ideal-hero-isolated .ih-fb-btn:hover { background: #fafafb !important; box-shadow: inset 0 0 0 1px rgba(11, 11, 15, .2) !important }
#ideal-hero-isolated .ih-fb-btn svg { width: 14px !important; height: 14px !important; stroke: currentColor !important }
#ideal-hero-isolated .ih-fb-btn[aria-pressed="true"] { background: rgba(139, 92, 246, .08) !important; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .35) !important; color: #5b21b6 !important }
#ideal-hero-isolated .ih-fb-meta { display: flex !important; flex-wrap: wrap !important; gap: 6px 16px !important; font-size: 12.5px !important; color: var(--ih-faint) !important }
#ideal-hero-isolated .ih-fb-meta a { color: var(--ih-soft) !important; text-decoration: underline; text-underline-offset: 2px }

#ideal-hero-isolated .ih-pn { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin-top: 24px !important }
#ideal-hero-isolated .ih-pn a {
  display: block !important; padding: 16px 18px !important; border-radius: 14px !important; background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--ih-line2) !important; transition: box-shadow .2s ease, background-color .2s ease;
}
#ideal-hero-isolated .ih-pn a:hover { box-shadow: inset 0 0 0 1px rgba(11, 11, 15, .24), 0 8px 20px -14px rgba(11, 11, 15, .25) !important }
#ideal-hero-isolated .ih-pn .ih-pn-next { grid-column: 2 !important; text-align: right !important }
#ideal-hero-isolated .ih-pn small { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; color: var(--ih-faint) !important }
#ideal-hero-isolated .ih-pn .ih-pn-next small { justify-content: flex-end !important }
#ideal-hero-isolated .ih-pn small svg { width: 12px !important; height: 12px !important; stroke: currentColor !important }
#ideal-hero-isolated .ih-pn b { display: block !important; margin-top: 4px !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: -.015em !important; color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-pn span.ih-pn-group { display: block !important; margin-top: 2px !important; font-size: 12px !important; color: var(--ih-faint) !important }

/* ---------- 5. search trigger + dialog ---------- */
#ideal-hero-isolated .ih-search-trigger {
  display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important;
  padding: 9px 9px 9px 12px !important; border-radius: 11px !important; background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--ih-line2), 0 1px 2px rgba(11, 11, 15, .04) !important;
  font-size: 13.5px !important; color: var(--ih-faint) !important; text-align: left !important;
  transition: box-shadow .15s ease, color .15s ease;
}
#ideal-hero-isolated .ih-search-trigger:hover { color: var(--ih-soft) !important; box-shadow: inset 0 0 0 1px rgba(11, 11, 15, .2), 0 1px 2px rgba(11, 11, 15, .04) !important }
#ideal-hero-isolated .ih-search-trigger > svg { width: 15px !important; height: 15px !important; stroke: currentColor !important }
#ideal-hero-isolated .ih-search-trigger .ih-st-label { flex: 1 1 auto !important }
#ideal-hero-isolated .ih-search-trigger .ih-kbds,
#ideal-hero-nav .ih-kbds { display: inline-flex !important; gap: 3px !important; flex: none !important }
#ideal-hero-isolated .ih-search-trigger.ih-search-lg {
  max-width: 560px !important; margin: 28px auto 0 !important; padding: 14px 14px 14px 18px !important; border-radius: 14px !important; font-size: 15px !important;
  box-shadow: inset 0 0 0 1px var(--ih-line2), var(--ih-sh-2) !important;
}
#ideal-hero-isolated .ih-search-trigger.ih-search-lg > svg { width: 18px !important; height: 18px !important }

#ideal-hero-nav .ih-ds {
  position: fixed !important; inset: 0 !important; z-index: 900100 !important;
  display: flex !important; align-items: flex-start !important; justify-content: center !important;
  padding: min(12vh, 120px) 16px 16px !important; text-align: left !important;
}
#ideal-hero-nav .ih-ds[hidden] { display: none !important }
#ideal-hero-nav .ih-ds-scrim {
  position: absolute !important; inset: 0 !important; background: rgba(11, 11, 15, .32) !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#ideal-hero-nav .ih-ds-panel {
  position: relative !important; display: flex !important; flex-direction: column !important;
  width: 100% !important; max-width: 640px !important; max-height: min(620px, calc(100vh - 2 * min(12vh, 120px))) !important;
  border-radius: 18px !important; background: #fff !important; overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(11, 11, 15, .08), var(--ih-sh-3) !important;
}
@media (prefers-reduced-motion: no-preference) {
  #ideal-hero-nav .ih-ds:not([hidden]) .ih-ds-panel { animation: ih-ds-in .22s var(--ih-spring) both }
  #ideal-hero-nav .ih-ds:not([hidden]) .ih-ds-scrim { animation: ih-ds-fade .18s ease both }
}
@keyframes ih-ds-in { from { opacity: 0; transform: translateY(8px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes ih-ds-fade { from { opacity: 0 } to { opacity: 1 } }
#ideal-hero-nav .ih-ds-head {
  display: flex !important; align-items: center !important; gap: 10px !important; padding: 0 12px 0 18px !important;
  box-shadow: inset 0 -1px 0 var(--ih-line) !important;
}
#ideal-hero-nav .ih-ds-head > svg { width: 18px !important; height: 18px !important; stroke: var(--ih-faint) !important }
#ideal-hero-nav .ih-ds-input {
  flex: 1 1 auto !important; height: 58px !important; border: 0 !important; background: transparent !important;
  font-family: var(--ih-font) !important; font-size: 16px !important; color: var(--ih-ink) !important; outline: none !important;
}
#ideal-hero-nav .ih-ds-input::placeholder { color: var(--ih-faint) !important }
#ideal-hero-nav .ih-ds-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none }
#ideal-hero-nav .ih-ds-close {
  display: inline-flex !important; align-items: center !important; padding: 5px 8px !important; border-radius: 7px !important;
  box-shadow: inset 0 0 0 1px var(--ih-line2) !important; font-size: 11.5px !important; font-weight: 500 !important; color: var(--ih-soft) !important;
}
#ideal-hero-nav .ih-ds-close:hover { color: var(--ih-ink) !important; background: #fafafb !important }
#ideal-hero-nav .ih-ds-close .ih-ds-cancel { display: none !important }
#ideal-hero-nav .ih-ds-body { flex: 1 1 auto !important; overflow-y: auto !important; padding: 8px 8px 10px !important; overscroll-behavior: contain }
#ideal-hero-nav .ih-ds-group { padding: 12px 10px 6px !important; font-size: 11.5px !important; font-weight: 600 !important; color: var(--ih-faint) !important }
#ideal-hero-nav .ih-ds-item {
  display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 10px !important;
  color: var(--ih-ink) !important; cursor: pointer !important; scroll-margin: 8px !important;
}
#ideal-hero-nav .ih-ds-item[aria-selected="true"] { background: rgba(139, 92, 246, .08) !important; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .22) !important }
#ideal-hero-nav .ih-ds-ico {
  display: flex !important; align-items: center !important; justify-content: center !important; flex: none !important;
  width: 30px !important; height: 30px !important; border-radius: 8px !important; background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--ih-line2) !important; color: var(--ih-soft) !important; font-size: 13px !important; font-weight: 600 !important;
}
#ideal-hero-nav .ih-ds-ico svg { width: 15px !important; height: 15px !important; stroke: currentColor !important }
#ideal-hero-nav .ih-ds-item[aria-selected="true"] .ih-ds-ico { color: #6d28d9 !important; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .3) !important }
#ideal-hero-nav .ih-ds-text { min-width: 0 !important; flex: 1 1 auto !important }
#ideal-hero-nav .ih-ds-title { display: block !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; color: var(--ih-ink) !important }
#ideal-hero-nav .ih-ds-path { display: block !important; margin-top: 1px !important; font-size: 12px !important; color: var(--ih-faint) !important }
#ideal-hero-nav .ih-ds-snip {
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important;
  margin-top: 4px !important; font-size: 12.75px !important; line-height: 1.5 !important; color: var(--ih-soft) !important;
}
#ideal-hero-nav .ih-ds mark { background: rgba(251, 191, 36, .32) !important; color: var(--ih-ink) !important; border-radius: 3px !important; padding: 0 1px !important }
#ideal-hero-nav .ih-ds-enter { flex: none !important; align-self: center !important; opacity: 0 }
#ideal-hero-nav .ih-ds-item[aria-selected="true"] .ih-ds-enter { opacity: 1 }
#ideal-hero-nav .ih-ds-empty { padding: 40px 20px 44px !important; text-align: center !important; font-size: 14px !important; color: var(--ih-soft) !important }
#ideal-hero-nav .ih-ds-empty b { display: block !important; margin-bottom: 6px !important; font-weight: 600 !important; color: var(--ih-ink) !important }
#ideal-hero-nav .ih-ds-empty a { color: var(--ih-ink) !important; text-decoration: underline; text-underline-offset: 2px }
#ideal-hero-nav .ih-ds-foot {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 18px !important; padding: 10px 16px !important;
  box-shadow: inset 0 1px 0 var(--ih-line) !important; background: #fafafb !important; font-size: 12px !important; color: var(--ih-faint) !important;
}
#ideal-hero-nav .ih-ds-foot span { display: inline-flex !important; align-items: center !important; gap: 6px !important }
#ideal-hero-nav .ih-ds-foot kbd { height: 18px !important; min-width: 18px !important; font-size: 10.5px !important }
#ideal-hero-nav .ih-ds-count { margin-left: auto !important }
#ideal-hero-nav .ih-sr {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap !important;
}
html.ih-ds-lock, html.ih-ds-lock body { overflow: hidden !important }

/* ---------- 6. legal layout ---------- */
#ideal-hero-isolated .ih-legal {
  display: grid !important; grid-template-columns: minmax(0, 720px) 220px !important; justify-content: center !important;
  gap: clamp(32px, 5vw, 80px) !important; max-width: 1120px !important; margin: 0 auto !important; text-align: left !important;
}
#ideal-hero-isolated .ih-legal .ih-doc { margin-top: 0 !important }
#ideal-hero-isolated .ih-legal-summary {
  margin-bottom: 36px !important; padding: 20px 22px !important; border-radius: 14px !important;
  background: #fafafb !important; box-shadow: inset 0 0 0 1px var(--ih-line) !important;
}
#ideal-hero-isolated .ih-legal-summary > b { display: block !important; margin-bottom: 10px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-legal-summary ul { margin: 0 !important }
#ideal-hero-isolated .ih-legal-summary li { font-size: 14px !important }

/* ---------- 7. responsive ---------- */
@media (max-width: 1200px) {
  #ideal-hero-isolated .ih-docs-main { grid-template-columns: minmax(0, 1fr) !important }
  #ideal-hero-isolated .ih-docs-main > .ih-toc { display: none !important }
  #ideal-hero-isolated .ih-legal { grid-template-columns: minmax(0, 720px) !important }
  #ideal-hero-isolated .ih-legal > .ih-toc { display: none !important }
  #ideal-hero-isolated .ih-toc-inline {
    display: block !important; margin-top: 22px !important; border-radius: 12px !important; background: #fafafb !important; box-shadow: inset 0 0 0 1px var(--ih-line) !important;
  }
  #ideal-hero-isolated .ih-toc-inline > summary {
    display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px !important;
    font-size: 13.5px !important; font-weight: 500 !important; color: var(--ih-ink) !important; cursor: pointer !important; list-style: none !important;
  }
  #ideal-hero-isolated .ih-toc-inline > summary::-webkit-details-marker { display: none !important }
  #ideal-hero-isolated .ih-toc-inline > summary svg { width: 15px !important; height: 15px !important; stroke: var(--ih-faint) !important; transition: transform .25s var(--ih-spring-nav) }
  #ideal-hero-isolated .ih-toc-inline[open] > summary svg { transform: rotate(180deg) }
  #ideal-hero-isolated .ih-toc-inline ol { display: grid !important; gap: 2px !important; padding: 0 16px 14px !important }
  #ideal-hero-isolated .ih-toc-inline a { display: block !important; padding: 4px 0 !important; font-size: 13.5px !important; color: var(--ih-soft) !important }
  #ideal-hero-isolated .ih-toc-inline .ih-toc-l3 a { padding-left: 14px !important; font-size: 13px !important }
  #ideal-hero-isolated .ih-toc-inline a:hover { color: var(--ih-ink) !important }
}

@media (max-width: 960px) {
  #ideal-hero-isolated .ih-docs { grid-template-columns: minmax(0, 1fr) !important; padding-top: 96px !important; gap: 20px !important }
  #ideal-hero-isolated .ih-docs-side { position: static !important; max-height: none !important; overflow: visible !important; padding: 0 !important }
  #ideal-hero-isolated .ih-docs-bar { display: flex !important; gap: 8px !important }
  #ideal-hero-isolated .ih-docs-bar .ih-search-trigger { flex: 1 1 auto !important }
  #ideal-hero-isolated .ih-docs-toggle {
    display: inline-flex !important; align-items: center !important; gap: 8px !important; flex: none !important; padding: 9px 12px !important; border-radius: 11px !important;
    background: #fff !important; box-shadow: inset 0 0 0 1px var(--ih-line2) !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--ih-ink) !important;
  }
  #ideal-hero-isolated .ih-docs-toggle svg { width: 15px !important; height: 15px !important; stroke: currentColor !important; transition: transform .25s var(--ih-spring-nav) }
  #ideal-hero-isolated .ih-docs-toggle[aria-expanded="true"] svg { transform: rotate(180deg) }
  #ideal-hero-isolated .ih-docs-navwrap {
    display: none !important; margin-top: 10px !important; padding: 4px 12px 16px !important; border-radius: 14px !important;
    background: #fff !important; box-shadow: inset 0 0 0 1px var(--ih-line2), var(--ih-sh-2) !important;
  }
  #ideal-hero-isolated .ih-docs-navwrap.ih-open { display: block !important }
  #ideal-hero-isolated .ih-docs-links a { padding: 9px 10px !important; font-size: 14.5px !important }

  #ideal-hero-isolated .ih-split { grid-template-columns: minmax(0, 1fr) !important }
  #ideal-hero-isolated .ih-split-sticky { position: static !important }
  #ideal-hero-isolated .ih-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  #ideal-hero-isolated .ih-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  #ideal-hero-isolated .ih-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  #ideal-hero-isolated .ih-facts > div:nth-child(3) { border-left: 0 !important }
  #ideal-hero-isolated .ih-facts > div:nth-child(n+3) { border-top: 1px solid var(--ih-line) !important }
  #ideal-hero-isolated .ih-release { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important }
  #ideal-hero-isolated .ih-release-meta { position: static !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px 12px !important }
  #ideal-hero-isolated .ih-release-meta .ih-pilltag { margin-top: 0 !important }
  #ideal-hero-isolated .ih-auth { grid-template-columns: minmax(0, 440px) !important }
  #ideal-hero-isolated .ih-auth-aside { order: 2 !important }
}
@media (min-width: 961px) {
  #ideal-hero-isolated .ih-docs-bar .ih-docs-toggle { display: none !important }
  #ideal-hero-isolated .ih-docs-navwrap { display: block !important }
}

@media (max-width: 640px) {
  #ideal-hero-isolated .ih-grid-2,
  #ideal-hero-isolated .ih-grid-3,
  #ideal-hero-isolated .ih-grid-4,
  #ideal-hero-isolated .ih-linkcards,
  #ideal-hero-isolated .ih-pn { grid-template-columns: minmax(0, 1fr) !important }
  #ideal-hero-isolated .ih-pn .ih-pn-next { grid-column: 1 !important }
  #ideal-hero-isolated .ih-doc h2 { font-size: 21px !important; margin-top: 44px !important }
  #ideal-hero-isolated .ih-doc-lede { font-size: 16px !important }
  #ideal-hero-isolated .ih-article .ih-doc p,
  #ideal-hero-isolated .ih-article .ih-doc li { font-size: 16px !important }
  #ideal-hero-isolated .ih-uptime { gap: 1px !important }
  #ideal-hero-isolated .ih-search-trigger .ih-kbds { display: none !important }

  #ideal-hero-nav .ih-ds { padding: 0 !important; align-items: stretch !important }
  #ideal-hero-nav .ih-ds-panel { max-width: none !important; max-height: none !important; height: 100% !important; border-radius: 0 !important }
  #ideal-hero-nav .ih-ds-close kbd { display: none !important }
  #ideal-hero-nav .ih-ds-close .ih-ds-cancel { display: inline !important }
  #ideal-hero-nav .ih-ds-close { box-shadow: none !important; font-size: 14px !important; color: #6d28d9 !important }
  #ideal-hero-nav .ih-ds-foot .ih-ds-hint { display: none !important }
  #ideal-hero-nav .ih-ds-input { font-size: 16px !important }
}
#ideal-hero-isolated .ih-doc-feedback + .ih-fb-meta { margin-top: 14px !important }
#ideal-hero-isolated .ih-toc .ih-toc-extra a { padding: 0 !important; font-size: 12.75px !important; color: var(--ih-soft) !important }
#ideal-hero-isolated .ih-toc .ih-toc-extra a:hover { color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-search-trigger.ih-search-lg { margin: 26px 0 4px !important; max-width: 600px !important }

/* five-step process (careers) */
#ideal-hero-isolated .ih-steps.ih-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important }
@media (max-width: 1100px) { #ideal-hero-isolated .ih-steps.ih-steps-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important } }
@media (max-width: 860px) { #ideal-hero-isolated .ih-steps.ih-steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important } }
@media (max-width: 560px) { #ideal-hero-isolated .ih-steps.ih-steps-5 { grid-template-columns: minmax(0, 1fr) !important } }
@media (max-width: 640px) { #ideal-hero-nav .ih-ds-enter { display: none !important } }
#ideal-hero-isolated [hidden] { display: none !important }

/* blog: featured post + author/pn spacing */
#ideal-hero-isolated .ih-feature-post {
  display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important; gap: clamp(28px, 4vw, 56px) !important;
  padding: clamp(26px, 4vw, 44px) !important; text-align: left !important;
}
#ideal-hero-isolated .ih-feature-post .ih-h2 { font-size: clamp(26px, 3.2vw, 36px) !important }
#ideal-hero-isolated .ih-feature-post .ih-lede { margin-left: 0 !important; max-width: 56ch !important }
#ideal-hero-isolated .ih-feature-aside { display: flex !important; flex-direction: column !important; padding: 22px !important; border-radius: 14px !important; background: #fafafb !important; box-shadow: inset 0 0 0 1px var(--ih-line) !important }
#ideal-hero-isolated .ih-feature-aside ol { margin: 12px 0 18px !important; display: grid !important; gap: 8px !important; counter-reset: fp }
#ideal-hero-isolated .ih-feature-aside li { position: relative !important; padding-left: 26px !important; font-size: 14px !important; line-height: 1.55 !important; color: var(--ih-soft) !important; counter-increment: fp }
#ideal-hero-isolated .ih-feature-aside li::before { content: counter(fp) !important; position: absolute !important; left: 0 !important; top: 1px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--ih-line2) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 18px !important; text-align: center !important; color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-feature-aside .ih-card-link { margin-top: auto !important }
#ideal-hero-isolated .ih-article .ih-pn { margin-top: 32px !important }
#ideal-hero-isolated .ih-article .ih-doc blockquote { margin: 26px 0 !important; padding: 4px 0 4px 20px !important; border-left: 3px solid #c4b5fd !important; font-size: 18px !important; line-height: 1.6 !important; color: var(--ih-ink) !important; letter-spacing: -.01em !important }
#ideal-hero-isolated .ih-article .ih-toc-inline { margin: 0 0 28px !important }
@media (max-width: 860px) { #ideal-hero-isolated .ih-feature-post { grid-template-columns: minmax(0, 1fr) !important } }

/* articles: in-post contents at every width */
#ideal-hero-isolated .ih-article .ih-toc-inline {
    display: block !important; margin-top: 22px !important; border-radius: 12px !important; background: #fafafb !important; box-shadow: inset 0 0 0 1px var(--ih-line) !important;
  }
#ideal-hero-isolated .ih-article .ih-toc-inline > summary {
    display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px !important;
    font-size: 13.5px !important; font-weight: 500 !important; color: var(--ih-ink) !important; cursor: pointer !important; list-style: none !important;
  }
#ideal-hero-isolated .ih-article .ih-toc-inline > summary::-webkit-details-marker { display: none !important }
#ideal-hero-isolated .ih-article .ih-toc-inline > summary svg { width: 15px !important; height: 15px !important; stroke: var(--ih-faint) !important; transition: transform .25s var(--ih-spring-nav) }
#ideal-hero-isolated .ih-article .ih-toc-inline[open] > summary svg { transform: rotate(180deg) }
#ideal-hero-isolated .ih-article .ih-toc-inline ol { display: grid !important; gap: 2px !important; padding: 0 16px 14px !important }
#ideal-hero-isolated .ih-article .ih-toc-inline a { display: block !important; padding: 4px 0 !important; font-size: 13.5px !important; color: var(--ih-soft) !important }
#ideal-hero-isolated .ih-article .ih-toc-inline .ih-toc-l3 a { padding-left: 14px !important; font-size: 13px !important }
#ideal-hero-isolated .ih-article .ih-toc-inline a:hover { color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-article .ih-toc-inline { margin: 0 0 28px !important }
#ideal-hero-isolated .ih-sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap !important }
#ideal-hero-isolated .ih-feature-post .ih-h2 { margin: 18px 0 0 !important; max-width: 24ch !important; text-align: left !important }
#ideal-hero-isolated .ih-feature-post .ih-lede { margin: 14px 0 0 !important; text-align: left !important }
#ideal-hero-isolated .ih-feature-post .ih-byline { justify-content: flex-start !important }
#ideal-hero-isolated .ih-card-s.ih-card-dashed { background: transparent !important; box-shadow: inset 0 0 0 1px var(--ih-line2) !important; border-style: dashed }
#ideal-hero-isolated .ih-byline span.ih-avatar { display: inline-flex !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important }

/* resource pages: link lists, hero search, card header row */
#ideal-hero-isolated .ih-linklist { display: grid !important; margin-top: 16px !important; border-top: 1px solid var(--ih-line) !important }
#ideal-hero-isolated .ih-linklist a {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
  padding: 10px 0 !important; border-bottom: 1px solid var(--ih-line) !important; font-size: 13.5px !important; color: var(--ih-soft) !important; transition: color .15s ease;
}
#ideal-hero-isolated .ih-linklist li:last-child a { border-bottom: 0 !important; padding-bottom: 0 !important }
#ideal-hero-isolated .ih-linklist a svg { width: 13px !important; height: 13px !important; flex: none !important; stroke: #b9b9c2 !important; stroke-width: 2 !important; transition: transform .2s var(--ih-spring) }
#ideal-hero-isolated .ih-linklist a:hover { color: var(--ih-ink) !important }
#ideal-hero-isolated .ih-linklist a:hover svg { transform: translateX(2px); stroke: var(--ih-ink) !important }
#ideal-hero-isolated .ih-hero-search { max-width: 560px !important; margin: clamp(26px, 4vw, 36px) auto 0 !important }
#ideal-hero-isolated .ih-hero-search .ih-search-trigger { width: 100% !important }
#ideal-hero-isolated .ih-hero-search .ih-help { margin-top: 12px !important }
#ideal-hero-isolated .ih-card-top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important }
#ideal-hero-isolated .ih-card-top .ih-tagrow { justify-content: flex-end !important }
#ideal-hero-isolated .ih-checklist.ih-checklist-sm { gap: 6px !important; margin-top: 16px !important }
#ideal-hero-isolated .ih-checklist.ih-checklist-sm li { font-size: 13px !important }
#ideal-hero-isolated a.ih-pilltag { transition: box-shadow .15s ease, color .15s ease }
#ideal-hero-isolated a.ih-pilltag:hover { color: var(--ih-ink) !important; box-shadow: inset 0 0 0 1px var(--ih-line2) !important }

/* changelog / status extras */
#ideal-hero-isolated .ih-release-link { color: inherit !important; text-decoration: none !important }
#ideal-hero-isolated .ih-release-link:hover { text-decoration: underline !important; text-underline-offset: 3px }
#ideal-hero-isolated .ih-change-group h3 svg { width: 14px !important; height: 14px !important; stroke: currentColor !important; stroke-width: 2 !important }
#ideal-hero-isolated .ih-releases { max-width: 980px !important; margin: 0 auto !important }
#ideal-hero-isolated .ih-card-s.ih-comp-list { padding: 0 !important; margin-top: 28px !important; text-align: left !important }
#ideal-hero-isolated .ih-incidents { display: grid !important; gap: 12px !important; margin-top: 28px !important }
#ideal-hero-isolated .ih-incident { text-align: left !important }
#ideal-hero-isolated .ih-incident .ih-meta { margin-top: 6px !important }
#ideal-hero-isolated .ih-incident .ih-body { margin-top: 10px !important }
#ideal-hero-isolated .ih-pagehead .ih-banner { max-width: 620px !important; margin-left: auto !important; margin-right: auto !important }
#ideal-hero-isolated .ih-ctas .ih-btn svg { width: 15px !important; height: 15px !important; stroke: currentColor !important; margin-right: 6px !important }
@media (max-width: 640px) { #ideal-hero-isolated .ih-uptime { grid-template-columns: repeat(45, minmax(0, 1fr)) !important } #ideal-hero-isolated .ih-uptime i:nth-child(-n+45) { display: none !important } }
#ideal-hero-isolated .ih-auth-section { padding-top: 0 !important }
#ideal-hero-isolated .ih-legal-dates { display: inline-block !important; margin-top: 10px !important; font-size: 13px !important; color: var(--ih-faint) !important }
#ideal-hero-isolated .ih-legal-section { padding-top: 0 !important }
#ideal-hero-isolated .ih-legal > article { min-width: 0 !important }
#ideal-hero-isolated .ih-legal .ih-toc-inline { margin: 0 0 28px !important }
#ideal-hero-isolated .ih-legal-related { margin-top: 40px !important; padding-top: 20px !important; border-top: 1px solid var(--ih-line) !important; font-size: 13.5px !important; color: var(--ih-faint) !important }
#ideal-hero-isolated .ih-legal-related a { color: var(--ih-ink) !important; text-decoration: underline; text-underline-offset: 2px }
/* room for the draggable thumb, which overhangs the track (the TOC clips overflow) */
#ideal-hero-isolated .ih-toc { padding-left: 6px !important; margin-left: -6px !important }
#ideal-hero-isolated .ih-toc-thumb:focus:not(:focus-visible) { outline: none !important }
/* rounded (pill) ends on the TOC indicator */
#ideal-hero-isolated .ih-toc-thumb::before { left: 4px !important; width: 3px !important; top: 5px !important; bottom: 5px !important; border-radius: 999px !important }
#ideal-hero-isolated .ih-toc-thumb:hover::before,
#ideal-hero-isolated .ih-toc-thumb:focus-visible::before,
#ideal-hero-isolated .ih-toc-thumb.ih-dragging::before { left: 3.5px !important; width: 4px !important; border-radius: 999px !important }
/* fully rounded pill indicator (wide enough for the round ends to read at 1x) */
#ideal-hero-isolated .ih-toc-thumb::before { left: 4px !important; width: 4px !important; top: 6px !important; bottom: 6px !important; border-radius: 9999px !important }
/* fixed thickness: no change on hover, focus or drag */
#ideal-hero-isolated .ih-toc-thumb:hover::before,
#ideal-hero-isolated .ih-toc-thumb:focus-visible::before,
#ideal-hero-isolated .ih-toc-thumb.ih-dragging::before { left: 4px !important; width: 4px !important; border-radius: 9999px !important; transition: none !important }

/* worm-style TOC indicator: top and bottom edges animate independently (docs.js) */
#ideal-hero-isolated .ih-toc-thumb.ih-dragging { transition: none }
#ideal-hero-isolated .ih-toc-thumb::before { transition: none !important }

/* TOC indicator colour — brand violet with a soft glow instead of black.
   Change --ih-toc-accent to recolour it (keep contrast ≥ 3:1 on white). */
#ideal-hero-isolated .ih-toc { --ih-toc-accent: #7c3aed; --ih-toc-glow: rgba(124, 58, 237, .38) }
#ideal-hero-isolated .ih-toc-thumb::before {
  background: var(--ih-toc-accent) !important;
  box-shadow: 0 0 10px 0 var(--ih-toc-glow), 0 0 2px 0 var(--ih-toc-glow) !important;
}
#ideal-hero-isolated .ih-toc-thumb:hover::before,
#ideal-hero-isolated .ih-toc-thumb.ih-dragging::before {
  box-shadow: 0 0 14px 1px var(--ih-toc-glow), 0 0 2px 0 var(--ih-toc-glow) !important;
}
#ideal-hero-isolated .ih-toc ol { box-shadow: inset 1px 0 0 #ececf1 !important }

/* TOC indicator — pale pearl white with a fine noise grain.
   A hairline ring and soft shadow keep it visible on the white page.
   6px wide (fixed in every state) so the grain can actually be seen. */
#ideal-hero-isolated .ih-toc {
  --ih-toc-pearl-top: #ffffff;
  --ih-toc-pearl-bottom: #f6f5f1;
  --ih-toc-ring: rgba(11, 11, 15, .13);
}
#ideal-hero-isolated .ih-toc-thumb::before,
#ideal-hero-isolated .ih-toc-thumb:hover::before,
#ideal-hero-isolated .ih-toc-thumb:focus-visible::before,
#ideal-hero-isolated .ih-toc-thumb.ih-dragging::before {
  left: 3px !important; width: 6px !important; top: 5px !important; bottom: 5px !important; border-radius: 9999px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat 0 0 / 48px 48px,
    linear-gradient(180deg, var(--ih-toc-pearl-top), var(--ih-toc-pearl-bottom)) !important;
  box-shadow:
    0 0 0 1px var(--ih-toc-ring),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 3px rgba(11, 11, 15, .12),
    0 2px 8px -2px rgba(11, 11, 15, .10) !important;
}
#ideal-hero-isolated .ih-toc-thumb:hover::before,
#ideal-hero-isolated .ih-toc-thumb.ih-dragging::before {
  box-shadow:
    0 0 0 1px rgba(11, 11, 15, .22),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 6px rgba(11, 11, 15, .16),
    0 4px 12px -4px rgba(11, 11, 15, .14) !important;
}


/* ============ TOC indicator variants ============
   data-style="wheel" (default): the pearl pill, 8px wide, with a tiny
   scroll-wheel dot that travels down as you read the current section.
   data-style="mouse": a small mouse outline in the same pearl finish.
   Choose with <html data-ih-thumb="mouse">; the dot position comes from
   --ih-p (0–1), set by docs.js. */
#ideal-hero-isolated .ih-toc-thumb[data-style="wheel"]::before,
#ideal-hero-isolated .ih-toc-thumb[data-style="wheel"]:hover::before,
#ideal-hero-isolated .ih-toc-thumb[data-style="wheel"]:focus-visible::before,
#ideal-hero-isolated .ih-toc-thumb[data-style="wheel"].ih-dragging::before { left: 2px !important; width: 8px !important }
#ideal-hero-isolated .ih-toc-wheel {
  position: absolute !important; display: block !important; left: 5px !important; width: 2px !important; height: 4px !important;
  border-radius: 2px !important; background: rgba(11, 11, 15, .38) !important; pointer-events: none !important;
  top: calc(8px + var(--ih-p, 0) * (100% - 20px)) !important;
  transition: top .18s ease-out;
}
#ideal-hero-isolated .ih-toc-thumb.ih-dragging .ih-toc-wheel { transition: none }

/* mouse variant: fixed-size outline centred on the active item (no stretch) */
#ideal-hero-isolated .ih-toc:has(.ih-toc-thumb[data-style="mouse"]) { padding-left: 9px !important; margin-left: -9px !important }
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"]::before,
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"]:hover::before,
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"]:focus-visible::before,
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"].ih-dragging::before {
  left: -1px !important; width: 14px !important; top: calc(50% - 11px) !important; bottom: auto !important; height: 22px !important;
  border-radius: 7px 7px 7px 7px / 8px 8px 8px 8px !important;
}
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"] .ih-toc-wheel {
  left: 5px !important; width: 2px !important; height: 5px !important; border-radius: 2px !important;
  top: calc(50% - 11px + 4px + var(--ih-p, 0) * 7px) !important;
}


/* ============ TOC indicator: the mouse (default) ============
   A tiny mouse seen from above, in the same pearl-white grain. It sits at the
   leading edge of the indicator, its tail fills the rest — so the "worm"
   stretch becomes the tail stretching — and it turns around (data-dir) when
   the reader scrolls back up. */
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"]::before,
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"]:hover::before,
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"]:focus-visible::before,
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"].ih-dragging::before { display: none !important }
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"] .ih-toc-wheel { display: none !important }
#ideal-hero-isolated .ih-toc-mouse {
  position: absolute !important; display: block !important; left: -1px !important; width: 14px !important; height: 17.5px !important;
  overflow: visible !important; pointer-events: none !important;
  filter: drop-shadow(0 1px 1.2px rgba(11, 11, 15, .16)) drop-shadow(0 2px 4px rgba(11, 11, 15, .08));
  transition: transform .32s cubic-bezier(.3, 1.4, .5, 1);
}
#ideal-hero-isolated .ih-toc-tail {
  position: absolute !important; display: block !important; left: 5px !important; width: 2px !important;
  border-radius: 2px !important; background: #dcd9d2 !important; pointer-events: none !important;
  box-shadow: 0 0 0 .5px rgba(11, 11, 15, .08) !important;
}
/* running down: head at the bottom, tail trailing above */
#ideal-hero-isolated .ih-toc-thumb[data-dir="down"] .ih-toc-mouse { top: auto !important; bottom: 3px !important; transform: rotate(0deg) }
#ideal-hero-isolated .ih-toc-thumb[data-dir="down"] .ih-toc-tail { top: 5px !important; bottom: 19px !important }
/* running up: turned around, tail trailing below */
#ideal-hero-isolated .ih-toc-thumb[data-dir="up"] .ih-toc-mouse { bottom: auto !important; top: 3px !important; transform: rotate(180deg) }
#ideal-hero-isolated .ih-toc-thumb[data-dir="up"] .ih-toc-tail { top: 19px !important; bottom: 5px !important }
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"]:hover .ih-toc-mouse,
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"].ih-dragging .ih-toc-mouse {
  filter: drop-shadow(0 1px 1.5px rgba(11, 11, 15, .22)) drop-shadow(0 3px 6px rgba(11, 11, 15, .12));
}
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"]:focus-visible { outline-offset: 3px !important; border-radius: 8px !important }
@media (prefers-reduced-motion: reduce) { #ideal-hero-isolated .ih-toc-mouse { transition: none !important } }
/* mouse: a touch larger and better defined so it reads at normal size */
#ideal-hero-isolated .ih-toc-mouse { left: -2px !important; width: 16px !important; height: 20px !important;
  filter: drop-shadow(0 0 .6px rgba(11, 11, 15, .35)) drop-shadow(0 1px 1.5px rgba(11, 11, 15, .18)) drop-shadow(0 2px 5px rgba(11, 11, 15, .10)) }
#ideal-hero-isolated .ih-toc-thumb[data-dir="down"] .ih-toc-mouse { bottom: 2px !important }
#ideal-hero-isolated .ih-toc-thumb[data-dir="down"] .ih-toc-tail { top: 2px !important; bottom: 20px !important }
#ideal-hero-isolated .ih-toc-thumb[data-dir="up"] .ih-toc-mouse { top: 2px !important }
#ideal-hero-isolated .ih-toc-thumb[data-dir="up"] .ih-toc-tail { top: 20px !important; bottom: 2px !important }
#ideal-hero-isolated .ih-toc-tail { background: #d6d3cb !important }
#ideal-hero-isolated .ih-toc-thumb[data-dir="down"] .ih-toc-tail { bottom: 15px !important }
#ideal-hero-isolated .ih-toc-thumb[data-dir="up"] .ih-toc-tail { top: 15px !important }


/* mouse, flat edition: one flat fill + one line colour, no shading, no colour
   accents, slim silhouette. Tweak with --ih-mouse-fill / --ih-mouse-line. */
#ideal-hero-isolated .ih-toc { --ih-mouse-fill: #f7f6f3; --ih-mouse-line: #6b6b75 }
#ideal-hero-isolated .ih-toc-mouse,
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"]:hover .ih-toc-mouse,
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"].ih-dragging .ih-toc-mouse {
  left: 0 !important; width: 12px !important; height: 22px !important; filter: none !important;
}
#ideal-hero-isolated .ih-toc-tail { background: var(--ih-mouse-line) !important; opacity: .55; box-shadow: none !important; width: 1.5px !important; left: 5.25px !important }
#ideal-hero-isolated .ih-toc-thumb[data-dir="down"] .ih-toc-mouse { bottom: 1px !important }
#ideal-hero-isolated .ih-toc-thumb[data-dir="down"] .ih-toc-tail { top: 2px !important; bottom: 20px !important }
#ideal-hero-isolated .ih-toc-thumb[data-dir="up"] .ih-toc-mouse { top: 1px !important }
#ideal-hero-isolated .ih-toc-thumb[data-dir="up"] .ih-toc-tail { top: 20px !important; bottom: 2px !important }
#ideal-hero-isolated .ih-toc-mouse { transition: transform .28s cubic-bezier(.4, 0, .2, 1) }

/* centre the indicator exactly on the 1px track: the track's centre is 0.5px
   from the list edge, the thumb is 12px wide, so its left edge sits at -5.5px.
   Everything inside the thumb (mouse, tail, pill) is centred at 6px. */
#ideal-hero-isolated .ih-toc-thumb { left: -5.5px !important; width: 12px !important }
/* The browser paints SVG images on whole CSS pixels, so a fractionally
   positioned SVG drifted 0.5px off the track. The mouse box is 11px wide at a
   whole-pixel offset (0.5px into the thumb, whose left edge is at -5.5px),
   which puts its centre exactly on the track's centre. */
#ideal-hero-isolated .ih-toc-mouse,
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"]:hover .ih-toc-mouse,
#ideal-hero-isolated .ih-toc-thumb[data-style="mouse"].ih-dragging .ih-toc-mouse { left: .5px !important; width: 11px !important }


/* Hover feedback is reserved for interactive elements. Labels of text fields
   aren't controls themselves, so they keep the default cursor (checkbox and
   radio labels, which do toggle their input, stay clickable). */
#ideal-hero-isolated .ih-label { cursor: default !important }

/* ==========================================================
   STATIC NAVBAR (default)
   The bar keeps its first-paint look — no shrink, no glass layer, no
   hide/reveal — and scrolls away with the page instead of staying fixed.
   Restore the original floating bar with data-ih-nav="sticky" on
   #ideal-hero-nav (app.js reads the same attribute).
   ========================================================== */
#ideal-hero-nav:not([data-ih-nav="sticky"]) {
  animation: none !important;
  --ih-p: 0 !important;
  --ih-q: 0 !important;
}
#ideal-hero-nav:not([data-ih-nav="sticky"]) .ih-nav-outer {
  position: absolute !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}
#ideal-hero-nav:not([data-ih-nav="sticky"]) .ih-nav::before { visibility: hidden !important; transition: none !important }

/* with no fixed bar overhead, sticky columns and anchor jumps sit near the top */
#ideal-hero-isolated { --ih-stick: 24px }
#ideal-hero-nav[data-ih-nav="sticky"] + #ideal-hero-isolated { --ih-stick: 96px }
#ideal-hero-isolated .ih-docs-side,
#ideal-hero-isolated .ih-toc { top: var(--ih-stick) !important; max-height: calc(100vh - var(--ih-stick) - 16px) !important }
#ideal-hero-isolated .ih-split-sticky,
#ideal-hero-isolated .ih-release-meta { top: calc(var(--ih-stick) + 8px) !important }
#ideal-hero-isolated .ih-release,
#ideal-hero-isolated .ih-doc h2,
#ideal-hero-isolated .ih-doc h3,
#ideal-hero-isolated .ih-doc h4,
#ideal-hero-isolated :target { scroll-margin-top: var(--ih-stick) !important }

/* mouse tail: straight shaft ending in a pointed, triangular tip.
   The tip is always at the free end (top when running down, bottom when up). */
#ideal-hero-isolated .ih-toc-tail {
  width: 2.5px !important; left: 4.75px !important; border-radius: 0 !important; opacity: .6;
}
#ideal-hero-isolated .ih-toc-thumb[data-dir="down"] .ih-toc-tail {
  top: -3px !important;
  clip-path: polygon(50% 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
}
#ideal-hero-isolated .ih-toc-thumb[data-dir="up"] .ih-toc-tail {
  bottom: -3px !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 50% 100%, 0 calc(100% - 7px));
}

/* mouse tail, natural edition: an SVG that tapers from the body to a fine tip
   straight, no curve (replaces the pen-nib tail). 5px wide at a
   whole-pixel offset so it stays centred on the track. */
#ideal-hero-isolated .ih-toc-tail {
  left: 3.5px !important; width: 5px !important; background: none !important; box-shadow: none !important;
  border-radius: 0 !important; clip-path: none !important; opacity: 1 !important;
}
#ideal-hero-isolated .ih-toc-tail svg { display: block !important; width: 100% !important; height: 100% !important; overflow: visible !important }
#ideal-hero-isolated .ih-toc-tail path { fill: var(--ih-mouse-line) !important; opacity: .62 }
#ideal-hero-isolated .ih-toc-thumb[data-dir="down"] .ih-toc-tail { top: -5px !important; bottom: 19px !important; clip-path: none !important }
#ideal-hero-isolated .ih-toc-thumb[data-dir="up"] .ih-toc-tail { top: 19px !important; bottom: -5px !important; clip-path: none !important }
#ideal-hero-isolated .ih-toc-thumb[data-dir="up"] .ih-toc-tail svg { transform: scaleY(-1) }

/* Hero: the grain layer tinted the lower hero light grey, which ended in a
   visible edge where the next section starts. Fade the grain out together
   with the colour band so the lower hero is plain white, like the page below. */
#ideal-hero-isolated .ih-noise {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 52%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 52%) !important;
}

/* ==========================================================
   FINAL CTA — smooth transitions on both edges
   The colour used to be strongest at the very bottom and stopped dead at the
   footer. Now it rises from the section above, peaks around the buttons and
   fades back to white before the footer, so neither edge shows a seam. When
   the previous section is tinted, the band starts from that tint instead of
   pure white.
   ========================================================== */
#ideal-hero-isolated .ih-final { --ih-final-top: 255, 255, 255 }
#ideal-hero-isolated .ih-section-tint + .ih-final { --ih-final-top: 250, 250, 251 }
#ideal-hero-isolated .ih-final-veil {
  background: linear-gradient(to bottom,
    rgb(var(--ih-final-top)) 0%,
    rgba(var(--ih-final-top), .9) 16%,
    rgba(255, 255, 255, .6) 38%,
    rgba(255, 255, 255, .42) 56%,
    rgba(255, 255, 255, .5) 70%,
    rgba(255, 255, 255, .82) 86%,
    #fff 100%) !important;
}
#ideal-hero-isolated .ih-fb1 { bottom: -2vw !important }
#ideal-hero-isolated .ih-fb2 { bottom: -4vw !important }
#ideal-hero-isolated .ih-fb3 { bottom: -3vw !important }

/* Final CTA, variant B (chosen): colour builds toward the bottom and runs
   right up to the footer, as in the original design. The top still starts
   from the previous section's tint, so only the footer edge is crisp. */
#ideal-hero-isolated .ih-final-veil {
  background: linear-gradient(to bottom,
    rgb(var(--ih-final-top)) 0%,
    rgba(var(--ih-final-top), .94) 26%,
    rgba(255, 255, 255, .72) 52%,
    rgba(255, 255, 255, .4) 78%,
    rgba(255, 255, 255, .22) 100%) !important;
}
#ideal-hero-isolated .ih-fb1 { bottom: -9vw !important }
#ideal-hero-isolated .ih-fb2 { bottom: -11vw !important }
#ideal-hero-isolated .ih-fb3 { bottom: -10vw !important }

/* A tinted section directly above the final CTA keeps its top hairline but
   drops the bottom one: the CTA band now starts from the same tint, so the
   line was a seam — and pages whose last section is white never had it. */
#ideal-hero-isolated .ih-section-tint:has(+ .ih-final) {
  box-shadow: inset 0 1px 0 var(--ih-line) !important;
}

/* ==========================================================
   HERO DASHBOARD — realistic browser window
   macOS traffic lights, a tab strip with an active tab, and a toolbar
   with navigation buttons and an address bar. Purely decorative.
   ========================================================== */
#ideal-hero-isolated .ih-frame {
  padding: 0 !important; overflow: hidden !important;
  border-radius: 14px !important; border: 0 !important;
  background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px rgba(11, 11, 15, .1), 0 1px 2px rgba(11, 11, 15, .04), 0 24px 60px -18px rgba(30, 24, 60, .28), 0 60px 120px -40px rgba(30, 24, 60, .22) !important;
}
#ideal-hero-isolated .ih-frame .ih-app { border-radius: 0 !important; box-shadow: none !important }
#ideal-hero-isolated .ih-chrome { display: block !important; text-align: left !important; user-select: none }

/* tab strip */
#ideal-hero-isolated .ih-tabstrip {
  display: flex !important; align-items: flex-end !important; gap: 14px !important;
  height: 42px !important; padding: 0 12px 0 14px !important;
  background: linear-gradient(180deg, #ecedf0, #e6e7eb) !important;
}
#ideal-hero-isolated .ih-lights { display: flex !important; gap: 8px !important; align-self: center !important; flex: none !important; padding-right: 6px !important }
#ideal-hero-isolated .ih-lights i { display: block !important; width: 12px !important; height: 12px !important; border-radius: 50% !important; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18) !important }
#ideal-hero-isolated .ih-lights .ih-l-close { background: #ff5f57 !important }
#ideal-hero-isolated .ih-lights .ih-l-min { background: #febc2e !important }
#ideal-hero-isolated .ih-lights .ih-l-max { background: #28c840 !important }
#ideal-hero-isolated .ih-tabs { display: flex !important; align-items: flex-end !important; gap: 2px !important; min-width: 0 !important; flex: 1 1 auto !important }
#ideal-hero-isolated .ih-tab {
  position: relative !important; display: flex !important; align-items: center !important; gap: 8px !important;
  width: 220px !important; min-width: 0 !important; height: 34px !important; padding: 0 10px 0 12px !important;
  border-radius: 9px 9px 0 0 !important; font-size: 12px !important; font-weight: 500 !important; color: #5b5b66 !important; letter-spacing: -.005em !important;
}
#ideal-hero-isolated .ih-tab + .ih-tab::before { content: "" !important; position: absolute !important; left: -1px !important; top: 10px !important; bottom: 10px !important; width: 1px !important; background: rgba(11, 11, 15, .14) !important }
#ideal-hero-isolated .ih-tab-on { background: #fff !important; color: #0b0b0f !important; box-shadow: 0 0 0 .5px rgba(11, 11, 15, .08) !important; z-index: 1 !important }
#ideal-hero-isolated .ih-tab-on + .ih-tab::before { display: none !important }
/* the concave “ears” that make the active tab flow into the toolbar */
#ideal-hero-isolated .ih-tab-on::before, #ideal-hero-isolated .ih-tab-on::after {
  content: "" !important; position: absolute !important; bottom: 0 !important; width: 10px !important; height: 10px !important; background: transparent !important;
}
#ideal-hero-isolated .ih-tab-on::before { left: -10px !important; border-bottom-right-radius: 9px !important; box-shadow: 4px 4px 0 4px #fff !important }
#ideal-hero-isolated .ih-tab-on::after { right: -10px !important; border-bottom-left-radius: 9px !important; box-shadow: -4px 4px 0 4px #fff !important }
#ideal-hero-isolated .ih-tab .ih-mark { width: 14px !important; height: 14px !important; border-radius: 4px !important; flex: none !important }
#ideal-hero-isolated .ih-tab-fav { width: 14px !important; height: 14px !important; border-radius: 4px !important; flex: none !important; background: linear-gradient(135deg, #c9c9d1, #a9a9b4) !important; opacity: .8 }
#ideal-hero-isolated .ih-tab-title { flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important }
#ideal-hero-isolated .ih-tab-x { width: 16px !important; height: 16px !important; padding: 3px !important; flex: none !important; border-radius: 4px !important; stroke: currentColor !important; stroke-width: 1.4 !important; fill: none !important; stroke-linecap: round !important; opacity: .55 }
#ideal-hero-isolated .ih-tab-new { display: flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; margin: 0 0 4px 6px !important; border-radius: 7px !important; color: #5b5b66 !important; flex: none !important }
#ideal-hero-isolated .ih-tab-new svg { width: 12px !important; height: 12px !important; stroke: currentColor !important; stroke-width: 1.5 !important; fill: none !important; stroke-linecap: round !important }

/* toolbar */
#ideal-hero-isolated .ih-toolbar {
  display: flex !important; align-items: center !important; gap: 12px !important;
  height: 44px !important; padding: 0 12px !important; background: #fff !important;
  border-bottom: 1px solid rgba(11, 11, 15, .08) !important;
}
#ideal-hero-isolated .ih-navbtns, #ideal-hero-isolated .ih-toolicons { display: flex !important; align-items: center !important; gap: 4px !important; flex: none !important }
#ideal-hero-isolated .ih-navbtns svg, #ideal-hero-isolated .ih-toolicons svg {
  width: 28px !important; height: 28px !important; padding: 6px !important; border-radius: 7px !important;
  stroke: #54545f !important; stroke-width: 1.8 !important; fill: none !important; stroke-linecap: round !important; stroke-linejoin: round !important;
}
#ideal-hero-isolated .ih-navbtns svg.ih-off { opacity: .35 }
#ideal-hero-isolated .ih-toolicons svg:last-child { fill: #54545f !important; stroke: none !important }
#ideal-hero-isolated .ih-omnibox {
  display: flex !important; align-items: center !important; gap: 8px !important; flex: 1 1 auto !important; min-width: 0 !important;
  height: 30px !important; padding: 0 10px 0 12px !important; border-radius: 9px !important;
  background: #f1f2f4 !important; box-shadow: inset 0 0 0 1px rgba(11, 11, 15, .04) !important;
  font-size: 12.5px !important; color: #8a8a95 !important; letter-spacing: -.005em !important;
}
#ideal-hero-isolated .ih-omnibox .ih-lock { width: 13px !important; height: 13px !important; flex: none !important; stroke: #6b6b75 !important; stroke-width: 2 !important; fill: none !important }
#ideal-hero-isolated .ih-omnibox .ih-addr { flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important }
#ideal-hero-isolated .ih-omnibox .ih-addr b { font-weight: 500 !important; color: #1b1b22 !important }
#ideal-hero-isolated .ih-omnibox .ih-star { width: 15px !important; height: 15px !important; flex: none !important; stroke: #8a8a95 !important; stroke-width: 1.6 !important; fill: none !important; stroke-linejoin: round !important }
#ideal-hero-isolated .ih-profile {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; margin: 0 2px !important;
  border-radius: 50% !important; background: linear-gradient(135deg, #fb923c, #ec4899) !important; color: #fff !important; font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: .02em !important;
}

/* smaller screens: keep lights, one tab and the address bar */
@media (max-width: 760px) {
  #ideal-hero-isolated .ih-tab:not(.ih-tab-on), #ideal-hero-isolated .ih-tab-new,
  #ideal-hero-isolated .ih-toolicons svg:first-child, #ideal-hero-isolated .ih-navbtns svg:nth-child(2) { display: none !important }
  #ideal-hero-isolated .ih-tab { width: auto !important; flex: 1 1 auto !important; max-width: 220px !important }
}
@media (max-width: 480px) {
  #ideal-hero-isolated .ih-tabstrip { height: 36px !important; gap: 10px !important }
  #ideal-hero-isolated .ih-tab { height: 29px !important; font-size: 11px !important }
  #ideal-hero-isolated .ih-lights i { width: 10px !important; height: 10px !important }
  #ideal-hero-isolated .ih-toolbar { height: 38px !important; gap: 6px !important; padding: 0 8px !important }
  #ideal-hero-isolated .ih-navbtns svg:nth-child(3), #ideal-hero-isolated .ih-toolicons svg:last-child, #ideal-hero-isolated .ih-omnibox .ih-star { display: none !important }
  #ideal-hero-isolated .ih-omnibox { height: 27px !important; font-size: 11.5px !important }
}
#ideal-hero-isolated .ih-tab-on { box-shadow: none !important }

/* ==========================================================
   HERO DASHBOARD — modern browser mockup (Safari-style)
   Unified translucent toolbar, centred address pill, pill tabs,
   larger radius, hairline highlight and a soft aurora glow behind.
   ========================================================== */
#ideal-hero-isolated .ih-framewrap { isolation: isolate !important }
#ideal-hero-isolated .ih-framewrap::before {
  content: "" !important; position: absolute !important; inset: 6% 4% -4% !important; z-index: -1 !important;
  border-radius: 40px !important; pointer-events: none !important;
  background:
    radial-gradient(40% 55% at 15% 60%, rgba(251, 191, 36, .45), transparent 70%),
    radial-gradient(40% 55% at 50% 40%, rgba(167, 139, 250, .45), transparent 70%),
    radial-gradient(40% 55% at 85% 60%, rgba(125, 211, 252, .5), transparent 70%) !important;
  filter: blur(48px) !important; opacity: .7;
}
#ideal-hero-isolated .ih-frame {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow:
    0 0 0 1px rgba(11, 11, 15, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .7),
    0 2px 4px rgba(11, 11, 15, .04),
    0 22px 44px -18px rgba(30, 24, 60, .22),
    0 50px 100px -36px rgba(30, 24, 60, .26) !important;
}
#ideal-hero-isolated .ih-bx { display: block !important; text-align: left !important; user-select: none;
  background: linear-gradient(180deg, rgba(250, 250, 252, .96), rgba(246, 246, 249, .96)) !important;
  border-bottom: 1px solid rgba(11, 11, 15, .07) !important }
#ideal-hero-isolated .ih-bx svg { fill: none !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important }

#ideal-hero-isolated .ih-bx-toolbar {
  display: grid !important; grid-template-columns: 1fr minmax(0, 420px) 1fr !important; align-items: center !important; gap: 16px !important;
  height: 52px !important; padding: 0 16px !important;
}
#ideal-hero-isolated .ih-bx-left, #ideal-hero-isolated .ih-bx-right { display: flex !important; align-items: center !important; gap: 6px !important; min-width: 0 !important }
#ideal-hero-isolated .ih-bx-right { justify-content: flex-end !important }
#ideal-hero-isolated .ih-bx-lights { display: flex !important; gap: 8px !important; margin-right: 12px !important }
#ideal-hero-isolated .ih-bx-lights i {
  display: block !important; width: 12px !important; height: 12px !important; border-radius: 50% !important;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14), inset 0 1px 1px rgba(255, 255, 255, .45) !important;
}
#ideal-hero-isolated .ih-bx-lights i:nth-child(1) { background: #ff5f57 !important }
#ideal-hero-isolated .ih-bx-lights i:nth-child(2) { background: #febc2e !important }
#ideal-hero-isolated .ih-bx-lights i:nth-child(3) { background: #28c840 !important }
#ideal-hero-isolated .ih-bx-nav { display: flex !important; gap: 2px !important }
#ideal-hero-isolated .ih-bx-ico { width: 28px !important; height: 28px !important; padding: 5px !important; border-radius: 8px !important; color: #62626d !important; stroke-width: 1.7 !important }
#ideal-hero-isolated .ih-bx-ico.ih-bx-dim { opacity: .35 }

#ideal-hero-isolated .ih-bx-address {
  position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
  height: 32px !important; padding: 0 36px !important; border-radius: 10px !important;
  background: rgba(11, 11, 15, .05) !important; box-shadow: inset 0 0 0 .5px rgba(11, 11, 15, .06) !important;
  font-size: 13px !important; font-weight: 500 !important; color: #2a2a33 !important; letter-spacing: -.01em !important;
}
#ideal-hero-isolated .ih-bx-shield { width: 13px !important; height: 13px !important; flex: none !important; color: #7a7a86 !important; stroke-width: 2 !important }
#ideal-hero-isolated .ih-bx-host { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important }
#ideal-hero-isolated .ih-bx-reload { position: absolute !important; right: 10px !important; top: 50% !important; width: 14px !important; height: 14px !important; margin-top: -7px !important; color: #8a8a95 !important; stroke-width: 2 !important }

#ideal-hero-isolated .ih-bx-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; padding: 0 12px 8px !important }
#ideal-hero-isolated .ih-bx-tab {
  position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
  height: 28px !important; padding: 0 28px !important; border-radius: 8px !important; min-width: 0 !important;
  font-size: 12px !important; font-weight: 500 !important; color: #71717c !important; white-space: nowrap !important; overflow: hidden !important;
  background: rgba(11, 11, 15, .035) !important;
}
#ideal-hero-isolated .ih-bx-tab .ih-mark { width: 13px !important; height: 13px !important; border-radius: 4px !important; flex: none !important }
#ideal-hero-isolated .ih-bx-tab:not(.ih-bx-tab-on) .ih-mark { filter: grayscale(1) opacity(.55) }
#ideal-hero-isolated .ih-bx-tab-on { background: #fff !important; color: #111118 !important; box-shadow: 0 0 0 .5px rgba(11, 11, 15, .1), 0 1px 2px rgba(11, 11, 15, .08), 0 2px 6px -2px rgba(11, 11, 15, .08) !important }
#ideal-hero-isolated .ih-bx-tab svg { position: absolute !important; left: 8px !important; width: 14px !important; height: 14px !important; padding: 2px !important; color: #8a8a95 !important; stroke-width: 1.5 !important }

@media (max-width: 760px) {
  #ideal-hero-isolated .ih-bx-toolbar { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 10px !important; padding: 0 12px !important }
  #ideal-hero-isolated .ih-bx-left > .ih-bx-ico, #ideal-hero-isolated .ih-bx-nav .ih-bx-dim,
  #ideal-hero-isolated .ih-bx-right .ih-bx-ico:not(:last-child) { display: none !important }
  #ideal-hero-isolated .ih-bx-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  #ideal-hero-isolated .ih-bx-tab:nth-child(3) { display: none !important }
}
@media (max-width: 480px) {
  #ideal-hero-isolated .ih-frame { border-radius: 14px !important }
  #ideal-hero-isolated .ih-bx-toolbar { height: 44px !important }
  #ideal-hero-isolated .ih-bx-lights { margin-right: 4px !important; gap: 6px !important }
  #ideal-hero-isolated .ih-bx-lights i { width: 10px !important; height: 10px !important }
  #ideal-hero-isolated .ih-bx-right, #ideal-hero-isolated .ih-bx-nav { display: none !important }
  #ideal-hero-isolated .ih-bx-address { height: 28px !important; font-size: 12px !important; padding: 0 30px !important }
  #ideal-hero-isolated .ih-bx-tabs { grid-template-columns: minmax(0, 1fr) !important }
  #ideal-hero-isolated .ih-bx-tab:nth-child(2) { display: none !important }
}
#ideal-hero-isolated .ih-framewrap::before { inset: 22% -4% -7% !important; opacity: .85 !important; filter: blur(56px) !important }
#ideal-hero-isolated .ih-framewrap::before {
  background:
    radial-gradient(38% 60% at 10% 55%, rgba(251, 191, 36, .42), transparent 70%),
    radial-gradient(40% 60% at 50% 70%, rgba(167, 139, 250, .5), transparent 70%),
    radial-gradient(38% 60% at 90% 55%, rgba(56, 189, 248, .62), transparent 70%) !important;
}
/* browser mockup: toolbar only (no tab row) */
#ideal-hero-isolated .ih-bx-toolbar { height: 54px !important }

/* ==========================================================
   SCROLL TO TOP
   A floating pearl button with an aurora-gradient progress ring.
   Created by app.js (initScrollTop) on every page.
   ========================================================== */
#ideal-hero-isolated .ih-totop {
  position: fixed !important; right: clamp(16px, 2.4vw, 32px) !important; bottom: clamp(16px, 2.4vw, 32px) !important; z-index: 800 !important;
  display: grid !important; place-items: center !important; width: 48px !important; height: 48px !important; padding: 0 !important;
  border-radius: 50% !important; border: 0 !important; cursor: pointer !important; color: #0b0b0f !important;
  background: rgba(255, 255, 255, .82) !important; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(11, 11, 15, .07), inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px -6px rgba(30, 24, 60, .22), 0 16px 32px -14px rgba(30, 24, 60, .25) !important;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2), visibility 0s linear .35s, box-shadow .2s ease;
}
#ideal-hero-isolated .ih-totop.ih-totop-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2), visibility 0s, box-shadow .2s ease }
#ideal-hero-isolated .ih-totop-ring { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; transform: rotate(-90deg) !important; pointer-events: none !important }
#ideal-hero-isolated .ih-totop-ring circle { fill: none !important; stroke-width: 2.25 !important }
#ideal-hero-isolated .ih-totop-track { stroke: rgba(11, 11, 15, .07) !important }
#ideal-hero-isolated .ih-totop-bar { stroke: url(#ih-totop-grad) !important; stroke-linecap: round !important; transition: stroke-dashoffset .12s linear }
#ideal-hero-isolated .ih-totop-arrow {
  position: relative !important; width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important;
  stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; transition: transform .25s cubic-bezier(.2, .9, .3, 1.2);
}
#ideal-hero-isolated .ih-totop:hover { box-shadow: 0 0 0 1px rgba(11, 11, 15, .1), inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 22px -8px rgba(30, 24, 60, .28), 0 22px 40px -16px rgba(30, 24, 60, .3) !important }
#ideal-hero-isolated .ih-totop:hover .ih-totop-arrow { transform: translateY(-2px) }
#ideal-hero-isolated .ih-totop:active { transform: scale(.94) }
#ideal-hero-isolated .ih-totop:focus-visible { outline: 2px solid #8b5cf6 !important; outline-offset: 3px !important }
@media (max-width: 640px) { #ideal-hero-isolated .ih-totop { width: 44px !important; height: 44px !important } }
@media (prefers-reduced-motion: reduce) {
  #ideal-hero-isolated .ih-totop, #ideal-hero-isolated .ih-totop.ih-totop-on, #ideal-hero-isolated .ih-totop-arrow, #ideal-hero-isolated .ih-totop-bar { transition: none !important }
  #ideal-hero-isolated .ih-totop { transform: none }
}
@media print { #ideal-hero-isolated .ih-totop { display: none !important } }

/* scroll-to-top tooltip: dark pill to the left of the button, with a small
   pointer; fades and slides in on hover and on keyboard focus */
#ideal-hero-isolated .ih-totop-tip {
  position: absolute !important; right: calc(100% + 12px) !important; top: 50% !important;
  display: block !important; padding: 7px 11px !important; border-radius: 9px !important;
  background: rgba(17, 17, 23, .92) !important; color: #fff !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 12.5px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -.005em !important; white-space: nowrap !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 8px 20px -8px rgba(11, 11, 15, .45) !important;
  pointer-events: none !important; opacity: 0; transform: translate(6px, -50%);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .9, .3, 1.2);
}
#ideal-hero-isolated .ih-totop-tip::after {
  content: "" !important; position: absolute !important; top: 50% !important; right: -4px !important;
  width: 8px !important; height: 8px !important; margin-top: -4px !important; border-radius: 1.5px !important;
  background: rgba(17, 17, 23, .92) !important; transform: rotate(45deg) !important;
}
#ideal-hero-isolated .ih-totop.ih-totop-on:hover .ih-totop-tip,
#ideal-hero-isolated .ih-totop.ih-totop-on:focus-visible .ih-totop-tip { opacity: 1; transform: translate(0, -50%); transition-delay: .08s }
@media (hover: none) { #ideal-hero-isolated .ih-totop-tip { display: none !important } }
@media (prefers-reduced-motion: reduce) { #ideal-hero-isolated .ih-totop-tip { transition: opacity .12s linear !important; transform: translate(0, -50%) } }
#ideal-hero-isolated .ih-totop-tip { width: max-content !important; max-width: none !important; overflow: visible !important } #ideal-hero-isolated .ih-totop { overflow: visible !important }

/* ==========================================================
   TESTIMONIAL SLIDER — full-bleed with soft edges
   The scroll viewport reaches the window edges (app.js measures the gutter
   into --ih-bleed), so the next and previous cards peek in at the sides and
   fade out instead of being cut off. Snapping stays aligned with the content
   column through matching scroll-padding.
   ========================================================== */
#ideal-hero-isolated .ih-slider { --ih-bleed: 0px }
#ideal-hero-isolated .ih-slider-viewport {
  padding: 16px calc(var(--ih-bleed) + 2px) 26px !important;
  margin: -16px calc(-1 * var(--ih-bleed) - 2px) -26px !important;
  scroll-padding-inline: calc(var(--ih-bleed) + 2px) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) calc(var(--ih-bleed) * .45), #000 calc(var(--ih-bleed) + 2px), #000 calc(100% - var(--ih-bleed) - 2px), rgba(0, 0, 0, .35) calc(100% - var(--ih-bleed) * .45), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) calc(var(--ih-bleed) * .45), #000 calc(var(--ih-bleed) + 2px), #000 calc(100% - var(--ih-bleed) - 2px), rgba(0, 0, 0, .35) calc(100% - var(--ih-bleed) * .45), transparent 100%);
}
#ideal-hero-isolated .ih-slider-controls { position: relative !important; z-index: 2 !important }
#ideal-hero-isolated .ih-slider-viewport { width: calc(100% + 2 * var(--ih-bleed) + 4px) !important; max-width: none !important }
/* exact window width: no 2px overhang that would make the page scroll sideways */
#ideal-hero-isolated .ih-slider-viewport {
  width: calc(100% + 2 * var(--ih-bleed)) !important;
  padding-left: var(--ih-bleed) !important; padding-right: var(--ih-bleed) !important;
  margin-left: calc(-1 * var(--ih-bleed)) !important; margin-right: calc(-1 * var(--ih-bleed)) !important;
  scroll-padding-inline: var(--ih-bleed) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) calc(var(--ih-bleed) * .45), #000 var(--ih-bleed), #000 calc(100% - var(--ih-bleed)), rgba(0, 0, 0, .35) calc(100% - var(--ih-bleed) * .45), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) calc(var(--ih-bleed) * .45), #000 var(--ih-bleed), #000 calc(100% - var(--ih-bleed)), rgba(0, 0, 0, .35) calc(100% - var(--ih-bleed) * .45), transparent 100%);
}

/* avatar colours for testimonial cards 7 and 8 */
#ideal-hero-isolated .ih-slide:nth-child(7) .ih-av { background: linear-gradient(140deg, #f59e0b, #ec4899) !important }
#ideal-hero-isolated .ih-slide:nth-child(8) .ih-av { background: linear-gradient(140deg, #34d399, #8b5cf6) !important }

/* With three dropdowns, centre every panel under the navbar instead of under
   its own trigger, so no panel can run off the left or right edge on narrower
   desktops. (The hover bridge on .ih-mega::before still spans the gap.) */
#ideal-hero-nav .ih-links .ih-item { position: static !important }