:root{
  --pink: #C41C6F;
  --pink-dark: #9E1259;
  --orange: #F5A524;
  --bg-soft: #FDF2F6;
  --text-dark: #1E1B24;
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

@media (min-width: 992px){
  html{
    zoom: 0.9;
  }
}

body{
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
}

.brand-script{
  font-family: 'Caveat', cursive;
}

/* ===== Navbar ===== */
.navbar-delivyou{
  font-family: 'Inter', sans-serif;
  padding-top: .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.navbar-delivyou .nav-link{
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.35px;
  color: #475569;
  text-align: center;
  padding: .5rem 1rem !important;
}

.navbar-delivyou .nav-link:hover{
  color: var(--pink);
}

.logo-img{
  height: 34px;
}

.navbar-delivyou .navbar-toggler{
  border: none;
  padding: 0.25rem;
  box-shadow: none;
}
.navbar-delivyou .navbar-toggler:focus{
  box-shadow: none;
}
.navbar-menu-icon{
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.navbar-delivyou > .hero-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.navbar-delivyou .navbar-brand{
  padding-left: 0;
  margin-left: calc(0.75rem - 20px);
}

.navbar-desktop-actions{
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.navbar-mobile-only{
  display: none;
}
.navbar-mobile-actions{
  display: none;
}
.btn-nav-outline{
  background: #FFFFFF;
  color: #B41078;
  border: 1.5px solid #B41078;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  border-radius: 10px;
  padding: 9px 14px;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.btn-nav-outline:hover{
  color: #9E0E68;
  border-color: #9E0E68;
  text-decoration: none;
}
.btn-nav-fill{
  background: #B41078;
  color: #FFFFFF;
  border: 1.5px solid #B41078;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  border-radius: 10px;
  padding: 9px 14px;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.btn-nav-fill:hover{
  color: #FFFFFF;
  background: #9E0E68;
  border-color: #9E0E68;
  text-decoration: none;
}

@media (max-width: 991.98px){
  .navbar-delivyou{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background: #FFFFFF !important;
  }
  .navbar-delivyou > .hero-inner{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
  }
  .navbar-delivyou .navbar-brand{
    margin-left: 0;
  }
  .navbar-delivyou .navbar-toggler{
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    background: #fffdf7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
  }
  .navbar-menu-icon{
    width: 20px;
    height: 20px;
  }
  .navbar-delivyou .navbar-collapse{
    flex: 1 0 100%;
    order: 3;
    width: calc(100% + 2.5rem);
    max-width: none;
    margin: 12px -1.25rem 0;
    padding: 4px 1.25rem 22px;
    background: #fffdf7;
    border-radius: 0;
    border: none;
  }
  .navbar-delivyou .navbar-nav{
    width: 100%;
    margin: 0 !important;
    flex-direction: column;
    align-items: stretch;
  }
  .navbar-delivyou .nav-item{
    border-bottom: 1px solid #E8E0E6;
    width: 100%;
  }
  .navbar-delivyou .nav-item:last-child{
    border-bottom: none;
  }
  .navbar-delivyou .nav-link{
    text-align: left;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #1F2937;
    padding: 16px 0 !important;
    width: 100%;
  }
  .navbar-desktop-only{
    display: none !important;
  }
  .navbar-mobile-only{
    display: block;
  }
  .navbar-desktop-actions{
    display: none !important;
  }
  .navbar-mobile-actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    width: 100%;
  }
}

.btn-publish-outline{
  border: none;
  background: transparent;
  color: #000000;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
  border-radius: 0;
  padding: 0;
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
}
.btn-publish-outline img{
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.btn-publish-outline:hover{
  color: var(--pink);
  text-decoration: none;
}

.btn-auth{
  background: #B41078;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  border-radius: 10px;
  padding: 10px 16px;
  white-space: nowrap;
  border: 1px solid #B41078;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}
.btn-auth:hover{
  color: #FFFFFF;
  background: #9E0E68;
  border-color: #9E0E68;
  text-decoration: none;
}

/* ===== Hero ===== */
.hero-section{
  background: #fffdf7;
  overflow: visible;
  position: relative;
}
/* Content width. Other pages run their content edge to edge, in line with
   the header; the old 1440px cap (1296 screen px under the html{zoom:.9}
   above) left wide empty margins on every desktop screen. 2140px is about
   1920 screen px: the content lines up with the header up to full HD, and
   on ultra-wide screens it stays composed instead of stretching the hero
   photo past its native size. */
.hero-inner{
  max-width: 2140px;
  padding-left: 2.5rem;
  padding-right: 1.5rem;
}
/* A little breathing room on desktop: between the old wide margins and
   edge to edge. Sections with their own padding (.steps-intro, and the
   hero's right side) keep it; below lg the mobile padding applies. */
@media (min-width: 992px){
  .hero-inner{
    padding-left: max(2.5rem, 4vw);
    padding-right: max(1.5rem, 4vw);
  }
}
.hero-copy{
  position: relative;
  z-index: 2;
}

.eyebrow-pill{
  background: #FFEDD5 !important;
  color: #FFC107 !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px !important;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  height: 34px;
  padding: 0 22px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.hero-title{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 3.5vw, 56px);
  line-height: 1.22;
  color: #000000;
  letter-spacing: 0;
  margin-left: -20px;
}
.hero-title .script-word{
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: #FFC107;
  font-size: clamp(50px, 4.4vw, 72px);
  line-height: 1.22;
}
.hero-title-line{
  display: block;
  white-space: nowrap;
}

.hero-lede{
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 19.2px;
  line-height: 28px;
  letter-spacing: 0.5px;
  color: #64655C;
  max-width: 720px;
  margin-left: -20px;
}
.hero-lede .highlight{
  color: #B41078;
  font-weight: 300;
}
.hero-note{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  /* italic, to match the same line on the expediteur page */
  font-style: italic;
  font-size: 16px;
  line-height: 24px;
  color: #1F1F1F;
  max-width: 720px;
  margin-left: -20px;
}

.btn-cta-fill{
  background: #FFC107;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  border-radius: 10px;
  padding: 12px 32px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.btn-cta-fill img{
  width: 21px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.btn-cta-fill:hover{
  color: #FFFFFF;
  background: #E0A800;
  text-decoration: none;
}

.btn-cta-outline{
  background: #FFFFFF;
  border: 1px solid #000000;
  color: #000000;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  border-radius: 10px;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.btn-cta-outline img{
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.btn-cta-outline:hover{
  background: #F5F5F5;
  border-color: #000000;
  color: #000000;
  text-decoration: none;
}

.hero-cta-row{
  margin-left: -20px;
}

.hero-trust{
  margin-left: -20px;
}

.stars{
  width: 98px;
  height: 22px;
  display: block;
  object-fit: contain;
}
.trust-text{
  color: rgba(0, 0, 0, 0.66);
  font-weight: 700;
  font-size: 16px;
}

.avatars-strip{
  width: 190.88px;
  height: 48px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.hero-visual{
  position: relative;
  text-align: center;
  overflow: visible;
}
/* The hero image is drawn wider than its column and spills to the right
   (min(122%, 100% + 6vw) with margin-left:-5%). The old 1440px content cap left room for that; now that the
   content reaches the screen edge, the hero row keeps that room on its
   right so the image is not cut off. Desktop only: below lg the image is
   the full-width mobile copy. */
@media (min-width: 992px){
  .hero-section .hero-inner{
    padding-right: max(1.5rem, 7vw);
  }
}
.hero-visual .hero-img{
  width: min(122%, 100% + 6vw);
  max-width: none;
  height: auto;
  display: block;
  margin-left: -5%;
}

.doodle-callout{
  position: absolute;
  top: -36px;
  left: 4%;
  z-index: 2;
  pointer-events: none;
  transform: rotate(-16deg);
  transform-origin: left center;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: #B41078;
  font-size: 30px;
  line-height: 32px;
  letter-spacing: -1px;
  text-align: left;
}
.doodle-line{
  margin: 0;
  white-space: nowrap;
}
.doodle-line2{
  margin-left: 2.5em;
  display: flex;
  align-items: flex-end;
}
.doodle-arrow-wrap{
  position: relative;
  display: inline-block;
  width: 162px;
  height: 57px;
  margin-left: 2px;
  margin-bottom: -8px;
  flex-shrink: 0;
}
.doodle-loop{
  width: 162px;
  height: 57px;
  display: block;
  object-fit: contain;
}
.doodle-head{
  position: absolute;
  width: 23px;
  height: 16px;
  right: 0;
  bottom: 2px;
  display: block;
  object-fit: contain;
}

.feature-strip{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 15px;
  margin-top: 12px;
  width: max-content;
  font-family: 'Inter', sans-serif;
}
.feature-item{
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.feature-icon{
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.feature-icon-security{
  width: 30px;
  height: 30px;
}
.feature-icon-support{
  width: 24px;
  height: 24px;
}
.feature-icon-money-wrap{
  width: 26px;
  height: 30px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 3px;
  flex-shrink: 0;
}
.feature-icon-money-wrap img{
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.hero-feature-mobile{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 340px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
}
.hero-feature-mobile li{
  position: relative;
  padding-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
}
.hero-feature-mobile li::before{
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFC107;
  flex-shrink: 0;
}
.hero-feature-mobile li:last-child{
  flex: 0 0 100%;
  justify-content: center;
}

.app-banner{
  background: #9D0069;
  border-top-right-radius: 70px;
  padding: 24px 40px 24px 58px;
  margin-top: 48px;
}
.app-banner-inner{
  max-width: 1280px;
  margin: 0 auto;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.app-banner-copy{
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.app-banner-phone{
  width: 49px;
  height: 49px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.app-banner-title{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #FFFFFF;
  white-space: nowrap;
}
.app-banner-sub{
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}
.app-store-btns{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.store-btn{
  background: #000000;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  height: 62px;
  padding: 9px 17px 9px 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  box-sizing: border-box;
}
.store-btn:hover{
  color: #FFFFFF;
  text-decoration: none;
}
.store-btn-play{
  width: 197px;
}
.store-btn-apple{
  width: auto;
  min-width: 175px;
  padding-left: 17px;
  padding-right: 17px;
}
.store-btn-play img{
  width: 21px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.store-btn-apple img{
  width: 24px;
  height: 25px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.store-btn small{
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 12.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.863);
  white-space: nowrap;
}
.store-btn strong{
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #FFFFFF;
}

@media (max-width: 991.98px){
  .doodle-callout{ display:none; }
  .hero-section{
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }
  .hero-inner{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .hero-copy{
    text-align: center;
  }
  .hero-title{
    font-size: 30px;
    line-height: 1.2;
    text-align: center;
    margin-left: 0;
    margin-bottom: 1rem !important;
  }
  .hero-title .script-word{
    font-size: 50px;
    line-height: 1.2;
  }
  .hero-lede{
    font-size: 13px;
    line-height: 22px;
    text-align: center;
    width: min(100%, 340px);
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-note{
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    color: #1F1F1F;
  }
  .hero-mobile-visual{
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-feature-mobile{
    max-width: 100%;
  }
  .hero-mobile-img{
    width: 100%;
    height: auto;
    display: block;
  }
  .hero-cta-row{
    flex-direction: column;
    align-items: stretch;
    gap: 12px !important;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta-row .btn-cta-fill,
  .hero-cta-row .btn-cta-outline{
    width: 100%;
    padding: 10px 20px;
    font-size: 15px;
    line-height: 20px;
  }
  .hero-trust{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px !important;
    text-align: center;
    margin-left: 0;
  }
  .hero-trust-meta{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .hero-trust .stars{
    margin: 0 auto;
  }
  .trust-text{
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    max-width: 220px;
  }
  .hero-visual .hero-img{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  .app-banner{
    padding: 24px 20px;
    border-top-right-radius: 40px;
  }
  .app-banner-inner{
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
  }
  .app-banner-title,
  .app-banner-sub{
    white-space: normal;
  }
}

.steps-intro{
  background: #FFFFFF;
  padding: 72px 24px 96px;
  text-align: center;
}
.steps-intro .hero-inner{
  max-width: 1680px;
  padding-left: 2rem;
  padding-right: 2rem;
}
.steps-title{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.35;
  color: #000000;
  margin: 0 0 12px;
  white-space: normal;
}
.steps-title-line{
  display: inline;
}
.steps-title-line + .steps-title-line::before{
  content: ' ';
}
@media (min-width: 1200px){
  .steps-title{
    white-space: nowrap;
  }
}
.steps-simple{
  position: relative;
  display: inline-block;
  white-space: nowrap;
  margin-right: 0.75em;
}
.steps-circle{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148px;
  height: 50px;
  transform: translate(-50%, -52%);
  pointer-events: none;
  display: block;
  object-fit: contain;
}
.steps-circle-rentabilisez{
  width: 290px;
  height: 90px;
}
.steps-subtitle{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  color: #6B7280;
  margin: 0;
}

.steps-flow{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 40px;
  max-width: none;
  width: 100%;
  margin: 56px auto 0;
  align-items: start;
}
.step-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.step-visual{
  position: relative;
  width: 100%;
  height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 18px;
  overflow: visible;
}
.step-mascot{
  max-height: 140px;
  max-width: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.step-mascot-clip{
  height: 140px;
  width: min(170px, 100%);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.step-mascot-clip .step-mascot{
  max-height: none;
  max-width: none;
  height: 240px;
  width: auto;
  margin-top: -6px;
}
.step-arrow{
  position: absolute;
  left: calc(100% + 20px);
  top: 50%;
  width: 128px;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  user-select: none;
}
.step-item:nth-child(1) .step-arrow{
  transform: translate(-50%, -50%) rotate(-8deg);
}
.step-item:nth-child(2) .step-arrow{
  transform: translate(-50%, -50%) rotate(6deg);
}
.step-item:nth-child(3) .step-arrow{
  transform: translate(-50%, -50%) rotate(-4deg);
}
.step-item:last-child .step-arrow{
  display: none;
}
.step-name{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: #333333;
  margin: 0 0 8px;
}
.step-desc{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #6B7280;
  margin: 0 0 14px;
  max-width: 380px;
}
.step-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  border-radius: 8px;
  padding: 6px 10px;
}
.step-tag svg,
.step-tag img{
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

@media (max-width: 1199.98px){
  .step-arrow{
    width: 96px;
  }
}

@media (max-width: 991.98px){
  .steps-title{
    font-size: 24px;
    line-height: 32px;
    white-space: normal;
    max-width: 100%;
  }
  .steps-title-line{
    display: block;
  }
  .steps-title-line + .steps-title-line::before{
    content: none;
  }
  .steps-title-line:first-child{
    white-space: normal;
  }
  .steps-simple{
    margin-left: 0;
    margin-right: 0.35em;
  }
  .steps-subtitle{
    font-size: 14px;
    line-height: 22px;
  }
  .steps-intro .hero-inner{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .steps-circle{
    width: 120px;
    height: 40px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -52%);
  }
  .steps-circle-rentabilisez{
    width: 190px;
    height: 48px;
  }
  .steps-flow{
    grid-template-columns: 1fr 1fr;
    gap: 48px 40px;
    max-width: 780px;
  }
  .step-arrow{
    display: none;
  }
  .step-visual{
    height: 100px;
    margin-bottom: 12px;
  }
  .step-mascot{
    max-height: 95px;
    max-width: 60%;
  }
  .step-mascot-clip{
    height: 95px;
    width: min(120px, 100%);
  }
  .step-mascot-clip .step-mascot{
    height: 165px;
  }
  .step-name{
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    font-weight: bolder;
  }
  .step-desc{
    font-size: 10px;
    line-height: 16px;
    margin-bottom: 10px;
    color: #000000;
  }
  .step-tag{
    font-size: 10px;
    line-height: 14px;
    padding: 4px 8px;
    gap: 4px;
  }
  .step-tag svg,
  .step-tag img{
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 575.98px){
  .steps-intro{
    padding: 56px 12px 72px;
  }
  .steps-intro .hero-inner{
    padding-left: 0;
    padding-right: 0;
  }
  .steps-flow{
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
  }
  .step-desc{
    max-width: 400px;
  }
}

.serenity-section{
  background: #FFFFFF;
  padding: 24px 24px 80px;
  overflow: visible;
}
.serenity-section .row,
.serenity-section .col-lg-6{
  overflow: visible;
}
.serenity-title{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  color: #000000;
  margin: 0 0 36px;
  max-width: 680px;
}
.serenity-smile{
  width: 36px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: -8px;
}
.serenity-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.serenity-list li{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 23px;
  line-height: 31px;
  color: #374151;
}
.serenity-list li.serenity-item-nowrap{
  white-space: nowrap;
}
.serenity-check{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFC107;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.serenity-check svg{
  width: 18px;
  height: 18px;
  display: block;
}
.serenity-visual{
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  overflow: visible;
}
.serenity-phone{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  min-width: 0;
  flex-shrink: 1;
}

@media (max-width: 991.98px){
  .serenity-section{
    padding: 24px 20px 56px;
  }
  .serenity-section .hero-inner{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .serenity-title{
    font-size: 23px;
    line-height: 32px;
    max-width: none;
    margin-bottom: 24px;
    text-align: left;
  }
  .serenity-smile{
    width: 42px;
    margin-left: 8px;
    margin-top: -6px;
  }
  .serenity-list{
    gap: 16px;
  }
  .serenity-list li{
    font-size: 13px;
    line-height: 20px;
    color: #000000;
    gap: 12px;
    align-items: center;
  }
  .serenity-list li.serenity-item-nowrap{
    white-space: normal;
  }
  .serenity-check{
    width: 22px;
    height: 22px;
    margin-top: 0;
  }
  .serenity-check svg{
    width: 12px;
    height: 12px;
  }
  .serenity-visual{
    justify-content: center;
    margin-top: 40px;
    padding: 12px 0 8px;
  }
  .serenity-phone{
    max-width: 260px;
  }
}

.travelers-section{
  position: relative;
  width: 100%;
  overflow: visible;
}
.travelers-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
}
.travelers-inner{
  position: relative;
  z-index: 1;
  /* The cream background is sized by this section, so its padding is what
     decides how far past the content the band runs — top and bottom alike. */
  padding-top: max(160px, 12vw);
  padding-bottom: max(160px, 12vw);
}
.travelers-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.travelers-header-copy{
  min-width: 0;
}
.travelers-title{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  color: #000000;
  margin: 0 0 10px;
}
.travelers-subtitle{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: #6B7280;
  margin: 0;
  white-space: nowrap;
}
.travelers-all-link{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.67);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 10px;
}
.travelers-all-link:hover{
  color: rgba(0, 0, 0, 0.67);
  text-decoration: none;
}
.travelers-all-link-mobile{
  display: none;
}
/* The arrows sit inside the carousel's own padding, as on the expediteur page.
   They used to hang 48px outside it, in the page margin, which no longer
   exists now that the content reaches the screen edge. Below 1200px the
   arrows are hidden and the padding goes (see the max-width:1199.98px block). */
.travelers-carousel{
  position: relative;
  padding-inline: 52px;
}
.travelers-nav{
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  color: #FFC107;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.travelers-nav svg{
  width: 28px;
  height: 28px;
  display: block;
}
.travelers-nav-prev{
  left: 0;
}
.travelers-nav-next{
  right: 0;
}
.travelers-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.traveler-card{
  background: #FFFFFF;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
  display: flex;
  flex-direction: column;
  min-width: 0;
  aspect-ratio: 327 / 437;
}
.traveler-media{
  position: relative;
  flex: 0 0 54%;
  min-height: 0;
  background: #FFF8E7;
  overflow: hidden;
}
.traveler-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The badges themselves are the dashboard's markup, inline styles and all
   (see the card in transporteur.blade.php). Only their placement belongs to
   this page -- and the zoom, because the dashboard renders under
   `html{zoom:.8}` (resources/css/global/style.css) and this page does not.
   Without it the same markup comes out a quarter bigger than the pills it is
   meant to echo. Manrope for the same reason: it is the dashboard's font. */
.traveler-badges{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  zoom: 0.8;
  font-family: 'Manrope', sans-serif;
  /* The dashboard's body is 14px, not this page's 16px, and its pills inherit
     that: <small> resolves to 0.875 x 14 = 12.25px there. Restating the 14px
     here lets the same cascade play out, so the label lands on 12.25px and,
     after the zoom above, renders at the 9.8px the dashboard ships. */
  font-size: 14px;
  line-height: 1.5;
}
.traveler-badges svg{
  flex: 0 0 auto;
}
.traveler-price{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  background: #FFC107;
  color: #FFFFFF;
  border-radius: 10px;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
}
.traveler-body{
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.traveler-name{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: #111827;
  margin: 0 0 4px;
}
.traveler-route{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #6B7280;
  margin: 0 0 18px;
}
.traveler-meta{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 auto;
  padding-bottom: 18px;
  color: #6B7280;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
}
.traveler-meta-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.traveler-meta-item svg,
.traveler-meta-item img{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.traveler-btn{
  margin-top: 0;
  background: #FFC107;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
}
.traveler-btn:hover{
  background: #E0A800;
  color: #FFFFFF;
  text-decoration: none;
}

@media (max-width: 1199.98px){
  .travelers-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .travelers-nav{
    display: none;
  }
  .travelers-carousel{
    padding-inline: 0;
  }
}

@media (max-width: 991.98px){
  .travelers-header{
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }
  .travelers-all-link{
    display: none;
  }
  .travelers-all-link-mobile{
    display: inline-flex;
    margin-top: 20px;
    margin-left: auto;
    align-self: flex-end;
    font-size: 13px;
    line-height: 18px;
  }
  .travelers-inner{
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .travelers-grid{
    display: flex;
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    padding-bottom: 16px;
  }
  .travelers-grid::-webkit-scrollbar{
    display: none;
  }
  .traveler-card{
    flex: 0 0 min(78vw, 280px);
    scroll-snap-align: start;
    aspect-ratio: auto;
    height: auto;
    overflow: hidden;
  }
  .traveler-media{
    flex: none;
    aspect-ratio: 4 / 3;
    width: 100%;
  }
  .traveler-body{
    min-height: auto;
  }
}

@media (max-width: 575.98px){
  .travelers-title{
    font-size: 26px;
    line-height: 34px;
  }
  .travelers-subtitle{
    font-size: 15px;
    line-height: 22px;
    white-space: normal;
  }
  .traveler-card{
    flex-basis: min(82vw, 260px);
  }
}

.trust-section{
  background: #FFFFFF;
  padding: 72px 24px 88px;
  text-align: center;
}
.trust-stat{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 22px;
}
.trust-heart{
  width: 48px;
  height: auto;
  display: block;
}
.trust-count{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 50px;
  line-height: 1;
  color: #111827;
  letter-spacing: -0.5px;
  margin: 0;
}
.trust-label{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #111827;
  margin: 0 0 18px;
}
.trust-stars{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 16px;
}
.trust-stars img{
  width: 28px;
  height: auto;
  display: block;
}
.trust-google{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 25px;
  line-height: 32px;
}
.trust-google img{
  width: 22px;
  height: auto;
  display: block;
}
.trust-google strong{
  font-weight: 700;
  color: #111827;
}
.trust-google span{
  font-weight: 400;
  color: #6B7280;
}

@media (max-width: 991.98px){
  .trust-section{
    padding-bottom: 24px;
  }
  .trust-label{
    font-size: 16px;
    line-height: 22px;
  }
  .trust-google{
    font-size: 15px;
    line-height: 22px;
  }
}

@media (max-width: 575.98px){
  .trust-section{
    padding: 56px 20px 20px;
  }
  .trust-count{
    font-size: 50px;
  }
}

.bg-band-2{
  position: relative;
  width: 100%;
  overflow: visible;
}
.bg-band-2::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(28%, 220px);
  background: #fffcf5;
  z-index: 0;
  pointer-events: none;
}
.bg-band-2-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.bg-band-2-illustration{
  position: absolute;
  top: -28px;
  right: 4%;
  width: min(300px, 26vw);
  height: auto;
  display: block;
  z-index: 3;
  pointer-events: none;
}
.reviews-inner{
  position: relative;
  z-index: 2;
  padding-top: max(72px, 7vw);
  padding-bottom: max(96px, 9vw);
}
.reviews-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.review-card{
  background: #FFFFFF;
  border-radius: 18px;
  padding: 20px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 260px;
  box-shadow: none;
  text-align: left;
}
.review-card-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  width: 88%;
}
.review-stars{
  display: flex;
  align-items: center;
  gap: 2px;
}
.review-stars img{
  width: 14px;
  height: auto;
  display: block;
}
.review-quote{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.review-quote img{
  width: 28px;
  height: auto;
  display: block;
  object-fit: contain;
}
.review-text{
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #4B5563;
  margin: 0 0 16px;
  flex: 1;
  width: 88%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.review-author{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #FFC107;
  margin: 0;
  margin-top: auto;
  width: 88%;
  text-align: left;
}
.reviews-footnote{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 0;
  color: #FFFFFF;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  text-align: center;
}
.reviews-footnote svg{
  width: 32px;
  height: 28px;
  flex-shrink: 0;
}

@media (max-width: 1199.98px){
  .reviews-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bg-band-2-illustration{
    width: min(220px, 24vw);
  }
}

@media (max-width: 991.98px){
  .bg-band-2{
    background: #FFFFFF;
  }
  .bg-band-2::after{
    display: none;
  }
  .bg-band-2-img,
  .bg-band-2-illustration{
    display: none;
  }
  .reviews-inner{
    padding-top: 12px;
    padding-bottom: 48px;
    overflow: visible;
  }
  .reviews-grid{
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    padding-bottom: 8px;
  }
  .reviews-grid::-webkit-scrollbar{
    display: none;
  }
  .review-card{
    flex: 0 0 min(82vw, 300px);
    scroll-snap-align: start;
    min-height: 0;
    height: auto;
    background: #F9FAFB;
    border-radius: 16px;
    padding: 20px 18px;
    align-items: flex-start;
    box-shadow: none;
  }
  .review-quote{
    display: none;
  }
  .review-card-top{
    width: 100%;
    margin-bottom: 8px;
    justify-content: flex-start;
  }
  .review-stars img{
    width: 16px;
  }
  .review-text{
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    font-size: 14px;
    line-height: 22px;
    font-style: italic;
    font-weight: 500;
    color: #4B5563;
    justify-content: flex-start;
    flex: none;
    display: block;
  }
  .review-author{
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #FFC107;
  }
  .reviews-footnote{
    display: none;
  }
}

@media (max-width: 767.98px){
  .reviews-footnote{
    display: none;
  }
}

@media (max-width: 575.98px){
  .review-card{
    flex-basis: min(85vw, 300px);
  }
}

/* Reviews marquee: two full-width rows scrolling on their own in opposite
   directions, no manual scroll. The track repeats its reviews so that moving
   it by -50% lands on an identical frame (seamless loop); cards are spaced
   with margin-right, not gap, so both halves are the same width. */
.reviews-marquee{
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.reviews-marquee-track{
  display: flex;
  width: max-content;
  animation: reviews-marquee-left 135s linear infinite;
  will-change: transform;
}
.reviews-marquee-row.is-right .reviews-marquee-track{
  animation-name: reviews-marquee-right;
}
.reviews-marquee .review-card{
  flex: 0 0 300px;
  margin-right: 16px;
}
@media (hover: hover){
  .reviews-marquee-row:hover .reviews-marquee-track{
    animation-play-state: paused;
  }
}
@keyframes reviews-marquee-left{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(-50%, 0, 0); }
}
@keyframes reviews-marquee-right{
  from{ transform: translate3d(-50%, 0, 0); }
  to{ transform: translate3d(0, 0, 0); }
}
@media (max-width: 991.98px){
  .reviews-marquee{
    gap: 14px;
  }
  .reviews-marquee .review-card{
    flex: 0 0 min(78vw, 280px);
    margin-right: 14px;
    scroll-snap-align: none;
  }
}
/* Motion-sensitive visitors get a still, wrapped list of each review once. */
@media (prefers-reduced-motion: reduce){
  .reviews-marquee{
    padding-inline: 1.25rem;
  }
  .reviews-marquee-track{
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .reviews-marquee .review-card{
    margin-right: 0;
  }
  .reviews-marquee .review-card[aria-hidden="true"]{
    display: none;
  }
}

.bg-band-3{
  position: relative;
  width: 100%;
  overflow: visible;
}
.bg-band-3::before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: min(28%, 220px);
  background: #fffcf5;
  z-index: 0;
  pointer-events: none;
}
.bg-band-3-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.bg-band-3-inner{
  position: relative;
  z-index: 2;
  padding-top: max(80px, 8vw);
  padding-bottom: max(80px, 8vw);
}
.bg-band-3-photo-wrap{
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}
.bg-band-3-photo{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  object-fit: cover;
}
.bg-band-3-mascot{
  position: absolute;
  right: -28px;
  left: auto;
  bottom: -42px;
  width: min(240px, 58%);
  height: auto;
  display: block;
  z-index: 2;
  pointer-events: none;
}
.faq-title{
  position: relative;
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  color: #000000;
  margin: 0 0 8px;
  padding-right: 52px;
}
.faq-title-icon{
  position: absolute;
  top: -8px;
  right: 0;
  width: 42px;
  height: auto;
  display: block;
}
.faq-subtitle{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #6B7280;
  margin: 0 0 28px;
}
.faq-accordion{
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 18px;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0 0 18px;
  --bs-accordion-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: #000000;
  --bs-accordion-btn-color: #000000;
  --bs-accordion-btn-focus-box-shadow: none;
}
.faq-accordion .accordion-item{
  background: transparent;
  border: none;
  border-bottom: 1px solid #E5E7EB;
}
.faq-accordion .accordion-button{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  box-shadow: none;
  gap: 16px;
}
.faq-accordion .accordion-button:not(.collapsed){
  color: #111827;
  box-shadow: none;
}
.faq-accordion .accordion-button::after{
  content: '+';
  background-image: none;
  width: auto;
  height: auto;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: #111827;
  flex-shrink: 0;
  margin-left: auto;
  transform: none;
}
.faq-accordion .accordion-button:not(.collapsed)::after{
  content: '\2212';
  transform: none;
  background-image: none;
  color: #B41078;
}
.faq-accordion .accordion-body{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #475569;
  padding: 0 36px 18px 0;
}

@media (max-width: 991.98px){
  .bg-band-3{
    background: #FFFFFF;
  }
  .bg-band-3::before{
    display: none;
  }
  .bg-band-3-inner{
    padding-top: 88px;
    padding-bottom: 96px;
  }
  .bg-band-3-photo-wrap,
  .bg-band-3 .col-lg-6:last-child{
    display: none;
  }
  .faq-title{
    font-size: 24px;
    line-height: 32px;
    padding-right: 0;
    margin-bottom: 10px;
    display: block;
  }
  .faq-title-icon{
    display: none;
  }
  .faq-subtitle{
    font-size: 14px;
    line-height: 22px;
    color: #6B7280;
    margin: 0 0 24px;
  }
  .faq-accordion{
    --bs-accordion-btn-padding-y: 16px;
    --bs-accordion-body-padding-y: 0 0 16px;
  }
  .faq-accordion .accordion-button{
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    padding-right: 8px;
  }
  .faq-accordion .accordion-button::after{
    font-size: 22px;
    color: #111827;
  }
  .faq-accordion .accordion-button:not(.collapsed)::after{
    color: #B41078;
  }
  .faq-accordion .accordion-body{
    font-size: 13px;
    line-height: 20px;
    color: #6B7280;
    padding: 0 28px 16px 0;
  }
}

.guide-section{
  background: #FFFFFF;
  padding: 80px 24px 96px;
}
.guide-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.guide-title{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  color: #0F172A;
  margin: 0 0 8px;
}
.guide-subtitle{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #6B7280;
  margin: 0;
}
.guide-all{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.67);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.guide-all:hover{
  color: rgba(0, 0, 0, 0.85);
  text-decoration: none;
}
.guide-all-mobile{
  display: none;
}
.guide-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.guide-card{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.guide-card-img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin-bottom: 16px;
}
.guide-card-title{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #0F172A;
  margin: 0 0 10px;
}
.guide-card-excerpt{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: #6B7280;
  margin: 0 0 16px;
}
.guide-card-link{
  margin-top: auto;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.guide-card-link:hover{
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
}
.guide-card-link img,
.guide-all img{
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

@media (max-width: 991.98px){
  .guide-section{
    padding: 56px 12px 72px;
  }
  .guide-section .hero-inner{
    padding-left: 0;
    padding-right: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
  }
  .guide-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .guide-title{
    font-size: 20px;
    line-height: 28px;
  }
  .guide-subtitle{
    font-size: 12px;
    line-height: 18px;
  }
  .guide-all{
    display: none;
  }
  .guide-all-mobile{
    display: inline-flex;
    margin-top: 28px;
    margin-left: auto;
    align-self: flex-end;
    font-size: 13px;
    line-height: 18px;
    gap: 6px;
  }
  .guide-all-mobile img{
    width: 13px;
    height: 13px;
  }
  .guide-card-title{
    font-size: 12px;
    line-height: 18px;
  }
  .guide-card-excerpt{
    font-size: 10px;
    line-height: 16px;
  }
  .guide-card-link{
    font-size: 11px;
    line-height: 16px;
    gap: 4px;
  }
  .guide-card-link img{
    width: 12px;
    height: 12px;
  }
  .guide-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .guide-card-img{
    height: 220px;
  }
}

.cta-banner-section{
  background: #FFFFFF;
  padding: 20px 24px 48px;
}
.cta-banner{
  background: #FFC107;
  border-radius: 28px;
  padding: 48px 48px 0 88px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  gap: 24px;
  overflow: hidden;
}
.cta-banner-copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: center;
  min-height: auto;
  padding-left: 12px;
  text-align: left;
}
.cta-banner-title{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 52px;
  color: #FFFFFF;
  margin: 0 0 16px;
  padding-top: 0;
  text-align: left;
}
.cta-title-line{
  display: block;
}
.cta-banner-title .script-word{
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-style: normal;
  font-size: 58px;
  line-height: 52px;
  color: #FFFFFF;
  position: relative;
}
.cta-banner-spark{
  position: absolute;
  top: -28px;
  left: -10px;
  width: 36px;
  height: auto;
  display: block;
}
.cta-banner-text{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #FFFFFF;
  margin: 0 0 28px;
  max-width: 520px;
  text-align: left;
}
.cta-banner-actions{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.cta-banner-arrow{
  width: 48px;
  height: auto;
  display: block;
  margin-left: 4px;
  margin-top: -36px;
}
.cta-banner-visual{
  position: relative;
  align-self: end;
  min-height: 0;
  line-height: 0;
}
.cta-phone-wrap{
  position: relative;
  width: min(100%, 420px);
  margin: 0 -48px 0 auto;
}
.cta-star{
  position: absolute;
  top: 8px;
  left: -22px;
  width: 32px;
  height: auto;
  z-index: 3;
}
.cta-phone{
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
.cta-underphone{
  position: absolute;
  right: -24px;
  bottom: 0;
  width: min(240px, 70%);
  height: auto;
  z-index: 2;
  display: block;
}

@media (max-width: 991.98px){
  .cta-banner-section{
    padding: 16px 10px 36px;
  }
  .cta-banner-section .hero-inner{
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
  .cta-banner{
    grid-template-columns: 1fr;
    padding: 36px 18px 32px;
    text-align: left;
    border-radius: 20px;
  }
  .cta-banner-copy{
    padding-bottom: 0;
    padding-left: 0;
    align-items: flex-start;
    text-align: left;
  }
  .cta-banner-title{
    font-size: 26px;
    line-height: 34px;
    padding-top: 8px;
    margin-bottom: 12px;
    text-align: left;
  }
  .cta-banner-title .script-word{
    font-size: 32px;
    line-height: 34px;
  }
  .cta-banner-spark{
    display: block;
    width: 18px;
    top: -14px;
    left: -6px;
  }
  .cta-banner-text{
    font-size: 12px;
    line-height: 18px;
    margin: 0 0 20px;
    max-width: none;
    text-align: left;
  }
  .cta-banner-arrow,
  .cta-banner-visual,
  .cta-phone-wrap,
  .cta-star,
  .cta-phone,
  .cta-underphone{
    display: none;
  }
  .cta-banner-actions{
    margin-bottom: 0;
    justify-content: flex-start;
    width: 100%;
  }
  .cta-banner-actions .app-store-btns{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .cta-banner-actions .store-btn{
    height: 44px;
    padding: 6px 10px;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 148px;
    width: auto;
  }
  .cta-banner-actions .store-btn-play,
  .cta-banner-actions .store-btn-apple{
    width: auto;
    min-width: 0;
  }
  .cta-banner-actions .store-btn-play img{
    width: 16px;
    height: 18px;
  }
  .cta-banner-actions .store-btn-apple img{
    width: 18px;
    height: 18px;
  }
  .cta-banner-actions .store-btn small{
    font-size: 9px;
    line-height: 10px;
  }
  .cta-banner-actions .store-btn strong{
    font-size: 13px;
    line-height: 15px;
  }
}

/* ===== Footer ===== */
.site-footer{
  position: relative;
  background: #FFFFFF;
  color: #FFFFFF;
}
.footer-edge-wrap{
  display: none;
}
.footer-edge{
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.footer-main{
  position: relative;
  z-index: 1;
  background: #B41078;
  margin-top: 0;
  padding: 40px 0 0;
  border-top: none;
}
.footer-inner{
  position: relative;
  padding-bottom: 0;
}
.footer-grid{
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) 0.75fr 1.05fr 1fr minmax(190px, 1.05fr);
  gap: 36px 28px;
  align-items: start;
}
.footer-logo{
  display: block;
  height: 36px;
  width: auto;
  margin-bottom: 18px;
}
.footer-brand-text{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #FFFFFF;
  margin: 0 0 18px;
  max-width: 280px;
}
.footer-copy{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 4px;
}
.footer-col-title{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
  margin: 0 0 16px;
}
.footer-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a,
.footer-mail{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #FFFFFF;
  text-decoration: none;
}
.footer-links a:hover,
.footer-mail:hover{
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-mail{
  display: inline-block;
  margin-bottom: 0;
}
.footer-cnil{
  display: block;
  width: min(100%, 220px);
  height: auto;
  margin-top: 12px;
}
.footer-apps{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 28px;
}
.footer-store-btn{
  background: #000000;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  height: 52px;
  width: 178px;
  padding: 7px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  box-sizing: border-box;
}
.footer-store-btn:hover{
  color: #FFFFFF;
  text-decoration: none;
}
.footer-store-btn img{
  width: 20px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.footer-store-btn small{
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}
.footer-store-btn strong{
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  color: #FFFFFF;
}
.footer-social{
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  text-decoration: none;
}
.footer-social a:hover{
  opacity: 0.8;
}
.footer-social img{
  display: block;
  height: 22px;
  width: auto;
  object-fit: contain;
}
.footer-bottom{
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 0;
  min-height: 0;
  pointer-events: none;
}
.footer-mascot{
  display: block;
  width: min(240px, 100%);
  height: auto;
  margin: 0 0 0 calc(-2.5rem - 56px);
  pointer-events: none;
  user-select: none;
}
.footer-claim{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: #FFFFFF;
  margin: 0;
  padding-bottom: 18px;
  white-space: nowrap;
  pointer-events: auto;
}
.footer-claim img{
  width: 22px;
  height: 15px;
  display: block;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

@media (max-width: 1199.98px){
  .footer-grid{
    grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
    gap: 32px 24px;
  }
  .footer-col-apps{
    grid-column: 1 / -1;
  }
  .footer-apps{
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
}

@media (max-width: 991.98px){
  .footer-main{
    padding: 36px 0 0;
  }
  .footer-inner{
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 20px;
  }
  .footer-grid{
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
  }
  .footer-brand{
    grid-column: 1 / -1;
  }
  .footer-brand-text{
    max-width: none;
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 14px;
  }
  .footer-copy{
    font-size: 11px;
    margin-bottom: 0;
  }
  .footer-mascot{
    display: none;
  }
  .footer-apps-heading,
  .footer-apps{
    display: none;
  }
  .footer-col-apps{
    grid-column: auto;
  }
  .footer-social-heading{
    margin-top: 0;
  }
  .footer-col-title{
    font-size: 15px;
    margin-bottom: 12px;
  }
  .footer-links{
    gap: 8px;
  }
  .footer-links a,
  .footer-mail{
    font-size: 13px;
    line-height: 20px;
  }
  .footer-mail{
    margin-bottom: 0;
    word-break: break-word;
  }
  .footer-cnil{
    width: min(100%, 180px);
    margin-top: 8px;
  }
  .footer-social{
    gap: 12px;
  }
  .footer-social img{
    height: 20px;
  }
  .footer-bottom{
    position: static;
    justify-content: center;
    width: 100%;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }
  .footer-claim{
    white-space: normal;
    padding-bottom: 0;
    font-size: 12px;
    line-height: 18px;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 767.98px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
  }
}

@media (max-width: 575.98px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
    gap: 24px 14px;
  }
  .footer-col-apps{
    grid-column: auto;
  }
}

/* ==========================================================================
   Real-data safety net (added when the mockup was wired to the database).
   .traveler-card has a fixed aspect-ratio and overflow:hidden, so a mission
   title or route longer than the demo text would push the "Voir la mission"
   button out of the card. Both are clamped to a single ellipsised line.
   ========================================================================== */
.traveler-name,
.traveler-route{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Current-page marker in the navbar ("Expéditeurs" / "Co-transporteurs").
   The mockup had no active state; without this, Bootstrap's own
   .navbar-nav .nav-link.active rule would win on specificity and paint the
   link near-black. Reuse the hover pink instead. */
.navbar-delivyou .nav-link.active{
  color: var(--pink);
  font-weight: 600;
}

/* Navbar "Publier un trajet" / "Explorer les annonces" icon.
   The artwork is a monochrome PNG, so it could not follow the link's :hover
   colour the way the label does. Painting the PNG as a mask lets currentColor
   drive it: exact artwork, exact pink, and it tracks any future colour change
   for free. The --icon custom property carries the file, set per button in the
   blade so one rule serves every icon. Without mask support the PNG is simply
   drawn as a background, i.e. today's behaviour minus the recolouring. */
.btn-publish-outline .btn-publish-icon{
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  background: var(--icon) no-repeat center / contain;
}
@supports ((-webkit-mask-image: none) or (mask-image: none)){
  .btn-publish-outline .btn-publish-icon{
    background: currentColor;
    -webkit-mask: var(--icon) no-repeat center / contain;
            mask: var(--icon) no-repeat center / contain;
  }
}

/* Breathing room between the end of the nav list ("Blog") and the start of the
   action buttons ("Publier un trajet"). This header carries three action
   buttons instead of the home page's two, so the list ran straight into them.
   1.5rem matches the gap already used between the buttons themselves, keeping
   one spacing rhythm across the group. Desktop only — below 992px the actions
   are hidden and the mobile stack takes over. */
@media (min-width: 992px){
  .navbar-desktop-actions{
    margin-left: 1.5rem;
  }
}

/* Scale of the shared site header on this page.

   The header partial has never carried a size of its own (checked back through
   its whole history) — it renders at whatever scale the host page provides.
   That scale was never consistent: pages loading app.css (the old home page,
   Qui sommes-nous) get html{zoom:.8} and draw it at 80%, while comment-ca-marche,
   the blog and contact have no zoom and draw it at 100%. So there is no single
   historical "correct" value to restore — this is the dial.

   1 = same as comment-ca-marche / blog, 0.8 = same as the old home page. */
:root{
  --header-zoom: 0.9;
}

/* The header takes this page's opening colour directly, rather than the body
   taking it and the header showing through.

   Tinting the body was wrong here: the cream band behind the mission strip is
   drawn by .travelers-bg and is meant to read against white, so colouring the
   whole document washed it out. The body keeps its default; only the bar is
   tinted, and at 72% it is still see-through, so content stays visible as a
   blurred wash while it scrolls underneath. */
.header-home{
  background-color: rgba(255, 253, 247, 0.72);
}
.app-chrome header{
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}

/* One row of four, the rest reachable through the arrows -- same behaviour as
   the traveller strip on the expediteur page. Without this the grid wraps eight
   missions onto two rows and the arrows have nothing to scroll.

   Only from 1200px up: below that the grid already reflows to fewer columns and
   the strip is meant to stack rather than scroll. */
@media (min-width: 1200px){
  .travelers-grid{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .travelers-grid::-webkit-scrollbar{
    display: none;
  }
  .traveler-card{
    /* exactly four across; anything beyond scrolls. 32px is this page's gap. */
    flex: 0 0 calc((100% - 3 * 32px) / 4);
    scroll-snap-align: start;
  }
  /* Fewer than four missions would otherwise hug the left edge. */
  .travelers-grid.travelers-grid-sparse{
    justify-content: center;
  }
}
.travelers-nav[disabled]{
  opacity: 0.25;
  cursor: default;
}

/* ===== Site footer (layouts/partials/footer) =====
   Rendered in an .app-chrome wrapper like the signed-in header, so it takes
   app-chrome.css's zoom:.9. On desktop that sits inside this page's own
   html{zoom:.9}, about .8 in total, the scale the rest of the site renders
   at. Below lg the page has no zoom, so the wrapper itself drops to .8. */
@media (max-width: 991.98px){
  .app-chrome.site-footer-chrome{
    zoom: .8;
  }
}