/* =========================================================================
   HP Wolf Security / Windows 11 – landing page
   -------------------------------------------------------------------------
   Wszystkie klasy i nazwy zmiennych prefiksowane `hpw-` / `--hpw-`,
   font zarejestrowany jako `hpw-forma-djr` – landing wchodzi w istniejącą
   stronę, więc nic nie może kolidować ze stylami hosta.

   Arkusz jest mobile-first:
     • baza                       – mobile (< 768 px), układ jednokolumnowy
     • @media (min-width: 768px)  – tablet, płynny układ dwukolumnowy
     • @media (min-width: 940px)  – produkty w trzech kolumnach
     • @media (min-width: 1320px) – desktop 1:1 z projektem (kontener 1304 px)
   ========================================================================= */

/* ---------- font ---------------------------------------------------------
   FormaDJRUI to font zmienny (wght 200–800, opsz 9–144), dlatego
   deklarujemy zakres wag – bez tego przeglądarka renderuje wszystko
   w domyślnym ExtraLight 200.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "hpw-forma-djr";
  src: url("../fonts/FormaDJRUI.woff2") format("woff2"),
       url("../fonts/FormaDJRUI.woff")  format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.hpw-landing {
  /* paleta */
  --hpw-blue:  #024ad8;
  --hpw-ink:   #1c1b1a;
  --hpw-grey:  #f2f2f2;
  --hpw-rule:  #c9c9c9;
  --hpw-black: #000;
  --hpw-white: #fff;

  /* typografia */
  --hpw-font: "hpw-forma-djr", Arial, Helvetica, sans-serif;
  /* wagi dobrane pod font zmienny FormaDJRUI – projekt powstał
     na szerszym cięciu „Micro”, dlatego szerokości wierszy wyrównuje
     dodatkowo lekki tracking (--hpw-ls-*) zamiast pogrubiania */
  --hpw-fw-regular: 400;
  --hpw-fw-body:    450;
  --hpw-fw-medium:  500;
  --hpw-fw-semi:    600;
  --hpw-fw-bold:    700;

  --hpw-ls-body:    .025em;
  --hpw-ls-title:   .006em;

  /* siatka */
  --hpw-container: 1304px;
  --hpw-gutter: 20px;          /* margines boczny; na desktopie 80 px */
  --hpw-cut: 34px;             /* głębokość ukośnego ścięcia zdjęć na mobile */

  max-width: var(--hpw-container);
  margin: 0 auto;
  background: var(--hpw-white);
  color: var(--hpw-ink);
  font-family: var(--hpw-font);
  font-weight: var(--hpw-fw-body);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--hpw-ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- reset lokalny (tylko wewnątrz landingu) ----------------------
   `:where()` zeruje specyficzność, dzięki czemu reset nie nadpisuje
   reguł komponentów poniżej (i nie walczy ze stylami hosta).
   ------------------------------------------------------------------------ */
.hpw-landing,
:where(.hpw-landing) *,
:where(.hpw-landing) *::before,
:where(.hpw-landing) *::after { box-sizing: border-box; }

:where(.hpw-landing) :is(h1, h2, h3, p, ul, li, dl, dt, dd, figure, figcaption) {
  margin: 0;
  padding: 0;
}

:where(.hpw-landing) ul { list-style: none; }
:where(.hpw-landing) img { display: block; max-width: 100%; height: auto; border: 0; }

/* Łamania wierszy przeniesione 1:1 z projektu desktopowego (w Figmie są
   ręczne – szerokości wierszy nie wynikają z automatycznego zawijania).
   Poniżej progu desktopowego tekst zawija się naturalnie. */
.hpw-br { display: none; }


/* =========================================================================
   HERO – mobile
   ========================================================================= */
.hpw-hero {
  position: relative;
  overflow: hidden;
  background: var(--hpw-white);
  padding-bottom: 44px;
}

/* niebieski klin z projektu, przycięty do paska w prawym górnym rogu */
.hpw-hero__art {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 88px;
  object-fit: cover;
  object-position: right top;
  z-index: 0;
}

