/* Sticky navigation and replaceable phone-screen image */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: height .25s ease, background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

.site-header.is-scrolled {
  height: 72px;
  background: rgba(16, 27, 33, .88);
  box-shadow: 0 12px 35px rgba(5, 12, 15, .2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

html { scroll-padding-top: 92px; }

#how,
#why,
#stories,
#safety {
  scroll-margin-top: 92px;
}

.site-header nav {
  gap: 34px;
  font-size: 16px;
  font-weight: 500;
}

.how .section-heading .title-kicker,
.why .title-kicker,
.stories .title-kicker,
.safety .title-kicker {
  width: max-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  padding: 0 17px;
  border: 1px solid rgba(214, 137, 0, .26);
  border-radius: 999px;
  background: #fff4d8;
  color: #a96d00;
  font: 700 14px var(--display);
  letter-spacing: .16em;
  line-height: 1;
}

.why .title-kicker {
  background: rgba(255, 173, 10, .1);
  border-color: rgba(255, 173, 10, .28);
  color: #ffb51d;
}

.safety .title-kicker {
  margin-bottom: 8px;
}

.phone.phone-image-shell {
  padding: 7px;
  overflow: hidden;
}

.phone-screen-content {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 31px;
}

.cta-section > .download-button {
  position: relative;
  z-index: 3;
  cursor: pointer;
}

.cta-section .cta-orb {
  pointer-events: none;
}

.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(16, 27, 33, .92);
  color: #fff;
  box-shadow: 0 14px 35px rgba(7, 14, 17, .24);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font: 500 24px/1 var(--font);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease, background .2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.back-to-top:hover {
  background: #e99a00;
  color: var(--deep);
}

.back-to-top:focus-visible {
  outline: 3px solid rgba(255, 173, 10, .42);
  outline-offset: 3px;
}

/* Refined three-step journey */
.how {
  background:
    radial-gradient(circle at 7% 20%, rgba(255, 173, 10, .08), transparent 24%),
    #f7f5ef;
}

.how .section-heading {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: clamp(50px, 7vw, 110px);
  align-items: end;
  margin-bottom: 64px;
}

.section-heading-title {
  max-width: 900px;
}

.how .section-heading .kicker {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-bottom: 20px;
  padding: 0 14px;
  border: 1px solid rgba(214, 137, 0, .24);
  border-radius: 999px;
  background: #fff4d8;
  color: #a96d00;
  font-size: 13px;
  letter-spacing: .18em;
}

.how .section-heading h2 {
  font-size: clamp(52px, 5.2vw, 78px);
  line-height: .98;
  letter-spacing: -.065em;
}

.how .section-heading h2 em {
  color: #d98b00;
  font-style: normal;
}

.how .section-heading > p {
  max-width: 430px;
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.75;
}

.steps {
  gap: 26px;
}

.step-card,
.step-card.featured {
  min-height: 475px;
  padding: 28px;
  color: var(--ink);
  background: linear-gradient(155deg, #fffdf8 0%, #fff 68%);
  border: 1px solid #dedfd9;
  border-radius: 22px;
  box-shadow: 0 12px 35px rgba(20, 33, 39, .045);
  overflow: visible;
}

.step-card.featured {
  background: linear-gradient(155deg, #fff7e3 0%, #fffdf7 60%, #fff 100%);
  border-color: rgba(232, 150, 0, .34);
}

.step-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 27px;
  right: 27px;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--orange), rgba(255, 173, 10, .14));
}

.step-card:not(:last-child)::after {
  content: '→';
  position: absolute;
  z-index: 3;
  top: 50%;
  right: -39px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #b47a09;
  background: #fffaf0;
  border: 1px solid #eadfc4;
  box-shadow: 0 7px 18px rgba(20, 33, 39, .08);
  transform: translateY(-50%);
  font-size: 20px;
}

.step-number,
.step-card.featured .step-number {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--deep);
  background: var(--orange);
  border: 5px solid #fff7e2;
  box-shadow: 0 8px 22px rgba(217, 139, 0, .2);
  font: 800 24px var(--display);
}

.step-card:nth-child(2) .step-number {
  background: #dcefe5;
  color: #2f7d59;
  border-color: #f3faf6;
  box-shadow: 0 8px 22px rgba(47, 125, 89, .13);
}

