:root {
  --ps-care-rule: #6c8986;
  --ps-label: #5c6665;
  --ps-scrim: 12, 14, 14;
}

body.page-celebration {
  margin: 0;
  background: #fff;
  color: var(--ps-heading);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Same guard careers.css uses: the blanket anchor reset outranks .ps-btn on
   specificity, so anything that sets its own colour has to be excluded from
   it — buttons, account paths, the skip link and the Customer Care links. */
body.page-celebration a:not(.ps-btn):not(.path):not(.skip-link):not(.care-link) {
  color: inherit;
  text-decoration: none;
}

body.page-celebration .ps-btn,
body.page-celebration .path,
body.page-celebration .skip-link {
  text-decoration: none;
}

body.page-celebration h1,
body.page-celebration h2,
body.page-celebration h3,
body.page-celebration p {
  margin-top: 0;
}

/* Scoped to main: the header logo's sizing belongs to ps-base.css. */
.page-celebration main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-celebration main {
  padding-top: var(--ps-header-height);
}

.skip-link {
  position: fixed;
  left: .75rem;
  top: -5rem;
  z-index: 1100;
  padding: .625rem .875rem;
  border-radius: .5rem;
  background: var(--ps-ink);
  color: #fff;
  font-weight: 800;
}

.skip-link:focus {
  top: .625rem;
}

/* ---------- header CTAs ---------- */

.page-celebration .ps-header-links {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .375rem;
}

.page-celebration .ps-header-links .ps-btn {
  width: 100%;
  min-height: 2.75rem;
  padding: .375rem .4375rem;
  font-size: .6875rem;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

/* ---------- hero ---------- */

.hero-photo {
  margin: .875rem .875rem 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--ps-image-radius);
  overflow: hidden;
}

.hero-photo img {
  object-position: center center;
}

.hero-copy {
  padding: 2.125rem 1.375rem 2.375rem;
}

.hero h1 {
  margin-bottom: 1rem;
  font-size: clamp(3.75rem, 7vw, 6.25rem);
  line-height: .88;
  letter-spacing: -.055em;
  font-weight: 800;
}

.hero p {
  max-width: 38.75rem;
  margin-left: 0.2em;
  color: var(--ps-body);
  font-size: 1.125rem;
  line-height: 1.5;
}

/* ---------- hero account paths ---------- */

.paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: .625rem;
  margin-top: 1.5rem;
}

.path {
  position: relative;
  min-height: 4.5rem;
  padding: .75rem 2.75rem .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 1.25rem;
  background: var(--ps-mint);
  color: var(--ps-ink);
  text-align: center;
  font-weight: 800;
}

.path.primary {
  background: var(--ps-charcoal);
  color: #fff;
}

.path > div:first-child {
  width: 100%;
}

.path small {
  display: block;
  margin-bottom: .3125rem;
  font-size: .625rem;
  line-height: 1.05;
  letter-spacing: .1em;
}

.path strong {
  display: block;
  font-size: 1.125rem;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.path .arrow {
  position: absolute;
  right: .875rem;
  min-width: 1.375rem;
  font-size: 1.5625rem;
  font-weight: 800;
}

.path:focus-visible {
  outline: var(--ps-focus-ring);
  outline-offset: var(--ps-focus-offset);
}

/* ---------- features ---------- */

.features {
  padding-block: var(--ps-section-space);
  background: #fff;
}

.features .intro {
  width: min(100% - 2.75rem, 42.5rem);
  margin: 0 auto 1.75rem;
}

.features h2 {
  margin: 0;
  font-size: clamp(2.125rem, 4vw, 3.625rem);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 800;
}

.story-grid {
  width: min(100% - 1.75rem, 42.5rem);
  margin: 0 auto;
}

.story {
  position: relative;
  margin-bottom: 1rem;
  border-radius: var(--ps-image-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 .3125rem 1.125rem rgba(0, 0, 0, .06);
}

.story-img {
  position: relative;
  height: 21.875rem;
  overflow: hidden;
}

.story-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .28), transparent 50%);
}

/* Each photo is cropped to keep its subject in frame at the card's fixed
   height; the values are the approved crops from the handoff. */
.story:nth-child(1) .story-img img {
  object-position: 50% 56%;
}

.story:nth-child(2) .story-img img {
  object-position: 50% 32%;
}

.story:nth-child(3) .story-img img {
  object-position: 50% 50%;
}

/* ---------- feature badge ---------- */

.feature-badge {
  position: relative;
  z-index: 2;
  margin-top: -4.875rem;
  margin-bottom: 1rem;
  padding: .875rem .9375rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid rgba(17, 17, 17, .06);
  border-radius: 1.0625rem;
  background: #fff;
  box-shadow: 0 .75rem 1.75rem rgba(17, 17, 17, .11);
}

