/* ==========================================================================
   prelander-kit / system.css
   Systeemtokens + alle componentopmaak.
   Een component noemt nooit een merkkleur. Hij noemt var(--fg-1).
   Merkwaarden staan in brands/<merk>.css en worden ervoor ingeladen.
   Getallen komen uit de teardown van elf werkende listicles, niet uit mijn hoofd.
   ========================================================================== */

:root {
  /* Spatiëring, viervoud */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 56px;  --space-10: 70px; --space-11: 100px;

  /* Ritme */
  --item-gap:   var(--space-8);
  --section-py: var(--space-9);
  --stack-gap:  var(--space-4);

  /* Typografie. Itemkop 28 tot 35, body 16 tot 23. */
  --fs-h1:      clamp(28px, 4.6vw, 44px);
  --fs-item:    clamp(26px, 2.6vw, 32px);
  --fs-h2:      clamp(24px, 3.2vw, 34px);
  --fs-body:    17px;
  --fs-body-lg: 18px;
  --fs-lead:    18px;
  --fs-meta:    13px;
  --fs-small:   14px;

  --lh-head: 1.2;
  --lh-body: 1.6;
  --ls-head: -0.02em;

  /* Containers. Gemeten op acht referentiepagina's (19-07-2026): er zijn twee families,
     smal 768-790 en breed 1010-1176. Er is geen middenweg en geen enkele waarde
     waar ze samenkomen. 800 hoort bij de smalle familie, samen met Arctic Goddess (790)
     en Javvy rs01 (768). Beide families zijn goed, dit is een keuze en geen norm. */
  --container-read: 800px;
  --container:      1140px;

  /* Beeldverhouding van een item. Vier van de acht referenties zetten hem vierkant,
     drie liggend tussen 1.25 en 1.34, één laat de hoogte vrij. Vierkant is dus de
     grootste groep en tegelijk de veiligste: bij een smalle kolom levert 4:3 een
     stomp blokje op van 340 bij 255, waar Arctic Goddess op dezelfde breedte
     334 bij 334 staat. Dit is een variant, geen wet. Overschrijf hem per merk. */
  --item-media-ar: 1 / 1;

  /* Semantische kleuren. Wijzen naar de merklaag, nooit naar een hexcode. */
  --fg-1: var(--brand-ink);
  --fg-2: var(--brand-ink-2);
  --fg-3: var(--brand-ink-3);
  --bg-page: var(--brand-bg);
  --bg-soft: var(--brand-bg-soft);
  --bg-strong: var(--brand-bg-strong);
  --line: var(--brand-line);
  --accent: var(--brand-accent);
  --accent-2: var(--brand-accent-2);
  --on-accent: var(--brand-on-accent);
  --radius: var(--brand-radius);
}

@media (min-width: 768px) {
  :root {
    --item-gap:   var(--space-10);
    --section-py: var(--space-11);
    --fs-body:    var(--fs-body-lg);
  }
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

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

/* De pagina zelf schuift nooit horizontaal. Brede inhoud (een tabel) schuift
   in zijn eigen kader, niet door de hele pagina uit het scherm te duwen. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--brand-font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--brand-font-head);
  color: var(--fg-1);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: 0;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; }

a { color: inherit; }

strong { color: var(--fg-1); font-weight: 700; }

.pf-container      { width: 100%; max-width: var(--container);      margin: 0 auto; padding: 0 var(--space-5); }
.pf-container-read { width: 100%; max-width: var(--container-read); margin: 0 auto; padding: 0 var(--space-5); }

.pf-icon { width: 1em; height: 1em; flex: 0 0 auto; fill: currentColor; }

/* Leesbaar voor schermlezers, onzichtbaar voor de rest */
.pf-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Kale eigen voet + kop. Geen winkelnavigatie. De uitgangen zijn dicht.
   -------------------------------------------------------------------------- */

.pf-topbar {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-page);
}
.pf-topbar__inner { display: flex; align-items: center; justify-content: center; }
.pf-topbar__logo  { height: 26px; width: auto; display: block; }

