/*
 * Claims Assistance page (/claims-assistance), D-026.
 * From the owner's Figma frame "Claim Assistance" (file 4TkyRzPzs3MQpfIo7HxV7j, node 2159:20112), designed at
 * 1440px with a 1140px content column. Desktop sizes and offsets are the design's; the tablet and phone
 * layouts (not in the design) stack the same blocks. Section headings, buttons, inputs and the FAQ come from
 * the design system (components.css).
 */
.ca-page { --ca-col: 1140px; --ca-gutter: max(16px, env(safe-area-inset-left, 0px)); background: var(--cy-neutral-0); color: var(--cy-neutral-1000); overflow-x: clip; }
.ca-section-inner { max-width: var(--ca-col); margin: 0 auto; }

/* ---------- Hero ---------- */
.ca-hero { position: relative; overflow: hidden; padding-inline: var(--ca-gutter); }
.ca-hero__inner { position: relative; max-width: var(--ca-col); height: 680px; margin: 0 auto; }
.ca-hero__deco { position: absolute; pointer-events: none; max-width: none; }
.ca-hero__deco--e920 { left: -481.45px; top: 19.78px; width: 620.57px; height: 620.57px; }
.ca-hero__deco--e921 { left: 1030.41px; top: 116.71px; width: 104.38px; height: 104.38px; }
.ca-hero__deco--e922 { left: 1175.03px; top: 330.64px; width: 77.81px; height: 77.81px; }
.ca-hero__deco--dots1 { left: 82px; top: 447px; width: 213.77px; height: 162.8px; }
.ca-hero__deco--dots2 { left: 729px; top: 52px; width: 213.77px; height: 162.8px; }
.ca-hero__copy { position: relative; z-index: 1; padding-top: 120px; width: 581px; max-width: 100%; }
.ca-hero__title { margin: 0 0 24px; width: 556px; max-width: 100%; color: var(--cy-neutral-1000); }
/* OLD: margin-bottom 60px. D-056: the content document's longer lede and a second (WhatsApp) button. */
.ca-hero__lede { margin: 0 0 40px; font-size: var(--cy-fs-xl); line-height: 28px; color: var(--cy-neutral-1000); }
.ca-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
/* D-056: "Who can use claim assistance?" under the claim-type cards. */
.ca-types .ca-who__title { margin-top: 48px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cy-neutral-1000); }
.ca-steps .cs-lead { margin-top: 40px; }

.ca-hero__art { position: absolute; left: 594px; top: 148px; width: 511.56px; height: 532.45px; max-width: none; }