.hpw-hero__inner {
  position: relative;
  z-index: 1;
  padding: 0 var(--hpw-gutter);
}

.hpw-hero__logo {
  width: 100%;
  max-width: 300px;
  margin-top: 116px;
}

.hpw-hero__copy { margin-top: 32px; }

.hpw-hero__title {
  font-size: 32px;
  line-height: 36px;
  font-weight: var(--hpw-fw-semi);
  letter-spacing: .01em;
}

.hpw-hero__subtitle {
  margin-top: 10px;
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--hpw-fw-regular);
  letter-spacing: .0064em;
}

.hpw-hero__figure { margin-top: 36px; }

.hpw-hero__laptop {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

.hpw-hero__caption {
  max-width: 260px;
  margin: 10px auto 0;
  text-align: center;
  text-wrap: balance;
  font-size: 14px;
  line-height: 19px;
  font-weight: var(--hpw-fw-bold);
  letter-spacing: .02em;
}


/* =========================================================================
   SEKCJE TREŚCI – mobile (zdjęcie nad tekstem)
   -------------------------------------------------------------------------
   Zdjęcia mają wypalone ukośne cięcie z boku, więc na wąskim ekranie
   pokazujemy kadr poziomy z wnętrza nieprzezroczystego obszaru
   (kontener `overflow:hidden` + obrazek pozycjonowany procentowo),
   a ukos marki odtwarzamy w CSS na dolnej krawędzi.
   ========================================================================= */
.hpw-sec {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--hpw-white);
}

.hpw-sec--grey { background: var(--hpw-grey); }

.hpw-sec__media {
  order: -1;                 /* zdjęcie zawsze pierwsze, niezależnie od DOM */
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hpw-sec__media img {
  position: absolute;
  max-width: none;
  height: auto;
}

/* Ukos i kadry obowiązują wyłącznie w układzie jednokolumnowym – powyżej
   768 px zdjęcia wracają do kolumn i pokazują pełny plik z ukosem wypalonym
   w alfie. Reguły muszą siedzieć w `max-width`, bo mają wyższą specyficzność
   niż resety w warstwach tablet/desktop (media query nie podnosi wagi). */
@media (max-width: 767.98px) {

  /* ukos: sekcje ze zdjęciem po lewej tną w dół w prawo, po prawej – odwrotnie
     (ten sam kierunek co na desktopie) */
  .hpw-sec--media-left .hpw-sec__media {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hpw-cut)), 0 100%);
  }
  .hpw-sec--media-right .hpw-sec__media {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--hpw-cut)));
  }

  /* Kadry policzone z kanału alfa każdego pliku – największy poziomy
     prostokąt mieszczący się w nieprzezroczystej części zdjęcia.
     aspect-ratio = szerokość/wysokość kadru,
     width        = szerokość źródła / szerokość kadru,
     left / top   = przesunięcie kadru. */
  .hpw-sec--s1 .hpw-sec__media { aspect-ratio: 765 / 496; }
  .hpw-sec--s1 .hpw-sec__media img { width: 149.02%; left: 0; top: 0; }

  .hpw-sec--s2 .hpw-sec__media { aspect-ratio: 745 / 500; }
  .hpw-sec--s2 .hpw-sec__media img { width: 142.42%; left: -41.88%; top: -.6%; }

  .hpw-sec--s3 .hpw-sec__media { aspect-ratio: 1083 / 720; }
  .hpw-sec--s3 .hpw-sec__media img { width: 124.38%; left: 0; top: 0; }

  .hpw-sec--s4 .hpw-sec__media { aspect-ratio: 957 / 624; }
  .hpw-sec--s4 .hpw-sec__media img { width: 144.62%; left: -44.51%; top: -35.90%; }

  .hpw-sec--s5 .hpw-sec__media { aspect-ratio: 929 / 624; }
  .hpw-sec--s5 .hpw-sec__media img { width: 131.54%; left: 0; top: -28.85%; }

  .hpw-sec--s6 .hpw-sec__media { aspect-ratio: 1127 / 736; }
  .hpw-sec--s6 .hpw-sec__media img { width: 123.87%; left: -23.78%; top: -36.96%; }
}

