/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* Brand colors */
  --indigo-500: #4c4ffe;
  --indigo-500-50: rgba(76, 79, 254, 0.5);
  --navy-900: #003397;
  --navy-950: #00015e;
  --link-blue: #2022c0;
  --ink: #000000;
  --white: #ffffff;

  /* Section backgrounds */
  --bg-soft: #fafafa;
  --bg-alt-blue: #f0f8ff;

  /* Text opacities */
  --muted-75: rgba(0, 0, 0, 0.75);
  --muted-80: rgba(0, 0, 0, 0.8);
  --muted-45: rgba(0, 0, 0, 0.45);
  --gray-placeholder: #b6b6b6;
  --gray-light: #a0a0a0;
  --border-input: rgba(0, 0, 0, 0.25);

  /* Tag / highlight colors */
  --tag-purple-bg: rgba(122, 124, 254, 0.3);
  --tag-purple-border: #4c4ffe;
  --tag-green-bg: rgba(149, 255, 57, 0.2);
  --tag-green-border: #95ff39;

  /* Typography */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-highlight: 'Geist', sans-serif; /* Add this for the custom span font */ 
  /* --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; */
  --font-body: 'Geist', sans-serif;

  /* Spacing scale */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 28px;
  --space-5: 38px;
  --space-6: 58px;

  /* Layout */
  --container-max: 1440px;
  --container-pad: 102px;
  --container-pad-mobile: 18px;

  /* Radii */
  --radius-pill: 25px;
  --radius-card: 24px;
  --radius-card-sm: 18px;
  --radius-input: 8px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }
