/* ==========================================================================
   Competely
   Geometry, type and colour carried over from the published stylesheet.
   Section order: base -> fonts -> tokens -> nav -> hero -> cards -> cta
                  -> cursor -> pop-up -> fluid type -> breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  color: #333;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  display: inline-block;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 38px;
  line-height: 44px;
  font-weight: bold;
}

p { margin-top: 0; margin-bottom: 10px; }

/* Framework classes the markup still carries */
.w-inline-block { max-width: 100%; display: inline-block; }

.w-button {
  display: inline-block;
  padding: 9px 15px;
  color: #fff;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
}

input.w-button { -webkit-appearance: button; }

.w-form { margin: 0 0 15px; }

.w-form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #ddd;
}

.w-form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}

.w-input {
  display: block;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  color: #333;
  font-size: 14px;
  line-height: 1.42857;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
}

.w-input:focus { outline: 0; }

/* --------------------------------------------------------------------------
   2. Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Variable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   3. Tokens
   -------------------------------------------------------------------------- */

/* The Competely palette. The reference this layout came from was a dark page
   with one acid accent; Competely is a warm-white product with one blue, so
   the polarity is inverted here and nowhere else: every rule below still
   reads from these six names, and the geometry, the scroll choreography and
   the colour flip at the CTA are untouched.

   The flip at the end of the page runs to --blue rather than to a tint,
   because that is the one place the brand is allowed to fill the screen. */
:root {
  --bg: #FAF9F6;        /* page canvas, warm white */
  --surface: #FFFFFF;   /* cards, fields, the nav pill */
  --ink: #20242C;       /* primary type */
  --ink-2: #687180;     /* secondary type */
  --line: #E4E7EC;      /* borders, always a line and never a glow */
  --blue: #0025DF;      /* the accent, and the CTA flood */
  --on-blue: #FFFFFF;   /* type on the blue: white, never dark */
  --gold: #FFD34E;      /* winners */
  --verified: #27845B;  /* verified */
  --danger: #C43D52;    /* a form that did not send */
}

