@charset "UTF-8";
/* Rework of https://antigravity.google/ using modern CSS */
/* See https://brm.us/antigravity for details */
@layer reset, tokens, base, components, layout, moderncss, util;
@layer moderncss {
  @layer layout {
    @layer developers {
      #developers .carousel .developer img {
        height: 400px;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover; /* use contain if you don't want cropping */
        display: block;
      }
      /* Optional: keep the figure from stretching taller than the image */
      #developers .carousel .developer figure {
        align-items: stretch;
      }
      #developers .carousel .developer figure {
        position: relative;
      }
      #developers .carousel .developer figure > figcaption {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        text-align: center;
      }
    }
    /* Draw a particles ring in the background of the welcome screen */
    /* I am using Houdini PaintWorklets for this */
    @layer ring-particles {
      @supports (background: paint(something)) {
        @layer particles {
          #welcome {
            --ring-radius: 100;
            --ring-thickness: 600;
            --particle-count: 80;
            --particle-rows: 25;
            --particle-size: 2;
            --particle-color: navy;
            --particle-min-alpha: 0.1;
            --particle-max-alpha: 1.0;
            --seed: 200;
            background-image: paint(ring-particles);
          }
          #welcome p {
            margin-bottom: 0.5rem;
          }
        }
        @layer animation {
          @property --animation-tick {
            syntax: "<number>";
            inherits: false;
            initial-value: 0;
          }
          @property --ring-radius {
            syntax: "<number> | auto";
            inherits: false;
            initial-value: auto;
          }
          @keyframes ripple {
            0% {
              --animation-tick: 0;
            }
            100% {
              --animation-tick: 1;
            }
          }
          @keyframes ring {
            0% {
              --ring-radius: 150;
            }
            100% {
              --ring-radius: 250;
            }
          }
          #welcome {
            animation: ripple 6s linear infinite, ring 6s ease-in-out infinite alternate;
          }
        }
        @layer follow-mouse {
          @property --ring-x {
            syntax: "<number>";
            inherits: false;
            initial-value: 50;
          }
          @property --ring-y {
            syntax: "<number>";
            inherits: false;
            initial-value: 50;
          }
          @property --ring-interactive {
            syntax: "<number>";
            inherits: false;
            initial-value: 0;
          }
          #welcome {
            /* @NOTE: Requires JS until the CSSWG resolves on https://github.com/w3c/csswg-drafts/issues/6733 */
            transition: --ring-x 3s ease, --ring-y 3s ease;
            /* @NOTE: This still feels uncanny, so I’m disabling it for now. It could be solved by having something like an animation-speed available. */
            /* transition-duration: if(
            	style(--ring-interactive: 1): 0.25s;
            	else: 3s;
            ); */
          }
        }
      }
    }
    /* Draw some dynamic noise behind some of the screens */
    /* I am using Houdini PaintWorklets for this */
    @layer speckled-backgrounds {
      @supports (background: paint(something)) {
        #beforeyougo .card,
        #who > div {
          --extra-confettiNumber: 250;
          --extra-confettiLengthVariance: 1;
          --extra-confettiWeightVariance: 1;
          background-image: paint(extra-confetti);
        }
      }
    }
    @layer product {
      /* @TODO: Move `container-type: inline-size` for centered sticky using cqi to here, as that is modern CSS */
    }
  }
  @layer components {
    @layer button {
      /* Buttons in .dark containers have inverted colors */
      @scope (.dark) {
        button {
          color: var(--theme-surface-on-surface);
          background: var(--theme-primary-on-primary);
          border: 1px solid var(--theme-outline-variant);
        }
        button:hover, button:focus-visible {
          background: var(--theme-button-secondary-hover);
        }
        button.secondary {
          color: var(--theme-surface-surface);
          background: var(--theme-nav-button-hover);
        }
        button.secondary:hover, button.secondary:focus-visible {
          background: var(--theme-button-secondary-inverse-hover);
        }
      }
    }
    @layer navbar {
      /* Anchor the mobile nav underneath the header */
      @layer mobile {
        @media (width < 930px) {
          header {
            anchor-name: --header;
          }
          header nav {
            position: fixed;
            inset: auto;
            top: 0; /* Undo non-modern-CSS styling */
            position-anchor: --header;
            position-area: bottom;
            justify-self: stretch;
            align-self: stretch;
          }
        }
      }
      /* Animate-in the nav on mobile when showing */
      @layer mobile {
        @media (width < 930px) {
          header nav {
            transition: opacity 0.15s ease-in;
          }
          @starting-style {
            header nav {
              opacity: 0;
            }
          }
        }
      }
      /* Don’t scroll page when menu is open */
      @media (width < 930px) {
        header:has(.menu-checkbox:checked), header:has(.menu-checkbox:checked) nav {
          overflow: auto;
          overscroll-behavior: contain;
        }
      }
      /* Hidey bar – http://brm.us/hidey-bar-2 */
      @layer hidey-bar {
        html {
          container-type: scroll-state;
        }
        .header-wrapper:not(.header-wrapper:has(.menu-checkbox:checked)) {
          transition: translate 0.25s;
          translate: 0 0;
        }
        @container scroll-state(scrolled: bottom) {
          .header-wrapper:not(.header-wrapper:has(.menu-checkbox:checked)) {
            translate: 0 -100%;
          }
        }
      }
    }
    @layer carousel {
      @layer scroll-snapping {
        @layer base-setup {
          @supports (scroll-padding-inline: 3rem) {
            .carousel {
              scroll-padding-inline: 3rem;
              scroll-snap-type: x mandatory;
              /* @NOTE: On the orignal page the last item also snaps to the left */
              /* To get this working, I’d manually add some padding to the right */
              /* Defining that “some” is tricky and requires manual calculation */
              /* Here I am calculating 40vi (because the entries are 60vi) minus gap */
              /* So maybe we should have `auto` on scroll-padding do something? */
            }
            .carousel > * {
              scroll-snap-align: start;
            }
            @media (width >= 930px) {
              .carousel {
                padding-inline: 3rem calc(40vi - 3rem);
              }
            }
          }
        }
        @layer snapped-effects {
          /* @note: The typewriter effect is done with scroll-triggered animations, but could as well be done with snapped state queries */
          .carousel > * {
            container-type: scroll-state;
          }
          @supports (container-type: scroll-state) {
            .carousel > * {
              /* The images */
              /* The bylines */
            }
            .carousel > * > figure {
              opacity: 0.25;
              transition: opacity 0.5s ease;
            }
            @container scroll-state(snapped: x) {
              .carousel > * > figure {
                opacity: 1;
              }
            }
            .carousel > * > *:not(figure) {
              transition: opacity 0.5s ease, translate 0.5s ease;
              transition-delay: 0s;
              opacity: 0;
              translate: 0 calc(0.5rem * (sibling-index() - 1)) 0;
            }
            @container scroll-state(snapped: x) {
              .carousel > * > *:not(figure) {
                transition-delay: 0.2s; /* NOTE: It feels like CSS snapped is triggering while it’s still scrolling, so we delay it a bit */
                opacity: 1;
                translate: 0 0 0;
              }
            }
          }
        }
      }
      @layer niceties {
        .carousel {
          scrollbar-width: none;
          overscroll-behavior-x: contain;
        }
      }
      @layer scroll-buttons {
        /* @note: https://chrome.dev/carousel-configurator/ really helps here */
        .carousel {
          position: relative;
          scroll-behavior: smooth;
          anchor-name: --carousel;
          /* @note: We currently can’t nest this inside `&::scroll-button(*)` because of how CSS Nesting works */
          /* @note: We deviate from the antigravity site here, because CSS carousel does not offer a wrapper around both scroll buttons … */
        }
        .carousel::scroll-button(*) {
          position: fixed;
          position-anchor: --carousel;
          position-visibility: always;
          font-family: "Material Symbols Outlined";
          color: var(--theme-surface-on-surface);
          background: var(--theme-tonal-tonal);
          border: none;
          block-size: 2em;
          font-size: 1.3em;
          inline-size: 2.5em;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border-radius: 999px;
          transition: opacity 0.25s ease;
        }
        .carousel::scroll-button(*):hover {
          background: #eff0f3;
        }
        .carousel::scroll-button(*):disabled {
          cursor: not-allowed;
          opacity: 0.25;
        }
        .carousel::scroll-button(left) {
          translate: -50% 0;
          content: "arrow_back"/"Previous";
        }
        .carousel::scroll-button(right) {
          translate: 50% 0;
          content: "arrow_forward"/"Next";
        }
        @media (width < 930px) {
          .carousel::scroll-button(left), .carousel::scroll-button(right) {
            position-area: center center;
            align-self: end;
          }
        }
        @media (width >= 930px) {
          .carousel::scroll-button(left), .carousel::scroll-button(right) {
            position-area: center center;
            align-self: start;
            justify-self: start;
            /* Magic numbers … these rely on the flex-basis of the slides + the aspect-ratio of the photos. Nasty, but it works. */
            left: calc(60vi - 1em);
            top: calc((60vi + 1em) * 9 / 16);
          }
        }
      }
    }
  }
  @layer animations {
    @layer revealing-welcome-items {
      #welcome svg, #welcome .cta {
        transition: translate 0.5s ease, opacity 0.5s ease;
      }
      @starting-style {
        #welcome svg, #welcome .cta {
          translate: 0 50% 0;
          opacity: 0;
        }
      }
    }
    @layer scroll-triggered-typewriter-effect {
      @supports (timeline-trigger-name: --t) {
        /* @ref https://codepen.io/bramus/pen/JjwxLNM */
        @keyframes blink {
          from {
            opacity: 0;
          }
        }
        @keyframes text {
          from {
            background-size: 0;
          }
        }
        /* Typewriter effect */
        .typewriter {
          background: linear-gradient(90deg, var(--typewriter-text-color, var(--theme-surface-on-surface)) 0 0) 0/calc(var(--n, 100) * 1ch) no-repeat transparent;
          -webkit-background-clip: text;
          color: transparent;
          animation: text 2s ease-in both;
        }
        .typewriter::after {
          content: "|";
          --hdr-gradient: linear-gradient(
          	in oklch,
          	oklch(80% .3 34),
          	oklch(90% .3 200)
          );
          --sdr-gradient: linear-gradient(#ff4700, #0ff);
          background: var(--hdr-gradient);
          -webkit-background-clip: text;
                  background-clip: text;
          color: transparent;
          /* The delay is manually calculated to make the animation only start after the typewriter itself has finished */
          animation: blink 0.2s 1.4s ease infinite alternate both;
        }
        /* Typewriter Trigger in product section */
        #product *:has(> .typewriter) {
          timeline-trigger: --t view() cover 30% cover 1000%;
          trigger-scope: --t;
        }
        #product *:has(> .typewriter) .typewriter {
          animation-trigger: --t play-once;
        }
        #product *:has(> .typewriter) .typewriter::after {
          animation-trigger: --t play-once;
          animation-delay: 1.6s;
        }
        /* Typewriter Trigger in Carousel */
        .carousel > * {
          timeline-trigger: --t view(inline) entry 90% exit 50%;
          trigger-scope: --t;
        }
        .carousel > * .typewriter {
          --typewriter-text-color: white;
          animation-trigger: --t play-forwards reset;
          animation-duration: 1.5s;
        }
        .carousel > * .typewriter::after {
          animation-trigger: --t play-forwards reset;
          animation-delay: 0.9s;
        }
        /* Typewriter Trigger in Before You Go */
        #beforeyougo > .card {
          timeline-trigger: --t view() cover 30% cover 1000%;
          trigger-scope: --t;
        }
        #beforeyougo > .card .typewriter {
          --typewriter-text-color: white;
          animation-trigger: --t play-once;
          animation-duration: 2s;
        }
        #beforeyougo > .card .typewriter::after {
          animation-trigger: --t play-once;
          animation-delay: 1s;
        }
      }
    }
    @layer moving-icons {
      @layer slide-in {
        @keyframes slide-in {
          from {
            translate: 100% 0 0;
          }
        }
        #product .icons {
          timeline-trigger: --t view() cover 30% cover 1000%;
          trigger-scope: --t;
          animation: slide-in 1s ease both;
          animation-trigger: --t play-once;
        }
      }
      @layer wobble {
        @keyframes wobble {
          from {
            translate: 0 75%;
          }
          to {
            translate: 0 -75%;
          }
        }
        #product .icon {
          /* @NOTE: If we had support for random(), we could even randomize the animation distance per element */
          animation: wobble 4s ease infinite alternate;
          animation-delay: calc(mod(sibling-index(), 5) * -1s);
        }
      }
    }
    @layer product-features {
      /* Scroll-triggered fading of the text + images */
      @supports (timeline-trigger-name: --t) {
        @keyframes fade-a-bit {
          from {
            opacity: 0.3;
          }
          to {
            opacity: 1;
          }
        }
        @keyframes fake-clip-it {
          to {
            scale: 100% 0%;
          }
        }
        @keyframes fade-in {
          from {
            opacity: 0;
          }
        }
        @media (width >= 930px) {
          #features .feature {
            timeline-trigger: --t view() entry 100% cover 50%;
            trigger-scope: --t;
          }
          #features .feature h3 {
            animation: fade-a-bit 500ms ease both;
            animation-trigger: --t play-forwards play-backwards;
          }
          #features .feature p {
            position: relative;
          }
          #features .feature p::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            transform-origin: 0 100%;
            background: white;
            animation: fake-clip-it 500ms ease both;
            animation-trigger: --t play-forwards play-backwards;
          }
          #features .feature .img-wrapper {
            animation: fade-in 200ms ease both;
            animation-trigger: --t play-forwards play-backwards; /* TODO: Don’t fade out the underlying ones */
          }
        }
      }
      @supports (animation-timeline: view()) {
        @keyframes feature-image {
          0%, 20% {
            opacity: 0;
          }
          35%, 65% {
            opacity: 1;
          }
          80%, 100% {
            opacity: 0;
          }
        }
        @media (width >= 930px) {
          #features .feature {
            view-timeline-name: --feature;
            view-timeline-axis: block;
          }
          #features .feature .img-wrapper {
            animation: feature-image 1s linear both;
            animation-timeline: --feature;
            animation-range: entry 0% exit 100%;
          }
        }
      }
      /* @TODO: Scroll-Driven unclipping of the image-wrapper (on the first image) */
    }
    @layer scroll-driven-animations {
      /* @note: We also check for range support. See https://brm.us/sda-feature-detection for details */
      @supports (animation-timeline: scroll()) and (animation-range: 0% 100%) {
        @keyframes scale-up {
          from {
            scale: 0.85;
          }
        }
        #beforeyougo .card {
          animation: scale-up linear both;
          animation-timeline: view();
          animation-range: entry 50% entry 100%;
        }
      }
    }
  }
}
@layer components {
  @layer button {
    button {
      background: var(--theme-primary-primary);
      color: var(--theme-primary-on-primary);
      border: 0px;
      border-radius: 999px;
      padding: 0.6em 1.5em;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.9em;
      cursor: pointer;
      transition: 0.15s background ease-out;
    }
    button:hover, button:focus-visible {
      background: var(--theme-button-states-primary-hovered);
    }
    button:has(span + .material-symbols-outlined) {
      padding-inline-end: 1em;
    }
    button:has(.material-symbols-outlined + span) {
      padding-inline-start: 1em;
    }
    button.secondary {
      color: var(--theme-surface-on-surface);
      background: var(--theme-secondary-button);
      border: 1px solid var(--theme-outline-variant);
    }
    button.secondary:hover, button.secondary:focus-visible {
      background: var(--theme-button-secondary-hover);
    }
  }
  @layer navbar {
    @layer shared {
      nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .menu-checkbox {
        display: none;
      }
      nav a {
        color: var(--theme-surface-on-surface);
        transition: 0.15s color ease-out, 0.15s background ease-out;
        text-decoration: none;
      }
      nav a:hover, nav a:focus-visible {
        color: #000;
        background: var(--theme-button-states-hovered);
      }
    }
    @layer mobile {
      @media (width < 930px) {
        .menu-button {
          cursor: pointer;
          width: 3.5em;
          border-radius: 999px;
          text-align: center;
          place-content: center;
          transition: 0.15s background ease-out;
        }
        .menu-button:hover, .menu-button:focus-visible {
          background: var(--theme-button-states-hovered);
        }
        nav {
          display: none;
        }
        nav li {
          font-size: 1.85em;
          font-weight: 350;
          border-bottom: 1px solid var(--theme-surface-surface-container-higher);
        }
        nav li:first-child {
          border-top: 1px solid var(--theme-surface-surface-container-higher);
        }
        nav a {
          display: block;
          padding-inline: 3rem;
          padding-block: 1.5rem;
        }
        /* When the menu toggle is checked */
        .menu-checkbox:checked {
          /* Show the nav */
          /* Show the proper icon in the button */
          /* Colorize the button differently */
        }
        .menu-checkbox:checked ~ nav {
          position: fixed;
          inset: 0;
          top: 2.75em; /* This is a guess for how tall the topbar is */
          display: block;
          background: var(--palette-grey-0);
        }
        .menu-checkbox:checked ~ .menu-button [data-show-when=closed] {
          display: none !important;
        }
        .menu-checkbox:checked ~ .menu-button {
          background: var(--theme-primary-primary);
          color: var(--theme-primary-on-primary);
        }
        .menu-checkbox:checked ~ .menu-button:hover, .menu-checkbox:checked ~ .menu-button:focus-visible {
          background: var(--theme-button-states-primary-hovered);
        }
        /* When the menu toggle is not checked */
        .menu-checkbox:not(:checked) {
          /* Show the proper icon in the button */
        }
        .menu-checkbox:not(:checked) ~ .menu-button [data-show-when=open] {
          display: none !important;
        }
        /* Hide the download button */
        header button {
          display: none;
        }
      }
    }
    /* Large Menu */
    @layer large {
      @media (width >= 930px) {
        nav ul {
          display: flex;
          flex-direction: row;
          gap: 0.2rem;
          align-self: flex-start;
        }
        nav a {
          padding: 0.6em 1.2em;
          border-radius: 999px;
          color: var(--theme-surface-on-surface-variant);
          white-space: nowrap;
        }
        nav a:hover, nav a:focus-visible {
          color: #000;
          background: var(--theme-nav-button-hover);
        }
        .menu-button {
          display: none;
        }
      }
    }
  }
  @layer card {
    .card {
      border-radius: 2em;
    }
    .card.dark {
      background: var(--theme-primary-primary);
      color: var(--theme-surface-surface);
    }
  }
}
@layer layout {
  @layer grid {
    body {
      margin: 0;
      display: grid;
      grid-template-columns: [fullbleed-start] 3rem [main-start] 1fr [main-end] 3rem [fullbleed-end];
      grid-auto-rows: min-content;
    }
    body > * {
      grid-column: fullbleed;
    }
  }
  @layer navigation {
    .header-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: var(--theme-surface-surface);
      z-index: 1;
    }
    header {
      display: flex;
      flex-direction: row;
      gap: 2rem;
      align-items: center;
      padding-inline: 3rem; /* @TODO: Figure out if we can subgrid for this */
      padding-block: 0.5rem;
    }
    header button,
    header .menu-button {
      margin-left: auto;
    }
  }
  @layer welcome {
    #welcome h1 svg {
      height: 1em;
      width: auto;
      display: block;
      margin: 0 auto;
    }
    #welcome p {
      font-size: 4.5em;
      text-align: center;
      font-weight: 500;
      color: var(--theme-surface-on-surface);
    }
    #welcome p span {
      display: block;
      font-size: 0.7em;
      color: var(--theme-surface-on-surface-variant);
    }
    #welcome .welcome-subline {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 3rem;
      margin-bottom: 3rem;
    }
    #welcome .cta {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.3em;
      justify-content: center;
      width: 90%;
      margin: 0 auto;
    }
    #welcome .cta button {
      font-size: 1.15em;
    }
  }
  @layer video {
    #video {
      padding: 0 1em;
    }
    #video iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
      max-height: 75vh;
      border-radius: 2em;
      overflow: clip;
    }
  }
  @layer product {
    #product {
      margin-top: 4rem;
      display: grid;
      grid-template-columns: subgrid;
    }
    #product > *:not(.icons) {
      grid-column: main;
    }
    #product .icons {
      grid-column: fullbleed;
    }
    #product .icons {
      height: max(24em, 40vb);
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      align-items: center;
      overflow-x: clip;
    }
    #product .icons .icon {
      flex: 0 0 clamp(4rem, 10vw, 6rem);
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(183, 191, 217, 0.0901960784);
      border: 1px solid var(--theme-outline-variant);
      -webkit-backdrop-filter: blur(5px);
              backdrop-filter: blur(5px);
      display: grid;
      place-content: center;
    }
    #product .icons .icon span {
      font-size: 2em !important;
    }
    #features {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: auto;
      gap: 2rem;
    }
    #features .feature {
      padding-bottom: 2rem; /* @note: if only we had `gap: x y;` */
    }
    #features .feature h3 {
      font-weight: 350;
      font-size: 1.25em;
      line-height: 1.1;
      margin-block-end: 1rem;
    }
    #features .feature img {
      border-radius: 2em;
    }
    #features .feature p {
      font-weight: 300;
      line-height: 1.2;
      color: var(--theme-surface-on-surface-variant);
    }
    #features .feature-img--spaced {
      margin-top: 10rem;
    }
    @media (width >= 930px) {
      #features {
        position: relative;
      }
      #features .img-wrapper {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        container-type: inline-size;
        opacity: 0;
        transition: opacity 200ms ease;
      }
      #features .feature:first-child .img-wrapper {
        opacity: 1;
      }
      #features img {
        position: sticky;
        width: 100cqi;
        height: auto;
        top: calc((100svb - 100cqi) / 2);
      }
      #features .feature {
        padding-block: 15vb;
        grid-column: 1;
        display: grid;
        place-content: center;
      }
      #features .feature p {
        width: 60%;
        max-width: 60ch;
        text-wrap: pretty;
      }
    }
  }
  @layer developers {
    #developers {
      width: 100%;
      border-top: 1px solid var(--theme-outline-variant);
      margin-top: 2em;
      padding-top: 2em;
      height: 200px;
      display: grid;
      grid-template-columns: subgrid;
    }
    #developers > *:not(.carousel) {
      grid-column: main;
    }
    #developers .intro {
      color: var(--theme-surface-on-surface-variant);
      font-size: 1.1em;
      line-height: 1.2;
      font-weight: 320;
      padding: 0.5rem 0;
    }
    @media (width >= 930px) {
      #developers .intro {
        width: calc(30vw - 1.5rem); /* TODO: This magic value is not entirely 100% accurate. Maybe if we used a cols layout throughout the site it would work nicely */
        margin-left: auto;
      }
    }
    #developers .carousel {
      grid-column: fullbleed;
      padding-inline: 3rem;
      width: 100%;
      overflow-x: scroll;
      display: flex;
      gap: 2rem;
    }
    #developers .carousel .developer {
      flex: 0 0 100%;
      overflow: clip;
    }
    @media (width >= 930px) {
      #developers .carousel .developer {
        flex-basis: 60vi;
      }
    }
    #developers .carousel .developer figure {
      display: grid;
      place-items: center;
    }
    #developers .carousel .developer figure > * {
      grid-area: 1/1;
    }
    #developers .carousel .developer figure figcaption {
      color: white;
      font-size: 2em;
    }
    #developers .carousel .developer img {
      border-radius: 2em;
    }
    #developers .carousel .developer h3 {
      font-weight: 350;
      font-size: 1.25em;
      line-height: 1.1;
      margin-block-end: 0.5rem;
    }
    #developers .carousel .developer p {
      width: 40%;
      text-wrap: pretty;
      color: var(--theme-surface-on-surface-variant);
      letter-spacing: 0.05rem;
      font-weight: 300;
    }
    #developers .carousel .developer a {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.25em;
      color: var(--theme-surface-on-surface-variant);
      text-decoration: none;
      font-weight: 300;
      transition: gap 0.15s ease-in;
    }
    #developers .carousel .developer a:hover, #developers .carousel .developer a:focus-visible {
      gap: 0.5em;
    }
    #developers .carousel .developer a::after {
      font-family: "Material Symbols Outlined";
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: "liga";
      -webkit-font-smoothing: antialiased;
      content: "\f46a";
    }
  }
  @layer who {
    #who {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    @media (width >= 930px) {
      #who {
        flex-direction: row;
        justify-content: space-around;
      }
    }
    #who > div {
      height: 40vh;
      display: grid;
      place-content: center;
      gap: 1em;
    }
    @media (width >= 930px) {
      #who > div {
        height: 80vh;
      }
    }
    #who h3 {
      font-weight: 400;
      font-size: 1.75em;
      line-height: 1.1;
    }
    @media (width >= 930px) {
      #who h3 {
        font-size: 2.5em;
      }
    }
    #who h3 span {
      color: var(--theme-surface-on-surface-variant);
    }
    #who button {
      font-size: 1.15em;
      justify-self: center;
    }
  }
  @layer pricing {
    #pricing {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    @media (width >= 930px) {
      #pricing {
        flex-direction: row;
        justify-content: space-around;
      }
    }
    #pricing > div {
      height: 40vh;
      display: grid;
      place-content: center;
      gap: 1em;
    }
    @media (width >= 930px) {
      #pricing > div {
        height: 80vh;
      }
    }
    #pricing h3 {
      font-weight: 400;
      font-size: 1.75em;
      line-height: 1.1;
    }
    @media (width >= 930px) {
      #pricing h3 {
        font-size: 2.5em;
      }
    }
    #pricing h3 span {
      color: var(--theme-surface-on-surface-variant);
    }
    #pricing button {
      font-size: 1.15em;
      justify-self: center;
    }
  }
  @layer beforeyougo {
    #beforeyougo {
      display: grid;
      grid-template-columns: subgrid;
      height: -moz-min-content;
      height: min-content;
    }
    #beforeyougo > * {
      grid-column: main;
    }
    #beforeyougo .card {
      width: 100%;
      height: auto;
      aspect-ratio: 4/3;
      max-height: 80vh;
      display: grid;
      padding: 4em;
      gap: 1rem;
      align-content: center;
    }
    #beforeyougo p {
      font-size: 2em;
      text-wrap: pretty;
      margin: 0;
      max-width: 20ch;
    }
    @media (width > 930px) {
      #beforeyougo p {
        font-size: 3em;
      }
    }
    #beforeyougo .buttons {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      font-size: 1.2em;
      align-items: start;
    }
    @media (width > 930px) {
      #beforeyougo .buttons {
        flex-direction: row;
      }
    }
  }
}
@layer base {
  html {
    background: var(--theme-surface-surface);
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--theme-surface-on-surface);
  }
  section {
    /* Make sections fullheight */
    min-height: 100dvh;
  }
  section.center {
    /* Center their contents */
    place-content: safe center;
    justify-items: center;
  }
  h2 {
    font-size: 2.5em;
    font-weight: 350;
    margin: 0.5rem 0;
    line-height: 1;
  }
  @media (width >= 930px) {
    h2 {
      width: 50%;
      max-width: 25ch;
    }
  }
  p {
    color: var(--theme-surface-on-surface-variant);
  }
  @scope (.dark) {
    p {
      color: var(--theme-surface-surface);
    }
  }
}
@layer reset {
  html, body {
    height: 100%;
  }
  * {
    box-sizing: border-box;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  ul[class] {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
  }
  a:focus-visible,
  button:focus-visible {
    outline-offset: 0.2rem;
  }
  figure {
    margin: 0;
  }
}
@layer util {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}
@layer tokens {
  @layer colors {
    :root {
      --palette-grey-900: #2F3034;
      --palette-grey-800: #45474D;
      --palette-grey-50: #E6EAF0;
      --palette-grey-0: #FFFFFF;
      --palette-grey-1000: #212226;
      --palette-grey-20: #EFF2F7;
      --palette-grey-1200: #121317;
      --palette-grey-1100: #18191D;
      --palette-grey-10: #F8F9FC;
      --palette-grey-100: #E1E6EC;
      --palette-grey-200: #CDD4DC;
      --palette-grey-300: #B2BBC5;
      --palette-grey-400: #B7BFD9;
      --palette-grey-600: #AAB1CC4D;
      --palette-grey-1000-12: #dedfe2;
      --palette-grey-50-20: #414347;
      --palette-grey-15: #F0F1F5;
      --palette-grey-0-rgb: 255, 255, 255;
      --palette-grey-50-rgb: 230, 234, 240;
      --palette-grey-400-rgb: 183, 191, 217;
      --palette-grey-600-rgb: 170, 177, 204;
      --palette-grey-1000-rgb: 33, 34, 38;
      --palette-grey-1200-rgb: 18, 19, 23;
      --theme-surface-surface: var(--palette-grey-0);
      --theme-surface-on-surface: var(--palette-grey-1200);
      --theme-surface-on-surface-variant: var(--palette-grey-800);
      --theme-surface-surface-container: var(--palette-grey-10);
      --theme-surface-surface-container-high: var(--palette-grey-20);
      --theme-surface-surface-container-higher: var(--palette-grey-50);
      --theme-surface-surface-container-highest: var(--palette-grey-100);
      --theme-surface-inverse-surface: var(--palette-grey-1200);
      --theme-surface-inverse-on-surface: var(--palette-grey-10);
      --theme-surface-inverse-on-surface-variant: var(--palette-grey-300);
      --theme-surface-overlay: rgba(var(--palette-grey-0-rgb), .95);
      --theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), .12);
      --theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), .24);
      --theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), .72);
      --theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), .95);
      --theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0);
      --theme-inverse-surface-overlay: rgba(var(--palette-grey-1200-rgb), .01);
      --theme-inverse-surface-overlay-high: rgba(var(--palette-grey-1200-rgb), .24);
      --theme-inverse-surface-overlay-higher: rgba(var(--palette-grey-1200-rgb), .72);
      --theme-inverse-surface-overlay-highest: rgba(var(--palette-grey-1200-rgb), .95);
      --theme-inverse-surface: var(--palette-grey-1200);
      --theme-outline: rgba(var(--palette-grey-1000-rgb), .12);
      --theme-outline-variant: rgba(var(--palette-grey-1000-rgb), .06);
      --theme-inverse-outline: rgba(var(--palette-grey-50-rgb), .12);
      --theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), .06);
      --theme-outline-inverse-outline-variant: rgba(230, 234, 240, .06);
      --theme-outline-outline-variant: rgba(33, 34, 38, .06);
      --theme-primary-primary: var(--theme-surface-on-surface);
      --theme-primary-on-primary: var(--theme-surface-surface);
      --theme-tonal-tonal: var(--theme-surface-surface-container);
      --theme-tonal-on-tonal: var(--theme-surface-on-surface);
      --theme-outlined-outlined: var(--theme-surface-surface-transparent);
      --theme-outlined-on-outlined: var(--theme-surface-on-surface);
      --theme-protected-protected: var(--theme-surface-surface-container);
      --theme-protected-on-protected: var(--theme-surface-on-surface);
      --theme-text-text: var(--theme-surface-surface-transparent);
      --theme-text-on-text: var(--theme-surface-on-surface);
      --theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
      --theme-text-link-states-hovered: var(--palette-grey-1000);
      --theme-text-link-states-focused: var(--palette-grey-1100);
      --theme-text-link-states-pressed: var(--palette-grey-1000);
      --theme-text-link-states-disabled: #6A6A71;
      --theme-button-states-primary-enabled: var(--theme-primary-primary);
      --theme-button-states-primary-disabled: var(--palette-grey-10);
      --theme-button-states-primary-hovered: var(--palette-grey-900);
      --theme-button-states-primary-pressed: rgba(var(--palette-grey-50-rgb), .12);
      --theme-button-states-primary-focused: rgba(var(--palette-grey-50-rgb), .2);
      --theme-button-states-primary-on-disabled: rgba(var(--palette-grey-1000-rgb), .2);
      --theme-secondary-button: rgba(var(--palette-grey-400-rgb), .1);
      --theme-button-secondary-hover: var(--palette-grey-15);
      --theme-button-secondary-inverse-hover: rgba(var(--palette-grey-600-rgb), .3);
      --theme-button-states-tonal-enabled: var(--theme-tonal-tonal);
      --theme-button-states-tonal-disabled: var(--palette-grey-10);
      --theme-button-states-protected-enabled: var(--theme-protected-protected);
      --theme-button-states-protected-hovered: var(--palette-grey-20);
      --theme-button-states-protected-disabled: var(--palette-grey-100);
      --theme-button-states-outlined-enabled: var(--theme-outlined-outlined);
      --theme-button-states-disabled: var(--palette-grey-100);
      --theme-button-states-on-disabled: #6A6A71;
      --theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), .04);
      --theme-button-states-pressed: rgba(var(--palette-grey-1000-rgb), .06);
      --theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), .12);
      --theme-button-states-disabled-transparent: rgba(var(--palette-grey-50-rgb), 0);
      --theme-nav-button: rgba(var(--palette-grey-400-rgb), .09);
      --theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), .2);
      --divider: var(--theme-outline-outline-variant);
    }
  }
  @layer animations {
    :root {
      --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
      --ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
      --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
      --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
      --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
      --ease-in-circ: cubic-bezier(.6, .04, .98, .335);
      --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
      --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
      --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
      --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
      --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
      --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
      --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
      --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
      --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
      --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
      --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
      --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
      --ease-out-back: cubic-bezier(.34, 1.85, .64, 1);
    }
  }
  /* Pricing table: left-align Suit (col 1) + Electrode Set (col 3),
     and add spacing BETWEEN COLUMNS only (no extra row spacing). */
  #pricing .pricing-table {
    border-collapse: separate;
    border-spacing: 18px 0; /* horizontal | vertical */
    text-align: justify;
  }
  #pricing .pricing-table th,
  #pricing .pricing-table td {
    padding: 0; /* no extra padding affecting rows */
    text-align: inherit; /* reset in case global table rules apply */
  }
  /* Force column alignment */
  #pricing .pricing-table th:nth-child(1),
  #pricing .pricing-table td:nth-child(1),
  #pricing .pricing-table th:nth-child(3),
  #pricing .pricing-table td:nth-child(3) {
    text-align: left !important;
  }
  /******/
  /* --- Pricing columns: same top (h3) + same bottom (price span under images) --- */
  #pricing.center {
    display: flex !important;
    align-items: stretch !important;
    gap: 24px;
    text-align: justify;
  }
  #pricing.center > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: auto !important; /* override inline heights */
    min-height: 600px; /* keeps all three columns the same overall height */
  }
  #pricing.center > div > h3 {
    margin: 0 0 12px;
  }
  /* Images: consistent size */
  #pricing.center > div > img {
    width: 300px;
    height: 300px;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  /* Only the price span in the first two columns (it is the last child there) */
  #pricing.center > div > span:last-child {
    margin-top: auto; /* pins price to the bottom */
    display: block;
    padding-top: 12px;
  }
  /* Suit column: reduce “too big” spacing and keep content starting lower (but not huge) */
  #pricing.center > div:nth-child(3) > span {
    margin-top: 0;
  }
  #pricing.center > div:nth-child(3) > table {
    margin-top: 40px;
    margin-bottom: 60px;
  }
  /* --- Table: column spacing (between columns only) + left align Suit & Electrode Set --- */
  #pricing .pricing-table {
    width: 100%;
    text-align: justify;
    border-collapse: separate;
    border-spacing: 18px 0; /* horizontal | vertical */
  }
  #pricing .pricing-table th,
  #pricing .pricing-table td {
    padding: 0; /* no extra row spacing */
    text-align: justify; /* prevent globals from forcing alignment */
  }
  #pricing .pricing-table th:nth-child(1),
  #pricing .pricing-table td:nth-child(1),
  #pricing .pricing-table th:nth-child(3),
  #pricing .pricing-table td:nth-child(3) {
    /*text-align: left !important;*/
    text-align: justify;
  }
  /* Align the separator (— / -) vertically by giving the “name” a fixed tab stop */
  #pricing .pricing-table td.electrode {
    display: grid;
    grid-template-columns: 14ch 1.2ch auto; /* name | dash | rest */
    -moz-column-gap: 0;
         column-gap: 0;
    align-items: baseline;
    white-space: nowrap;
  }
  #pricing .pricing-table td.electrode .e-name {
    justify-self: start;
  }
  #pricing .pricing-table td.electrode .e-sep {
    justify-self: center;
  }
  #pricing .pricing-table td.electrode .e-price {
    justify-self: start;
  }
  /* --- PRICING TABLE: clean alignment + consistent dash “tab stop” --- */
  #pricing .pricing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 18px 0; /* spacing between columns only */
  }
  #pricing .pricing-table th,
  #pricing .pricing-table td {
    padding: 0;
    text-align: left; /* stop justify from breaking alignment */
    white-space: nowrap;
  }
  /* Keep Price column readable */
  #pricing .pricing-table th:nth-child(2),
  #pricing .pricing-table td:nth-child(2) {
    text-align: right;
  }
  /* Electrode Set column: fixed “tab stop” so the dash aligns vertically */
  #pricing .pricing-table td.electrode {
    display: grid;
    grid-template-columns: 9ch 2ch auto; /* price | dash | set name */
    align-items: baseline;
    justify-content: start;
  }
  #pricing .pricing-table td.electrode .e-price {
    justify-self: end;
  }
  #pricing .pricing-table td.electrode .e-sep {
    justify-self: center;
  }
  #pricing .pricing-table td.electrode .e-name {
    justify-self: start;
  }
  /* Center ONLY the "Electrode Set" table heading (3rd column header) */
  #pricing .pricing-table thead th:nth-child(3) {
    text-align: center !important;
  }
  /*
  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  */
  .scrolling-words-container {
    display: inline-flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 600;
  }
  .for-everyone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .scrolling-words-box {
    height: 3rem;
    margin: auto;
    overflow: hidden;
  }
  .scrolling-words-box ul {
    margin: 0 0.625rem;
    padding: 0;
    animation: scrollUp 4s infinite;
  }
  .scrolling-words-box ul li {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 3rem;
    list-style: none;
  }
  @keyframes scrollUp {
    15%, 25% {
      transform: translateY(-20%);
    }
    40%, 50% {
      transform: translateY(-40%);
    }
    65%, 75% {
      transform: translateY(-60%);
    }
    90%, 100% {
      transform: translateY(-80%);
    }
  }
}/*# sourceMappingURL=style.css.map */