.pf-footer {
  margin-top: var(--space-9);
  padding: var(--space-8) 0;
  background: var(--bg-strong);
  color: #fff;
}
.pf-footer__logo  { height: 24px; width: auto; display: block; margin: 0 auto var(--space-5); opacity: .9; }
.pf-footer__text  { font-size: var(--fs-small); line-height: 1.6; text-align: center;
                    color: rgba(255,255,255,.62); margin: 0 auto; max-width: 640px; }
.pf-footer__text + .pf-footer__text { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Promobalk
   -------------------------------------------------------------------------- */

.pf-promo {
  background: var(--accent);
  color: var(--on-accent);
  text-align: center;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .01em;
}
.pf-promo p { margin: 0; color: inherit; }

/* --------------------------------------------------------------------------
   Knop. Er staan er twee of drie op een hele listicle, en nooit tussen de items.
   -------------------------------------------------------------------------- */

.pf-cta { margin: var(--space-6) 0 0; }

.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--brand-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background .15s ease;
}
.pf-btn:hover  { background: var(--accent-2); }
.pf-btn:active { transform: translateY(1px); }

.pf-btn__arrow { width: 16px; height: 16px; fill: currentColor; }

.pf-btn__micro {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-small);
  color: var(--fg-3);
  text-align: center;
}

@media (min-width: 768px) {
  .pf-btn { width: auto; min-width: 320px; }
  .pf-cta--offer, .pf-cta--close { text-align: center; }
}

/* --------------------------------------------------------------------------
   Sterrenbalk
   -------------------------------------------------------------------------- */

.pf-stars { display: inline-flex; align-items: center; gap: var(--space-2); }
.pf-stars__icons { display: inline-flex; gap: 1px; color: var(--brand-star); font-size: 15px; }
.pf-stars__text  { font-size: var(--fs-small); color: var(--fg-3); }

/* --------------------------------------------------------------------------
   Kop
   -------------------------------------------------------------------------- */

.pf-header { padding: var(--space-8) 0 0; }
.pf-header__title { font-size: var(--fs-h1); font-weight: 800; }

/* Een woord tussen sterretjes wordt een markeerstift, geen gekleurde tekst.
   De accentkleur is een knopkleur en die haalt als tekst zelden contrast. */
.pf-header__title em {
  font-style: normal;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0 .1em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   Autoriteitslaag
   -------------------------------------------------------------------------- */

.pf-authority       { padding: var(--space-6) 0 0; }
.pf-authority__row  { display: flex; align-items: center; gap: var(--space-4); }
.pf-authority__photo{ border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.pf-authority__meta { display: flex; flex-direction: column; gap: 2px; }
.pf-authority__name { font-size: var(--fs-meta); color: var(--fg-1); margin: 0; }
.pf-authority__role { font-size: var(--fs-meta); color: var(--fg-2); margin: 0;
                      text-transform: uppercase; letter-spacing: .06em; }
.pf-authority__date { font-size: var(--fs-meta); color: var(--fg-3); margin: 0; }

.pf-authority__badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent);
  margin-left: var(--space-2);
}

