:root {
  --navy:#101b3d;
  --purple:#6d36d9;
  --orange:#ff6b16;
  --paper:#fff;
  --bg:#f7f8fc;
  --ink:#182033;
  --muted:#647084;
  --line:#e4e8f0;
  --soft:#f0edff;
  --shadow:0 18px 50px #17234812;
  color-scheme:light
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 'DM Sans',sans-serif
}
h1,h2,h3,h4 {
  font-family:Manrope,sans-serif;
  line-height:1.15;
  color:var(--navy);
  letter-spacing:-.035em
}
h1 {
  font-size:clamp(2.6rem,6vw,4.5rem)
}
h2 {
  font-size:clamp(2rem,4vw,3rem)
}
h3 {
  font-size:1.25rem
}
p {
  color:var(--muted)
}
a {
  color:var(--purple);
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
button,input,select,textarea {
  font:inherit
}
button,a,.btn {
  touch-action:manipulation
}
.skip {
  position:absolute;
  left:-999px
}
.skip:focus {
  left:1rem;
  top:1rem;
  z-index:99;
  background:white;
  padding:.8rem
}
.wrap {
  width:min(1160px,calc(100% - 40px));
  margin:auto
}
.topbar {
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)
}
.nav {
  height:78px;
  display:flex;
  align-items:center;
  gap:24px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:800 1.45rem Manrope;
  color:var(--purple);
  margin-right:auto
}
.brand-logo {
  display:block;
  width:50px;
  height:50px;
  flex:0 0 50px;
  object-fit:cover;
  border-radius:8px
}
.brand b {
  color:var(--purple)
}
.navlinks {
  display:flex;
  align-items:center;
  gap:19px
}
.navlinks a {
  font-size:.9rem;
  color:var(--ink);
  font-weight:600
}
.navlinks a[aria-current=page] {
  color:var(--purple)
}
.actions {
  display:flex;
  gap:12px;
  align-items:center
}
.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:.2s
}
.btn:hover {
  transform:translateY(-2px);
  text-decoration:none
}
.primary {
  background:var(--purple);
  color:#fff
}
.darkbtn {
  background:var(--navy);
  color:white
}
.outline {
  border-color:var(--line);
  color:var(--ink);
  background:var(--paper)
}
.sun {
  background:transparent;
  border:1px solid var(--line);
  border-radius:50%;
  width:42px;
  height:42px;
  color:var(--ink);
  cursor:pointer
}
.menu {
  display:none;
  border:0;
  background:none;
  font-size:1.5rem;
  color:var(--ink)
}
.hero {
  padding:78px 0 65px;
  background:radial-gradient(ellipse at 80% 15%,#eae3ff 0,transparent 35%),var(--bg)
}
.heroGrid {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:50px
}
.eyebrow {
  color:var(--purple);
  font-weight:800;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.13em
}
.hero h1 {
  margin:12px 0 18px
}
.hero p {
  font-size:1.15rem;
  max-width:600px
}
.heroActions {
  display:flex;
  gap:12px;
  margin:25px 0
}
.visual {
  border-radius:30px;
  min-height:370px;
  background:linear-gradient(145deg,#ede8ff,#f9d8c6);
  position:relative;
  overflow:hidden;
  padding:26px;
  box-shadow:var(--shadow)
}
.visual:after {
  content:'';
  position:absolute;
  width:230px;
  height:230px;
  border-radius:50%;
  background:#6d36d928;
  right:-38px;
  top:-45px
}
.visualCard {
  position:relative;
  z-index:1;
  background:white;
  border-radius:20px;
  padding:22px;
  margin:35px 0 0 24px;
  box-shadow:var(--shadow);
  max-width:350px;
  color:#182033
}
.visualCard small {
  color:#647084
}
.visualCard strong {
  display:block;
  font:700 1.3rem Manrope;
  margin:8px 0
}
.pill {
  display:inline-block;
  background:#f0edff;
  color:#6434ca;
  padding:5px 10px;
  border-radius:30px;
  font-size:.78rem;
  font-weight:700
}
.section {
  padding:76px 0
}
.sectionHead {
  text-align:center;
  max-width:700px;
  margin:0 auto 38px
}
.sectionHead p {
  font-size:1.05rem
}
.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.card {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow)
}
.card p {
  margin-bottom:0
}
.icon {
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--soft);
  color:var(--purple);
  font-size:1.25rem;
  margin-bottom:16px
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
  align-items:center
}
.steps {
  counter-reset:step
}
.step {
  display:flex;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}
