/*
 * PI landing page (/doctor-professional-indemnity), D-026.
 * From the owner's Figma frame "PI Landing Page" (file 4TkyRzPzs3MQpfIo7HxV7j, node 2537:18097), designed at
 * 1440px with a 1140px content column. Desktop sizes and offsets are the design's. Tablet and phone (not in the
 * design) stack the hero and scale the photo group down. Section headings, buttons, inputs, benefit cards and
 * the FAQ come from the design system (components.css).
 * Replaces the D-025 step-1 copy of pi.coveryou.in's stylesheet.
 */
.pl-page { --pl-gutter: max(16px, env(safe-area-inset-left, 0px)); background: var(--cy-neutral-0); color: var(--cy-neutral-1000); overflow-x: clip; }
.pl-section { padding-inline: var(--pl-gutter); }
.pl-inner { max-width: 1140px; margin: 0 auto; }

/* ---------- Hero ---------- */
.pl-hero { position: relative; overflow: hidden; padding-inline: var(--pl-gutter); }
/* OLD: display: flow-root, with the H1 and photo group absolutely placed from the top (title 56px, photos 188px)
   and the form card pushed right with margin-left: 674px - the left side stayed top-aligned while the card grew.
   Owner (22 Oct): two columns, vertically centred. The left column keeps the design's internal offsets. */
.pl-hero__inner { position: relative; display: grid; grid-template-columns: 622px 466px; justify-content: space-between; align-items: stretch; max-width: 1140px; min-height: 680px; margin: 0 auto; }
.pl-hero__left { position: relative; display: flex; flex-direction: column; padding: 92px 0 48px; } /* 92px: the card's 64px margin + its 29px padding, so both titles start level */
.pl-deco { position: absolute; max-width: none; pointer-events: none; }
.pl-deco--e156 { left: -351px; top: 14px; width: 490px; height: 490px; }
/* rings-left, e160 and e2 sit inside .pl-visual (they follow the photo group); offsets are from its top-left. */
.pl-deco--rings-left { left: -93px; top: 123.96px; width: 366px; height: 366px; }
.pl-deco--rings-right { left: 876px; top: 266px; width: 414px; height: 414px; transform: scaleX(-1); }
.pl-deco--e160 { left: -19px; top: 198px; width: 22px; height: 22px; }
.pl-deco--e2 { left: 177.57px; top: 435.05px; width: 42.84px; height: 42.84px; }

/* Owner (22 Oct): same font (Inter), livelier type. The H1 keeps the D-027 bold uppercase + gradient accent; it is
   now display-sized with tighter tracking, and the stat and form text get stronger weight contrast.
   OLD: font-size: 36px; line-height: 48px;
   D-070 (owner, 26 Oct): 36px so the first line ("HEALTH INSURANCE FOR DOCTORS,") stops breaking. OLD: 38px / 42px. */
.pl-hero__title {
  position: relative; z-index: 1; margin: 0;
  font-size: 36px; line-height: 40px; letter-spacing: -0.025em;
}

/* Photo group: one 701 x 413 box (design x -79..622, y 188..601) so it can be scaled as a unit. */
/* D-071 (owner): a fixed 40px under the headline on every page; a taller form card leaves its extra height below the
   photo group. OLD: margin: auto 0 auto -79px (centred in the space under the headline: 24-118px gaps by page). */
.pl-visual { position: relative; flex-shrink: 0; margin: 40px 0 auto -79px; padding-top: 0; width: 701px; height: 413px; }
.pl-visual__ring { position: absolute; left: 106px; top: 16px; width: 392px; height: 392px; border: 0.608px solid var(--cy-brand-600); border-radius: 50%; }
.pl-visual__disc { position: absolute; left: 124.2px; top: 20.55px; width: 392px; height: 392px; border: 0.608px solid var(--cy-brand-600); border-radius: 50%; background: var(--cy-brand-50); }
.pl-visual__photo { position: absolute; left: 125px; top: 21px; width: 392px; height: 392px; border-radius: 50%; overflow: hidden; }
.pl-visual__photo img { position: absolute; left: -112px; top: -21px; width: 619px; height: 413px; max-width: none; object-fit: cover; }