.step-card:nth-child(3) .step-number {
  background: #e2edf0;
  color: #386c79;
  border-color: #f5fafb;
  box-shadow: 0 8px 22px rgba(56, 108, 121, .13);
}

.step-card .step-visual {
  height: 220px;
  margin: 30px 0 12px;
}

.step-card .download-visual > span {
  width: 88px;
  height: 88px;
  border-radius: 25px;
  box-shadow: 0 0 0 14px rgba(255, 173, 10, .1), 0 18px 30px rgba(217, 139, 0, .12);
}

.download-demo,
.register-demo,
.upi-demo {
  width: min(235px, 100%);
  border-radius: 18px;
  box-shadow: 0 18px 35px rgba(20, 33, 39, .12);
}

.download-demo {
  padding: 14px;
  background: #17272c;
  color: #fff;
}

.download-demo span,
.register-demo span,
.upi-demo span {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  display: inline;
  place-items: initial;
  background: none;
  box-shadow: none;
  font-size: inherit;
  line-height: normal;
  color: inherit;
}

.demo-app {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
}

.demo-app img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.demo-app div {
  display: flex;
  flex-direction: column;
}

.demo-app strong { font: 700 12px var(--display); }
.demo-app small { color: #8f9b9e; font-size: 8px; }
.demo-app > span { margin-left: auto; color: #ffbc34; font-size: 9px; }

.demo-download {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  color: var(--ink);
  background: #fff;
  border-radius: 11px;
}

.demo-download > span {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--orange);
  font-size: 17px;
  font-weight: 800;
}

.demo-download div { display: flex; flex-direction: column; }
.demo-download strong { font-size: 10px; }
.demo-download small { color: #7f898c; font-size: 7px; }
.demo-download b { margin-left: auto; color: #8a9496; font-size: 7px; }

.demo-progress {
  height: 4px;
  margin: 11px 4px 0;
  border-radius: 999px;
  overflow: hidden;
  background: #344449;
}

.demo-progress i { display: block; width: 72%; height: 100%; background: var(--orange); border-radius: inherit; }

.register-demo {
  padding: 16px;
  background: #fff;
  border: 1px solid #e2e5e1;
}

.register-head {
  display: flex;
  align-items: center;
  height: 39px;
  padding: 0 10px;
  border: 1px solid #dfe3df;
  border-radius: 10px;
  background: #fafaf7;
}

.register-head > span { color: #7d888b; font-size: 9px; padding-right: 8px; border-right: 1px solid #dfe3df; }
.register-head strong { padding-left: 8px; font-size: 10px; }
.register-head b { position: static; width: auto; height: auto; margin-left: auto; background: none; color: #2f7d59; font-size: 11px; }
.register-demo > small { display: block; margin: 13px 0 7px; color: #90999b; font-size: 7px; letter-spacing: .12em; }

.otp-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.otp-boxes i {
  position: static;
  width: auto;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid #dfe3df;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 700 11px var(--display);
}

.verified-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #e5f3eb;
}

.verified-row > span { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #2f7d59; color: #fff; font-size: 10px; }
.verified-row div { display: flex; flex-direction: column; }
.verified-row strong { color: #276c4d; font-size: 9px; }
.verified-row small { color: #5f8b76; font-size: 7px; }

.upi-demo {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e4df;
}

.upi-demo-head {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  color: #fff;
  background: #17272c;
}

.upi-demo-head strong { padding: 0; border-radius: 0; background: none; color: var(--orange); font: 800 20px var(--display); letter-spacing: -.06em; }
.upi-demo-head span { margin-left: auto; color: #9ba6a9; font-size: 8px; }

.upi-id {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px;
  padding: 12px;
  border: 1px solid #e2e5e1;
  border-radius: 12px;
  background: #fafaf7;
}

.upi-id > span { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #fff0c9; color: #c47d00; font-weight: 800; }
.upi-id div { display: flex; flex-direction: column; }
.upi-id small { color: #8a9496; font-size: 7px; }
.upi-id strong { padding: 0; border-radius: 0; background: none; color: var(--ink); font: 700 10px var(--display); letter-spacing: 0; }
.upi-id b { margin-left: auto; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #2f7d59; color: #fff; font-size: 9px; }
.upi-connected { margin: -2px 16px 14px; color: #5a7167; font-size: 8px; }
.upi-connected span { color: #47b47a; margin-right: 5px; }

.step-card h3 {
  font-size: 22px;
}

.step-card p,
.step-card.featured p {
  min-height: 43px;
  color: #697579;
}

.step-card .card-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff0c8;
  color: #9b6300;
}

.step-card:hover {
  border-color: rgba(232, 150, 0, .38);
  box-shadow: 0 20px 48px rgba(20, 33, 39, .08);
}

.stories {
  background: #faf9f6;
}

.stories-heading {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 48px;
}

.stories-heading h2 {
  margin-top: 12px;
  font-size: clamp(35px, 4vw, 57px);
  line-height: 1.05;
}

.stories-intro p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.7;
}

.stories-intro span,
.stories-note {
  color: #8a9496;
  font-size: 11px;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.story-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 12px 35px rgba(20, 33, 39, .045);
}

.story-card.featured-story {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
  transform: translateY(-12px);
}

.story-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-top > div {
  display: flex;
  flex-direction: column;
}

.story-top strong {
  font: 700 14px var(--display);
}

.story-top small {
  color: #8a9496;
  margin-top: 3px;
  font-size: 10px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 12px var(--display);
}

.avatar-orange { background: #fff0c9; color: #b87500; }
.avatar-green { background: #dff1e7; color: #2f7d59; }
.avatar-blue { background: #dfedf0; color: #396e7a; }

.verified {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e2f2e8;
  color: #2f7d59;
  font-size: 11px;
}

.story-earned {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin: 30px 0 18px;
  padding: 20px;
  border-radius: 14px;
  background: #f4f3ef;
}

.featured-story .story-earned { background: #203136; }
.story-earned small { grid-column: 1 / -1; color: #8a9496; font-size: 8px; letter-spacing: .12em; }
.story-earned strong { font: 800 30px var(--display); margin-top: 5px; }
.story-earned span { color: #7f8a8d; font-size: 9px; padding-bottom: 5px; }
.stars { color: var(--orange); font-size: 13px; letter-spacing: 2px; }
.story-card blockquote { margin: 12px 0 0; color: #657076; font-size: 13px; line-height: 1.75; }
.featured-story blockquote { color: #b9c2c4; }
.stories-note { margin: 27px auto 0; max-width: 850px; text-align: center; line-height: 1.7; }

.story-carousel {
  position: relative;
}

.story-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 14px 2px 22px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  outline: none;
}

.story-track::-webkit-scrollbar { display: none; }

.story-track .story-card {
  flex: 0 0 calc((100% - 36px) / 3);
  min-width: 0;
  min-height: 345px;
  scroll-snap-align: start;
  transition: transform .25s ease, box-shadow .25s ease;
}

.story-track .story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(20, 33, 39, .1);
}

.avatar-photo {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--line), 0 5px 14px rgba(20, 33, 39, .12);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--deep);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 10px 30px rgba(16, 27, 33, .22);
  transform: translateY(-50%);
  transition: transform .2s ease, background .2s ease;
}

.carousel-arrow:hover { background: #26383d; transform: translateY(-50%) scale(1.06); }
.carousel-prev { left: -23px; }
.carousel-next { right: -23px; }

.carousel-dots {
  min-height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}

.carousel-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #cfd5d2;
  transition: width .2s ease, background .2s ease;
}

.carousel-dots i.active { width: 22px; background: var(--orange); }

@media (max-width: 640px) {
  .site-header.is-scrolled { height: 64px; }
  .stories-heading { grid-template-columns: 1fr; gap: 22px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-card.featured-story { transform: none; }
  .story-track .story-card { flex-basis: 88%; min-height: 335px; }
  .carousel-arrow { width: 40px; height: 40px; }
  .carousel-prev { left: -8px; }
  .carousel-next { right: -8px; }
  .step-card,
  .step-card.featured { min-height: 450px; }
  .how .section-heading h2 { font-size: 48px; }
  .back-to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  .how .section-heading .title-kicker,
  .why .title-kicker,
  .stories .title-kicker,
  .safety .title-kicker {
    min-height: 38px;
    padding: 0 14px;
    font-size: 12px;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-card:last-child { grid-column: 1 / -1; }
  .story-track .story-card { flex-basis: calc((100% - 18px) / 2); }
}

@media (max-width: 980px) {
  .step-card:not(:last-child)::after { display: none; }
  .how .section-heading { grid-template-columns: 1fr; gap: 22px; }
  .how .section-heading > p { max-width: 620px; }
}