.grapi{
  
  --blue-100: #DCE8FF;
  --blue-200: #BEDEFF;
  --blue-400: #5DADFD;
  --blue-500: #378AFA;
  --blue-600: #216BEF;
  --blue-800: #1B45B2;
  --blue-deep: #1852D3;

  
  --gray-200: #D6DFE7;
  --gray-400: #97AEC3;
  --gray-500: #7E96B3;
  --gray-600: #6C82A4;
  --gray-800: #525F7B;
  --gray-950: #2D323E;

  --periwinkle-100: #E4EAF5;

  
  --hero-bg: #EFF7FF;
  --white: #FFFFFF;
  --bg-second: #E7EFF6;
  --ai-card-bg: #F6FBFF;
  --table-bg: #F6FAFF;

  
  --text-black: #2D323E;
  --text-secondary: #344054;
  --text-desc: #525F7B;
  --text-subdued: #607295;

  
  --badge-bg: #DAECFF;

  
  --dark-bg: #202430;
  --dark-text: #EFF7FF;
  --dark-muted: #B9C9D7;

  --border: #C3CBD3;
  --nav-border: #D6DFE7;
  --nav-hover: #E4EAF5;

  
  --r-badge: 1.875rem;
  --r-card: 0.75rem;
  --r-section-card: 1.5rem;
  --r-table: 2.25rem;
  --r-button: 1rem;
  --r-link: 0.25rem;

  
  --shell-w: 77.5rem;
  --section-pad: 6rem;

  
  --grad-blue: linear-gradient(135deg, #5DADFD 0%, #3F8CF6 50%, #216BEF 100%);

  
  --grad-text: linear-gradient(135deg, #378AFA 0%, #216BEF 48%, #1B45B2 100%);
  --grad-btn:  linear-gradient(to bottom, #216BEF, #1852D3);
  --grad-glow: linear-gradient(135deg, #9CCBFF 0%, #6FB6FD 50%, #5DADFD 100%);
  --ease: cubic-bezier(.2,.7,.2,1);
}.grapi *, .grapi *::before, .grapi *::after{ box-sizing: border-box; }@font-face{
  font-family: "Inter";
  src: url("/upwork-api/fonts/Inter-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}.grapi{
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  scroll-behavior: smooth;
  font-size: clamp(16px, 0.8333vw, 32px);
}.grapi{
  margin: 0;
  background-color: var(--hero-bg);
  color: var(--text-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}.grapi img{ display: block; max-width: 100%; }.grapi p{ margin: 0; }.grapi ul, .grapi ol{ margin: 0; padding: 0; list-style: none; }.grapi dl, .grapi dd{ margin: 0; }.grapi a{ text-decoration: none; color: inherit; }.grapi h1, .grapi h2, .grapi h3, .grapi h4, .grapi h5{ margin: 0; font-weight: 600; }.grapi button{ font: inherit; }.grapi [hidden]{ display: none !important; }.grapi :focus-visible{ outline: 3px solid var(--blue-600); outline-offset: 3px; border-radius: var(--r-link); }.grapi .skip{ position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--blue-600); color: #fff; padding: .875rem 1.25rem; min-height: 2.75rem; border-radius: 0 0 var(--r-card) 0; }.grapi .skip:focus{ left: 0; }.grapi .sr-in{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%);
}.grapi .shell{
  width: var(--shell-w);
  max-width: calc(100% - 2.75rem);
  margin-inline: auto;
  padding-inline: 1.5rem;
}@media (min-width: 1024px){.grapi .shell{ max-width: calc(100% - 2rem); } }.grapi .section{ padding-block: var(--section-pad); position: relative; isolation: isolate; overflow: hidden; }.grapi .section > .shell{ position: relative; z-index: 1; }.grapi .h1{ font-size: 2.625rem; font-weight: 600; letter-spacing: -0.11rem; line-height: 1.08; color: var(--text-black); text-wrap: balance; }@media (min-width: 700px){.grapi .h1{ font-size: 3.5rem;   letter-spacing: -0.16rem; } }@media (min-width: 1024px){.grapi .h1{ font-size: 4.875rem; letter-spacing: -0.25rem; line-height: 1.1; } }.grapi .h1__grad{
  display: block;
  background-image: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}.grapi .h1 > span{ display: block; }.grapi .h2{ font-size: 2rem; font-weight: 600; letter-spacing: -0.09rem; line-height: 1.06; color: var(--text-black); text-wrap: balance; }@media (min-width: 700px){.grapi .h2{ font-size: 2.5rem; letter-spacing: -0.11rem; } }@media (min-width: 1024px){.grapi .h2{ font-size: 3rem; letter-spacing: -0.125rem; line-height: 1.05; } }.grapi .h2__dark{ display: block; color: var(--text-black); line-height: 1.05; }.grapi .h2__grad{ display: block; line-height: .96; background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }.grapi .h2__light{ display: block; color: var(--dark-text); line-height: 1.05; }.grapi .h2__glow{ display: block; line-height: .96; background-image: var(--grad-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }.grapi .h3{ font-size: 1.375rem; font-weight: 600; letter-spacing: -0.045rem; line-height: 1.2; color: var(--text-black); }@media (min-width: 700px){.grapi .h3{ font-size: 1.625rem; letter-spacing: -0.055rem; } }.grapi .h3__soft{ color: var(--text-subdued); font-weight: 600; }.grapi .p-l{ font-size: 1rem; font-weight: 400; letter-spacing: -0.01875rem; line-height: 1.55; color: var(--text-desc); }.grapi .p-m{ font-size: .875rem; font-weight: 400; letter-spacing: -0.01875rem; line-height: 1.55; color: var(--text-desc); }.grapi .p-s{ font-size: .75rem; font-weight: 500; letter-spacing: -0.0125rem; line-height: 1.4; color: var(--text-desc); }.grapi .mut{ color: var(--text-desc); }.grapi .mono{ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }.grapi .tick, .grapi code{
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em; color: var(--blue-800);
}.grapi .method{
  margin-top: 2.5rem; font-size: .8125rem; line-height: 1.6;
  color: var(--text-desc); max-width: 62rem;
}.grapi .badge{
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  padding: .375rem .625rem;
  background-color: var(--badge-bg);
  border-radius: var(--r-badge);
}.grapi .badge img{ width: 1.125rem; height: 1.125rem; flex: none; }.grapi .badge span{
  
  color: var(--blue-800);
  font-size: .75rem; font-weight: 500; letter-spacing: -0.0125rem; line-height: 1;
  white-space: nowrap;
}.grapi .badge--dark{ background-color: rgba(255,255,255,.10); }.grapi .badge--dark span{ color: var(--blue-200); }.grapi .badge--dark img{ filter: brightness(2.4); }.grapi .btn-main{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.25rem 3rem; min-height: 2.75rem;
  color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.375rem; letter-spacing: -0.01875rem;
  background-image: var(--grad-btn);
  border: .375rem solid var(--blue-200);
  border-radius: var(--r-button);
  transition: background-image 200ms ease, box-shadow 200ms ease, transform 120ms ease;
  cursor: pointer;
}.grapi .btn-main:hover{
  background-image: linear-gradient(to bottom, var(--blue-deep), var(--blue-deep));
  box-shadow: 0 6px 54px 0 rgba(33,107,239,.8);
}.grapi .btn-main:active{ transform: translateY(1px); }.grapi .btn-soft{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.25rem 2rem; min-height: 2.75rem;
  color: var(--blue-600); font-size: 1rem; font-weight: 600; letter-spacing: -0.01875rem;
  background: var(--white);
  border: 1px solid var(--nav-border);
  border-radius: var(--r-button);
  transition: background-color 200ms ease, border-color 200ms ease, transform 120ms ease;
}.grapi .btn-soft:hover{ background: var(--periwinkle-100); border-color: var(--blue-200); }.grapi .btn-soft:active{ transform: translateY(1px); }.grapi .field{ position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .13; }.grapi .field__cv{ position: absolute; inset: 0; }.grapi .field__cv canvas, .grapi .field__cv .anim__cv, .grapi .field__cv .a2__cv{
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}.grapi .field--hero{
  inset: -8rem -12rem auto auto; right: -12rem; width: 56%; height: 116%; opacity: .13;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, #000 44%, rgba(0,0,0,.66) 60%, rgba(0,0,0,.32) 75%, rgba(0,0,0,.11) 88%, rgba(0,0,0,0) 97%);
          mask-image: radial-gradient(circle closest-side, #000 0%, #000 44%, rgba(0,0,0,.66) 60%, rgba(0,0,0,.32) 75%, rgba(0,0,0,.11) 88%, rgba(0,0,0,0) 97%);
}.grapi .field--wash{
  inset: -6rem -6rem -6rem -6rem; width: auto; opacity: .15;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 46%, #000 0%, #000 26%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.26) 70%, rgba(0,0,0,.08) 86%, rgba(0,0,0,0) 96%);
          mask-image: radial-gradient(80% 90% at 50% 46%, #000 0%, #000 26%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.26) 70%, rgba(0,0,0,.08) 86%, rgba(0,0,0,0) 96%);
}.grapi .field--dark{
  inset: -4rem -6rem -4rem -6rem; width: auto;
  mix-blend-mode: screen; opacity: .09;
  -webkit-mask-image: radial-gradient(86% 92% at 50% 50%, #000 0%, #000 30%, rgba(0,0,0,.6) 54%, rgba(0,0,0,.26) 74%, rgba(0,0,0,0) 96%);
          mask-image: radial-gradient(86% 92% at 50% 50%, #000 0%, #000 30%, rgba(0,0,0,.6) 54%, rgba(0,0,0,.26) 74%, rgba(0,0,0,0) 96%);
}@supports not (mask-image: radial-gradient(#000, transparent)){.grapi .field{ display: none; } }.grapi .hero{ position: relative; padding-block: 4.5rem 5rem; overflow: hidden; isolation: isolate; }@media (min-width: 1024px){.grapi .hero{ padding-block: 5.5rem 6rem; } }.grapi .hero__bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; }.grapi .hero > .shell{ position: relative; z-index: 2; }.grapi .hero__grid{ display: flex; flex-direction: column; gap: 2.5rem; align-items: stretch; }@media (min-width: 1024px){.grapi .hero__grid{ flex-direction: row; gap: 2rem; justify-content: space-between; align-items: center; }
}.grapi .hero__left{ display: flex; flex-direction: column; gap: 2.25rem; width: 100%; min-width: 0; }@media (min-width: 1024px){.grapi .hero__left{ width: auto; max-width: 34rem; } }.grapi .hero__head{ display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }.grapi .hero__sub{ max-width: 32rem; }.grapi .hero__ctas{ display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }.grapi .hero__facts{
  display: grid; grid-template-columns: 1fr; gap: 1.25rem 2rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(33,107,239,.14);
}@media (min-width: 560px){.grapi .hero__facts{ grid-template-columns: repeat(3, 1fr); } }.grapi .hero__facts .p-s{ text-wrap: pretty; }.grapi .hero__fact{ display: flex; flex-direction: column; gap: .3rem; }.grapi .hero__fact b{ font-size: 1.5rem; font-weight: 600; letter-spacing: -0.05rem; color: var(--text-black); }.grapi .hero__right{ width: 100%; min-width: 0; }@media (min-width: 1024px){.grapi .hero__right{ flex: 1 1 0; max-width: 38rem; } }.grapi .rot{
  display: inline-block; vertical-align: bottom;
  transition: width 560ms cubic-bezier(.22,1,.36,1);
}.grapi .rot__vp{ display: block; height: 1.1em; overflow: hidden; }.grapi .rot__track{
  display: flex; flex-direction: column;
  transform: translateY(calc(var(--i, 0) * -1.1em));
  transition: transform 620ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
}.grapi .rot__track.is-instant{ transition: none; }.grapi .rot__item{
  height: 1.1em; flex: none;
  display: flex; align-items: center; gap: .22em; white-space: nowrap;
}.grapi .rot__item img{ width: .62em; height: .62em; flex: none; }.grapi .rot__item b{ font-weight: inherit; color: var(--blue-600); -webkit-text-fill-color: var(--blue-600); }.grapi .rot__sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }.grapi .hero__ctas .btn-main{ max-width: 100%; text-align: center; }@media (max-width: 479px){.grapi .hero__ctas .btn-main{ padding-inline: 1.5rem; }
}.grapi .codecard{
  background: var(--white);
  border-radius: var(--r-section-card);
  padding: 1.25rem;
  box-shadow: 0 1.5px 3px rgba(7,4,146,.1), 0 18px 45px rgba(6,47,125,.05), 0 9px 18px rgba(27,59,119,.05);
}.grapi .codecard__tag{
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: .875rem; padding: .375rem .75rem;
  background: var(--ai-card-bg); border-radius: var(--r-badge);
  font-size: .75rem; font-weight: 500; letter-spacing: -0.0125rem; color: var(--blue-800);
  overflow-wrap: anywhere;
}.grapi .code{
  margin: 0; padding: 1rem 1.125rem;
  background: var(--table-bg); border-radius: var(--r-card);
  font-size: .8125rem; line-height: 1.8; color: var(--text-secondary);
  overflow-x: auto;
}.grapi .c-p{ color: var(--blue-800); }.grapi .benchwrap{ background: var(--hero-bg); padding-top: 4rem; }.grapi .benchwrap > .shell{ position: relative; z-index: 1; }.grapi .bench__cta{ display: flex; justify-content: center; margin-top: 2.25rem; }.grapi .bench{
  position: relative;
  background: var(--white);
  border-radius: var(--r-table);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 1.5px 3px rgba(7,4,146,.10), 0 18px 45px rgba(6,47,125,.06), 0 9px 18px rgba(27,59,119,.05);
}.grapi .bench__hd{ display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.75rem; }.grapi .bench__cap{ font-size: .75rem; line-height: 1.5; color: var(--text-desc); max-width: 46rem; }.grapi .bench__pick{ display: flex; flex-wrap: wrap; gap: .5rem; }@media (max-width: 719px){.grapi .bench__pick{
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: -.25rem; padding: .25rem; scrollbar-width: thin;
  }.grapi .chip{ flex: none; scroll-snap-align: start; }
}.grapi .chip{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: .625rem 1.125rem;
  border-radius: var(--r-badge); cursor: pointer;
  background: var(--table-bg); border: 1px solid var(--badge-bg);
  color: var(--text-desc); font-size: .875rem; font-weight: 500; letter-spacing: -0.0125rem;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}.grapi .chip:hover{ background: var(--periwinkle-100); color: var(--text-black); }.grapi #n1:checked ~ .bench__hd .chip[for="n1"], .grapi #n2:checked ~ .bench__hd .chip[for="n2"], .grapi #n3:checked ~ .bench__hd .chip[for="n3"], .grapi #n4:checked ~ .bench__hd .chip[for="n4"], .grapi #n5:checked ~ .bench__hd .chip[for="n5"]{
  background-image: var(--grad-btn); border-color: transparent; color: #fff; font-weight: 600;
}.grapi #n1:focus-visible ~ .bench__hd .chip[for="n1"], .grapi #n2:focus-visible ~ .bench__hd .chip[for="n2"], .grapi #n3:focus-visible ~ .bench__hd .chip[for="n3"], .grapi #n4:focus-visible ~ .bench__hd .chip[for="n4"], .grapi #n5:focus-visible ~ .bench__hd .chip[for="n5"], .grapi #f1:focus-visible ~ .bench__body .tog[for="f1"], .grapi #f2:focus-visible ~ .bench__body .tog[for="f2"], .grapi #f3:focus-visible ~ .bench__body .tog[for="f3"]{
  outline: 3px solid var(--blue-600); outline-offset: 3px;
}.grapi .bench__body{ --k1: 1; --k2: 1; --k3: 1; display: grid; gap: 1.5rem; }.grapi #f1:checked ~ .bench__body{ --k1: .58; }.grapi #f2:checked ~ .bench__body{ --k2: .62; }.grapi #f3:checked ~ .bench__body{ --k3: .74; }@media (min-width: 980px){.grapi .bench__body{ grid-template-columns: 1.25fr .95fr .95fr; gap: 2rem; } }.grapi .bench__stage{ display: flex; flex-direction: column; gap: .875rem; align-items: flex-start; min-width: 0; }@media (min-width: 980px){.grapi .bench__stage + .bench__stage{ padding-left: 2rem; border-left: 1px solid var(--badge-bg); }
}.grapi .bench__lab{ font-size: .8125rem; font-weight: 600; color: var(--text-black); letter-spacing: -0.0125rem; }.grapi .q{
  width: 100%; padding: .875rem 1rem;
  background: var(--table-bg); border: 1px solid var(--badge-bg); border-radius: var(--r-card);
  font-size: .8125rem; line-height: 1.9; color: var(--text-secondary);
  word-break: normal; overflow-wrap: break-word;
}.grapi .q__p, .grapi .q__f{ max-width: 100%; }.grapi .q__v{ color: var(--text-black); font-weight: 700; }.grapi .q b{ font-weight: 600; color: var(--blue-800); }.grapi .q__p, .grapi .q__f{ display: none; }.grapi .q__f{ color: var(--text-desc); }.grapi #n1:checked ~ .bench__body .q__p[data-p="1"], .grapi #n2:checked ~ .bench__body .q__p[data-p="2"], .grapi #n3:checked ~ .bench__body .q__p[data-p="3"], .grapi #n4:checked ~ .bench__body .q__p[data-p="4"], .grapi #n5:checked ~ .bench__body .q__p[data-p="5"]{ display: inline-block; }.grapi #f1:checked ~ .bench__body .q__f--pv, .grapi #f2:checked ~ .bench__body .q__f--sp, .grapi #f3:checked ~ .bench__body .q__f--hr{ display: inline-block; }.grapi .bench__filters{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }.grapi .tog{
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: .5rem .875rem;
  border-radius: var(--r-badge); cursor: pointer;
  background: var(--white); border: 1px solid var(--gray-200);
  color: var(--text-desc); font-size: .8125rem; font-weight: 500; letter-spacing: -0.0125rem;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}.grapi .tog::before{
  content: ""; width: 1.75rem; height: 1rem; border-radius: 999px; flex: none;
  background-color: var(--gray-200);
  background-image: radial-gradient(circle at center, #fff 0 42%, transparent 44%);
  background-size: 1rem 1rem; background-repeat: no-repeat; background-position: 0 50%;
  transition: background-color 220ms var(--ease), background-position 220ms var(--ease);
}.grapi .tog:hover{ border-color: var(--blue-200); color: var(--text-black); }.grapi #f1:checked ~ .bench__body .tog[for="f1"], .grapi #f2:checked ~ .bench__body .tog[for="f2"], .grapi #f3:checked ~ .bench__body .tog[for="f3"]{ background: var(--blue-100); border-color: var(--blue-200); color: var(--blue-800); font-weight: 600; }.grapi #f1:checked ~ .bench__body .tog[for="f1"]::before, .grapi #f2:checked ~ .bench__body .tog[for="f2"]::before, .grapi #f3:checked ~ .bench__body .tog[for="f3"]::before{ background-color: var(--blue-600); }.grapi #f1:checked ~ .bench__body .tog[for="f1"]::before, .grapi #f2:checked ~ .bench__body .tog[for="f2"]::before, .grapi #f3:checked ~ .bench__body .tog[for="f3"]::before{ background-position: 100% 50%; }.grapi .bench__fc{ font-size: .75rem; color: var(--text-desc); letter-spacing: -0.0125rem; }.grapi .bench__fc b{ color: var(--text-black); font-weight: 700; }.grapi .fcount::after{ content: "1"; }.grapi #f1:checked ~ .bench__body .fcount::after, .grapi #f2:checked ~ .bench__body .fcount::after, .grapi #f3:checked ~ .bench__body .fcount::after{ content: "2"; }.grapi #f1:checked ~ #f2:checked ~ .bench__body .fcount::after, .grapi #f1:checked ~ #f3:checked ~ .bench__body .fcount::after, .grapi #f2:checked ~ #f3:checked ~ .bench__body .fcount::after{ content: "3"; }.grapi #f1:checked ~ #f2:checked ~ #f3:checked ~ .bench__body .fcount::after{ content: "4"; }.grapi .bench__note, .grapi .bench__legend, .grapi .bench__out{ font-size: .75rem; line-height: 1.55; color: var(--text-desc); }.grapi .bench__mean{ display: none; font-size: .75rem; line-height: 1.55; color: var(--blue-800); font-weight: 500; }.grapi #f1:not(:checked) ~ #f2:not(:checked) ~ #f3:not(:checked) ~ .bench__body .bench__mean--base, .grapi #f1:checked ~ .bench__body .bench__mean--pv, .grapi #f1:not(:checked) ~ #f2:checked ~ .bench__body .bench__mean--flt, .grapi #f1:not(:checked) ~ #f2:not(:checked) ~ #f3:checked ~ .bench__body .bench__mean--flt{ display: block; }.grapi .size{ display: none; align-items: baseline; gap: .625rem; flex-wrap: wrap; }.grapi #n1:checked ~ .bench__body .size[data-size="1"], .grapi #n2:checked ~ .bench__body .size[data-size="2"], .grapi #n3:checked ~ .bench__body .size[data-size="3"], .grapi #n4:checked ~ .bench__body .size[data-size="4"], .grapi #n5:checked ~ .bench__body .size[data-size="5"]{ display: flex; }.grapi .size__n{
  font-size: clamp(2.5rem, 5.5vw, 3.5rem); font-weight: 600; letter-spacing: -0.1rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  background-image: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}.grapi .size__k{ font-size: .75rem; color: var(--text-desc); }.grapi .size__n > span{ display: none; }.grapi #f1:not(:checked) ~ #f2:not(:checked) ~ #f3:not(:checked) ~ .bench__body .size__n > span[data-c="000"], .grapi #f1:checked      ~ #f2:not(:checked) ~ #f3:not(:checked) ~ .bench__body .size__n > span[data-c="100"], .grapi #f1:not(:checked) ~ #f2:checked      ~ #f3:not(:checked) ~ .bench__body .size__n > span[data-c="010"], .grapi #f1:not(:checked) ~ #f2:not(:checked) ~ #f3:checked      ~ .bench__body .size__n > span[data-c="001"], .grapi #f1:checked      ~ #f2:checked      ~ #f3:not(:checked) ~ .bench__body .size__n > span[data-c="110"], .grapi #f1:checked      ~ #f2:not(:checked) ~ #f3:checked      ~ .bench__body .size__n > span[data-c="101"], .grapi #f1:not(:checked) ~ #f2:checked      ~ #f3:checked      ~ .bench__body .size__n > span[data-c="011"], .grapi #f1:checked      ~ #f2:checked      ~ #f3:checked      ~ .bench__body .size__n > span[data-c="111"]{ display: inline; }.grapi .bar{ width: 100%; height: .75rem; border-radius: 999px; background: var(--table-bg); border: 1px solid var(--badge-bg); overflow: hidden; }.grapi .bar i{
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background-image: var(--grad-blue);
  transform-origin: left center;
  transform: scaleX(calc(var(--k1) * var(--k2) * var(--k3)));
  transition: transform 620ms var(--ease);
}.grapi .job{
  display: none; width: 100%;
  padding: 1rem 1.125rem;
  background: var(--table-bg); border: 1px solid var(--badge-bg); border-radius: var(--r-card);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}.grapi #n1:checked ~ .bench__body .job[data-job="1"], .grapi #n2:checked ~ .bench__body .job[data-job="2"], .grapi #n3:checked ~ .bench__body .job[data-job="3"], .grapi #n4:checked ~ .bench__body .job[data-job="4"], .grapi #n5:checked ~ .bench__body .job[data-job="5"]{ display: block; }.grapi .job__t{ font-size: .9375rem; font-weight: 600; color: var(--text-black); letter-spacing: -0.0125rem; margin-bottom: .75rem; }.grapi .job__meta{ display: flex; flex-direction: column; gap: .3rem; }.grapi .job__meta > div{ display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; }.grapi .job__meta dt{ color: var(--text-desc); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }.grapi .job__meta dd{ color: var(--text-black); font-weight: 600; font-variant-numeric: tabular-nums; }.grapi .job__v{ margin-top: .875rem; padding-top: .75rem; border-top: 1px solid var(--badge-bg); font-size: .75rem; font-weight: 600; }.grapi .job__v--in{ color: #0B7A4F; }.grapi .job__v--out{ display: none; color: #A8460A; }.grapi #f1:checked ~ .bench__body .job--nopv, .grapi #f2:checked ~ .bench__body .job--lowspend, .grapi #f3:checked ~ .bench__body .job--lowhire{ background: #FFF7F0; border-color: #F5DCC6; }.grapi #f1:checked ~ .bench__body .job--nopv .job__t, .grapi #f2:checked ~ .bench__body .job--lowspend .job__t, .grapi #f3:checked ~ .bench__body .job--lowhire .job__t{ color: var(--text-desc); text-decoration: line-through; text-decoration-color: #C9A98C; }.grapi #f1:checked ~ .bench__body .job--nopv .job__v--in, .grapi #f2:checked ~ .bench__body .job--lowspend .job__v--in, .grapi #f3:checked ~ .bench__body .job--lowhire .job__v--in{ display: none; }.grapi #f1:checked ~ .bench__body .job--nopv .job__v--out, .grapi #f2:checked ~ .bench__body .job--lowspend .job__v--out, .grapi #f3:checked ~ .bench__body .job--lowhire .job__v--out{ display: block; }.grapi .bench.is-fresh .q, .grapi .bench.is-fresh .size, .grapi .bench.is-fresh .job{ animation: bench-in 460ms var(--ease) both; }.grapi .bench.is-fresh .size{ animation-delay: 60ms; }.grapi .bench.is-fresh .job{ animation-delay: 120ms; }@keyframes bench-in{
  from { opacity: .01; transform: translateY(.5rem); filter: blur(1.5px); }
  to   { opacity: 1;   transform: none;              filter: blur(0); }
}.grapi .index{ background: var(--white); padding-block: 4.5rem 2.75rem; }.grapi .index__h{ max-width: 24ch; margin: 0 auto 3.75rem; text-align: center; }.grapi .index__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }@media (min-width: 640px){.grapi .index__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; } }@media (min-width: 1024px){.grapi .index__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }.grapi .index__cell{ display: flex; flex-direction: column; gap: .5rem; }.grapi .index__n{
  font-size: 1.75rem; font-weight: 600; letter-spacing: -0.075rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  background-image: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}@media (min-width: 420px){.grapi .index__n{ font-size: 2rem; } }@media (min-width: 1024px){.grapi .index__n{ font-size: 2.375rem; } }.grapi .index__l{ font-size: .8125rem; line-height: 1.45; color: var(--text-desc); }.grapi .index__foot{
  margin-top: 2.25rem;
  font-size: .75rem; line-height: 1.6; color: var(--text-desc); max-width: 62rem;
}.grapi .logos{
  position: relative; margin-top: 3rem;
  display: flex; flex-direction: column; gap: 1.25rem; align-items: center;
  padding-block: 1.75rem; overflow: hidden; background: var(--white);
}.grapi .logos__head{ font-size: .9375rem; color: var(--text-desc); text-align: center; }.grapi .logos__vp{ position: relative; width: 100%; overflow: hidden; }.grapi .logos__fade{ position: absolute; top: 0; bottom: 0; width: clamp(1.5rem, 8%, 6rem); pointer-events: none; z-index: 10; }.grapi .logos__fade--l{ left: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }.grapi .logos__fade--r{ right: 0; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }html:not(.js-on) .grapi .logos__fade{ display: none; }.grapi .logos__track{ display: flex; align-items: center; width: max-content; animation: gr-marquee 40s linear infinite; }.grapi .logos__track:hover{ animation-play-state: paused; }@keyframes gr-marquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } }.grapi .logos__track > div{ display: flex; align-items: center; justify-content: center; padding-inline: 2.25rem; flex-shrink: 0; }.grapi .logos__track img{ height: 2.25rem; width: auto; object-fit: contain; }html:not(.js-on) .grapi .logos__track{
  animation: none;
  width: auto; max-width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 1rem;
}.grapi .head{ display: flex; flex-direction: column; gap: .875rem; align-items: center; text-align: center; max-width: 52rem; margin: 0 auto 3.75rem; }.grapi .head .p-l{ max-width: 46rem; }.grapi .loop{ background: var(--hero-bg); }.grapi .rig{ position: relative; }.grapi .rig__rail{
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  margin-bottom: 1.5rem;
}@media (min-width: 720px){.grapi .rig__rail{ grid-template-columns: repeat(4, 1fr); gap: 0; padding-top: 1.5rem; } }@media (min-width: 720px){.grapi .rig__rail::before, .grapi .rig__rail::after{
    content: ""; position: absolute; top: .5rem; left: 0; height: 2px; border-radius: 2px;
  }.grapi .rig__rail::before{ width: 100%; background: var(--gray-200); }.grapi .rig__rail::after{
    width: 100%; background-image: var(--grad-blue);
    transform-origin: left center; transform: scaleX(var(--prog, .125));
    transition: transform 520ms var(--ease);
  }.grapi #m1:checked ~ .rig__rail{ --prog: .125; }.grapi #m2:checked ~ .rig__rail{ --prog: .375; }.grapi #m3:checked ~ .rig__rail{ --prog: .625; }.grapi #m4:checked ~ .rig__rail{ --prog: .875; }
}.grapi .stop{
  position: relative; display: flex; flex-direction: column; gap: .3rem;
  min-height: 2.75rem; padding: .75rem .875rem; cursor: pointer;
  background: var(--white); border: 1px solid var(--badge-bg); border-radius: var(--r-card);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease);
}@media (min-width: 720px){.grapi .stop{ background: none; border: 0; border-radius: 0; padding: 1.25rem .75rem .75rem 0; }.grapi .stop::before{
    content: ""; position: absolute; top: -.25rem; left: 0;
    width: .625rem; height: .625rem; border-radius: 50%;
    background: var(--white); border: 2px solid var(--gray-400);
    transition: background-color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
  }
}.grapi .stop__n{ font-size: 1rem; font-weight: 600; color: var(--text-desc); letter-spacing: -0.02rem; transition: color 220ms var(--ease); }.grapi .stop__e{ font-size: .6875rem; color: var(--text-desc); overflow-wrap: anywhere; }.grapi .stop:hover .stop__n{ color: var(--text-black); }.grapi #m1:checked ~ .rig__rail .stop[for="m1"], .grapi #m2:checked ~ .rig__rail .stop[for="m2"], .grapi #m3:checked ~ .rig__rail .stop[for="m3"], .grapi #m4:checked ~ .rig__rail .stop[for="m4"]{ background: var(--white); border-color: var(--blue-200); }.grapi #m1:checked ~ .rig__rail .stop[for="m1"] .stop__n, .grapi #m2:checked ~ .rig__rail .stop[for="m2"] .stop__n, .grapi #m3:checked ~ .rig__rail .stop[for="m3"] .stop__n, .grapi #m4:checked ~ .rig__rail .stop[for="m4"] .stop__n{ color: var(--blue-800); }@media (min-width: 720px){.grapi #m1:checked ~ .rig__rail .stop[for="m1"], .grapi #m2:checked ~ .rig__rail .stop[for="m2"], .grapi #m3:checked ~ .rig__rail .stop[for="m3"], .grapi #m4:checked ~ .rig__rail .stop[for="m4"]{ background: none; border: 0; }.grapi #m1:checked ~ .rig__rail .stop[for="m1"]::before, .grapi #m2:checked ~ .rig__rail .stop[for="m2"]::before, .grapi #m3:checked ~ .rig__rail .stop[for="m3"]::before, .grapi #m4:checked ~ .rig__rail .stop[for="m4"]::before{ background: var(--blue-600); border-color: var(--blue-600); transform: scale(1.25); }
}.grapi #m1:focus-visible ~ .rig__rail .stop[for="m1"], .grapi #m2:focus-visible ~ .rig__rail .stop[for="m2"], .grapi #m3:focus-visible ~ .rig__rail .stop[for="m3"], .grapi #m4:focus-visible ~ .rig__rail .stop[for="m4"]{ outline: 3px solid var(--blue-600); outline-offset: 3px; border-radius: var(--r-link); }.grapi .rig__ctl{ display: none; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-bottom: 1.5rem; }.grapi .js-on .rig__ctl{ display: flex; }.grapi .btn-run{
  display: inline-flex; align-items: center; gap: .625rem;
  min-height: 2.75rem; padding: .75rem 1.5rem;
  border-radius: var(--r-badge); cursor: pointer;
  background: var(--white); border: 1px solid var(--blue-200);
  color: var(--blue-800); font-size: .9375rem; font-weight: 600; letter-spacing: -0.0125rem;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}.grapi .btn-run:hover{ background: var(--blue-100); }.grapi .btn-run__ico{ width: .75rem; height: .75rem; flex: none; border-radius: 2px; background: var(--blue-600); clip-path: polygon(0 0, 100% 50%, 0 100%); }.grapi .btn-run.is-running .btn-run__ico{ clip-path: none; border-radius: 2px; }.grapi .rig__meter{ display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; font-size: .8125rem; color: var(--text-desc); }.grapi .rig__meter-n{ color: var(--text-desc); }.grapi .rig__meter b{ color: var(--text-black); font-weight: 700; font-variant-numeric: tabular-nums; }.grapi .rig__stage{
  background: var(--white); border: 1px solid var(--badge-bg); border-radius: var(--r-table);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
}@media (min-width: 720px){.grapi .rig__stage{ min-height: 31rem; } }.grapi .mv{ display: none; flex-direction: column; gap: 1rem; align-items: flex-start; }.grapi #m1:checked ~ .rig__stage .mv[data-mv="1"], .grapi #m2:checked ~ .rig__stage .mv[data-mv="2"], .grapi #m3:checked ~ .rig__stage .mv[data-mv="3"], .grapi #m4:checked ~ .rig__stage .mv[data-mv="4"]{ display: flex; }.grapi .mv .h3{ max-width: 30ch; }.grapi .mv .p-l{ max-width: 62ch; }.grapi .mv__c{
  font-size: .8125rem; line-height: 1.6; color: var(--text-desc); max-width: 62ch;
  padding-top: .875rem; border-top: 1px solid var(--badge-bg); width: 100%;
}.grapi .pay{
  margin: 0; width: 100%; padding: 1rem 1.125rem;
  background: var(--table-bg); border-radius: var(--r-card);
  font-size: .8125rem; line-height: 1.8; color: var(--text-secondary);
  overflow-x: auto;
}.grapi .mv__d{ width: 100%; }.grapi .mv__d > summary{
  display: flex; align-items: center; gap: .625rem;
  min-height: 2.75rem; cursor: pointer; list-style: none;
  font-size: .875rem; font-weight: 600; letter-spacing: -0.0125rem; color: var(--blue-800);
}.grapi .mv__d > summary::-webkit-details-marker{ display: none; }.grapi .mv__d > summary::before{
  content: ""; width: .5rem; height: .5rem; flex: none;
  border-right: 2px solid var(--blue-600); border-bottom: 2px solid var(--blue-600);
  transform: rotate(-45deg); transition: transform 220ms var(--ease);
}.grapi .mv__d[open] > summary::before{ transform: rotate(45deg); }.grapi .mv__d > .pay{ margin-top: .375rem; }.grapi .c-k{ color: var(--text-black); font-weight: 700; }.grapi .c-s{ color: #0B7A4F; }.grapi .c-a{ color: var(--blue-800); }.grapi .c-n{ color: var(--text-black); font-weight: 700; }.grapi .c-c{ color: var(--text-desc); }.grapi .js-on .rig.is-stepping .mv{ animation: bench-in 420ms var(--ease) both; }.grapi .surface{ background: var(--white); padding-block: 3.25rem; }.grapi .head--surface{ margin-bottom: 2.25rem; }.grapi .head--surface .h2__grad{ text-wrap: balance; }.grapi .frame{ position: relative; padding-block: 1.75rem; }.grapi .frame::before, .grapi .frame::after{
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(to left, rgba(214,223,231,0) 0%, #C4D2DE 6%, #C4D2DE 94%, rgba(214,223,231,0) 100%);
}.grapi .frame::before{ top: 0; }.grapi .frame::after{ bottom: 0; }.grapi .frame__x{ position: absolute; width: 9px; height: 9px; pointer-events: none; }.grapi .frame__x::before, .grapi .frame__x::after{ content: ""; position: absolute; background: #A9BCCE; }.grapi .frame__x::before{ left: 4px; top: 0; width: 1px; height: 9px; }.grapi .frame__x::after{ top: 4px; left: 0; height: 1px; width: 9px; }.grapi .frame__x[data-c="tl"]{ left: -4px;  top: -4px; }.grapi .frame__x[data-c="tr"]{ right: -4px; top: -4px; }.grapi .frame__x[data-c="bl"]{ left: -4px;  bottom: -4px; }.grapi .frame__x[data-c="br"]{ right: -4px; bottom: -4px; }.grapi .surf{ display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem 2.5rem; }@media (min-width: 640px){.grapi .surf{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }@media (min-width: 980px){.grapi .surf{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem 2.5rem; } }.grapi .grp{ min-width: 0; }.grapi .grp h3{ font-size: .9375rem; letter-spacing: -0.02rem; color: var(--text-black); margin-bottom: .2rem; }.grapi .grp p{ font-size: .8125rem; line-height: 1.5; color: var(--text-desc); }.grapi .grp p code{ font-size: .75rem; color: var(--blue-800); overflow-wrap: anywhere; }.grapi .surf__foot{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; }.grapi .surf__note{ font-size: .8125rem; line-height: 1.5; color: var(--text-desc); max-width: 44ch; }.grapi .band{ background: var(--dark-bg); }.grapi .head--dark .p-l{ color: var(--dark-muted); }.grapi .sess{
  
  background: rgba(28,32,43,.62);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-table);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  max-width: 60rem; margin-inline: auto;
}.grapi .sess__hd{ display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }.grapi .sess__lab{ font-size: .8125rem; color: var(--dark-muted); letter-spacing: -0.0125rem; }.grapi .btn-play{
  display: inline-flex; align-items: center; gap: .625rem;
  min-height: 2.75rem; padding: .625rem 1.25rem; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-badge);
  color: var(--dark-text); font-size: .875rem; font-weight: 600; letter-spacing: -0.0125rem;
  transition: background-color 200ms var(--ease);
}.grapi .btn-play:hover{ background: rgba(255,255,255,.16); }.grapi .btn-play:focus-visible{ outline: 3px solid var(--blue-400); outline-offset: 3px; }.grapi .btn-play__ico{ width: .75rem; height: .75rem; flex: none; background: var(--blue-400); clip-path: polygon(0 0, 100% 50%, 0 100%); }.grapi .btn-play.is-playing .btn-play__ico{ clip-path: none; border-radius: 2px; }.grapi .sess__list{ display: flex; flex-direction: column; }.grapi .sl{
  display: grid; grid-template-columns: 1fr; gap: .25rem;
  padding: .875rem 0 .875rem 1.25rem; position: relative;
  border-left: 2px solid rgba(255,255,255,.16);
}@media (min-width: 640px){.grapi .sl{ grid-template-columns: 6rem 1fr; gap: 1.25rem; align-items: baseline; } }.grapi .sl::before{
  content: ""; position: absolute; left: -.3125rem; top: 1.15rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--blue-400);
  transition: background-color 300ms var(--ease), transform 300ms var(--ease);
}.grapi .sl__t{ font-size: .8125rem; color: var(--blue-200); font-variant-numeric: tabular-nums; }.grapi .sl__b{ font-size: .9375rem; line-height: 1.6; color: var(--dark-text); }.grapi .sl__b code{ color: #9CCBFF; font-size: .86em; }.grapi .sl--end{ border-left-color: transparent; }.grapi .sl--end::before{ background: #4FD69C; transform: scale(1.4); }.grapi .js-on .sess__list.is-armed .sl{ opacity: .34; transition: opacity 320ms var(--ease); }.grapi .js-on .sess__list.is-armed .sl.is-lit{ opacity: 1; }.grapi .sess__cost{ margin-top: 1.5rem; font-size: .9375rem; line-height: 1.6; color: var(--dark-text); }.grapi .sess__warn{
  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .875rem; line-height: 1.6; color: var(--dark-muted);
}.grapi .sess__warn b{ color: #FFC46B; font-weight: 600; }.grapi .band__cta{ display: flex; justify-content: center; margin-top: 2.5rem; }.grapi .data{ background: var(--white); }.grapi .data__sub{
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.03rem; color: var(--text-black);
  margin: 2.5rem 0 .625rem;
}.grapi .data__subp{ font-size: .875rem; line-height: 1.6; color: var(--text-desc); max-width: 58ch; margin-bottom: 1.25rem; }.grapi .data__sub + .viz__grid{ margin-top: 1.25rem; }.grapi .data__subp + .viz__grid{ margin-top: 0; }.grapi .viz{
  background: var(--table-bg);
  border: 0.0625rem solid var(--badge-bg);
  border-radius: var(--r-table);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.25rem;
  min-width: 0;
}.grapi .viz--wide{ margin-bottom: 1.5rem; }.grapi .viz__grid{ display: grid; grid-template-columns: 1fr; gap: 1.5rem; }@media (min-width: 900px){.grapi .viz__grid{ grid-template-columns: 1fr 1fr; } }.grapi .viz__top{ display: flex; gap: 2rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }.grapi .viz__q{ font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01875rem; color: var(--blue-600); margin-bottom: 0.5rem; }.grapi .viz__h{ font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -0.05rem; line-height: 1.15; color: var(--text-black); max-width: 26ch; }.grapi .viz__delta{ text-align: right; flex: none; }.grapi .viz__delta-n{
  display: block; font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 600;
  letter-spacing: -0.1rem; line-height: 1; font-variant-numeric: tabular-nums;
  background-image: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}.grapi .viz__delta-l{ font-size: 0.75rem; color: var(--text-desc); letter-spacing: -0.0125rem; }.grapi .viz__foot{ display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }.grapi .viz__api{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .75rem; background: var(--white); border-radius: var(--r-badge);
  font-size: .75rem; font-weight: 600; letter-spacing: -0.0125rem; color: var(--blue-600);
}.grapi .viz__take{ font-size: 0.875rem; line-height: 1.6; color: var(--text-desc); max-width: 58ch; }.grapi .viz__take b{ color: var(--text-black); font-weight: 600; }.grapi .viz__src{
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding-top: 0.875rem; border-top: 1px dashed var(--badge-bg);
  font-size: 0.75rem; line-height: 1.5; color: var(--text-desc);
}.grapi .viz__src img{ opacity: .75; }.grapi .viz__src code{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--blue-800); }.grapi .chart{ position: relative; }.grapi .chart svg{ width: 100%; height: clamp(11rem, 20vw, 15rem); display: block; overflow: visible; }.grapi .chart__grid line{ stroke: var(--badge-bg); stroke-width: 1; }.grapi .chart__dots circle{ fill: var(--blue-600); }.grapi .chart__dots .is-end{ fill: var(--blue-800); }.grapi .chart__x{ display: flex; justify-content: space-between; margin-top: .5rem; font-size: .6875rem; color: var(--text-desc); letter-spacing: .02em; }.grapi .chart__ends{ display: flex; justify-content: space-between; margin-top: .75rem; font-size: .75rem; color: var(--text-desc); }.grapi .chart__end b{ color: var(--text-black); font-weight: 600; font-variant-numeric: tabular-nums; }.grapi .chart__end--now b{ color: var(--blue-800); }.grapi .js-motion .chart__line{ stroke-dashoffset: var(--len, 0); transition: stroke-dashoffset 1.6s var(--ease); }.grapi .js-motion .viz.is-in .chart__line{ stroke-dashoffset: 0; }.grapi .js-motion .chart__area, .grapi .js-motion .chart__dots{ opacity: 0; transition: opacity .6s ease .7s; }.grapi .js-motion .viz.is-in .chart__area, .grapi .js-motion .viz.is-in .chart__dots{ opacity: 1; }.grapi .sizer{ display: flex; flex-direction: column; gap: 1rem; width: 100%; }.grapi .sizer__query{
  font-size: .8125rem; color: var(--text-secondary);
  background: var(--white); border: 1px solid var(--badge-bg);
  border-radius: var(--r-card); padding: .75rem .875rem;
  overflow-wrap: anywhere;
}.grapi .sizer__k{ color: var(--blue-600); font-weight: 600; margin-right: .5rem; }.grapi .sizer__out{ display: flex; align-items: baseline; gap: .625rem; }.grapi .sizer__n{
  font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 600; letter-spacing: -0.1rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  background-image: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}.grapi .sizer__l{ font-size: .8125rem; color: var(--text-desc); }.grapi .sizer__bar{ height: .5rem; border-radius: 999px; background: var(--white); border: 1px solid var(--badge-bg); overflow: hidden; }.grapi .sizer__bar i{ display: block; height: 100%; width: var(--w); background-image: var(--grad-blue); border-radius: 999px; }.grapi .gap{ display: flex; flex-direction: column; gap: .625rem; width: 100%; }.grapi .gap__row{ display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .75rem; align-items: center; }.grapi .gap__lab{ font-size: .8125rem; font-weight: 500; color: var(--text-black); }.grapi .gap__bar{ height: .625rem; border-radius: 999px; background-image: var(--grad-blue); width: var(--w); }.grapi .gap__row.is-miss .gap__bar{ background-image: linear-gradient(135deg, #FECF73, #EC790A); }.grapi .gap__you{ font-size: .6875rem; letter-spacing: -0.0125rem; color: var(--text-desc); white-space: nowrap; }.grapi .gap__you.is-on{ color: #0B7A4F; }.grapi .gap__row.is-miss .gap__you{ color: #B45309; font-weight: 600; }.grapi .funnel{ display: flex; flex-direction: column; gap: .5rem; width: 100%; }.grapi .funnel__row{ display: grid; grid-template-columns: 5.5rem 1fr 2.5rem; gap: .75rem; align-items: center; }.grapi .funnel__row > span{ font-size: .75rem; color: var(--text-desc); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.grapi .funnel__row > i{ height: 1.5rem; border-radius: var(--r-link); background-image: var(--grad-blue); width: var(--w); opacity: .85; }.grapi .funnel__row > b{ font-size: .8125rem; font-weight: 600; color: var(--text-black); text-align: right; font-variant-numeric: tabular-nums; }.grapi .funnel__row.is-won > i{ background-image: linear-gradient(135deg, #4FD69C, #11A66B); opacity: 1; }.grapi .funnel__row.is-won > b{ color: #0B7A4F; }.grapi .scan{ display: flex; flex-direction: column; gap: .5rem; width: 100%; }.grapi .scan__row{ display: grid; grid-template-columns: 1fr 5rem 2.5rem; gap: .75rem; align-items: center; }.grapi .scan__nm{ font-size: .8125rem; color: var(--text-black); }.grapi .scan__nm em{ font-style: normal; font-size: .625rem; text-transform: uppercase; letter-spacing: .06em; color: #B45309; background: #FFF2E6; padding: .1rem .35rem; border-radius: 999px; margin-left: .35rem; }.grapi .scan__row > i{ height: .5rem; border-radius: 999px; background-image: var(--grad-blue); width: var(--w); }.grapi .scan__v{ font-size: .8125rem; font-weight: 600; color: var(--text-black); text-align: right; font-variant-numeric: tabular-nums; }.grapi .scan__row.is-dead .scan__nm{ color: var(--text-desc); opacity: .8; }.grapi .scan__row.is-dead > i{ background-image: none; background: var(--gray-200); }.grapi .scan__row.is-dead .scan__v{ color: var(--text-desc); opacity: .8; }.grapi .js-motion .gap__bar, .grapi .js-motion .funnel__row > i, .grapi .js-motion .scan__row > i, .grapi .js-motion .sizer__bar i{
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease);
}.grapi .js-motion .viz.is-in .gap__bar, .grapi .js-motion .viz.is-in .funnel__row > i, .grapi .js-motion .viz.is-in .scan__row > i, .grapi .js-motion .viz.is-in .sizer__bar i{ transform: scaleX(1); }.grapi .cust{ background: var(--white); }.grapi .cust__grid{ display: grid; grid-template-columns: 1fr; gap: 2.5rem; }@media (min-width: 900px){.grapi .cust__grid{ grid-template-columns: 1.35fr .8fr; gap: 4rem; } }.grapi .cust__main{ display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }.grapi .cust__frame{ display: block; font-size: .8125rem; font-weight: 500; color: var(--text-desc); letter-spacing: -0.0125rem; margin-bottom: .15rem; }.grapi .cust__who{ display: flex; align-items: center; gap: .875rem; }.grapi .cust__av{ width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background: var(--blue-100); flex: none; }.grapi .cust__name{ display: block; font-size: 1.0625rem; font-weight: 600; color: var(--text-black); }.grapi .cust__role{ display: block; font-size: .8125rem; color: var(--text-desc); }.grapi .quote{ margin: .5rem 0; padding-left: 1.5rem; border-left: 3px solid var(--blue-600); }.grapi .quote p{ font-size: 1.375rem; font-weight: 400; letter-spacing: -0.03rem; line-height: 1.4; color: var(--text-black); max-width: 34ch; }.grapi .res{ display: flex; flex-direction: column; gap: .75rem; }.grapi .res li{ display: flex; align-items: baseline; gap: .75rem; font-size: 1rem; line-height: 1.55; color: var(--text-desc); }.grapi .res li::before{ content: ""; width: .5rem; height: .5rem; border-radius: 2px; background: var(--blue-200); flex: none; transform: translateY(-.1rem); }.grapi .cust__hon{ max-width: 54ch; }.grapi .rail{
  background: var(--ai-card-bg); border-radius: var(--r-section-card);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start;
  align-self: start;
}.grapi .rail__dl{ display: flex; flex-direction: column; gap: 1.125rem; width: 100%; }.grapi .rail__dl dt{ font-size: .8125rem; font-weight: 600; color: var(--text-black); margin-bottom: .25rem; }.grapi .rail__dl dd{ font-size: .8125rem; line-height: 1.5; color: var(--text-desc); overflow-wrap: anywhere; }.grapi .price{ background: var(--hero-bg); }.grapi .price__frame{ display: flex; flex-direction: column; gap: 2.5rem; }.grapi .price__rule{
  height: 1px;
  background: linear-gradient(to left, rgba(239,247,255,0) 0%, #D6DFE7 6.5%, #D6DFE7 93.5%, rgba(239,247,255,0) 100%);
}.grapi .price__cell{
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
  width: 100%; max-width: 40rem; margin-inline: auto;
}.grapi .price__n{ font-size: 3rem; font-weight: 600; letter-spacing: -0.11rem; line-height: 1; color: var(--text-black); font-variant-numeric: tabular-nums; }.grapi .price__n span{ display: block; margin-top: .5rem; font-size: .875rem; font-weight: 400; letter-spacing: -0.0125rem; color: var(--text-desc); }.grapi .price__cell--main .price__n{
  background-image: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}.grapi .price__cell--main .price__n span{ background: none; color: var(--text-desc); -webkit-text-fill-color: var(--text-desc); }.grapi .price__list{ display: flex; flex-direction: column; gap: .625rem; }.grapi .price__list li{ display: flex; align-items: baseline; gap: .75rem; font-size: .9375rem; line-height: 1.5; color: var(--text-desc); }.grapi .price__list li::before{ content: ""; width: .4375rem; height: .4375rem; border-radius: 2px; background: var(--blue-200); flex: none; transform: translateY(-.05rem); }.grapi .price__cell .btn-main{ margin-top: .75rem; }.grapi .faq{ background: var(--white); }.grapi .faq__list{ max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--gray-200); }.grapi .fq{ border-bottom: 1px solid var(--gray-200); }.grapi .fq > summary{
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 2.75rem; padding-block: 1.375rem; cursor: pointer; list-style: none;
  font-size: 1.125rem; font-weight: 600; letter-spacing: -0.03rem; color: var(--text-black);
}.grapi .fq > summary::-webkit-details-marker{ display: none; }.grapi .fq > summary::after{
  content: ""; width: .75rem; height: .75rem; flex: none;
  border-right: 2px solid var(--blue-600); border-bottom: 2px solid var(--blue-600);
  transform: rotate(45deg) translate(-.15rem, -.15rem);
  transition: transform 220ms var(--ease);
}.grapi .fq[open] > summary::after{ transform: rotate(225deg) translate(-.15rem, -.15rem); }.grapi .fq > summary:hover{ color: var(--blue-800); }.grapi .fq__b{ display: flex; flex-direction: column; gap: .875rem; padding-bottom: 1.5rem; max-width: 58ch; }.grapi .close{ background: var(--hero-bg); padding-block: 5rem; }.grapi .close .head{ margin-bottom: 0; gap: 1.25rem; }.grapi .close__ctas{ display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: .75rem; }.grapi .js-on [data-reveal]{ opacity: 0; transform: translateY(1.25rem); transition: opacity .5s ease, transform .5s var(--ease); }.grapi .js-on [data-reveal].is-in{ opacity: 1; transform: none; }@media (prefers-reduced-motion: reduce){.grapi{ scroll-behavior: auto; }.grapi *, .grapi *::before, .grapi *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }.grapi .logos__track{
    animation: none;
    width: auto; max-width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 1rem;
  }.grapi .logos__fade{ display: none; }.grapi .js-on [data-reveal]{ opacity: 1; transform: none; }.grapi .js-on .sess__list.is-armed .sl{ opacity: 1 !important; }.grapi .rot__item{ transition: none; }.grapi .bench.is-fresh .q, .grapi .bench.is-fresh .size, .grapi .bench.is-fresh .job{ animation: none !important; }.grapi .js-motion .chart__line{ stroke-dashoffset: 0 !important; }.grapi .js-motion .chart__area, .grapi .js-motion .chart__dots{ opacity: 1 !important; }.grapi .js-motion .gap__bar, .grapi .js-motion .funnel__row > i, .grapi .js-motion .scan__row > i, .grapi .js-motion .sizer__bar i{ transform: none !important; }
  
}@media print{.grapi .field, .grapi .gr-nav, .grapi .logos{ display: none !important; }.grapi .fq__b{ display: flex !important; }.grapi .bench__body [data-size], .grapi .bench__body [data-job], .grapi .bench__body .q__p, .grapi .bench__body .bench__mean{ display: block !important; }.grapi .mv{ display: flex !important; }.grapi .js-motion .chart__line{ stroke-dashoffset: 0 !important; }.grapi .js-motion .chart__area, .grapi .js-motion .chart__dots{ opacity: 1 !important; }.grapi .js-motion .gap__bar, .grapi .js-motion .funnel__row > i, .grapi .js-motion .scan__row > i, .grapi .js-motion .sizer__bar i{ transform: none !important; }.grapi .js-on [data-reveal]{ opacity: 1 !important; transform: none !important; }
}.grapi .hero__through{
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.1;
  color: var(--text-desc);
  margin: .125rem 0 1.75rem;
}.grapi .compound{ background: var(--white); padding-block: clamp(3rem, 6vw, 4.5rem); border-block: 1px solid var(--rule); }.grapi .compound__p{
  font-size: clamp(1.5rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -0.04em;
  line-height: 1.2; color: var(--text-black); max-width: 30ch; margin: 0 0 1.25rem; text-wrap: balance;
}.grapi .compound__p span{ color: var(--text-desc); font-weight: 400; }.grapi .compound__foot{ font-size: 1rem; line-height: 1.65; color: var(--text-desc); max-width: 62ch; margin: 0; }.grapi .price__cell--gain{ display: flex; flex-direction: column; gap: 1rem; }.grapi .gain{ list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }.grapi .gain li{ position: relative; padding-left: 1.125rem; font-size: .9375rem; line-height: 1.6; color: var(--text-desc); }.grapi .gain li::before{ content: ""; position: absolute; left: 0; top: .7em; width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--blue-400); }.grapi .gain b{ color: var(--text-black); font-weight: 600; }@media (prefers-reduced-motion: reduce){.grapi .rot, .grapi .rot__track{ transition: none !important; }
}.grapi .h1__rotline{ display: block; }