/*
 * D-105 (owner, 29 Oct): the product-page hero, concept B ("From notice to resolved"), approved after the mocks in
 * claude.ai artifacts (hero concepts, B responsive, PI page redesign). resources/views/components/product-hero.
 *   desktop: copy + four-step journey + numbers on the left, the quote card on the right, a drawn "Start here" arrow
 *            bridging the two; tablet / phone: one column, "Start here" points down into the card, the journey becomes
 *            a vertical timeline on phones.
 * The hero runs up under the floating header (D-103). The forms inside .ph-card keep their own markup and scripts;
 * the rules in the middle of this file only even out their look (labels above, 42px fields, short fields side by side).
 * Buttons are the design system's .cy-btn everywhere (owner: one CTA style for all).
 * Shared pieces (pp-tag, pp-tile, pp-journey ...) are in product-pages.css.
 */
.ph {
  --ph-hdr: 76px;   /* the sticky header's height in the page flow: 12px gap + 64px bar (header.css) */
  position: relative; overflow: clip;
  margin-top: calc(-1 * var(--ph-hdr));
  padding: calc(var(--ph-hdr) + 48px) 24px 72px;
  background: #fff;
}
.ph::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(240, 93, 73, .16) 1.2px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent 75%);
}
.ph__inner {
  position: relative; width: 100%; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  /* D-322b (owner, 8 Nov: "I can see negative spacing in the hero section", renewal pages): the left stack starts level with the
     top of the quote card, as on the product pages; any slack goes under it. OLD (D-107): centred against the card, so with the
     tall renewal form most of the slack was an empty block above the heading:
     grid-template-areas: ". card" "copy card" "journey card" "facts card" "after card" ". card"; grid-template-rows: 1fr auto auto auto auto 1fr; */
  grid-template-areas: ". card" "copy card" "journey card" "facts card" "after card" ". card"; grid-template-rows: minmax(0, .5fr) auto auto auto auto 1fr;
  /* D-322c (owner: "fix this negative spacing" under the hero, after D-322b moved it there): the renewal intro is ~200px shorter
     than its form, so the slack is shared - a third above the heading, two thirds under the facts - and no single gap is large.
     (D-107 split it evenly; D-322b put it all under the facts.) */
  column-gap: 56px; align-items: start;
}
/* Inter only (some old page styles set other fonts); icon fonts (<i class="bi">) keep theirs. */
.ph, .ph *:not(i) { font-family: var(--cy-font, Inter, sans-serif); }

