/* ==========================================================================
   ActivPaisa — home page (DEV_HANDOFF_DESIGN)
   Loaded after styles.css and loan.css, and only by the home page. Scoped
   under .hp- so nothing here can reach the four journey pages, which still
   run the previous hero.

   Type note: the design specifies Aspekta for headings and Open Sans for
   body. Neither is licensed or self-hosted here, and the CSP is
   `font-src 'self'`, so no CDN font can load either. These rules reproduce
   the design's sizes, weights, line heights and tracking on the existing
   system stack; swapping the real faces in later is a --font change and
   nothing else.
   ========================================================================== */

.hp-hero {
  position: relative;
  overflow: hidden;
  /* White falling to #F7FAFF, plus the cool glow the design throws from the
     bottom-right behind the artwork. */
  background:
    radial-gradient(79.2% 63% at 100% 70%, rgba(65, 117, 255, .24), rgba(65, 117, 255, 0) 70%),
    linear-gradient(180deg, #fff 0%, #f7faff 100%);
}

/* The faceted artwork, bled off the right edge and masked to a soft diagonal.
   Decorative: it carries no meaning the copy does not already state, so it is
   a background rather than an <img> with alt text. */
.hp-hero-art {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  background: url("../assets/home/hero-bg.webp") no-repeat left center / cover;
  -webkit-mask-image: url("../assets/home/hero-mask.svg");
  mask-image: url("../assets/home/hero-mask.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.hp-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px;
  align-items: center;
  min-height: 706px;
  padding: 24px 0 16px;
}

.hp-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

/* ---------- eyebrow ---------- */
.hp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  padding: 8px 18px 8px 15px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 103, 186, .32);
  font-size: 13px; font-weight: 700; line-height: 13px;
  letter-spacing: 2.34px; text-transform: uppercase; color: #042f8b;
}
.hp-eyebrow img { width: 16px; height: 16px; }

/* ---------- headline ---------- */
.hp-h1 {
  margin: 0; max-width: 16ch;
  font-size: clamp(2.25rem, 4.2vw, 60px);
  font-weight: 550;
  line-height: 1.06;
  letter-spacing: -1.8px;
  color: #0e1633;
}
/* Two empty rounded slots sit inside the headline in the design — one pale,
   one solid navy — with no words in them. Reproduced as drawn; see the note
   in the handover about what they are presumably waiting for. */
/* In web_v2 the two slots inside the headline hold artwork — a cash stack and
   a lightning bolt — on their own pill. Pill and icon ship as one image
   because the icons are 3D renders with soft shadows that CSS cannot restate. */
.hp-slot { display: inline-block; width: 96px; height: auto; vertical-align: middle; margin: 0 .06em; }