.badge-icon {
  flex: 0 0 3.375rem;
  width: 3.375rem;
  height: 3.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .9375rem;
  background: var(--ps-teal);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.badge-icon svg {
  width: 1.875rem;
  height: 1.875rem;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge-icon-security svg {
  width: 2.375rem;
  height: 2.375rem;
}

.badge-icon-security svg path:first-child {
  fill: rgba(255, 255, 255, .16);
  stroke-width: 2.6;
  stroke-linecap: butt;
}

.badge-icon-security svg path:nth-child(2) {
  stroke-width: 2.5;
  stroke-linecap: butt;
}

.badge-icon-security svg path:nth-child(3) {
  stroke-width: 3;
}

.badge-copy {
  display: flex;
  align-items: center;
  min-width: 0;
}

.badge-copy strong {
  display: block;
  font-size: 1.4375rem;
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 800;
  overflow-wrap: break-word;
}

/* ---------- story copy ---------- */

.story-copy {
  padding: 1.25rem 1.25rem 1.375rem;
}

.story h3 {
  margin-bottom: .625rem;
  font-size: clamp(1.625rem, 2vw, 2.125rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 800;
}

.story-copy p {
  margin: 0;
  color: var(--ps-body);
  font-size: 1.0625rem;
  line-height: 1.52;
}

/* ---------- gifting reward examples ---------- */

.reward-examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin: 1rem 0 .25rem;
}

.reward-example {
  padding: .75rem .625rem;
  border-radius: .875rem;
  background: var(--ps-mint-tint);
  text-align: center;
}

.reward-example small {
  display: block;
  margin-bottom: .3125rem;
  color: var(--ps-label);
  font-size: .8125rem;
  letter-spacing: .12em;
  font-weight: 800;
}

.reward-example strong {
  font-size: 1.125rem;
  letter-spacing: -.03em;
  color: var(--ps-heading);
}

.reward-example strong span {
  display: inline-block;
  padding: 0 .3125rem;
  color: var(--ps-teal-dark);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  transform: scaleX(1.18);
  transform-origin: center;
}

/* ---------- proof / stats ---------- */

.why {
  position: relative;
  min-height: 31.25rem;
  overflow: hidden;
  background: var(--ps-ink);
  color: #fff;
}

.why > img {
  position: absolute;
  inset: 0;
}

.why::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
          rgba(var(--ps-scrim), .90) 0,
          rgba(var(--ps-scrim), .82) 48%,
          rgba(var(--ps-scrim), .42) 78%,
          rgba(var(--ps-scrim), .25) 100%);
}

.why-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 1.375rem;
  right: 1.375rem;
  transform: translateY(-61%);
}

.why h2 {
  margin-bottom: .875rem;
  font-size: clamp(2.625rem, 3.5vw, 4rem);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 800;
  text-shadow: 0 2px .875rem rgba(0, 0, 0, .3);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.375rem 1.25rem;
  margin-top: 1.375rem;
  align-items: start;
  width: min(100%, 47vw);
}

.stat strong {
  display: block;
  margin-bottom: .4375rem;
  color: var(--ps-teal);
  font-size: clamp(1.375rem, 5.5vw, 2.125rem);
  line-height: .95;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.stat span {
  display: block;
  max-width: 11.25rem;
  font-size: .8125rem;
  line-height: 1.25;
  letter-spacing: .045em;
  text-transform: uppercase;
}

/* ---------- customer care ---------- */

.customer-care {
  padding-block: var(--ps-section-space);
  border-top: 1px solid #eceeed;
  background: #fff;
  scroll-margin-top: var(--ps-header-height);
}

.customer-care-inner {
  width: min(65rem, 100% - 2.75rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.375rem;
}

.customer-care-faq h2 {
  margin-bottom: 1.625rem;
  color: var(--ps-teal-dark);
  font-size: clamp(2.375rem, 3vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -.03em;
}

.customer-care-faq h3 {
  margin-bottom: 1.125rem;
  font-size: 1.125rem;
}

.customer-care-faq .care-link {
  display: block;
  margin-bottom: .9375rem;
  color: var(--ps-teal-dark);
  font-size: .9375rem;
  line-height: 1.45;
  text-decoration: underline;
}

.customer-care-form p {
  margin-bottom: 1.875rem;
  color: var(--ps-body);
  font-size: .9375rem;
  line-height: 1.6;
}

.customer-care-form p .care-link {
  color: var(--ps-teal-dark);
}

#mailDirect {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

#mailDirect .field {
  display: grid;
  gap: .25rem;
}

#mailDirect label {
  color: var(--ps-teal-dark);
  font-size: .8125rem;
}

#mailDirect input {
  width: 100%;
  min-height: 2.75rem;
  padding: .5625rem 0;
  border: 0;
  border-bottom: 1px solid var(--ps-care-rule);
  border-radius: 0;
  background: transparent;
  color: var(--ps-heading);
  font: inherit;
  font-size: 1rem;
}

#mailDirect input:focus-visible {
  outline: var(--ps-focus-ring);
  outline-offset: var(--ps-focus-offset);
}

#mailDirect button {
  justify-self: start;
  min-height: 2.75rem;
  margin-top: .75rem;
  padding: .75rem 1.375rem;
  border: 0;
  border-radius: .125rem;
  background: var(--ps-teal-dark);
  color: #fff;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 800;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}

