/* ==========================================================================
   Pyridium — site 2026
   O layout foi desenhado em 1920px. --s converte 1px do layout em px reais:
   no desktop encolhe proporcionalmente abaixo de 1920px; abaixo de 1024px
   o layout empilha (versão mobile) com uma escala própria.
   ========================================================================== */

/* Fontes licenciadas do layout (Eskorte Latin e Agrandir).
   Enquanto os arquivos não estiverem em /fonts, o site usa Fraunces e
   Bricolage Grotesque (Google Fonts). Ver fonts/LEIA-ME.txt.

@font-face { font-family: "Eskorte Latin"; src: url("../fonts/EskorteLatin-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Eskorte Latin"; src: url("../fonts/EskorteLatin-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Eskorte Latin"; src: url("../fonts/EskorteLatin-SemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Eskorte Latin"; src: url("../fonts/EskorteLatin-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Eskorte Latin"; src: url("../fonts/EskorteLatin-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Eskorte Latin"; src: url("../fonts/EskorteLatin-ExtraboldItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Agrandir"; src: url("../fonts/Agrandir-Narrow.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Agrandir"; src: url("../fonts/Agrandir-TextBold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
*/

:root {
  --s: min(1px, calc(100vw / 1920));
  --header-h: calc(122 * var(--s));

  --header-bg: #180c4d;
  --navy: #241367;
  --navy-2: #212b7b;
  --coral: #ff8a85;
  --coral-2: #fb8984;
  --salmon: #ff7d66;
  --peach: #ffab78;
  --blush: #ffb2ae;
  --mauve: #ce8b9f;
  --pink-soft: #ffc3e3;
  --pink-text: #ffbfe4;
  --pink-50: #fa99cd;
  --red-coral: #ff6359;
  --orange-line: #ef5f18;
  --orange-star: #ffad76;
  --prev-pink: #fd72b9;
  --prev-pink-2: #f046a1;
  --prev-red: #ff0c2f;
  --prev-blue: #65b4fd;

  --font-display: "Eskorte Latin", "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Agrandir", "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(.65, 0, .25, 1);
}

@media (max-width: 1023px) {
  :root {
    --s: min(0.6px, calc(100vw / 750));
    --header-h: 64px;
  }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy);
  color: var(--pink-text);
  font-family: var(--font-text);
  font-size: max(15px, calc(31 * var(--s)));
  font-stretch: 87.5%;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}

main { overflow-x: clip; }

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3, p, ul, ol { margin: 0; }

button { font: inherit; color: inherit; }

[id] { scroll-margin-top: var(--header-h); }

:focus-visible {
  outline: 3px solid var(--peach);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--blush);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* ------------------------------------------------------------ tipografia */

.display {
  font-family: var(--font-display);
  font-stretch: normal;
  letter-spacing: -0.02em;
  line-height: 1;
}

.faq__title,
.split-title {
  font-family: var(--font-display);
  font-stretch: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}

.faq__title {
  font-style: italic;
  font-size: calc(98 * var(--s));
}
.faq__title em { font-weight: 800; }

.split-title em { font-style: italic; font-weight: 800; }

/* --------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: max(48px, calc(81 * var(--s)));
  padding: 0 1.2em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-text);
  font-stretch: normal;
  font-weight: 700;
  font-size: max(15px, calc(34 * var(--s)));
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--solid { background: var(--coral); color: var(--navy); }
.btn--solid:hover { background: var(--blush); box-shadow: 0 10px 30px -12px rgba(255, 138, 133, .8); }

.btn--outline { border-color: var(--coral); color: var(--blush); background: transparent; }
.btn--outline:hover { background: var(--coral); color: var(--navy); }

.btn--cta {
  width: calc(589 * var(--s));
  min-width: 240px;
  min-height: max(52px, calc(83 * var(--s)));
  font-size: max(18px, calc(49 * var(--s)));
}

/* ============================================================== cabeçalho */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--header-bg);
  transition: box-shadow .3s;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -10px rgba(8, 3, 35, .7); }

.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 calc(60 * var(--s));
}

.site-header__logo img { width: calc(192 * var(--s)); }

.site-header__adium img { width: calc(43 * var(--s)); }

.site-nav { margin: 0 auto; }

.site-nav__list {
  display: flex;
  gap: calc(96 * var(--s));
  padding: 0;
  list-style: none;
}

.site-nav__item { position: relative; }

.site-nav__link {
  position: relative;
  display: inline-block;
  padding: .2em 0;
  border: 0;
  background: none;
  color: var(--blush);
  font-family: var(--font-display);
  font-stretch: normal;
  font-style: italic;
  font-weight: 700;
  font-size: calc(40 * var(--s));
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after,
.site-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }

.site-nav__sub {
  position: absolute;
  left: 50%;
  top: calc(100% + 18 * var(--s));
  min-width: calc(420 * var(--s));
  padding: calc(14 * var(--s));
  border-radius: calc(36 * var(--s));
  background: var(--header-bg);
  box-shadow: 0 24px 50px -20px rgba(8, 3, 35, .9);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .25s, transform .25s var(--ease), visibility .25s;
}
.site-nav__item.is-open .site-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.site-nav__sub a {
  display: block;
  padding: calc(16 * var(--s)) calc(24 * var(--s));
  border-radius: calc(24 * var(--s));
  color: var(--blush);
  font-family: var(--font-display);
  font-stretch: normal;
  font-style: italic;
  font-weight: 700;
  font-size: calc(34 * var(--s));
  line-height: 1.1;
  text-decoration: none;
  transition: background-color .2s;
}
.site-nav__sub a:hover,
.site-nav__sub a[aria-current="page"] { background: rgba(255, 178, 174, .12); }
.site-nav__sub small {
  display: block;
  margin-top: .25em;
  color: var(--pink-soft);
  font-family: var(--font-text);
  font-style: normal;
  font-weight: 400;
  font-size: .62em;
  opacity: .8;
}

