/*
 * D-105 (owner, 29 Oct): the product pages below the hero, in the approved concept-B language (claude.ai artifact
 * "CoverYou PI Page Redesign"): white page, coral label pills, bold Inter headings with one brand-script word, soft
 * "journey" panels with coral connectors, coral icon tiles, sections alternating between white and a soft coral band,
 * one dark band for claims. Every class starts with pp- (components: pp-head, pp-journey; the hero is product-hero.css).
 * Page content is unchanged; buttons are the design system's .cy-btn (one CTA style for all).
 * Replaces D-103's refresh of the old section styles.
 */
:root {
  --pp-ink: var(--cy-neutral-900, #15110f); --pp-ink-2: var(--cy-neutral-700, #4a423d); --pp-mute: var(--cy-neutral-500, #77706b);
  --pp-coral: var(--cy-brand-600, #e5533f); --pp-coral-ink: var(--cy-brand-700, #c9412e); --pp-tint: #fdebe7; --pp-soft: #fff8f6; --pp-band: #fdf6f3;
  --pp-line: rgba(21, 17, 15, .09); --pp-line-coral: rgba(240, 93, 73, .16); --pp-ease: cubic-bezier(.2, .8, .2, 1);
  --pp-script: Pacifico, "Brush Script MT", cursive;
}

/* ---- section frame ---- */
/* D-110 (owner: too much space between sections): 64px top and bottom (was 96), the site rhythm (--cy-section-y) */
.pp-sec { position: relative; padding: 64px max(24px, env(safe-area-inset-right, 0px)) 64px max(24px, env(safe-area-inset-left, 0px)); background: #fff; font-family: var(--cy-font, Inter, sans-serif); }
.pp-sec--band { background: linear-gradient(180deg, #fff, var(--pp-band) 14%, var(--pp-band) 86%, #fff); }
.pp-sec--dots::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(240, 93, 73, .14) 1.2px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60% 70% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 30%, #000, transparent 75%); }
.pp-wrap { position: relative; max-width: 1200px; margin: 0 auto; }
.pp-sec p, .pp-sec h2, .pp-sec h3, .pp-sec ul, .pp-sec ol { margin: 0; }
.pp-sec ul, .pp-sec ol { padding: 0; list-style: none; }

/* ---- heading block: label pill, heading, lead ---- */
.pp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 760px; margin-bottom: 44px; }
.pp-head--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.pp-head--flush { margin-bottom: 0; }
.pp-tag { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin: 0; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--pp-tint); color: var(--pp-coral-ink); font: 700 12px/16px var(--cy-font, Inter, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.pp-tag > span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--pp-coral); color: #fff; flex: none; }
.pp-tag > span .cy-icon { width: 12px; height: 12px; stroke-width: 3; }
body .pp-sec h2.pp-h2, body .cy-faq--split h2.pp-h2 { margin: 0; font: 700 42px/1.1 var(--cy-font, Inter, sans-serif); letter-spacing: -.035em; color: var(--pp-ink); text-wrap: balance; text-transform: none; }
.pp-script { font-family: var(--pp-script) !important; font-weight: 400 !important; color: var(--pp-coral); letter-spacing: 0; font-size: .92em; }
.pp-lead { font: 400 17.5px/28px var(--cy-font, Inter, sans-serif); color: var(--pp-ink-2); max-width: 62ch; }
.pp-lead a { color: var(--pp-coral-ink); text-underline-offset: 3px; }
.pp-note { margin-top: 22px !important; font-size: 13px; line-height: 20px; color: var(--pp-mute); max-width: 90ch; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---- shared pieces ---- */
.pp-tile { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: #fff; color: var(--pp-coral); box-shadow: inset 0 0 0 1.5px #f3c7bf, 0 8px 18px -12px rgba(229, 83, 63, .6); font: 700 16px/1 var(--cy-font, Inter, sans-serif); }
.pp-tile .cy-icon { width: 21px; height: 21px; }
.pp-tile img { width: 24px; height: 24px; object-fit: contain; filter: brightness(0) saturate(100%) invert(44%) sepia(77%) saturate(2470%) hue-rotate(338deg) brightness(95%) contrast(92%); }  /* any image icon in coral */
.pp-tile--solid { background: var(--pp-coral); color: #fff; box-shadow: 0 10px 22px -10px rgba(229, 83, 63, .9); }
.pp-tile--solid img { filter: brightness(0) invert(1); }
.pp-panel { border-radius: 24px; background: linear-gradient(180deg, #fff, var(--pp-soft)); box-shadow: inset 0 0 0 1px var(--pp-line-coral), 0 18px 40px -32px rgba(92, 23, 14, .45); }
.pp-lift { transition: transform .35s var(--pp-ease), box-shadow .35s var(--pp-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pp-lift:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .32), 0 24px 44px -26px rgba(92, 23, 14, .45); }
}
.pp-check { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 50%; background: var(--pp-tint); color: var(--pp-coral); stroke-width: 3; }

/* ---- journey: steps joined by a coral line (the hero, how to buy, how claims work) ---- */
.pp-journey { --n: 4; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 22px 22px 20px; list-style: none; }
.pp-journey::before { content: ""; position: absolute; left: 44px; right: calc((100% - 44px - (var(--n) - 1) * 16px) / var(--n)); top: 43px; height: 2px; background: repeating-linear-gradient(90deg, #f3c7bf 0 6px, transparent 6px 12px); }
.pp-journey::after { content: ""; position: absolute; left: 44px; top: 43px; height: 2px; width: 0; background: var(--pp-coral); transition: width 1.8s cubic-bezier(.6, .05, .2, 1) .2s; }
.pp-journey.is-in::after { width: calc(100% - 88px - (100% - 44px - (var(--n) - 1) * 16px) / var(--n) + 44px); }
/* D-107: .pp-sec ol resets padding (higher specificity); the journey keeps its inner padding */
.pp-sec .pp-journey { padding: 22px 22px 20px; }
.pp-step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp-step b { display: block; font: 600 14.5px/19px var(--cy-font, Inter, sans-serif); letter-spacing: -.01em; color: var(--pp-ink); }
.pp-step span.pp-step__t { display: block; margin-top: 3px; font-size: 13px; line-height: 18px; color: var(--pp-mute); }

/* ---- what is: heading left, text panel right ---- */
/* D-107: heading centred against the text panel, so there is no empty column under the heading */
.pp-what { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.pp-what .pp-panel { padding: 30px 34px; display: flex; flex-direction: column; gap: 14px; font-size: 16.5px; line-height: 27px; color: var(--pp-ink-2); }
.pp-what .pp-panel strong { color: var(--pp-ink); font-weight: 600; }
.pp-what .pp-panel > p + p:last-child:not(:nth-child(2)) { padding-top: 14px; border-top: 1px dashed #f3c7bf; }

/* ---- why: text with tick rows, framed photo ---- */
.pp-why { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.pp-why__text { display: flex; flex-direction: column; gap: 16px; font-size: 16.5px; line-height: 27px; color: var(--pp-ink-2); }
.pp-why__text .pp-tag { margin-bottom: -2px; }
.pp-why__text strong { color: var(--pp-ink); }
.pp-why__text ul { display: grid; gap: 10px; }
.pp-why__text li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--pp-line); color: var(--pp-ink); font-weight: 500; line-height: 22px; }
.pp-why__photo { position: relative; margin: 0; }
.pp-why__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; box-shadow: 18px 18px 0 0 var(--pp-tint), 0 30px 60px -30px rgba(92, 23, 14, .4); }
.pp-why__photo--wide img { aspect-ratio: 4 / 3; }

/* ---- card grids (who needs, types, eligibility, why us) ---- */
.pp-cards { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; }
.pp-card { padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-card h3 { font: 600 17px/1.3 var(--cy-font, Inter, sans-serif); letter-spacing: -.015em; color: var(--pp-ink); }
.pp-card p { font-size: 14.5px; line-height: 22px; color: var(--pp-ink-2); }
.pp-card p + p { margin-top: -4px; }
.pp-card .pp-card__note { font-size: 13px; color: var(--pp-mute); }
.pp-card ul { display: grid; gap: 10px; }
.pp-card ul li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 22px; color: var(--pp-ink-2); }
.pp-card ul li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--pp-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%23e5533f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") no-repeat center; }
.pp-card--row { flex-direction: row; align-items: flex-start; padding: 20px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--pp-ink); }
.pp-card--illus .pp-card__art { height: 120px; display: grid; place-items: center; margin: -6px 0 2px; }
.pp-card--illus .pp-card__art img { max-height: 120px; width: auto; max-width: 100%; }

/* ---- covered / not covered ---- */
.pp-cover { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pp-cover__col { border-radius: 26px; padding: 28px; }
.pp-cover__col--yes { background: linear-gradient(160deg, #fff1ed, #fff 60%); box-shadow: inset 0 0 0 1px var(--pp-line-coral); }
.pp-cover__col--no { background: #faf9f8; box-shadow: inset 0 0 0 1px var(--pp-line); }
.pp-cover__col h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 18px !important; font: 700 20px/1.2 var(--cy-font, Inter, sans-serif); letter-spacing: -.02em; color: var(--pp-ink); }
.pp-cover__col h3 em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--pp-tint); color: var(--pp-coral-ink); }
.pp-cover__col li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--pp-line); font-size: 15px; line-height: 22px; color: var(--pp-ink-2); }
.pp-cover__col li:first-child { border-top: 0; }
.pp-cover__col--yes li .pp-check { background: var(--pp-coral); color: #fff; }
.pp-cover__col--no li .pp-check { background: #ebe7e5; color: #8a827d; }
.pp-cover__col--no .pp-tile { box-shadow: inset 0 0 0 1.5px #e3dedb; color: #8a827d; }

/* ---- benefits: a tile grid, the first two wide, the second in coral ---- */
.pp-ben { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.pp-ben > li { grid-column: span 2; padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-ben > li:nth-child(1), .pp-ben > li:nth-child(2) { grid-column: span 3; }
.pp-ben > li:nth-child(2) { background: radial-gradient(120% 120% at 100% 0%, #ff7a5c, var(--pp-coral) 45%, #8e2a1c); box-shadow: 0 30px 50px -30px rgba(92, 23, 14, .7); }
.pp-ben > li:nth-child(2) .pp-tile { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.pp-ben > li:nth-child(2) .pp-tile img { filter: brightness(0) invert(1); }
.pp-ben > li:nth-child(2) h3 { color: #fff; }
.pp-ben > li:nth-child(2) p { color: #ffe6df; }
.pp-ben h3 { font: 600 18px/1.3 var(--cy-font, Inter, sans-serif); letter-spacing: -.015em; color: var(--pp-ink); }
.pp-ben p { font-size: 14.5px; line-height: 22px; color: var(--pp-ink-2); }
.pp-ben--4 > li, .pp-ben--4 > li:nth-child(1), .pp-ben--4 > li:nth-child(2) { grid-column: span 3; }

/* ---- key features: a checklist ---- */
.pp-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 24px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--pp-line); }
.pp-feat li { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; font-size: 15.5px; line-height: 23px; font-weight: 500; color: var(--pp-ink); box-shadow: inset -1px -1px 0 var(--pp-line); }
.pp-feat li .pp-check { width: 26px; height: 26px; padding: 5px; border-radius: 9px; stroke-width: 2.6; }

/* ---- claims: a dark band ---- */
.pp-sec--dark { background: radial-gradient(70% 90% at 0% 0%, #3a150f, transparent 60%), linear-gradient(160deg, #1d1412, #120d0c); color: #f3ece8; }
body .pp-sec--dark h2.pp-h2 { color: #fff; }
.pp-sec--dark .pp-tag { background: rgba(240, 93, 73, .16); color: #ffb3a5; }
.pp-sec--dark .pp-journey { border-radius: 24px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pp-sec--dark .pp-journey::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 6px, transparent 6px 12px); }
.pp-sec--dark .pp-tile { background: #241a17; color: #ff9f8e; box-shadow: inset 0 0 0 1.5px rgba(240, 93, 73, .35); }
.pp-sec--dark .pp-step:first-child .pp-tile { background: var(--pp-coral); color: #fff; box-shadow: 0 10px 22px -10px rgba(229, 83, 63, .9); }
.pp-sec--dark .pp-step b { color: #fff; }
.pp-sec--dark .pp-step span.pp-step__t { color: #bdb1aa; }
.pp-sec--dark .pp-note { color: #a99d96; }
/* D-107: the design-system button reads its colours from variables, so set those (a plain color was overridden) */
.pp-sec--dark .cy-btn--secondary { --_bg: rgba(255, 255, 255, .08); --_bg-hover: rgba(255, 255, 255, .14); --_bg-pressed: rgba(255, 255, 255, .2); --_fg: #fff; --_shine: rgba(255, 255, 255, .1); --_shade: rgba(0, 0, 0, .4); }

/* ---- why buy through CoverYou ---- */
.pp-whyus { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.pp-whyus .pp-cards { --cols: 2; gap: 14px; }

/* ---- CoverYou vs other platforms (partials/coveryou-comparison, product pages) ---- */
.pp-cmp { border-radius: 26px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--pp-line), 0 30px 60px -44px rgba(92, 23, 14, .45); }
.pp-cmp__row { display: grid; grid-template-columns: 1.1fr 1.6fr 1.6fr; }
.pp-cmp__row > * { padding: 18px 22px; font-size: 14.5px; line-height: 21px; border-top: 1px solid var(--pp-line); }
.pp-cmp__row:first-child > * { border-top: 0; }
.pp-cmp__row > :first-child { font-weight: 600; color: var(--pp-ink); background: #faf9f8; }
.pp-cmp__row > :nth-child(2) { display: flex; gap: 10px; background: linear-gradient(90deg, #fff4f1, #fff); color: var(--pp-ink); }
.pp-cmp__row > :nth-child(3) { display: flex; gap: 10px; color: var(--pp-mute); }
.pp-cmp__row > :nth-child(2) .pp-check { background: var(--pp-coral); color: #fff; width: 20px; height: 20px; padding: 3px; }
.pp-cmp__row > :nth-child(3) .pp-check { background: #ebe7e5; color: #8a827d; width: 20px; height: 20px; padding: 3px; }
.pp-cmp__head > * { font-size: 15px !important; font-weight: 700 !important; }
.pp-cmp__head > :nth-child(2) { align-items: center; color: var(--pp-coral-ink) !important; }
.pp-cmp__head > :nth-child(2) em { font-style: normal; font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--pp-coral); color: #fff; }

/* ---- explore more ---- */
.pp-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pp-more a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; font-weight: 600; font-size: 15.5px; color: var(--pp-ink); }
.pp-more a .pp-go { margin-left: auto; color: var(--pp-coral); transition: transform .3s var(--pp-ease); }
.pp-more a:hover .pp-go { transform: translateX(4px); }
.pp-legal { padding: 0 max(24px, env(safe-area-inset-right, 0px)) 56px max(24px, env(safe-area-inset-left, 0px)); background: #fff; }
.pp-legal p { max-width: 110ch; margin: 0 auto; font-size: 12.5px; line-height: 19px; color: var(--pp-mute); text-align: center; }

/* ---- FAQ (partials/cy-faq-tabs with $faqLayout = 'split'): heading + topics left, questions right ---- */
.cy-faq.cy-faq--split { padding: 64px max(24px, env(safe-area-inset-right, 0px)) 64px max(24px, env(safe-area-inset-left, 0px)); background: #fff; }
.cy-faq--split .cy-faq__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; row-gap: 18px; align-items: start; max-width: 1200px; }
.cy-faq--split .cy-faq__inner > .pp-head { grid-column: 1; grid-row: 1; margin: 0; }
.cy-faq--split .pp-tag { font-family: var(--cy-font, Inter, sans-serif); }
.cy-faq--split .cy-faq__bar { grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; gap: 16px; }
.cy-faq--split .cy-faq__panel { grid-column: 2; grid-row: 1 / span 3; gap: 10px; padding: 0; }
.cy-faq--split .cy-faq__tabs { flex-wrap: wrap; gap: 6px; overflow: visible; }
.cy-faq--split .cy-faq__tab { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #f4f0ee; color: var(--pp-ink-2); font: 600 13px/34px var(--cy-font, Inter, sans-serif); }
.cy-faq--split .cy-faq__tab[aria-selected="true"] { background: var(--pp-ink); color: #fff; }
.cy-faq--split .cy-faq__search { width: 100%; height: 44px; border: 0; border-radius: 999px; gap: 10px; box-shadow: inset 0 0 0 1px var(--pp-line); }
.cy-faq--split .cy-faq__item { filter: none; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--pp-line); transition: background-color .25s, box-shadow .25s; }
.cy-faq--split .cy-faq__item[open] { background: var(--pp-soft); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .28); }
.cy-faq--split .cy-faq__q { padding: 18px 20px; gap: 14px; }
.cy-faq--split .cy-faq__q-text { font: 600 16px/23px var(--cy-font, Inter, sans-serif); }
.cy-faq--split .cy-faq__chevron { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: #f4f0ee; transition: transform .3s var(--pp-ease), background-color .25s; }
.cy-faq--split .cy-faq__item[open] .cy-faq__chevron { background: var(--pp-tint); }
.cy-faq--split .cy-faq__a { padding: 0 20px 18px; font-size: 15px; line-height: 24px; max-width: 72ch; }
.cy-faq--split .cy-faq__more { justify-self: start; margin-top: 4px; }

/* ---- scroll reveal: visible at rest, rises in only when motion is welcome (product-pages.js adds .is-in) ---- */
@media (prefers-reduced-motion: no-preference) {
  .pp-rv { transition: opacity .7s var(--pp-ease), transform .7s var(--pp-ease); }
  html.pp-js .pp-rv:not(.is-in) { opacity: 0; transform: translateY(18px); }
}

/* ---- tablet ---- */
@media (max-width: 1099px) {
  .pp-sec, .cy-faq.cy-faq--split { padding-top: 56px; padding-bottom: 56px; }
  body .pp-sec h2.pp-h2, body .cy-faq--split h2.pp-h2 { font-size: 34px; }
  .pp-what, .pp-why, .pp-whyus, .cy-faq--split .cy-faq__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cy-faq--split .cy-faq__inner > .pp-head, .cy-faq--split .cy-faq__bar, .cy-faq--split .cy-faq__panel { grid-column: 1; grid-row: auto; }
  .pp-why__photo { max-width: 460px; }
  .pp-cards { --cols: 2 !important; }
  .pp-ben > li, .pp-ben > li:nth-child(1), .pp-ben > li:nth-child(2) { grid-column: span 3; }
  .pp-ben > li:nth-child(5):last-child { grid-column: span 6; }
  .pp-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-sec--dark .pp-journey { --n: 1; grid-template-columns: minmax(0, 1fr); }
  .pp-sec--dark .pp-step { flex-direction: row; align-items: flex-start; gap: 16px; }
  .pp-sec--dark .pp-journey::before { left: 44px; right: auto; top: 44px; bottom: 44px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .18) 0 6px, transparent 6px 12px); }
  .pp-sec--dark .pp-journey::after { display: none; }
  .pp-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- phone ---- */
@media (max-width: 599px) {
  .pp-sec, .cy-faq.cy-faq--split { padding: 48px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
  .pp-legal { padding-left: 16px; padding-right: 16px; }
  body .pp-sec h2.pp-h2, body .cy-faq--split h2.pp-h2 { font-size: 28px; }
  .pp-tag { font-size: 10.5px; letter-spacing: .04em; }
  .pp-lead { font-size: 16px; line-height: 25px; }
  .pp-head { margin-bottom: 28px; }
  .pp-what .pp-panel { padding: 22px 20px; font-size: 15.5px; line-height: 25px; }
  /* journeys become vertical timelines */
  .pp-journey, .pp-sec .pp-journey { --n: 1; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .pp-journey::before { left: 37px; right: auto; top: 40px; bottom: 40px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #f3c7bf 0 6px, transparent 6px 12px); }
  .pp-journey::after { display: none; }
  .pp-step { flex-direction: row; align-items: center; gap: 14px; }
  .pp-step .pp-tile { width: 42px; height: 42px; }
  .pp-sec--dark .pp-journey::before { left: 37px; top: 40px; bottom: 40px; }
  .pp-cards, .pp-whyus .pp-cards { --cols: 1 !important; }
  .pp-feat, .pp-more, .pp-cover { grid-template-columns: minmax(0, 1fr); }
  .pp-ben > li, .pp-ben > li:nth-child(1), .pp-ben > li:nth-child(2), .pp-ben > li:nth-child(5):last-child { grid-column: span 6; }
  .pp-cover__col { padding: 22px 18px; }
  .pp-cmp__row { grid-template-columns: minmax(0, 1fr); }
  .pp-cmp__row > :first-child { padding-bottom: 6px; background: none; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--pp-mute); }
  .pp-cmp__row > :nth-child(2), .pp-cmp__row > :nth-child(3) { border-top: 0; padding-top: 8px; padding-bottom: 8px; }
  .pp-cmp__row > :nth-child(3) { padding-bottom: 16px; }
  .pp-cmp__head { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pp-journey::after { transition: none; } }

/* D-322c (owner, 8 Nov: "fix this negative spacing", renewal pages under the hero): from the end of the facts to the "Why
   renew" heading there were ~330px of blank page: the hero's bottom padding, the next section's 64px top padding, and the
   "Why" text centred against its 443px-tall illustration. On desktop the hero ends with no padding (the floating chips under
   the form keep their row), the first section after it starts 40px down, and the "Why" illustration is at most 280px tall
   (renew/index.blade.php), so the centred text no longer floats in a tall box. Phones and tablets are unchanged. */
@media (min-width: 1100px) {
  .ph.ph--scene { padding-bottom: 0 !important; }
  .ph + .pp-sec, .ph + * + .pp-sec { padding-top: 40px !important; }
}