

:root {
  /* Project colors */
  --color-dark: #265153;
  --color-white: #fff;
  --ocean-light: #bfeaec;
  --ocean-dark: #1a7073;
  --sunshine-light: #fff5d5;
  --sunshine-dark: #d1b144;
  --steel-blue-dark: #293949;
  --color-yellow-2: #feebaa;
  --color-yellow: #fdd756;
  --color-green: #0f8085;
  --color-green-2: #08818c;
  --color-green-3: #00acb3;
  --color-green-4: #80d5d9;
  --color-light: #4a9fa2;
  --color-black-2: #262626;
  --color-black: #000;
  --color-grey-6: var(--gray-50);
  --color-grey-4: var(--gray-05);
  --color-grey-3: #383838;
  --color-grey-2: #415364;
  --color-grey-1: var(--gray-60);
  --color-red: #fd495c;
  --color-pfizer-blue: var(--pfizer-blue);

  /* color tokens */
  --pfizer-blue: #0000c9;
  --pfizer-sky: #3d96f7;
  --pfizer-sky-light: #cfe8ff;
  --pfizer-light: #ecf5fe;
  --error-red: #e90649;
  --gray-05: #f5f5f5;
  --gray-10: #e5e5e5;
  --gray-20: #b9bcbe;
  --gray-50: #707780;
  --gray-60: #5b5958;
  --gray-70: #404040;
  --brand-primary: var(--color-yellow);
  --brand-secondary: var(--color-yellow-2);
  --brand-tertiary: var(--pfizer-sky-light);
  --dark-color: var(--color-dark);
  --emphasis-color: var(--pfizer-sky);
  --accent-color: var(--pfizer-sky-light);
  --light-color: var(--color-light);

  /* color variables */
  --border-color: var(--gray-60);
  --background-color: white;
  --text-color: black;
  --heading-color: inherit;
  --heading-emphasis-color: var(--emphasis-color);
  --eyebrow-color: inherit;
  --footnote-color: var(--gray-60);
  --link-color: var(--brand-primary);
  --button-border-color: var(--link-color);
  --button-background-color: transparent;
  --button-text-color: var(--button-border-color);

  /* gradients */
  --ocean-steel-blue-gradient: linear-gradient(180deg, #415364 0%, #00acb3 100%);
  --gradient-dark-to-light: linear-gradient(180deg, #293949 28.59%, #1a7073 57.23%, #00acb3 100%);

  /* border widths */
  --border-10: 1px;
  --border-20: 2px;
  --border-40: 4px;

  /* border-radius */
  --border-radius: 1rem;

  /* spacing units */
  --spacing-10: 0.25rem;
  --spacing-20: 0.5rem;
  --spacing-30: 1rem;
  --spacing-40: 1.5rem;
  --spacing-45: 1.75rem;
  --spacing-50: 2rem;
  --spacing-55: 3.5rem;
  --spacing-60: 4rem;
  --spacing-70: 5rem;
  --spacing-80: 6rem;
  --spacing-90: 7rem;

  /* spacing variables */
  --spacing-vertical: var(--spacing-55);
  --spacing-horizontal: var(--spacing-30);

  /* font faces */
  --body-font-family: 'PfizerDiatype', 'PfizerDiatype-regular', 'Arial', sans-serif;
  --small-para-font-family: 'PfizerDiatype', 'PfizerDiatype-thin', 'Arial', sans-serif;
  --medium-para-font-family: 'PfizerDiatype', 'PfizerDiatype-light', 'Arial', sans-serif;
  --large-heading-font-family: 'PfizerDiatype', 'PfizerDiatype-bold', 'Arial', sans-serif;
  --extra-large-font-family: 'PfizerDiatype', 'PfizerDiatype-heavey', 'Arial', sans-serif;
  --regular-font-familiy: 'PfizerDiatype', 'PfizerDiatype', 'Arial', sans-serif;
  

  /* body sizes */
  --body-font-size-xl: 1.25rem;
  --body-font-size-l: var(--body-font-size-xl);
  --body-font-size-m: 1rem;
  --body-font-size-s: 0.875rem;
  --body-font-size-xs: 0.75rem;

  /* heading sizes */
  --heading-font-size-3xl: 3rem; /* 48px */
  --heading-font-size-xxl: 1.875rem; /* 30px */
  --heading-font-size-xl: 1.875rem;
  --heading-font-size-l: 1.5rem;
  --heading-font-size-m: 1.25rem;
  --heading-font-size-s: var(--body-font-size-m);
  --heading-font-size-xs: var(--body-font-size-s);

  /* nav */
  --nav-height: 81px;

  /* content */
  --content-width: 1024px;
  --site-width: 100vw;
}

/* tablet size */
@media (min-width: 700px) {
  :root {
    /* body sizes */
    --body-font-size-xl: 1.5rem;
    --body-font-size-l: 1.25rem;

    /* heading sizes */
    --heading-font-size-3xl: 3rem; /* 48px */
    --heading-font-size-xxl: 3rem;
    --heading-font-size-xl: 2rem;
    --heading-font-size-l: 1.875rem;
    --heading-font-size-m: 1.5rem;
    --heading-font-size-s: var(--body-font-size-l);
    --heading-font-size-xs: var(--body-font-size-m);
  }
}

/* xl tablet */
@media (min-width: 900px) {
  :root {
    /* spacing variables */
    --spacing-horizontal: var(--spacing-50);
    --spacing-vertical: var(--spacing-60);
  }
}

/* tablet with left-nav size */
@media (min-width: 1100px) {
  :root {
    /* nav */
    --nav-height: 100vh;
    --nav-width: 285px;

    /* content */
    --site-width: calc(var(--nav-width) + var(--content-width) + (2 * var(--spacing-horizontal)));
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--regular-font-familiy);
  font-size: var(--body-font-size-m);
  font-weight: normal;
  line-height: 1.3;
}

body.appear {
  display: unset;
}

body.sidekick-library.appear {
  display: block;
}

@media (min-width: 1100px) {
  body.appear {
    display: grid;
    grid-template:
      'header announce' auto
      'header main' 1fr
      'header footer' auto / var(--nav-width) 1fr;
    max-width: var(--site-width);
    min-height: 100vh;
    margin: auto;
    border-left: var(--border-10) solid var(--gray-10);
    border-right: var(--border-10) solid var(--gray-10);
  }
}

body.no-scroll {
  overflow: hidden;
  height: 100%;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  scroll-margin: calc(var(--nav-height) + var(--spacing-30));
  color: var(--heading-color);
  font-weight: bold;
  line-height: 1.1;
  word-break: break-word;
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
  color: var(--heading-emphasis-color);
  font-weight: inherit;
}

h1 u,
h2 u,
h3 u,
h4 u,
h5 u,
h6 u {
  display: inline-block;
  position: relative;
  margin-top: var(--spacing-30);
  font-family: var(--heading-font-family);
  text-decoration: none;
}

h1 u::before,
h2 u::before,
h3 u::before,
h4 u::before,
h5 u::before,
h6 u::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--spacing-30));
  height: var(--border-40);
  border-left: 28px solid var(--dark-color);
  border-right: 28px solid var(--emphasis-color);
}