.hp-lead { margin: 0; max-width: 447px; font-size: 17px; line-height: 1.6; color: #4b5470; }

/* ---------- call to action ---------- */
/* Its own rule rather than .btn-primary: the design's button carries a 40px
   white tile holding the arrow, which no existing button variant has. */
.hp-cta {
  display: inline-flex; align-items: center; gap: 14px;
  height: 52px; padding: 6px 6px 6px 24px; border: 0; border-radius: 8px;
  background: #0067ba; color: #fff; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; line-height: 24px;
  box-shadow: 0 12px 26px -12px rgba(0, 103, 186, .6), inset 0 1px 0 0 rgba(255, 255, 255, .2);
  transition: background var(--dur, .2s) ease, transform var(--dur, .2s) ease;
}
.hp-cta:hover { background: #005ba4; }
.hp-cta:active { transform: scale(.985); }
.hp-cta-ic {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 6px; background: #fff;
}
.hp-cta-ic img { width: 16px; height: 16px; }

/* ---------- Secure · Digital · Transparent ---------- */
.hp-assure {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 0;
  list-style: none; font-size: 13.5px; font-weight: 600; color: #26314f;
}
.hp-assure li { display: flex; align-items: center; gap: 10px; }
.hp-assure li + li::before {
  content: ""; width: 4px; height: 4px; border-radius: 2px; background: #0067ba;
}

/* ---------- the three figures ---------- */
.hp-stats { display: flex; flex-wrap: wrap; gap: 32px; margin: 24px 0 0; padding: 0; list-style: none; }
.hp-stat { position: relative; padding-left: 18px; }
/* The rule starts below the avatars rather than at the top of the column,
   which is what makes the row read as three figures and not three boxes. */
.hp-stat::before {
  content: ""; position: absolute; left: 0; top: 44px;
  width: 1px; height: 62px; border-radius: 3px; background: rgba(4, 47, 139, .12);
}
.hp-stat-top { display: flex; align-items: flex-start; height: 32px; margin-bottom: 6px; }
.hp-faces { display: flex; }
.hp-face {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 16px;
  object-fit: cover; box-shadow: 0 0 0 2px #fff;
  font-size: 14px; font-weight: 700; color: #0067ba;
}
.hp-face + .hp-face { margin-left: -9px; }
.hp-face-more {
  background: #eaf2fe; color: #0067ba; font-size: 14px; letter-spacing: .28px;
  box-shadow: inset 0 0 0 1px rgba(0, 103, 186, .15);
}
.hp-stat-ic {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 16px;
  background: #eaf2fe; box-shadow: inset 0 0 0 1px rgba(0, 103, 186, .15);
}
.hp-stat-ic img { width: 16px; height: 16px; }
.hp-stat-n {
  display: block; font-size: 34px; font-weight: 700; line-height: 34px;
  letter-spacing: -.68px; color: #0e1633;
}
.hp-stat-n.is-empty { color: #8a93a8; }
.hp-stat-l { display: block; margin-top: 5.8px; font-size: 14px; line-height: 24px; color: #6b7593; }

.hp-foot { margin: 8px 0 0; font-size: 11px; line-height: 24px; color: #8a93a8; }

/* ---------- narrow ----------
   The design is desktop-only (one 1440 frame, no mobile board), so the
   collapse below is derived, not drawn. It keeps the reading order and drops
   the artwork, which is decorative and would otherwise sit under the text. */
@media (max-width: 900px) {
  .hp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; padding: 40px 0; }
  .hp-hero-art { display: none; }
  .hp-h1 { max-width: none; letter-spacing: -1px; }
  .hp-slot { width: 64px; height: 30px; }
}
@media (max-width: 560px) {
  .hp-stats { gap: 20px; }
  .hp-stat { flex: 1 1 128px; }
  .hp-cta { width: 100%; justify-content: space-between; }
}


/* ==========================================================================
   Hero stage — the photograph and the three cards over it (web_v2)
   The cards are positioned as percentages of the stage so they hold their
   relationship to the photograph as the column narrows, rather than drifting
   off it at an in-between width.
   ========================================================================== */
/* The cards overhang the photograph on both sides by design, so the stage
   gets margin rather than letting them collide with the copy column. */
.hp-stage { position: relative; align-self: center; width: 100%; max-width: 330px; margin-right: 12%; }
.hp-stage-photo {
  display: block; width: 100%; height: auto; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(14, 22, 51, .05), 0 18px 40px -24px rgba(14, 22, 51, .28);
}

.hp-fcard {
  position: absolute; display: flex; flex-direction: column;
  border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(14, 22, 51, .05), 0 10px 28px -14px rgba(14, 22, 51, .3);
}
.hp-fc-k { font-size: 11px; line-height: 16px; color: #6b7593; }

/* "I need a personal loan of ₹5,00,000" */
.hp-fcard-amount { left: -26%; top: 2%; width: 72%; gap: 7px; padding: 12px 14px 13px; }
.hp-fc-amount { font-size: 22px; font-weight: 700; letter-spacing: -.5px; color: #0e1633; }
.hp-slider { position: relative; display: block; height: 4px; border-radius: 2px; background: #e4ecfb; }
.hp-slider-fill { position: absolute; inset: 0 55% 0 0; border-radius: 2px; background: #0067ba; }
.hp-slider-knob {
  position: absolute; left: 45%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: #0067ba; box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0, 103, 186, .5);
}
.hp-chips { display: flex; gap: 6px; margin-top: 3px; }
.hp-chip {
  flex: 1 1 0; padding: 6px 0; border-radius: 7px; text-align: center;
  font-size: 11px; font-weight: 600; color: #4b5470; background: #f4f7fd;
}
.hp-chip.is-on { background: #1d4ffd; color: #fff; }

/* "Approved by lender" */
.hp-fcard-approved {
  right: -46%; top: -5%; width: 76%; flex-direction: row; align-items: flex-start;
  gap: 10px; padding: 12px 14px;
}
.hp-tick {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%; background: #1e9e57;
}
.hp-fc-approved { display: flex; flex-direction: column; gap: 2px; }
.hp-fc-approved strong { font-size: 13px; font-weight: 700; line-height: 17px; color: #0e1633; }

/* "Your matches" */
.hp-fcard-matches { right: -44%; bottom: -4%; width: 112%; gap: 4px; padding: 11px 12px 12px; }
.hp-fc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 3px; }
.hp-fc-head strong { font-size: 12px; font-weight: 700; color: #0e1633; }
.hp-fc-head em { font-size: 9.5px; font-style: italic; color: #93a2b6; }
.hp-match {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 9px; border: 1px solid transparent;
}
.hp-match.is-best { border-color: #cfe0ff; background: #f7faff; }
.hp-match img { flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; }
.hp-match-who { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.hp-match-who strong { font-size: 11.5px; font-weight: 700; color: #0e1633; }
.hp-match-who span { font-size: 10.5px; color: #6b7593; }
.hp-match-who i { font-style: normal; color: #93a2b6; }
.hp-match-pct {
  display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto;
  font-size: 11.5px; font-weight: 700; color: #1e9e57;
}
.hp-match-pct em {
  margin-top: 1px; padding: 0 4px; border-radius: 3px;
  background: #1d4ffd; color: #fff; font-size: 7.5px; font-style: normal; letter-spacing: .4px;
}

/* Below the split the cards would cover the faces, so the photograph stands
   on its own and the figures it illustrates are already stated in the copy. */
@media (max-width: 900px) {
  .hp-stage { max-width: 460px; margin: 0 auto; }
  .hp-fcard { display: none; }
}

/* ==========================================================================
   01 Lending partners — the brand strip (web_v2 8:112)
   A marquee of chips, faded at both edges. The grievance disclosures these
   lenders require live in #partners further down; this strip only says who
   the partners are.
   ========================================================================== */
.hp-lenders { padding: 46px 0 50px; background: #fff; border-bottom: 1px solid #eef2f9; }
.hp-lenders-eyebrow {
  margin: 0 0 26px; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: 1.68px; text-transform: uppercase;
  color: #6b7593;
}
.hp-lenders-eyebrow strong { color: #0067ba; }
.hp-lenders-rail {
  display: flex; overflow: hidden; gap: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hp-lenders-track {
  display: flex; gap: 16px; margin: 0; padding: 0; list-style: none;
  flex: 0 0 auto; min-width: 100%; justify-content: space-around;
  animation: hp-marquee 36s linear infinite;
}
.hp-lenders-rail:hover .hp-lenders-track { animation-play-state: paused; }
@keyframes hp-marquee { to { transform: translateX(calc(-100% - 16px)); } }
@media (prefers-reduced-motion: reduce) { .hp-lenders-track { animation: none; } }
.hp-lchip {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 14px 22px; border: 1px solid #e8edf6; border-radius: 10px; background: #fff;
  box-shadow: 0 1px 2px rgba(14, 22, 51, .03);
  font-size: 14.5px; font-weight: 600; color: #26314f; white-space: nowrap;
}
.hp-lchip img { height: 22px; width: auto; max-width: 72px; object-fit: contain; }

/* ==========================================================================
   02 Products (web_v2 8:113)
   ========================================================================== */
.hp-products { padding: 72px 0 84px; background: #fff; }
.hp-pill-eyebrow {
  display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 auto 18px;
  padding: 7px 16px; border: 1px solid #dbe7ff; border-radius: 999px; background: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; color: #26314f;
}
.hp-pe-ic { width: 14px; height: 14px; border-radius: 50%; background: #0067ba; }
.hp-h2 {
  margin: 0 0 14px; text-align: center;
  font-size: clamp(1.9rem, 3.4vw, 46px); font-weight: 700; letter-spacing: -1.6px; color: #0e1633;
}
/* "for every moment" — the blue italic half of every section heading. */
.hp-h2 em { font-style: italic; font-weight: 500; color: #4f8dff; }
.hp-h2-sub { max-width: 54ch; margin: 0 auto 40px; text-align: center; font-size: 16px; line-height: 1.6; color: #4b5470; }

.hp-pcard {
  position: relative; display: flex; overflow: hidden;
  border-radius: 18px; background: #0a1f58 center / cover no-repeat;
  color: #fff; text-decoration: none;
  box-shadow: 0 18px 44px -24px rgba(6, 16, 60, .55);
  transition: transform var(--dur, .2s) ease, box-shadow var(--dur, .2s) ease;
}
.hp-pcard:hover { transform: translateY(-3px); box-shadow: 0 24px 52px -24px rgba(6, 16, 60, .65); }
.hp-pcard-wide { aspect-ratio: 1600 / 553; align-items: center; margin-bottom: 24px; }
.hp-pcard-body { display: flex; flex-direction: column; gap: 10px; padding: 7% 8%; max-width: 56%; }
.hp-pcard-wide .hp-pcard-body strong { font-size: clamp(1.4rem, 2.4vw, 34px); font-weight: 700; letter-spacing: -.7px; }
.hp-pcard-body strong { font-size: 21px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; }
.hp-pcard-body > span:not(.hp-pcard-go) { font-size: 15px; line-height: 1.55; color: #c9d7f5; }
.hp-pcard-go {
  display: grid; place-items: center; width: 40px; height: 40px; margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%;
  font-size: 17px; color: #fff; transition: background var(--dur, .2s) ease, color var(--dur, .2s) ease;
}
.hp-pcard:hover .hp-pcard-go { background: #fff; color: #0a1f58; }

.hp-pcard-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hp-pcard-row .hp-pcard { aspect-ratio: 640 / 458; }
.hp-pcard-row .hp-pcard-body { max-width: 72%; padding: 9% 10%; gap: 8px; }

@media (max-width: 900px) {
  .hp-pcard-row { grid-template-columns: minmax(0, 1fr); }
  .hp-pcard-row .hp-pcard { aspect-ratio: auto; min-height: 190px; background-position: right center; }
  .hp-pcard-wide { aspect-ratio: auto; min-height: 230px; background-position: 70% center; }
  .hp-pcard-body, .hp-pcard-wide .hp-pcard-body { max-width: 34ch; }
}

/* ==========================================================================
   03 What we provide (web_v2 8:114) — alternating rows
   ========================================================================== */
.hp-provide { padding: 76px 0 40px; background: #fff; }
.hp-pe-left { margin: 0 0 18px; }
.hp-h2-left { text-align: left; }
.hp-h2-sub-left { margin: 0 0 8px; max-width: 52ch; text-align: left; }
.hp-em-solid { font-style: normal; font-weight: 700; color: #0067ba; }

.hp-prow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 8vw, 128px); align-items: center; padding: 56px 0;
}
.hp-prow img {
  width: 100%; max-width: 440px; height: auto; justify-self: end;
  border-radius: 14px; box-shadow: 0 14px 36px -22px rgba(14, 22, 51, .25);
}
/* Row two mirrors: image left, copy right-aligned, as the design draws it. */
.hp-prow-flip .hp-prow-copy { order: 2; text-align: right; }
.hp-prow-flip img { order: 1; justify-self: start; }
.hp-kicker { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: #0067ba; }
.hp-prow-copy h3 {
  margin: 0 0 12px; font-size: clamp(1.4rem, 2.2vw, 30px); font-weight: 700;
  letter-spacing: -.6px; color: #0e1633;
}
.hp-prow-copy p:last-child { margin: 0; max-width: 42ch; font-size: 15.5px; line-height: 1.65; color: #4b5470; }
.hp-prow-flip .hp-prow-copy p:last-child { margin-left: auto; }

@media (max-width: 820px) {
  .hp-prow { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 34px 0; }
  /* Copy first on a phone, every row, including the mirrored one. */
  .hp-prow-flip .hp-prow-copy { order: 0; text-align: left; }
  .hp-prow-flip .hp-prow-copy p:last-child { margin-left: 0; }
  .hp-prow img, .hp-prow-flip img { order: 1; justify-self: stretch; max-width: 460px; }
}

/* ==========================================================================
   04 How it works (web_v2 8:115) — the dark stage
   Background colours sampled from the render: #001A53 falling to #001C65,
   with the glow living in the illustration crop itself.
   ========================================================================== */
.hp-how { padding: 110px 0; background: linear-gradient(180deg, #001a53 0%, #001c65 100%); }
.hp-how-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.hp-pe-dark { border-color: transparent; }
.hp-h2-light { color: #fff; margin-bottom: 34px; }

.hp-steps { margin: 0; padding: 0; list-style: none; }
.hp-steps li { position: relative; display: flex; gap: 18px; padding: 14px 0; }
/* the thread between the step tiles */
.hp-steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 22px; top: 62px; bottom: -10px;
  width: 1px; background: rgba(142, 194, 253, .25);
}
.hp-step-ic {
  display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: 10px; color: #8ec2fd; background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(142, 194, 253, .28);
}
.hp-steps li.is-on .hp-step-ic { color: #fff; background: #1d4ffd; box-shadow: 0 10px 24px -10px rgba(29, 79, 253, .7); }
.hp-steps strong { display: block; margin-bottom: 4px; font-size: 16.5px; font-weight: 700; color: rgba(255, 255, 255, .62); }
.hp-steps li.is-on strong { color: #fff; }
.hp-steps p { margin: 0; max-width: 40ch; font-size: 14px; line-height: 1.6; color: rgba(214, 234, 255, .68); }
.hp-how-fine { margin: 26px 0 0; max-width: 56ch; font-size: 12px; line-height: 1.7; color: rgba(190, 220, 255, .55); }

.hp-how-visual { position: relative; }
.hp-how-visual img { display: block; width: 100%; max-width: 470px; height: auto; margin: 0 auto; }
.hp-how-progress {
  display: block; width: 110px; height: 4px; margin: 2px auto 0; border-radius: 2px;
  background: rgba(255, 255, 255, .16); overflow: hidden;
}
/* progress width: 76 — the state the design was captured in. */
.hp-how-progress span { display: block; width: 76%; height: 100%; border-radius: 2px; background: #fff; }

@media (max-width: 860px) {
  .hp-how { padding: 64px 0; }
  .hp-how-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-how-visual { order: -1; }
  .hp-how-visual img { max-width: 360px; }
}

/* ==========================================================================
   05 Why ActivPaisa (web_v2 8:116) — bento
   ========================================================================== */
.hp-why { padding: 84px 0; background: #fff; }
.hp-why .hp-h2-left { margin-bottom: 34px; }
.hp-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.hp-bcard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 230px; padding: 24px 26px;
  border: 1px solid #e3e9f4; border-radius: 14px;
  background-color: #f4f8ff; background-size: cover; background-position: center;
  color: #0e1633;
}
.hp-b-one { grid-column: span 2; min-height: 260px; max-width: none; justify-content: center; }
.hp-b-one p, .hp-b-one strong { max-width: 36ch; }
.hp-b-match { color: #fff; border-color: transparent; justify-content: center; }
.hp-b-match p { color: #d6eaff; max-width: 26ch; }
.hp-b-mid strong { max-width: 24ch; } .hp-b-mid p { max-width: 22ch; }
.hp-b-mid { justify-content: center; }
.hp-bcard strong { margin-bottom: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.3px; line-height: 1.22; }
.hp-bcard p { margin: 0; max-width: 30ch; font-size: 14px; line-height: 1.6; color: #4b5470; }
@media (max-width: 860px) {
  .hp-bento { grid-template-columns: minmax(0, 1fr); }
  .hp-b-one { grid-column: auto; }
}

/* ==========================================================================
   06 Personalised matching (web_v2 8:117)
   Background sampled from the render: #2158C8 at the top corners falling
   into #0B2A8A, glow centred behind the heading.
   ========================================================================== */
.hp-matching {
  padding: 84px 0 0; overflow: hidden;
  background: radial-gradient(60% 46% at 50% 0%, #2b63d4 0%, rgba(43, 99, 212, 0) 70%),
              linear-gradient(180deg, #1a49ac 0%, #0b2a8a 60%, #0a2378 100%);
}
.hp-h2-sub-light { color: #c7d9ff; }
.hp-matching .hp-h2-sub-light { margin-bottom: 44px; }
.hp-matching-tablet {
  display: block; width: min(920px, 92%); height: auto; margin: 0 auto -2px;
  filter: drop-shadow(0 30px 60px rgba(2, 10, 40, .45));
}

/* ==========================================================================
   07 Our promise (web_v2 8:118)
   ========================================================================== */
.hp-promise { padding: 84px 0; background: #fff; }
.hp-promise .hp-h2 { margin-bottom: 44px; }
.hp-promise-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hp-promise-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 0 26px; border: 1px solid #dbe7ff; border-radius: 4px; background: #fff;
}
.hp-promise-card img { width: 100%; height: auto; }
.hp-promise-chip {
  display: grid; place-items: center; width: 32px; height: 32px; margin: 8px 0 14px 20px;
  border-radius: 9px; color: #0067ba; background: #eaf2fe;
  box-shadow: inset 0 0 0 1px rgba(0, 103, 186, .14);
}
.hp-promise-card strong { margin: 0 20px 8px; font-size: 17px; font-weight: 700; color: #0e1633; }
.hp-promise-card p { margin: 0 20px; font-size: 13.5px; line-height: 1.6; color: #4b5470; }
@media (max-width: 960px) { .hp-promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .hp-promise-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   08 Testimonials (web_v2 8:119)
   ========================================================================== */
.hp-stories {
  padding: 84px 0;
  background: linear-gradient(180deg, #f3f7ff 0%, #fff 30%, #fff 70%, #f3f7ff 100%);
}
.hp-stories .hp-h2-sub { margin-bottom: 40px; }
.hp-stories-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hp-tcard {
  position: relative; display: flex; flex-direction: column; margin: 0;
  aspect-ratio: 197 / 227; padding: 40px 20px 20px;
  border-radius: 12px; background: #0b2a8a center / cover no-repeat;
  color: #fff; box-shadow: 0 16px 36px -22px rgba(6, 16, 60, .5);
}
.hp-t-spark { position: absolute; left: 20px; top: 14px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.hp-tcard blockquote {
  margin: 0; font-size: 16.5px; font-weight: 650; line-height: 1.4; letter-spacing: -.2px;
  text-wrap: balance;
}
/* Neha's card: the photograph owns the top half, so the words sit below it. */
.hp-t-low { justify-content: flex-end; }
.hp-t-low blockquote { font-size: 15.5px; }
.hp-tcard figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 3px; }
.hp-t-low figcaption { margin-top: 12px; }
.hp-tcard figcaption strong { font-size: 13.5px; font-weight: 700; }
.hp-tcard figcaption span {
  font-size: 9.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(214, 234, 255, .75);
}
.hp-t-title { font-size: 21px; font-weight: 700; letter-spacing: -.4px; line-height: 1.25; margin-bottom: 10px; }
.hp-t-copy { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(214, 234, 255, .85); max-width: 20ch; }
@media (max-width: 1020px) { .hp-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .hp-stories-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   09 Financial insights (web_v2 8:120)
   ========================================================================== */
.hp-insights { padding: 80px 0; background: #fff; }
.hp-insights-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.hp-insights-head .hp-h2-sub-left { margin-bottom: 0; }
.hp-ilink { flex: 0 0 auto; font-size: 14.5px; font-weight: 700; color: #0067ba; text-decoration: none; }
.hp-ilink:hover { text-decoration: underline; }
.hp-insights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hp-icard { border: 1px solid #dbe7ff; border-radius: 4px; background: #fff; overflow: hidden; }
.hp-icard > img { display: block; width: 100%; height: auto; }
.hp-icard-body { padding: 20px 22px 24px; }
.hp-icard-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; color: #6b7593; }
.hp-icard-meta span {
  padding: 4px 10px; border-radius: 999px; background: #eaf2fe;
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #0067ba;
}
.hp-icard h3 { margin: 0 0 10px; font-size: 18.5px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; color: #0e1633; }
.hp-icard-body > p:not(.hp-icard-meta) { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #4b5470; }
.hp-icard-body a { font-size: 13.5px; font-weight: 700; color: #0067ba; text-decoration: none; }
.hp-icard-body a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .hp-insights-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-insights-head { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   10 App banner (web_v2 8:121)
   The marbled art ships only on the right, fading out at its left edge into
   a base sampled from the render (#2740C8 region) — erasing text out of that
   turbulence would have left visible flat bands.
   ========================================================================== */
.hp-app { padding: 20px 0 84px; background: #fff; }
.hp-app-banner {
  position: relative; overflow: hidden; border-radius: 22px;
  padding: clamp(32px, 5vw, 64px);
  background: radial-gradient(90% 140% at 86% 10%, #3a56e0 0%, rgba(58, 86, 224, 0) 55%),
              radial-gradient(70% 120% at 10% 100%, #16249a 0%, rgba(22, 36, 154, 0) 60%),
              #2740c8;
  color: #fff; box-shadow: 0 26px 60px -30px rgba(10, 18, 80, .55);
}
.hp-app-art {
  position: absolute; right: 0; top: 0; height: 100%; width: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  pointer-events: none;
}
.hp-app-copy { position: relative; max-width: 46%; }
.hp-app-logo { width: 124px; height: auto; margin-bottom: 26px; filter: brightness(0) invert(1); }
.hp-app-h { margin: 0 0 16px; font-size: clamp(1.9rem, 3.4vw, 44px); font-weight: 700; letter-spacing: -1.2px; line-height: 1.1; }
.hp-app-copy > p { margin: 0 0 22px; max-width: 40ch; font-size: 15.5px; line-height: 1.6; color: #ccd8ff; }
.hp-app-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.hp-app-chips li {
  position: relative; padding: 8px 16px 8px 36px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  font-size: 13px; font-weight: 600;
}
.hp-app-chips li::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px;
  transform: translateY(-50%); border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 5px #0067ba;
}
.hp-app-soon { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; color: #ccd8ff; }
.hp-app-soon span {
  padding: 9px 18px; border-radius: 999px; background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  font-size: 13px; font-weight: 700; color: #fff;
}
@media (max-width: 860px) {
  .hp-app-art { position: static; width: 100%; height: auto; margin-top: 18px;
    -webkit-mask-image: none; mask-image: none; border-radius: 14px; }
  .hp-app-copy { max-width: none; }
}

/* ==========================================================================
   11 FAQ (web_v2 8:122) — native <details>, no script
   ========================================================================== */
.hp-faq { padding: 80px 0; background: #fff; }
.hp-faq .hp-h2 { margin-bottom: 34px; }
.hp-faq-list { max-width: 880px; margin: 0 auto; border-top: 1px solid #e5eaf4; }
.hp-faq-item { border-bottom: 1px solid #e5eaf4; }
.hp-faq-item summary {
  display: flex; align-items: center; gap: 26px; padding: 26px 4px;
  list-style: none; cursor: pointer;
  font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: #0e1633;
}
.hp-faq-item summary::-webkit-details-marker { display: none; }
.hp-faq-n { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #8a93a8; }
.hp-faq-mark {
  position: relative; flex: 0 0 auto; margin-left: auto;
  width: 30px; height: 30px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px #d7e0f0;
  transition: background var(--dur, .2s) ease, box-shadow var(--dur, .2s) ease;
}
.hp-faq-mark::before, .hp-faq-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #26314f;
  transition: background var(--dur, .2s) ease, transform var(--dur, .2s) ease;
}
.hp-faq-mark::before { width: 12px; height: 1.6px; transform: translate(-50%, -50%); }
.hp-faq-mark::after { width: 1.6px; height: 12px; transform: translate(-50%, -50%); }
.hp-faq-item[open] .hp-faq-mark { background: #0067ba; box-shadow: none; }
.hp-faq-item[open] .hp-faq-mark::before { background: #fff; }
.hp-faq-item[open] .hp-faq-mark::after { background: #fff; transform: translate(-50%, -50%) scaleY(0); }
.hp-faq-item > p { margin: -8px 0 26px 41px; max-width: 58ch; font-size: 14.5px; line-height: 1.65; color: #4b5470; }

/* ==========================================================================
   12 Final CTA (web_v2 8:123)
   The artwork ends on #1472C8 at its bottom row; the CSS below continues
   that gradient down to #03338E so the seam is invisible and the footer's
   navy can sit straight underneath.
   ========================================================================== */
.hp-ctaband { background: linear-gradient(180deg, #1472c8 0%, #03338e 100%); }
.hp-cta-stage { display: block; width: 100%; height: auto; }
.hp-cta-foot { display: flex; justify-content: center; padding: 10px 16px 64px; }
.hp-cta-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 50px; padding: 5px 5px 5px 22px; border: 0; border-radius: 10px;
  background: #fff; color: #0067ba; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700;
  box-shadow: 0 14px 30px -12px rgba(2, 20, 70, .55);
  transition: transform var(--dur, .2s) ease;
}
.hp-cta-btn:hover { transform: translateY(-2px); }
.hp-cta-btn-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; background: #0067ba; }
/* the arrow asset is navy-on-white; invert it for the navy tile */
.hp-cta-btn-ic img { filter: brightness(0) invert(1); }
/* A card whose words are part of its artwork: the DOM copy is for assistive
   tech and must not paint over the image. */
.hp-t-baked blockquote, .hp-t-baked figcaption {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   13 Footer (web_v2 8:124) — the design's quiet four-column layout, carrying
   the page's real legal content: entity wording, CIN, LSP registration,
   registered office, grievance officer, both disclaimers. The design's
   "ActivPaisa Technologies" and its CIN/address were placeholders.
   ========================================================================== */
.hp-footer { background: #fff; border-top: 1px solid #e5eaf4; font-size: 13.5px; color: #4b5470; }
.hp-footer .footer-main { padding: 56px 0 28px; }
.hp-f-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.2fr);
  gap: 36px; padding-bottom: 36px; border-bottom: 1px solid #edf1f8;
}
.hp-f-logo { width: 128px; height: auto; margin-bottom: 16px; }
.hp-f-brand p { margin: 0 0 10px; max-width: 40ch; line-height: 1.6; }
.hp-footer .footer-col h3, .hp-f-grievance h3 {
  margin: 4px 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: #0e1633;
}
.hp-footer .footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.hp-footer .footer-col a { color: #4b5470; text-decoration: none; }
.hp-footer .footer-col a:hover { color: #0067ba; text-decoration: underline; }
.hp-f-grievance p { margin: 0 0 8px; line-height: 1.5; }
.hp-f-grievance a { color: #0067ba; text-decoration: none; }
.hp-f-grievance a:hover { text-decoration: underline; }
.hp-f-glink { font-weight: 600; }
.hp-f-disclaimer { padding: 26px 16px 0; }
.hp-f-disclaimer p { margin: 0 0 12px; font-size: 12px; line-height: 1.65; color: #6b7593; }
.hp-f-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  padding: 18px 16px 6px;
}
.hp-f-bottom .copyright { margin: 0; font-size: 12px; color: #6b7593; }
.hp-f-reg { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: 11.5px; color: #8a93a8; }
.hp-f-reg dfn { font-style: normal; font-weight: 700; color: #6b7593; }
.hp-footer .footer-social { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.hp-footer .footer-social span { font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #8a93a8; }
.hp-footer .footer-social a { color: #4b5470; }
.hp-footer .footer-social a:hover { color: #0067ba; }
@media (max-width: 960px) { .hp-f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .hp-f-grid { grid-template-columns: minmax(0, 1fr); } }
/* Neutralise the previous footer theme that rides in on the `footer-main`
   and `footer-col` class names (kept so tests/flow.test.html's nav and
   background assertions keep meaning something). */
.hp-footer .footer-main { background: #fff; }
.hp-footer .footer-main::before { display: none; }
.hp-footer .footer-col h3::after { display: none; }
.hp-footer .footer-col li { margin-bottom: 0; padding-left: 0; }
.hp-footer .footer-col li::before { display: none; }

/* ==========================================================================
   Header nav (web_v2, home page only)
   The drawer remains the whole navigation on a phone; this nav exists from
   900px up, where the design shows it.
   ========================================================================== */
.hp-nav { display: none; }
.hp-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Phones keep the old slim header: Sign in only. The hero's own CTA is one
   scroll-height away, and 320px cannot hold both buttons. */
.hp-nav-cta {
  display: none;
  height: 38px; padding: 0 18px; border: 0; border-radius: 9px; cursor: pointer;
  background: #042f8b; color: #fff; font: inherit; font-size: 14px; font-weight: 700;
  transition: background var(--dur, .2s) ease;
}
.hp-nav-cta:hover { background: #0a3ba6; }
@media (min-width: 900px) {
  /* The drawer stays the phone navigation; from here up the design's own
     nav carries the page and the hamburger goes, as drawn. */
  .site-header .hamburger { display: none; }
  .hp-nav-cta { display: inline-block; }
  .hp-nav { display: flex; gap: 30px; margin: 0 auto; }
  .hp-nav a { font-size: 14.5px; font-weight: 600; color: #26314f; text-decoration: none; }
  .hp-nav a:hover { color: #0067ba; }
  /* the login link no longer needs to hold the right edge alone */
  .site-header .header-login { margin-left: 0; }
}

/* ==========================================================================
   04 How it works — pinned scroll (the design's own note: "pinned: steps
   advance with scroll, image swaps alongside")
   ========================================================================== */
/* Four viewports of travel across five steps, plus the one on screen. */
.hp-how-track { height: 440vh; }
.hp-how-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
.hp-how { padding: 0; }
.hp-how .hp-how-grid { width: 100%; }

.hp-how-panel {
  position: relative; width: min(470px, 100%); margin: 0 auto;
  aspect-ratio: 1 / 1; border-radius: 6px;
  background: radial-gradient(80% 70% at 50% 42%, #0d3186 0%, #08246d 70%, #071f62 100%);
  box-shadow: inset 0 0 0 1px rgba(142, 194, 253, .22);
}
/* .hp-how-visual img (the old single-visual rule) outranks a lone class
   and re-imposes width:100%; the double selector wins it back. */
.hp-how-panel .hp-how-img {
  position: absolute; inset: 8%; width: 84%; height: 84%; max-width: none; margin: 0;
  object-fit: contain; opacity: 0;
  /* glow-on-black artwork: screen blending drops the black and keeps the
     light, so one set of assets sits on any panel colour */
  mix-blend-mode: screen;
  transform: scale(.96);
  transition: opacity .45s ease, transform .45s ease;
}
.hp-how-panel .hp-how-img.is-on { opacity: 1; transform: none; }

.hp-steps li { transition: opacity .3s ease; }
.hp-steps li:not(.is-on) { opacity: .78; }

/* The static section is the truth for phones, reduced motion and no-JS:
   the track collapses, the stage unsticks, and step one stays lit. */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .hp-how-track { height: auto; }
  .hp-how-sticky { position: static; height: auto; overflow: visible; padding: 64px 0; }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .hp-how-grid { padding-top: 0; padding-bottom: 0; }
}