/* =========================================================================
   Account Editor — responsive.css
   Mobile-first: style.css holds the small-screen values, these scale up.
   ========================================================================= */

/* the strips are up to 15,840px wide, which is past what many mobile GPUs
   will upload as a texture — and the objects crowd a narrow layout anyway */
@media (max-width: 899px) {
  .hero__art { display: none; }
}

/* below this the five links will not fit beside the logo and the button */
@media (max-width: 899px) {
  .hdr__links { display: none; }
  .hdr__nav { max-width: 348px; }
}

/* ============================== 640px ============================== */
@media (min-width: 640px) {
  :root {  --text-hero: 2.5rem; }

  .popup { left: auto; width: 320px; }
  /* two-up as soon as there is room for a pair of cards */
  .calc__grid { grid-template-columns: repeat(2, 1fr); }

}

/* ============================== 768px ============================== */
@media (min-width: 768px) {
  :root {
        --text-hero: 2.9rem;
  }

  .hero { padding-top: 140px; padding-bottom: 44px; }
  .hero__in { gap: 28px; }
  .zoom__phone { --phone-w: 300px; }

  /* the card sits slightly off-square, as if dropped on the page */

  /* the title takes its own column and the list sits beside it */

}

/* ============================== 769px ============================== */
@media (min-width: 769px) {
  :root { --pad: 25px; }
}

/* ============================== 900px ============================== */
@media (min-width: 900px) {
  :root {
    
    --text-hero: 3.5rem;
    --text-dsp: 4.375rem;
    --text-t1: 3.375rem;
    --lh-t1: 3.645rem;
    --text-t2: 3rem;
    --text-t3: 2.25rem;
    --text-word: 9rem;
  }
  /* the page's real layout: copy beside art everywhere */

  .stx__cols { grid-template-columns: repeat(4, 1fr); }
  .stx__col + .stx__col { border-top: 0; border-left: 0; }
  .stx__col { padding: 28px 26px 26px; }



  .calc__pane { padding: 40px 36px; }

  .trust__head { padding-inline: 96px; }
  .trust__arrow { display: block; }

}

/* ============================== 1024px ============================== */
@media (min-width: 1024px) {
    .hero { padding-top: 158px; padding-bottom: 48px; }
  .zoom__phone { --phone-w: 340px; }
  .hero__in { gap: 32px; }


}


/* ============================== 1200px ============================== */
/* from here the max-width is the content width, so the gutter is the
   space left over either side and the padding drops to nothing */
@media (min-width: 1200px) {
  :root {
    
    --text-hero: 4.6rem;
    --text-dsp: 6rem;
    --text-t1: 4rem;
    --lh-t1: 4.32rem;
    --text-t2: 3.5rem;
    --text-t3: 2.75rem;
    --text-word: 12rem;

    --text-body-lg: 1.25rem;
    --lh-body-lg: 1.75rem;
    --text-body-base: 1.125rem;
    --lh-body-base: 1.575rem;
  }


  .calc__grid { grid-template-columns: 1.05fr 1fr; }

}


/* ============================== 1600px ============================== */
@media (min-width: 1600px) {
  :root {
        --text-hero: 5.4rem;
  }

  .zoom__phone { --phone-w: 409px; }
}

/* ============================== 1730px ============================== */
/* from here the container stops growing and centres */
@media (min-width: 1730px) {
  :root { --pad: 0px; --wrap-max: 1680px; }
}


/* =================== board frame on small screens =================== */
@media (max-width: 767px) {
  .zoom__board { inset: 16px; border-radius: 20px; }
}

/* ======================= trust wordmarks, small screens ======================= */
@media (max-width: 559px) {
  .trust__track { gap: 44px; padding-right: 44px; }
  .twm--bf, .twm--mv, .twm--pm, .twm--ms { font-size: 22px; }
  .twm--fc { font-size: 27px; }
  .trust__stats { gap: 22px 0; }
  .tstat { flex-basis: 150px; padding-inline: 14px; }
  .tstat__l { font-size: 11px; }
}

/* ========================= job story, desktop ========================= */
@media (min-width: 1024px) {
  /* text scrolls on the left; the stage pins beside it, centred in view */
  .jx__device { --jx-scale: 0.94; }
  .jx-chip { right: 28px; bottom: 90px; font-size: 14px; }
}

/* ========================= job story, small ========================= */
@media (max-width: 559px) {
  .jx__device { --jx-scale: 0.58; }
  .jx-chip { right: 12px; bottom: 44px; font-size: 12px; }
  .jx__big { font-size: 96px; }
}

/* ========================= work stories, small ========================= */
@media (max-width: 899px) {
  /* no pin on small screens: the studies stack and every one is shown */
  .wk__track { height: auto; }
  .wk__pin { position: relative; height: auto; overflow: visible; padding-block: 64px 40px; }
  .wk__row { height: auto; margin-top: 32px; border-bottom: 0; }
  .wk__slide {
    position: relative; inset: auto; visibility: visible;
    grid-template-columns: 1fr; border-bottom: 1px solid var(--wk-ink);
  }
  .wk__left { flex-direction: row; align-items: flex-end; padding: 16px var(--pad); }
  .wk__media { aspect-ratio: 4 / 3; border: 0; border-block: 1px solid var(--wk-ink); clip-path: none; }
  .wk__media img { transform: none; }
  .wk__right { gap: 18px; padding: 18px var(--pad) 28px; }
  .wk__num, .wk__btn, .wk__meta, .wk__title, .wk__text, .wk__stats { opacity: 1; transform: none; }
  .wk__progress { display: none; }
}

