/* ── Inter — the landing face, actually shipped ─────────────────────────
   Every landing stylesheet (this file, agencies-page.css, the product
   reel) builds its stacks on var(--font-inter, ...), a variable that the
   old Next.js font loader used to define. After the TanStack port nothing
   defined it and no Inter @font-face existed, so Macs silently used
   locally-installed Inter while phones fell all the way back to the
   system font — "the font is not showing the proper font", mobile-first.
   Self-hosted (same files as @fontsource-variable/inter), variable weight,
   swap so text never blocks. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal-v1.woff2")
    format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-ext-wght-normal-v1.woff2")
    format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* What paints while Inter is still downloading (swap). Without it the
   first frame used the browser's default face (a serif on desktop) and
   when Inter landed every line re-wrapped: the /business headline jumped
   from one line to two and the nav capsule slid 13px. This is the
   system Arial scaled to Inter's width and line metrics (the line
   values next/font computes for Inter; the two sizes measured against
   Inter at 400 to 800, within 2% in Chrome and Safari), so the swap
   barely moves a word. Bold text gets Arial Bold rather than a faked
   bold, which Safari widens and Chrome does not. It covers exactly
   Inter's own character ranges, so once Inter has loaded nothing is
   ever drawn with it; characters outside Inter keep falling through to
   the system fonts as before. Where Arial is not installed (Android)
   the face simply does not load and the stack moves on. */
@font-face {
  font-family: "Inter Fallback";
  font-weight: 100 500;
  src: local("Arial"), local("ArialMT");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 103.8%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --font-inter: "Inter", "Inter Fallback";
}

body {
  --white: rgb(255, 255, 255);
  --black: rgb(0, 0, 0);
  --grey: rgb(113, 113, 122);
  --orange: rgb(255, 156, 0);
}

html {
  background: var(--black);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  color: var(--white);
  position: relative;
  font-size: 18px;
  background: var(--black);
  min-height: 100vh;
  font-family:
    var(--font-inter, "Inter"),
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-weight: 400;
  line-height: 1.4;
  margin: 0px;
}

h2 {
  font-size: 42px;
  margin-top: 0px;
  font-weight: 700;
  margin-bottom: 0px;
}

h1 {
  font-size: 60px;
  margin-top: 0px;
  font-weight: 700;
  margin-bottom: 0px;
}

h3 {
  font-size: 32px;
  margin-top: 0px;
  margin-bottom: 0px;
}

h4 {
  font-size: 24px;
  margin-top: 0px;
  font-weight: 700;
  margin-bottom: 0px;
}

h5 {
  font-size: 20px;
  margin-top: 0px;
  font-weight: 700;
  margin-bottom: 0px;
}

h6 {
  font-size: 16px;
  margin-top: 0px;
  font-weight: 700;
  margin-bottom: 0px;
}

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

ul {
  padding-left: 20px;
}

ol {
  padding-left: 20px;
}

img {
  display: block;
  max-width: 100%;
}

textarea {
  resize: vertical;
}

a {
  cursor: pointer;
  transition: all 200ms 0ms linear;
}

button {
  cursor: pointer;
}

.hero-rotating-text {
  display: block;
}

.word-span {
  overflow: visible;
  display: inline-block !important;
}

/* Rotating Text Animation Styles */
.rotating-text-wrapper {
  display: block;
  position: relative;
  overflow-x: visible;
  overflow-y: hidden;
  height: 1.1em;
  padding-right: 0.1em;
}

.rotating-text {
  display: block;
  position: absolute;
  width: 100%;
  transition: transform 300ms ease;
  transform: translateY(0);
}

.rotating-text.slide-out {
  transform: translateY(-100%);
}

.rotating-text.slide-in {
  transform: translateY(0);
  animation: slideInFromBottom 300ms ease;
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.button-primary {
  color: var(--black);
  background: var(--white);
  padding-left: 22px;
  padding-right: 22px;
  text-decoration: none;
  font-weight: 500;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: clip;
  transition: all 200ms 0ms ease;
}

.button-primary:hover {
  color: var(--white);
}

.button-primary:hover .cta-bg {
  opacity: 1;
}

.button-secondary {
  color: rgba(0, 0, 0, 1);
  border: 1px solid rgba(0, 0, 0, 1);
  background: rgba(255, 255, 255, 1);
  padding-top: 12px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 12px;
}

.button-secondary:hover {
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, 1);
}

.rich-text-dh-styling hr {
  width: 100%;
  border: 0px solid rgba(0, 0, 0, 1);
  height: 1px;
  display: block;
  border-top: 1px solid rgb(203, 203, 203);
  margin-top: 20px;
  padding-top: 0px;
  margin-bottom: 20px;
  padding-bottom: 0px;
}

.rich-text-dh-styling {
  display: flex;
  row-gap: 24px;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 1320px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}

.section-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--white);
}

.relative-5 {
  position: relative;
  z-index: 5;
}

.bg-wrapper {
  position: absolute;
  top: 0%;
  left: 0%;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
}

.hero-overlay {
  background: rgba(0, 0, 0, 0.65);
  position: absolute;
  top: 0%;
  left: 0%;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 2;
  /* ensure overlay sits above background video */
}