/* Variant: cijfers. Volume, sterren, bewijs. Geen verzonnen auteur. */
.pf-authority--numbers .pf-authority__row {
  flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pf-authority__stat { display: flex; flex-direction: column; gap: 1px; }
.pf-authority__stat-value { font-size: var(--fs-meta); color: var(--fg-1); font-weight: 700; margin: 0; }
.pf-authority__stat-label { font-size: var(--fs-meta); color: var(--fg-3); margin: 0; }
.pf-authority__spacer { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Citaatblok
   -------------------------------------------------------------------------- */

/* Een dun balkje, geen paneel. Gemeten op vier referenties: hoogte 50 tot 60,
   binnenmarge 12 tot 17, randje links 3 tot 6 pixels. De enige bron met een echt
   paneel is IM8, en dat is de enige pagina in de set die geen losse prelander is.
   Wij hadden een paneel van ruim honderd pixels hoog. */
.pf-pullquote { padding: var(--space-6) 0 0; }
.pf-pullquote__box {
  background: var(--brand-quote-bg);
  border-left: 4px solid var(--brand-quote-bar);
  border-radius: 0;
  padding: var(--space-3) var(--space-5);
}
.pf-pullquote__box p { margin: 0; color: var(--fg-1); font-size: var(--fs-body); }
.pf-pullquote__source { margin: 2px 0 0 !important;
                        font-size: var(--fs-meta) !important; color: var(--fg-3) !important; }

/* --------------------------------------------------------------------------
   Aanloop
   -------------------------------------------------------------------------- */

.pf-lead { padding: var(--space-6) 0 var(--space-8); }
.pf-lead p { font-size: var(--fs-lead); color: var(--fg-2); }
.pf-lead--box .pf-lead__inner {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: var(--space-5) var(--space-6);
}

/* --------------------------------------------------------------------------
   Vergelijkingstabel. Altijd bóven de items.
   -------------------------------------------------------------------------- */

.pf-compare { padding: 0 0 var(--space-8); }
.pf-compare__title { font-size: var(--fs-h2); font-weight: 800; margin: 0 0 var(--space-5); }

/* Het scrollkader. Op een smal scherm mag de tabel hierbinnen schuiven,
   zodat de pagina zelf blijft staan. -webkit-overflow-scrolling voor soepel schuiven op iOS. */
.pf-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }

.pf-compare__table {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}
.pf-compare__table th,
.pf-compare__table td {
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}
.pf-compare__table col.pf-compare__col-label { width: 46%; }
.pf-compare__table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
                              color: var(--fg-3); font-weight: 700; background: var(--bg-soft); }
.pf-compare__table tbody tr:last-child td { border-bottom: 0; }

.pf-compare__table th.pf-compare__row-label {
  text-align: left; color: var(--fg-2); font-weight: 500; background: none;
}

/* De eigen kolom uitgelicht. Dit is het hele punt van de tabel. */
.pf-compare__table th.is-us,
.pf-compare__table td.is-us { background: var(--brand-compare-bg); color: var(--fg-1); }
.pf-compare__table thead th.is-us { color: var(--fg-1); font-weight: 800; }

.pf-compare__yes { color: var(--brand-yes); }
.pf-compare__no  { color: var(--brand-no); }
.pf-compare__yes .pf-icon,
.pf-compare__no .pf-icon { width: 18px; height: 18px; }
.pf-compare__note { font-size: 12px; color: var(--fg-3); }

@media (min-width: 768px) {
  .pf-compare__table { font-size: var(--fs-body-lg); }
  .pf-compare__table th, .pf-compare__table td { padding: var(--space-4) var(--space-5); }
}

/* --------------------------------------------------------------------------
   Het genummerde item
   -------------------------------------------------------------------------- */

.pf-items { padding: 0; }
.pf-item  { padding: 0 0 var(--item-gap); }

/* Mobiel: kop, beeld, body. Zo is de kop het eerste wat je leest. */
.pf-item__grid  { display: grid; gap: var(--space-5); }
.pf-item__title { order: 1; font-size: var(--fs-item); font-weight: 700; margin: 0; }
.pf-item__media { order: 2; margin: 0; }
.pf-item__copy  { order: 3; }

/* Vaste beeldverhouding. Aangeleverde creatives hebben nooit allemaal hetzelfde formaat,
   en zonder dit verspringt de pagina tijdens het laden precies waar de lezer leest. */
.pf-item__media img { display: block; width: 100%; height: auto;
                      aspect-ratio: var(--item-media-ar); object-fit: cover;
                      border-radius: var(--radius); background: var(--bg-soft); }
.pf-item__body      { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }

