/* ==========================================================================
   Customer Story detail — page styles

   Source of truth: Figma "Konverz AI Website Revamp"
     file  8dr7VdMEDkSgU7LJiD0N9t
     frame 3028:370  bharti-axa-customer-story  (1440 x 4938)

   Section geometry, straight from the frame:
     navbar            0    h 85
     Hero              85   h 652
     Challenge         737  h 616   (title col x=80 w=400, body x=560 w=800)
     Why Konverz       1353 h 623
     Quote             1976 h 802   (card x=160 w=1120 h=562)
     Solution          2778 h 610
     Key Highlights    3388 h 780   (grid x=80 w=1280, cards 410.67x228 gap 24)
     CTA               4168 h 465
     footer            4633 h 305

   Everything is scoped under .csd-page so the globally loaded bootstrap.min.css
   and style.css cannot leak into (or be altered by) this page.
   ========================================================================== */

.csd-page {
  /* ---- colour tokens (shared with the listing) ---- */
  --csd-text: #343D43;
  /* Kz Text Primary */
  --csd-heading: #1A1A1A;
  /* Accent/Greys/Grey-80 */
  --csd-muted: #71777B;
  --csd-pink: #B5277C;
  --csd-pink-soft: #F8E9F2;
  /* Brand/Primary/Primary-10 */
  --csd-blue: #005184;
  /* Brand/Secondary/Secondary-50 */
  --csd-band: #F5F6F8;
  /* alternating section band */
  --csd-card: #F1F5F9;
  --csd-chip: #E4EEF7;
  --csd-rule: #E4E8EC;

  --csd-cta-from: #B5277C;
  --csd-cta-to: #081208;
  --csd-btn-from: #F8E9F2;
  --csd-btn-to: #FFFFFF;

  /* ---- layout tokens (Figma: 1280 content inside a 1440 frame) ---- */
  --csd-container: 1280px;
  --csd-gutter: 80px;
  --csd-section-pad: 100px;
  --csd-header-h: 74px;

  /* ---- type scale ---- */
  --csd-h1: 40px;
  --csd-h2: 40px;
  --csd-lead: 20px;
  --csd-body: 16px;

  position: relative;
  width: 100%;
  overflow-x: clip;
  font-family: Poppins, sans-serif;
  color: var(--csd-text);
  /* deliberately NO background here: the hero art sits at z-index -1 and a
     background on this element would paint straight over it */
}

/* Figma's 1280 is the content width, so gutters are added on top of the cap
   rather than subtracted from it (same rule as the listing page). */
.csd-container {
  width: 100%;
  max-width: calc(var(--csd-container) + var(--csd-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--csd-gutter);
  box-sizing: border-box;
}

.csd-section {
  padding-block: var(--csd-section-pad);
}

.csd-section--band {
  background: var(--csd-band);
}

/* ---- shared eyebrow: rotated square + label (Figma 3028:384) ---- */
.csd-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--csd-pink);
}

/* Figma draws a 16.97px square rotated 45deg — i.e. a 12px diamond */
.csd-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: var(--csd-pink);
  transform: rotate(45deg);
}

.csd-h2 {
  margin: 0;
  font-size: var(--csd-h2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.5px;
  color: var(--csd-heading);
}

/* sub-heading inside a section body (Vedanta's Solution opens with one) */
.csd-h3 {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.2px;
  color: var(--csd-heading);
}

.csd-p {
  margin: 0 0 24px;
  font-size: var(--csd-body);
  font-weight: 400;
  line-height: 26px;
  color: var(--csd-muted);
}

.csd-p:last-child {
  margin-bottom: 0;
}

.csd-p--lead {
  font-size: var(--csd-lead);
  line-height: 28px;
  color: var(--csd-text);
}

/* ==========================================================================
   1. Hero (Figma 3028:372 — 1440 x 652)
   ========================================================================== */

/* Figma 3028:372 is a fixed 1440 x 652 band with its content centred. Setting
   the height (rather than stacking hero padding on top of the next section's
   100px) keeps the gap to the Challenge heading at the designed 100px. */
.csd-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 652px;
  padding-block: 48px;
}

.csd-hero>.csd-container {
  width: 100%;
}

/* Hero backdrop — the native Figma raster (node 3028:248, 1774 x 887), so the
   geometry is taken straight from the frame rather than tuned by eye:
     width  1774 / 1440 = 123.2% of the frame
     top    y = -82 in frame coords, i.e. 82px above the page, which sits
            (header height + 82) above this section's own top edge. */
.csd-hero__art {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--csd-header-h) - 82px);
  left: 50%;
  width: 123.2%;
  max-width: none;
  aspect-ratio: 1774 / 887;
  transform: translateX(-50%);
  pointer-events: none;
  background-color: #FFFFFF;
  background-image: url("../images/details-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}

.csd-hero__art::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 32%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}

.csd-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 64px;
  align-items: center;
}

.csd-hero__copy {
  min-width: 0;
}

/* industry pill */
.csd-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 7px 16px;
  border-radius: 60px;
  border: 1px solid #E1A9CB;
  background: #F8E9F2;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--csd-pink);
}