.item-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video playlist stacking & crossfade */
.video-stack {
  position: absolute;
  top: 0%;
  left: 0%;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.video-stack::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2;
  pointer-events: none;
}

.video-layer {
  position: absolute;
  top: 0%;
  left: 0%;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: 1;
}

.video-layer.active {
  opacity: 1;
}

/* Desktop-only profile overlay for hero */
.profile-overlay-wrapper {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.profile-overlay-container {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.profile-overlay {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Allow stickers to animate from outside the card area */
  overflow: visible;
  pointer-events: none;
}

.profile-card {
  position: relative;
}

.profile-overlay .profile-base {
  width: 100%;
  height: calc(100% / 0.7);
  object-fit: cover;
  object-position: top;
  display: block;
  /* Show top 70% (crop bottom 30%, no top crop), keep visual center */
  --profile-crop-bottom: 30%;
  clip-path: inset(0 0 var(--profile-crop-bottom) 0 round 40px);
  /* Fade animation - handled by React component's key change */
}

/* Ensure consistent card size so all profiles render at the same height */
.profile-card {
  width: clamp(220px, 24vw, 320px);
  height: clamp(520px, 66vh, 620px);
}

.profile-sticker {
  position: absolute;
  width: clamp(88px, 11.2vw, 160px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 20px;
  /* border: 1px solid rgb(from var(--white) r g b / 10%); */
  /* box-shadow: 0 8px 24px rgb(0 0 0 / 40%); */
  z-index: 4;
  pointer-events: none;
  /* Smooth in-out with subtle float */
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: none;
}

.profile-sticker-top {
  /* Start just outside the top-left corner, then slide slightly into view */
  top: 20%;
  left: -40%;
  animation: stickerSlideTop 4.8s ease-in-out 0.3s 1 both;
}

.profile-sticker-bottom {
  /* Start just outside the bottom-right corner, then slide slightly into view */
  bottom: 20%;
  right: -40%;
  animation: stickerSlideBottom 4.5s ease-in-out 0.5s 1 both;
}

/* Horizontal "hug" animations (no vertical movement) */
/* Continuous slide animations without pause */
@keyframes stickerSlideTop {
  0% {
    opacity: 0;
    transform: translateX(-20%);
  }

  10% {
    opacity: 1;
    transform: translateX(-12%);
  }

  85% {
    opacity: 1;
    transform: translateX(15%);
  }

  100% {
    opacity: 0;
    transform: translateX(20%);
  }
}

@keyframes stickerSlideBottom {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }

  15% {
    opacity: 1;
    transform: translateX(12%);
  }

  80% {
    opacity: 1;
    transform: translateX(-15%);
  }

  100% {
    opacity: 0;
    transform: translateX(-20%);
  }
}

/* Profile fade animation - triggered by React key change */
.profile-fade {
  animation: profileCrossfade 500ms ease-in-out;
}

@keyframes profileCrossfade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.gap-48 {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}

.gap-24 {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.h1-72 {
  font-size: 60px;
  font-weight: 500;
  line-height: 1;
}

.mw-827 {
  max-width: 827px;
}

.text-26 {
  font-size: 26px;
}

.cta-flex {
  display: flex;
}

.signup-form {
  max-width: 492px;
  width: 100%;
  position: relative;
}

.signup-input {
  width: 100%;
  min-height: 52px;
  padding-left: 60px;
  font-size: 20px;
  color: var(--black);
  border: 1px solid var(--white);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 150px;
}

.signup-input.t69.signup-input:focus {
  border: 1px solid var(--black);
}

/* keyboard focus: the same 2px ring the site's links and buttons carry.
   The inputs ship outline: none for the mouse; this puts it back for
   :focus-visible only, with a gap so it does not fuse with the border. */
.signup-input:focus-visible,
.range:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.border-radius-60 {
  border-radius: 60px;
}

.input-logo {
  position: absolute;
  top: 50%;
  left: 24px;
  right: auto;
  bottom: auto;
  transform: translate(0px, -50%);
}

.signup-cta {
  position: absolute;
  top: 50%;
  left: auto;
  right: 9px;
  bottom: auto;
  transform: translate(0px, -50%);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  padding-left: 22px;
  padding-right: 22px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all 300ms 0ms ease;
}

.signup-cta:hover {
  background: rgb(from var(--black) r g b / 80%);
}

/* Hero trust signals: app store rating + benefit bullets under the signup form */
.hero-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  width: 100%;
  max-width: 492px;
  margin-top: -2px;
  padding: 11px 18px 12px;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.075) 0%,
      rgba(255, 255, 255, 0) 46%
    ),
    rgba(16, 16, 22, 0.34);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 16px 40px rgba(0, 0, 0, 0.38);
}

.hero-rating {
  display: inline-flex;
  align-items: baseline;
  column-gap: 7px;
}

.hero-rating-stars {
  display: inline-flex;
  align-items: center;
  align-self: center;
  transform: translateY(0.5px);
  color: #ffc24b;
}

.hero-rating-stars svg {
  display: block;
  width: 12.5px;
  height: 12.5px;
}

.hero-rating-stars svg + svg {
  margin-left: 2.5px;
}