.hpw-sec__body {
  position: relative;
  z-index: 1;
  padding: 28px var(--hpw-gutter) 44px;
}

.hpw-sec__title {
  font-size: 24px;
  line-height: 29px;
  font-weight: var(--hpw-fw-medium);
  letter-spacing: var(--hpw-ls-title);
}

.hpw-sec__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--hpw-fw-body);
  letter-spacing: var(--hpw-ls-body);
}

.hpw-sec__text + .hpw-sec__text { margin-top: 20px; }


/* =========================================================================
   Lista korzyści (sekcja 5) – mobile
   ========================================================================= */
.hpw-features { margin-top: 28px; }

.hpw-features__item {
  display: flex;
  align-items: center;
  min-height: 64px;
}

.hpw-features__item + .hpw-features__item { margin-top: 12px; }

.hpw-features__icon {
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ikony mają różny „oddech” wewnątrz kwadratu – rozmiary dobrane
   tak, żeby optycznie zgadzały się z projektem */
.hpw-features__item:nth-child(1) .hpw-features__icon img { width: 62px; }
.hpw-features__item:nth-child(2) .hpw-features__icon img { width: 53px; }
.hpw-features__item:nth-child(3) .hpw-features__icon img { width: 58px; }
.hpw-features__item:nth-child(4) .hpw-features__icon img { width: 61px; }
.hpw-features__item:nth-child(5) .hpw-features__icon img { width: 57px; }

.hpw-features__label {
  padding-left: 14px;
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--hpw-fw-body);
  letter-spacing: var(--hpw-ls-body);
}


/* =========================================================================
   PRODUKTY + CTA – mobile
   ========================================================================= */
.hpw-outro {
  background: var(--hpw-grey);
  padding: 40px 0 56px;
}

.hpw-products {
  display: flex;
  flex-direction: column;
}

.hpw-products__item {
  position: relative;
  padding: 0 var(--hpw-gutter);
}

.hpw-products__item + .hpw-products__item { margin-top: 36px; }

/* linia rozdzielająca – na mobile pozioma nad kolejną kartą */
.hpw-products__item + .hpw-products__item::before {
  content: "";
  position: absolute;
  top: -18px;
  left: var(--hpw-gutter);
  right: var(--hpw-gutter);
  height: 1px;
  background: var(--hpw-rule);
}

.hpw-products__figure {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hpw-products__figure img { width: 100%; max-width: 320px; height: auto; }

.hpw-products__name {
  margin-top: 20px;
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--hpw-fw-bold);
  letter-spacing: 0;
}

.hpw-specs {
  margin-top: 14px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
}

.hpw-specs__row { display: block; }
.hpw-specs dt { display: inline; font-weight: var(--hpw-fw-regular); }
.hpw-specs dd { display: inline; font-weight: var(--hpw-fw-bold); }

/* --- CTA --- */
.hpw-cta { padding: 48px var(--hpw-gutter) 0; }

.hpw-cta__title {
  font-size: 24px;
  line-height: 29px;
  font-weight: var(--hpw-fw-medium);
  letter-spacing: var(--hpw-ls-title);
}

.hpw-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  width: 100%;
  max-width: 320px;
  height: 52px;
  border-radius: 10px;
  background: var(--hpw-black);
  color: var(--hpw-white);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  font-weight: var(--hpw-fw-regular);
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color .2s ease;
}

.hpw-cta__button:hover,
.hpw-cta__button:focus-visible {
  background: var(--hpw-blue);
  color: var(--hpw-white);
}


/* =========================================================================
   TABLET – od 768 px: płynny układ dwukolumnowy
   ========================================================================= */