/* ============================ footer grid ============================ */
@media (min-width: 900px) {
  .ftr__grid { grid-template-columns: repeat(3, 1fr); }
  .ftr__cell { min-height: 400px; padding: 38px 40px 44px; }
  .ftr__cell + .ftr__cell { border-top: 0; border-left: 1px solid var(--fg); }
}
@media (max-width: 559px) {
  .ftr { padding: 56px 18px 0; }
  .ftr__cell { padding: 28px 22px 32px; }
  .ftr__dot { display: none; }
}

/* ===================== steps total, small screens ===================== */
@media (max-width: 639px) {
  /* stacked under the heading, the total reads from the left like the rest */
  .stx__total { text-align: left; }
}

/* ========================= steps, two columns ========================= */
@media (min-width: 640px) and (max-width: 899px) {
  .stx__cols { grid-template-columns: repeat(2, 1fr); }
  .stx__col + .stx__col { border-top: 0; }


}

/* ========================= final CTA, small ========================= */
@media (max-width: 639px) {
  .lc__badge { width: 132px; height: 132px; }
  .lc__core { width: 66px; height: 66px; }
  .lc__stats { grid-template-columns: 1fr; }
  .lc__stats > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); margin-top: 16px; }
}

/* ========================= integrations rows ========================= */
@media (max-width: 639px) {
}

/* ========================= extras list, small ========================= */
@media (max-width: 639px) {
  .exl__link { min-height: 210px; padding: 22px 20px; }
  .exl__arrow { width: 42px; height: 42px; }
}

/* ====================== new sections, wide screens ====================== */
@media (min-width: 1024px) {
}

/* ======================= integrations, small screens ======================= */
/* eight pills will not clear the logo at this width, so four take the ring */
@media (max-width: 639px) {
}

@media (min-width: 1000px) { .ign { grid-template-columns: repeat(4, 1fr); }
  .ign__cell:nth-child(-n + 3) { border-top: 1.5px solid rgba(125, 64, 255, 0.22); }
  .ign__cell:nth-child(3n + 1) { border-left: 1.5px solid rgba(125, 64, 255, 0.22); }
  .ign__cell:nth-child(-n + 4) { border-top: 0; }
  .ign__cell:nth-child(4n + 1) { border-left: 0; }
}


/* ======================= faq ======================= */
@media (min-width: 900px) {
  .faq__in { grid-template-columns: 0.85fr 1.15fr; gap: 64px; }
  .faq__side { position: sticky; top: 110px; }
}
@media (max-width: 559px) {
  .acc__q { padding: 18px 16px; gap: 12px; }
  .acc__label { font-size: 15.5px; }
  .acc__a-in p { padding: 0 16px 20px 48px; font-size: 14.5px; }
}


/* ======================= integrations marquee ======================= */
@media (max-width: 899px) {
  .igb__cell { width: 180px; min-height: 108px; padding: 16px 18px; }
  .igb__cell img { max-width: 116px; max-height: 30px; }
  .ig__foot { margin-top: 22px; }
}


@media (min-width: 1000px) {
  .win { grid-template-columns: 1.05fr 1fr; gap: 56px; padding: 44px 40px; }
  .win__right { justify-content: center; }
  .win__list { grid-template-columns: repeat(2, 1fr); gap: 14px 28px; }
}

@media (max-width: 899px) {
  .vsw__vs { width: 44px; height: 44px; }
  .vsw__vs i { font-size: 14px; }
  .vsw__ghost { display: none; }
  .vsm { max-width: 100%; }
  .vsw__foot b { font-size: 20px; }
}

@media (max-width: 559px) {
  .led__rows li { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 559px) {
  .led__rows li { grid-template-columns: 1fr; gap: 6px; }
  .led__rows { padding-inline: 16px; }
  .led__top, .led__end { padding-inline: 16px; }
}

/* ======================= comparison: heading left, cards right ======================= */
@media (min-width: 900px) {
  .vsx__in { grid-template-columns: 0.78fr 1.22fr; gap: 64px; }
  .vsx__side { position: sticky; top: 110px; }
  /* the button belongs under the cards, not under the heading */
  .led__cta { grid-column: 2; }
}
@media (max-width: 559px) {
  .led__rows li { grid-template-columns: 1fr; gap: 6px; }
  .led__rows { padding-inline: 16px; }
  .led__top, .led__end { padding-inline: 16px; }
}

/* ======================= free extras: stage left, index right ======================= */
@media (min-width: 900px) {
  .exs { grid-template-columns: 0.85fr 1.15fr; gap: 64px; }
  .exs__stage { position: sticky; top: 110px; }
}