.global-body {
  background-color: var(--bg);
  cursor: none;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.is-ink { color: var(--ink); }
.is-blue { color: var(--blue); }

.main-content {
  z-index: 2;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.globals { letter-spacing: -1px; }

/* --------------------------------------------------------------------------
   4. Type scale
   -------------------------------------------------------------------------- */

.global-headline-xxl {
  color: var(--on-blue);
  text-align: center;
  text-wrap: balance;
  letter-spacing: -0.038em;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 133.5px;
  font-weight: 600;
  line-height: 1em;
  position: relative;
}

.global-headline-xl {
  color: var(--ink);
  text-align: left;
  letter-spacing: -0.026em;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 110.4px;
  font-weight: 600;
  line-height: 1em;
}

.global-headline-xl.is-left-aligned { text-align: left; }
.global-headline-xl._1-1em { line-height: 1.2em; }
.global-headline-xl._1-2em { margin-top: -.5rem; }

.global-headline-l {
  color: var(--ink-2);
  text-align: left;
  letter-spacing: -0.022em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 43.2px;
  font-weight: 500;
  line-height: 1.1em;
}

.copytext {
  color: var(--ink-2);
  text-align: left;
  margin-bottom: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.2em;
}

.copytext.is-blue {
  color: var(--verified);
  letter-spacing: -.1px;
  -webkit-text-stroke-color: var(--verified);
  font-size: 1.125rem;
  font-weight: 400;
}

.copytext.is-red {
  color: var(--danger);
  text-align: center;
  -webkit-text-stroke-color: var(--danger);
  font-size: 1rem;
}

.global-subline {
  flex-flow: column;
  margin-top: 3.5vh;
  display: flex;
}

.global-subline._2vh { margin-top: 2vh; }

.global-subline-div { margin-top: 1.5rem; }

/* Line mask: each headline line sits in its own overflow-hidden box and
   slides up from 100% when it scrolls into view. */
.animated-txt-div {
  height: auto;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.animated-txt-div.pb-05 { padding-bottom: .7rem; }

/* Initial state for the scroll-into-view reveal */
.js .animated-txt-div > .global-headline-xl,
.js .animated-txt-div > .global-headline-l {
  transform: translateY(100%);
  will-change: transform;
}

/* Manual kerning on the wordmark */

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */

.navigation {
  z-index: 10;
  border-radius: 100px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: auto;
  display: flex;
  position: fixed;
  inset: auto auto 1.5rem;
}

.webflow-native-navbar {
  z-index: 5;
  border: .75px solid var(--line);
  background-color: var(--surface);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: .3rem .3rem .3rem 1.2rem;
  display: flex;
  box-shadow: 0 2px 20px rgba(32,36,44,.10);
}

/* Page-load initial state, only when the script that undoes it is running. */
.js .webflow-native-navbar {
  opacity: 0;
  transform: translateY(7rem);
}

.navbar-outer {
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.navbar-inner {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.navbar-logo-div {
  justify-content: center;
  display: flex;
}

.navbar-logo-div.w--current {
  cursor: none;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  padding-left: 0;
  position: relative;
}

.logo-light {
  z-index: 2;
  object-fit: contain;
  width: 6rem;
  height: 100%;
  margin-top: 3px;
  position: relative;
}

.nav-area-left {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.menu-btn {
  cursor: none;
  background-color: var(--surface);
  border-radius: 16px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 4rem;
  margin-right: .25rem;
  padding: 1.21rem 1.25rem;
  display: none;
}

.line-1 {
  background-color: var(--ink);
  border-radius: 20px;
  width: 1.5rem;
  height: 1.5px;
  margin-bottom: .2rem;
}

.line-2 {
  background-color: var(--ink);
  border-radius: 20px;
  width: 1.5rem;
  height: 1.5px;
  margin-bottom: 0;
}

.btn-div { position: relative; }

/* The X link. An icon rather than a word, so it survives the narrow nav
   where "How it works" is dropped. */
.nav-x {
  color: var(--ink);
  cursor: none;
  border-radius: 100px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-right: .35rem;
  margin-left: .35rem;
  display: flex;
  transition: background-color .2s;
}

.nav-x svg { width: .95rem; height: .95rem; display: block; }

.nav-x:hover { background-color: rgba(32,36,44,.08); }

.url {
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -.3px;
  cursor: none;
  margin-left: .5rem;
  margin-right: .5rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  display: block;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.primary-btn {
  background-color: var(--blue);
  color: var(--on-blue);
  text-align: center;
  letter-spacing: -.03rem;
  cursor: none;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  padding: .8rem 1.25rem;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  overflow: visible;
}

.btn-txt-container {
  z-index: 5;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 1.2rem;
  display: block;
  position: relative;
  overflow: hidden;
}

.primary-btn-txt {
  color: var(--on-blue);
  white-space: nowrap;
  letter-spacing: -.2px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  position: relative;
}

.secondary-btn {
  border: 2px solid var(--surface);
  background-color: var(--surface);
  color: var(--blue);
  text-align: center;
  letter-spacing: -.03rem;
  cursor: none;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: auto;
  margin-right: 2px;
  padding: 1rem 1.75rem 1rem 3.75rem;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: visible;
}

.secondary-btn.in-nav {
  z-index: 1;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  display: none;
  position: absolute;
  inset: 0%;
}

.secondary-btn-txt {
  color: var(--blue);
  white-space: nowrap;
  letter-spacing: -.2px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 21px;
  position: relative;
}

.btn-curser-gradient {
  background-color: rgba(32,36,44,.08);
  border-radius: 100%;
  width: 5rem;
  height: 5rem;
  display: none;
  position: absolute;
}

.btn-lottie {
  /* The reference's button was a fixed 8.2rem and this badge was 100% of it.
     Competely's label is longer, so the button sizes to its text; pinning the
     badge to that same 8.2rem keeps it the size it was drawn to be instead of
     growing with the label and covering the first word. */
  width: 8.2rem;
  height: 140%;
  position: absolute;
  inset: -10px auto 0% -37px;
}

/* The line under the CTA headline. Set on the blue flood, so it reads in
   --on-blue; the reduced-motion block recolours it along with the headline,
   because that flood is painted by a timeline that does not run there. */
.cta-subline {
  color: var(--on-blue);
  text-align: center;
  letter-spacing: -.01em;
  max-width: 42rem;
  margin: 1.9rem 0 0;
  padding: 0 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.38em;
  opacity: .84;
}

.global-btn-wrapper {
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
  display: flex;
}

/* --------------------------------------------------------------------------
   7. Preloader
   -------------------------------------------------------------------------- */

.preloader {
  z-index: 1100;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: var(--blue);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  /* Hidden by default: only the load timeline can take this cover away, so
     without a running script it must never be drawn. `.js .preloader` below
     turns it back on. */
  display: none;
  position: fixed;
  inset: 0%;
}

.preloader-outer {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.preloader-lottie { width: 100%; height: 100%; }

/* Shown only when the script that dismisses it is running. */
.js .preloader { display: flex; }

/* --------------------------------------------------------------------------
   8. 01 - Hero
   -------------------------------------------------------------------------- */

._01-hero {
  z-index: 3;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 350vh;
  display: flex;
  position: relative;
}

.hero-outer {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.hero-inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.hero-layer-1 {
  z-index: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.hero-layer-2 {
  z-index: 1;
  justify-content: center;
  align-items: flex-end;
  width: 100vw;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.hero-lottie { width: 100%; height: 100%; }
.hero-lottie.mobile { display: none; }
.hero-lottie > svg { transform: none !important; }

.hero-txt-item-1 {
  z-index: 1;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}

.hero-txt-item-2 { z-index: 2; display: flex; position: absolute; opacity: 0; }
.hero-txt-item-3 { z-index: 3; display: flex; position: absolute; opacity: 0; }

.hero-txt-item-4 {
  z-index: 4;
  max-width: 45rem;
  display: flex;
  position: absolute;
  opacity: 0;
}

.hero-headline-l {
  color: var(--ink);
  letter-spacing: -0.022em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1em;
}

.hero-headline-m {
  color: var(--ink-2);
  text-align: center;
  letter-spacing: -0.028em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1em;
}

.hero-headline-s {
  color: var(--ink-2);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 33.12px;
  font-weight: 500;
  line-height: 1em;
}

/* --------------------------------------------------------------------------
   9. 02 - Cards
   -------------------------------------------------------------------------- */

._02-cards {
  z-index: 4;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding-left: 5vw;
  padding-right: 5vw;
  position: relative;
}

.card-1 {
  transform-origin: 50% 0;
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 3rem;
}

.card-2 {
  transform-origin: 50% 0;
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 4.5rem;
}

.card-3 {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 6rem;
}

.card-inner {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: .5px solid var(--line);
  background-color: var(--surface);
  border-radius: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 5rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.card-txt-div {
  z-index: 2;
  flex-flow: column;
  width: 100%;
  display: flex;
  position: relative;
}

.card-lottie-div {
  z-index: 1;
  width: 50%;
  height: 100%;
  position: absolute;
  inset: 0% 0% 0% auto;
  overflow: hidden;
}

.card-lottie {
  object-fit: cover;
  object-position: 0% 50%;
  width: 100%;
  height: 100%;
  margin-top: 2px;
}

.card-lottie.card-1-mobile { display: none; }

.card-gradient {
  z-index: 2;
  background-image: linear-gradient(180deg, var(--surface), #fff0);
  border-radius: 40px;
  width: 100%;
  height: 12rem;
  position: absolute;
  inset: 0% 0% auto;
}

/* --------------------------------------------------------------------------
   10. 03 - CTA
   -------------------------------------------------------------------------- */

._03-cta {
  z-index: 3;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 375vh;
  margin-top: -100vh;
  display: flex;
  position: relative;
}

.cta-outer {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}

.cta-inner {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.cta-layer-1 {
  z-index: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* The last line of defence: whatever the fluid scale computes, the headline
     wraps inside this gutter instead of touching or crossing the edge. */
  padding-inline: 5vw;
  display: flex;
  position: relative;
}

.js .cta-layer-1 {
  /* first keyframe of the CTA scrub */
  opacity: 0;
  transform: scale(.75);
}

.cta-layer-2 {
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.js .cta-layer-2 { opacity: 0; }

.cta-lottie {
  object-fit: cover;
  object-position: 0% 50%;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   11. Cursor
   -------------------------------------------------------------------------- */

.curser_wrapper {
  z-index: 1000;
  cursor: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
  pointer-events: none;
}

.curser {
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  position: relative;
}

.pointer {
  z-index: 2;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  position: absolute;
}

.curser_gradient {
  z-index: 2;
  cursor: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
  pointer-events: none;
}

.curser_gradient-bg {
  filter: blur(150px);
  background-color: rgba(0,37,223,.07);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 45rem;
  height: 45rem;
  display: flex;
  position: relative;
}

.curser_circle {
  z-index: 999;
  cursor: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
  pointer-events: none;
}

.curser-circle-bg {
  background-color: rgba(32,36,44,.12);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  position: relative;
}

.js .curser-circle-bg {
  /* hover-in initial state */
  opacity: 0;
  transform: scale(0);
}

/* --------------------------------------------------------------------------
   12. Pop-up
   -------------------------------------------------------------------------- */

.pop-up {
  z-index: 11;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(32,36,44,.55);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  position: fixed;
  inset: 0% 0% auto;
}

.pop-up-outer {
  z-index: 2;
  border: .5px solid var(--line);
  background-color: var(--surface);
  border-radius: 40px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: 2rem;
  display: flex;
  position: absolute;
}

.pop-up-closing-trigger {
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.pop-up-headline {
  color: var(--ink-2);
  text-align: left;
  letter-spacing: -1px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1em;
}

.pop-up-headline.is-ink {
  color: var(--ink);
  text-align: center;
}

/* Forms */

.global-form { flex-flow: column; width: 100%; }

.form-inner {
  grid-column-gap: .7rem;
  grid-row-gap: .7rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.form-item {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.text-field {
  border: .5px solid var(--line);
  color: var(--ink);
  cursor: none;
  background-color: var(--surface);
  border-radius: 100px;
  width: 27.5rem;
  height: 3.2rem;
  margin-bottom: 0;
  padding-left: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
}

.text-field:active,
.text-field:focus {
  border-color: var(--blue);
  color: var(--ink);
}

.submit-button {
  background-color: var(--blue);
  color: var(--on-blue);
  letter-spacing: -.4px;
  cursor: none;
  border-radius: 100px;
  width: 100%;
  height: 3.2rem;
  margin-top: 0;
  padding: .8rem 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.success-message {
  background-color: rgba(39,132,91,.12);
  border-radius: 1000px;
  height: auto;
  padding: 14px 1rem;
}

.error-message {
  background-color: rgba(196,61,82,.12);
  border-radius: 100px;
  margin-top: 1rem;
}

.form-email {
  flex-flow: column;
  width: 100%;
  margin-top: 1.5rem;
  display: flex;
}

.pop-up-note {
  text-align: center;
  max-width: 27.5rem;
  margin-top: .75rem;
}

.pop-up-close {
  color: var(--ink-2);
  cursor: none;
  background: none;
  border: 0;
  margin-top: 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pop-up-close:hover { color: var(--ink); }

/* Readable by a screen reader, out of the way of everything else. */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12b. Brand lockup

   The reference's logo was a single wordmark image. Competely's is a mark
   plus its name, set in the page's own typeface, so the two always match and
   the mark stays crisp at any size.
   -------------------------------------------------------------------------- */

.logo-light {
  z-index: 2;
  grid-column-gap: .5rem;
  color: var(--ink);
  align-items: center;
  width: auto;
  height: auto;
  display: flex;
  position: relative;
}

.logo-mark {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  display: block;
}

.logo-word {
  color: var(--ink);
  letter-spacing: -.45px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   12c. 04 - Funding

   Sits on the blue the CTA scrub leaves on the body, so everything in here
   is set in --on-blue. No card, no panel: the flood is the surface.
   -------------------------------------------------------------------------- */

._04-funding {
  z-index: 2;
  background-color: var(--blue);
  width: 100%;
  padding: 10rem 5vw 5rem;
  position: relative;
}

.funding-inner {
  flex-flow: column;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  display: flex;
}

.global-headline-xl.on-blue {
  color: var(--on-blue);
  letter-spacing: -0.026em;
  /* The first line is an h2, which arrives with a heading's default margin;
     the second is a div, which does not. Zeroing it keeps the two lines on
     the same rhythm as the headlines in the cards. */
  margin: 0;
  font-size: 66.24px;
}

.funding-cols {
  grid-column-gap: 4rem;
  grid-row-gap: 2.5rem;
  grid-template-columns: 1.15fr 1fr;
  margin-top: 4rem;
  display: grid;
}

.funding-col { min-width: 0; }

.funding-lead {
  color: var(--on-blue);
  letter-spacing: -.6px;
  margin: 0 0 1.75rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.22em;
}

.funding-label {
  color: #ffffffa3;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.funding-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.funding-list li {
  color: #ffffffd4;
  letter-spacing: -.2px;
  border-top: 1px solid #ffffff2e;
  padding: .85rem 0 .85rem 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.35em;
  position: relative;
}

.funding-list li:last-child { border-bottom: 1px solid #ffffff2e; }

.funding-list li:before {
  content: "";
  background-color: var(--on-blue);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 1.35rem;
  left: 0;
}

/* The release state. Boxed, because it is the one thing on the page a
   visitor should not be able to skim past. */
.funding-status {
  color: #ffffffd4;
  letter-spacing: -.2px;
  border: 1px solid #ffffff3d;
  border-radius: 20px;
  max-width: 54rem;
  margin: 4rem 0 0;
  padding: 1.4rem 1.6rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45em;
}

.funding-status strong { color: var(--on-blue); font-weight: 600; }

.funding-foot {
  border-top: 1px solid #ffffff2e;
  justify-content: space-between;
  align-items: center;
  margin-top: 4rem;
  padding-top: 1.6rem;
  display: flex;
}

.funding-brand {
  grid-column-gap: .55rem;
  color: var(--on-blue);
  letter-spacing: -.45px;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
}

.funding-cta {
  color: var(--blue);
  cursor: none;
  letter-spacing: -.2px;
  background-color: var(--surface);
  border-radius: 100px;
  padding: .8rem 1.4rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   13. Breakpoints
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1280px) {
  .hero-txt-item-4 { display: flex; }
}

@media screen and (min-width: 1440px) {
  ._02-cards { padding-left: 7.5vw; padding-right: 7.5vw; }
  /* Scoped to .js like the base rule: unscoped it put the cover back on wide
     screens for anyone whose script never ran, leaving a blank blue page. */
  .js .preloader { display: flex; }
  .hero-txt-item-4 { max-width: 55rem; }
}

@media screen and (min-width: 1920px) {
  .global-headline-xl { font-size: 138px; }
  .global-headline-xl.is-left-aligned { max-width: 33rem; }
  ._02-cards { padding-left: 10vw; padding-right: 10vw; }
  .hero-txt-item-4 { max-width: 60rem; }
}

@media screen and (max-width: 991px) {
  .navbar-inner { grid-template-columns: .5fr .5fr; }
  .navbar-logo-div { justify-content: flex-start; padding-left: 1rem; }

  .global-headline-xl { font-size: 82.8px; }
  .global-headline-xl.is-left-aligned { max-width: none; }
  .copytext { font-size: 16px; }

  .hero-layer-2 { z-index: 1; bottom: 0; }
  ._01-hero { z-index: 2; }

  .card-1 { z-index: 2; height: 100vh; position: sticky; }
  .card-inner { justify-content: flex-start; align-items: flex-start; padding: 3rem; }
  .card-txt-div { max-width: 100%; }
  .global-subline { margin-top: 2vh; }
  .global-headline-l { font-size: 32.4px; }

  .card-lottie-div {
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    display: flex;
    inset: auto 0% 0%;
  }

  .card-lottie-div.is-card-2 { justify-content: center; align-items: center; height: 80%; }
  .card-lottie-div.is-card-1 { justify-content: center; align-items: flex-start; height: 55%; }
  .card-lottie-div.is-card-3 { justify-content: center; align-items: center; height: 55%; }

  ._02-cards { z-index: 3; }
  .card-2, .card-3 { z-index: 2; height: 100vh; position: sticky; }

  .global-btn-wrapper { margin-top: 3rem; }
  .global-headline-xxl { font-size: min(64px, 11vw); }
  .cta-subline { font-size: 19px; margin-top: 1.5rem; max-width: 34rem; }
  .btn-div { display: flex; }

  .curser_wrapper, .curser_gradient, .curser_circle { display: none; }

  .url { display: none; }
  ._04-funding { padding: 6rem 5vw 4rem; }
  .global-headline-xl.on-blue { font-size: 44.16px; letter-spacing: -0.026em; }
  .funding-cols { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .funding-lead { font-size: 22px; }
  .funding-list li { font-size: 16px; }
  .funding-status { margin-top: 2.5rem; font-size: 15px; }
  .funding-foot { margin-top: 2.5rem; }

  .global-form { width: 100%; }
  .form-inner { flex-flow: column; }
  .submit-button { max-width: none; font-size: 14px; }
  .text-field { width: 50vw; }
  .success-message { height: auto; padding-bottom: 14px; }

  .card-lottie { object-fit: contain; object-position: 50% 0%; }
  .card-lottie.card-1-desktop { display: none; }
  .card-lottie.card-1-mobile { display: block; }

  .pop-up-headline { font-size: 32px; }
  .pop-up-headline.is-ink { letter-spacing: -.5px; font-size: 36px; }

  ._03-cta { z-index: 1; height: 325vh; position: relative; }
  .cta-lottie { object-fit: contain; object-position: 50% 0%; }

  .form-email { width: 100%; }

  .hero-lottie.mobile { display: flex; }
  .hero-lottie.desktop { display: none; }

  .hero-headline-l { font-size: 138px; }
  .hero-txt-item-4 { max-width: 30rem; }
  .hero-headline-m { letter-spacing: -0.028em; font-size: 55.2px; }
  .global-subline-div { margin-top: 1rem; }
  .hero-headline-s { letter-spacing: -0.02em; }

}

@media screen and (max-width: 767px) {
  .navbar-logo-div { padding-left: 0; }
  .pop-up-outer { width: 90%; padding: 2.5rem 2rem; }
  .global-form { width: 100%; }
  .form-inner { flex-flow: column; }
  .form-item, .submit-button { width: 100%; }
  .text-field { width: 80vw; }
  .form-email { width: 100%; }
}

@media screen and (max-width: 479px) {
  .logo-light { width: auto; }
  .logo-word { font-size: .95rem; }
  .logo-mark { width: 1.2rem; height: 1.2rem; }
  .navbar-outer { max-width: none; }
  .webflow-native-navbar { width: auto; }
  .navigation { justify-content: center; align-items: center; top: auto; left: 0%; right: 0%; }

  .primary-btn-txt { font-size: 16px; }

  .global-headline-xl { letter-spacing: -0.026em; font-size: min(47.84px, 11.4vw); }
  .global-headline-xl.is-left-aligned { font-size: 55.2px; }
  .copytext.is-blue { letter-spacing: -.2px; font-size: 1rem; }

  ._04-funding { padding: 4.5rem 6vw 3rem; }
  .global-headline-xl.on-blue { font-size: 31.28px; letter-spacing: -0.026em; }
  .funding-lead { font-size: 20px; }
  .funding-status { padding: 1.1rem 1.2rem; font-size: 14.5px; border-radius: 16px; }
  .funding-foot { flex-flow: column; align-items: flex-start; grid-row-gap: 1.1rem; }
  .pop-up-note { font-size: 14px; }

  .card-1 { top: 1.5rem; }
  .card-2 { top: 2.5rem; }
  .card-3 { top: 3.5rem; }

  .card-inner {
    z-index: 1;
    border-radius: 32px;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2.5rem 2rem;
    overflow: hidden;
  }

  .global-subline { margin-top: 1rem; }
  .global-headline-l { letter-spacing: -0.022em; font-size: min(23.4px, 5.55vw); }

  .card-lottie-div { justify-content: center; align-items: flex-end; display: flex; inset: 0%; }
  .card-lottie-div.is-card-2 { height: 85%; inset: 0% 0% auto; }
  .card-lottie-div.is-card-1 { justify-content: center; align-items: flex-start; height: 62.5%; inset: auto 0% 0%; }
  .card-lottie-div.is-card-3 { height: 60%; inset: auto 0% 0%; }
  .card-lottie.card-1-mobile { height: 100%; }

  .card-gradient { border-radius: 32px; }
  .card-gradient.is-card-1 { display: none; }

  .global-btn-wrapper { margin-top: 3rem; }
  .secondary-btn { padding-left: 3.2rem; }
  .global-headline-xxl { letter-spacing: -0.038em; font-size: min(40px, 9vw); }
  .cta-subline { font-size: 16px; margin-top: 1.1rem; line-height: 1.42em; }

  .pop-up-outer { width: 88%; }
  .pop-up { padding-left: 1.5rem; padding-right: 1.5rem; }
  .pop-up-headline { font-size: 24px; }
  .pop-up-headline.is-ink { letter-spacing: -.1px; font-size: 26px; font-weight: 500; }

  .submit-button { width: 70vw; max-width: none; font-size: 15px; }
  .text-field { width: 70vw; }

  .hero-headline-l { font-size: min(73.6px, 17.48vw); }
  /* Stays narrow on purpose: this box rests at scale 1.6, so its visual
     width is 14rem x 1.6 = 358px. Widening it pushes the sentence off both
     sides of a 375px screen. */
  .hero-txt-item-4 { max-width: 14rem; }
  .hero-headline-m { letter-spacing: -0.028em; font-size: min(33.12px, 7.73vw); }
  .global-subline-div { margin-top: .5rem; }
  .hero-headline-s { letter-spacing: -0.02em; font-size: min(22.08px, 5.24vw); }

}

/* --------------------------------------------------------------------------
   13b. Reduced motion

   Nothing here hides anything. Each rule puts an element straight into the
   state its animation would have ended in, so the page reads the same with
   the motion switched off. main.js makes the matching decision for the
   scroll timelines and the Lottie players.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .preloader { display: none; }
  .js .webflow-native-navbar { opacity: 1; transform: none; }
  .js .animated-txt-div > .global-headline-xl,
  .js .animated-txt-div > .global-headline-l { transform: none; }
  .js .cta-layer-1 { opacity: 1; transform: none; }
  .js .cta-layer-2 { opacity: .35; }

  /* The CTA's type and its pill are both coloured for the blue flood, and
     that flood is painted by a scroll timeline that does not run here. So the
     section is recoloured for the warm white it actually sits on, rather than
     left as white type on a white page. */
  .js .global-headline-xxl { color: var(--ink); }
  .js .cta-subline { color: var(--ink-2); opacity: 1; }
  .js .secondary-btn { background-color: var(--blue); border-color: var(--blue); }
  .js .secondary-btn-txt { color: var(--on-blue); }

  *, :before, :after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   14. Fluid type (desktop only)

   Last on purpose: on the reference these rules live in a <style> block in
   the body, after the stylesheet, so they outrank the 1920px breakpoint
   above. Moving them earlier makes .global-headline-xl jump to 150px on
   wide screens instead of staying fluid.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 992px) {
  .hero-headline-l    { font-size: calc((6vw + 6vh + .5rem) * 0.92); }
  .hero-headline-m    { font-size: calc((3vw + 3vh + .5rem) * 0.92); }
  /* The blend is driven by vh as much as vw, so a tall window used to push
     this past the viewport WIDTH: at 1000x1600 and 1440x2560 the first line
     wrapped mid-phrase and ran edge to edge. The 8vw term caps it against the
     width it actually has to fit in, and 150px stops it running away on a very
     tall display. */
  .global-headline-xxl { font-size: min(calc((7.5vw + 7.5vh + .5rem) * 0.5), 8vw, 150px); }
  .global-headline-xl  { font-size: calc((4.5vw + 4.5vh + .2rem) * 0.92); }
  .global-headline-l   { font-size: calc((1.75vw + 1.75vh + .2rem) * 0.9); }
}