/*
 * Renewal pages (D-043; per-product Figma design D-051, file 4TkyRzPzs3MQpfIo7HxV7j, e.g. "Renew PI" 2137:28257).
 * Desktop frame 1440 wide with a 1140px column (x 150-1290). Measurements below are the design's.
 * Section rhythm from --cy-section-y / --cy-section-head (D-038; 64px on desktop, as drawn).
 * The "Only certified CoverYou RM" badge (.pl-rm) comes from pi-landing.css.
 */
.rn-page { --rn-gutter: max(16px, env(safe-area-inset-left, 0px)); position: relative; background: var(--cy-neutral-0); color: var(--cy-neutral-1000); overflow-x: clip; }
.rn-inner { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; }
.rn-section { position: relative; padding: var(--cy-section-y) var(--rn-gutter); }
.rn-deco { position: absolute; z-index: 0; max-width: none; height: auto; pointer-events: none; }
.rn-card__accent { color: var(--cy-brand-600); }

/* ---------- Hero (node 2137:28330: 680px tall) ---------- */
.rn-hero { position: relative; overflow: hidden; padding: 0 var(--rn-gutter); }
.rn-deco--lines { left: calc(50% - 720px); top: 114px; width: 1464px; }
.rn-deco--e156 { left: calc(50% - 921px); top: 14px; width: 490px; }
.rn-hero__inner { display: grid; grid-template-columns: minmax(0, 642px) 466px; justify-content: space-between; column-gap: 32px; min-height: 680px; }
.rn-hero__copy { display: flex; flex-direction: column; min-width: 0; padding-top: 72px; }
.rn-hero__title { margin: 0; font: 600 36px/48px var(--cy-font); color: var(--cy-neutral-1000); }
.rn-hero__text { margin: 12px 0 0; max-width: 579px; font: 400 var(--cy-fs-2xl)/28px var(--cy-font); }
/* Illustration: sits on the bottom edge of the hero; the PI doctor is cropped by it, as drawn. */
.rn-art { position: relative; flex-shrink: 0; margin: auto 0 0 var(--art-left); width: min(var(--art-w), 100% - var(--art-left)); overflow: hidden; }
.rn-art img { position: absolute; height: auto; max-width: none; }