.hero-rating-score {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.hero-rating-caption {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #fff;
  white-space: nowrap;
}

.hero-trust-divider {
  width: 100%;
  height: 1px;
  margin: 9px 0 8px;
  background: rgba(255, 255, 255, 0.12);
  flex: none;
}

.hero-benefits {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #fff;
  white-space: nowrap;
}

.hero-benefit {
  display: inline-flex;
  align-items: center;
}

.hero-benefit + .hero-benefit::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  margin: 0 10px;
  flex: none;
}

.navbar {
  position: fixed;
  top: 0%;
  left: 0%;
  right: auto;
  bottom: auto;
  width: 100%;
  z-index: 3000;
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 2026-09-04: with no gap the logo and CTA touched at <=340px */
  column-gap: 12px;
}

.navbar-left {
  display: flex;
  column-gap: 48px;
  align-items: center;
}

.navbar-logo {
  width: 140px;
}

.navbar-links-wrapper {
  display: flex;
  align-items: center;
  column-gap: 32px;
}

.navbar-link {
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  transition: all 0ms 0ms linear;
}

.navbar-link:hover {
  background: linear-gradient(
    200deg,
    #ec008c 0%,
    #fc8b67 70%,
    #ffd46d 100%
  ) !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

.navbar-right {
  display: flex;
  align-items: center;
  column-gap: 32px;
}

.padding-top-100 {
  padding-top: 100px;
}

.padding-bottom-64 {
  padding-bottom: 64px;
}

.h2-62 {
  font-size: 62px;
  font-weight: 500;
  line-height: 1;
}

.text-56 {
  font-size: 56px;
  line-height: 1.1;
}

.text-color-grey {
  color: var(--grey);
}

.text-color-white {
  color: var(--white) !important;
}

.text-color-gradient {
  background: linear-gradient(200deg, #ec008c 0%, #fc8b67 70%, #ffd46d 100%);
  -webkit-background-clip: text;
  color: transparent;
}

.marquee-profiles-wrap {
  margin-top: 64px;
  overflow: hidden;
  position: relative;
}

.marquee-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.marquee-scroll.dragging {
  cursor: grabbing;
}

.marquee-scroll::-webkit-scrollbar {
  height: 0px;
}

.marquee-container {
  display: flex;
  width: max-content;
  animation: var(--marquee-direction, scroll-left) var(--marquee-speed, 50s)
    linear infinite;
}

.marquee-container.paused {
  animation-play-state: paused;
}

.marquee-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-33.333%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-33.333%);
  }

  100% {
    transform: translateX(0);
  }
}

/* A real width, not 100%: inside the max-content track a percentage has
   nothing to resolve against, so each card took its width from its photo.
   Until the photo arrived the card was a 2px hairline, and the strip
   shoved sideways as every photo landed (and settled at a different
   width per browser). flex: none keeps the row from re-sharing space as
   photos arrive; phones clamp this to 180px below. The faint ground is
   the placeholder a card shows until its photo (which covers it) lands. */
.marquee-profil-item {
  max-width: 302px;
  width: 302px;
  flex: none;
  height: 334px;
  overflow: clip;
  border: 1px solid rgb(from var(--white) r g b / 10%);
  background-color: rgb(from var(--white) r g b / 4%);
  transition: height 400ms 200ms ease;
}

.border-radius-20 {
  border-radius: 20px;
}

.marque-profil-image {
  display: block;
  width: 100%;
  height: auto;
}

.padding-top-64 {
  padding-top: 64px;
}

.gap-64 {
  display: flex;
  flex-direction: column;
  row-gap: 64px;
}

.h2-56 {
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
}

.mw-526 {
  max-width: 526px;
}

.grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
  column-gap: 24px;
  row-gap: 24px;
}

.gap-32 {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}

.cerators-image-wrap {
  width: 100%;
  aspect-ratio: 1.23 / 1;
  overflow: clip;
  border: 1px solid rgb(from var(--white) r g b / 5%);
  position: relative;
}

.image-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creators-image-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  column-gap: 5px;
  border: 1px solid rgb(from var(--white) r g b / 10%);
  color: var(--white);
  font-size: 12px;
  background: rgb(from var(--white) r g b / 20%);
  line-height: 1;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.orange-dot {
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 100%;
}

.gap-8 {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}

