/* Blog-post CMS template styles — extracted from live glow.team/blog/<slug> inline <style>.
   IDENTICAL across all 10 posts (verified, sig 1e3f0feb), so extracted once.
   Excludes the Lenis block (our stack provides it) and the .cta-gradient/glow block
   (owned by AboutCta). Mirrors the case-page.css approach (DEC-0020). */

/* ---- main blog-article template ---- */
/* Make text look crisper and more legible in all browsers */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Focus state style for keyboard navigation for the focusable elements */
  *[tabindex]:focus-visible,
  input[type='file']:focus-visible {
    outline: 0.125rem solid #4d65ff;
    outline-offset: 0.125rem;
  }

  /* Set color style to inherit */
  .inherit-color * {
    color: inherit;
  }

  /* Get rid of top margin on first element in any rich text element */
  .w-richtext > :not(div):first-child,
  .w-richtext > div:first-child > :first-child {
    margin-top: 0 !important;
  }

  /* Get rid of bottom margin on last element in any rich text element */
  .w-richtext > :last-child,
  .w-richtext ol li:last-child,
  .w-richtext ul li:last-child {
    margin-bottom: 0 !important;
  }

  .w-richtext::before,
  .w-richtext::after {
    all: unset;
  }

  /* Make sure containers never lose their center alignment */
  .container-medium,
  .container-small,
  .container-large {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /*
  Make the following elements inherit typography styles from the parent and not have hardcoded values.
  Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
  Uncomment this CSS to use it in the project. Leave this message for future hand-off.
  */
  /*
  a,
  .w-input,
  .w-select,
  .w-tab-link,
  .w-nav-link,
  .w-dropdown-btn,
  .w-dropdown-toggle,
  .w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
  }
  */

  /* Apply "..." after 3 lines of text */
  .text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /* Apply "..." after 2 lines of text */
  .text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* These classes are never overwritten */
  .hide {
    display: none !important;
  }

  @media screen and (max-width: 991px) {
    .hide,
    .hide-tablet {
      display: none !important;
    }
  }

  @media screen and (max-width: 767px) {
    .hide-mobile-landscape {
      display: none !important;
    }
  }
  @media screen and (max-width: 479px) {
    .hide-mobile {
      display: none !important;
    }
  }

  .margin-0 {
    margin: 0rem !important;
  }

  .padding-0 {
    padding: 0rem !important;
  }

  .spacing-clean {
    padding: 0rem !important;
    margin: 0rem !important;
  }

  .margin-top {
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-top {
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
  }

  .margin-right {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-right {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
  }

  .margin-bottom {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-bottom {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-left: 0rem !important;
  }

  .margin-left {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
  }

  .padding-left {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
  }

  .margin-horizontal {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
  }

  .padding-horizontal {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }

  .margin-vertical {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-vertical {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  html {
    font-size: 1rem;
  }
  @media screen and (max-width: 1440px) {
    html {
      font-size: calc(-0.004999999999999782rem + 1.1166666666666665vw);
    }
  }
  @media screen and (max-width: 960px) {
    html {
      font-size: calc(-1.1102230246251565e-16rem + 1.666666666666667vw);
    }
  }
  @media screen and (max-width: 720px) {
    html {
      font-size: calc(-0.0008298755186720852rem + 2.2240663900414934vw);
    }
  }
  @media screen and (max-width: 479px) {
    html {
      font-size: calc(-0.0020920502092050207rem + 3.3472803347280333vw);
    }
  }
  @media screen and (max-width: 479px) {
    html {
      font-size: calc(-0.0020920502092050207rem + 4.107vw);
    }
  }

  .navbar-submenu {
    display: grid;
    grid-template-rows: 0fr;
  }

  .navbar-submenu.open {
    grid-template-rows: 1fr;
  }

  .navbar-submenu.is-mobile.open {
    display: block;
  }

  .navbar-submenu.is-mobile.open {
    transform: translateY(0);
  }

  .navbar_link.open .navbar_link-icon {
    transform: rotateZ(0);
  }

  .burger_icon-wrap {
    --thickness: 0.025rem;
    --gap: 0.25rem;
    --rotate: 45;
    --width: 100%;
  }
  .is-open .burger-line {
    transform: scaleX(0);
  }
  .burger-line:last-child {
    width: 80%;
  }
  .is-open .burger-line:first-child {
    /*transform: translateY(calc(var(--thickness) + var(--gap))) rotate(calc(var(--rotate) * -1deg));*/
    transform: rotate(45deg) translate(0.25rem, 0.1825rem);
  }
  .is-open .burger-line:last-child {
    width: 100%;
    /*transform: translateY(calc(var(--thickness) * -1 + var(--gap) * -1)) rotate(calc(var(--rotate) * 1deg));*/
    transform: rotate(-45deg) translate(0.25rem, -0.1825rem);
  }

  .case-card .case-card_img {
    scale: 1;
    transition: scale 0.5s ease;
  }

  .case-card:hover .case-card_img {
    scale: 1.1;
  }

  .card_mob-scroll {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    overflow-y: auto;
  }

   @media screen and (max-width: 991px) {
         .radial-blur {
      -webkit-mask: linear-gradient(
    to bottom,
    transparent,
    black 30%,
    black 70%,
    transparent
  );

  mask: linear-gradient(
    to bottom,
    transparent,
    black 30%,
    black 70%,
    transparent
  );
      }
        }

  .is-gradient {
    background: linear-gradient(90deg, #9003fd 0%, #fcb73c 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-50% - 1.5rem));
    }
  }

  .scroll {
    animation: scroll 30s linear infinite;
  }

  .reverse {
    animation-direction: reverse;
  }

  .marquee-image {
    -webkit-transform: translateZ(0);
  }

  .reveal-button {
    text-decoration: none;
  }

  @media (min-width: 991px) {
    [stagger-link-text] {
      text-shadow: 0px 1em 0px currentColor;
    }
    .invert-button:hover .text-original {
      transform: translateY(-110%);
    }
    .invert-button:hover .text-reveal {
      top: 0;
    }
    .invert-button:hover .hover-bg {
      top: 0;
      border-radius: 0;
    }
  }

  a[text-link-hover] {
    text-decoration: none;
    color: #020101;
    transition: text-decoration 0.2s ease;
  }

  a[text-link-hover]:hover {
    text-decoration: underline !important;
    text-underline-offset: 0.25rem;
  }

  .invert-button.white-type {
    color: #000;
    background: #fff;
  }

  #invert-header-btn.style-reveal {
    background-color: #fff;
    border-color: #fff;
  }

  #invert-header-btn.style-reveal .hover-bg {
    background: #000;
  }

  #invert-header-btn.style-reveal .invert-button {
    border-color: #fff;
  }

  #invert-header-btn.style-reveal .text-original {
    color: #000;
  }

  #invert-header-btn.style-reveal .text-reveal {
    color: #fff;
  }

  .mvp-step_card.is-last {
    box-shadow:
      0 24px 34px 0 rgba(0, 0, 0, 0.15),
      0 4px 4px 0 rgba(0, 0, 0, 0.1);
  }

  .video-wrapper.is-main {
    height: 0;
  }

  svg {
    display: block;
  }

  .bottom-bar.stuck .radial-blur {
    opacity: 0 !important;
  }
  .bottom-bar.stuck .video-container {
    position: absolute;
    transform: translateX(-2rem) !important;
  }
  .bottom-bar.stuck .email-float {
    position: absolute;
    transform: translateX(2rem) !important;
  }

  /*------- Fix hover button on mobile -----------*/
  @media screen and (min-width: 768px) and (hover: none) and (pointer: coarse) {
    .invert-button {
      transition: transform 0.15s ease;
    }

    .invert-button .text-original,
    .invert-button .text-reveal,
    .invert-button .hover-bg {
      transition-duration: 0.15s;
    }

    .invert-button:active {
      transform: scaleX(1.02);
    }

    .invert-button:active .text-original {
      transform: translateY(-110%);
    }

    .invert-button:active .text-reveal {
      top: 0;
    }

    .invert-button:active .hover-bg {
      top: 0;
      border-radius: 0;
    }

    .video-container.stuck {
      transform: translateX(-1rem) !important;
    }
    .email-float.stuck {
      transform: translateX(1rem) !important;
    }
  }

  #works,
  #why-glow {
    scroll-margin-top: 100px;
  }

  .background-video-2::after {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    border: 3px solid #fff;
  }
  .navbar.navbar-invert {
    background-color: var(--gray--500);
  }
  [data-wf--navbar-new--variant='dark'].navbar.navbar-invert {
    background-color: var(--base--white);
  }
  [data-wf--mobile-nav--variant='dark'].mobile-nav.navbar-invert {
    background-color: var(--base--white);
  }
  .mobile-nav.navbar-invert {
    background-color: var(--gray--500);
  }
  [data-wf--mobile-nav--variant='dark'].mobile-nav.navbar-invert .button-tg,
  [data-wf--mobile-nav--variant='dark'].mobile-nav.navbar-invert .burger-btn {
    background-color: var(--gray--500);
  }

  .invert-button.is-dark {
    color: var(--base--white);
    background-color: var(--gray--500);
  }

  .button-invert.is-dark {
    border-color: var(--gray--500);
    background-color: var(--gray--500);
  }

  .invert-button.is-dark .hover-bg {
    background-color: var(--base--white);
  }

  .invert-button.is-dark .text-reveal {
    color: var(--gray--500);
  }
  .invert-button.is-outline {
    background-color: var(--base--white);
    color: var(--gray--500);
  }

  .button-invert.is-outline {
    border-color: var(--base--white);
    background-color: var(--base--white);
  }

  .invert-button.is-outline .hover-bg {
    background-color: var(--gray--500);
  }

  .invert-button.is-outline .text-reveal {
    color: var(--base--white);
  }

  .blur-span::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#fff 8%, #fff0);
    transition: opacity 0.4s ease;
  }

  .blur-span::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#000 8%, #0000);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .blur-span.is-dark::before {
    opacity: 1;
  }

  .blur-span.is-dark::after {
    opacity: 0;
  }

  .blur-span.is-white::before {
    opacity: 1;
  }

  .blur-span.is-white::after {
    opacity: 0;
  }

  .radial-blur::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#0000, #fff);
    transition: opacity 0.4s ease;
  }

  .radial-blur::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#0000, #000);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .radial-blur.is-dark::before {
    opacity: 1;
  }

  .radial-blur.is-dark::after {
    opacity: 0;
  }

  .radial-blur.is-white::before {
    opacity: 0;
  }

  .radial-blur.is-white::after {
    opacity: 1;
  }

  [data-wf--navbar-new--variant='dark'] .blur-span::after {
    background-image: linear-gradient(#000, #0000);
  }

  [data-wf--navbar-new--variant='dark'] .blur-span::before {
    background-image: linear-gradient(#fff, #fff0);
  }

  [data-wf--bottom-bar--variant='dark-page'] .radial-blur::after {
    background-image: linear-gradient(#0000, #000);
  }

  [data-wf--bottom-bar--variant='dark-page'] .radial-blur::before {
    background-image: linear-gradient(#0000, #fff);
  }

  @media screen and (max-width: 479px) {
    .background-video-2::after {
      border-radius: 8px;
    }
  }

  @media screen and (min-width: 480px) {
    .background-video-2::after {
      border-radius: 1rem;
    }
  }

/* ---- related-posts swiper ---- */
.swiper {
    overflow: visible;
  }
  .swiper-button-next,
  .swiper-button-prev {
    position: static;
    width: initial;
    height: initial;
    margin-top: 0;
    color: inherit;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    display: none;
  }
  .blog-swiper-pagination {
    position: relative;
    height: 2px !important;
  }
  .swiper-pagination-progressbar-fill {
    background: #19191b !important;
  }
  .swiper-button-next.swiper-button-disabled,
  .swiper-button-prev.swiper-button-disabled {
    opacity: 1;
    cursor: auto;
    pointer-events: auto;
  }

  .heading-style-48 {
    color: var(--gray--400);
  }
  .heading-style-48::first-line {
    color: var(--gray--500);
  }

  .progress-bar {
    display: flex;
  }

  .toc__link.is-active {
    color: var(--gray--500);
    text-shadow: .5px 0 var(--gray--500);
  }

  p:has(+ h2),
  p:has(+ h3),
  ul:has(+ h2),
  ul:has(+ h3),
  ol:has(+ h2),
  ol:has(+ h3) {
    margin-bottom: 2.5rem;
  }

  .w-richtext figure {
    max-width: 100%;
  }

  .case-card_text.blog-post-title.is-about {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

/* ---- icon hover ---- */
.is-icon {
  	background-size: 180%;
  }
  
  .is-icon:hover,
  .is-icon:focus {
  	background-position: right;
  }

/* "Make Summary with AI" tooltip — hidden by default, revealed on hover.
   Live drives this via Webflow IX2 (opacity 0→1); we don't load webflow.js
   (Rule #0), so recreate the exact behaviour as a CSS hover. */
.blog_summary-link .blog_summary-tooltip {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.blog_summary-link:hover .blog_summary-tooltip {
  opacity: 1;
}

/* Subscribe form input — the `.subscribe-form__input` rule ships in live's newer
   Webflow CSS but was missing from our export, so the field fell back to the
   `.w-input` reset default (38px) instead of live's 48px pill. Restore it as a
   compound selector (beats the about.css reset-clobber). Source: live 1:1. */
.subscribe-form__input.w-input {
  border: 1px solid var(--gray--200);
  height: 3rem;
  color: var(--gray--500);
  border-radius: 100px;
  margin-bottom: 0;
  padding: .875rem 1rem;
  font-size: 1rem;
  line-height: 1.2;
  box-shadow: 0 1px 2px #1018280d;
}
.subscribe-form__input.w-input:focus {
  border-color: var(--gray--200);
}

/* Icon embeds must be transparent. Our older `main.css` carries a stray
   `.svg { background-color: #000 }` (absent from live) that painted the sidebar
   share buttons + the "AI Summary" sparkle onto BLACK discs — so the gray icons
   read as dark blobs / a "globe". Live has no `.svg` background; restore it with
   a compound selector (all icon embeds are `.svg.w-embed`). */
.svg.w-embed {
  background-color: transparent;
}

/* TOC links (incl. the "AI Summary" row) must lay the icon + label out in a ROW.
   Live's `.toc__link` is `display:flex`; our older export left it block, so the
   sparkle icon stacked ABOVE the text. Restore the live rule (loaded last). */
.toc__link {
  display: flex;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: center;
  color: var(--gray--400);
  font-size: .875rem;
  line-height: 1.4;
  text-decoration: none;
  transition: text-shadow .2s, color .2s;
}

/* "Make Summary with AI" — Pulse: the purple→orange border stays put while a soft
   colored glow breathes behind it, to draw a little attention to the block.
   Pure CSS; frozen for reduced-motion users. (Chosen concept, 2026-07.) */
.blog_summary-wr {
  animation: blog-summary-pulse 2.6s ease-in-out infinite;
}
@keyframes blog-summary-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(144, 3, 253, 0), 0 0 0 0 rgba(252, 183, 60, 0); }
  50% { box-shadow: 0 0 18px 1px rgba(144, 3, 253, .30), 0 0 30px 5px rgba(252, 183, 60, .16); }
}
@media (prefers-reduced-motion: reduce) {
  .blog_summary-wr { animation: none; }
}

/* Fix invert-button hover "ring" (see home-page.css note): assert canonical height last. */
.invert-button { height: 2.25rem; }

/* ============================================================
   Blog sidebar CTA card — compact "3-Day Free Trial" pinned under the TOC.
   Injected by BlogPostLayout's TOC script (one place, not baked into ~100 posts).
   Dark on-brand card + white pill button; hidden on mobile-landscape (follows the
   desktop TOC via .hide-mobile-landscape).
   ============================================================ */
/* Raise the pinned right TOC sidebar 40px higher (8rem → 5.5rem) per feedback.
   Overrides the shared webflow-shared.css sticky offset; blog-post-page.css loads last. */
.blog-post-main-toc {
  top: 5.5rem;
}

/* --- Blog article cleanup (Blog Update doc, 2026-07-20) --- */
/* #3 — drop the always-"Stas Kovalsky" author card from the sidebar; the real per-post
   author stays in the article header. */
.blog-post-main-toc .toc__ceo,
.blog-post-main-toc .toc__ceo + .toc__divider { display: none !important; }
/* #4 — the mobile "Table of contents" dropdown leaked onto desktop beside the article.
   Keep only the sticky sidebar TOC on desktop. */
@media (min-width: 992px) { .toc__main.visible-mob-landscape { display: none !important; } }
/* #5 — "Make Summary with AI" is duplicated (article + sidebar) → remove the sidebar copy. */
.blog-post-main-toc .toc__main:has(.toc__social.is-summary) { display: none !important; }

/* Sidebar trial card — matches the case-page mid-CTA card: light, rounded, animated
   rainbow top accent + soft halo, dark pill button. */
.toc__trial {
  position: relative;
  display: block;
  overflow: hidden;
  /* no margin-top: the sidebar is display:flex with a 2rem gap; an extra margin
     here double-spaced the card (56px above vs 32px below → looked misaligned). */
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid #e9e7ec;
  color: #020101;
  text-decoration: none;
  box-shadow: 0 1.5rem 3rem -2rem rgba(30, 12, 60, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.toc__trial::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, hsl(24 94% 54%), hsl(319 100% 59%), hsl(287 100% 42%), hsl(217 84% 50%), hsl(270 100% 63%));
  background-size: 200%;
  animation: toc-rainbow 2s infinite linear;
}
.toc__trial::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 22%;
  background: linear-gradient(90deg, hsl(24 94% 54%), hsl(319 100% 59%), hsl(287 100% 42%), hsl(217 84% 50%), hsl(270 100% 63%));
  background-size: 200%; filter: blur(22px); opacity: 0.45;
  animation: toc-rainbow 2s infinite linear; pointer-events: none;
}
@keyframes toc-rainbow { 0% { background-position: 0; } 100% { background-position: 200%; } }
.toc__trial:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -16px rgba(30, 12, 60, 0.4);
}
.toc__trial-eyebrow {
  position: relative;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9003fd;
  margin-bottom: 0.75rem;
}
.toc__trial-title {
  position: relative;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #020101;
  margin-bottom: 0.5rem;
}
.toc__trial-text {
  position: relative;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #6c6a78;
  margin-bottom: 1.25rem;
}
.toc__trial-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: #1a1b1f;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  transition: gap 0.25s ease;
}
.toc__trial:hover .toc__trial-btn {
  gap: 0.65rem;
}
@media (prefers-reduced-motion: reduce) {
  .toc__trial::before, .toc__trial::after { animation: none; }
}