@layer components {
  @keyframes about-circle {
    from {
      stroke-dashoffset: var(--offset);
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  .about-circle {
    --offset: 7.5;
    animation: about-circle 1.15s linear infinite;
  }

  .about-circle-double {
    --offset: 6.28;
    animation: about-circle 1s linear infinite;
  }

  .about-circle-double-path {
    --offset: 6;
    animation: about-circle 1s linear infinite;
    
    mask-image: linear-gradient(to bottom, #0000, #000 15%, #000 85%, #0000);
  }

  .about-circle-double-path-reverse {
    --offset: -6;
    animation: about-circle 1s linear infinite;

    mask-image: linear-gradient(to bottom, #0000, #000 15%, #000 85%, #0000);
  }

  .about-circle-double-path-vertical {
    --offset: 6;
    animation: about-circle 1s linear infinite;
    
    mask-image: linear-gradient(to right, #0000, #000 15%, #000 85%, #0000);
  }
}

.about-assets-button {
  padding: 6px 8px 6px 12px;
  
  display: inline-flex;
  align-items: center;
  column-gap: 8px;
  
  border-radius: 10px;
  background: #F7F7F8;
  box-shadow: 0 0 0 1px #D9D9DE;

  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.13px;

  cursor: pointer;

  transition: background 150ms ease-out, color 150ms ease-out;
}

.about-assets-button > div {
  padding-inline: 5px;
  
  border-radius: 5px;
  background: #5E5F6C;

  color: #FFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.018px;

  transition: background 150ms ease-out, color 150ms ease-out;
}

.about-assets-button:hover {
  background: #EDEDEE;
}

.about-assets-button:hover > div {
  background: #4D4E58;
}

.about-assets-button:active {
  background: #EDEDEE;
  color: #42424B;
}

.about-assets-button:hover > div {
  background: #5E5F6B;
}

.about-assets-button:focus-visible {
  outline: 2px solid #5E5F6D;
  outline-offset: 2px;
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-in {
  animation: slideIn 0.5s ease-out forwards;
}

.glow-path {
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  opacity: 0;
  transition: opacity 1.2s;
}

.group:hover .glow-path {
  opacity: 1;
  animation: dash 2s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 450;
  }
  to {
    stroke-dashoffset: -450;
    opacity: 0;
  }
}

.sig-glow-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
  transition: opacity 1.2s;
}

.signature-container:hover .sig-glow-path {
  opacity: 1;
  animation: sig-dash 2.5s ease-in forwards;
}

.sig-base-path {
  opacity: 1;
}

@keyframes sig-dash {
  0% {
    stroke-dashoffset: 1000;
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@import './button.css';
@import './case-study.css';
@import './guides.css';
@import './integrations.css';
@import './legal.css';
@import './pricing.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }

  :focus-visible {
    outline: 2px solid #0060FF;
  }
}

@layer utilities {
  .container {
    padding-inline: 16px;
    margin-inline: auto;
    max-width: 100%;

    @media (min-width: theme('screens.sm')) {
      padding-inline: 24px;
    }

    @media (min-width: theme('screens.md')) {
      padding-inline: 32px;
    }

    @media (min-width: theme('screens.lg')) {
      padding-inline: 64px;
      max-width: calc(1008px + 64px * 2);
    }
  }
}

@layer utilities {
  .bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}

@layer utilities {
  [id] {
    scroll-margin-top: 100px;
  }
}

@layer components {
  @property --button-accent-overlay {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(255, 255, 255, 0);
  }

  @property --button-accent-gradient-from {
    syntax: '<color>';
    inherits: false;
    initial-value: #07F;
  }

  @property --button-accent-gradient-to {
    syntax: '<color>';
    inherits: false;
    initial-value: #055EFE;
  }

  .button-accent {
    --button-accent-gradient-from: #07F;
    --button-accent-gradient-to: #055EFE;

    padding: 6px 12px;
    border-radius: 10px;
    background: 
      linear-gradient(var(--button-accent-overlay), var(--button-accent-overlay)),
      linear-gradient(180deg, var(--button-accent-gradient-from) 0%, var(--button-accent-gradient-to) 100%);
    box-shadow: 
      0 1px 0.5px 0 rgba(255, 255, 255, 0.13) inset, 
      0 1px 1px 0 rgba(17, 31, 91, 0.20), 
      0 2px 4px -2px rgba(17, 31, 91, 0.40), 
      0 1px 5px -2px rgba(17, 31, 91, 0.40), 
      0 0 0 1px #0366FF;

    text-align: center;
    color: #FFF;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.13px;

    transition: --button-accent-overlay 150ms ease-out, --button-accent-gradient-from 150ms ease-out, --button-accent-gradient-to 150ms ease-out, box-shadow 100ms ease-out;

    cursor: pointer;
  }

  .button-accent:hover {
    --button-accent-overlay: rgba(255, 255, 255, 0.10);
    box-shadow: 
      0 1px 0.5px 0 rgba(255, 255, 255, 0.13) inset, 
      0 1px 1px 0 rgba(17, 31, 91, 0.40), 
      0 2px 4px -2px rgba(17, 31, 91, 0.50), 
      0 1px 5px -2px rgba(17, 31, 91, 0.60), 
      0 0 0 1px #0366FF;
  }

  .button-accent:active {
    --button-accent-overlay: rgba(0, 0, 0, 0.05);
    --button-accent-gradient-from: #055EFE;
    --button-accent-gradient-to: #055EFE;
    box-shadow: 
      0 1px 0.5px 0 rgba(255, 255, 255, 0) inset, 
      0 1px 1px 0 rgba(17, 31, 91, 0), 
      0 2px 4px -2px rgba(17, 31, 91, 0), 
      0 1px 5px -2px rgba(17, 31, 91, 0.40), 
      0 0 0 1px #0058F9;
  }

  .button-accent:focus-visible {
    outline: 2px solid #0060FF;
    outline-offset: 2px;
  }


  .button-primary {
    padding: 6px 12px;

    display: inline-flex;
    align-items: center;
    column-gap: 8px;

    border-radius: 10px;
    background: #FFF;
    box-shadow: 
      0 2px 4px -2px rgba(0, 0, 0, 0.20), 
      0 0 0 1px rgba(38, 38, 43, 0.08);

    text-align: center;
    color: #26262B;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.13px;

    transition: background 150ms ease-out, box-shadow 150ms ease-out;
  }

  .button-primary:hover {
    box-shadow: 
      0 2px 6px -2px rgba(0, 0, 0, 0.32), 
      0 0 0 1px rgba(38, 38, 43, 0.08);
  }

  .button-primary:active {
    background:#F7F7F8;
    box-shadow: 
      0 2px 6px -2px rgba(0, 0, 0, 0),
      0 0 0 1px rgba(38, 38, 43, 0.08);
  }

  .button-primary:focus-visible {
    outline: 2px solid #5E5F6D;
    outline-offset: 2px;
  }


  .button-secondary {
    padding: 6px 12px;

    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 0 0 1px rgba(38, 38, 43, 0.10);

    text-align: center;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.13px;

    transition: background 150ms ease-out, color 150ms ease-out;
  }

  .button-secondary:hover {
    background: #f7f7f8;
  }

  .button-secondary:active {
    color: #4D4E58;
  }

  .button-secondary:focus-visible {
    outline: 2px solid #5E5F6D;
    outline-offset: 2px;
  }
}
@layer components {
  .case-study-prose {
    @apply text-ag-gray-700 text-sm/6 -tracking-[0.14px];
  }

  .case-study-prose > *:not(:first-child) {
    @apply mt-6;
  }

  .case-study-prose > *:not(:last-child) {
    @apply mb-6;
  }

  .case-study-prose strong {
    @apply text-ag-gray-950 font-medium;
  }

  .case-study-prose ul {
    @apply pl-[36px] flex flex-col gap-y-4;
  }

  .case-study-prose li {
    @apply relative;
  }

  .case-study-prose li::before {
    @apply content-[""] block absolute top-2.5 -left-5 size-1 bg-ag-gray-700;
  }

  /* Hero */
  .case-study-hero {
    container-type: size;
    aspect-ratio: var(--columns)/4;
  }

  @container (min-width: 0) {
    .case-study-hero-logo-wrapper {
      --size: calc(round(up, 100% - 100cqw / var(--columns), 200cqw / var(--columns)) + 100cqw / var(--columns) - 2px);
      width: var(--size);
      margin-left: calc((100% - var(--size)) / 2);

      height: calc(50cqh - 1px);
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

@font-face {
  font-family: 'ABC Diatype';
  src: url(/assets/ABCDiatype-Regular-Trial-1c91dc94d86114bd42dfb0d781de489bc16436adbdf0510dbbd5b8d09a8ddea0.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ABC Diatype';
  src: url(/assets/ABCDiatype-Medium-Trial-0e64ffeddfac3ae294f1814fe1179d55bb3ac496111aca5b1f8af39e5e0d4731.woff2) format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@layer components {
  @keyframes guides-subscribe-cross-in {
    0% {
      translate: 0px;
    }

    12.5% {
      translate: -1.5px;
    }

    25% {
      translate: 1.5px;
    }

    37.5% {
      translate: -2px;
    }

    50% {
      translate: 2px;
    }

    62.5% {
      translate: -2px;
    }

    75% {
      translate: 1.5px;
    }

    87.5% {
      translate: -1.5px;
    }

    100% {
      translate: 0px;
    }
  }

  .guides-subscribe-cross-in {
    animation: guides-subscribe-cross-in 0.75s 0.2s ease-out;
  }

  .guides-prose {
    @apply text-ag-gray-700 text-sm/6 -tracking-[0.14px];
  }

  .guides-prose h3 {
    @apply text-ag-gray-700 text-sm/6 font-medium tracking-[-0.14px];
  }

  .guides-prose h3:not(:first-child) {
    @apply mt-6;
  }

  .guides-prose h3:not(:last-child) {
    @apply mb-2;
  }
}

.home-logo-container {
  perspective: 500px;
  width: 120px;
  height: 32px;
}

.home-logo-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateCube 18s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.home-logo-face {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  background: white;
}

.home-logo-face:nth-child(1) {
  transform: rotateX(0deg) translateZ(16px);
  animation: faceFade1 18s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.home-logo-face:nth-child(2) {
  transform: rotateX(-90deg) translateZ(16px);
  animation: faceFade2 18s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.home-logo-face:nth-child(3) {
  transform: rotateX(-180deg) translateZ(16px);
  animation: faceFade3 18s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.home-logo-face:nth-child(4) {
  transform: rotateX(-270deg) translateZ(16px);
  animation: faceFade4 18s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes rotateCube {
  0%, 21% {
    transform: rotateX(0deg);
  }
  25%, 46% {
    transform: rotateX(90deg);
  }
  50%, 71% {
    transform: rotateX(180deg);
  }
  75%, 96% {
    transform: rotateX(270deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

@keyframes faceFade1 {
  0%, 21% { opacity: 1; }
  25%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes faceFade2 {
  0%, 21% { opacity: 0; }
  25%, 46% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes faceFade3 {
  0%, 46% { opacity: 0; }
  50%, 71% { opacity: 1; }
  75%, 100% { opacity: 0; }
}

@keyframes faceFade4 {
  0%, 71% { opacity: 0; }
  75%, 96% { opacity: 1; }
  100% { opacity: 0; }
}

@layer components {
  .integrations-details {
    border: 1px solid red;
  }

  .integrations-details::details-content {
    content-visibility: visible;
    background: red;
    transition: all 2000ms ease-out;
  }

  .integrations-details > div {
    display: grid;
    height: 100%;
    grid-template-rows: 0fr;
    transition: all 2000ms ease-out;
    background: yellow;
  }

  .integrations-details[open] > div {
    grid-template-rows: 1fr;
  }

  .integrations-details > div > div {
    overflow: hidden;
    transition: all 2000ms ease-out;
    background-color: aquamarine;
  }
}
@layer components {
  .legal-prose {
    @apply text-ag-gray-700 text-sm/6 tracking-[-0.14px]
  }


  .legal-prose h2 {
    @apply  text-ag-gray-950 font-display font-medium text-[18px]/6 tracking-[-0.27px];
  }

  .legal-prose h2:not(:first-child) {
    @apply mt-10;
  }

  .legal-prose h2:not(:last-child) {
    @apply mb-3;
  }

  @media (min-width: theme('screens.md')) {
    .legal-prose h2 {
      @apply text-[24px]/[32px] tracking-[-0.36px];
    }
  
    .legal-prose h2:not(:first-child) {
      @apply mt-12;
    }
  
    .legal-prose h2:not(:last-child) {
      @apply mb-4;
    }
  }

  .legal-prose h3 {
    @apply text-ag-gray-950 font-semibold text-sm/6 tracking-[-0.14px];
  }

  .legal-prose h3:not(:first-child) {
    @apply mt-3;
  }

  .legal-prose h3:not(:last-child) {
    @apply mb-2;
  }

  @media (min-width: theme('screens.md')) {
    .legal-prose h3 {
      @apply text-[15px]/[24px] tracking-[-0.03px];
    }

    .legal-prose h3:not(:first-child) {
      @apply mt-6;
    }

    .legal-prose h3:not(:last-child) {
      @apply mb-2;
    }
  }


  .legal-prose p:not(:first-child) {
    @apply mt-2;
  }

  .legal-prose p:not(:last-child) {
    @apply mb-2;
  }

  .legal-prose p + p:not(:first-child) {
    @apply mt-6;
  }


  .legal-prose a {
    @apply font-medium underline decoration-ag-gray-200 underline-offset-2 [text-decoration-thickness:10%];
  }
  

  .legal-prose ul {
    @apply pl-[21px];
  }

  .legal-prose li {
    @apply relative;
  }

  .legal-prose li:before {
    @apply absolute right-[calc(100%+8px)] top-[10.5px] content-[""] size-[4.5px] bg-ag-gray-700 rounded-full;
  }
}
@layer components {
  .pricing-number {
    padding-inline: 12px;
    padding-block: 6px;
    border-radius: 10px;
    border: none;
    background: #FFF;
    box-shadow: 0 2px 4px -2px rgba(38, 38, 43, 0.16), 0 0 0 1px rgba(38, 38, 43, 0.10);
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.13px;
  }

  .pricing-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
  }

  .pricing-slider:focus {
    outline: none;
  }

  .pricing-slider::-webkit-slider-runnable-track {
    background-color: #EEEEF0;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(38, 38, 43, 0.10);
    height: 36px;  
  }

  .pricing-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 2px 4px -2px rgba(38, 38, 43, 0.16), 0 0 0 1px rgba(38, 38, 43, 0.10);
    width: 32px;
    height: 36px;
  }

  .pricing-slider:focus::-webkit-slider-thumb {  
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 0 5px 0 rgba(50, 117, 255, 0.70), 0 2px 12px -4px rgba(38, 38, 43, 0.16), 0 0 0 1.5px #3275FF;
  }

  /******** Firefox styles ********/
  .pricing-slider::-moz-range-track {
    background-color: #EEEEF0;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(38, 38, 43, 0.10);
    height: 36px; 
  }

  .pricing-slider::-moz-range-thumb {
    border: none;
    border-radius: 0;

    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 2px 4px -2px rgba(38, 38, 43, 0.16), 0 0 0 1px rgba(38, 38, 43, 0.10);
    width: 32px;
    height: 36px;
  }

  .pricing-slider:focus::-moz-range-thumb {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 0 5px 0 rgba(50, 117, 255, 0.70), 0 2px 12px -4px rgba(38, 38, 43, 0.16), 0 0 0 1.5px #3275FF;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 *= require fonts