.rn-side { padding: 31px 0 42px; }
.rn-card {
  position: relative; overflow: hidden; padding: 29px 32px 20px; border-radius: 12px; border-bottom: 4px solid var(--cy-brand-600);
  background: var(--cy-neutral-0); box-shadow: 0 0 9px rgba(0, 0, 0, 0.25);
}
.rn-card--motor { margin-top: 72px; }
.rn-card__decor { position: absolute; left: 332px; top: -39px; width: 190px; height: auto; pointer-events: none; }
.rn-card__title { position: relative; margin: 0; padding-right: 64px; font: 600 var(--cy-fs-xl)/28px var(--cy-font); }
.rn-card__sub { position: relative; margin: 12px 0 0; max-width: 396px; font: 400 var(--cy-fs-xs)/16px var(--cy-font); }
.rn-form { position: relative; display: flex; flex-direction: column; gap: 16px; margin-top: 21px; }
.rn-field { display: flex; flex-direction: column; gap: 4px; }
.rn-field__label { margin: 0; font: 500 var(--cy-fs-xs)/16px var(--cy-font); }
.rn-input {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 1px solid #757575; border-radius: 12px;
  background: var(--cy-neutral-0); transition: border-color var(--cy-duration) var(--cy-ease);
}
.rn-input:focus-within { border-color: var(--cy-brand-600); box-shadow: 0 0 0 3px var(--cy-brand-50); }
.rn-input input, .rn-input select {
  flex: 1; min-width: 0; height: 100%; padding: 0 4px; border: 0; outline: 0; background: none; appearance: none; -webkit-appearance: none;
  font: 400 var(--cy-fs-md)/16px var(--cy-font); color: var(--cy-neutral-1000);
}
.rn-input input::placeholder { color: #757575; opacity: 1; }
.rn-input select:invalid { color: #757575; }
.rn-input select { cursor: pointer; }
.rn-input .rn-input__icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--cy-brand-600); }
.rn-input .rn-input__icon--lg { width: 32px; height: 32px; }
.rn-input .rn-input__icon--end { margin-left: -32px; pointer-events: none; color: var(--cy-neutral-600); }
.rn-input--select select { padding-right: 32px; }
.rn-upper { text-transform: uppercase; }
.rn-upper::placeholder { text-transform: none; }
.rn-form .error { margin: 0; font-size: var(--cy-fs-xs); line-height: 16px; }
.rn-form .error:empty { display: none; }
.rn-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 11px; padding: 12px 16px; border: 0;
  border-radius: 12px; background: var(--cy-brand-600); color: var(--cy-neutral-0); font: 400 var(--cy-fs-lg)/24px var(--cy-font); cursor: pointer;
  box-shadow: inset -3px -3px 4px rgba(0, 0, 0, 0.3), inset 4px 4px 4px rgba(255, 255, 255, 0.35);
  transition: background-color var(--cy-duration) var(--cy-ease);
}
.rn-btn:hover { background: var(--cy-brand-700); }
.rn-btn:focus-visible { outline: 2px solid var(--cy-brand-800); outline-offset: 3px; }
.rn-btn:disabled { opacity: 0.7; cursor: progress; }
.rn-card__trust { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
.rn-card__legal { position: relative; margin: 16px 0 0; text-align: center; font: 400 10px/16px var(--cy-font); }
.rn-card__legal a { color: var(--cy-info-600); }

.rn-partners { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.rn-partners__title { margin: 0; font: 500 var(--cy-fs-md)/20px var(--cy-font); }
.rn-partners__logos { display: flex; align-items: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.rn-partners__logos img { display: block; object-fit: contain; }

/* ---------- Why renew on time (node 2144:16253) ---------- */
.rn-why { overflow: hidden; }
.rn-deco--e156b { left: calc(50% + 405px); top: -5px; width: 490px; }
.rn-why__inner { display: grid; grid-template-columns: minmax(0, 625px) 432px; justify-content: space-between; align-items: start; column-gap: 40px; }
.rn-why__copy { padding-top: 6px; }
.rn-why__text { margin: 0; max-width: 571px; font: 400 var(--cy-fs-lg)/24px var(--cy-font); }
.rn-why .cy-section-head + .rn-why__text { margin-top: 32px; }
.rn-why__text + .rn-why__text { margin-top: 24px; }
.rn-why__img { display: block; width: 432px; max-width: 100%; height: 300px; object-fit: cover; border-radius: 12px; }

/* ---------- Benefits (node 2144:16265): five 209x212 cards, 24px apart ---------- */
.rn-benefits__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 55px 0 0; padding: 0; list-style: none; }
.rn-benefit { min-height: 212px; padding: 20px; border-radius: 12px; background: var(--cy-brand-50); }
.rn-benefit__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 28px; background: var(--cy-neutral-0); color: var(--cy-neutral-1000); }
.rn-benefit__icon .cy-icon { width: 24px; height: 24px; }
.rn-benefit__icon img { display: block; width: 32px; height: 32px; object-fit: contain; }
.rn-benefit__title { margin: 12px 0 0; font: 500 var(--cy-fs-lg)/24px var(--cy-font); color: var(--cy-neutral-1000); }
.rn-benefit__text { margin: 8px 0 0; font: 400 var(--cy-fs-xs)/16px var(--cy-font); }

/* ---------- What you can update (node 2148:15319): illustration left, four staggered cards right ---------- */
.rn-updates { overflow: hidden; padding-top: 70px; padding-bottom: 40px; }
.rn-deco--update-lines { left: calc(50% - 2357px); top: -61px; width: 3216px; }
.rn-updates__body { display: flex; align-items: flex-start; margin-top: 75px; }
.rn-updates__art { flex-shrink: 1; width: 423px; max-width: 40%; height: auto; margin-left: 62px; }
.rn-updates__list { display: grid; grid-template-columns: repeat(2, 209px); gap: 32px; margin: 5px 27px 0 auto; padding: 0; list-style: none; }
.rn-update { display: flex; flex-direction: column; gap: 16px; min-height: 169px; padding: 16px; border-radius: 12px; background: var(--cy-neutral-0); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); }
.rn-update:nth-child(even) { transform: translateY(-64px); }
.rn-update__icon { display: flex; align-items: center; justify-content: center; width: 73px; height: 73px; border-radius: 8px; }
.rn-update__icon .cy-icon { width: 32px; height: 32px; }
.rn-update__text { font: 400 var(--cy-fs-lg)/1.5 var(--cy-font); }
.rn-update--brand .rn-update__icon { background: var(--cy-brand-50); color: var(--cy-brand-600); }
.rn-update--info .rn-update__icon { background: var(--cy-info-50); color: var(--cy-info-600); }
.rn-update--success .rn-update__icon { background: var(--cy-success-50); color: var(--cy-success-600); }
.rn-update--warning .rn-update__icon { background: var(--cy-warning-50); color: var(--cy-warning-600); }