.site-header__toggle { display: none; }

@media (max-width: 1023px) {
  .site-header__inner { padding: 0 20px; gap: 16px; }
  .site-header__logo { margin-right: auto; }
  .site-header__logo img { width: 112px; }
  .site-header__adium img { width: 26px; }

  .site-header__toggle {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }
  .site-header__toggle span,
  .site-header__toggle span::before,
  .site-header__toggle span::after {
    display: block;
    width: 24px; height: 2px;
    border-radius: 2px;
    background: var(--blush);
    transition: transform .3s var(--ease), background-color .2s;
  }
  .site-header__toggle span { position: relative; }
  .site-header__toggle span::before,
  .site-header__toggle span::after { content: ""; position: absolute; left: 0; }
  .site-header__toggle span::before { top: -7px; }
  .site-header__toggle span::after { top: 7px; }
  .site-header__toggle[aria-expanded="true"] span { background: transparent; }
  .site-header__toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .site-header__toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    margin: 0;
    padding: 12px 20px 32px;
    background: var(--header-bg);
    box-shadow: 0 30px 40px -20px rgba(8, 3, 35, .9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .3s, transform .3s var(--ease), visibility .3s;
  }
  .site-header.menu-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__item { border-bottom: 1px solid rgba(255, 178, 174, .18); }
  .site-nav__link { width: 100%; padding: 16px 0; font-size: 28px; text-align: left; }
  .site-nav__link::after { display: none; }

  .site-nav__sub {
    position: static;
    min-width: 0;
    max-height: 0;
    padding: 0 0 0 12px;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height .35s var(--ease);
  }
  .site-nav__item.is-open .site-nav__sub { max-height: 320px; transform: none; padding-bottom: 12px; }
  .site-nav__sub a { padding: 10px 0; font-size: 22px; }
}

/* ================================================================== HOME */

/* ------------------------------------------------- carrossel de destaques */

.home-hero { padding: calc(113 * var(--s)) calc(60 * var(--s)) 0; }

.carousel {
  position: relative;
  max-width: calc(1802 * var(--s));
  height: calc(724 * var(--s));
  margin: 0 auto;
  border-radius: calc(60 * var(--s));
  overflow: hidden;
  isolation: isolate;
  --dot-on: var(--navy);
  --dot-off: rgba(36, 19, 103, .3);
}

.carousel__track {
  display: flex;
  height: 100%;
  transition: transform .8s var(--ease);
}
.carousel.is-dragging .carousel__track { transition: none; }

.slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

.slide__content {
  position: absolute;
  z-index: 2;
  left: calc(130 * var(--s));
  top: 50%;
  transform: translateY(-50%);
}