.csd-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--csd-pink);
}

.csd-hero__title {
  margin: 0 0 24px;
  font-size: var(--csd-h1);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -1px;
  color: var(--csd-heading);
}

.csd-hero__intro {
  margin: 0;
  max-width: 620px;
  font-size: var(--csd-body);
  line-height: 26px;
  color: var(--csd-muted);
}

.csd-hero__figure {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .16);
}

.csd-hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 520 / 366;
  object-fit: cover;
}

/* ==========================================================================
   2. Challenge (Figma 3028:381 — title col 400, body col 800 at x=560)
   ========================================================================== */

.csd-split {
  display: grid;
  grid-template-columns: 400px minmax(0, 800px);
  gap: 80px;
  align-items: start;
}

.csd-split__title .csd-h2 {
  font-size: 36px;
}

/* a list rendered inside the narrower 800px body column stays single-column */
.csd-split__body .csd-reqs {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 18px;
}

/* ==========================================================================
   3. Why Konverz (Figma 3028:392)
   ========================================================================== */

.csd-why__head {
  max-width: 1280px;
  margin-bottom: 48px;
}

.csd-why__head .csd-h2 {
  margin-bottom: 24px;
}

/* requirement list — two columns of 620 with a 40px gutter (Figma 3028:402) */
.csd-p + .csd-reqs,
.csd-h3 + .csd-reqs {
  margin-top: 8px;
}

.csd-reqs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csd-reqs + .csd-p {
  margin-top: 28px;
}

.csd-req {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 32px;
}

.csd-req__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--csd-pink);
  background: #F8E9F2;
  border-radius: 50px;
}

.csd-req__icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.csd-req__text {
  font-size: var(--csd-body);
  font-weight: 500;
  line-height: 26px;
  color: var(--csd-text);
}

/* ==========================================================================
   4. Quote (Figma 3028:425 — card 1120 x 562, icon 64, text 992)
   ========================================================================== */

.csd-quote__card {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  padding: 64px;
  border-radius: 24px;
  background: var(--csd-pink-soft);
  text-align: center;
  box-sizing: border-box;
}

.csd-quote__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 48px;
  border-radius: 50%;
  background: #B5277C;
  color: #FFFFFF;
}

.csd-quote__mark svg {
  display: block;
  width: 24px;
  height: 24px;
}

.csd-quote__text {
  margin: 0 0 48px;
  font-size: var(--csd-lead);
  font-weight: 400;
  line-height: 32px;
  color: var(--csd-text);
}

.csd-quote__name {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  color: var(--csd-heading);
}

.csd-quote__role {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--csd-pink);
}

/* ==========================================================================
   5. Solution (Figma 3028:434)
   ========================================================================== */

.csd-solution .csd-h2 {
  margin-bottom: 32px;
}

/* ==========================================================================
   6. Key Highlights (Figma 3028:441 — cards 410.67 x 228, gap 24, pad 32)
   ========================================================================== */

.csd-hl__head {
  margin-bottom: 48px;
  text-align: center;
}

.csd-hl__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csd-hl {
  display: flex;
  flex-direction: column;
  min-height: 228px;
  padding: 32px;
  box-sizing: border-box;
  border-radius: 16px;
  background: var(--csd-card);
  transition: transform .3s ease, box-shadow .3s ease;
}

.csd-hl:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(16, 24, 40, .10);
}

.csd-hl__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--csd-chip);
  color: var(--csd-blue);
}

.csd-hl__icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.csd-hl__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--csd-heading);
}

/* ==========================================================================
   7. Final CTA — identical to the listing (Figma 3028:495 / 3028:249)
   ========================================================================== */

.csd-cta {
  padding-inline: 0;
}

/* Figma 3028:495 is a fixed 1280x465 box with its content centred, so the
   height is set rather than left to the padding (which lands ~94px short). */
.csd-cta__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 465px;
  padding: 60px;
  box-sizing: border-box;
  border-radius: 48px 48px 0 0;
  overflow: hidden;
  text-align: center;
  background-color: #081208;
  background-image: linear-gradient(180deg, var(--csd-cta-from) 0%, var(--csd-cta-to) 100%);
}

.csd-cta__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  pointer-events: none;
}

.csd-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 974px;
  color: #FFFFFF;
}

.csd-cta__title {
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
}

.csd-cta__sub {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #FFFFFF;
}

.csd-cta__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 16px 9px 32px;
  border-radius: 60px;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  color: var(--csd-text);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--csd-btn-from) 0%, var(--csd-btn-to) 100%);
  box-shadow:
    inset 0 2px 2px 0 rgba(255, 255, 255, .25),
    inset 0 9px 7.5px 0 rgba(255, 255, 255, .25),
    0 4px 18.05px rgba(40, 40, 40, .20);
  transition: transform .3s ease, box-shadow .3s ease, padding .3s ease;
}

/* Hover matches the site's other "Book a demo" pills (.hirecta-btn, see
   css/style.css): the arrow slides to the front and the label slides after
   it, swapping places. The left/right padding flips by the same amount so
   the button never changes width mid-transition. The travel distances come
   from --hb-text-w / --hb-icon-w, measured at runtime in js/cs-reveal.js. */