p { margin: 0; }
summary { cursor: pointer; }
summary::marker { content: ''; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

@media (max-width: 900px) {
  .container { padding: 0 var(--container-pad-mobile); }
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  color: var(--indigo-500);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 58px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

.section-heading em,
.section-heading i {
  font-style: italic;
  color: var(--indigo-500);
}

.section-lead {
  font-size: 24px;
  line-height: 1.4;
  color: var(--muted-75);
  margin: 0;
}

@media (max-width: 900px) {
  .eyebrow { font-size: 16px; text-align: center; }
  .section-heading { font-size: 38px; text-align: center; }
  .section-lead { font-size: 18px; text-align: center; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.btn:active { transform: scale(0.97); }

.btn:focus-visible {
  outline: 2px solid var(--indigo-500);
  outline-offset: 3px;
}

.btn-black {
  background: var(--ink);
  color: var(--white);
}
.btn-black:hover { background: #262626; }
.btn-black:active { background: #000000; }

.btn-white {
  background: var(--white);
  color: var(--ink);
}
.btn-white:hover { background: #e9e9e9; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--white); }

/* ==========================================================================
   Header
   -- The site header markup/styling now lives entirely in
   css/header-legacy.css (the legacy mega-menu header). This section
   intentionally left without .site-header rules to avoid conflicting with
   that file.
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  /* padding: 90px 0 100px; */
  padding-top: 15px; 
  /* background: radial-gradient(circle at 36% 5%, #fafafa 0%, #ffffff 67%, #bfdbf6 75%, #80b8ec 83%, #60a6e7 88%, #4094e3 92%, #2082de 96%, #1079db 98%, #0070d9 100%); */
  background: radial-gradient(119.63% 119.63% at 36.06% 4.86%, #FAFAFA 0%, #FFFFFF 66.83%, #0070D9 100%);
  overflow: hidden;
  min-height: 700px;
}

.hero .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.hero-copy { 
  flex: 1 1 460px; 
  max-width: 609px; 
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 58px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
.hero-title em { font-style: italic; color: var(--indigo-500); }

.hero-list-heading {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: 28px;
  line-height: 1.1;
  font-family: var(--font-body);
  /* Same fix as .title-highlight: Geist's tabular "1" carries dead space
     from sharing every digit's fixed advance width -- proportional figures
     size it to its own ink. */
  font-variant-numeric: proportional-nums;
}

.hero-list {
  font-size: 18px;
  line-height: 1.4;
  color: var(--muted-80);
  margin: 0 0 var(--space-4);
  padding-left: 27px;
  list-style: disc;
}
.hero-list li { margin-bottom: 14px; }
.hero-list li:last-child { margin-bottom: 0px; }
.hero-list li::marker { color: var(--muted-80); }

.hero-footnote {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  color: var(--gray-light);
  margin: 0;
}

/* Lead capture card: Figma shows a subtle frosted-glass card that reads
   slightly grey against the pale hero backdrop, not a white tint (pixel-
   sampled the reference: card interior ~#F5F5F6 vs. ~#FEFEFE just outside
   it, i.e. a soft dark overlay, not a lightening one). */
.lead-card {
    flex: 1 1 460px;
    max-width: 629px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.06); */
    border-radius: var(--radius-card);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(2px);
    scroll-margin-top: 70px;
}
@media (min-width: 1201px) { /* NEW block */
    .lead-card {
        scroll-margin-top: 18rem;
    }
}
.lead-card-head { text-align: center; }
.lead-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  /* The card shrinks with the viewport between the 1100px mobile-stack
     breakpoint (card ~367px wide) and 1440px (card ~534px wide); scale the
     font so "Open your 3 in 1 NRI account," always stays on one line
     instead of wrapping mid-range. */
  font-size: clamp(26px, 3.54vw - 12.97px, 38px);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}
/* Target style overrides for just the "3 in 1" text block */
.lead-card-title .title-highlight {
    font-family: var(--font-highlight); /* Switches typography family to Geist */
    font-weight: 400;                   /* Keeps it Regular weight (NOT Bold!) */
    /* Geist's space glyph renders noticeably wider than Playfair Display's,
       making the gaps around "in" look inflated next to the surrounding
       serif text -- tighten it to match. */
    word-spacing: -1.5px;
    /* Geist's default tabular figures give "1" the same fixed advance width
       as every other digit, even though its glyph is much narrower -- that
       leftover box padding is what reads as "extra space" around it.
       Proportional figures size each digit to its own ink instead. */
    font-variant-numeric: proportional-nums;
}
.lead-card-subtitle {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  margin: 0;
}

.lead-form { display: flex; flex-direction: column; gap: var(--space-2); }
.lead-form-row { display: flex; gap: 10px; }
/* .field's flex:1 0 0 is meant for the paired fields inside a
   .lead-form-row (row axis = width). The OTP field sits directly in
   .lead-form (column axis), where that same flex-basis:0 was being read
   against the vertical axis instead, shrinking its height below 50px. */
.lead-form > .field { flex: none; }

/* Wraps each input with its validation message so the message stacks
   below the field instead of sitting beside it inside the row's flex. */
.field {
  flex: 1 0 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-error {
  display: none;
  font-size: 13px;
  line-height: 1.2;
  color: #d92127;
}
.field-error.is-visible { display: block; }

.lead-field.is-invalid { border-color: #d92127; }
.lead-field.is-invalid:focus-visible,
.lead-field.is-invalid:focus {
  border-color: #d92127;
  box-shadow: 0 0 0 3px rgba(217, 33, 39, 0.15);
}

.lead-field {
  width: 100%;
  height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lead-field::placeholder { color: var(--gray-placeholder); }
.lead-field:hover { border-color: rgba(0, 0, 0, 0.45); }
.lead-field:focus-visible,
.lead-field:focus {
  outline: none;
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 3px rgba(76, 79, 254, 0.15);
}

.lead-card-foot { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; width: 100%; }
.lead-consent { font-size: 16px; line-height: 1.1; color: var(--ink); margin: 0; }
.lead-terms { font-size: 14px; line-height: 1.1; color: var(--ink); margin: 0; }

/* Same reasoning as .app-promo: the two fixed-ish columns (609px text +
   629px card + gap + container padding ≈ 1480px) don't fit at common
   laptop/tablet widths like Surface Pro's 960px. No tablet Figma frame
   exists, so reuse the stacked mobile layout up to 1100px too. */
@media (max-width: 1100px) {
  .hero { padding: 47px 0 60px; text-align: center; }
  .hero .container { flex-direction: column; gap: 38px; }
  .hero-copy { flex: none; max-width: 100%; }
  .hero-title { font-size: 38px; text-align: center; }
  .hero-list-heading { font-size: 22px; }
  .hero-list { font-size: 12px; text-align: left; padding-left: 18px; padding-right: 18px; }
  .hero-footnote { text-align: center; padding: 0 18px; }

  .lead-card { flex: none; max-width: 340px; width: 100%; margin: 0 auto; padding: var(--space-4) var(--space-3); }
  .lead-card-title { font-size: 38px; }
  /* Stacking the row vertically flips its main axis to column, so the paired
     .field's flex:1 0 0 (meant for the row's width axis) would shrink
     their height the same way the OTP field did -- reset it here too. */
  .lead-form-row { flex-direction: column; }
  .lead-form-row .field { flex: none; }
  .lead-card-foot { 
    /* align-items: center;  */
    text-align: left; 
  }
  .lead-card-foot button { 
    margin-left: 28.5px; 
  }
  
}

/* ==========================================================================
   Product offerings
   ========================================================================== */
.products {
  background: var(--bg-soft);
  padding: 99px 0 100px;
}

.products-head { max-width: 1236px; margin: 0 0 var(--space-6); }

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4) var(--space-3);
  margin-bottom: var(--space-6);
}

.product-card {
  background: var(--white);
  border: 1px solid var(--indigo-500-50);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 300px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
  box-shadow: 0 12px 32px rgba(76, 79, 254, 0.14);
  transform: translateY(-4px);
  border-color: var(--indigo-500);
}

.product-card:focus-within { border-color: var(--indigo-500); }

/* Height-locked, width auto: each icon keeps its own native aspect ratio
   (they aren't all square) instead of being stretched into a fixed box. */
.product-icon { height: 68px; width: auto; }
.product-icon img { height: 100%; width: auto; }

.product-title {
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

.product-desc {
  font-size: 20px;
  line-height: 1.28;
  color: var(--muted-75);
  margin: 0;
}

@media (max-width: 900px) {
  .products { padding: 60px 0; text-align: center; padding-bottom: 44px;;}
  .products-head { text-align: center; }
  .products-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 38px;}
  .product-card { align-items: center; text-align: center; min-height: auto; padding: 18px; padding-bottom: 54px;}
  .product-icon { height: 48px; }
  .product-title { font-size: 24px; }
  .product-desc { font-size: 18px; }
}

/* ==========================================================================
   App promo
   ========================================================================== */
.app-promo {
  position: relative;
  /* background: linear-gradient(90deg, #fafafa 0%, #fafafa 100%), linear-gradient(90deg, #f0f8ff 0%, #f0f8ff 100%); */
  /* background: linear-gradient(0deg, #FAFAFA, #FAFAFA),linear-gradient(0deg, #F0F8FF, #F0F8FF); */
  background: #F0F8FF;
  padding: 99px 0 100px;
  overflow: hidden;
}

/* The phone graphic is positioned independently of the tag grid (it starts
   near the top of the section, alongside the heading, per Figma), so this
   wrapper is the positioning context for it. */
.app-promo-inner { position: relative; }

.app-promo-head { margin: 0 0 87px; }
.app-promo-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 58px;
  line-height: 1.1;
  margin: 0;
}
.app-promo-title em { font-style: italic; color: var(--indigo-500); }

/* One flat div for all purple tags: column-major grid so the first 4 tags
   fill column 1 top-to-bottom, then the 5th tag onward starts column 2. */
.app-promo-col--tags {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(2, 316px);
  column-gap: 10px;
  row-gap: var(--space-3);
  max-width: 642px;
}

.tag {
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 21.5px 28px;
  border-radius: var(--radius-card-sm);
  font-size: 24px;
  line-height: 1.1;
  color: var(--ink);
}

.tag--purple { background: var(--tag-purple-bg); border: 1px solid var(--tag-purple-border); }
.tag--green {
  background: var(--tag-green-bg);
  border: 2px solid var(--tag-green-border);
  justify-content: center;
  text-align: center;
  font-weight: 600;
  /* The tag's fill is translucent (20% alpha), so the phone's own bezel
     border line underneath was showing straight through it as a visible
     seam. Blurring what sits behind smooths that line away instead of
     rendering it sharply through the tint. */
  backdrop-filter: blur(10px);
}

/* Positioned relative to .app-promo-inner, matching the Figma offsets
   (left: 62.78% / top: 42px / width: 28.88% of the 1236px content column)
   so it floats to the right, independent of the tag grid's own flow. */
.app-promo-phone {
  position: absolute;
  top: 42px;
  left: 70%;
  width: 28.88%;
  min-width: 260px;
  max-width: 357px;
}
/* The <img> carries width/height="357"/"717" HTML attributes for its
   intrinsic size; without an explicit height here the browser locks the
   rendered height to that 717px attribute at ANY width, stretching the
   image (and its rounded corners) out of proportion whenever the phone
   isn't exactly 357px wide -- which is most of the fluid desktop range and
   all of mobile. */
.app-promo-phone img.phone-frame { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
/* Figma spec: left 15.41% / right 15.13% / vertical center at 50%-244px of
   the 717px-tall phone -- i.e. width 69.46%, top 13.53% (height follows
   from the logo's own intrinsic aspect ratio). */
.app-promo-phone .phone-logo {
  position: absolute;
  top: 13.53%;
  left: 50%;
  transform: translateX(-50%);
  width: 69.46%;
  z-index: 2;
}

/* Green tags float on top of the phone artwork, overlapping it on both sides,
   sized/positioned as a % of the phone so the overlap scales with it. Figma
   (854/891/357/430 at 1440px) puts the tag block's left edge 37px left of
   the phone and its right edge 36px past it -- an equal ~36.5px overlap on
   each side, i.e. left -10.22% / width 120.45% of the phone's own width. */
.app-promo-phone .app-promo-col--green {
  position: absolute;
  z-index: 3;
  top: 25.24%;
  left: -10.22%;
  width: 120.45%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* No dedicated tablet Figma frame exists for this section, and the desktop
   layout (phone absolutely positioned at left:62.78%, tags grid fixed at
   642px) only avoids colliding once the viewport is wide enough for 62.78%
   of the container to clear 642px + gap (~1227px+). Below that -- including
   iPad-class widths like 1024/1032px -- reuse the mobile stacked layout so
   the tags and phone never overlap. Kept close to that ~1227px minimum
   (rather than a rounder 1300/1350) because 1920px @ 150% Windows display
   scaling -- a common "recommended" laptop setting -- reports a 1280px CSS
   viewport, which needs to land on the desktop side of this breakpoint. */
@media (max-width: 1240px) {
  .app-promo { padding: 48px 0 60px; }
  .app-promo-inner { display: flex; flex-direction: column; }
  .app-promo-head { text-align: center; max-width: 100%; margin-bottom: 0px; }
  .app-promo-title { font-size: 38px; }
  /* Figma mobile keeps "power packed" flowing on the same line as
     "Introducing our all new" (only "investment app!" gets its own line),
     unlike desktop which breaks all three onto separate lines. */
  .app-promo-title-break { display: none; }
  /* One column: every tag stacks one by one down the page. Capped and
     centered (rather than max-width:100%) so it doesn't stretch edge-to-edge
     at tablet widths, where the container padding is much wider than on
     true mobile. */
  .app-promo-col--tags {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding-top: 28px;
    order: 1;
  }
  /* Keep position:relative (not static) so the green tags and logo, which are
     absolutely positioned as a % of this element, still anchor to it correctly
     -- they should keep floating on top of the phone on mobile too, exactly
     like desktop, just at a smaller phone size. */
  .app-promo-phone {
    position: relative;
    top: auto;
    left: auto;
    order: 2;
    min-width: 0;
    max-width: 294px;
    width: 100%;
    margin: var(--space-4) auto 0;
  }
  /* Mobile Figma spec has a narrower overlap than desktop (top 28.57% / left
     -7.48% / width 114.97% of the phone, vs desktop's 25.24% / -6.72% / 120.45%)
     -- using the desktop ratios here pushed the right edge past the viewport. */
  .app-promo-phone .app-promo-col--green {
    top: 28.57%;
    left: -7.48%;
    width: 114.97%;
    gap: 12px;
  }
  /* Figma mobile uses a tighter 8px corner radius for these tags vs the
     18px used on desktop. */
  .tag { height: auto; min-height: 78px; padding: 14px 18px; font-size: 18px; border-radius: 8px; }
  .app-promo-phone .app-promo-col--green .tag--green { font-size: 14px; padding: 10px 14px; }
}

/* ==========================================================================
   Why us + FAQ
   ========================================================================== */
/* Why HDFC Securities: stays plain white -- the white-to-blue gradient now
   lives entirely on .faq below, per-section instead of spanning both. */
.why-us {
  background: var(--white);
  padding: 99px 0 0;
}

.why-head { max-width: 1236px; margin: 0 0 var(--space-6); }
.why-head .section-heading em { color: var(--indigo-500); }
.why-head .section-heading .black { color: var(--ink); font-style: normal; }

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-3);
}

.why-item {
  border-top: 1px solid var(--indigo-500);
  padding: var(--space-5);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.why-item-head { display: flex; gap: var(--space-3); align-items: baseline; }
.why-item-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.1;
  color: var(--indigo-500);
  flex-shrink: 0;
  margin: 0;
}
.why-item-title { font-weight: 600; font-size: 28px; line-height: 1.1; flex: 1; margin: 0; }
.why-item-desc { font-size: 24px; line-height: 1.28; color: var(--muted-75); margin: 0; }

.why-cta { margin: var(--space-4) 0 70px; }

/* FAQ: standalone section carrying the white-to-blue gradient that used to
   span both this and .why-us together. */
/* Re-derived for this section's own (much shorter, wider) box now that it's
   standalone -- the original 127.48%/122.49% ellipse was sized for the old
   combined why+faq section's height, so applied here it reached the blue
   stop far too soon (visually much more blue, much higher up, than the
   reference). A flatter/taller ellipse (smaller horizontal radius, larger
   vertical radius relative to this shorter box) keeps the bottom-center
   mostly white while still bringing blue in from the corners. */
.faq {
  background: radial-gradient(127.48% 137.49% at 50% 0%, #FFFFFF 0%, #FFFFFF 44.00%, #0070D9 93.46%);
  padding: 0px 0 100px;
}
.faq-head { max-width: 1236px; margin: 0 0 var(--space-4); }

.faq-list { border-top: 1px solid var(--indigo-500); }

.faq-item { border-bottom: 1px solid var(--indigo-500); }

.faq-trigger {
  width: 100%;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  min-height: 80px;
  font-family: var(--font-body);
  font-size: 28px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq-trigger::-webkit-details-marker { display: none; }
.faq-trigger strong { font-weight: 600; }
.faq-trigger:hover { color: var(--navy-900); }
.faq-trigger:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 4px; }

.faq-chevron { width: 34px; height: 34px; flex-shrink: 0; transition: transform 0.2s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-panel { font-size: 20px; line-height: 1.5; color: var(--muted-75); padding: 0 0 var(--space-4); margin: 0; }

.faq-readmore { margin-top: var(--space-3); }

@media (max-width: 900px) {
  .why-us { padding-top: 48px; text-align: center; }
  .why-head, .faq-head { text-align: center; }
  .why-grid { grid-template-columns: 1fr; row-gap: 10px; }
  .why-item { padding: 18px; min-height: auto; text-align: left; }
  .why-item-num { font-size: 28px; }
  .why-item-title { font-size: 24px; }
  .why-item-desc { font-size: 18px; }
  .why-cta { margin-bottom: 98px; }

  .faq-head { margin-bottom: 0; }
  .faq-trigger { font-size: 18px; min-height: 64px; text-align: left; }
  .faq-panel { font-size: 16px; text-align: left; }
  .faq-readmore { margin-top: var(--space-4); }
  .faq { padding-top: 48px; padding-bottom: 60px; text-align: center; }
}

/* ==========================================================================
   Final CTA banner
   ========================================================================== */
.final-cta {
  position: relative;
  /* background: radial-gradient(ellipse 155px 54px at 50% -3%, #000000 0%, #00020c 2%, #000519 3%, #00092e 5%, #000e4a 8%, #001264 12%, #042c81 14%, #0845a0 15%, #0c5ebc 19%, #1078d9 26%, #308695 35%, #50b2fb 100%); */
  background: radial-gradient(107.31% 107.31% at 50% -4.77%, #000000 74.73%, #001264 84.24%, #1078D9 92.69%, #50B2FB 100%);
  padding: 125px 0;
  text-align: center;
}

.final-cta-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 78px;
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 var(--space-5);
}

@media (max-width: 900px) {
  .final-cta { padding: 60px 0; }
  .final-cta-title { font-size: 38px; margin-bottom: var(--space-4); }
}

/* ==========================================================================
   Footer
   (Ported verbatim from the legacy HSL.Web footer component:
   Development_16MAY2018/HSL.Web/Content/main1/CSS/style.css)
   ========================================================================== */

/* Base rem reference used by the legacy footer's rem-based rules below
   (62.5% of a 16px browser default = 10px, matching --unit at ≥1440px), and
   by the legacy header (css/header-legacy.css), which is entirely rem-based.
   The header additionally needs the narrower live-site breakpoints below --
   without them its rem sizing stays fixed at the ≥1600px value at every
   desktop width, rendering visibly larger/taller than hdfcsec.com. Ported
   verbatim from the LIVE site's Content/main1/CSS/style.css (this range
   doesn't exist in the older Development_16MAY2018 snapshot the header CSS
   itself was extracted from). */
html, body { font-size: 62.5%; }
@media (max-width: 1599.98px) { html { font-size: 52.5%; } }
@media (max-width: 1424.98px) { html, body { font-size: 48.5%; } }
@media (max-width: 1256.98px) { html, body { font-size: 44.5%; } }
@media (max-width: 991.98px)  { html, body { font-size: 40.5%; } }
@media (max-width: 767.98px)  { html, body { font-size: 62.5%; } }

:root {
  --unit: 10px;
}
@media (max-width: 1439.98px) {
  :root { --unit: 8.4px; }
}
@media (max-width: 1399.98px) {
  :root { --unit: 7.75px; }
}
@media (max-width: 1199.98px) {
  :root { --unit: 7.1px; }
}
@media (max-width: 991.98px) {
  :root { --unit: 10px; }
}

footer .container {
  width: 100%;
  /* max-width: 144rem !important;
  margin: 0 auto;
  padding: 0 4.8rem !important; */
}
/* @media (max-width: 991.99px) {
  footer .container { padding: 0 1.6rem !important; }
} */

.footer {
  background-color: #000000;
  color: #ffffff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.3;
}
.footer img { max-width: 100%; height: auto; display: block; }
.footer button { border: none; cursor: pointer; font-family: inherit; }

.footerContent {
  /* max-width: calc(var(--unit) * 134.4);
  margin: 0 auto; */
  padding-top:24px 
}

.footerMain {
  display: flex;
  flex-direction: row;
  gap: calc(var(--unit) * 8);
  justify-content: space-between;
  margin-bottom: calc(var(--unit) * 8);
}

.footerRightSide {
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 6);
  flex: 1;
}

.footerBrand {
  flex: 0 0 calc(var(--unit) * 31.8);
  max-width: 100%;
}

.footerLogo {
  width: 100%;
  max-width: calc(var(--unit) * 29.6);
  height: auto;
  margin-bottom: calc(var(--unit) * 3.4);
  transition: opacity 0.3s ease;
}
.footerLogo:hover { opacity: 0.85; }

.footerReg {
  font-size: calc(var(--unit) * 1.6);
  font-weight: 400;
  margin-bottom: calc(var(--unit) * 4);
}

.footerAddress {
  font-size: calc(var(--unit) * 1.6);
  font-weight: 400;
}

.footerLinks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: calc(var(--unit) * 4);
  column-gap: calc(var(--unit) * 2);
}

.footerColumn {
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 4);
}

.footerLink {
  color: #ffffff;
  text-decoration: none;
  font-size: calc(var(--unit) * 1.8);
  font-weight: 400;
  transition: color 0.3s ease;
  cursor: pointer;
  position: relative;
}
.footerLink .subFooterLinks {
  display: none;
  padding-top: calc(var(--unit) * 0.8);
  position: absolute;
  background: #3d3d3d;
  padding: calc(var(--unit) * 1.2);
  z-index: 9;
  border-radius: calc(var(--unit) * 1.2);
  /* Some categories (e.g. "Important Information") have 20+ sub-links --
     cap the dropdown height and let it scroll instead of overflowing the
     footer/viewport. */
  max-height: min(60vh, 340px);
  min-width: 220px;
  max-width: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #777 #3d3d3d;
}
.footerLink .subFooterLinks::-webkit-scrollbar { width: 6px; }
.footerLink .subFooterLinks::-webkit-scrollbar-track { background: #3d3d3d; }
.footerLink .subFooterLinks::-webkit-scrollbar-thumb { background: #777; border-radius: 3px; }
.footerLink .subFooterLinks .footerLink {
  font-size: calc(var(--unit) * 1.6);
  display: block;
  padding: calc(var(--unit) * 0.8) 0;
  font-weight: 400;
}
.footerLink:hover {
  color: #4ca8ff;
  font-weight: 600;
}
.footerLink:hover .subFooterLinks { display: block; }

.footerContact {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
  gap: calc(var(--unit) * 3.2);
}

.contactInfo { grid-column: span 2; }
.contactInfo,
.contactInfo + div { margin-top: calc(var(--unit) * 3.4); }
.contactInfo h3 {
  font-size: calc(var(--unit) * 1.8);
  font-weight: 400;
  margin-bottom: calc(var(--unit) * 0.8);
}

.contactPhone {
  font-size: calc(var(--unit) * 2.8);
  font-weight: 700;
}

.socialLinks {
  display: flex;
  gap: calc(var(--unit) * 1.2);
  margin-top: calc(var(--unit) * 0.8);
}

.socialIcon {
  width: calc(var(--unit) * 3.2);
  height: calc(var(--unit) * 3.2);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}
.socialIcon:hover {
  transform: translateY(calc(var(--unit) * -0.3)) scale(1.15);
  opacity: 0.85;
}

.disclaimerSection {
  border: calc(var(--unit) * 0.1) solid rgba(255, 255, 255, 0.4);
  border-radius: calc(var(--unit) * 4);
}
.footer-disclaimer-wrapper { padding: 0; }

.disclaimerBtnFull {
  padding: calc(var(--unit) * 1.6) calc(var(--unit) * 3.2);
  background: transparent;
  color: #ffffff;
  font-size: calc(var(--unit) * 1.8);
  font-weight: 400;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: background 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  margin-bottom: 0;
  border-radius: calc(var(--unit) * 4) calc(var(--unit) * 4) 0 0;
}
.disclaimerBtnFull:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(calc(var(--unit) * -0.2));
}
.disclaimerBtnFull .disclaimerIcon { transition: transform 0.3s ease; }
.disclaimerBtnFull[aria-expanded="true"] .disclaimerIcon { transform: rotate(180deg); }

.disclaimerContent {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, margin 0.3s ease;
  margin-bottom: 0;
}
.disclaimerContent[aria-hidden="false"] {
  max-height: max-content;
  margin-bottom: calc(var(--unit) * 3.4);
}

.disclaimerText {
  padding: calc(var(--unit) * 2) calc(var(--unit) * 3.2);
  background: rgba(255, 255, 255, 0.05);
  border-top: calc(var(--unit) * 0.1) solid rgba(255, 255, 255, 0.2);
  font-size: calc(var(--unit) * 1.4);
  color: #d1d5db;
}
.disclaimerText p { margin-bottom: calc(var(--unit) * 1.4); }

.copyright {
  font-size: calc(var(--unit) * 1.6);
  color: #a1a1aa;
  font-weight: 400;
  text-align: center;
  padding: 24px;
}

@media (max-width: 992px) {
  .footerContent { padding: calc(var(--unit) * 4.8) 0 0; }
  .footerMain { flex-direction: column; gap: calc(var(--unit) * 6); }
  .footerBrand { flex: auto; }
  .contactInfo { margin-top: calc(var(--unit) * 2); }
  .socialLinks { gap: calc(var(--unit) * 0.4); }
  .socialIcon {
    width: calc(var(--unit) * 2.8);
    height: calc(var(--unit) * 2.8);
  }
  .copyright {
    font-size: calc(var(--unit) * 1.2);
    color: #ffffff;
  }
  .footerLogo {
    max-width: calc(var(--unit) * 16);
    margin-bottom: calc(var(--unit) * 2.4);
  }
  .footerReg,
  .footerAddress,
  .footerLink,
  .contactInfo h3 { font-size: calc(var(--unit) * 1.4); }
  .footerReg { margin-bottom: calc(var(--unit) * 2); }
  .footerColumn { gap: calc(var(--unit) * 2); }
  .contactPhone { font-size: calc(var(--unit) * 1.8); }
  .disclaimerBtnFull {
    padding: calc(var(--unit) * 0.8) calc(var(--unit) * 1.6);
    font-size: calc(var(--unit) * 1.4);
  }
  .disclaimerBtnFull svg { width: calc(var(--unit) * 2.4); }
  .disclaimerContent[aria-hidden="false"] { margin-bottom: calc(var(--unit) * 2); }
  .disclaimerText { padding: calc(var(--unit) * 1.6) calc(var(--unit) * 1.6); }
  .disclaimerText p { font-size: calc(var(--unit) * 1.4); }
  .footerLink .subFooterLinks {
    padding-top: calc(var(--unit) * 0.8);
    position: static;
    background: transparent;
    padding: 0;
    z-index: 9;
  }
  .footerLink .subFooterLinks .footerLink {
    font-size: calc(var(--unit) * 1.2);
    padding: calc(var(--unit) * 0.4) 0;
  }
}

@media (max-width: 992px) {
  .footerLinks {
    grid-template-columns: repeat(2, 1fr);
    row-gap: calc(var(--unit) * 2);
  }
  .footerContact { grid-template-columns: 1fr; }
  .footerLogo {
        max-width: calc(var(--unit) * 16)!important;
        margin-bottom: calc(var(--unit) * 2.4);
    }
}

/* ==========================================================================
   Thank You page
   ========================================================================== */

/* Hero: same radial-gradient background as index.html's .hero, but with a
   simpler single text column and a decorative bleeding photo instead of
   the lead-capture card. */
.ty-hero {
  position: relative;
  background: radial-gradient(119.63% 119.63% at 36.06% 4.86%, #FAFAFA 0%, #FFFFFF 66.83%, #0070D9 100%);
  overflow: hidden;
  min-height: 700px;
}

.ty-hero .container {
  position: relative;
  height: 650px;
  display: flex;
  align-items: center;
}

.ty-hero-copy { position: relative; z-index: 2; max-width: 609px; display: flex; flex-direction: column; gap: var(--space-6); }

.ty-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 58px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.ty-hero-title em { font-style: italic; color: var(--indigo-500); }

.ty-hero-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

.ty-hero-photo-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Positioned/sized as a % of the hero section (matching the Figma px offsets
   at 1440x700: left 117 / width 1567), so the bleed scales with the section
   at any width. The source PNG had ~13% transparent padding above and ~3%
   below the actual illustration, which was cropped out of the asset itself
   (2744x1536 -> 2744x1296) so it can't show through as a background-colored
   band; top/height below are re-derived for that cropped aspect ratio. */
.ty-hero-photo {
  position: absolute;
  left: 8.13%;
  top: 11%;
  width: 108.8%;
  height: 105.6%;
  object-fit: cover;
  object-position: top left;
}

@media (max-width: 900px) {
  .ty-hero { min-height: auto; }
  .ty-hero .container {
    height: auto;
    flex-direction: column;
    padding-top: 47px;
    /* padding-bottom: 40px; */
  }
  .ty-hero-copy { text-align: center; align-items: center; max-width: 100%; gap: var(--space-4); }
  .ty-hero-title { font-size: 28px; }
  .ty-hero-sub { font-size: 18px; padding: 0 18px; }
  /* Mobile crop is a 360:473 portrait card; cover crops the (now
     padding-free) source image horizontally to fill it, centered on the
     subject. */
  .ty-hero-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 360 / 473;
    margin-top: var(--space-4);
    overflow: hidden;
  }
  .ty-hero-photo {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-position: 54% 50%;
  }
}

/* Info section: FAQs + Learn More, sharing the exact background gradient
   used by .app-promo, and reusing .eyebrow / .section-heading / .section-lead
   / .faq-* / .btn classes for every piece of typography and the accordion. */
.ty-info {
  /* background: linear-gradient(90deg, #fafafa 0%, #fafafa 100%), linear-gradient(90deg, #f0f8ff 0%, #f0f8ff 100%); */
  background: #F0F8FF;
  padding: 90px 0 100px;
}

.ty-faq { max-width: 1236px; margin: 0 0 130px; }
.ty-faq .faq-list { margin-bottom: var(--space-4); }

.ty-learn { max-width: 1236px; }
.ty-learn .section-lead { margin-bottom: var(--space-4); }

@media (max-width: 900px) {
  .ty-info { padding: 48px 0 60px; }
  .ty-faq, .ty-learn { text-align: center; max-width: 100%; }
  .ty-faq { margin-bottom: 60px; }
  .ty-faq .faq-trigger, .ty-faq .faq-panel { text-align: left; }
}