/* =========================================================
   FLETCH EMBEDDED PARTNERS PAGE
   ========================================================= */

   * {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body.fl-partners-page {
    margin: 0;
    overflow-x: hidden;
    background: var(--fl-surface);
    color: var(--fl-ink);
    font-family: var(--fl-font-sans);
  }
  
  body.fl-partners-page h1,
  body.fl-partners-page h2 {
    text-wrap: balance;
  }
  
  body.fl-partners-page p {
    text-wrap: pretty;
  }
  
  
  /* =========================================================
     MAIN
     ========================================================= */
  
  .fl-partners-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  
    width: 100%;
    max-width: 1180px;
  
    margin: 0 auto;
    /* Match home/AI clearance under the fixed nav. */
    padding: 200px 30px 0;
  }
  
  .fl-partners-main > section {
    width: 100%;
    margin-bottom: 150px;
  }
  
  .fl-partners-main > .fl-partners-paths {
    margin-bottom: var(--fl-footer-sep-gap, 100px);
  }
  
  .fl-partners-main > .fl-footer {
    flex: none;
    width: 100vw;
    margin: 0 0 0 calc(50% - 50vw);
  }
  
  
  /* =========================================================
     HERO — same green plate width as home/AI (.fl-section-sep)
     ========================================================= */
  
  .fl-partners-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    gap: 20px;
  
    width: 100%;
    max-width: none;
  
    margin: 0 auto;
    padding: 150px 48px 72px;
  
    /* Plate comes from .fl-section-sep::before (1329.56px), not a local fill. */
    border-radius: 0;
    background: transparent;
  
    text-align: center;
  }

  .fl-partners-hero.fl-section-sep {
    --fl-sep-pad-top: 0px;
    --fl-sep-pad-bottom: 0px;
  }
  
  .fl-partners-hero h1 {
    width: min(100%, 715px);
  
    margin: 0;
  
    font: 400 64px/67.2px "Cormorant Garamond", Georgia, serif;
  
    letter-spacing: -1.6px;
  }
  
  .fl-partners-hero h1 span {
    display: block;
  }
  
  .fl-partners-hero p {
    width: min(100%, 533px);
  
    margin: 0;
  
    color: var(--fl-text-muted);
  
    font-size: 16px;
    line-height: 26px;
  }
  
  .fl-partners-button {
    display: inline-flex;
    align-items: center;
  
    min-height: 48px;
  
    margin-top: 8px;
    padding: 12px 22px;
  
    border: 2px solid var(--fl-ink);
    border-radius: 999px;
  
    background: var(--fl-surface);
  
    box-shadow: var(--fl-shadow-md);
  
    color: var(--fl-ink);
  
    font: 400 16px/24px var(--fl-font-script);
  
    text-decoration: none;
  
    transition:
      transform 160ms ease,
      box-shadow 160ms ease,
      background 160ms ease;
  }
  
  .fl-partners-button:hover {
    background: var(--fl-cta-hover);
  
    transform: translate(-1px, -1px);
  
    box-shadow: 4px 4px 0 var(--fl-ink);
  }
  
  
  /* =========================================================
     SECTION HEADINGS
     ========================================================= */
  
  .fl-partners-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
  
    gap: 20px;
  
    width: 100%;
  
    text-align: center;
  }
  
  .fl-partners-heading h2 {
    margin: 0;
  
    font: 400 60px/1.02 "Cormorant Garamond", Georgia, serif;
  
    letter-spacing: -1.5px;
  
    text-align: center;
  }
  
  .fl-partners-heading h2 em {
    display: inline-block;
  
    color: var(--fl-green);
  
    font-family: var(--fl-font-script);
  
    font-style: normal;
    font-weight: 700;
  }
  
  .fl-partners-heading p {
    width: min(100%, 698px);
  
    margin: 0;
  
    color: var(--fl-text-muted);
  
    font-size: 18px;
    line-height: 29.25px;
  
    text-align: center;
  }
  
  .fl-partners-heading--hub {
    align-self: center;
  }
  
  
  /* =========================================================
     HUB SECTION
     ========================================================= */
  
  .fl-partners-hub-section {
    display: flex;
    flex-direction: column;
    align-items: center;
  
    gap: 75px;
  }
  
  .fl-partners-hub-block {
    display: flex;
    flex-direction: column;
    align-items: center;
  
    gap: 42px;
  
    width: 100%;
  }
  
  
  /* =========================================================
     DIAGRAM
     ========================================================= */
  
  .fl-partners-diagram {
    position: relative;
  
    align-self: center;
  
    width: 884.303px;
    height: 345.48px;
  }
  
  .fl-partners-diagram-phone {
    display: none;
  
    width: 100%;
    max-width: 414px;
  }
  
  
  /* =========================================================
     DESKTOP NODES
     ========================================================= */
  
  .fl-partners-node {
    position: absolute;
  
    top: calc(var(--y) * 1px);
    left: calc(var(--x) * 1px);
  
    /*
     * ABOVE LINES
     */
    z-index: 10;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    width: calc(var(--w, 0) * 1px);
  
    min-width: max-content;
  
    padding: 20.074px;
  
    border: 1.057px solid var(--fl-ink);
  
    border-radius: 4.226px;
  
    background: var(--fl-white);
  
    box-shadow: 3.17px 3.17px 0 var(--fl-ink);
  
    font-size: 16.904px;
    font-weight: 500;
    line-height: 1.17;
  
    white-space: nowrap;
  }
  
  
  /* =========================================================
     FLETCH HUB
     ========================================================= */
  
  .fl-partners-hub {
    position: absolute;
  
    top: 90.86px;
    left: 323.82px;
  
    /*
     * ABOVE EVERYTHING
     */
    z-index: 20;
  
    display: grid;
  
    width: 187.968px;
    height: 187.968px;
  
    border: 1.057px solid var(--fl-ink);
  
    border-radius: 50%;
  
    background: var(--fl-white);
  
    box-shadow: 3.17px 3.17px 0 var(--fl-ink);
  
    place-items: center;
  }
  
  .fl-partners-hub img {
    display: block;
  
    width: 96.456px;
    height: 32.211px;
  
    margin: -4px 0 0 -4px;
  }
  
  .fl-partners-partners {
    display: contents;
  }
  
  
  /* =========================================================
     CONNECTION LINES — dual-layer wires (track + travelling dashes)
     ========================================================= */
  
  .fl-partners-line {
    position: absolute;
  
    top: calc(var(--y) * 1px);
    left: calc(var(--x) * 1px);
  
    z-index: 1;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    width: calc(var(--w) * 1px);
    height: calc(var(--h) * 1px);
  
    pointer-events: none;
  }
  
  .fl-partners-line svg {
    display: block;
  
    flex: none;
  
    width: calc(var(--iw) * 1px);
    height: calc(var(--ih) * 1px);
  
    overflow: visible;
  
    transform: rotate(var(--r));
  
    transform-origin: center center;
  }

  .fl-partners-wire-base {
    fill: none;
    stroke: rgba(62, 155, 104, 0.28);
    stroke-width: 2;
    opacity: 1;
  }

  .fl-partners-wire-dash {
    fill: none;
    stroke: rgba(38, 123, 76, 0.82);
    stroke-linecap: round;
    stroke-dasharray: 0.05 0.08;
    stroke-width: 2;
    animation: fl-partners-wire-dash 16s linear infinite;
    animation-delay: var(--fl-dash-phase, 0s);
  }
  
  
  /* =========================================================
     STATS
     ========================================================= */
  
  .fl-partners-stats {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  
    align-self: center;
  
    width: min(899px, 100%);
  }
  
  .fl-partners-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  
    width: 140px;
  
    text-align: center;
  }
  
  .fl-partners-stats strong {
    font: 500 40px/45px "Cormorant Garamond", Georgia, serif;
  }
  
  .fl-partners-stats > div:first-child strong {
    font-weight: 600;
  }
  
  .fl-partners-stats span {
    color: var(--fl-green);
  
    font: 400 17px/1.15 var(--fl-font-script);
  }
  
  
  /* =========================================================
     PATHS
     ========================================================= */
  
  .fl-partners-paths {
    display: flex;
    flex-direction: column;
    align-items: center;
  
    gap: 56px;
  
    padding: 72px 40px 64px;
  
    /* Same wide plate as home/AI — not a local fill capped to 1180. */
    border-radius: 0;
    background: transparent;
  }

  .fl-partners-paths.fl-section-sep {
    --fl-sep-pad-top: 0px;
    --fl-sep-pad-bottom: 0px;
  }
  
  .fl-partners-paths .fl-partners-heading h2 {
    max-width: none;
  
    white-space: nowrap;
  }
  
  
  /* =========================================================
     SCALE
     ========================================================= */
  
  .fl-partners-scale {
    display: flex;
    flex-direction: column;
  
    gap: 24px;
  
    width: 100%;
  
    /* +20px above the scroller; tighter space before the tier cards. */
    margin-bottom: 16px;
  
    padding-top:  16px;
  
    touch-action: none;
    user-select: none;
  }
  
  .fl-partners-scale__ends {
    display: flex;
    justify-content: space-between;
  
    color: #5a7066;
  
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
  }
  
  .fl-partners-scale__track {
    position: relative;
  
    height: 31px;
  
    overflow: visible;
  
    border-radius: 9999px;
  
    background: #dcfce7;
  
    cursor: pointer;
  }
  
  .fl-partners-scale__track::before {
    content: "";
  
    position: absolute;
    inset: 0;
  
    border-radius: inherit;
  
    background:
      linear-gradient(
        90deg,
        #e1eeff 0%,
        #2b79d8 45%,
        #07366f 100%
      );
  }
  
  .fl-partners-scale__thumb {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    width: 247px;
    min-height: 48px;
  
    margin: 0;
    padding: 16px;
  
    border: 1px solid var(--fl-ink);
    border-radius: 9999px;
  
    background: var(--fl-white);
  
    box-shadow: 3px 3px 0 0 var(--fl-ink);
  
    color: var(--fl-ink);
  
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
  
    cursor: grab;
  
    overflow: visible;
  
    transform: translate3d(0, -50%, 0);
  
    transition: box-shadow 120ms ease;
  }

  .fl-partners-scale__label {
    position: relative;
    z-index: 1;
  }

  /* Drag affordance: double chevrons pulse outward until first use. */
  .fl-partners-scale__hint {
    position: absolute;
    top: 50%;
    z-index: 0;

    display: flex;
    align-items: center;
    gap: 2px;

    pointer-events: none;
  }

  .fl-partners-scale__hint--left {
    right: calc(100% + 10px);
    transform: translateY(-50%);
    animation: fl-partners-scale-hint-left 1.35s ease-in-out infinite;
  }

  .fl-partners-scale__hint--right {
    left: calc(100% + 10px);
    transform: translateY(-50%);
    animation: fl-partners-scale-hint-right 1.35s ease-in-out infinite;
  }

  .fl-partners-scale__hint i {
    display: block;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-color: #FBFCFD;
    border-width: 0 2px 2px 0;
    opacity: 0.85;
  }

  .fl-partners-scale__hint--left i {
    transform: rotate(135deg);
  }

  .fl-partners-scale__hint--right i {
    transform: rotate(-45deg);
  }

  .fl-partners-scale.is-interacted .fl-partners-scale__hint {
    opacity: 0;
    visibility: hidden;
    animation: none;
    transition: opacity 220ms ease, visibility 220ms ease;
  }

  @keyframes fl-partners-scale-hint-left {
    0%,
    100% {
      transform: translate(-1px, -50%);
      opacity: 0.4;
    }

    50% {
      transform: translate(-9px, -50%);
      opacity: 1;
    }
  }

  @keyframes fl-partners-scale-hint-right {
    0%,
    100% {
      transform: translate(1px, -50%);
      opacity: 0.4;
    }

    50% {
      transform: translate(9px, -50%);
      opacity: 1;
    }
  }
  
  .fl-partners-scale__thumb:hover,
  .fl-partners-scale__thumb:focus-visible {
    outline: none;
  }
  
  .fl-partners-scale__thumb.is-dragging {
    cursor: grabbing;
  
    box-shadow: 2px 2px 0 0 var(--fl-ink);
  }
  
  
  /* =========================================================
     TIER GRID
     ========================================================= */
  
  .fl-partners-tier-grid {
    display: grid;
  
    grid-template-columns: repeat(3, 1fr);
  
    gap: 22px;
  
    width: 100%;
  }
  
  .fl-tier-card {
    position: relative;
  
    display: flex;
    flex-direction: column;
  
    min-width: 0;
    min-height: 0;
  
    padding: 24px 22px 20px;
  
    border: 1px solid var(--fl-ink);
  
    border-radius: 8px;
  
    background: var(--fl-white);
  
    box-shadow: none;
  
    cursor: pointer;
  
    transition:
      border-width 120ms ease,
      box-shadow 120ms ease,
      opacity 160ms ease;
  }
  
  .fl-tier-card::after {
    content: "";
  
    position: absolute;
    inset: 0;
    z-index: 2;
  
    border-radius: inherit;
  
    background: rgba(242, 243, 245, 0.5);
  
    pointer-events: none;
  
    transition: opacity 160ms ease;
  }
  
  .fl-tier-card.is-active {
    border-width: 2px;
  
    box-shadow: 4px 4px 0 0 var(--fl-ink);
  
    cursor: default;
  }
  
  .fl-tier-card.is-active::after {
    opacity: 0;
  }
  
  
  /* =========================================================
     TIER DEMOS
     ========================================================= */
  
  .fl-tier-demo {
    width: 100%;
    height: 210px;
  
    overflow: hidden;
  
    border: 1px solid #d4e4da;
  
    border-radius: 8px;
  
    background: var(--fl-white);
  
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  
    color: #0a1109;
  
    font-family: "DM Sans", sans-serif;
  }
  
  .fl-tier-demo--plans {
    display: grid;
  
    grid-template-columns: repeat(2, 1fr);
  
    gap: 12px;
  
    padding: 25px 21px 21px;
  }
  
  .fl-tier-demo--plans article {
    display: flex;
    flex-direction: column;
  
    padding: 14px;
  
    border: 1px solid #d4e4da;
  
    border-radius: 12px;
  }
  
  .fl-tier-demo--plans article:first-child {
    gap: 4px;

    border: 2px solid #1a6b3c;
  
    background: #dcfce7;
  }
  
  .fl-tier-demo--plans b,
  .fl-tier-demo--plans span {
    font-size: 12px;
    line-height: 16px;
  }
  
  .fl-tier-demo--plans span {
    margin-top: 4px;
  
    color: #5a7066;
  }
  
  .fl-tier-demo--plans strong {
    margin-top: auto;
  
    font-size: 18px;
    line-height: 28px;
  }
  
  .fl-tier-demo--plans small {
    font-size: 12px;
    font-weight: 400;
  }
  
  .fl-tier-demo--plans i {
    padding: 4px 3px;
  
    border: 1px solid #d4e4da;
  
    border-radius: 10px;
  
    color: #5a7066;
  
    font-size: 11px;
  
    font-style: normal;
  
    font-weight: 700;
  
    line-height: 16px;
  
    text-align: center;
  }
  
  .fl-tier-demo--plans article:first-child i {
    border-color: #1a6b3c;
  
    background: #1a6b3c;
  
    color: var(--fl-white);
  }
  
  
  /* =========================================================
     STUDIO
     ========================================================= */
  
  .fl-tier-demo--studio > header {
    display: flex;
    align-items: center;
  
    gap: 16px;
  
    height: 41px;
  
    padding: 0 15px;
  
    border-bottom: 1px solid #d4e4da;
  
    background: #f7faf8;
  
    color: #5a7066;
  
    font-size: 11px;
  }
  
  .fl-tier-demo--studio header b {
    color: #1a6b3c;
  }
  
  .fl-tier-demo--studio header i {
    margin-left: auto;
  
    padding: 2px 8px;
  
    border-radius: 999px;
  
    background: #1a6b3c;
  
    color: var(--fl-white);
  
    font-style: normal;
  }
  
  .fl-studio-body {
    display: grid;
  
    grid-template-columns: 79px 1fr;
  
    height: 168px;
  }
  
  .fl-studio-body aside {
    display: flex;
    flex-direction: column;
  
    gap: 8px;
  
    padding: 8px;
  
    border-right: 1px solid #d4e4da;
  
    background: #f7faf8;
  }
  
  .fl-studio-body aside span {
    padding: 5px 7px;
  
    border: 1px solid #d4e4da;
  
    border-radius: 4px;
  
    background: var(--fl-white);
  
    color: #5a7066;
  
    font-size: 8px;
  
    white-space: nowrap;
  }
  
  .fl-studio-canvas {
    display: grid;
  
    padding: 16px;
  
    place-items: center;
  }
  
  .fl-studio-canvas > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  
    gap: 8px;
  
    width: 100%;
  
    padding: 13px;
  
    border: 1px dashed #1a6b3c;
  
    border-radius: 12px;
  }
  
  .fl-studio-canvas b {
    font-size: 10px;
  }
  
  .fl-studio-canvas span {
    width: 100%;
  
    padding: 4px 6px;
  
    border-radius: 4px;
  
    background: #dcfce7;
  
    color: #1a6b3c;
  
    font-size: 8px;
  }
  
  
  /* =========================================================
     API
     ========================================================= */
  
  .fl-tier-demo--api > header,
  .fl-tier-demo--api > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    padding: 10px 16px;
  }
  
  .fl-tier-demo--api > header {
    min-height: 46px;
  
    border-bottom: 1px solid #d4e4da;
  
    font-size: 14px;
  }
  
  .fl-tier-demo--api header img {
    width: 14px;
    height: 14px;
  }
  
  .fl-tier-demo--api > div {
    min-height: 40px;
  
    border-bottom: 1px solid #d4e4da;
  
    font-size: 11px;
  }
  
  .fl-tier-demo--api i {
    padding: 2px 8px;
  
    border-radius: 4px;
  
    background: #1a6b3c;
  
    color: var(--fl-white);
  
    font-size: 9px;
  
    font-style: normal;
  
    font-weight: 700;
  }
  
  .fl-tier-demo--api i.is-get {
    background: #3b82f6;
  }
  
  
  /* =========================================================
     CARD COPY
     ========================================================= */
  
  .fl-tier-card > h3 {
    margin: 0 0 16px;
  
    font: 600 24px/30px "Cormorant Garamond", Georgia, serif;
  
    white-space: nowrap;
  }
  
  .fl-tier-card__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
  
    gap: 14px;
  
    padding-top: 25px;
  }
  
  .fl-tier-card__copy p {
    margin: 0;
  
    color: var(--fl-text-muted);
  
    font-size: 16px;
  
    line-height: 26px;
  }
  
  .fl-tier-card ul {
    display: flex;
    flex-direction: column;
  
    gap: 6px;
  
    margin: 0;
    padding: 0;
  
    list-style: none;
  }
  
  .fl-tier-card li {
    display: flex;
    align-items: center;
  
    gap: 8px;
  
    color: #0a1109;
  
    font-size: 14px;
  
    line-height: 20px;
  }
  
  .fl-tier-card li img {
    width: 14px;
    height: 14px;
  }
  
  
  /* =========================================================
     SCROLL REVEAL
     ========================================================= */
  
  .fl-partners-reveal {
    opacity: 0;
  
    transform: translateY(8px);
  }
  
  .fl-partners-reveal.is-visible {
    animation:
      fl-partners-rise
      700ms
      cubic-bezier(0.22, 1, 0.36, 1)
      both;
  }
  
  
  /* =========================================================
     LINE REVEAL — integrations-style draw-on, then dash flow
     ========================================================= */
  
  .fl-partners-reveal .fl-partners-wire-base,
  .fl-partners-reveal .fl-partners-wire-dash {
    opacity: 0;
  }
  
  .fl-partners-reveal.is-visible .fl-partners-wire-base {
    opacity: 1;
    stroke-dasharray: 1;
    animation:
      fl-partners-wire-draw
      1600ms
      ease-out
      both;
    animation-delay: var(--fl-line-delay, 0ms);
  }
  
  .fl-partners-reveal.is-visible .fl-partners-wire-dash {
    opacity: 1;
    animation:
      fl-partners-wire-dash
      16s
      linear
      infinite;
    animation-delay: var(--fl-dash-phase, 0s);
  }
  
  
  /* =========================================================
     CARD ANIMATION
     ========================================================= */
  
  .fl-tier-card.fl-partners-reveal.is-visible {
    animation-name: fl-partners-card;
  
    animation-duration: 620ms;
  
    animation-timing-function:
      cubic-bezier(0.22, 1, 0.36, 1);
  
    animation-delay:
      calc(60ms + var(--i, 0) * 80ms);
  }
  
  
  /* =========================================================
     ANIMATIONS
     ========================================================= */
  
  @keyframes fl-partners-rise {
  
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  
  @keyframes fl-partners-wire-draw {
    from {
      opacity: 1;
      stroke-dashoffset: 1;
    }
  
    to {
      opacity: 1;
      stroke-dashoffset: 0;
    }
  }
  
  
  @keyframes fl-partners-wire-dash {
    from {
      stroke-dashoffset: 0;
    }
  
    to {
      stroke-dashoffset: -1;
    }
  }
  
  
  @keyframes fl-partners-card {
  
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  
  /* =========================================================
     TABLET
     ========================================================= */
  
  @media (max-width: 1050px) {
  
    .fl-partners-main {
      padding-right: 30px;
      padding-left: 30px;
    }
  
    .fl-partners-paths .fl-partners-heading h2,
    .fl-tier-card > h3 {
      white-space: normal;
    }

    .fl-partners-paths {
      padding: 40px 24px 32px;
    }

    .fl-partners-scale {
      margin-bottom: 14px;
    }

    .fl-partners-scale__thumb {
      width: min(168px, 46%);
  
      padding: 10px 12px;
  
      font-size: 13px;
    }

    .fl-partners-scale__hint--left {
      right: calc(100% + 6px);
    }

    .fl-partners-scale__hint--right {
      left: calc(100% + 6px);
    }

    .fl-partners-scale__hint i {
      width: 6px;
      height: 6px;
    }

    .fl-partners-diagram:not(.fl-partners-diagram--phone) {
      transform: scale(0.82);
  
      transform-origin: top center;
  
      margin-bottom: -62px;
    }

    .fl-partners-tier-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  
    .fl-tier-card {
      display: none;
  
      min-height: 0;
    }
  
    .fl-tier-card.is-active {
      display: flex;
    }
  }
  
  
  /* =========================================================
     MOBILE
     ========================================================= */
  
  @media (max-width: 900px) {
  
    .fl-partners-main {
      padding-top: 176px;
      padding-right: 30px;
      padding-left: 30px;
    }
  
    .fl-partners-main > section {
      margin-bottom: 150px;
    }
  
  
    /* Hero — clear the fixed nav, then hug the copy + CTA. */
  
    .fl-partners-hero {
      padding: 36px 24px 32px;
    }
  
    .fl-partners-hero h1 {
      font-size: clamp(44px, 10vw, 64px);
  
      line-height: 1.05;
    }
  
  
    /* Heading */
  
    .fl-partners-heading h2 {
      font-size: clamp(40px, 9vw, 60px);
    }
  
  
    /* Hub section */
  
    .fl-partners-hub-section {
      gap: 140px;
    }
  
    .fl-partners-hub-block {
      gap: 36px;
    }
  
  
    /* =====================================================
       DESKTOP DIAGRAM HIDDEN
       ===================================================== */
  
    .fl-partners-diagram:not(.fl-partners-diagram--phone) {
      display: none;
  
      transform: none;
  
      margin-bottom: 0;
    }
  
  
    /* =====================================================
       PHONE DIAGRAM
       ===================================================== */
  
    .fl-partners-diagram-phone {
      display: block;
  
      position: relative;
  
      width: 100%;
  
      max-width: 414px;
  
      margin: 0 auto;
  
      overflow: visible;
    }
  
    .fl-partners-diagram-phone::before {
      content: "";
  
      display: block;
  
      /*
       * More vertical space so the lower
       * partner boxes don't collide.
       */
      padding-bottom: 142%;
    }
  
    .fl-partners-diagram--phone {
      position: absolute;
  
      inset: 0;
  
      display: block;
  
      width: 100%;
      height: 100%;
  
      overflow: visible;
  
      transform: none;
    }
  
  
    /* =====================================================
       IMPORTANT:
       DO NOT FORCE DESKTOP --x/--y VALUES INTO %
       
       The mobile diagram uses its own layout.
       ===================================================== */
  
  
    /* =====================================================
       LAYERING
       ===================================================== */
  
    /*
     * Boxes
     */
    .fl-partners-diagram--phone
    .fl-partners-node {
  
      z-index: 10 !important;
    }
  
  
    /*
     * Fletch
     */
    .fl-partners-diagram--phone
    .fl-partners-hub {
  
      z-index: 20 !important;
    }
  
  
    /* =====================================================
       MOBILE BOXES
       ===================================================== */
  
    .fl-partners-diagram--phone
    .fl-partners-node {
      width: auto !important;
      height: auto !important;
      min-width: 0;
      box-sizing: border-box;
      color: #151a26;
      text-align: center;
      font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
      font-size: 16.904px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      white-space: nowrap;
    }
  
  
    /* =====================================================
       CLIENT
       ===================================================== */
  
    .fl-partners-diagram--phone
    .fl-partners-node--client {
  
      top: 1% !important;
  
      left: 50% !important;
  
      width: max-content !important;
  
      padding: 18px 28px;
  
      transform:
        translateX(-50%);
    }
  
  
    /* =====================================================
       FLETCH
       ===================================================== */
  
    .fl-partners-diagram--phone
    .fl-partners-hub {
      top: 16% !important;
      left: 50% !important;
      width: 34% !important;
      height: auto !important;
      aspect-ratio: 1 / 1;
      transform: translateX(-50%);
      border-width: 1px;
      box-shadow: 3.17px 3.17px 0 0 #151a26;
    }
  
    .fl-partners-diagram--phone
    .fl-partners-hub img {
  
      width: 52%;
  
      height: auto;
  
      margin: 0;
    }
  
  
    /* =====================================================
       PARTNER BOXES
       
       A + C are intentionally lower and farther apart.
       ===================================================== */
  
    .fl-partners-diagram--phone
    .fl-partners-node--partner {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 16px 12px;
      border: 1.057px solid #151a26;
      border-radius: 4.226px;
      background: #fff;
      box-shadow: 3.17px 3.17px 0 0 #151a26;
    }
  
  
    /*
     * PARTNER A - OEM
     *
     * Farther left so A↔C have clearer horizontal gap.
     */
    .fl-partners-diagram--phone
    .fl-partners-partners
    .fl-partners-node:nth-child(1) {
      top: 50% !important;
      left: 2% !important;
      right: auto !important;
      width: auto !important;
      transform: none;
    }

    /* Partner B — shifted further left; wire follows via drawPhoneLines. */
    .fl-partners-diagram--phone
    .fl-partners-partners
    .fl-partners-node:nth-child(2) {
      top: 68% !important;
      left: 2% !important;
      right: auto !important;
      width: auto !important;
      transform: none;
    }

    .fl-partners-diagram--phone
    .fl-partners-partners
    .fl-partners-node:nth-child(3) {
      top: 50% !important;
      right: 2% !important;
      left: auto !important;
      width: auto !important;
      transform: none;
    }

    .fl-partners-diagram--phone
    .fl-partners-partners
    .fl-partners-node:nth-child(4) {
      top: 79% !important;
      right: 8% !important;
      left: auto !important;
      width: auto !important;
      transform: none;
    }
  
  
    /* =====================================================
       LINES — MOBILE
       
       Boxes are positioned in this file. Threads are drawn
       in JS from those live boxes into .fl-partners-rays.
       ===================================================== */

    .fl-partners-diagram--phone
    .fl-partners-rays {
      display: block;
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    /* Slightly thinner than desktop, still readable on the phone hub. */
    .fl-partners-diagram--phone
    .fl-partners-wire-base,
    .fl-partners-diagram--phone
    .fl-partners-wire-dash {
      stroke-width: 1.5;
    }

    /*
     * Phone wires use the integrations armed/play/done state machine on
     * .fl-partners-rays. Neutralise the desktop .is-visible wire rules so
     * they do not fight opacity / draw timing on mobile.
     */
    .fl-partners-reveal
    .fl-partners-diagram--phone
    .fl-partners-wire-base,
    .fl-partners-reveal
    .fl-partners-diagram--phone
    .fl-partners-wire-dash,
    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wire-base,
    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wire-dash {
      opacity: 0;
      animation: none;
    }

    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wires--armed
    .fl-partners-wire-base,
    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wires--armed
    .fl-partners-wire-dash {
      opacity: 0;
      animation: none;
    }

    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wires--play
    .fl-partners-wire-base {
      opacity: 1;
      stroke-dasharray: 1;
      animation:
        fl-partners-wire-draw
        1600ms
        ease-out
        both;
      animation-delay: var(--fl-line-delay, 0ms);
    }

    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wires--play
    .fl-partners-wire-dash,
    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wires--done
    .fl-partners-wire-dash {
      opacity: 1;
      /* Pixel-consistent dasharray is set inline by drawPhoneLines(). */
      animation:
        fl-partners-wire-dash
        16s
        linear
        infinite;
      animation-delay: var(--fl-dash-phase, 0s);
    }

    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wires--done
    .fl-partners-wire-base {
      opacity: 1;
      stroke-dasharray: none;
      animation: none;
    }

  
    /* =====================================================
       MOBILE REVEAL
       Heading animates on its own. Diagram stays hidden until
       the heading hits the mid/upper trigger band (JS).
       ===================================================== */
  
    .fl-partners-hub-block
    > .fl-partners-heading.fl-partners-reveal {
      position: relative;
      width: 100%;
      align-self: stretch;
    }

    .fl-partners-hub-block
    > .fl-partners-reveal[data-fl-reveal-after] {
      position: relative;
      width: 100%;
      align-self: stretch;
      opacity: 0;
      transform: translateY(10px);
      animation: none;
    }

    .fl-partners-hub-block
    > .fl-partners-reveal[data-fl-reveal-after].is-visible {
      opacity: 1;
      transform: none;
      animation:
        fl-partners-rise
        700ms
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
    }
  
  
    /* =====================================================
       STATS
       ===================================================== */
  
    .fl-partners-stats {
      gap: 24px;
    }
  
    .fl-partners-stats strong {
      font-size: 34px;
    }
  
    .fl-partners-scale__track {
      height: 28px;
    }

    .fl-partners-scale__thumb {
      min-height: 36px;
  
      font-size: 12px;
    }
  }
  
  
  /* =========================================================
     SMALL MOBILE
     ========================================================= */
  
  @media (max-width: 560px) {
  
    .fl-partners-main {
      padding: 160px 30px 0;
    }
  
    .fl-partners-main > section {
      margin-bottom: 150px;
    }
  
    .fl-partners-main > .fl-partners-paths {
      margin-bottom: var(--fl-footer-sep-gap, 50px);
    }
  
  
    /* Hero */
  
    .fl-partners-hero {
      padding: 28px 20px 24px;
    }
  
    .fl-partners-hero h1 {
      max-width: 330px;
  
      font-size: 34px;
  
      line-height: 1;
    }
  
    .fl-partners-hero h1 span {
      display: block;
    }
  
    .fl-partners-hero p {
      max-width: 330px;
    }
  
  
    /* Heading */
  
    .fl-partners-heading h2 {
      max-width: 340px;
  
      font-size: 39px;
  
      line-height: 1.02;
  
      overflow-wrap: break-word;
    }
  
    .fl-partners-heading h2 em {
      display: block;
    }
  
    .fl-partners-heading p {
      max-width: 340px;
  
      font-size: 16px;
  
      line-height: 26px;
    }
  
  
    /* =====================================================
       SMALL MOBILE DIAGRAM
       ===================================================== */
  
    .fl-partners-diagram-phone {
      max-width: 414px;
    }
  
  
    /*
     * Keep enough vertical space.
     */
    .fl-partners-diagram-phone::before {
      padding-bottom: 145%;
    }
  
  
    /* Smaller boxes */
  
    .fl-partners-diagram--phone
    .fl-partners-node {
      font-size: 16.904px;
    }
  
    .fl-partners-diagram--phone
    .fl-partners-node--partner {
      padding: 16px 12px;
    }
  
  
    /* Client */
  
    .fl-partners-diagram--phone
    .fl-partners-node--client {
  
      padding: 16px 23px;
    }
  
  
    /*
     * Fletch slightly smaller.
     */
    .fl-partners-diagram--phone
    .fl-partners-hub {
      width: 34% !important;
    }

    .fl-partners-diagram--phone
    .fl-partners-partners
    .fl-partners-node:nth-child(1) {
      top: 50% !important;
      left: 0% !important;
    }

    .fl-partners-diagram--phone
    .fl-partners-partners
    .fl-partners-node:nth-child(3) {
      top: 50% !important;
      right: 0% !important;
    }

    .fl-partners-diagram--phone
    .fl-partners-partners
    .fl-partners-node:nth-child(2) {
      top: 68% !important;
      left: 0% !important;
    }

    .fl-partners-diagram--phone
    .fl-partners-partners
    .fl-partners-node:nth-child(4) {
      top: 80% !important;
      right: 6% !important;
    }
  
  
    /* Stats */
  
    .fl-partners-stats {
      flex-direction: column;
  
      align-items: center;
    }
  
  
    /* Scale */
  
    .fl-partners-scale__ends {
      font-size: 14px;
    }
  
    .fl-partners-scale__thumb {
      width: min(148px, 42%);
  
      min-height: 36px;
  
      padding: 8px 10px;
  
      font-size: 11px;
    }
  
  
    /* Plans */
  
    .fl-tier-demo--plans {
      gap: 8px;
  
      padding: 16px 12px;
    }
  
  
    /* Cards */
  
    .fl-tier-card {
      padding: 14px 14px 20px;
    }
  
    .fl-tier-card__copy {
      padding-top: 20px;
    }
  
  
    /* Studio */
  
  .fl-tier-demo--studio > header {
      gap: 6px;
    }
  }
  
  
  /* =========================================================
     REDUCED MOTION
     ========================================================= */
  
  @media (prefers-reduced-motion: reduce) {
  
    html {
      scroll-behavior: auto;
    }
  
    .fl-partners-reveal,
    .fl-partners-reveal.is-visible,
  
    .fl-tier-card.fl-partners-reveal.is-visible,
  
    .fl-partners-hub-block
    .fl-partners-reveal
    .fl-partners-node,
  
    .fl-partners-hub-block
    .fl-partners-reveal
    .fl-partners-hub,
  
    .fl-partners-hub-block
    .fl-partners-reveal.is-visible
    .fl-partners-node,
  
    .fl-partners-hub-block
    .fl-partners-reveal.is-visible
    .fl-partners-hub,
  
    .fl-partners-wire-base,
    .fl-partners-wire-dash,
    .fl-partners-reveal
    .fl-partners-diagram--phone
    .fl-partners-wire-base,
    .fl-partners-reveal
    .fl-partners-diagram--phone
    .fl-partners-wire-dash,
    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wire-base,
    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wire-dash {
  
      opacity: 1;
  
      transform: none;
  
      clip-path: none;
  
      animation: none;
    }

    .fl-partners-wire-base,
    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wire-base {
      stroke-dasharray: none;
    }

    .fl-partners-wire-dash,
    .fl-partners-reveal.is-visible
    .fl-partners-diagram--phone
    .fl-partners-wire-dash {
      stroke-dasharray: 0.032 0.05;
    }

    .fl-partners-scale__hint {
      animation: none;
      opacity: 0.75;
    }

    .fl-partners-scale__hint--left {
      transform: translate(-4px, -50%);
    }

    .fl-partners-scale__hint--right {
      transform: translate(4px, -50%);
    }
  }
/* Keep the authored content visible if visual enhancement cannot initialize. */
.fl-partners-main:not([data-fl-partners-mounted]) .fl-partners-reveal {
  opacity: 1;
  transform: none;
  animation: none;
}

.fl-partners-main:not([data-fl-partners-mounted]) .fl-tier-card {
  display: flex;
}