/* Homepage-only styles (climbing-trail CTA animation and friends). Was a 15 KB inline
 * <style> in pages/home.html.erb; moved to a cached, fingerprinted asset 2026-09-04
 * (SEMrush low text-HTML ratio). Emitted by that page with stylesheet_link_tag. */
  /* --- Climbing-trail animation (closing CTA) --- */
  .lpd-trail { stroke-dasharray: 7 9; animation: lpd-trail-move 2.4s linear infinite; }
  @keyframes lpd-trail-move { to { stroke-dashoffset: -32; } }
  @media (prefers-reduced-motion: reduce) {
    .lpd-trail, .lpd-typing span { animation: none !important; }
  }

  /* --- Chat widget --- */

  /* --- Sizing unit ------------------------------------------------------
     Variation A scaled its whole hero composition off --u (1vw, frozen past
     1672px). This cut has no fixed-ratio hero, so --u is simply a fixed 16px
     base for the prompt-box metrics below. */
  .lpd { --u: 16px; }

  .lpd-hero-sky {
    background:
      radial-gradient(1200px 700px at 82% 6%,  rgba(109,74,255,0.32), transparent 60%),
      radial-gradient(900px 600px at 8% 30%,   rgba(76,141,255,0.10), transparent 62%),
      linear-gradient(160deg, #1C1250 0%, #150C3E 46%, #0D0730 100%);
  }
  /* topographic contour lines, pure CSS */
  .lpd-contours {
    pointer-events: none;
    background:
      repeating-radial-gradient(ellipse 62% 46% at 64% 44%,
        rgba(255,255,255,0.045) 0 1px, transparent 1px 3.4%),
      repeating-radial-gradient(ellipse 88% 60% at 30% 76%,
        rgba(255,255,255,0.025) 0 1px, transparent 1px 5.2%);
  }
  

  /* --- trail waypoints --- */
  .lpd-dot {
    position: absolute; transform: translate(-50%, -50%);
    width: calc(var(--u) * 0.9); aspect-ratio: 1; border-radius: 999px;
    background: #4C8DFF; border: calc(var(--u) * 0.17) solid #fff;
    box-shadow: 0 0 calc(var(--u) * 0.9) rgba(76,141,255,0.85);
  }
  .lpd-dot-summit { background: #fff; }

  .lpd-quote-stars { color: #F5B301; font-size: calc(var(--u) * 0.72); letter-spacing: 0.06em; }

  /* All five step sentences stay visible; the active pill is highlighted and the
     rest are dimmed. Same font weight everywhere so the highlight never reflows. */
  .showcase-step { border-radius: 0.75rem; background: rgba(255,255,255,0.03); transition: background .3s ease, box-shadow .3s ease, transform .3s ease; }
  .showcase-step:hover { background: rgba(255,255,255,0.07); }
  .showcase-step .showcase-step-num { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.55); transition: background .3s ease, color .3s ease; }
  .showcase-step .showcase-step-label { color: rgba(255,255,255,0.5); transition: color .3s ease; }
  .showcase-step-active {
    background: rgba(109,74,255,0.34);
    box-shadow: inset 0 0 0 1.5px rgba(154,124,255,0.85), 0 10px 28px rgba(109,74,255,0.28);
    transform: translateY(-2px);
  }
  .showcase-step-active .showcase-step-num { background: #6D4AFF; color: #fff; }
  .showcase-step-active .showcase-step-label { color: #fff; }
  @media (prefers-reduced-motion: reduce) { .showcase-step-active { transform: none; } }
  /* On short viewports (landscape tablets, small phones) drop the decorative
     chip and caption so the pinned view still fits one screen. */
  @media (max-height: 719px) { .showcase-h-tight { display: none !important; } }

  /* The H2 mirrors the active step: five headlines stacked in one grid cell,
     crossfading with the panels. */
  .showcase-headline { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; }
  .showcase-headline-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease, visibility 0s; }
  @media (prefers-reduced-motion: reduce) { .showcase-headline { transition: opacity .5s ease, visibility 0s .5s; transform: none; } .showcase-headline-active { transition: opacity .5s ease, visibility 0s; } }

  /* Panels stack in one grid cell and crossfade — no re-mount flash, and the
     section keeps one constant height across steps. */
  .showcase-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; }
  .showcase-panel-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease, visibility 0s; }
  @media (prefers-reduced-motion: reduce) { .showcase-panel { transition: opacity .5s ease, visibility 0s .5s; transform: none; } .showcase-panel-active { transition: opacity .5s ease, visibility 0s; } }

  /* --- the chat panel the launcher opens --- */


  /* --- Variation B: the prompt box IS the primary call to action ---------- */
  .lpd-ask {
    display: block; width: 100%; max-width: 680px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: calc(var(--u) * 1.0);
    padding: calc(var(--u) * 1.2) calc(var(--u) * 1.1);
    box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 2.6) rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .lpd-ask:focus-within {
    border-color: rgba(139,107,255,0.85);
    box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 2.6) rgba(0,0,0,0.35),
                0 0 0 calc(var(--u) * 0.22) rgba(109,74,255,0.28);
  }
  .lpd-ask-input {
    width: 100%; background: transparent; border: 0; outline: none; resize: none;
    color: #fff; font-size: calc(var(--u) * 1.02); line-height: 1.5;
  }
  .lpd-ask-input::placeholder { color: rgba(255,255,255,0.62); }
  .lpd-ask-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: calc(var(--u) * 0.55); padding-top: calc(var(--u) * 0.55);
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  .lpd-ask-attach {
    display: inline-flex; align-items: center; gap: calc(var(--u) * 0.4);
    font-size: calc(var(--u) * 0.86); color: rgba(255,255,255,0.62);
    transition: color .16s ease;
  }
  .lpd-ask-attach:hover { color: #fff; }
  .lpd-ask-send {
    width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 999px;
    background: var(--violet); color: #fff; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--u) * 0.86);
    box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(109,74,255,0.6);
    transition: background-color .16s ease, transform .16s ease;
  }
  .lpd-ask-send:hover { background: #7C5CFF; transform: translateY(-1px); }
  .lpd-ask-chip {
    display: inline-flex; align-items: center;
    padding: calc(var(--u) * 0.42) calc(var(--u) * 0.8);
    border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
    font-size: calc(var(--u) * 0.8); color: rgba(255,255,255,0.72);
    transition: all .16s ease; white-space: nowrap;
  }
  .lpd-ask-chip:hover { border-color: rgba(139,107,255,0.8); color: #fff; background: rgba(109,74,255,0.16); }
  /* --- the attached-file pill, shown once an upload lands --- */
  .lpd-file {
    display: none; align-items: center; gap: calc(var(--u) * 0.55);
    margin-bottom: calc(var(--u) * 0.7);
    padding: calc(var(--u) * 0.6) calc(var(--u) * 0.75);
    border: 1px dashed rgba(255,255,255,0.28); border-radius: calc(var(--u) * 0.6);
    background: rgba(255,255,255,0.05);
    font-size: calc(var(--u) * 0.85);
  }
  .lpd-file.is-shown { display: flex; }
  .lpd-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lpd-file-drop { color: rgba(255,255,255,0.55); flex: none; transition: color .16s ease; }
  .lpd-file-drop:hover { color: #fff; }


  /* --- Shimmer bed, borrowed from /excel-to-app -------------------------- */
  @keyframes lpd-shimmer-sweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
  @keyframes lpd-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(4%, -6%, 0) scale(1.12); }
  }
  @keyframes lpd-sheen-sweep { 0% { transform: translateX(-60%) rotate(8deg); } 100% { transform: translateX(160%) rotate(8deg); } }
  @keyframes lpd-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,107,255,0.55); }
    50%      { box-shadow: 0 6px 26px 4px rgba(139,107,255,0.5); }
  }

  .lpd-blob { position: absolute; border-radius: 999px; filter: blur(90px); will-change: transform; }
  .lpd-blob-a { top: -14%; left: -10%;  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
                background: #8b5cf6; opacity: 0.30; animation: lpd-drift 17s ease-in-out infinite; }
  .lpd-blob-b { bottom: -22%; right: -8%; width: 52vw; height: 52vw; max-width: 720px; max-height: 720px;
                background: #489DF9; opacity: 0.20; animation: lpd-drift 23s ease-in-out infinite reverse; }
  .lpd-blob-c { top: 24%; left: 46%;    width: 34vw; height: 34vw; max-width: 470px; max-height: 470px;
                background: #6d5da1; opacity: 0.26; animation: lpd-drift 29s ease-in-out infinite; }

  /* a slow diagonal light sweep across the whole hero */
  .lpd-sheen {
    position: absolute; top: -30%; bottom: -30%; width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
    animation: lpd-sheen-sweep 9s ease-in-out infinite;
  }

  .lpd-pulse { animation: lpd-pulse-glow 2.4s ease-in-out infinite; }

  /* --- Review marquee ---------------------------------------------------- */
  @keyframes lpd-marquee-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .lpd-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
                 mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
  .lpd-marquee:focus { outline: none; }
  .lpd-marquee-track {
    display: flex; width: max-content; gap: 1.25rem; padding: 0 0.625rem;
    animation: lpd-marquee-run 60s linear infinite;
  }
  .lpd-marquee:hover .lpd-marquee-track,
  .lpd-marquee:focus-within .lpd-marquee-track { animation-play-state: paused; }

  .lpd-review {
    display: flex; gap: 1rem; width: 420px; flex: none; margin: 0;
    padding: 1.15rem 1.3rem; border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.12);
  }
  .lpd-review-photo {
    width: 56px; height: 56px; flex: none; border-radius: 999px; object-fit: cover;
    box-shadow: 0 0 0 2px #8b5cf6, 0 0 0 5px rgba(139,92,246,0.22);
  }
  .lpd-review-quote { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.86); font-style: italic; }
  .lpd-review-name  { font-size: 13.5px; font-weight: 600; margin-top: 0.6rem; }
  .lpd-review-title { font-size: 11.5px; color: rgba(255,255,255,0.62); line-height: 1.35; }
  /* A wide client logo standing in for a headshot: contain it on white instead
     of cover-cropping it inside the circle. */
  .lpd-review-photo--logo { object-fit: contain; background: #fff; padding: 7px; }
  /* An anonymous reviewer has no headshot to show, and we will not invent one.
     Their initials sit in the same 56px ring so the card keeps its shape. */
  .lpd-review-photo--initial {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #6D4AE0, #4C2FB0);
    color: #fff; font-weight: 700; font-size: 17px; letter-spacing: 0.02em;
  }
  /* Review cards that link to a case study */
  a.lpd-review { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s; }
  a.lpd-review:hover { border-color: rgba(139,92,246,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.05)); }
  .lpd-review-cta { font-size: 11px; font-weight: 600; color: #A99BFF; margin-top: 0.45rem; display: inline-flex; align-items: center; gap: 4px; }

  /* A fixed 420px card is wider than a phone, so the quote clipped on both
     edges. Let the card follow the viewport below 480px. */
  @media (max-width: 480px) {
    .lpd-review { width: calc(100vw - 3rem); }
  }

  @media (prefers-reduced-motion: reduce) {
    .lpd-blob, .lpd-sheen, .lpd-pulse, .lpd-marquee-track { animation: none !important; }
    .lpd-marquee { overflow-x: auto; }
  }

  /* --- Leo peeking around the right-hand corner -------------------------- */
  /* The source art is a llama standing upright, head at the top, facing     */
  /* right. Flipping it vertically and turning it 90 degrees lays the neck   */
  /* along the horizontal, so it runs off the right edge of the hero (which  */
  /* is overflow-hidden) and only the head pokes back into the page.         */
  /*                                                                        */
  /* Leo used to be `hidden xl:block`, so phones — most of our traffic —     */
  /* never saw the mascot at all. He now shows at every width; only his      */
  /* size and how far he leans in change. On small screens he sits low in    */
  /* the hero, below the example chips, so he never lands under the copy.    */
  .lpd-leo-peek {
    position: absolute; right: -7.5rem; bottom: -1.5rem;
    width: 15rem; height: auto;
    transform: rotate(147.5deg) scaleY(-1);
    opacity: 0.75;
    pointer-events: none;
  }
  @media (min-width: 640px) {
    .lpd-leo-peek { right: -10rem; bottom: -2rem; width: 21rem; opacity: 0.85; }
  }
  @media (min-width: 1280px) {
    .lpd-leo-peek {
      right: -16rem; top: 58%; bottom: auto; width: 34rem; opacity: 0.9;
      transform: translateY(-50%) rotate(147.5deg) scaleY(-1);
    }
  }

  /* --- Closing CTA: the trailhead composition ---------------------------
     "Start at the trailhead. We'll climb with you." needs something to
     point at, so the mountain from /homepage-demo comes back here.
     summit-peak.png is 1400x946; the box locks that ratio, so the trail,
     the waypoints, the flag and Leo are all positioned in a 0-100 percent
     grid over it and can never drift apart at other widths.
     Leo is deliberately NOT on the mountain: the long-neck peek in this
     section is its own hand-tuned composition (see #llama-bottom) and must
     not be moved. */
  .lpd-summit { position: relative; width: 100%; aspect-ratio: 1400 / 946; }
  .lpd-summit-peak {
    position: relative; z-index: 10; width: 100%; height: auto; display: block;
    opacity: 0.30;
  }
  .lpd-summit-over { position: absolute; z-index: 20; pointer-events: none; }

  /* --- trail waypoints --- */
  .lpd-dot {
    position: absolute; z-index: 20; transform: translate(-50%, -50%);
    width: 0.9rem; aspect-ratio: 1; border-radius: 999px;
    background: #4C8DFF; border: 0.17rem solid #fff;
    box-shadow: 0 0 0.9rem rgba(76,141,255,0.85);
    opacity: 0.30;
  }
  .lpd-dot-summit { background: #fff; }
  @media (max-width: 640px) {
    .lpd-dot { width: 0.62rem; border-width: 0.12rem; opacity: 0.30; }
  }

  /* --- Case-study cards (solutions section) --- */
  a.lpd-case { color: inherit; text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
  a.lpd-case:hover { border-color: rgba(139,92,246,0.55); background: rgba(255,255,255,0.07); transform: translateY(-2px); }

  /* --- Dashboard mock bars --- */
  .lpd-bar { height: 6px; border-radius: 99px; background: #EDEAF8; overflow: hidden; }
  .lpd-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#6D4AFF,#8B6BFF); }