h1 {
  font-size: var(--heading-font-size-xxl);
  line-height: 1.05;
}

h2 {
  font-size: var(--heading-font-size-xl);
}

h3 {
  font-size: var(--heading-font-size-l);
}

h4 {
  font-size: var(--heading-font-size-m);
}

h5 {
  font-size: var(--heading-font-size-s);
}

h6 {
  font-size: var(--heading-font-size-xs);
}

p,
dl,
ol,
ul,
pre,
blockquote,
figure {
  margin: 0;
}

ol,
ul {
  padding-inline-start: 1.5rem;
}

h1 + *,
h2 + *,
h3 + *,
h4 + *,
h5 + *,
h6 + *,
* + p,
p + *,
* + ul,
ul + *,
.default-content-wrapper h1,
.default-content-wrapper h2,
.default-content-wrapper h3,
.default-content-wrapper h4,
.default-content-wrapper h5,
.default-content-wrapper h6,
.default-content-wrapper p,
.default-content-wrapper ol,
.default-content-wrapper ul {
  margin-top: var(--spacing-30);
}

.default-content-wrapper h1,
.default-content-wrapper h2,
.default-content-wrapper h3,
.default-content-wrapper h4,
.default-content-wrapper h5,
.default-content-wrapper h6,
.default-content-wrapper p,
.default-content-wrapper ol,
.default-content-wrapper ul {
  margin-bottom: var(--spacing-30);
}

.default-content-wrapper h1,
.default-content-wrapper h2,
.default-content-wrapper h3,
.default-content-wrapper h4,
.default-content-wrapper h5,
.default-content-wrapper h6 {
  font-family: var(--heading-font-family);
}

p.eyebrow {
  line-height: 1.15;
  color: var(--eyebrow-color);
}

p.eyebrow + * {
  margin-top: var(--spacing-10);
}

/* footnotes */
p.footnote {
  line-height: 1.15;
  color: var(--footnote-color);
}

p.footnote sub {
  vertical-align: unset;
}

p.footnote + p.footnote {
  margin-top: var(--spacing-10);
}

code,
samp,
pre {
  color: var(--gray-70);
  font-family: var(--fixed-font-family);
  font-size: var(--body-font-size-s);
}

code,
samp {
  padding: 0;
}

pre {
  padding: var(--spacing-horizontal);
  background-color: var(--gray-70);
  color: white;
  overflow: auto;
  white-space: pre;
}

/* form elements */
button {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: unset;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

button:disabled,
button:disabled:hover {
  opacity: 0.8;
  cursor: unset;
}

/* stylelint-disable no-descending-specificity */
.button-container {
  max-width: 100%;
}

.button-container.button-container-multi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-20) var(--spacing-horizontal);
}

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: none;
  word-break: break-word;
}

@media (max-width: 640px) {
  .button-container a:any-link {
    max-width: 100% !important;
    width: 100% !important;
  }
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--border-20);
  text-underline-offset: 2px;
}