/* ---- copy ---- */
.ph__copy { grid-area: copy; position: relative; min-width: 0; }
body .ph h1.ph__title {
  margin: 18px 0 0; max-width: 15.5ch;
  font: 700 58px/1.04 var(--cy-font, Inter, sans-serif); letter-spacing: -.04em; text-wrap: balance;
  /* Title Case: overrides the design system H1 (D-027: bold capitals, !important) for this hero only. */
  text-transform: none !important; font-weight: 700 !important; font-family: var(--cy-font, Inter, sans-serif) !important; color: var(--cy-neutral-900, #15110f) !important;
}
/* the page's accent words are set in the brand script (Pacifico, as on the home page) */
body .ph h1.ph__title .cy-h1-accent {
  font-family: Pacifico, "Brush Script MT", cursive !important; font-weight: 400 !important; letter-spacing: 0; font-size: .92em;
  background: none; -webkit-text-fill-color: currentColor; color: var(--cy-brand-600, #e5533f);
}
.ph__sub { margin: 16px 0 0; max-width: 42ch; font: 400 17.5px/27px var(--cy-font, Inter, sans-serif); color: var(--cy-neutral-700, #4a423d); }

/* "Start here": sideways on desktop, pointing down on tablet / phone */
/* sits beside the line under the heading, so a long heading never runs into it */
.ph__cue { position: absolute; top: auto; bottom: -46px; right: -30px; width: 210px; pointer-events: none; }
.ph__cue p { margin: 0 0 4px 6px; font: 400 22px/1.2 Pacifico, "Brush Script MT", cursive !important; color: var(--cy-brand-600, #e5533f); transform: rotate(-6deg); }
.ph__cue p small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--cy-font, Inter, sans-serif) !important; color: var(--cy-neutral-500, #77706b); }
.ph__cue svg { display: block; width: 200px; height: 96px; overflow: visible; }
.ph__cue path, .ph__cue-down path { fill: none; stroke: var(--cy-brand-600, #e5533f); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ph__cue-down { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ph__cue .draw, .ph__cue-down .draw { stroke-dasharray: 260; stroke-dashoffset: 260; animation: ph-draw 1.2s cubic-bezier(.6, .05, .2, 1) 1.2s forwards; }
  .ph__cue .head, .ph__cue-down .head { opacity: 0; animation: ph-fade .3s ease 2.2s forwards; }
}
@keyframes ph-draw { to { stroke-dashoffset: 0; } }
@keyframes ph-fade { to { opacity: 1; } }

/* ---- journey and numbers (pp-journey itself is in product-pages.css) ---- */
.ph__journey { grid-area: journey; margin-top: 36px !important; }
.ph__facts { grid-area: facts; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.ph__facts li { padding: 8px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(21, 17, 15, .09); font-size: 13px; line-height: 18px; color: var(--cy-neutral-700, #4a423d); }
.ph__facts b { color: var(--cy-neutral-900, #15110f); font-weight: 700; }
.ph__after { grid-area: after; min-width: 0; margin-top: 20px; }

/* ---- the quote card: a white card inside a soft coral frame ---- */
.ph-card-wrap { grid-area: card; border-radius: 24px; padding: 6px; background: linear-gradient(160deg, #ffd3c9, #fff 40%); box-shadow: 0 40px 70px -40px rgba(92, 23, 14, .55); }
.ph-card { position: relative; scroll-margin-top: calc(var(--ph-hdr, 76px) + 12px); border-radius: 19px; background: #fff; padding: 18px 20px 14px; box-shadow: 0 0 0 1px rgba(21, 17, 15, .09); }
.ph-card__head { display: block; margin-bottom: 14px; }
.ph-card__ic { display: none; }
.ph-card__title { margin: 0; font: 700 18px/23px var(--cy-font, Inter, sans-serif); letter-spacing: -.02em; color: var(--cy-neutral-900, #15110f); }
.ph-card__title span { color: var(--cy-brand-600, #e5533f); }
.ph-card__sub { margin: 3px 0 0; font: 400 12.5px/17px var(--cy-font, Inter, sans-serif); color: var(--cy-neutral-500, #77706b); }
.ph-card__legal { margin: 8px 0 0; font: 400 10.5px/15px var(--cy-font, Inter, sans-serif); color: var(--cy-neutral-500, #77706b); text-align: center; }
.ph-card__legal a { color: var(--cy-neutral-800, #2b2522); text-decoration: underline; text-underline-offset: 2px; }

/* ---- the forms inside the card, whichever template they come from ---- */
.ph-card form { margin: 0; }
.ph-card .error { display: block; margin-top: 3px; font-size: 11.5px; line-height: 15px; }
.ph-card .error:empty { display: none; }

/* field lists: a 2-column grid; short fields (name, mobile, ...) sit side by side, the rest span both columns */
.ph-card .pl-form__fields, .ph-card .hp-form__fields, .ph-card .pdl-form__fields {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px !important;
}
.ph-card .pl-form__fields > *, .ph-card .pdl-form__fields > * { grid-column: 1 / -1; min-width: 0; }
.ph-card .pl-form__fields > div:nth-child(1), .ph-card .pl-form__fields > div:nth-child(2) { grid-column: auto; }   /* PI: name | mobile */
.ph-card .hp-form__fields > * { min-width: 0; }
.ph-card .hp-form__fields > :last-child:nth-child(odd) { grid-column: 1 / -1; }                                  /* hospital: pairs, odd one spans */
.ph-card .pdl-form__fields > .pdl-field:not(fieldset):not(.pdl-reg) { grid-column: auto; }                          /* health: mobile | email */
.ph-card .form-group, .ph-card .hp-field, .ph-card .pdl-field { margin: 0; }
/* old template forms (term, investment, home, cyber): the form is the grid; name | mobile side by side */
.ph-card form.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph-card form.quote-form > * { grid-column: 1 / -1; min-width: 0; }
.ph-card form.quote-form > div.form-group:nth-of-type(1), .ph-card form.quote-form > div.form-group:nth-of-type(2) { grid-column: auto; }
.ph-card form.quote-form > input[type=hidden], .ph-card form.quote-form > .error:empty { display: none; }
.ph-card .form-group-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 10px; margin: 0 !important; }
.ph-card .form-group-row > [class*="col-"] { padding: 0 !important; max-width: none !important; width: auto !important; flex: none !important; }

/* D-108: renewal form (renew/index): the form is the grid; name | mobile and email | policy number side by side */
.ph-card .rn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.ph-card .rn-form > * { grid-column: 1 / -1; min-width: 0; }
.ph-card .rn-form > .rn-field--half { grid-column: auto; }
.ph-card .rn-field { gap: 0; }
.ph-card .rn-form > .cy-btn { margin-top: 4px; }

/* labels above the fields */
.ph-card .form-label-top, .ph-card .hp-field__label, .ph-card .pdl-field__label, .ph-card .pi-field__label, .ph-card label.ph-label {
  display: block !important; margin: 0 0 5px !important; padding: 0; position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important;
  font: 600 12.5px/16px var(--cy-font, Inter, sans-serif); color: var(--cy-neutral-800, #2b2522); letter-spacing: 0; text-transform: none; white-space: nowrap; text-overflow: ellipsis;
}
.ph-card .hp-field__label .cy-optional, .ph-card .ph-label .cy-optional { font-weight: 400; color: var(--cy-neutral-500, #77706b); }
/* the field boxes */
.ph-card .form-field, .ph-card .pl-input, .ph-card .rn-input {
  position: relative; display: flex; align-items: center; gap: 9px; height: 42px; min-height: 42px; padding: 0 12px !important; margin: 0;
  border-radius: 12px; border: 0; background: #f7f6f5; box-shadow: inset 0 0 0 1px rgba(21, 17, 15, .12);
  transition: box-shadow .2s, background-color .2s;
}
.ph-card .form-field:focus-within, .ph-card .pl-input:focus-within, .ph-card .rn-input:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cy-brand-600, #e5533f), 0 0 0 4px rgba(240, 93, 73, .14); }
.ph-card .form-field > img, .ph-card .pl-input > img, .ph-card .form-field > .cy-icon, .ph-card .pl-input > .cy-icon, .ph-card .rn-input > .cy-icon, .ph-card .field-icon-svg {
  position: static; width: 17px !important; height: 17px !important; flex: none; opacity: .5; filter: grayscale(1); transform: none; margin: 0;
}
.ph-card .form-field input, .ph-card .form-field select, .ph-card .pl-input input, .ph-card .pl-input select,
.ph-card .pl-input .cy-input, .ph-card .rn-input input, .ph-card .rn-input select, .ph-card .form-input, .ph-card .form-select-a {
  flex: 1; min-width: 0; width: 100%; height: 40px; padding: 0; margin: 0; border: 0 !important; outline: 0; box-shadow: none !important;
  background: transparent !important; font: 400 14.5px/20px var(--cy-font, Inter, sans-serif); color: var(--cy-neutral-900, #15110f);
}
.ph-card input::placeholder { color: #a8a19b; opacity: 1; }
/* selects: never over their icon, one plain chevron */
.ph-card select { appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.ph-card .form-field select, .ph-card .form-field .form-select-a, .ph-card .pl-input select, .ph-card .rn-input select { position: static !important; inset: auto !important; padding: 0 20px 0 0 !important; text-indent: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2377706b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right center !important; }
.ph-card .form-field-select .dropdown-arrow, .ph-card .pl-input__arrow, .ph-card .hp-input-icon--end, .ph-card .rn-input .rn-input__icon--end { display: none !important; }

/* choice pills (gender) */
.ph-card .gender-toggle-wrapper, .ph-card .pdl-gender { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-card .gender-option, .ph-card .pdl-choice { height: 40px; min-height: 40px; margin: 0; border-radius: 12px; font-size: 14px; }

/* the button, the trust row and the legal line */
.ph-card .cy-btn--lg { height: 46px; min-height: 46px; font-size: 15.5px; margin: 0; }
.ph-card .hp-form { display: flex; flex-direction: column; gap: 14px; }
.ph-card .hp-form .hp-form__fields { margin: 0 !important; }
.ph-card .cy-qf-trust, .ph-card .pl-quote__trust { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: 12px 0 0; gap: 6px 14px; transform: none; }
.ph-card .cy-qf-trust .pl-rm, .ph-card .pl-quote__trust .pl-rm { width: auto; white-space: nowrap; font-size: 12px; gap: 6px; padding: 2px 8px 2px 2px; background: none; }
.ph-card .cy-qf-trust .pl-rm__icon, .ph-card .pl-quote__trust .pl-rm__icon { width: 22px; height: 22px; }
.ph-card .cy-qf-trust > *, .ph-card .pl-quote__trust > * { font-size: 12px; }
.ph-card .quote-disclaimer-wrapper { margin: 0; }
.ph-card .quote-disclaimer { display: block; margin: 0; font: 400 10.5px/15px var(--cy-font, Inter, sans-serif); color: var(--cy-neutral-500, #77706b); text-align: center; }
.ph-card .quote-disclaimer a { color: var(--cy-neutral-800, #2b2522); text-decoration: underline; }

/* PI form (pi-landing/form): the "previous policy" question as a compact list */
.ph-card .pl-policy { margin: 0; padding: 10px 12px; border: 0; border-radius: 12px; background: #f7f6f5; box-shadow: inset 0 0 0 1px rgba(21, 17, 15, .08); display: flex; flex-direction: column; gap: 4px; }
.ph-card .pl-policy legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; font: 600 12.5px/17px var(--cy-font, Inter, sans-serif); color: var(--cy-neutral-800, #2b2522); }
.ph-card .pl-policy label { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 12.5px/18px var(--cy-font, Inter, sans-serif); color: var(--cy-neutral-700, #4a423d); cursor: pointer; }
.ph-card .pl-policy input[type=radio] { accent-color: var(--cy-brand-600, #e5533f); width: 15px; height: 15px; margin: 0; flex: none; }

/* health form: first / middle / last name boxes like the other fields, members in one row */
.ph-card .pdl-name { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ph-card .pdl-name .cy-input { height: 42px; width: 100%; padding: 0 10px; border: 0 !important; border-radius: 12px; background: #f7f6f5; box-shadow: inset 0 0 0 1px rgba(21, 17, 15, .12) !important; font-size: 14px; }
.ph-card .pdl-name .cy-input:focus { outline: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--cy-brand-600, #e5533f), 0 0 0 4px rgba(240, 93, 73, .14) !important; }
.ph-card .pdl-field legend.pdl-field__label { float: left; width: 100%; }
.ph-card .pdl-members { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; clear: both; }
.ph-card .pdl-members--more { margin-top: 6px; }
.ph-card .pdl-member { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px !important; line-height: 14px; margin: 0; }
.ph-card .pdl-member__disc { width: 38px !important; height: 38px !important; }
.ph-card .pdl-member__disc .cy-icon { width: 18px; height: 18px; }
.ph-card .pdl-add { margin-top: 8px; height: 28px; padding: 0 10px; font-size: 12px; }
.ph-card .pdl-children { margin-top: 6px; }

/* motor: registration field, "or", the new-car link */
.ph-card .pdl-newcar { margin-top: 10px; }
.ph-card .pdl-newcar__btn { padding: 10px 12px; }

/* D-110 (owner, after seeing it unscrolled: "push it down from the top and less from the bottom"): 72px under the
   floating header, 24px under the content (the card keeps room for the chip hanging under it), then the next
   section's own 64px. The hero runs up under the floating header on purpose (margin-top: -header). The chips may run
   past the hero, so only sideways overflow is clipped. */
@media (min-width: 1100px) {
  .ph { padding-top: calc(var(--ph-hdr) + 72px); padding-bottom: 24px; overflow: clip visible; }
}

/* ---- smaller screens ---- */
@media (max-width: 1199px) {
  .ph__inner { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 32px; }
  body .ph h1.ph__title { font-size: 48px; }
  .ph__cue { right: -24px; width: 170px; }
  .ph__cue svg { width: 160px; }
}
/* short laptop screens (1366x768, 1280x720): tighter copy so the whole card stays on the first screen */
@media (min-width: 1100px) and (max-height: 800px) {
  /* D-109: room under the header on short laptop screens (D-110: 64px over 24px, owner: "push it down from the nav bar") */
  .ph { padding-top: calc(var(--ph-hdr) + 64px); padding-bottom: 24px; }
  body .ph h1.ph__title { font-size: 50px; margin-top: 14px; }
  .ph__sub { margin-top: 12px; }
}
/* tablet: one column - copy, card, journey, numbers */
@media (max-width: 1099px) {
  .ph { padding: calc(var(--ph-hdr) + 28px) 32px 48px; }
  .ph__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "card" "journey" "facts" "after"; grid-template-rows: none; max-width: 720px; }
  body .ph h1.ph__title { font-size: 46px; max-width: 16ch; }
  .ph__cue { display: none; }
  .ph__cue-down { display: flex; align-items: flex-end; gap: 6px; width: max-content; margin: 6px 0 -8px auto; padding-right: 40px; }
  .ph__cue-down p { margin: 0 0 26px; font: 400 20px/1.1 Pacifico, "Brush Script MT", cursive !important; color: var(--cy-brand-600, #e5533f); transform: rotate(-5deg); }
  .ph__cue-down svg { width: 54px; height: 70px; overflow: visible; }
  .ph-card-wrap { margin-top: 8px; }
  .ph__journey { margin-top: 28px !important; }
}
@media (max-width: 991px) { .ph { --ph-hdr: 64px; } }
/* phone */
@media (max-width: 599px) {
  .ph { padding: calc(var(--ph-hdr) + 20px) 16px 40px; }
  body .ph h1.ph__title { margin-top: 14px; font-size: 34px; line-height: 1.08; letter-spacing: -.03em; }
  .ph__sub { margin-top: 12px; font-size: 15.5px; line-height: 24px; }
  .ph__cue-down { padding-right: 18px; margin-top: 0; }
  .ph__cue-down p { font-size: 18px !important; margin-bottom: 22px; }
  .ph__cue-down svg { width: 44px; height: 58px; }
  .ph-card-wrap { border-radius: 22px; padding: 5px; }
  .ph-card { padding: 16px 14px 12px; border-radius: 18px; }
  .ph-card__title { font-size: 16.5px; }
  .ph__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ph__facts li { padding: 10px 6px; text-align: center; font-size: 11.5px; line-height: 15px; }
  .ph__facts b { display: block; font-size: 16px; margin-bottom: 2px; }
  /* name and mobile side by side: give the text the room */
  .ph-card .pl-form__fields > div:nth-child(-n+2) .pl-input > img, .ph-card .hp-form__fields .pl-input > img,
  .ph-card form.quote-form > div.form-group:nth-of-type(-n+2) .field-icon-svg, .ph-card .rn-field--half .rn-input > .cy-icon { display: none; }
}
@media (max-width: 380px) {
  .ph-card .pl-form__fields > div:nth-child(1), .ph-card .pl-form__fields > div:nth-child(2),
  .ph-card .hp-form__fields > *, .ph-card .pdl-form__fields > .pdl-field:not(fieldset),
  .ph-card form.quote-form > div.form-group:nth-of-type(1), .ph-card form.quote-form > div.form-group:nth-of-type(2), .ph-card .rn-form > .rn-field--half { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .ph__copy > *:not(.ph__cue):not(.ph__cue-down) { animation: ph-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
  .ph__copy > :nth-child(2) { animation-delay: .06s; } .ph__copy > :nth-child(3) { animation-delay: .12s; }
  .ph-card-wrap { animation: ph-rise .7s cubic-bezier(.2, .8, .2, 1) .1s both; }
}
/* D-109: very short laptop screens (720px tall); D-110: 60px under the header, the CTA still on the first screen */
@media (min-width: 1100px) and (max-height: 730px) { .ph { padding-top: calc(var(--ph-hdr) + 60px); padding-bottom: 20px; } }
@keyframes ph-rise { from { opacity: 0; transform: translateY(14px); } }
/* hidden parts of the forms stay hidden (e.g. health's extra members until "Add Members") */
.ph-card [hidden] { display: none !important; }

/* ---- D-118 (owner, 30 Oct: "the hero looks cluttered"): focus mode (components/product-hero, focus) ----
   The hero keeps the licence line, H1, intro, points and the form; the scene keeps its paper and stamp only; the
   steps and figures sit in .ph-strip right under the hero. */
.ph--focus .phs > .phs-chip, .ph--focus .phs-tile, .ph--focus .phs .chips { display: none !important; }
.ph--focus .ph-card-wrap { margin-bottom: 0 !important; }
.ph--focus .ph__kicker { padding: 0; background: none; gap: 8px; font: 500 13px/18px var(--cy-font, Inter, sans-serif); color: var(--cy-neutral-600, #5e5651); }
.ph--focus .ph__kicker > span { width: 20px; height: 20px; background: var(--cy-brand-50, #fdebe7); color: var(--cy-brand-600, #e5533f); }
.ph--focus .ph__sub { max-width: 50ch; font-size: 17px; line-height: 27px; }
.ph--focus .ph__points { margin-top: 18px; gap: 9px; }
.ph--focus .ph-card .cy-qf-trust { margin-top: 10px; gap: 2px 14px; }
.ph--focus .ph-card__legal { margin-top: 4px; }
@media (min-width: 1100px) { .ph--focus { padding-bottom: 40px; } }

.ph-strip { position: relative; padding: 8px 24px 40px; background: #fff; }
.ph-strip__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: stretch; }
.ph-strip .ph__journey { margin: 0 !important; }
.ph-strip .ph__facts { display: grid; align-content: center; gap: 10px; margin: 0; }
.ph-strip .ph__facts li { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; border-radius: 16px; font-size: 13.5px; }
.ph-strip .ph__facts b { font-size: 20px; letter-spacing: -.02em; color: var(--cy-brand-600, #e5533f); }
.ph-strip .ph__after { grid-column: 1 / -1; margin: 0; }
@media (max-width: 1099px) {
  .ph-strip { padding: 0 32px 32px; }
  .ph-strip__inner { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .ph-strip .ph__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-strip .ph__facts li { flex-direction: column; gap: 2px; text-align: center; align-items: center; }
}
@media (max-width: 599px) {
  .ph-strip { padding: 0 16px 28px; }
  .ph-strip .ph__facts li { padding: 10px 6px; font-size: 11.5px; }
  .ph-strip .ph__facts b { font-size: 16px; }
}
.ph-strip .ph__journey, .ph-strip .ph__facts, .ph-strip .ph__after { grid-area: auto; }