/* ---------- Hub/group pages: the policies to renew ---------- */
.rn-group { margin-top: var(--cy-section-head); }
.rn-group + .rn-group { margin-top: 40px; }
.rn-group__title { margin: 0; font: 600 var(--cy-fs-2xl)/28px var(--cy-font); }
.rn-group__title a { color: inherit; text-decoration: none; }
.rn-group__title a:hover { color: var(--cy-brand-600); }
.rn-group__text { margin: 6px 0 0; font-size: var(--cy-fs-lg); line-height: 24px; }
.rn-grid { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rn-prod {
  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 5px rgba(0, 0, 0, 0.25); color: var(--cy-neutral-1000); text-decoration: none;
  transition: box-shadow var(--cy-duration) var(--cy-ease);
}
.rn-prod: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); }
.rn-prod:focus-visible { outline: 2px solid var(--cy-brand-600); outline-offset: 3px; }
.rn-prod__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: var(--cy-brand-50); color: var(--cy-brand-600); }
.rn-prod__icon .cy-icon { width: 24px; height: 24px; }
.rn-prod__name { flex: 1; font: 600 var(--cy-fs-lg)/22px var(--cy-font); }
.rn-prod .rn-prod__go { flex-shrink: 0; width: 20px; height: 20px; color: var(--cy-brand-600); transition: transform var(--cy-duration) var(--cy-ease); }
.rn-prod:hover .rn-prod__go { transform: translateX(3px); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1199px) {
  .rn-hero__inner { grid-template-columns: minmax(0, 1fr) 420px; }
  .rn-benefits__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rn-updates__art { margin-left: 0; }
  .rn-updates__list { margin-right: 0; }
  .rn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .rn-hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rn-hero__copy { padding-top: 40px; }
  .rn-art { margin: 24px auto 0; max-width: 360px; }
  .rn-side { width: 100%; max-width: 466px; margin: 0 auto; padding: 32px 0 var(--cy-section-y); }
  .rn-card--motor { margin-top: 0; }
  .rn-deco--lines, .rn-deco--e156, .rn-deco--e156b { display: none; }
  .rn-why__inner { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .rn-why__img { width: 100%; height: auto; aspect-ratio: 432 / 300; }
  .rn-updates__body { flex-direction: column; align-items: center; margin-top: 32px; }
  .rn-updates__art { max-width: 320px; width: 100%; }
  .rn-updates__list { margin: 40px auto 0; }
  .rn-update:nth-child(even) { transform: none; }
}
@media (max-width: 767px) {
  .rn-hero__title { font-size: var(--cy-fs-3xl); line-height: 32px; }
  .rn-hero__text { font-size: var(--cy-fs-lg); line-height: 24px; }
  .rn-art { display: none; } /* decorative; the form comes straight after the intro on phones */
  .rn-side { padding-top: 24px; }
  .rn-card { padding: 24px 20px 18px; }
  .rn-card__decor { left: auto; right: -60px; }
  .rn-benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: var(--cy-section-head); }
  .rn-benefit { min-height: 0; padding: 16px; }
  .rn-updates { padding-top: var(--cy-section-y); padding-bottom: var(--cy-section-y); }
  .rn-updates__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
  .rn-update { min-height: 0; padding: 12px; gap: 12px; }
  .rn-update__icon { width: 56px; height: 56px; }
  .rn-update__icon .cy-icon { width: 28px; height: 28px; }
  .rn-update__text { font-size: var(--cy-fs-md); }
  .rn-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rn-group__title { font-size: var(--cy-fs-xl); line-height: 24px; }
  .rn-group__text { font-size: var(--cy-fs-md); line-height: 22px; }
}
@media (max-width: 359px) {
  .rn-benefits__list, .rn-updates__list { grid-template-columns: minmax(0, 1fr); }
}

/* D-112: renewal pages' own visuals - the Figma illustration in "Why renew", and the update illustration beside the
   "What you can update" cards (in the D-108 product-page section design) */
.rn-why-art { margin: 0; display: grid; place-items: center; padding: 24px; border-radius: 28px; background: radial-gradient(80% 80% at 50% 40%, #fff, var(--pp-soft, #fff8f6)); box-shadow: inset 0 0 0 1px var(--pp-line-coral, rgba(240, 93, 73, .16)); }
.rn-why-art__box { position: relative; display: block; width: 100%; overflow: hidden; }
.rn-why-art__box img { position: absolute; height: auto; max-width: none; }
.rn-upd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.rn-upd__art { width: 100%; max-width: 423px; height: auto; justify-self: center; }
.rn-upd__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rn-upd__list li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; font: 600 15px/21px var(--cy-font, Inter, sans-serif); color: var(--pp-ink, #15110f); }
@media (max-width: 991px) {
  .rn-upd { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rn-upd__art { max-width: 300px; }
}
@media (max-width: 599px) { .rn-upd__list { grid-template-columns: minmax(0, 1fr); } }

/* D-117: group heading links on the renewal hub get a comfortable tap area */
.rn-group__title a { display: inline-block; padding: 8px 0; }