.step:before {
  counter-increment:step;
  content:'0' counter(step);
  font:800 1.3rem Manrope;
  color:var(--orange)
}
.banner {
  background:var(--navy);
  color:#fff;
  border-radius:28px;
  padding:42px
}
.banner h2,.banner p {
  color:#fff
}
.sample {
  font-size:.8rem;
  color:#8b5f13;
  background:#fff4d7;
  border-radius:8px;
  padding:6px 9px;
  display:inline-block;
  font-weight:700
}
.jobcard h3 {
  margin:10px 0
}
.jobmeta {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:.88rem;
  color:var(--muted)
}
.filterbar {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:10px;
  background:var(--paper);
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  margin:24px 0
}
.field {
  margin:0 0 16px
}
.field label {
  font-weight:700;
  display:block;
  margin-bottom:6px
}
.field input,.field select,.field textarea,.filterbar input,.filterbar select {
  width:100%;
  padding:12px 13px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink)
}
textarea {
  min-height:140px;
  resize:vertical
}
.formbox {
  max-width:700px;
  margin:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px;
  box-shadow:var(--shadow)
}
.status {
  padding:5px 10px;
  border-radius:20px;
  background:#e8f7ed;
  color:#267445;
  font-size:.8rem;
  font-weight:700
}
.callout {
  background:var(--soft);
  padding:18px;
  border-radius:14px
}
.faq details {
  border-bottom:1px solid var(--line);
  padding:18px
}
.faq summary {
  font-weight:700;
  cursor:pointer
}
.footer {
  background:#0d1734;
  color:white;
  padding:55px 0 24px
}
.footer p,.footer a {
  color:#c1c9dc
}
.footgrid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:28px
}
.footer h3 {
  color:white
}
.footer a {
  display:block;
  margin:8px 0
}
.copyright {
  border-top:1px solid #ffffff22;
  margin-top:30px;
  padding-top:18px;
  font-size:.85rem
}
.contentHero {
  padding:55px 0 30px
}
.contentHero h1 {
  font-size:clamp(2.3rem,5vw,3.7rem)
}
.content {
  max-width:850px
}
.content li {
  margin:8px 0
}
.formmsg {
  margin-top:12px;
  font-weight:700
}
.rewards {
  border-top:4px solid var(--orange)
}
.dashStats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}
.dashStats strong {
  display:block;
  font:800 2rem Manrope
}
.gallery {
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:12px
}
.gallery div {
  background:linear-gradient(145deg,#dcd5ff,#ffd8c2);
  border-radius:20px;
  min-height:190px;
  padding:18px;
  display:flex;
  align-items:end;
  font-weight:800;
  color:#24254b
}
.notice {
  padding:14px;
  background:#fff5df;
  border-radius:12px;
  color:#634611
}
.inline {
  display:flex;
  gap:9px
}
.inline input {
  flex:1
}
.float {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:8;
  display:flex;
  gap:8px
}
.float a {
  background:#168a51;
  color:#fff;
  padding:10px 14px;
  border-radius:30px;
  box-shadow:var(--shadow)
}
.crumb {
  font-size:.9rem;
  color:var(--muted)
}
:focus-visible {
  outline:3px solid #ff8b45;
  outline-offset:3px
}
[hidden] {
  display:none!important
}
@media(max-width:950px) {
  .navlinks {
    display:none;
    position:absolute;
    top:78px;
    left:0;
    right:0;
    background:var(--paper);
    padding:20px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch
  }
  .navlinks.open {
    display:flex
  }
  .menu {
    display:block
  }
  .actions .hideMob {
    display:none
  }
  .heroGrid,.split {
    grid-template-columns:1fr
  }
  .hero {
    padding-top:48px
  }
  .grid {
    grid-template-columns:repeat(2,1fr)
  }
  .footgrid {
    grid-template-columns:1fr 1fr
  }
  .filterbar {
    grid-template-columns:1fr 1fr
  }
}
@media(max-width:600px) {
  .wrap {
    width:min(100% - 28px,1160px)
  }
  .nav {
    height:68px
  }
  .navlinks {
    top:68px
  }
  .hero {
    padding:42px 0
  }
  .visual {
    min-height:270px;
    padding:16px
  }
  .visualCard {
    margin:25px 0 0 5px
  }
  .section {
    padding:52px 0
  }
  .grid,.footgrid,.dashStats {
    grid-template-columns:1fr
  }
  .filterbar {
    grid-template-columns:1fr
  }
  .banner {
    padding:28px
  }
  .gallery {
    grid-template-columns:1fr 1fr
  }
  .gallery div:first-child {
    grid-column:span 2
  }
  .heroActions {
    flex-wrap:wrap
  }
  .float {
    bottom:10px;
    right:10px
  }
  .formbox {
    padding:20px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}
/* Kelasa editorial homepage refresh */
.kh-hero {
  background:#fff;
  overflow:hidden
}
.kh-hero-grid {
  min-height:590px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  align-items:center;
  gap:12px;
  padding-top:28px;
  padding-bottom:34px
}
.kh-copy {
  position:relative;
  z-index:2;
  padding:35px 0
}
.kh-kicker {
  display:inline-block;
  color:#6d36d9;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase
}
.kh-copy h1 {
  font-size:clamp(3rem,5.4vw,5.1rem);
  line-height:1.02;
  margin:15px 0 18px;
  letter-spacing:-.055em
}
.kh-copy h1 em {
  font-style:normal;
  color:var(--purple)
}
.kh-copy>p {
  font-size:1.13rem;
  max-width:490px;
  color:#46516a
}
.kh-points {
  list-style:none;
  margin:24px 0;
  padding:0;
  display:grid;
  gap:9px
}
.kh-points li {
  display:flex;
  align-items:center;
  gap:11px;
  color:#313c54;
  font-weight:600;
  font-size:.94rem
}
.kh-points li span {
  width:25px;
  height:25px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#6d36d9;
  background:#f1edfc;
  font-size:.8rem
}
.kh-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:24px 0 12px
}
.kh-outline {
  border-color:#bba5f5;
  color:#5426b9;
  background:white
}
.kh-demo-note {
  color:#788195;
  font-size:.78rem
}
.kh-photo {
  position:relative;
  height:510px;
  border-radius:22px;
  overflow:visible;
  background:#f1f3fa
}
.kh-photo:before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background:linear-gradient(90deg,#fff0 55%,#fff2);
  z-index:1;
  pointer-events:none
}
.kh-photo>img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:65% center;
  border-radius:22px
}
.kh-floatcard {
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border:1px solid #eceaf2;
  border-radius:15px;
  background:#fff;
  box-shadow:0 12px 35px #1c23401a
}
.kh-float-top {
  left:-34px;
  top:30%
}
.kh-float-bottom {
  right:-15px;
  bottom:13%
}
.kh-floatcard strong,.kh-floatcard small {
  display:block
}
.kh-floatcard strong {
  font:700 .88rem Manrope;
  color:#182033
}
.kh-floatcard small {
  font-size:.73rem;
  color:#737d90;
  margin-top:3px
}
.kh-orb {
  width:37px;
  height:37px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:1.2rem;
  font-weight:800
}
.kh-orb.purple {
  color:#622ed1;
  background:#f1edfc
}
.kh-orb.orange {
  color:#f26818;
  background:#fff0e7
}
+.kh-trust {
  background:#f5f4fa;
  border-top:1px solid #efedf5;
  border-bottom:1px solid #efedf5
}
.kh-trust-inner {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  color:#354058
}
.kh-trust-inner strong {
  font:700 .95rem Manrope;
  color:#19233b;
  margin-right:16px
}
.kh-trust-inner span {
  font-size:.84rem;
  font-weight:600
}
.kh-trust-inner i {
  height:5px;
  width:5px;
  background:#f26818;
  border-radius:50%
}
.kh-steps {
  padding-top:74px;
  padding-bottom:66px
}
.kh-step-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}
.kh-step {
  position:relative;
  min-height:202px;
  border:1px solid #ececf3;
  background:#fff;
  border-radius:18px;
  padding:23px 21px;
  box-shadow:0 8px 26px #1c234008
}
.kh-step-icon {
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  font-size:1.45rem;
  font-weight:800;
  margin-bottom:14px
}
.kh-step-icon.purple {
  background:#f1edfc;
  color:#6d36d9
}
.kh-step-icon.green {
  background:#e8f7ee;
  color:#168653
}
.kh-step-icon.violet {
  background:#f2edff;
  color:#6d36d9
}
.kh-step-icon.orange {
  background:#fff0e7;
  color:#f26818
}
.kh-step>small {
  position:absolute;
  top:29px;
  right:20px;
  color:#a4aabe;
  font-weight:800;
  font-size:.75rem
}
.kh-step h3 {
  margin:0 0 7px
}
.kh-step p {
  font-size:.88rem;
  line-height:1.55
}
.kh-audience {
  padding:0 0 72px
}
.kh-audience-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.kh-audience-card {
  min-height:300px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:flex-start;
  border:1px solid #ececf3;
  border-radius:21px;
  background:linear-gradient(125deg,#fff,#f6f5fb);
  padding:31px;
  box-shadow:0 10px 30px #1c234008
}
.kh-audience-card>div {
  position:relative;
  z-index:2;
  max-width:76%
}
.kh-audience-card h2 {
  font-size:1.55rem;
  margin:13px 0 9px
}
.kh-audience-card p {
  font-size:.93rem;
  line-height:1.6;
  color:#59647a
}
.kh-audience-icon {
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f1edfc;
  color:#6d36d9;
  font-size:1.4rem;
  font-weight:800
}
.kh-audience-card .btn {
  margin-top:9px;
  font-size:.86rem
}
.kh-worker>img {
  position:absolute;
  width:57%;
  height:100%;
  right:-9%;
  bottom:-16%;
  object-fit:cover;
  object-position:78% center;
  mask-image:linear-gradient(90deg,transparent 0%,black 38%);
  opacity:.84
}
.kh-referral {
  background:#f8f5ff
}
.kh-referral .kh-audience-icon {
  background:#fff0e7;
  color:var(--purple)
}
.kh-purple {
  background:#5925be;
  color:white
}
.kh-referral-art {
  position:absolute!important;
  right:24px;
  bottom:29px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:#6440ad;
  opacity:.75
}
.kh-referral-art span {
  padding:11px 16px;
  border:1px solid #ded4f6;
  border-radius:12px;
  background:#fff;
  font-weight:700;
  font-size:.8rem
}
.kh-referral-art b {
  font-size:1.3rem;
  color:var(--purple)
}
.kh-why {
  padding:68px 0 74px;
  background:#15113c;
  color:white;
  position:relative;
  overflow:hidden
}
.kh-why:before {
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  border-radius:50%;
  background:radial-gradient(circle,#50318b 0,transparent 68%);
  right:-140px;
  top:-240px;
  opacity:.45
}
.kh-why .wrap {
  position:relative
}
.kh-why-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:38px
}
.kh-why h2 {
  color:#fff;
  font-size:clamp(2rem,4vw,3rem);
  margin:11px 0
}
.kh-why-head p {
  color:#c5c2d7;
  max-width:590px;
  margin-bottom:0
}
.kh-why .kh-kicker {
  color:#c7b5ff
}
.kh-light {
  background:#fff;
  color:#24134a;
  white-space:nowrap
}
.kh-benefits {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px
}
.kh-benefits article {
  border-top:1px solid #ffffff35;
  padding-top:20px
}
.kh-benefit-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#ffffff15;
  color:#ffae6c;
  font-size:1.2rem;
  font-weight:800
}
.kh-benefits h3 {
  font-size:1rem;
  color:white;
  margin:13px 0 6px
}
.kh-benefits p {
  font-size:.85rem;
  color:#c5c2d7;
  line-height:1.55
}
.kh-jobs .sectionHead {
  margin-bottom:28px
}
.kh-job {
  box-shadow:0 8px 24px #1c234008
}
.kh-job h3 {
  margin:14px 0 9px
}
.kh-job p {
  font-size:.91rem
}
.kh-jobs-cta {
  text-align:center;
  margin-top:28px
}
.kh-contact {
  padding-top:20px
}
.kh-contact-inner {
  border-radius:22px;
  padding:34px 40px;
  background:#f0edfa;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px
}
.kh-contact-inner h2 {
  margin:8px 0;
  font-size:2rem
}
.kh-contact-inner p {
  margin:0
}
.kh-contact-actions {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap
}
.kh-contact-actions>a:not(.btn) {
  font-weight:600;
  font-size:.86rem
}
@media(max-width:950px) {
  .kh-hero-grid {
    grid-template-columns:1fr 1fr;
    gap:18px;
    min-height:510px
  }
  .kh-photo {
    height:440px
  }
  .kh-copy h1 {
    font-size:clamp(2.6rem,6vw,4.2rem)
  }
  .kh-trust-inner {
    gap:12px;
    padding:14px 0
  }
  .kh-trust-inner strong {
    width:100%;
    text-align:center;
    margin:0
  }
  .kh-step-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .kh-benefits {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:650px) {
  .kh-hero-grid {
    grid-template-columns:1fr;
    padding-top:16px;
    gap:10px
  }
  .kh-copy {
    padding:28px 0 8px
  }
  .kh-copy h1 {
    font-size:3rem
  }
  .kh-copy>p {
    font-size:1rem
  }
  .kh-photo {
    height:320px;
    margin:4px 5px 14px
  }
  .kh-photo>img {
    object-position:70% center
  }
  .kh-float-top {
    left:-8px;
    top:20%
  }
  .kh-float-bottom {
    right:-8px;
    bottom:10%
  }
  .kh-floatcard {
    padding:10px 12px;
    gap:8px
  }
  .kh-floatcard strong {
    font-size:.75rem
  }
  .kh-floatcard small {
    font-size:.65rem
  }
  .kh-orb {
    width:32px;
    height:32px
  }
  .kh-trust-inner {
    justify-content:flex-start;
    gap:9px 13px
  }
  .kh-trust-inner strong {
    text-align:left;
    font-size:.9rem
  }
  .kh-trust-inner span {
    font-size:.75rem
  }
  .kh-trust-inner i {
    width:4px;
    height:4px
  }
  .kh-steps {
    padding-top:50px
  }
  .kh-step-grid {
    gap:11px
  }
  .kh-step {
    padding:16px;
    min-height:188px
  }
  .kh-step-icon {
    width:40px;
    height:40px;
    font-size:1.2rem
  }
  .kh-step h3 {
    font-size:1.03rem
  }
  .kh-step p {
    font-size:.8rem
  }
  .kh-audience-grid {
    grid-template-columns:1fr
  }
  .kh-audience-card {
    min-height:280px;
    padding:24px
  }
  .kh-audience-card>div {
    max-width:83%
  }
  .kh-worker>img {
    width:63%;
    right:-14%
  }
  .kh-why {
    padding:52px 0
  }
  .kh-why-head {
    align-items:flex-start;
    flex-direction:column
  }
  .kh-benefits {
    gap:20px 15px
  }
  .kh-benefits p {
    font-size:.78rem
  }
  .kh-contact-inner {
    align-items:flex-start;
    flex-direction:column;
    padding:26px
  }
  .kh-contact-actions {
    gap:10px
  }
  .kh-contact-actions .btn {
    width:100%
  }
}
.kh-photo picture {
  display:block;
  width:100%;
  height:100%;
  border-radius:22px;
  overflow:hidden
}
.kh-photo picture img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:65% center;
  border-radius:22px
}
.kh-worker picture {
  position:absolute;
  width:57%;
  height:100%;
  right:-9%;
  bottom:-16%;
  mask-image:linear-gradient(90deg,transparent 0%,black 38%);
  opacity:.84
}
.kh-worker picture img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:78% center
}
@media(max-width:650px) {
  .kh-worker picture {
    width:63%;
    right:-14%
  }
  .kh-photo picture img {
    object-position:70% center
  }
}
/* RiderHub reference recreation */
.kelasa-home {
  background:#fff;
  color:#16213b
}
.kelasa-home .topbar {
  background:#fff;
  border-bottom:0
}
.kelasa-home .nav {
  height:74px
}
.rh-brand {
  display:flex;
  align-items:center;
  gap:7px;
  margin-right:auto;
  font:800 1.65rem Manrope;
  color:#261352;
  letter-spacing:-.04em
}
.rh-brand svg {
  width:38px;
  height:34px
}
.rh-brand>span>span {
  color:#5722bd
}
.kelasa-home .navlinks {
  gap:clamp(12px,2vw,30px)
}
.kelasa-home .navlinks a {
  font-size:.84rem;
  white-space:nowrap
}
.kelasa-home .navlinks .rh-login {
  color:#5728bd;
  border:1px solid #e1d6f8;
  border-radius:10px;
  padding:9px 20px
}
.rh-orange {
  background:var(--purple);
  color:white;
  border:0
}
.rh-orange:hover {
  background:#5722bd;
  color:#fff
}
.rh-hero {
  background:#fff;
  overflow:hidden
}
.rh-hero-inner {
  height:385px;
  display:grid;
  grid-template-columns:49% 51%;
  align-items:center;
  position:relative
}
.rh-copy {
  position:relative;
  z-index:2;
  padding:12px 0 10px 12px
}
.rh-copy h1 {
  font-size:clamp(2.8rem,5.25vw,4.4rem);
  line-height:1.04;
  letter-spacing:-.055em;
  color:#101a35;
  margin:0 0 12px
}
.rh-copy h1 em {
  font-style:normal;
  color:var(--purple)
}
.rh-copy>p {
  font-size:1.06rem;
  line-height:1.42;
  max-width:460px;
  color:#293653;
  margin:0 0 20px
}
.rh-checks {
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:grid;
  gap:6px
}
.rh-checks li {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.85rem;
  color:#27344e
}
.rh-mini-icon {
  height:30px;
  width:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.9rem;
  font-weight:800
}
.rh-mini-icon.purple {
  background:#f3e9ff;
  color:#5720bd
}
.rh-mini-icon.orange {
  background:#fff1e7;
  color:#f26818
}
.rh-mini-icon.violet {
  background:#f0eaff;
  color:#6d36d9
}
.rh-buttons {
  display:flex;
  gap:11px;
  flex-wrap:wrap
}
.rh-buttons .btn,.rh-audience .btn {
  padding:10px 20px;
  border-radius:10px;
  font-size:.84rem
}
.rh-buttons b,.rh-audience b {
  font-size:1.02rem;
  margin-left:5px
}
.rh-partner-btn {
  border:1px solid #7a4bda;
  color:#5520b8;
  background:#fff
}
.rh-hero-image {
  height:340px;
  align-self:end;
  position:relative;
  border-radius:18px 18px 0 0;
  overflow:visible
}
.rh-hero-image:before {
  content:"";
  position:absolute;
  z-index:1;
  inset:0 0 0 -45px;
  background:linear-gradient(90deg,#fff 0%,#ffffffdb 12%,#fff0 43%);
  pointer-events:none
}
.rh-hero-image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:67% 42%;
  border-radius:18px 18px 0 0
}
.rh-badge {
  position:absolute;
  z-index:2;
  background:#fff;
  border-radius:12px;
  box-shadow:0 9px 26px #131b351d;
  padding:10px 14px;
  color:#18203a;
  line-height:1.1
}
.rh-badge span {
  float:left;
  margin-right:9px;
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#f4edff;
  color:#6124bd;
  font-size:1.2rem
}
.rh-badge strong {
  font:800 1rem Manrope;
  display:block
}
.rh-badge small {
  font-size:.68rem;
  display:block;
  margin-top:3px
}
.rh-badge.reward {
  left:-3%;
  top:36%;
  background:#13a86c;
  color:white;
  transform:rotate(-4deg)
}
.rh-badge.reward span {
  background:#ffffff26;
  color:#fff
}
.rh-badge.verified {
  right:4%;
  top:33%;
  padding:13px
}
.rh-badge.joined {
  right:19%;
  bottom:8%;
  padding:12px 16px
}
.rh-badge.joined strong {
  font-size:1.13rem
}
.rh-partners {
  margin:0 auto;
  width:min(1160px,calc(100% - 40px));
  background:#f8f8fc;
  border-radius:16px;
  padding:13px 20px 15px;
  text-align:center
}
.rh-partners p {
  margin:0 0 9px;
  color:#17213b;
  font:700 .78rem Manrope
}
.rh-logos {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(20px,4vw,55px);
  min-height:37px
}
.rh-logos span {
  font-weight:900;
  line-height:1
}
.rh-logos .zepto {
  font-size:1.65rem;
  color:#6e1bb5;
  letter-spacing:-.06em
}
.rh-logos .blinkit {
  font-size:1.2rem;
  color:#111;
  background:#ffcf32;
  padding:8px 10px;
  border-radius:6px;
  letter-spacing:-.04em
}
.rh-logos .swiggy {
  font-size:.81rem;
  color:#f26a17;
  text-align:left;
  line-height:.8
}
.rh-logos .swiggy b {
  font-size:1.6rem;
  vertical-align:middle
}
.rh-logos .swiggy small {
  font-size:.7rem
}
.rh-logos .zomato {
  font-size:1.45rem;
  color:#e51b32;
  font-style:italic;
  letter-spacing:-.06em
}
.rh-logos .andmore {
  font-size:.78rem;
  color:#404960;
  font-weight:500
}
.rh-how {
  padding:20px 0 18px
}
.rh-how .sectionHead {
  margin:0 auto 16px
}
.rh-how .sectionHead h2 {
  font-size:1.95rem;
  margin:0 0 2px;
  color:#111a34
}
.rh-how .sectionHead p {
  margin:0;
  color:#3b4760;
  font-size:.94rem
}
.rh-steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}
.rh-steps article {
  position:relative;
  text-align:center;
  border-radius:15px;
  background:#f8f8fc;
  padding:15px 12px 13px;
  min-height:135px
}
.rh-steps article:not(:last-child):after {
  content:"›";
  position:absolute;
  right:-15px;
  top:47px;
  color:#9ca6b8;
  font-size:1.65rem;
  z-index:1
}
.rh-step-icon {
  width:41px;
  height:41px;
  margin:0 auto 5px;
  display:grid;
  place-items:center;
  font-size:1.9rem;
  font-weight:900
}
.rh-step-icon.purple {
  color:#7624d5
}
.rh-step-icon.green {
  color:#08a66a
}
.rh-step-icon.violet {
  color:#5722bd
}
.rh-step-icon.orange {
  color:#f26818
}
.rh-step-icon b {
  font-size:.8rem;
  margin-left:-14px;
  margin-top:18px
}
.rh-steps h3 {
  font-size:.88rem;
  color:#16213c;
  margin:0 0 5px
}
.rh-steps p {
  font-size:.73rem;
  line-height:1.38;
  color:#34405a;
  margin:0
}
.rh-stats {
  margin:0 auto 15px;
  width:min(1160px,calc(100% - 40px));
  background:#f5f0ff;
  border-radius:14px;
  padding:12px 18px
}
.rh-stats-inner {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px
}
.rh-stats-inner>div {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px
}
.rh-stat-icon {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#fff;
  font-size:1.4rem;
  font-weight:900
}
.rh-stat-icon.purple {
  color:#5b1cb9
}
.rh-stat-icon.orange {
  color:#f26818
}
.rh-stat-icon.violet {
  color:#6b28ca
}
.rh-stat-icon.blue {
  color:#1263e9
}
.rh-stats p {
  margin:0;
  line-height:1.1
}
.rh-stats strong {
  display:block;
  font:800 1.18rem Manrope;
  color:#5c1bc2
}
.rh-stats small {
  display:block;
  font-size:.71rem;
  color:#283550;
  margin-top:4px
}
.rh-audiences {
  padding:0 0 11px
}
.rh-audience-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.rh-audience {
  height:175px;
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#f8f8fc;
  padding:19px 18px;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px
}
.rh-aud-icon {
  height:36px;
  width:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:1.3rem;
  font-weight:900
}
.rh-aud-icon.green {
  color:#13a66b;
  background:#e8f8ef
}
.rh-aud-icon.orange {
  color:#f26818;
  background:#fff0e6
}
.rh-audience h2 {
  font:800 .94rem Manrope;
  color:#15203b;
  margin:0 0 6px
}
.rh-audience p {
  font-size:.72rem;
  line-height:1.38;
  color:#35415a;
  margin:0 0 9px;
  max-width:290px
}
.rh-purple-btn {
  background:#5717b9;
  color:#fff
}
.rh-audience img {
  position:absolute;
  right:0;
  bottom:0;
  width:44%;
  height:75%;
  object-fit:cover;
  object-position:67% 40%;
  mask-image:linear-gradient(90deg,transparent,#000 36%)
}
.rh-audience.driver img {
  object-position:70% 20%;
  width:42%;
  height:94%;
  mask-image:linear-gradient(90deg,transparent,#000 32%)
}
.rh-audience.company>div,.rh-audience.driver>div {
  position:relative;
  z-index:1
}
.rh-why {
  padding:0 0 10px
}
.rh-why .wrap {
  background:#1a0d3d;
  border-radius:17px;
  overflow:hidden;
  position:relative;
  background-image:linear-gradient(90deg,#1a0d3df5 0%,#24104be8 52%,#211241a8 100%),url('../assets/images/kelasa-rider-hero.webp');
  background-position:center,center 47%;
  background-size:cover
}
.rh-why-shade {
  padding:20px 30px 17px;
  color:#fff
}
.rh-kicker {
  font-size:.75rem;
  color:#cbb8ff;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}
.rh-why h2 {
  color:#fff;
  font-size:1.75rem;
  margin:0
}
.rh-why-shade>p {
  color:#ece8fa;
  font-size:.91rem;
  margin:0 0 16px
}
.rh-reasons {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.rh-reasons article {
  display:flex;
  align-items:center;
  gap:10px;
  color:white
}
.rh-reason-icon {
  width:39px;
  height:39px;
  flex:none;
  border-radius:50%;
  background:#ffffff18;
  display:grid;
  place-items:center;
  font-size:1.2rem;
  font-weight:900
}
.rh-reason-icon.green {
  color:#20d792;
  border:3px solid #20c98b
}
.rh-reason-icon.violet {
  color:#b39bff;
  border:3px solid #733bfb
}
.rh-reason-icon.orange {
  color:#ff9b43;
  border:3px solid #ff741b
}
.rh-reason-icon.blue {
  color:#6cbbff;
  border:3px solid #287ef5
}
.rh-reasons strong {
  font-size:.7rem;
  display:block
}
.rh-reasons small {
  font-size:.64rem;
  line-height:1.25;
  color:#e3dff0;
  display:block;
  margin-top:4px
}
.kelasa-home .footer,.kelasa-home .float {
  display:none
}
@media(max-width:900px) {
  .kelasa-home .navlinks {
    gap:12px
  }
  .kelasa-home .navlinks a {
    font-size:.76rem
  }
  .rh-hero-inner {
    height:370px;
    grid-template-columns:48% 52%
  }
  .rh-copy h1 {
    font-size:3.1rem
  }
  .rh-hero-image {
    height:320px
  }
  .rh-audience img {
    width:40%
  }
  .rh-audience p {
    max-width:250px
  }
  .rh-why-shade {
    padding:20px
  }
  .rh-reasons {
    gap:10px
  }
}
@media(max-width:680px) {
  .kelasa-home .nav {
    height:66px
  }
  .kelasa-home .navlinks {
    display:none;
    position:absolute;
    top:66px;
    left:0;
    right:0;
    background:#fff;
    padding:18px 22px;
    box-shadow:0 12px 24px #141a3217;
    align-items:stretch;
    z-index:30
  }
  .kelasa-home .navlinks.open {
    display:flex
  }
  .kelasa-home .menu {
    display:block
  }
  .kelasa-home .actions {
    margin-left:8px
  }
  .kelasa-home .actions .sun {
    display:none
  }
  .rh-hero-inner {
    height:auto;
    grid-template-columns:1fr;
    padding-top:20px
  }
  .rh-copy {
    padding:13px 5px 6px
  }
  .rh-copy h1 {
    font-size:3.2rem
  }
  .rh-copy>p {
    font-size:.98rem;
    max-width:350px
  }
  .rh-checks {
    gap:5px
  }
  .rh-hero-image {
    height:285px;
    margin:0 -2px
  }
  .rh-hero-image img {
    border-radius:16px 16px 0 0;
    object-position:68% center
  }
  .rh-badge.reward {
    left:0;
    top:35%
  }
  .rh-badge.verified {
    right:2%;
    top:20%
  }
  .rh-badge.joined {
    right:13%;
    bottom:4%
  }
  .rh-partners {
    width:calc(100% - 28px);
    padding:12px 10px
  }
  .rh-partners p {
    font-size:.69rem
  }
  .rh-logos {
    gap:15px;
    flex-wrap:wrap
  }
  .rh-logos .zepto {
    font-size:1.35rem
  }
  .rh-logos .blinkit {
    font-size:1rem
  }
  .rh-logos .zomato {
    font-size:1.2rem
  }
  .rh-logos .andmore {
    display:none
  }
  .rh-how {
    padding:30px 0 16px
  }
  .rh-how .sectionHead h2 {
    font-size:1.7rem
  }
  .rh-steps {
    grid-template-columns:repeat(2,1fr);
    gap:11px
  }
  .rh-steps article {
    min-height:140px
  }
  .rh-steps article:nth-child(2):after {
    display:none
  }
  .rh-stats {
    width:calc(100% - 28px);
    padding:12px;
    margin-bottom:12px
  }
  .rh-stats-inner {
    grid-template-columns:repeat(2,1fr);
    gap:13px
  }
  .rh-stats-inner>div {
    justify-content:flex-start
  }
  .rh-stat-icon {
    width:34px;
    height:34px
  }
  .rh-stats strong {
    font-size:1rem
  }
  .rh-stats small {
    font-size:.65rem
  }
  .rh-audience-grid {
    grid-template-columns:1fr;
    gap:11px
  }
  .rh-audience {
    height:170px;
    padding:17px 14px;
    grid-template-columns:34px 1fr
  }
  .rh-audience img {
    width:43%;
    height:78%
  }
  .rh-audience.driver img {
    width:40%;
    height:94%
  }
  .rh-audience p {
    max-width:235px;
    font-size:.68rem
  }
  .rh-audience h2 {
    font-size:.88rem
  }
  .rh-audience .btn {
    padding:9px 12px;
    font-size:.73rem
  }
  .rh-why .wrap {
    width:calc(100% - 20px)
  }
  .rh-why-shade {
    padding:19px 17px
  }
  .rh-why h2 {
    font-size:1.55rem
  }
  .rh-reasons {
    grid-template-columns:repeat(2,1fr);
    gap:15px 9px
  }
  .rh-reasons article {
    gap:8px
  }
  .rh-reason-icon {
    height:34px;
    width:34px
  }
  .rh-reasons strong {
    font-size:.66rem
  }
  .rh-reasons small {
    font-size:.59rem
  }
}
.rh-icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.rh-mini-icon svg,.rh-badge span svg,.rh-step-icon svg,.rh-stat-icon svg,.rh-aud-icon svg,.rh-reason-icon svg {
  width:68%;
  height:68%;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:block
}
.rh-step-icon svg {
  width:37px;
  height:37px
}
.rh-aud-icon svg {
  width:24px;
  height:24px
}
.rh-reason-icon svg {
  width:22px;
  height:22px
}
.rh-badge span svg {
  width:23px;
  height:23px
}
.rh-stat-icon svg {
  width:25px;
  height:25px
}
/* Match the reference hero's single-line headline and layered image while keeping the controls visible. */
@media(min-width:681px) {
  .rh-hero-inner {
    display:block;
    height:385px
  }
  .rh-copy {
    width:66%;
    max-width:690px;
    padding-top:18px;
    padding-left:12px
  }
  .rh-copy h1 {
    font-size:clamp(2.45rem,3.5vw,3rem);
    white-space:nowrap;
    margin-bottom:10px
  }
  .rh-copy>p {
    font-size:1rem;
    line-height:1.35;
    margin-bottom:14px;
    max-width:440px
  }
  .rh-checks {
    gap:4px;
    margin-bottom:15px
  }
  .rh-checks li {
    font-size:.81rem
  }
  .rh-hero-image {
    position:absolute;
    right:0;
    bottom:0;
    width:57%;
    height:340px;
    z-index:0
  }
  .rh-hero-image:before {
    inset:0 0 0 -30%;
    background:linear-gradient(90deg,#fff 0%,#ffffffd8 18%,#fff0 57%)
  }
  .rh-copy {
    z-index:3
  }
  .rh-buttons {
    position:relative;
    z-index:3
  }
}
@media(min-width:681px) and (max-width:900px) {
  .rh-copy h1 {
    font-size:2.5rem
  }
  .rh-copy {
    width:68%;
    padding-left:4px
  }
  .rh-hero-image {
    width:58%;
    height:320px
  }
  .rh-copy>p {
    max-width:350px
  }
  .rh-badge.reward {
    left:1%
  }
}
@media(min-width:681px) {
  .rh-hero-inner {
    height:340px
  }
  .rh-hero-image {
    height:340px
  }
  .rh-how {
    padding-top:10px
  }
  .rh-how .sectionHead {
    margin-bottom:9px
  }
}
@media(min-width:681px) and (max-width:900px) {
  .rh-hero-inner {
    height:340px
  }
  .rh-hero-image {
    height:340px
  }
}
.kelasa-home .sun {
  display:none
}
.rh-logos .swiggy b {
  display:inline-grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#f26818;
  color:#fff;
  vertical-align:middle;
  font-size:1.2rem
}
@media(max-width:680px) {
  .rh-copy h1 {
    font-size:clamp(2rem,8.2vw,2.6rem);
    line-height:1.07;
    white-space:normal
  }
  .rh-copy {
    width:100%;
    padding-left:0
  }
  .rh-hero-inner {
    padding-top:16px
  }
  .rh-hero-image {
    margin-top:5px
  }
  .rh-hero-image img {
    object-position:70% center
  }
  .rh-partners {
    padding-left:8px;
    padding-right:8px
  }
}
/* Partner wordmarks in the homepage strip. */
.rh-logos .zepto,.rh-logos .zomato {
  font:800 .91rem Manrope;
  color:#5922b9;
  font-style:normal;
  letter-spacing:0
}
.rh-logos .blinkit {
  font:800 .83rem Manrope;
  color:#5722bd;
  background:#f0eaff;
  border:1px solid #dfd2fb;
  padding:9px 11px
}
.rh-logos .swiggy {
  font:700 .82rem Manrope;
  color:var(--purple);
  line-height:1.05
}
.rh-logos .swiggy small {
  font:500 .68rem 'DM Sans',sans-serif;
  color:#657086
}
/* Partner names match the reference strip. */
.rh-logos .zepto {
  font:800 1.65rem Manrope;
  color:#6e1bb5;
  letter-spacing:-.06em
}
.rh-logos .blinkit {
  font:900 1.2rem Manrope;
  color:#111;
  background:#ffcf32;
  border:0;
  padding:8px 10px;
  border-radius:6px;
  letter-spacing:-.04em
}
.rh-logos .swiggy {
  font:800 .81rem Manrope;
  color:#f26a17;
  text-align:left;
  line-height:.8
}
.rh-logos .swiggy b {
  display:inline-grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#f26818;
  color:#fff;
  vertical-align:middle;
  font-size:1.2rem
}
.rh-logos .swiggy small {
  font:700 .7rem Manrope;
  color:#f26a17
}
.rh-logos .zomato {
  font:900 1.45rem Manrope;
  color:#e51b32;
  font-style:italic;
  letter-spacing:-.06em
}
@media(max-width:680px) {
  .rh-logos {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-items:center;
    gap:12px 18px;
    padding:4px 4px 2px
  }
  .rh-logos .zepto {
    font-size:1.45rem
  }
  .rh-logos .blinkit {
    font-size:1.05rem
  }
  .rh-logos .zomato {
    font-size:1.25rem
  }
  .rh-logos .andmore {
    display:none
  }
  .rh-badge {
    padding:8px 10px;
    border-radius:10px;
    max-width:46%;
    box-shadow:0 6px 18px #131b3525
  }
  .rh-badge span {
    width:29px;
    height:29px;
    margin-right:7px;
    border-radius:8px
  }
  .rh-badge strong {
    font-size:.8rem
  }
  .rh-badge small {
    font-size:.61rem;
    line-height:1.2
  }
  .rh-badge.reward {
    left:2%;
    top:8%;
    transform:none
  }
  .rh-badge.verified {
    right:2%;
    top:8%
  }
  .rh-badge.joined {
    right:50%;
    bottom:6%;
    transform:translateX(50%);
    white-space:nowrap
  }
}
@media(max-width:360px) {
  .rh-badge {
    padding:7px 8px
  }
  .rh-badge span {
    width:25px;
    height:25px;
    margin-right:5px
  }
  .rh-badge strong {
    font-size:.72rem
  }
  .rh-badge small {
    font-size:.56rem
  }
}
/* Current light-only header, genuine Instamart artwork, and enquiry form details. */
.btn.primary {
  color:#fff
}
.page-cta {
  margin-top:28px
}
.page-cta .btn {
  min-width:220px
}
.rh-logos .instamart {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font:800 .75rem/1.1 Manrope;
  color:#f26a17;
  text-align:left;
  white-space:nowrap
}
.rh-logos .instamart img {
  display:block;
  width:43px;
  height:43px;
  object-fit:contain;
  border-radius:6px
}
.hp-field {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}
.consent {
  display:block;
  line-height:1.5;
  margin:14px 0
}
.consent input {
  margin-right:7px
}
.formmsg {
  min-height:1.5em
}
button:disabled {
  opacity:.65;
  cursor:wait
}
@media(max-width:680px) {
  .rh-logos .instamart img {
    width:38px;
    height:38px
  }
  .rh-logos .instamart {
    font-size:.68rem
  }
}
/* Supplied Kelasa wordmark in the site header */
.kelasa-home .nav .brand {
  color:var(--purple)
}
@media(max-width:680px) {
}
/* Delivery rider company listings */
.delivery-jobs-page {
  padding:56px 0 72px
}
.delivery-jobs-page h1 {
  margin:8px 0 10px
}
.jobs-intro {
  max-width:760px;
  margin:0 0 26px
}
.platform-search-label {
  display:block;
  font-weight:700;
  color:var(--navy);
  margin-bottom:6px
}
.platform-search {
  width:min(100%,520px);
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--ink)
}
.platform-count {
  font-size:.88rem;
  margin:12px 0
}
.delivery-platform-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.delivery-job-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:22px
}
.delivery-job-card[hidden] {
  display:none
}
.platform-brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:60px
}
.platform-logo-wrap {
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  flex:none
}
.platform-logo {
  display:block;
  width:48px;
  height:48px;
  object-fit:contain
}
.platform-brand strong {
  font:800 1.05rem Manrope;
  color:var(--navy)
}
.delivery-job-card h2 {
  font:800 1.12rem Manrope;
  margin:6px 0 0
}
.platform-description {
  font-size:.9rem;
  line-height:1.45;
  margin:0;
  min-height:40px
}
.delivery-job-card .jobmeta {
  font-size:.8rem
}
.delivery-job-card .btn {
  margin-top:auto
}
.empty-platforms {
  padding:16px;
  background:#fff;
  border-radius:12px
}
@media(max-width:900px) {
  .delivery-platform-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:600px) {
  .delivery-jobs-page {
    padding:38px 0 54px
  }
  .delivery-platform-grid {
    grid-template-columns:1fr;
    gap:12px
  }
  .delivery-job-card {
    padding:18px
  }
  .jobs-intro {
    font-size:.96rem
  }
}
.formmsg[data-state="success"] {
  margin:12px 0;
  padding:14px 16px;
  border:1px solid #b8e4c8;
  border-radius:12px;
  background:#eaf8ef;
  color:#12673a;
  font-weight:700
}
.formmsg[data-state="error"] {
  margin:12px 0;
  padding:14px 16px;
  border:1px solid #efc1c1;
  border-radius:12px;
  background:#fff1f1;
  color:#9b2424;
  font-weight:700
}
.formmsg[data-state="sending"] {
  margin:12px 0;
  padding:12px 14px;
  border-radius:10px;
  background:#f3efff;
  color:#5128a8
}
@media(max-width:680px) {
  .float {
    display:flex;
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    align-items:center;
    gap:8px
  }
  .kelasa-home .float {
    display:flex
  }
  .float .back-to-top {
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:var(--purple);
    color:#fff;
    font-size:1.35rem;
    font-weight:800;
    box-shadow:var(--shadow);
    cursor:pointer
  }
  .float>a {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:10px 14px
  }
}
/* Compact icon-only contact shortcuts */
.contact-actions .contact-action,.contact-actions .back-to-top {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  box-shadow:var(--shadow);
  text-decoration:none;
  transition:transform .18s,filter .18s
}
.contact-actions .contact-action:hover,.contact-actions .back-to-top:hover {
  transform:translateY(-2px);
  filter:brightness(.96);
  text-decoration:none
}
.contact-actions .contact-action svg,.contact-actions .back-to-top svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.contact-actions .whatsapp-action {
  background:#20b95a;
  color:#fff
}
.contact-actions .whatsapp-action svg {
  width:25px;
  height:25px
}
.contact-actions .telegram-action {
  background:#229ed9;
  color:#fff
}
.contact-actions .telegram-action svg {
  fill:currentColor;
  stroke:none
}
.contact-actions .call-action {
  background:#1466dc;
  color:#fff
}
.contact-actions .mail-action {
  background:#6d36d9;
  color:#fff
}
.contact-actions .back-to-top {
  background:#fff;
  color:#5722bd;
  cursor:pointer
}
.contact-actions .back-to-top svg {
  fill:none
}
.contact-actions .contact-action:not(.whatsapp-action) {
  display:none
}
@media(max-width:680px) {
  .contact-actions {
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
    max-width:calc(100vw - 24px)
  }
  .contact-actions .contact-action:not(.whatsapp-action) {
    display:grid
  }
  .kelasa-home .contact-actions {
    display:flex
  }
  .contact-actions .contact-action,.contact-actions .back-to-top {
    width:44px;
    height:44px
  }
}
.form-section-title {
  font:800 1.12rem Manrope;
  color:var(--navy);
  margin:26px 0 14px
}
.form-section-title:first-child {
  margin-top:0
}
.optional-label {
  font:500 .82rem 'DM Sans',sans-serif;
  color:var(--muted)
}


.scroll-reveal{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.scroll-reveal.is-visible{opacity:1;transform:translateY(0)}
.contact-map{display:block;width:100%;min-height:260px;margin-top:16px;border:0;border-radius:16px;background:var(--soft)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.scroll-reveal{opacity:1;transform:none}}

.menu{min-width:44px;min-height:44px;padding:8px;cursor:pointer}


/* On phones, show the rider visual and its reward badges before the hero copy. */
@media (max-width: 680px) {
  .rh-hero-image {
    order: 1;
  }

  .rh-copy {
    order: 2;
  }
}

/* Shared Kelasa color, CTA, and icon system */
:root { --purple:#6d36d9; --navy:#101b3d; --bg:#f7f8fc; --ink:#182033; }
body { background-color:#f7f8fc; color:#182033; }
h1 em { color:#6d36d9 !important; }
.brand { color:#6d36d9; }
.btn, a.btn, button.btn, .rh-orange, .rh-purple-btn, .rh-partner-btn,
.about-cta-btn.primary, .about-cta-btn.secondary, .how-cta-button,
.workers-btn, .faq-button {
  background:#6d36d9 !important;
  border-color:#6d36d9 !important;
  color:#fff !important;
}
.btn:hover, a.btn:hover, button.btn:hover, .rh-orange:hover, .rh-purple-btn:hover,
.rh-partner-btn:hover, .about-cta-btn.primary:hover, .about-cta-btn.secondary:hover,
.how-cta-button:hover, .workers-btn:hover, .faq-button:hover {
  background:#5722bd !important;
  border-color:#5722bd !important;
  color:#fff !important;
}
.navlinks .btn::before, .rh-buttons .rh-orange::before {
  content:""; display:inline-block; width:17px; height:17px; flex:0 0 17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4 0-7 2-7 5v1h14v-1c0-3-3-5-7-5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4 0-7 2-7 5v1h14v-1c0-3-3-5-7-5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rh-partner-btn::before {
  content:""; display:inline-block; width:17px; height:17px; flex:0 0 17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 2a8 8 0 1 0 4.9 14.3L21 22l1-1-5.7-6.1A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 2a8 8 0 1 0 4.9 14.3L21 22l1-1-5.7-6.1A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rh-purple-btn::before {
  content:""; display:inline-block; width:17px; height:17px; flex:0 0 17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 21V5l8-3 8 3v16h-6v-6h-4v6H4zm3-12h2V7H7v2zm0 4h2v-2H7v2zm8-4h2V7h-2v2zm0 4h2v-2h-2v2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 21V5l8-3 8 3v16h-6v-6h-4v6H4zm3-12h2V7H7v2zm0 4h2v-2H7v2zm8-4h2V7h-2v2zm0 4h2v-2h-2v2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.delivery-job-card .btn::before, .workers-btn::before {
  content:""; display:inline-block; width:17px; height:17px; flex:0 0 17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 4V2h6v2h5a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5zm2 0h2V3h-2v1zM4 9v10h16V9H4zm0-3v1h16V6H4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 4V2h6v2h5a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5zm2 0h2V3h-2v1zM4 9v10h16V9H4zm0-3v1h16V6H4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
button[type=submit].btn::before {
  content:""; display:inline-block; width:17px; height:17px; flex:0 0 17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 3 22 12 2 21l2-8 11-1-11-1-2-8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 3 22 12 2 21l2-8 11-1-11-1-2-8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faq-button::before {
  content:""; display:inline-block; width:17px; height:17px; flex:0 0 17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.8-1.2A9 9 0 1 0 12 3zm-1 5h2v6h-2V8zm0 8h2v2h-2v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.8-1.2A9 9 0 1 0 12 3zm-1 5h2v6h-2V8zm0 8h2v2h-2v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.how-cta-button::before {
  content:""; display:inline-block; width:17px; height:17px; flex:0 0 17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 2a8 8 0 1 0 4.9 14.3L21 22l1-1-5.7-6.1A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 2a8 8 0 1 0 4.9 14.3L21 22l1-1-5.7-6.1A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border: 1px solid #c1c9dc55;
  border-radius: 50%;
  color: #c1c9dc;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.social-links a:hover,
.social-links a:focus-visible {
  color: #0d1734;
  background: white;
  border-color: white;
}
.social-links svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: currentColor;
}