@media (min-width: 768px) {

  .hpw-landing { --hpw-gutter: 40px; }

  /* ---------- hero ---------- */
  .hpw-hero { padding-bottom: 56px; }

  .hpw-hero__art {
    width: 30%;
    height: auto;
    aspect-ratio: 355 / 449;
    object-fit: fill;
  }

  .hpw-hero__inner {
    display: grid;
    grid-template-columns: 1fr 42%;
    grid-template-areas:
      "logo   logo"
      "copy   figure";
    align-items: center;
    column-gap: 32px;
  }

  .hpw-hero__logo   { grid-area: logo;   max-width: 480px; margin-top: 56px; }
  .hpw-hero__copy   { grid-area: copy;   margin-top: 48px; }
  .hpw-hero__figure { grid-area: figure; margin-top: 48px; }

  .hpw-hero__title    { font-size: 40px; line-height: 44px; }
  .hpw-hero__subtitle { font-size: 26px; line-height: 32px; }
  .hpw-hero__caption  { font-size: 15px; line-height: 20px; }

  /* ---------- sekcje: dwie kolumny, zdjęcie na pełną wysokość ---------- */
  .hpw-sec { flex-direction: row; align-items: stretch; }

  .hpw-sec__media {
    order: 0;
    align-self: stretch;
    width: auto;
    aspect-ratio: auto;
  }

  .hpw-sec--media-right .hpw-sec__media { order: 1; }

  .hpw-sec__media img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* nieprzezroczysta część kadru trzyma się swojej krawędzi */
  .hpw-sec--media-left  .hpw-sec__media img { object-position: left center; }
  .hpw-sec--media-right .hpw-sec__media img { object-position: right center; }

  /* proporcje kolumn zdjęć z projektu (px / 1304) */
  .hpw-sec--s1 .hpw-sec__media { flex: 0 0 43.71%; }
  .hpw-sec--s2 .hpw-sec__media { flex: 0 0 40.72%; }
  .hpw-sec--s3 .hpw-sec__media { flex: 0 0 51.69%; }
  .hpw-sec--s4 .hpw-sec__media { flex: 0 0 53.07%; }
  .hpw-sec--s5 .hpw-sec__media { flex: 0 0 46.86%; }
  .hpw-sec--s6 .hpw-sec__media { flex: 0 0 53.53%; }

  .hpw-sec__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 48px var(--hpw-gutter);
  }

  .hpw-sec--media-left  .hpw-sec__body { padding-left: 32px; }
  .hpw-sec--media-right .hpw-sec__body { padding-right: 32px; }

  .hpw-sec__title { font-size: 26px; line-height: 31px; }

  /* ---------- lista korzyści ---------- */
  .hpw-features__item { min-height: 72px; }
  .hpw-features__icon { flex: 0 0 76px; }
  .hpw-features__item:nth-child(1) .hpw-features__icon img { width: 72px; }
  .hpw-features__item:nth-child(2) .hpw-features__icon img { width: 61px; }
  .hpw-features__item:nth-child(3) .hpw-features__icon img { width: 67px; }
  .hpw-features__item:nth-child(4) .hpw-features__icon img { width: 71px; }
  .hpw-features__item:nth-child(5) .hpw-features__icon img { width: 67px; }

  /* ---------- produkty ----------
     Kolumny zostają na razie jedna pod drugą – przy 768 px trzy kolumny
     dają ~250 px na kartę i każdy wiersz specyfikacji się łamie. */
  .hpw-outro { padding: 64px 0 80px; }

  .hpw-products__name { margin-top: 28px; font-size: 19px; line-height: 26px; }
  .hpw-specs          { margin-top: 18px; font-size: 15px; line-height: 24px; }

  /* ---------- CTA ---------- */
  .hpw-cta { padding: 72px var(--hpw-gutter) 0; }
  .hpw-cta__title  { font-size: 28px; line-height: 33px; }
  .hpw-cta__button { width: 280px; height: 51px; font-size: 22px; margin-top: 36px; }
}


/* =========================================================================
   PRODUKTY – od 940 px trzy kolumny obok siebie
   (niżej karty zostają jedna pod drugą, żeby specyfikacje się nie łamały)
   ========================================================================= */