.pf-chips { list-style: none; margin: var(--space-4) 0 0; padding: 0;
            display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pf-chip  { display: inline-flex; align-items: center; gap: var(--space-2);
            font-size: var(--fs-small); color: var(--fg-1);
            background: var(--bg-soft); border: 1px solid var(--line);
            border-radius: 999px; padding: 5px var(--space-3); }
.pf-chip .pf-icon { color: var(--brand-yes); width: 14px; height: 14px; }

@media (min-width: 768px) {
  /* Desktop: beeld links, kop en body rechts. Beeld spant beide rijen. */
  .pf-item__grid  { grid-template-columns: 340px 1fr; column-gap: var(--space-9);
                    row-gap: var(--space-4); align-items: center; }
  .pf-item__media { grid-area: 1 / 1 / 3 / 2; }
  .pf-item__title { grid-area: 1 / 2; align-self: end; }
  .pf-item__copy  { grid-area: 2 / 2; align-self: start; }

  .pf-item--right .pf-item__media { grid-area: 1 / 2 / 3 / 3; }
  .pf-item--right .pf-item__title { grid-area: 1 / 1; }
  .pf-item--right .pf-item__copy  { grid-area: 2 / 1; }
  .pf-item--right .pf-item__grid  { grid-template-columns: 1fr 340px; }
}

/* --------------------------------------------------------------------------
   Onderbreker
   -------------------------------------------------------------------------- */

.pf-interrupter {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-7) 0;
  margin: 0 0 var(--item-gap);
}
.pf-interrupter__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.pf-interrupter__value { font-family: var(--brand-font-head); font-size: 26px; font-weight: 800;
                         color: var(--fg-1); margin: 0; line-height: 1.1; }
.pf-interrupter__label { font-size: var(--fs-small); color: var(--fg-3); margin: var(--space-1) 0 0; }
.pf-interrupter__cell  { text-align: center; }

/* --------------------------------------------------------------------------
   De overgang. Het aanbod als slot van het lijstje.
   -------------------------------------------------------------------------- */

.pf-transition { padding: 0 0 var(--space-7); }
.pf-transition__title { font-size: var(--fs-item); font-weight: 700; margin: 0 0 var(--space-4); }
.pf-transition__body  { font-size: var(--fs-body); color: var(--fg-2); }

/* --------------------------------------------------------------------------
   De aanbodkaart. Een doorgeefkaart, geen winkelwagen.
   -------------------------------------------------------------------------- */

.pf-offer { padding: var(--section-py) 0; background: var(--bg-soft); border-top: 1px solid var(--line); }
.pf-offer__headline { font-size: var(--fs-h2); font-weight: 800; text-align: center;
                      margin: 0 0 var(--space-7); }

.pf-offer__card {
  background: var(--bg-page);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
}
.pf-offer__media { margin: 0; }
.pf-offer__media img { display: block; width: 100%; height: auto;
                       aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg-soft); }
.pf-offer__body  { padding: var(--space-6); }

.pf-offer__discount {
  display: inline-block;
  background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px var(--space-3); border-radius: 999px;
  margin: 0 0 var(--space-4);
}
.pf-offer__name    { font-family: var(--brand-font-head); font-size: 24px; font-weight: 800;
                     color: var(--fg-1); margin: 0 0 var(--space-2); line-height: 1.2; }
.pf-offer__benefit { font-size: var(--fs-body); color: var(--fg-2); margin: 0 0 var(--space-4); }

.pf-offer__price     { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-4); }
.pf-offer__price-now { font-family: var(--brand-font-head); font-size: 26px; font-weight: 800; color: var(--fg-1); }
.pf-offer__price-was { font-size: var(--fs-body); color: var(--fg-3); text-decoration: line-through; }

.pf-offer__points { list-style: none; margin: 0 0 var(--space-5); padding: 0;
                    display: grid; gap: var(--space-2); }
.pf-offer__points li { display: flex; align-items: flex-start; gap: var(--space-3);
                       font-size: var(--fs-body); color: var(--fg-2); }
.pf-offer__points .pf-icon { color: var(--brand-yes); margin-top: 5px; }

.pf-offer__guarantee { display: flex; align-items: center; gap: var(--space-2); justify-content: center;
                       font-size: var(--fs-small); color: var(--fg-3); margin: var(--space-5) 0 0; }

@media (min-width: 768px) {
  .pf-offer__card { grid-template-columns: 1fr 1fr; }
  .pf-offer__body { padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; }
  .pf-offer__media img { height: 100%; aspect-ratio: auto; }
}

/* --------------------------------------------------------------------------
   Urgentie. Bestaat alleen met een echte einddatum of een echt getal.
   -------------------------------------------------------------------------- */