.csd-cta__btn:hover,
.csd-cta__btn:focus-visible {
  color: var(--csd-text);
  transform: translateY(-2px);
  padding: 9px 32px 9px 16px;
  box-shadow:
    inset 0 2px 2px 0 rgba(255, 255, 255, .25),
    inset 0 9px 7.5px 0 rgba(255, 255, 255, .25),
    0 10px 26px rgba(40, 40, 40, .30);
}

.csd-cta__btn-text,
.csd-cta__btn-icon {
  display: inline-flex;
  align-items: center;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.csd-cta__btn:hover .csd-cta__btn-icon,
.csd-cta__btn:focus-visible .csd-cta__btn-icon {
  transform: translateX(calc(-1 * (var(--hb-text-w, 96px) + 10px)));
}

.csd-cta__btn:hover .csd-cta__btn-text,
.csd-cta__btn:focus-visible .csd-cta__btn-text {
  transform: translateX(calc(var(--hb-icon-w, 30px) + 10px));
}

.csd-cta__btn img {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 29.99px;
}



/* ==========================================================================
   8. Responsive
   Figma authors this frame at 1440 only; the steps below are interpolated.
   Targets: 1920x1080, 1920x1200, 1440x900, 1366x768, 1280x720, tablet, mobile.
   ========================================================================== */

@media (max-width: 1366px) {
  .csd-page {
    --csd-gutter: 48px;
    --csd-section-pad: 84px;
    --csd-h1: 36px;
    --csd-h2: 36px;
  }

  .csd-hero__inner {
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 48px;
  }

  .csd-split {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 56px;
  }
}

@media (max-width: 1180px) {
  .csd-page {
    --csd-gutter: 40px;
    --csd-h1: 34px;
    --csd-h2: 32px;
  }

  .csd-hero__inner {
    grid-template-columns: minmax(0, 1fr) 400px;
  }

  .csd-split__title .csd-h2 {
    font-size: 32px;
  }

  .csd-quote__card {
    padding: 48px;
  }

  .csd-cta__title {
    font-size: 42px;
    line-height: .95;
  }
}

/* --- tablet: hero and the split stack, highlights drop to 2 up --- */
@media (max-width: 991px) {
  .csd-page {
    --csd-gutter: 32px;
    --csd-section-pad: 64px;
    --csd-h1: 32px;
    --csd-h2: 30px;
    --csd-lead: 18px;
  }

  .csd-hero {
    min-height: 0;
    padding-block: 56px 64px;
  }

  .csd-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .csd-hero__figure {
    order: -1;
  }

  .csd-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .csd-split__title .csd-h2 {
    font-size: 30px;
  }

  .csd-hl__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .csd-quote__text {
    line-height: 30px;
  }

  .csd-cta__banner {
    min-height: 400px;
    padding: 56px 40px;
    border-radius: 40px 40px 0 0;
  }

  .csd-cta__title {
    font-size: 34px;
    line-height: 1.05;
  }

  .csd-cta__sub {
    font-size: 17px;
    line-height: 1.5;
  }
}

/* --- mobile --- */
@media (max-width: 767px) {
  .csd-page {
    --csd-gutter: 20px;
    --csd-section-pad: 48px;
    --csd-h1: 28px;
    --csd-h2: 26px;
    --csd-lead: 17px;
    --csd-body: 15px;
    --csd-header-h: 60px;
  }

  .csd-hero {
    min-height: 0;
    padding-block: 40px 48px;
  }

  .csd-hero__art {
    width: 200%;
  }

  .csd-reqs {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }

  .csd-quote__card {
    padding: 32px 22px;
    border-radius: 20px;
  }

  .csd-quote__mark {
    width: 52px;
    height: 52px;
    margin-bottom: 28px;
  }

  .csd-quote__text {
    margin-bottom: 32px;
    line-height: 28px;
    text-align: left;
  }

  .csd-hl__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .csd-hl {
    min-height: 0;
    padding: 24px;
  }

  .csd-cta {
    --csd-gutter: 0px;
  }

  .csd-cta__banner {
    /* Figma mobile frame 3028:795 is 390 x 343.99 */
    min-height: 344px;
    padding: 44px 20px;
    gap: 24px;
    border-radius: 28px 28px 0 0;
  }

  .csd-cta__title {
    font-size: 28px;
  }

  .csd-cta__sub {
    font-size: 15px;
  }

  .csd-cta__btn {
    padding: 12px 12px 12px 24px;
    font-size: 15px;
  }

  .csd-cta__btn img {
    width: 26px;
    height: 26px;
  }
}

/* ==========================================================================
   9. Accessibility
   ========================================================================== */

.csd-cta__btn:focus-visible,
.csd-page a:focus-visible {
  outline: 2px solid var(--csd-blue);
  outline-offset: 3px;
}

.csd-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {

  .csd-hl,
  .csd-cta__btn,
  .csd-cta__btn img {
    transition: none !important;
    transform: none !important;
  }
}