@media (min-width: 940px) {

  .hpw-products { flex-direction: row; }

  .hpw-products__item {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 24px;
  }

  .hpw-products__item + .hpw-products__item { margin-top: 0; }

  .hpw-products__item + .hpw-products__item::before {
    top: 12%;
    left: 0;
    right: auto;
    width: 1px;
    height: 76%;
  }

  .hpw-products__figure img { max-width: 100%; }
}


/* =========================================================================
   DESKTOP – projekt 1:1 (kontener 1304 px, wartości w px)
   Próg 1320, a nie 1304: pionowy pasek przewijania zabiera ~15 px, więc
   przy dokładnie 1304 px viewportu sztywny układ byłby przycięty.
   ========================================================================= */
@media (min-width: 1320px) {

  .hpw-landing {
    --hpw-gutter: 80px;
    font-size: 17px;
    line-height: 23px;
  }

  .hpw-br { display: inline; }

  /* ---------- HERO ---------- */
  .hpw-hero {
    height: 693px;
    padding-bottom: 0;
  }

  .hpw-hero__art {
    width: 355px;
    height: 449px;
    aspect-ratio: auto;
    object-fit: fill;
    object-position: center;
  }

  .hpw-hero__inner {
    display: block;
    height: 100%;
    padding: 0;
  }

  .hpw-hero__logo {
    position: absolute;
    top: 63px;
    left: 80px;
    width: 761px;
    max-width: none;
    margin-top: 0;
  }

  .hpw-hero__copy {
    position: absolute;
    top: 227px;              /* górna krawędź line-boxa nagłówka */
    left: var(--hpw-gutter);
    width: 640px;
    margin-top: 0;
  }

  .hpw-hero__title {
    font-size: 56px;
    line-height: 61px;
  }

  .hpw-hero__subtitle {
    margin-top: 11px;
    font-size: 40px;
    line-height: 48px;
  }

  .hpw-hero__figure {
    position: absolute;
    top: 205px;
    left: 760px;
    width: 448px;
    margin-top: 0;
  }

  .hpw-hero__laptop { width: 448px; height: 371px; max-width: none; }

  .hpw-hero__caption {
    max-width: none;
    margin: 4px 0 0;
    font-size: 17px;
    line-height: 23px;
  }

  /* ---------- SEKCJE ----------
     Na desktopie zdjęcia idą w naturalnym rozmiarze 1x (mają wypalone
     ukośne cięcia i niebieskie akcenty) i leżą pod tekstem – w projekcie
     akapity wchodzą w przezroczysty, ścięty narożnik fotografii. */
  .hpw-sec { display: block; }

  .hpw-sec__media {
    position: absolute;
    top: 0;
    z-index: 0;
    align-self: auto;
    aspect-ratio: auto;
    flex: none;
  }

  .hpw-sec--media-left  .hpw-sec__media { left: 0; }
  .hpw-sec--media-right .hpw-sec__media { right: 0; }

  .hpw-sec__media img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
  }

  .hpw-sec__title {
    font-size: 30px;
    line-height: 34px;
  }

  .hpw-sec__text {
    margin-top: 21px;
    font-size: 17px;
    line-height: 23px;
  }

  .hpw-sec__text + .hpw-sec__text { margin-top: 23px; }

  /* --- 1. Wyposażony w wielowarstwowe zabezpieczenia --- */
  .hpw-sec--s1 { height: 426px; }
  .hpw-sec--s1 .hpw-sec__media { width: 570px; height: 426px; }
  .hpw-sec--s1 .hpw-sec__body { padding: 84px 0 0 585px; width: 1230px; }

  /* --- 2. Ultralekki laptop klasy premium --- */
  .hpw-sec--s2 { height: 426px; }
  .hpw-sec--s2 .hpw-sec__media { width: 531px; height: 425px; }
  .hpw-sec--s2 .hpw-sec__body { padding: 97px 0 0 80px; width: 700px; }

  /* --- 3. Gotowy do pracy z AI --- */
  .hpw-sec--s3 { height: 426px; }
  .hpw-sec--s3 .hpw-sec__media { width: 674px; height: 426px; }
  .hpw-sec--s3 .hpw-sec__body { padding: 102px 0 0 694px; width: 1254px; }

  /* --- 4. Zaprojektowany z myślą o produktywności i łączności --- */
  .hpw-sec--s4 { height: 428px; }
  .hpw-sec--s4 .hpw-sec__media { width: 692px; height: 427px; }
  .hpw-sec--s4 .hpw-sec__body { padding: 101px 0 0 80px; width: 740px; }

  /* --- 5. Kompleksowo chroni Twoją Firmę --- */
  .hpw-sec--s5 { height: 633px; }
  .hpw-sec--s5 .hpw-sec__media { width: 611px; height: 633px; }
  .hpw-sec--s5 .hpw-sec__body { padding: 108px 0 0 653px; width: 1304px; }

  /* --- 6. Wydajna praca z każdego miejsca --- */
  .hpw-sec--s6 { height: 505px; }
  .hpw-sec--s6 .hpw-sec__media { width: 698px; height: 505px; }
  .hpw-sec--s6 .hpw-sec__body { padding: 110px 0 0 80px; width: 700px; }

  /* ---------- lista korzyści ---------- */
  .hpw-features { margin-top: 40px; }

  .hpw-features__item { height: 82px; min-height: 0; }
  .hpw-features__item + .hpw-features__item { margin-top: 0; }

  .hpw-features__icon { flex: 0 0 98px; }
  .hpw-features__item:nth-child(1) .hpw-features__icon img { width: 93px; }
  .hpw-features__item:nth-child(2) .hpw-features__icon img { width: 79px; }
  .hpw-features__item:nth-child(3) .hpw-features__icon img { width: 87px; }
  .hpw-features__item:nth-child(4) .hpw-features__icon img { width: 91px; }
  .hpw-features__item:nth-child(5) .hpw-features__icon img { width: 86px; }

  .hpw-features__label {
    padding-left: 15px;
    font-size: 17px;
    line-height: 23px;
  }

  /* ---------- produkty ---------- */
  .hpw-outro { padding: 0 0 94px; }

  .hpw-products { padding-top: 135px; }

  .hpw-products__item {
    flex: 0 0 auto;
    padding: 0;
  }

  /* szerokości kolumn z projektu (linie rozdzielające na 433 px i 872 px) */
  .hpw-products__item:nth-child(1) { width: 433px; }
  .hpw-products__item:nth-child(2) { width: 439px; }
  .hpw-products__item:nth-child(3) { width: 432px; }

  .hpw-products__item + .hpw-products__item::before {
    top: 81px;              /* 3754 − 3673 */
    left: 0;
    right: auto;
    width: 1px;
    height: 281px;
  }

  .hpw-products__figure { height: 310px; }

  .hpw-products__figure img { width: auto; max-width: none; }
  .hpw-products__item:nth-child(1) .hpw-products__figure img { width: 360px; }
  .hpw-products__item:nth-child(2) .hpw-products__figure img { width: 366px; }
  .hpw-products__item:nth-child(3) .hpw-products__figure img { width: 369px; }

  .hpw-products__name {
    margin-top: 42px;
    font-size: 20px;
    line-height: 28px;
  }

  .hpw-products__item:nth-child(1) .hpw-products__name,
  .hpw-products__item:nth-child(1) .hpw-specs { padding-left: 81px; }
  .hpw-products__item:nth-child(2) .hpw-products__name,
  .hpw-products__item:nth-child(2) .hpw-specs { padding-left: 61px; }
  .hpw-products__item:nth-child(3) .hpw-products__name,
  .hpw-products__item:nth-child(3) .hpw-specs { padding-left: 63px; }

  .hpw-specs {
    margin-top: 25px;
    font-size: 15.4px;
    line-height: 25.4px;
  }

  /* ---------- CTA ---------- */
  .hpw-cta { padding: 128px 0 0 var(--hpw-gutter); }

  .hpw-cta__title {
    font-size: 30px;
    line-height: 34px;
  }

  .hpw-cta__button {
    margin-top: 44px;
    width: 280px;
    max-width: none;
    height: 51px;
    font-size: 26px;
  }
}