.slide__media {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.slide .btn { margin-top: calc(40 * var(--s)); }

.slide--pyridium { background: linear-gradient(160deg, #212c77 10%, #1462ac 100%); }
.slide--pyridium .slide__content { width: calc(700 * var(--s)); }
.slide--pyridium .slide__lettering { width: calc(640 * var(--s)); }
.slide--pyridium .claim { margin-top: calc(28 * var(--s)); font-size: calc(54 * var(--s)); }
.slide--pyridium .slide__media { right: calc(110 * var(--s)); top: calc(30 * var(--s)); width: calc(800 * var(--s)); }

.slide--prevent { background: linear-gradient(160deg, #503680 0%, #734a90 100%); }
.slide--prevent .slide__content { width: calc(760 * var(--s)); }
.slide--prevent .pills { gap: calc(16 * var(--s)); }
.slide--prevent .pills img { height: calc(48 * var(--s)); width: auto; }
.slide--prevent .slide__title { width: calc(560 * var(--s)); margin-top: calc(30 * var(--s)); }
.slide--prevent .slide__subtitle { margin-top: calc(20 * var(--s)); font-size: calc(48 * var(--s)); }
.slide--prevent .slide__media { right: calc(150 * var(--s)); top: calc(10 * var(--s)); width: calc(720 * var(--s)); }

.slide--saude { background: var(--coral); }
.slide--saude .slide__content { left: 50%; transform: translate(-50%, -50%); width: calc(1400 * var(--s)); text-align: center; }
.slide__kicker {
  color: var(--navy);
  font-family: var(--font-display);
  font-stretch: normal;
  font-style: italic;
  font-weight: 600;
  font-size: calc(60 * var(--s));
  letter-spacing: -0.03em;
  line-height: 1;
}
.slide__headline {
  margin-top: calc(10 * var(--s));
  color: #f11532;
  font-family: var(--font-display);
  font-stretch: normal;
  font-style: italic;
  font-weight: 800;
  font-size: calc(140 * var(--s));
  letter-spacing: -0.04em;
  line-height: .95;
}
.slide--saude .btn--solid { background: var(--navy); color: var(--blush); }
.slide--saude .btn--solid:hover { background: #33208a; }

.carousel__controls {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(46 * var(--s));
  display: flex;
  align-items: center;
  gap: calc(18 * var(--s));
  transform: translateX(-50%);
}

.carousel__dots { display: flex; gap: calc(18 * var(--s)); }

.carousel__dot {
  width: max(10px, calc(21 * var(--s)));
  height: max(10px, calc(21 * var(--s)));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dot-off);
  cursor: pointer;
  transition: background-color .3s, transform .3s var(--ease);
}
.carousel__dot[aria-selected="true"] { background: var(--dot-on); transform: scale(1.1); }

.carousel__pause,
.carousel__arrow {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.carousel__pause {
  width: max(22px, calc(32 * var(--s)));
  height: max(22px, calc(32 * var(--s)));
  margin-left: calc(10 * var(--s));
  background: transparent;
  color: var(--dot-on);
}
.carousel__pause svg { width: 60%; height: 60%; }
.carousel__pause .icon-play { display: none; }
.carousel.is-paused .carousel__pause .icon-play { display: block; }
.carousel.is-paused .carousel__pause .icon-pause { display: none; }

.carousel__arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: max(40px, calc(64 * var(--s)));
  height: max(40px, calc(64 * var(--s)));
  background: rgba(24, 12, 77, .35);
  color: #fff;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .3s, background-color .2s;
}
.carousel__arrow svg { width: 40%; height: 40%; }
.carousel__arrow--prev { left: calc(30 * var(--s)); }
.carousel__arrow--next { right: calc(30 * var(--s)); }
.carousel:hover .carousel__arrow,
.carousel__arrow:focus-visible { opacity: 1; }
.carousel__arrow:hover { background: rgba(24, 12, 77, .6); }

/* elementos compartilhados dos slides e heros */

.claim {
  color: #ffc4e5;
  font-family: var(--font-display);
  font-stretch: normal;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: .86;
}
.claim strong { color: var(--salmon); font-style: italic; font-weight: 700; }

.pills { display: flex; flex-wrap: wrap; }

/* ----------------------------------------------------------- 50+ anos */

.brand50 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(146 * var(--s));
}
.brand50__logo { width: calc(419 * var(--s)); }
.brand50__lettering { width: calc(430 * var(--s)); margin-left: calc(119 * var(--s)); }
.brand50__text {
  width: calc(340 * var(--s));
  margin-left: calc(93 * var(--s));
  color: var(--pink-50);
  font-size: calc(49 * var(--s));
  letter-spacing: -0.02em;
  line-height: 1;
}

/* -------------------------------------------------------------- produtos */

.products {
  padding: calc(339 * var(--s)) 0 calc(175 * var(--s));
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy) 42%, #232173 100%);
}

.products__heading {
  position: relative;
  width: calc(978 * var(--s));
  margin: 0 auto;
  padding-bottom: calc(54 * var(--s));
}
.products__heading::before,
.products__heading::after {
  content: "";
  position: absolute;
  top: calc(56 * var(--s));
  bottom: 0;
  width: calc(116 * var(--s));
  border-top: 2px solid var(--coral-2);
}
.products__heading::before { left: 0; border-left: 2px solid var(--coral-2); }
.products__heading::after { right: 0; border-right: 2px solid var(--coral-2); }

.products__title {
  width: calc(700 * var(--s));
  margin: 0 auto;
  color: var(--coral-2);
  font-weight: 400;
  font-size: calc(55 * var(--s));
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
}

.products__grid {
  display: grid;
  grid-template-columns: calc(830 * var(--s)) calc(144 * var(--s)) calc(830 * var(--s));
  justify-content: center;
  margin-top: calc(37 * var(--s));
}

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.product__title {
  color: var(--blush);
  font-family: var(--font-display);
  font-stretch: normal;
  font-style: italic;
  font-weight: 700;
  font-size: calc(70 * var(--s));
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.product__subtitle {
  margin-top: calc(28 * var(--s));
  color: var(--pink-soft);
  font-family: var(--font-display);
  font-stretch: normal;
  font-size: calc(38 * var(--s));
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.product__card {
  display: block;
  width: calc(826 * var(--s));
  margin-top: calc(56 * var(--s));
  border-radius: calc(60 * var(--s));
  transition: transform .5s var(--ease), box-shadow .5s;
}
.product__card:hover { transform: translateY(calc(-10 * var(--s))); box-shadow: 0 30px 60px -30px rgba(5, 2, 30, .9); }
.product__card img { width: 100%; }

.product__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(35 * var(--s));
  width: 100%;
  margin-top: calc(65 * var(--s));
}

.products__journey {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(28 * var(--s));
  padding-top: calc(160 * var(--s));
}
.products__journey img:nth-child(1) { width: calc(77 * var(--s)); }
.products__journey img:nth-child(2) { width: calc(32 * var(--s)); }
.products__journey img:nth-child(3) { width: calc(40 * var(--s)); }

/* --------------------------------------------------- infecção urinária */

.uti {
  padding: calc(131 * var(--s)) 0 calc(182 * var(--s));
  background: var(--navy-2);
}

.uti__title { width: calc(977 * var(--s)); margin: 0 auto; }
.uti__title img { width: 100%; }

.tabs { width: calc(1237 * var(--s)); margin: calc(43 * var(--s)) auto 0; }

.tabs__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(3 * var(--s));
}

.tabs__tab {
  height: calc(95 * var(--s));
  min-height: 44px;
  padding: 0 .5em;
  border: 0;
  border-radius: calc(50 * var(--s)) calc(50 * var(--s)) 0 0;
  background: var(--mauve);
  color: rgba(36, 19, 103, .62);
  font-family: var(--font-display);
  font-stretch: normal;
  font-style: italic;
  font-weight: 600;
  font-size: max(17px, calc(42 * var(--s)));
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.tabs__tab:hover { color: var(--navy); }
.tabs__tab[aria-selected="true"] { background: var(--blush); color: var(--navy); }

.tabs__panel {
  padding: calc(97 * var(--s)) calc(103 * var(--s)) calc(60 * var(--s));
  border-radius: 0 0 calc(50 * var(--s)) calc(50 * var(--s));
  background: var(--blush);
  color: var(--navy);
  font-stretch: normal;
  font-weight: 700;
}
.tabs__panel:focus-visible { outline-offset: -6px; }
.js .tabs__panel[hidden] { display: none; }
.js .tabs__panel { animation: panel-in .45s var(--ease); }

.tabs__panel p + p { margin-top: 1.2em; }
.tabs__panel a { text-underline-offset: .15em; }
.tabs__panel a:hover { color: #4a2bb8; }

.ref {
  margin-top: calc(44 * var(--s)) !important;
  padding: 0 calc(24 * var(--s));
  font-family: var(--font-text);
  font-stretch: 87.5%;
  font-weight: 400;
  font-size: max(11px, calc(18 * var(--s)));
  line-height: 1.2;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ================================================================== FAQ */

.faq {
  padding: calc(123 * var(--s)) 0 calc(200 * var(--s));
  background: linear-gradient(180deg, #3c458f 0%, #2f5fa9 100%);
  --faq-a: var(--coral);
  --faq-b: var(--blush);
}
.faq .faq__title span { color: #fa7c67; }
.faq .faq__title em { color: #eaa97a; }

.faq__list {
  width: calc(1235 * var(--s));
  margin: calc(72 * var(--s)) auto 0;
}

.faq__item {
  border-radius: calc(45 * var(--s));
  background: var(--faq-a);
  color: var(--navy);
  transition: border-radius .35s;
}
.faq__item:nth-child(even) { background: var(--faq-b); }
.faq__item + .faq__item { margin-top: calc(-3 * var(--s)); }
.faq__item.is-open { border-radius: calc(55 * var(--s)); }

.faq__question { font: inherit; }

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  min-height: max(52px, calc(88 * var(--s)));
  padding: calc(14 * var(--s)) calc(50 * var(--s)) calc(14 * var(--s)) calc(51 * var(--s));
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--navy);
  font-family: var(--font-text);
  font-stretch: normal;
  font-weight: 700;
  font-size: max(15px, calc(31 * var(--s)));
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
}

.faq__icon {
  position: relative;
  flex: none;
  width: max(14px, calc(22 * var(--s)));
  height: max(14px, calc(22 * var(--s)));
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: max(2px, calc(3 * var(--s)));
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform .35s var(--ease);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__trigger[aria-expanded="true"] .faq__icon::after { transform: translateY(-50%) rotate(0deg); }

.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .45s var(--ease);
}
.js .faq__item:not(.is-open) .faq__panel { grid-template-rows: 0fr; }

.faq__answer {
  min-height: 0;
  overflow: hidden;
}

.faq__answer-inner {
  padding: calc(18 * var(--s)) calc(110 * var(--s)) calc(50 * var(--s)) calc(55 * var(--s));
  font-size: max(15px, calc(31 * var(--s)));
  line-height: 1.22;
}
.faq__answer-inner p + p { margin-top: 1.2em; }
.faq__answer-inner .ref,
.faq__answer-inner .legal { padding: 0; }
.faq__answer-inner .legal { margin-top: calc(40 * var(--s)); color: var(--navy); }
.faq__answer-inner ol.ref { padding-left: 1.2em; }
.faq__answer-inner sup { font-size: .55em; }

.legal {
  font-size: max(11px, calc(18 * var(--s)));
  line-height: 1.2;
}

.faq__legal {
  width: calc(1086 * var(--s));
  margin: calc(73 * var(--s)) auto 0;
  color: #fcb0ad;
}

/* ============================================================ PYRIDIUM */

.pyr-top { background: linear-gradient(180deg, var(--navy) 9%, #1b3b8a 100%); }

.pyr-hero {
  position: relative;
  height: calc(1352 * var(--s));
}
.pyr-hero > * { position: absolute; }

.pyr-hero__title { left: calc(111 * var(--s)); top: calc(175 * var(--s)); width: calc(797 * var(--s)); }
.pyr-hero__claim { left: calc(430 * var(--s)); top: calc(719 * var(--s)); font-size: calc(70 * var(--s)); }
/* seta + alvo posicionados em relação ao texto "único que age..." */
.pyr-hero__alvo { position: absolute; left: calc(-94 * var(--s)); top: calc(-80 * var(--s)); width: calc(143 * var(--s)); }

/* painel azul com a mão; a mão é posicionada em relação ao painel e vaza para fora dele */
.pyr-hero__visual {
  left: calc(1034 * var(--s));
  top: calc(131 * var(--s));
  width: calc(827 * var(--s));
  height: calc(917 * var(--s));
  border-radius: calc(60 * var(--s));
  background: linear-gradient(180deg, #212c77 0%, #1462ac 100%);
}

.pyr-hero__hand {
  position: absolute;
  left: 10.16%;
  top: -9.6%;
  width: 134.95%;
  max-width: none;
}

/* benefícios */

.benefits {
  display: grid;
  grid-template-columns: repeat(5, calc(288 * var(--s)));
  gap: calc(16 * var(--s));
  justify-content: center;
  padding: 0;
  list-style: none;
}

.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(303 * var(--s));
  padding: calc(60 * var(--s)) calc(20 * var(--s)) 0;
  border: 2px solid var(--orange-line);
  border-radius: calc(50 * var(--s));
  color: var(--pink-text);
  font-size: calc(32 * var(--s));
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: center;
}
.benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100 * var(--s));
  margin-bottom: calc(10 * var(--s));
}
.benefit__icon img { width: auto; max-width: none; }
.benefit:nth-child(1) .benefit__icon img { width: calc(199 * var(--s)); }
.benefit:nth-child(2) .benefit__icon img { width: calc(91 * var(--s)); }
.benefit:nth-child(3) .benefit__icon img { width: calc(129 * var(--s)); }
.benefit:nth-child(4) .benefit__icon img { width: calc(86 * var(--s)); }
.benefit:nth-child(5) .benefit__icon img { width: calc(130 * var(--s)); }
.benefit p { margin-top: auto; padding-bottom: calc(42 * var(--s)); }

/* produto: apresentações + indicação */

.pyr-info {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: calc(1503 * var(--s));
  margin: calc(194 * var(--s)) auto 0;
}

.presentations { width: calc(743 * var(--s)); margin: 0; }

.presentations .tabs__list { grid-template-columns: 1fr 1fr; }
.presentations .tabs__tab { height: calc(85 * var(--s)); border-radius: calc(45 * var(--s)) calc(45 * var(--s)) 0 0; }
.presentations .tabs__tab:not([aria-selected="true"]) { background: rgba(255, 178, 174, .7); color: rgba(36, 19, 103, .7); }

.presentations__panel {
  position: relative;
  border-radius: 0 0 calc(50 * var(--s)) calc(50 * var(--s));
  background: #fcb2af;
  overflow: hidden;
  color: var(--navy);
}
.presentations__panel img { width: 100%; }
.presentations__caption {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(44 * var(--s));
  font-family: var(--font-display);
  font-stretch: normal;
  font-size: calc(48 * var(--s));
  letter-spacing: -0.02em;
  text-align: center;
}

.pyr-info__text {
  width: calc(577 * var(--s));
  padding-top: calc(13 * var(--s));
  text-align: right;
}

.pyr-info .split-title {
  font-size: calc(73 * var(--s));
  line-height: .95;
  text-align: right;
  color: var(--pink-text);
}
.pyr-info .split-title em { color: var(--salmon); }

.pyr-info__lead {
  margin-top: calc(40 * var(--s));
  font-size: calc(32 * var(--s));
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pyr-info__usage { margin-top: calc(137 * var(--s)); }
.pyr-info__usage .split-title { font-size: calc(73 * var(--s)); }
.pyr-info__usage em { color: var(--salmon); }

.dosage { margin-top: calc(26 * var(--s)); font-size: calc(32 * var(--s)); line-height: 1.2; }
.dosage dt { color: var(--salmon); font-stretch: normal; font-weight: 700; }
.dosage dd { margin: 0; }
.dosage dd + dt { margin-top: calc(38 * var(--s)); }

.star {
  position: absolute;
  pointer-events: none;
}
.pyr-info .star--small { left: calc(852 * var(--s)); top: calc(410 * var(--s)); width: calc(106 * var(--s)); }
.pyr-info .star--big { left: calc(-74 * var(--s)); top: calc(920 * var(--s)); width: calc(194 * var(--s)); }

.cta-row {
  display: flex;
  justify-content: center;
  padding: calc(105 * var(--s)) 0 calc(208 * var(--s));
}
.cta-row .btn--solid { background: var(--red-coral); }
.cta-row .btn--solid:hover { background: var(--coral); }

.faq--pyridium {
  padding-bottom: calc(80 * var(--s));
  background: linear-gradient(180deg, #314b96 0%, #1a64ae 100%);
  --faq-a: var(--coral-2);
  --faq-b: var(--red-coral);
}
.faq--pyridium .faq__title span { color: var(--salmon); }
.faq--pyridium .faq__title em { color: var(--peach); }

.closing {
  width: calc(770 * var(--s));
  margin: calc(131 * var(--s)) auto 0;
}
.closing img { width: 100%; }

.faq--pyridium .faq__legal { margin-top: calc(90 * var(--s)); }

/* ============================================================== PREVENT */

.prev-hero {
  position: relative;
  height: calc(1314 * var(--s));
}
.prev-hero > * { position: absolute; }

.prev-hero > :not(.prev-hero__visual) { z-index: 1; }

.prev-hero .pills { left: calc(127 * var(--s)); top: calc(178 * var(--s)); gap: calc(22 * var(--s)); }
.prev-hero .pills img { height: calc(59 * var(--s)); width: auto; }
.prev-hero__title { left: calc(125 * var(--s)); top: calc(370 * var(--s)); width: calc(790 * var(--s)); }
.prev-hero__subtitle {
  left: calc(126 * var(--s));
  top: calc(899 * var(--s));
  color: var(--pink-soft);
  font-family: var(--font-display);
  font-stretch: normal;
  font-size: calc(66 * var(--s));
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.prev-hero__visual { left: calc(968 * var(--s)); top: 0; width: calc(952 * var(--s)); max-width: none; }

.prev-about {
  padding: calc(156 * var(--s)) 0 calc(100 * var(--s));
  background: linear-gradient(180deg, #503680 0%, #734a90 100%);
}

.prev-about .split-title {
  color: var(--prev-pink);
  font-size: calc(79 * var(--s));
}
.prev-about .split-title em { color: var(--prev-red); }

.prev-about__lead {
  width: calc(1400 * var(--s));
  margin: calc(56 * var(--s)) auto 0;
  font-size: calc(41 * var(--s));
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
}
.prev-about__lead strong { color: var(--prev-blue); font-stretch: normal; }

.actives {
  display: grid;
  grid-template-columns: calc(438 * var(--s)) calc(93 * var(--s)) calc(438 * var(--s)) calc(93 * var(--s)) calc(438 * var(--s));
  justify-content: center;
  margin-top: calc(110 * var(--s));
  padding: 0;
  list-style: none;
}

.actives__plus {
  display: grid;
  place-items: center;
  color: var(--pink-soft);
  font-stretch: normal;
  font-weight: 700;
  font-size: calc(81 * var(--s));
  line-height: 1;
}

.active {
  display: flex;
  flex-direction: column;
  min-height: calc(332 * var(--s));
  border-radius: calc(36 * var(--s));
  overflow: hidden;
  background: var(--active-body);
  color: #120a33;
  text-align: center;
}
.active--cranberry { --active-head: #ff66bc; --active-body: #faadd8; }
.active--zinco { --active-head: #45b6ff; --active-body: #c7bfee; }
.active--licopeno { --active-head: #ef0027; --active-body: #fa99cd; }

.active__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--s));
  height: calc(81 * var(--s));
  background: var(--active-head);
  color: #fff;
  font-stretch: normal;
  font-weight: 700;
  font-size: calc(37 * var(--s));
  letter-spacing: .01em;
}
.active__head img { height: calc(54 * var(--s)); width: auto; }

.active__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: calc(22 * var(--s)) calc(30 * var(--s)) calc(28 * var(--s));
  font-size: calc(34 * var(--s));
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.active__body strong { font-stretch: normal; }
.active__dose { margin-top: calc(4 * var(--s)); }
.active--cranberry .active__dose { font-size: calc(27 * var(--s)); }
.active__ref {
  margin-top: auto;
  padding-top: calc(20 * var(--s));
  color: #271969;
  font-size: max(10px, calc(17 * var(--s)));
  letter-spacing: -0.01em;
  line-height: 1.18;
}

.prev-pack {
  position: relative;
  display: grid;
  grid-template-columns: 1fr calc(823 * var(--s)) 1fr;
  margin-top: calc(30 * var(--s));
}
.prev-pack__image { grid-column: 2; width: calc(1083 * var(--s)); max-width: none; margin-left: calc(-156 * var(--s)); }

.prev-pack__side { padding-top: calc(320 * var(--s)); }
.prev-pack__side--left { padding-left: calc(207 * var(--s)); }
.prev-pack__side--right { padding-right: calc(214 * var(--s)); text-align: right; }

.prev-pack__heading {
  color: var(--prev-pink);
  font-family: var(--font-display);
  font-stretch: normal;
  font-style: italic;
  font-weight: 600;
  font-size: calc(58 * var(--s));
  letter-spacing: -0.02em;
  line-height: 1;
}

.prev-pack__list {
  margin-top: calc(36 * var(--s));
  padding: 0;
  list-style: none;
  font-size: calc(27 * var(--s));
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.prev-pack__list li + li { margin-top: calc(40 * var(--s)); }
.prev-pack__list .serif { font-family: var(--font-display); font-stretch: normal; }

.prev-pack .split-title {
  font-size: calc(86 * var(--s));
  line-height: .93;
  text-align: right;
  color: var(--prev-blue);
}
.prev-pack .split-title em { display: block; color: var(--prev-red); }

.prev-pack__usage {
  margin-top: calc(40 * var(--s));
  padding: 0;
  list-style: none;
  color: var(--prev-pink);
  font-stretch: normal;
  font-weight: 700;
  font-size: calc(37 * var(--s));
  line-height: 1.62;
}

.prev-pack__caption {
  grid-column: 1 / -1;
  margin-top: calc(-95 * var(--s));
  color: var(--prev-pink);
  font-size: calc(35 * var(--s));
  text-align: center;
}

.prev-about .cta-row { padding: calc(83 * var(--s)) 0 0; }
.prev-about .cta-row .btn--solid { background: var(--prev-pink); }
.prev-about .cta-row .btn--solid:hover { background: #ff9bd0; }

.faq--prevent {
  padding-top: calc(159 * var(--s));
  background: linear-gradient(180deg, #542f7c 0%, #793e89 100%);
  --faq-a: var(--prev-pink);
  --faq-b: var(--prev-pink-2);
}
.faq--prevent .faq__title span { color: var(--prev-pink); }
.faq--prevent .faq__title em { color: var(--prev-red); }
.faq--prevent .faq__legal { color: #f6d3ec; }

/* ================================================================== 404 */

.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(24 * var(--s));
  min-height: calc(100vh - var(--header-h));
  padding: 48px 20px;
  background: linear-gradient(180deg, var(--navy) 0%, #2f5fa9 100%);
  text-align: center;
}
.notfound__star { width: max(40px, calc(77 * var(--s))); }
.notfound__code {
  color: var(--coral);
  font-family: var(--font-display);
  font-stretch: normal;
  font-weight: 700;
  font-size: max(96px, calc(260 * var(--s)));
  letter-spacing: -0.06em;
  line-height: .9;
}
.notfound__title {
  color: var(--blush);
  font-family: var(--font-display);
  font-stretch: normal;
  font-style: italic;
  font-weight: 600;
  font-size: max(34px, calc(80 * var(--s)));
  letter-spacing: -0.02em;
  line-height: 1;
}
.notfound__title em { color: var(--peach); font-weight: 800; }
.notfound__text { font-size: max(16px, calc(32 * var(--s))); }
.notfound .btn { margin-top: calc(20 * var(--s)); }

/* ============================================================ animações */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

.float { animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-14 * var(--s))); }
}

.spin-slow { animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================== MOBILE */

@media (max-width: 1023px) {
  body { font-size: 16px; }

  /* home: carrossel — texto em cima, produto ancorado embaixo à direita */
  .home-hero { padding: 16px 16px 0; }
  .carousel { height: min(140vw, 600px); border-radius: 28px; }
  .slide__content { left: 0; right: 0; top: 0; transform: none; padding: 28px 24px 0; width: auto !important; }
  .slide .btn { margin-top: 16px; min-height: 44px; font-size: 14px; }
  .slide--pyridium .slide__lettering { width: min(78%, 340px); }
  .slide--pyridium .claim { margin-top: 12px; font-size: 22px; text-wrap: balance; }
  .slide--pyridium .slide__media { right: -6%; top: auto; bottom: -26%; width: min(92%, 400px); }
  .slide--prevent .pills { gap: 6px; }
  .slide--prevent .pills img { height: 20px; }
  .slide--prevent .slide__title { width: min(58%, 260px); margin-top: 16px; }
  .slide--prevent .slide__subtitle { margin-top: 10px; font-size: 18px; }
  .slide--prevent .slide__media { right: -8%; top: auto; bottom: -4%; width: min(68%, 330px); }
  .slide--saude .slide__content { top: 50%; transform: translateY(-50%); padding-top: 0; }
  .slide__kicker { font-size: 26px; }
  .slide__headline { font-size: 52px; }

  /* controles numa pílula escura, legível sobre qualquer slide */
  .carousel__controls {
    left: 16px;
    bottom: 16px;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(24, 12, 77, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform: none;
  }
  .carousel__dots { gap: 8px; }
  .carousel__dot { background: rgba(255, 255, 255, .4); }
  .carousel__dot[aria-selected="true"] { background: #fff; }
  .carousel__pause { margin-left: 0; color: #fff; }
  .carousel__arrow { display: none; }

  /* home: 50 anos — logo em cima, lettering e texto lado a lado */
  .brand50 {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 20px 18px;
    padding: 48px 20px 0;
  }
  .brand50__logo { grid-column: 1 / -1; justify-self: center; width: 170px; }
  .brand50__lettering { width: 140px; margin: 0; }
  .brand50__text { width: auto; margin: 0; font-size: 17px; }

  /* home: produtos */
  .products { padding: 64px 20px 64px; }
  .products__heading { width: 100%; padding-bottom: 32px; }
  .products__heading::before, .products__heading::after { display: none; }
  .products__title { width: auto; padding: 0 12px; font-size: 22px; }
  .products__grid { grid-template-columns: 1fr; margin: 0; }
  .products__journey { flex-direction: row; gap: 16px; padding: 36px 0; }
  .products__journey img:nth-child(1) { width: 28px; }
  .products__journey img:nth-child(2) { width: 14px; transform: rotate(-90deg); }
  .products__journey img:nth-child(3) { width: 16px; }
  .product__title { font-size: 30px; }
  .product__subtitle { margin-top: 10px; font-size: 18px; }
  .product__card { width: 100%; max-width: 480px; margin-top: 24px; border-radius: 28px; }
  .product__actions { max-width: 480px; gap: 12px; margin-top: 20px; }
  .product__actions .btn { padding: 0 .5em; font-size: 14px; white-space: nowrap; }

  /* home: infecção urinária */
  .uti { padding: 56px 16px 64px; }
  .uti__title { width: 100%; max-width: 480px; }
  .tabs { width: 100%; margin-top: 28px; }
  .tabs__tab { height: 52px; padding: 0 .2em; border-radius: 20px 20px 0 0; font-size: 15px; white-space: nowrap; }
  .tabs__panel { padding: 28px 20px 24px; border-radius: 0 0 24px 24px; font-size: 15px; font-weight: 600; line-height: 1.4; }
  .ref { padding: 0; margin-top: 20px !important; }

  /* FAQ */
  .faq { padding: 56px 16px 64px; }
  .faq__title { font-size: 40px; }
  .faq__list { width: 100%; margin-top: 28px; }
  .faq__item { border-radius: 26px; }
  .faq__item.is-open { border-radius: 26px; }
  .faq__item + .faq__item { margin-top: 0; }
  .faq__trigger { padding: 12px 20px; }
  .faq__answer-inner { padding: 4px 20px 24px; }
  .faq__answer-inner .legal { margin-top: 16px; }
  .faq__legal { width: 100%; margin-top: 32px; }

  /* pyridium: hero */
  .pyr-hero { display: flex; flex-direction: column; height: auto; padding: 28px 20px 0; }
  .pyr-hero > * { position: relative; left: auto; top: auto; }
  .pyr-hero__title { width: 100%; max-width: 420px; align-self: center; }
  .pyr-hero__claim { align-self: center; margin: 56px 0 0 64px; font-size: 32px; }
  .pyr-hero__alvo { left: -66px; top: -36px; width: 72px; }
  .pyr-hero__visual { width: 78%; max-width: 420px; height: auto; aspect-ratio: 827 / 917; margin: 56px 0 0 4%; border-radius: 28px; }

  /* pyridium: benefícios */
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 64px 16px 0; }
  .benefit { height: auto; min-height: 150px; padding: 22px 12px 18px; border-radius: 22px; font-size: 15px; }
  .benefit:last-child { grid-column: 1 / -1; }
  .benefit__icon { height: 52px; margin-bottom: 12px; }
  .benefit:nth-child(1) .benefit__icon img { width: 110px; }
  .benefit:nth-child(2) .benefit__icon img { width: 52px; }
  .benefit:nth-child(3) .benefit__icon img { width: 76px; }
  .benefit:nth-child(4) .benefit__icon img { width: 48px; }
  .benefit:nth-child(5) .benefit__icon img { width: 72px; }
  .benefit p { padding-bottom: 0; }

  /* pyridium: produto */
  .pyr-info { flex-direction: column; width: 100%; margin-top: 56px; padding: 0 16px; }
  .presentations { width: 100%; max-width: 480px; margin: 0 auto; }
  .presentations .tabs__tab { height: 50px; border-radius: 20px 20px 0 0; }
  .presentations__panel { border-radius: 0 0 26px 26px; }
  .presentations__caption { font-size: 22px; bottom: 18px; }
  .pyr-info__text { width: 100%; padding-top: 40px; text-align: left; }
  .pyr-info .split-title { font-size: 36px; text-align: left; }
  .pyr-info__lead, .dosage { font-size: 17px; }
  .pyr-info__lead { margin-top: 16px; }
  .pyr-info__usage { margin-top: 40px; }
  .pyr-info__usage .split-title { font-size: 36px; }
  .dosage { margin-top: 12px; }
  .dosage dd + dt { margin-top: 14px; }
  .pyr-info .star { display: none; }
  .cta-row { padding: 40px 16px 64px; }
  .closing { width: 100%; max-width: 420px; margin-top: 48px; }

  /* prevent: hero */
  .prev-hero { display: flex; flex-direction: column; height: auto; padding: 32px 20px 0; }
  .prev-hero > * { position: relative; left: auto; top: auto; }
  .prev-hero .pills { left: auto; top: auto; flex-wrap: nowrap; gap: 6px; }
  .prev-hero .pills img { height: min(24px, 6.2vw); }
  .prev-hero__title { width: 100%; max-width: 420px; margin-top: 24px; }
  .prev-hero__subtitle { margin-top: 16px; font-size: 28px; }
  .prev-hero__visual { width: calc(100% + 40px); max-width: 560px; margin: 8px -20px 0 auto; }

  /* prevent: para o que serve */
  .prev-about { padding: 56px 16px 64px; }
  .prev-about .split-title { font-size: 38px; }
  .prev-about__lead { width: 100%; margin-top: 18px; font-size: 18px; }
  .actives { grid-template-columns: minmax(0, 360px); margin-top: 32px; }
  .actives__plus { height: 44px; font-size: 36px; }
  .active { min-height: 0; border-radius: 22px; }
  .active__head { height: 54px; gap: 12px; font-size: 20px; }
  .active__head img { height: 34px; }
  .active__body { padding: 16px 20px 18px; font-size: 18px; }
  .active--cranberry .active__dose { font-size: 16px; }
  .active__ref { font-size: 11px; }

  .prev-pack { grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 40px; }
  .prev-pack__image { grid-column: 1 / -1; grid-row: 1; width: 120%; max-width: 560px; margin: 0 auto 0 -10%; justify-self: center; }
  .prev-pack__caption { grid-column: 1 / -1; margin-top: -30px; font-size: 17px; }
  .prev-pack__side { grid-row: 3; padding: 32px 0 0; }
  .prev-pack__side--left { padding-left: 0; }
  .prev-pack__side--right { padding-right: 0; }
  .prev-pack__heading { font-size: 28px; }
  .prev-pack__list { margin-top: 12px; font-size: 15px; }
  .prev-pack__list li + li { margin-top: 12px; }
  .prev-pack .split-title { font-size: 34px; }
  .prev-pack__usage { margin-top: 10px; font-size: 16px; }
  .prev-about .cta-row { padding-top: 40px; }

  .faq--prevent { padding-top: 56px; }
}

@media (max-width: 1023px) and (min-width: 640px) {
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .benefit:last-child { grid-column: auto; }
}