.pf-urgency { text-align: center; margin: var(--space-4) 0 0;
              border: 1px dashed var(--line); border-radius: var(--radius);
              padding: var(--space-3) var(--space-4); }
.pf-urgency__label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
                     color: var(--fg-3); margin: 0; }
.pf-urgency__clock { font-family: var(--brand-font-head); font-size: 22px; font-weight: 800;
                     color: var(--fg-1); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.pf-urgency__stock { font-size: var(--fs-small); color: var(--fg-1); margin: 0; font-weight: 600; }

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.pf-reviews { padding: var(--section-py) 0; }
.pf-reviews__title { font-size: var(--fs-h2); font-weight: 800; text-align: center; margin: 0 0 var(--space-3); }
.pf-reviews__meta  { text-align: center; margin: 0 0 var(--space-7); }
.pf-reviews__grid  { display: grid; gap: var(--space-4); }
.pf-review {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-5); background: var(--bg-page);
}
.pf-review__stars { color: var(--brand-star); display: flex; gap: 1px; margin: 0 0 var(--space-3); font-size: 15px; }
.pf-review__text  { font-size: var(--fs-body); color: var(--fg-2); margin: 0 0 var(--space-3); }
.pf-review__name  { font-size: var(--fs-small); color: var(--fg-3); margin: 0; }

@media (min-width: 768px) {
  .pf-reviews__grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Garantie
   -------------------------------------------------------------------------- */

.pf-guarantee { padding: var(--section-py) 0; background: var(--bg-soft);
                border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pf-guarantee__box { max-width: 720px; margin: 0 auto; text-align: center; }
.pf-guarantee__icon { width: 40px; height: 40px; color: var(--accent); margin: 0 0 var(--space-4); }
.pf-guarantee__title { font-size: var(--fs-h2); font-weight: 800; margin: 0 0 var(--space-4); }
.pf-guarantee__body  { font-size: var(--fs-body); color: var(--fg-2); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.pf-faq { padding: var(--section-py) 0; }
.pf-faq__title { font-size: var(--fs-h2); font-weight: 800; text-align: center; margin: 0 0 var(--space-7); }
.pf-faq__list  { max-width: var(--container-read); margin: 0 auto; }

.pf-faq__item { border-bottom: 1px solid var(--line); }
.pf-faq__item:first-child { border-top: 1px solid var(--line); }

.pf-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: var(--space-5) 0;
  font-family: var(--brand-font-head); font-size: 17px; font-weight: 700; color: var(--fg-1);
}
.pf-faq__chev { width: 16px; height: 16px; color: var(--fg-3); transition: transform .2s ease; }
.pf-faq__q[aria-expanded="true"] .pf-faq__chev { transform: rotate(180deg); }

.pf-faq__a { display: none; padding: 0 0 var(--space-5); font-size: var(--fs-body); color: var(--fg-2); }
.pf-faq__a.is-open { display: block; }

/* --------------------------------------------------------------------------
   Zwevende knop
   -------------------------------------------------------------------------- */

.pf-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--bg-page);
  border-top: 1px solid var(--line);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform .25s ease;
  box-shadow: 0 -6px 24px rgba(0,0,0,.08);
}
.pf-sticky.is-visible { transform: translateY(0); }
.pf-sticky.is-hidden  { transform: translateY(110%); }

.pf-sticky__inner { display: flex; align-items: center; gap: var(--space-4);
                    max-width: var(--container); margin: 0 auto; }
.pf-sticky__text  { flex: 1 1 auto; min-width: 0; }
.pf-sticky__name  { font-size: var(--fs-small); font-weight: 700; color: var(--fg-1); margin: 0;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-sticky__price { font-size: 12px; color: var(--fg-3); margin: 0; }
.pf-sticky .pf-btn { width: auto; flex: 0 0 auto; padding: var(--space-3) var(--space-5); font-size: 15px; }
.pf-sticky .pf-cta { margin: 0; }
.pf-sticky .pf-btn__micro { display: none; }

@media (min-width: 1024px) {
  .pf-sticky { display: none; }
}