html, body {
  overflow-x: hidden;
  overflow-x: clip;
}
.hero-container {
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.hero-main-image {
width: 100%;
max-width: 650px;
height: auto;
margin-top: 3rem;
image-rendering: auto;
image-rendering: -webkit-optimize-contrast;
display: block;
}
.card-overlay {
position: absolute;
max-width: 200px;
width: 42%;
height: auto;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
opacity: 0;
animation: slideUp 1s ease-out 0.38s forwards;
/* Remove the transform from here */
}
.card-1 {
bottom: 15%;
left: -18%;
/* Remove transform from here */
}
.card-2 {
top: 45%;
right: -12%;
animation-delay: 0.15s;
/* Remove transform from here */
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1280px) {
/* between lg and xl the column sits near the viewport edge —
   pull the desktop offsets back inside */
.card-1 {
left: -4%;
}
.card-2 {
right: -2%;
}
}
@media (max-width: 1024px) {
.hero-main-image {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.card-overlay {
max-width: 200px;
width: 38%;
}
/* flush with the padded container: cards overlap the image edges
   instead of hanging off the viewport */
.card-1 {
left: 0;
bottom: 12%;
}
.card-2 {
right: 0;
top: 20%;
}
}
@media (max-width: 768px) {
.hero-main-image {
max-width: 400px;
}
.card-overlay {
max-width: 150px;
}
.card-1 {
bottom: 8%;
}
.card-2 {
top: 12%;
}
}
.pill-animation {
position: absolute;
top: 0.5rem;
display: grid;
grid-template-columns: 1rem 1fr;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem;
whitespace: nowrap;
border-radius: 9999px;
/* Match their gradient exactly */
background: linear-gradient(to top, rgb(31 41 55) 50%, rgb(107, 114, 128));
box-shadow:
inset 0 0 0 1px rgba(255 255 255 / 0.1);
animation-name: move-x;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
font-size: 0.8125rem;
}
@keyframes move-x {
from {
transform: translateX(-100%);
}
to {
transform: translateX(calc(100% + 100cqw));
}
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-padding-top: 6rem; /* ≈ sticky header height + breathing room */
  }
}
/* Dot-grid texture for the gradient panels (Radiant-style).
   Add `texture-dots` to any panel that already has
   `relative overflow-hidden rounded-*` — the overlay inherits the
   radius and fades out towards the bottom-right so it reads as
   texture, not wallpaper. */

.texture-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(rgba(79, 70, 229, 0.20) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(120% 120% at 25% 15%, black 25%, transparent 70%);
  mask-image: radial-gradient(120% 120% at 25% 15%, black 25%, transparent 70%);
}
/* Deck-of-cards layout for the How We Work page.
   Layout-critical rules for the stacked_cards Stimulus controller —
   kept in plain CSS so Tailwind's JIT purging can never break them.

   Tailwind v4: add to application.tailwind.css (or any imported
   stylesheet). Below 1024px the cards fall back to a normal stacked
   list and the controller applies no transforms. */

@media (min-width: 1024px) {
  /* Scroll runway: ~90vh of scroll per card transition */
  .step-deck {
    height: 540vh;
  }

  /* Pins for the duration of the runway */
  .step-deck-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
  }

  /* Card height + room below for the peeking back edges (4 × 30px, minus scale shrink) */
  .step-deck-stack {
    height: calc(31rem + 6.5rem);
  }

  .step-card {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 31rem;
    margin-bottom: 0;
  }
}

/* Short viewports (13" laptops with browser chrome): compact card so
   card + peeks fit inside the pinned viewport. The controller reads
   offsetHeight, so the animation adapts automatically. */
@media (min-width: 1024px) and (max-height: 760px) {
  .step-deck-stack {
    height: calc(26rem + 6.5rem);
  }

  .step-card {
    height: 26rem;
  }

  /* Tighten the card interior so content fits the shorter card */
  .step-card > div {
    padding: 1.75rem 2.25rem;
  }

  .step-card h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-top: 0.75rem;
  }

  .step-card .step-num {
    font-size: 3rem;
    line-height: 1;
  }
}
/* Scroll-pinned step reveal (step_reveal_controller.js).
   Add alongside the other layout-critical CSS.
   Below lg the slides render as a normal stacked list. */

@media (min-width: 1024px) {
  .step-reveal {
    height: 280vh; /* scroll runway: ~90vh per step */
  }

  .step-reveal-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
  }

  .step-reveal-slides {
    position: relative;
    min-height: 22rem; /* tallest slide: number + title + body — tune if step copy changes */
  }

  .step-reveal-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
  }

  .step-reveal-slide.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step-reveal { height: auto; }
  .step-reveal-pin { position: static; height: auto; }
  .step-reveal-slide {
    position: static;
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }
}
/* Entrance for the thank-you card after the Turbo swap */
.thanks-card {
  animation: thanks-enter 0.5s ease-out both;
}

@keyframes thanks-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .thanks-card { animation: none; }
}
/*
 * 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.
 *


 */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal-007fce1bff9f7f37469fe61eff9ef62c033af63fccb0e65a2e94f4e0c14d9d6d.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-normal-a07c2ff83e7b39233d9c6dfcb53f4c00fa70302ea78482ef66aabca009df9f46.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}