#mailDirect button:focus-visible {
  outline: var(--ps-focus-ring);
  outline-offset: var(--ps-focus-offset);
}

#form-alert {
  min-height: 1rem;
  font-size: .75rem;
}

.customer-care .care-link:focus-visible {
  outline: var(--ps-focus-ring);
  outline-offset: var(--ps-focus-offset);
}

/* ---------- responsive ---------- */

@media (min-width: 24.4375rem) {
  .page-celebration .ps-header-links .ps-btn {
    font-size: .71875rem;
    padding: .375rem .3125rem;
  }
}

@media (min-width: 45rem) {
  .page-celebration .ps-header-links .ps-btn {
    min-height: 3rem;
    padding: .5rem .875rem;
    font-size: .8125rem;
  }

  .hero p {
    font-size: 1.25rem;
    line-height: 1.45;
  }

  .paths {
    gap: .875rem;
  }

  .path {
    min-height: 5.125rem;
    padding: .9375rem 3.25rem .9375rem 1.375rem;
  }

  .path small {
    margin-bottom: .4375rem;
    font-size: .6875rem;
  }

  .path strong {
    font-size: 1.3125rem;
  }

  .path .arrow {
    right: 1.125rem;
  }

  .hero-photo {
    aspect-ratio: 16 / 9;
  }

  .hero-copy {
    padding: 3rem 7vw 3.25rem;
  }

  .features .intro,
  .story-grid {
    width: min(92vw, 53.75rem);
  }

  .customer-care-faq .care-link,
  .customer-care-form p {
    font-size: 1rem;
  }
}

@media (min-width: 50rem) {
  .page-celebration .ps-header-links {
    display: flex;
    flex: 0 1 auto;
    gap: .625rem;
  }

  .page-celebration .ps-header-links .ps-btn {
    width: auto;
    padding: .6875rem 1.125rem;
    font-size: .8125rem;
    white-space: nowrap;
  }

  .story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem;
  }

  .story:last-child {
    grid-column: 1 / -1;
  }

  .story {
    margin-bottom: 0;
    min-width: 0;
  }

  .feature-badge {
    margin-top: -4.75rem;
    margin-bottom: 1.375rem;
    padding: 1rem 1.125rem;
    gap: .9375rem;
    border-radius: 1.125rem;
  }

  .badge-icon {
    flex-basis: 3.625rem;
    width: 3.625rem;
    height: 3.625rem;
    border-radius: 1rem;
  }

  .badge-icon svg {
    width: 2rem;
    height: 2rem;
  }

  .badge-copy strong {
    font-size: 1.625rem;
  }

  .story-copy {
    padding: 1.75rem 1.625rem 1.875rem;
  }

  .story-copy p {
    font-size: 1.125rem;
    line-height: 1.55;
  }

  .customer-care-inner {
    grid-template-columns: .8fr 1.2fr;
    gap: 4.375rem;
  }
}

@media (min-width: 62.5rem) {
  .hero {
    display: grid;
    grid-template-columns: minmax(26.875rem, 48%) minmax(0, 52%);
    column-gap: 1.5rem;
    align-items: stretch;
    height: clamp(36.875rem, 68vh, 43.125rem);
    padding: 1.5rem;
  }

  .hero-copy {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem clamp(3.375rem, 6vw, 7rem);
  }

  .hero-photo {
    order: 2;
    margin: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .hero h1 {
    max-width: 38.75rem;
    margin-bottom: 1.375rem;
  }

  .paths {
    width: min(100%, 43.75rem);
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: 1.75rem;
  }

  .path {
    min-height: 5.375rem;
  }

  .path strong {
    font-size: 1.375rem;
  }

  .features .intro,
  .story-grid {
    width: min(97.5rem, 100% - 6rem);
  }

  .features h2 {
    max-width: 59.375rem;
    line-height: .96;
  }

  .story-grid {
    gap: 1.5rem;
  }

  .story {
    border-radius: 1.625rem;
  }

  .story-img {
    height: clamp(18.75rem, 22vw, 24.375rem);
  }

  .story-copy {
    padding: 1.875rem 1.75rem 2.125rem;
  }

  .why {
    min-height: 0;
    height: clamp(29.375rem, 52vh, 35rem);
  }

  .why-copy {
    left: max(3.5rem, 6vw);
    right: auto;
    max-width: 43.125rem;
    transform: translateY(-58%);
  }

  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
  }

  .stat strong {
    font-size: clamp(1.75rem, 2.1vw, 2.375rem);
  }

  .customer-care-inner {
    gap: 4.75rem;
  }
}

@media (min-width: 73.75rem) {
  .story-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story:last-child {
    grid-column: auto;
  }
}

@media (min-width: 100rem) {
  .hero {
    grid-template-columns: 49fr 51fr;
  }

  .features .intro,
  .story-grid {
    width: min(102.5rem, 100% - 7.5rem);
  }
}

/* ---------- bandwidth ---------- */

/* Set by celebration.js when the Network Information API reports a metered or slow connection. */
.ps-low-bandwidth .story {
  box-shadow: none;
}

.ps-low-bandwidth .story-img::after {
  display: none;
}