/* ---------- Why ---------- */
.ca-why { padding: var(--cy-section-y) var(--ca-gutter); }
.ca-why__inner { max-width: var(--ca-col); margin: 0 auto; display: grid; grid-template-columns: 432px minmax(0, 574px); gap: 134px; align-items: center; }
.ca-why__photo { width: 432px; height: 424px; object-fit: cover; border-radius: 12px; }
.ca-why__copy { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.ca-why__text { margin: 0; font-size: var(--cy-fs-lg); line-height: 24px; }
.ca-why__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ca-why__list li { display: flex; align-items: center; gap: 12px; font-size: var(--cy-fs-lg); line-height: 24px; }
.ca-why__list img { flex-shrink: 0; }

/* ---------- Types ---------- */
.ca-types { padding: var(--cy-section-y) var(--ca-gutter); }
.ca-types__list { margin: var(--cy-section-head) 0 0; padding: 0; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.ca-type {
  display: flex; flex-direction: column; align-items: center; width: 145px; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; filter: drop-shadow(0 0 3.37px rgba(0, 0, 0, 0.25));
}
.ca-type:focus-visible { outline: 2px solid var(--cy-brand-600); outline-offset: 4px; border-radius: 26px; }
.ca-type__tile { position: relative; display: block; width: 145px; height: 145px; margin-bottom: -16.86px; border-radius: 33.72px; background: var(--cy-brand-50); overflow: hidden; }
.ca-type__art { position: absolute; display: block; overflow: hidden; }
.ca-type__layer { position: absolute; display: block; }
.ca-type__layer img { display: block; width: 100%; height: 100%; max-width: none; }
.ca-type__art--pi { left: 30.83px; top: 31.67px; width: 80px; height: 80px; }
.ca-type__art--health { left: calc(50% - 31.29px); top: calc(50% - 24.97px); width: 62.45px; height: 49.95px; }
.ca-type__art--motor { left: calc(50% - 40.47px + 9.17px); top: calc(50% - 40.47px + 10.27px); width: 62.51px; height: 60.23px; }
.ca-type__art--term { left: calc(50% - 30.98px); top: calc(50% - 30.98px); width: 61.96px; height: 61.96px; }
.ca-type__art--investment { left: calc(50% - 30.98px); top: calc(50% - 29.52px); width: 61.97px; height: 58.97px; }
.ca-type__art--hospital { left: calc(50% - 32.03px); top: calc(50% - 25.29px); width: 62.46px; height: 50.58px; }
.ca-type__art--other { left: calc(50% - 29.56px); top: calc(50% - 29.56px); width: 59.07px; height: 59.07px; }
.ca-type__label {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 70.81px;
  padding: 8.43px 16.86px; border-radius: 25.29px; background: var(--cy-brand-600); color: var(--cy-neutral-0);
  font-size: var(--cy-fs-lg); line-height: 24px; text-align: center;
}
.ca-type:hover .ca-type__label { background: var(--cy-brand-700); }

/* ---------- Steps ---------- */
.ca-steps { padding: var(--cy-section-y) var(--ca-gutter); }
.ca-steps__list { margin: calc(var(--cy-section-head) + 63px) 0 0; /* + the big step numbers above the circles */ padding: 0; list-style: none; display: flex; justify-content: center; gap: 109px; }
.ca-step { position: relative; width: 196px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ca-step__num {
  position: absolute; left: calc(50% - 62.5px); top: -63px; transform: translateX(-50%);
  font: 600 128px/normal var(--cy-font); color: var(--cy-brand-50); pointer-events: none;
}
.ca-step__circle {
  position: relative; display: flex; align-items: center; justify-content: center; width: 196px; height: 196px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); overflow: hidden;
}
.ca-step__title { margin: 22px 0 4px; font: 600 var(--cy-fs-lg)/24px var(--cy-font); letter-spacing: 0; }
.ca-step__text { margin: 0; font-size: var(--cy-fs-lg); line-height: 24px; }

/* ---------- Benefits ---------- */
.ca-benefits { padding: var(--cy-section-y) var(--ca-gutter); }

/* ---------- Need immediate help ---------- */
.ca-help-wrap { padding: var(--cy-section-y) var(--ca-gutter); }
.ca-help { position: relative; max-width: var(--ca-col); min-height: 620px; margin: 0 auto; border-radius: 12px; background: var(--cy-neutral-0); box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); overflow: hidden; }
.ca-help__lines { position: absolute; left: -1773px; top: -202px; width: 3181.08px; height: 735.16px; max-width: none; pointer-events: none; }
.ca-help__art { position: absolute; left: 29px; top: calc(50% - 219px); width: 512px; height: 437px; }
.ca-help__body { position: relative; margin-left: 640px; padding: 38px 0 38px; width: 403px; display: flex; flex-direction: column; gap: 16px; }
.ca-help__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.ca-help__title { margin: 0; font-size: var(--cy-fs-3xl); line-height: 32px; font-weight: 600; }
.ca-help__text { margin: 0; font-size: var(--cy-fs-md); line-height: 20px; }
.ca-help__or { margin: 0; text-align: center; font-size: var(--cy-fs-lg); line-height: 24px; }
.ca-help__call {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 100px; padding: 24px 46px 16px;
  border-radius: 12px; background: var(--cy-neutral-100); text-align: center;
  box-shadow: inset -3px -3px 4px rgba(0, 0, 0, 0.3), inset 3px 3px 4px rgba(255, 255, 255, 0.35);
}
.ca-help__call p { margin: 0; font-size: var(--cy-fs-xs); line-height: 16px; color: var(--cy-secondary-600); }
.ca-help__phone { display: inline-flex; align-items: center; gap: 12px; font-size: var(--cy-fs-2xl); line-height: 28px; font-weight: 600; color: var(--cy-brand-600); text-decoration: none; }
.ca-help__phone:hover { color: var(--cy-brand-700); text-decoration: none; }

/* ---------- Tablet: the 1140px column no longer fits ---------- */
@media (max-width: 1199px) {
  .ca-hero__inner { height: auto; padding-bottom: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 32px; align-items: end; }
  .ca-hero__copy { width: auto; padding-top: 96px; padding-bottom: 72px; }
  .ca-hero__art { position: relative; left: auto; top: auto; width: 100%; height: auto; max-width: 420px; justify-self: end; }
  .ca-hero__deco--dots2, .ca-hero__deco--e921, .ca-hero__deco--e922 { display: none; }
  .ca-why__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; }
  .ca-why__photo { width: 100%; height: auto; aspect-ratio: 432 / 424; }
  .ca-types__list { flex-wrap: wrap; justify-content: center; row-gap: 32px; }
  .ca-steps__list { flex-wrap: wrap; gap: 64px 48px; }
  .ca-help__art { width: 40%; height: auto; left: 2%; top: 50%; transform: translateY(-50%); }
  .ca-help__body { margin-left: auto; margin-right: 32px; width: min(403px, 52%); }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .ca-hero__inner { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; gap: 0; }
  .ca-hero__copy { padding-top: 48px; padding-bottom: 24px; }
  .ca-hero__lede { font-size: var(--cy-fs-lg); line-height: 24px; margin-bottom: 32px; }
  .ca-hero__ctas .cy-btn { flex: 1 1 100%; }
  .ca-hero__art { justify-self: center; max-width: 300px; }
  .ca-hero__deco--e920 { left: -380px; }
  .ca-hero__deco--dots1 { left: auto; right: -60px; top: 380px; }

  .ca-why__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ca-why__list li { align-items: flex-start; font-size: var(--cy-fs-md); line-height: 22px; }

  .ca-types__list { gap: 24px 16px; }
  .ca-type { width: 140px; }

  .ca-steps__list { flex-direction: column; align-items: center; gap: 64px; }

  .ca-help { min-height: 0; }
  .ca-help__art { position: relative; display: block; width: 80%; max-width: 320px; margin: 24px auto 0; left: auto; top: auto; transform: none; }
  .ca-help__body { margin: 0; width: auto; padding: 24px 16px; }
  .ca-help__call { padding-inline: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ca-type__label { transition: background var(--cy-duration) var(--cy-ease); }
}
.ca-benefits .cy-benefit__title { font: 500 var(--cy-fs-lg)/24px var(--cy-font); letter-spacing: 0; }