.pl-stat { position: absolute; margin: 0; background: #f5f5f4; border: 0.765px solid var(--cy-brand-600); border-radius: 16px; color: #171717; }
.pl-stat p { margin: 0; white-space: nowrap; }
/* OLD: num 600 24/32; label 400 14/20 at 50% opacity (washed out). Condensed per owner (22 Oct): sentence-case labels. */
.pl-stat__num { font: 700 26px/30px var(--cy-font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--cy-neutral-1000); }
.pl-stat__label { font: 500 13px/17px var(--cy-font); letter-spacing: -0.01em; color: var(--cy-neutral-600); }
.pl-stat__icon { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 12.24px; background: var(--cy-brand-600); }
.pl-stat--doctors {
  left: 464px; top: 0; display: flex; flex-direction: column; align-items: center; gap: 12.24px; padding: 18.36px;
  filter: drop-shadow(0 18.36px 19.125px rgba(0, 0, 0, 0.15));
}
.pl-stat__badge { position: relative; display: block; width: 64px; height: 64px; border-radius: 6px; background: var(--cy-brand-600); box-shadow: 0 8px 40px rgba(66, 61, 207, 0.16); }
.pl-stat__badge span { position: absolute; left: 11.19px; top: 11.19px; width: 43.2px; height: 41.6px; border-radius: 6px; background: var(--cy-neutral-0); }
.pl-stat__badge img { position: absolute; left: 21.14px; top: 19.64px; }
.pl-stat--focus { left: 0; top: 234px; width: 251px; height: 100px; filter: drop-shadow(0 18.36px 19.125px rgba(0, 0, 0, 0.15)); }
.pl-stat--focus .pl-stat__icon { left: 15.23px; top: 28px; width: 44px; height: 44px; }
.pl-stat--focus .pl-stat__num { position: absolute; left: 72px; top: 17px; }
.pl-stat--focus .pl-stat__label { position: absolute; left: 72px; top: 49px; }
.pl-stat--hours { left: 430px; top: 319px; width: 271px; height: 83px; box-shadow: 0 18.36px 38.25px rgba(0, 0, 0, 0.15); }
.pl-stat--hours .pl-stat__icon { left: 12px; top: 18px; width: 48px; height: 48px; }
.pl-stat--hours .pl-stat__label { position: absolute; left: 72px; top: 16px; }
.pl-stat--hours .pl-stat__num { position: absolute; left: 71px; top: 34px; }

/* Quote card */
.pl-quote {
  position: relative; z-index: 2; width: 466px; margin: 64px 0; overflow: hidden;
  background: var(--cy-neutral-0); border-bottom: 4px solid var(--cy-brand-600); border-radius: 12px;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.25);
}
.pl-quote__deco { position: absolute; left: 332px; top: -39px; width: 190.44px; height: 177.33px; max-width: none; pointer-events: none; }
.pl-quote__body { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 29px 32px 28px; }
.pl-quote__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
/* OLD: title 600 18/28; sub 12/16 black. */
.pl-quote__title { margin: 0; padding-right: 48px; font: 700 19px/25px var(--cy-font); letter-spacing: -0.02em; }
.pl-quote__title span { color: var(--cy-brand-600); }
.pl-quote__sub { margin: 0; max-width: 360px; font-size: var(--cy-fs-sm); line-height: 18px; color: var(--cy-neutral-600); }
.pl-form { display: flex; flex-direction: column; gap: 24px; }
.pl-form__fields { display: flex; flex-direction: column; gap: 16px; }
.pl-form .error { display: block; margin-top: 4px; font-size: var(--cy-fs-xs); line-height: 16px; }
.pl-form .error:empty { display: none; }
.pl-input { position: relative; display: block; }
.pl-input > img { position: absolute; left: 16px; top: 12px; pointer-events: none; }
.pl-input .cy-input { width: 100%; padding-left: 52px; border-color: #757575; }
.pl-input .cy-input::placeholder { color: #757575; }
.pl-input--select > img:first-child { left: 18px; }
.pl-input--select .cy-input { padding-left: 54px; padding-right: 48px; appearance: none; -webkit-appearance: none; background: var(--cy-neutral-0); cursor: pointer; }
.pl-input--select .cy-input:invalid, .pl-input--select .cy-input option[value=""] { color: #757575; }
.pl-input__arrow { left: auto !important; right: 18px; transform: rotate(180deg); }
.pl-policy { margin: 0; min-width: 0; padding: 10px 16px 12px; border: 1px solid #757575; border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
.pl-policy legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; font: 500 var(--cy-fs-sm)/18px var(--cy-font); }
.pl-policy label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--cy-fs-sm); line-height: 18px; cursor: pointer; }
.pl-policy input { accent-color: var(--cy-brand-600); }

.pl-quote__trust { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pl-rm {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 302px; max-width: 100%; margin: 0; padding: 2px 8px;
  border-radius: 8px; background: linear-gradient(to right, #fff 0.871%, #fdeeec 41.791%);
  font: 500 var(--cy-fs-xs)/16px var(--cy-font);
}
.pl-rm__icon, .pl-rm__smile { position: relative; display: block; flex-shrink: 0; overflow: hidden; }
.pl-rm__icon { width: 32px; height: 32px; }
.pl-rm__smile { position: absolute; }
.pl-rm__icon span, .pl-rm__smile span { position: absolute; display: block; }
.pl-rm__icon img { display: block; width: 100%; height: 100%; }
.pl-wa { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--cy-fs-xs); line-height: 16px; }
.pl-wa__toggle { position: relative; display: block; width: 33px; height: 18px; }
.pl-wa__toggle span { position: absolute; display: block; inset: -11.11% -6.06% -11.11% 0; }
.pl-wa__toggle img { display: block; width: 100%; height: 100%; max-width: none; }
.pl-quote__legal { margin: 0; text-align: center; font-size: 10px; line-height: 16px; }
.pl-quote__legal a { color: #0000ff; }

/* ---------- What is PI ---------- */
.pl-what { padding-block: var(--cy-section-y); }
/* OLD: text-align: center - each paragraph wrapped to a different width and left white space at the sides
   (owner, 22 Oct). Now the text uses the page's full 1140px column, centred (owner); phones keep left-aligned
   text (below). */
.pl-what__text { margin-top: var(--cy-section-head); text-align: center; hyphens: none; font-size: var(--cy-fs-lg); line-height: 26px; }
.pl-what__text .nowrap { white-space: nowrap; }
.pl-what__text p { margin: 0; }
.pl-what__text p + p { margin-top: 24px; }
.pl-what__text strong, .pl-why__text strong { font-weight: 600; }

/* ---------- Why essential ---------- */
.pl-why { padding-block: var(--cy-section-y); }
.pl-why__inner { display: grid; grid-template-columns: minmax(0, 625px) 432px; justify-content: space-between; align-items: center; gap: 48px; }
.pl-why__copy { display: flex; flex-direction: column; gap: var(--cy-section-head); min-width: 0; }
.pl-why__text { font-size: var(--cy-fs-lg); line-height: 24px; }
.pl-why__text p { margin: 0 0 24px; }
.pl-why__text p:last-child { margin-bottom: 0; }
.pl-why__text ul { margin: 0 0 24px; padding-left: 24px; }
.pl-why__photo { width: 432px; height: 306px; object-fit: cover; border-radius: 12px; }

/* ---------- How it works ---------- */
.pl-how { padding-block: var(--cy-section-y); }
.pl-how__list { margin: var(--cy-section-head) 0 0; padding: 0; list-style: none; display: flex; justify-content: space-between; gap: 40px; }
.pl-step { display: flex; flex-direction: column; align-items: center; width: 255px; text-align: center; }
.pl-step__circle { position: relative; display: block; width: 255px; height: 255px; border-radius: 50%; background: var(--cy-neutral-0); box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); overflow: hidden; }
.pl-step__circle img { position: absolute; max-width: none; }
.pl-step__title { margin: 20px 0 5px; font: 500 var(--cy-fs-2xl)/28px var(--cy-font); letter-spacing: 0; }
.pl-step__text { margin: 0; max-width: 223px; font-size: var(--cy-fs-md); line-height: 20px; }

/* ---------- Benefits ---------- */
.pl-benefits { padding-block: var(--cy-section-y); }
.pl-benefits .cy-benefit__title { font: 500 var(--cy-fs-lg)/24px var(--cy-font); letter-spacing: 0; }

/* ---------- Key features ---------- */
.pl-features { padding-block: var(--cy-section-y); }
.pl-features__list { margin: var(--cy-section-head) 0 0; padding: 0; list-style: none; display: flex; justify-content: space-between; gap: 24px; }
.pl-feature { position: relative; flex-shrink: 0; width: 170px; height: 195px; border-radius: 12px; background: var(--cy-neutral-0); box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); overflow: hidden; }
.pl-feature img { position: absolute; max-width: none; }
.pl-feature p { position: absolute; left: 10px; top: 131px; width: 150px; margin: 0; text-align: center; font: 500 var(--cy-fs-xs)/16px var(--cy-font); }

/* ---------- D-053 sections (content document; no Figma frame) ----------
   Built from the page's own pieces: section heads, white cards with the design's 0 0 4px shadow and 12px radius,
   design-system icon tiles, 16/24 body text. */
.pl-who, .pl-cover, .pl-elig, .pl-claims, .pl-whyus, .pl-related { padding-block: var(--cy-section-y); }
.pl-lead { max-width: 760px; margin: 16px auto 0; text-align: center; font-size: var(--cy-fs-lg); line-height: 24px; }
.pl-note { max-width: 860px; margin: 24px auto 0; text-align: center; font-size: var(--cy-fs-xs); line-height: 18px; color: var(--cy-neutral-600); }
.pl-note--legal { max-width: none; margin-top: 40px; }
.pl-center { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* OLD: text-align: center (one button). D-056: two buttons. */
.pl-lead a { color: var(--cy-brand-700); text-decoration: underline; text-underline-offset: 2px; }

.pl-cards { margin: var(--cy-section-head) 0 0; padding: 0; list-style: none; display: grid; gap: 24px; }
.pl-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pl-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 12px; background: var(--cy-neutral-0); box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); }
.pl-card--row { flex-direction: row; align-items: center; gap: 16px; }
.pl-card .cy-icon-tile { flex-shrink: 0; }
.pl-card__title { margin: 0; font: 600 var(--cy-fs-lg)/24px var(--cy-font); letter-spacing: 0; }
.pl-card__text { margin: 0; font-size: var(--cy-fs-md); line-height: 20px; }
.pl-card__list { margin: 0; padding-left: 18px; font-size: var(--cy-fs-md); line-height: 20px; }
.pl-card__list li + li { margin-top: 6px; }