.h3-20 {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.content-wrapper {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  column-gap: 16px;
  row-gap: 16px;
  width: 100%;
  text-align: left;
}

.gap-16 {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.section-title {
  color: var(--orange);
  font-size: 20px;
  line-height: 1;
}

.mw-35 {
  width: 35%;
}

.content-bottom {
  display: flex;
  align-items: flex-end;
}

.product-item {
  width: 100%;
  border: 1px solid rgb(from var(--white) r g b / 10%);
  position: relative;
  background-size: cover;
  overflow: clip;
}

.product-item-content {
  position: absolute;
  top: auto;
  left: 32px;
  right: auto;
  bottom: 32px;
  max-width: 275px;
  z-index: 3;
}

.big-product-item {
  aspect-ratio: 2/1;
}

.grid-2 {
  grid-template-columns: 1fr 1fr;
  display: grid;
  column-gap: 24px;
  row-gap: 24px;
}

.mid-product-item {
  aspect-ratio: 0.98/1;
}

.small-product-item {
  aspect-ratio: 0.64/1;
}

.mw-680 {
  max-width: 720px;
  width: 100%;
}

.mw-600 {
  max-width: 600px;
}

.text-bold-italic {
  font-weight: 700;
  font-style: italic;
}

.navbar-active {
  background: var(--black);
}

.mw-500 {
  max-width: 500px;
}

.mw-375 {
  max-width: 375px;
  width: 100%;
}

.rive-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: relative;
  height: 100%;
  z-index: 2;
}

.item-abs {
  position: absolute;
  top: 0%;
  left: 0%;
  right: auto;
  bottom: auto;
  width: 100%;
}

.calculator-item {
  border: 1px solid rgb(from var(--white) r g b / 10%);
  overflow: clip;
  display: flex;
  background-image: url(https://global.divhunt.com/94a58982c042272a6ccd404e6d915f0b_430115.png);
  background-size: cover;
}

.calculator-image {
  width: 32%;
}

.calculator-content-wrapper {
  width: 68%;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  row-gap: 48px;
}

.calculator-content-top {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  padding-left: 64px;
  padding-right: 24px;
}

.flex-box {
  display: flex;
}

.justify-content-end {
  display: flex;
  justify-content: flex-end;
}

.cost-price {
  margin-left: auto;
  color: var(--grey);
}

.gap-10 {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.text-20 {
  font-size: 20px;
}

.categories-wrapper {
  display: flex;
  column-gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
}

.mw-587 {
  max-width: 587px;
}

.category-tag {
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1;
  border: 1px solid var(--white);
  font-size: 14px;
  font-weight: 500;
  opacity: 30%;
  cursor: pointer;
}

.category-tag-active {
  opacity: 100%;
}

.gap-20 {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

/* The earnings slider row. The slider is 44px tall (room for the thumb),
   and the stretched row pulled the price and quantity badges to its
   height with the number stuck at the top. Centred, each badge keeps its
   own pill height on the slider's centre line. */
.horisontal-flex-10 {
  display: flex;
  column-gap: 10px;
  flex-direction: row;
  align-items: center;
}

.range-wrapper {
  flex: 1 1 0%;
}

/* a block, so the inline slider adds no baseline gap under itself */
.range-wrapper > .range {
  display: block;
}

.calculator-content-bottom {
  padding-top: 22px;
  border-top: 1px solid rgb(from var(--white) r g b / 10%);
  padding-left: 64px;
  padding-right: 22px;
  padding-bottom: 40px;
  flex: 1 1 0%;
}

.calculator-result-text {
  font-size: 56px;
  line-height: 1;
  font-weight: 500;
}

.padding-bottom-128 {
  padding-bottom: 128px;
}

.hover-rive-wrapper {
  margin-top: 48px;
  position: relative;
  z-index: 5;
}

.padding-top-128 {
  padding-top: 128px;
}

.w-100 {
  width: 100%;
}

.gap-64-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  row-gap: 64px;
}

.display-block {
  display: block;
}

.content-align-center {
  display: flex;
  align-items: center;
}

.h3-48 {
  font-size: 48px;
  font-weight: 500;
}

.all-in-one-content {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--orange);
  grid-template-columns: 1fr 1fr;
  display: grid;
  column-gap: 24px;
  row-gap: 24px;
}

.mw-50 {
  width: 50%;
}

.all-in-one-box {
  padding-top: 8px;
  border-top: 1px solid rgb(from var(--white) r g b / 10%);
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.text-color-orange {
  color: var(--orange);
}

.text-96 {
  font-size: 96px;
  line-height: 1;
}

.all-in-one-image-box {
  width: 40%;
  border: 1px solid rgb(from var(--white) r g b / 10%);
  position: relative;
}

/* the two stickers hang outside the image box by design; the section
   clips the x axis only, so under ~1300px the right one cannot widen the
   page (it did, by 9px at 1280, and the page scrolled sideways) */
.all-in-one-section {
  overflow-x: clip;
}

.all-in-one-image-1 {
  position: absolute;
  top: -23px;
  left: auto;
  right: -30px;
  bottom: auto;
  width: 70px;
}

.all-in-one-image-2 {
  position: absolute;
  top: auto;
  left: -30px;
  right: auto;
  bottom: -23px;
  width: 70px;
}

.item-50 {
  width: 50%;
}

.mw-40 {
  width: 40%;
}

.cta-component {
  width: 100%;
  padding-left: 50px;
  padding-top: 150px;
  padding-bottom: 150px;
  padding-right: 20px;
  border: 1px solid rgb(from var(--white) r g b / 10%);
  overflow: clip;
  text-align: left;
  position: relative;
}

.mw-492 {
  max-width: 492px;
}

.padding-footer {
  padding-top: 64px;
  padding-bottom: 38px;
}

.footer-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 48px;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-logo {
  width: 140px;
}

.footer-links-wrapper {
  display: flex;
  align-items: flex-start;
  column-gap: 64px;
}

.footer-links-row {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.footer-links-title {
  font-size: 20px;
  font-weight: 500;
}

.footer-link {
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  color: var(--white);
  transition: all 0ms 0ms ease;
}

.footer-link:hover {
  background: linear-gradient(
    200deg,
    #ec008c 0%,
    #fc8b67 70%,
    #ffd46d 100%
  ) !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

.footer-bottom {
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.horisontal-flex-16 {
  display: flex;
  align-items: center;
  column-gap: 16px;
}

.market-icon {
  width: 140px;
  transition: all 300ms 0ms ease;
}

.market-icon:hover {
  transform: scale(0.99, 0.99);
}

.gradinet-hover:hover {
  background: linear-gradient(200deg, #ec008c 0%, #fc8b67 70%, #ffd46d 100%);
  -webkit-background-clip: text;
  color: transparent;
}

.hover-animation-white:hover span {
  color: var(--grey);
}

.hover-animation-gradinet:hover {
  background: linear-gradient(
    200deg,
    #ec008c 0%,
    #fc8b67 70%,
    #ffd46d 100%
  ) !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

/* Enable gradient when phrase is programmatically active (not just hover) */
.hover-animation-gradinet.active {
  background: linear-gradient(
    200deg,
    #ec008c 0%,
    #fc8b67 70%,
    #ffd46d 100%
  ) !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

.cta-bg {
  position: absolute;
  top: 0%;
  left: 0%;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    200deg,
    #ec008c 0%,
    #fc8b67 70%,
    #ffd46d 100%
  ) !important;
  transition: all 200ms 0ms ease;
  opacity: 0%;
}

.hamburger {
  display: none;
}

.hamburger-trigger {
  display: none;
}

/* 44px tall for the finger, 8px track for the eye: the gradient (painted
   inline by CalculatorSection.paintSlider as background-image) is sized
   to an 8px band centred in the box, so the look is unchanged while the
   whole 44px answers to a touch. Thumbs and tracks below centre on
   their own inside the taller input. */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  border-radius: 999px;
  background-color: transparent;
  background-image: linear-gradient(
    to right,
    #ff9c00 0% 50%,
    rgba(255, 255, 255, 0.1) 50% 100%
  );
  background-size: 100% 8px;
  background-position: center;
  background-repeat: no-repeat;
  outline: none;
}

/* WebKit track */
.range::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent;
  border-radius: 999px;
}

/* WebKit thumb */
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: radial-gradient(circle at center, #fff 8px, transparent 8.01px);
  cursor: pointer;
  margin-top: -9px;
}

/* Firefox track */
.range::-moz-range-track {
  height: 8px;
  background: transparent;
  border: none;
  border-radius: 999px;
}

/* Firefox thumb */
.range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: radial-gradient(circle at center, #fff 8px, transparent 8.01px);
  cursor: pointer;
}

/* popular medium macbooks (14″/15″ defaults) with some grace with height*/
@media (min-width: 1400px) and (max-width: 1659px) and (min-height: 400px) and (max-height: 1600px) {
  .profile-overlay-container,
  .hero-content {
    margin-top: 17px;
  }
  .hero-content {
    transform: scale(0.9);
  }
  .profile-overlay-container {
    transform: scale(0.88);
  }

  .profile-overlay .profile-base {
    --profile-crop-bottom: 24%;
    clip-path: inset(0 0 var(--profile-crop-bottom) 0 round 40px);
  }
}

/* popular small macBooks (13″ defaults / tighter scales) with some grace with height */
@media (min-width: 1168px) and (max-width: 1399px) and (min-height: 400px) and (max-height: 1600px) {
  .profile-overlay-container,
  .hero-content {
    margin-top: 24px;
  }
  .hero-content {
    transform: scale(0.8);
  }
  .profile-overlay-container {
    transform: scale(0.8);
  }

  .profile-overlay .profile-base {
    --profile-crop-bottom: 24%;
    clip-path: inset(0 0 var(--profile-crop-bottom) 0 round 40px);
  }
}

@media screen and (max-width: 1167px) {
  .section-hero {
    align-items: flex-end;
    padding-bottom: 32px;
  }

  .section-hero .relative-5 {
    margin-top: auto;
  }
  .hero-overlay {
    display: none;
  }

  /* Avoid double-darkening: remove internal video tint for hero on mobile */
  .section-hero .video-stack::after {
    background: rgba(0, 0, 0, 0.5);
  }

  .navbar-links-wrapper {
    display: none;
  }

  .gap-64 {
    row-gap: 48px;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .content-wrapper {
    flex-direction: column;
  }

  .content-bottom {
    align-items: flex-start;
  }

  .big-product-item {
    aspect-ratio: 0.79/1;
  }

  .grid-2 {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }

  .small-product-item {
    aspect-ratio: 0.7/1;
  }

  .calculator-item {
    flex-direction: column-reverse;
  }

  .calculator-image {
    width: 100%;
  }

  .calculator-content-wrapper {
    width: 100%;
  }

  .mw-50 {
    width: 100%;
  }

  .all-in-one-image-box {
    width: 90%;
    margin-top: 20px;
  }

  .item-50 {
    width: 100%;
  }

  .mw-40 {
    width: 100%;
  }

  .cta-component {
    aspect-ratio: 0.48/1;
    padding-top: 40px;
    padding-left: 20px;
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-top {
    flex-direction: column;
    row-gap: 20px;
  }

  .footer-links-wrapper {
    grid-template-columns: 1fr 1fr;
    display: grid;
    row-gap: 20px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 20px;
  }

  .mobile-reverse {
    display: flex;
    flex-direction: column-reverse;
  }

  .item-cover-top {
    object-fit: cover;
    object-position: 50% 20%;
  }

  /* Tablet profile sizing */
  .profile-card {
    width: clamp(200px, 32vw, 260px);
    height: clamp(340px, 48vh, 440px);
  }

  .profile-overlay .profile-base {
    width: 100%;
    --profile-crop-bottom: 40%;
    height: calc(100% / 0.6);
    clip-path: inset(0 0 var(--profile-crop-bottom) 0 round 24px);
  }

  /* Pull stickers further inside on mobile */
  .profile-sticker-top {
    left: -30%;
    top: 15%;
  }

  .profile-sticker-bottom {
    right: -30%;
    bottom: 15%;
  }

  .big-product-item-mobile {
    aspect-ratio: 0.59/1;
  }

  .hamburger {
    display: flex !important;
    padding-top: 92px;
    background: var(--black);
    position: fixed;
    top: 0%;
    left: 0%;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-image: url(/assets/226123b688f7e62d4ba939e4576d56ce_86732.png);
    background-repeat: no-repeat;
    background-position: 0% 100%;
    background-size: contain;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 300ms ease;
  }

  .hamburger.active {
    transform: translateX(0%);
    opacity: 1;
  }

  .hamburger-content {
    display: flex;
    flex-direction: column;
    row-gap: 50px;
    padding-bottom: 40px;
  }

  .hamburger-link {
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 9px;
    padding-right: 9px;
    border: 1px solid rgb(from var(--white) r g b / 10%);
    display: flex;
    align-items: center;
    column-gap: 70px;
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
  }

  .hamburger-link-image {
    width: 104px;
  }

  .mobile-transparent {
    background: rgb(from var(--black) r g b / 0%);
    color: var(--white);
    border: 1px solid var(--white);
  }

  .mobile-transparent:hover {
    border: 1px solid rgb(from var(--white) r g b / 0%);
  }

  .hamburger-container {
    max-height: 85svh;
    overflow: auto;
  }

  .hamburger-link-active {
    border: 1px solid var(--white);
  }

  .hamburger-trigger {
    width: 48px;
    height: 48px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  .hamburger-trigger span {
    width: 18px;
    height: 2px;
    background: var(--white);
    transition: all 0.3s ease-in-out;
    position: absolute;
  }

  .hamburger-trigger span:nth-child(1) {
    transform: translateY(-6px);
  }

  .hamburger-trigger span:nth-child(2) {
    opacity: 1;
  }

  .hamburger-trigger span:nth-child(3) {
    transform: translateY(6px);
  }

  .hamburger-trigger.active span:nth-child(1) {
    transform: translateY(0) rotate(45deg);
  }

  .hamburger-trigger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-trigger.active span:nth-child(3) {
    transform: translateY(0) rotate(-45deg);
  }
}

@media screen and (max-width: 1167px) {
  .profile-overlay-container {
    justify-content: center;
    align-items: flex-start;
    padding-top: clamp(48px, 32vh, 1000px);
    transform: scale(1.61);
  }
  /* decrease on smaller heights */
  @media (min-height: 901px) and (max-height: 1200px) {
    .profile-overlay-container {
      padding-top: 14.5vh;
      transform: scale(1.3);
      transform-origin: top center;
    }
  }
  @media (min-height: 721px) and (max-height: 1000px) {
    .profile-overlay-container {
      padding-top: 14vh;
      transform: scale(1.15);
    }
  }
  @media (min-height: 721px) and (max-height: 900px) {
    .profile-overlay-container {
      padding-top: 16vh;
      transform: scale(0.9);
    }
  }
  @media (min-height: 561px) and (max-height: 800px) {
    .profile-overlay-container {
      padding-top: 10vh;
      transform: scale(0.75);
    }
  }
  @media (min-height: 561px) and (max-height: 730px) {
    .profile-overlay-container {
      padding-top: 2vh;
    }
  }
  @media (max-height: 560px) {
    .profile-overlay-container {
      transform: scale(0.25);
    }
  }

  .profile-overlay {
    margin-top: 0;
  }

  .section-hero .bg-wrapper .profile-card {
    width: clamp(190px, 52vw, 236px);
    height: clamp(260px, 70vw, 360px);
  }

  /* THE FLOOR UNDER THE COLLAGE.
     Below 1168px the hero copy is pinned to the bottom of the section and
     the collage grows downwards on vh, so on a tall-but-narrow window the
     two met: at 768x1024 the card's lower edge landed 57px inside "Make
     Money", white italic type on the card's pale corner. Instead of letting
     both float, the card is capped by what is actually left above the copy.
     470px is the room the copy block needs at these widths (about 394px of
     type, the 32px the section keeps under it, and 44px of air), and the
     1.3 and the 14.5vh are the scale and the offset the band above applies,
     so the card can never reach past that line. Where the window is tall
     enough for the full card (900x1200 and up) the cap does nothing. */
  @media (min-height: 901px) and (max-height: 1200px) {
    .section-hero .bg-wrapper .profile-card {
      height: min(
        clamp(260px, 70vw, 360px),
        calc((100svh - 470px) / 1.3 - 14.5vh)
      );
    }
  }

  .section-hero .bg-wrapper .profile-overlay .profile-base {
    --profile-crop-bottom: 42%;
    height: calc(100% / 0.58);
    clip-path: inset(0 0 var(--profile-crop-bottom) 0 round 24px);
  }
}

/* specifically for Nest Hub */
@media (min-width: 1000px) and (max-width: 1200px) and (min-height: 400px) and (max-height: 800px) {
  .hero-content {
    transform: scale(0.98);
  }
  .profile-overlay-container {
    padding-top: 10vh;
    justify-content: flex-end;
    transform: scale(0.8);
  }
}

/* [Resolution: 767px] */

@media screen and (max-width: 767px) {
  .section-hero {
    align-items: flex-end;
    padding-bottom: 12px;
  }

  /* Ensure hero content wrapper snaps to bottom on small screens */
  .section-hero .relative-5 {
    margin-top: auto;
  }

  .hero-subline {
    display: block;
    font-size: 32px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .hero-gap {
    row-gap: 24px;
  }
  .hero-desc {
    font-size: 15px;
    line-height: 1.35;
  }
  .h1-72 {
    font-size: 48px;
  }

  .padding-bottom-64 {
    padding-bottom: 48px;
  }

  .h2-62 {
    font-size: 48px;
  }

  .text-56 {
    font-size: 32px;
  }

  .padding-top-64 {
    padding-top: 48px;
  }

  .h2-56 {
    font-size: 48px;
  }

  .gap-32 {
    row-gap: 24px;
  }

  .mw-35 {
    width: 100%;
  }

  .calculator-content-top {
    padding-left: 20px;
    padding-right: 20px;
  }

  .calculator-content-bottom {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
  }

  .padding-bottom-128 {
    padding-bottom: 64px;
  }

  .padding-top-128 {
    padding-top: 64px;
  }

  .gap-64-center {
    row-gap: 48px;
  }

  .text-96 {
    font-size: 48px;
  }

  .padding-footer {
    padding-top: 32px;
  }

  .footer-wrapper {
    row-gap: 32px;
  }
  .navbar-right {
    column-gap: 16px;
  }
  .hero-cta {
    margin-top: 4px;
  }

  /* Mobile: the trust card sits BELOW the signup form (the conversion
     action keeps priority); natural DOM order does that now.

     2026-09-14 (Kedem: "i dont like the way this looks on mobile"): the
     old rules stacked all six items into a tall slab that read as a
     second hero card. It now keeps the desktop rows, two lines in one
     compact pill: the rating cluster, then the three benefits with their
     dot separators. The hairline goes; the row gap does its job. */
  .hero-trust {
    align-self: center;
    max-width: 340px;
    margin-top: -2px;
    margin-bottom: -4px;
    padding: 10px 16px 11px;
    border-radius: 16px;
    row-gap: 6px;
  }
  .hero-trust-divider {
    display: none;
  }
  .hero-benefits {
    font-size: 12px;
  }
  .hero-benefit + .hero-benefit::before {
    margin: 0 8px;
  }

  .profile-overlay-container {
    justify-content: center;
    align-items: center;
    transform: scale(1);
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 2dvh;
  }
  .hero-content {
    transform: scale(0.99);
  }

  .profile-overlay {
    position: absolute;
    top: 34.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 30px;
  }

  /* Mobile hero bg-wrapper profile sizing: match previous phone proportions */
  .section-hero .bg-wrapper .profile-card {
    width: min(46vw, 220px);
    height: 360px;
  }

  .section-hero .bg-wrapper .profile-overlay .profile-base {
    /* Increase bottom crop to elongate appearance */
    --profile-crop-bottom: 42%;
    /* Ensure the visible portion (58%) fills the card height */
    height: calc(100% / 0.58);
    clip-path: inset(0 0 var(--profile-crop-bottom) 0 round 24px);
  }

  /* Tighten hero text and form spacing */
  .hero-gap {
    row-gap: 16px;
  }
  .section-hero .gap-24 {
    row-gap: 16px;
  }

  /* Compact signup form vertically */
  .signup-input {
    min-height: 44px;
  }
  .signup-cta {
    min-height: 36px;
  }
}

/* [Resolution: 500px] */

@media screen and (max-width: 500px) {
  body {
    font-size: 16px;
  }
  .section-hero {
    padding-bottom: 16px;
  }

  .hero-subline {
    font-size: 24px;
    white-space: nowrap;
  }
  .hero-gap {
    row-gap: 20px;
  }
  .hero-desc {
    font-size: 14px;
    line-height: 1.4;
  }

  .button-primary {
    min-height: 40px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .gap-48 {
    /* row-gap: 32px; */
  }

  .signup-input {
    padding-left: 45px;
    padding-right: 110px;
  }

  .border-radius-60 {
    border-radius: 40px;
  }

  .input-logo {
    left: 12px;
  }

  .signup-cta {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    right: 4px;
  }

  /* The closing CTA's form is narrower than the hero's (the card's own
     padding), so at 390 the pill button sat over the last letters of
     "link.me/yourname". Under 400px the button drops under the field as a
     full-width bar instead of floating inside it. The hero form keeps the
     floating button: it has the room. */
  @media (max-width: 400px) {
    .cta-component .signup-input {
      padding-right: 16px;
    }
    .cta-component .signup-cta {
      position: static;
      transform: none;
      width: 100%;
      margin-top: 10px;
      min-height: 44px;
    }
    /* the logo centres on the form, which is now field + button tall;
       pin it to the field's own middle (the field is 44px here) */
    .cta-component .input-logo {
      top: 22px;
    }
  }

  .navbar-logo {
    /* `126px`, not `126` (2026-09-04). Unitless, the declaration was invalid
       and dropped, so phones kept the 140px desktop logo; at <=336px that left
       0px between the wordmark and the header CTA. */
    width: 126px;
  }

  .navbar-link {
    display: none;
  }

  .navbar-right {
    column-gap: 16px;
  }

  /* Navbar CTA: show as white underlined text on mobile */
  .button-primary.mobile-underline {
    background: transparent;
    color: var(--white);
    text-decoration: underline;
    padding-left: 0;
    padding-right: 0;
    /* 44px floor so the sitewide CTA is a real tap target. This was
       `min-height: auto` + `display: inline`, which painted the ONLY call to
       action on the site at roughly 100x22 CSS px at every phone width
       (measured 320/360/390/414/430) — under the WCAG 2.5.8 AA 24x24 floor on
       one axis and far under the 44x44 a thumb needs, while the hamburger
       16px away was a comfortable 48x48. inline-flex leaves the underline
       treatment identical and only grows the hit box. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border: none;
    border-radius: 0;
    /* 2026-09-04: at <=340px the label broke to two lines and doubled the
       button's height inside the header */
    white-space: nowrap;
  }

  .button-primary.mobile-underline .cta-bg {
    display: none;
  }

  .button-primary.mobile-underline:hover {
    color: var(--white);
  }

  .padding-top-100 {
    padding-top: 50px;
  }

  .padding-bottom-64 {
    padding-bottom: 32px;
  }

  .h2-62 {
    font-size: 32px;
  }

  .text-56 {
    font-size: 28px;
  }

  .marquee-profiles-wrap {
    margin-top: 48px;
  }

  .marquee-profil-item {
    max-width: 180px;
    min-width: 180px;
    height: 198px;
  }

  .border-radius-20 {
    border-radius: 10px;
  }

  .padding-top-64 {
    padding-top: 32px;
  }

  .gap-64 {
    row-gap: 32px;
  }

  .h2-56 {
    font-size: 32px;
  }

  .gap-32 {
  }

  .product-item-content {
    left: 0px;
    max-width: 100%;
    bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .mid-product-item {
    aspect-ratio: 0.9/1;
  }

  .mw-375 {
    max-width: 100%;
  }

  .calculator-content-wrapper {
    row-gap: 32px;
  }

  .text-20 {
    font-size: 16px;
  }

  .padding-bottom-128 {
    padding-bottom: 48px;
  }

  .padding-top-128 {
    padding-top: 48px;
  }

  .h3-48 {
    font-size: 24px;
  }

  .all-in-one-image-1 {
    width: 40px;
    right: -20px;
  }

  .all-in-one-image-2 {
    width: 40px;
    left: -20px;
    bottom: -15px;
  }

  .cta-component {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-links-row {
    row-gap: 14px;
  }

  .footer-link {
    font-size: 16px;
  }

  .footer-bottom {
    font-size: 12px;
  }

  .mobile-gap-16 {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
  }

  .mobile-display-block {
    display: block;
  }

  .calculator-result-text {
    font-size: 40px;
  }

  .heading-home {
    max-width: 100%;
  }

  .calculator-item {
    background-image: url("/assets/bb9559f89460808ef5cc96e232b20a06_521048.png");
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
  }
  .hero-cta {
    margin-top: 4px;
  }

  /* Prevent italic rotating text from clipping on small screens */
  .rotating-text-wrapper {
    height: 1.25em; /* give extra headroom for italic ascenders */
    padding-top: 0.06em; /* small internal bleed to avoid top cut */
    margin-top: -0.06em; /* preserve original vertical rhythm */
  }

  /* Add tiny right-side bleed only for the last word to avoid right-edge cut */
  .rotating-text-wrapper .word-span:last-child {
    padding-right: 0.08em;
    margin-right: -0.08em;
  }
}

/* Narrow-width phones (e.g., iPhone Pro) - lower profile overlay to avoid navbar clash */
@media screen and (max-width: 420px) {
  .profile-overlay {
    top: 31.75%;
  }

  .section-hero .bg-wrapper .profile-card {
    width: min(42vw, 200px);
    height: 320px;
  }
}

/* Sliding Counter Animation Styles */
.animated-counter {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}

.sliding-digits-wrapper {
  display: inline-flex;
  align-items: baseline;
}

.sliding-digit-container {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  position: relative;
}

.sliding-digit-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sliding-digit {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
}

.counter-prefix,
.counter-suffix {
  display: inline-block;
}