a.button:any-link,
button.button,
form button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  border: var(--border-20) solid var(--button-border-color);
  border-radius: 100vw;
  padding: var(--spacing-20) var(--spacing-30);
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  font-family: inherit;
  font-size: 87.5%;
  font-style: normal;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: border 0.2s, padding 0.2s, background-color 0.2s, color 0.2s;
}

a.button:hover,
button.button:hover,
form button:hover {
  --button-border-color: transparent;
  --button-background-color: var(--link-color);
  --button-text-color: white;
}

a.button.primary,
button.button.primary,
form button.primary {
  --button-border-color: transparent;
  --button-background-color: var(--link-color);
  --button-text-color: white;
}

a.button.primary:hover,
button.button.primary:hover,
form button.primary:hover {
  --button-border-color: var(--link-color);
  --button-background-color: var(--background-color);
  --button-text-color: var(--button-border-color);
}

a.button.secondary,
button.button.secondary,
form button.secondary {
  /* width: max-content !important; */
  text-align: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: var(--border-20);
  text-underline-offset: var(--border-20);
}

a.button.secondary:hover,
button.button.secondary:hover,
form button.secondary:hover {
  --button-background-color: transparent;
  --button-text-color: var(--text-color);
}
/* stylelint-enable no-descending-specificity */

iframe {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--border-radius);
}

hr {
  margin: var(--spacing-vertical) 0;
  border: 0;
  border-bottom: var(--border-20) solid var(--dark-color);
}

img {
  width: auto;
  max-width: 100%;
  height: auto;
}

span.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  vertical-align: sub;
}

span.icon svg {
  width: 100%;
  height: 100%;
  margin: 0 0.6ch;
  fill: currentcolor;
}

span.icon[data-position='first'] svg {
  margin-left: 0;
}

span.icon[data-position='last'] svg {
  margin-right: 0;
}

span.icon[data-position='only'] svg {
  margin: 0;
}



main .section > .signup-wrapper,
main .section > .hero-wrapper,
main .section > .columns-wrapper,
main .section > .textbox-wrapper,
main .section > .image-wrapper,
main .section > .image-warning-wrapper {
  margin: 0;
}

main .section .heading-only,
main .section .has-footnote {
  margin-bottom: 0;
}

/* main .section + .section {
  margin-top: var(--spacing-vertical);
}
*/

main .section.card + .section.card {
  margin-top: var(--spacing-horizontal);
}

/* stylelint-disable no-descending-specificity */
main .section.heading-only + .section,
main .section.bg:not(.card) + .section.bg:not(.card),
main .section.hero-container + .section.bg:not(.card),
main .section.bg:not(.card) + .section.isi-container,
main .section .heading-only + [class*='-wrapper'],
main .section [class*='-wrapper'] + .footnote-only {
  margin-top: 0;
}

@media (min-width: 1400px) {
  .section > div {
    margin: auto;
  }
}

/* section metadata */
main .section.card {
  margin-left: var(--spacing-horizontal);
  margin-right: var(--spacing-horizontal);
  border-radius: var(--border-radius);
  padding-top: var(--spacing-horizontal);
  padding-bottom: var(--spacing-horizontal);
  background-color: var(--light-color);
}

main .section.card > [class*='-wrapper'] {
  margin-top: 0;
  margin-bottom: 0;
}

main .section.card.outline {
  border: var(--border-20) solid var(--gray-10);
  background-color: var(--background-color);
}

main .section.bg {
  overflow: auto;
}

main .section.bg.card > [class*='-wrapper'] {
  margin-top: 0;
  margin-bottom: 0;
}

main .section.light {
  background-color: var(--light-color);
}

main .section.accent {
  background-color: var(--accent-color);
}

main .section.emphasis,
main .section.dark,
main .section.gradient {
  --button-text-color: white;
  --button-border-color: white;
  color: white;
}

main .section.emphasis {
  background-color: var(--emphasis-color);
}

main .section.dark {
  background-color: var(--dark-color);
}

main .section.emphasis .default-content-wrapper h2,
main .section.emphasis .default-content-wrapper h3,
main .section.emphasis .default-content-wrapper a:any-link,
main .section.emphasis .default-content-wrapper p.footnote,
main .section.dark .default-content-wrapper h2,
main .section.dark .default-content-wrapper h3,
main .section.dark .default-content-wrapper a:any-link,
main .section.dark .default-content-wrapper p.footnote {
  color: inherit;
}

main .section.emphasis .default-content-wrapper a:any-link:not(.button),
main .section.dark .default-content-wrapper a:any-link:not(.button) {
  text-decoration: underline;
  text-decoration-thickness: var(--border-20);
  text-underline-offset: var(--border-20);
}

header {
  min-height: 130px;
  grid-area: header;
}

@media (min-width: 700px) {
  header {
    min-height: 126px;
  }
}

@media (min-width: 1100px) {
  header {
    min-height: 0;
    position: fixed;
    top: 0;
  }
}