.pl-cover__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: var(--cy-section-head); }
/* The home page comparison cards (style.css .platform-card, fixed 390x440 there) sized to their content here. */
.pl-cover__grid .platform-card { width: auto; height: auto; max-width: none; margin: 0; } /* style.css caps it at 390px under 992px */
.pl-cover__grid .platform-card .platform-header { height: 72px; padding: 12px 24px; gap: 16px; justify-content: flex-start; } /* beats style.css .other-card .platform-header (centred), which loads later */
.pl-cover__grid .platform-name { font: 500 var(--cy-fs-2xl)/28px var(--cy-font); letter-spacing: 0; }
.pl-cover__grid .platform-body { margin: 0; padding: 0; list-style: none; }
.pl-cover__grid .platform-row { flex: 0 0 auto; align-items: flex-start; min-height: 0; padding: 14px 24px; }
.pl-cover__grid .row-icon { margin-top: 0; }

.pl-timeline { position: relative; margin: var(--cy-section-head) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.pl-timeline::before { content: ""; position: absolute; top: 24px; left: 10%; right: 10%; height: 2px; background: var(--cy-brand-100); }
.pl-timeline__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pl-timeline__num { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cy-brand-600); color: var(--cy-neutral-0); font: 700 var(--cy-fs-xl)/1 var(--cy-font); box-shadow: 0 0 0 6px var(--cy-neutral-0); }
.pl-timeline__title { margin: 16px 0 6px; font: 600 var(--cy-fs-lg)/24px var(--cy-font); letter-spacing: 0; }
.pl-timeline__text { margin: 0; font-size: var(--cy-fs-md); line-height: 20px; }

.pl-related__grid { margin: var(--cy-section-head) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pl-related__link {
  display: flex; align-items: center; gap: 16px; height: 100%; padding: 16px 20px 16px 16px; border-radius: 12px; background: var(--cy-neutral-0);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); color: var(--cy-neutral-1000); text-decoration: none; transition: box-shadow var(--cy-duration) var(--cy-ease);
}
.pl-related__link:hover { color: var(--cy-neutral-1000); text-decoration: none; box-shadow: 0 0 0 1px var(--cy-brand-200), 0 6px 18px rgba(0, 0, 0, 0.12); }
.pl-related__link:focus-visible { outline: 2px solid var(--cy-brand-600); outline-offset: 3px; }
.pl-related__name { flex: 1; font: 600 var(--cy-fs-lg)/22px var(--cy-font); }
.pl-related__link .pl-related__go { flex-shrink: 0; width: 20px; height: 20px; color: var(--cy-brand-600); transition: transform var(--cy-duration) var(--cy-ease); }
.pl-related__link:hover .pl-related__go { transform: translateX(3px); }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .pl-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .pl-timeline::before { display: none; }
  .pl-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-hero__inner { min-height: 0; display: flex; flex-direction: column; align-items: center; padding-bottom: var(--cy-section-y); }
  .pl-hero__left { width: 100%; align-items: center; padding: 0; }
  .pl-hero__title { position: static; padding-top: 48px; text-align: center; }
  .pl-visual { position: relative; left: auto; top: auto; margin: 32px 0 calc(413px * (0.85 - 1)); transform: scale(0.85); transform-origin: top center; }
  .pl-quote { width: 100%; max-width: 466px; margin: 40px 0 0; }
  .pl-deco--rings-right { left: auto; right: -200px; }
  .pl-why__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .pl-why__photo { width: 100%; height: auto; aspect-ratio: 432 / 306; }
  .pl-how__list { flex-wrap: wrap; justify-content: center; gap: 40px 48px; }
  .pl-features__list { flex-wrap: wrap; justify-content: center; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .pl-hero__title { padding-top: 32px; font-size: 28px; line-height: 32px; }
  .pl-visual { transform: scale(0.5); margin: 24px 0 calc(413px * (0.5 - 1)); }
  .pl-quote__body { padding: 24px 16px; }
  .pl-quote__title br { display: none; }
  .pl-quote__deco { left: auto; right: -80px; }
  /* section padding and heading gap come from the --cy-section-y / --cy-section-head tokens (D-038) */
  .pl-what__text { text-align: left; font-size: var(--cy-fs-md); line-height: 22px; }
  .pl-why__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pl-why__text { font-size: var(--cy-fs-md); line-height: 22px; }
  .pl-how__list { flex-direction: column; align-items: center; }
  .pl-features__list { gap: 16px; }
  .pl-feature { width: calc(50% - 8px); }
  .pl-feature img { left: 50% !important; transform: translateX(-50%); }
  .pl-feature p { left: 8px; right: 8px; width: auto; }
  .pl-lead { text-align: left; font-size: var(--cy-fs-md); line-height: 22px; }
  .pl-cards--4, .pl-cards--3, .pl-cover__grid, .pl-related__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pl-cover__grid .platform-header { height: 60px; padding: 12px 16px; }
  .pl-cover__grid .platform-name { font-size: var(--cy-fs-xl); }
  .pl-cover__grid .platform-row { padding: 12px 16px; }
  .pl-cover__grid .platform-row p { font-size: var(--cy-fs-md); line-height: 22px; }
  .pl-timeline { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .pl-timeline__step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; text-align: left; }
  .pl-timeline__num { grid-row: span 2; }
  .pl-timeline__title { margin: 0 0 4px; }
  .pl-note { text-align: left; }
}