/* ============================================================================
   Purchase Rewards, purchaserewards.co

   Direction: warm editorial. The ground, the navy display type, the electric
   blue accent and the short blue rule above the wordmark all come straight out
   of the supplied brand creative, so the site extends artwork that already
   exists rather than inventing a second visual language for the same brand.

   Structure is a hairline rule system, not boxes. Content sits on a left-hand
   axis with the mark bleeding off the right, which keeps the page quiet while
   still having a composition.

   Two-tier blue, forced by contrast maths against the cream ground:
     #1570f4  4.07:1  large display text and non-text graphics only
     #0f58c9  5.81:1  inline links and anything at body size
   Navy #0f2050 lands at 14.11:1 and carries the reading.
   ========================================================================= */

:root {
  --paper: #f6f3ec;
  --paper-lift: #fbf9f4;
  --navy: #0f2050;
  --navy-soft: #3a4668;
  --navy-mute: #4d5875;
  --blue: #1570f4;
  --blue-ink: #0f58c9;
  --rule: rgba(15, 32, 80, 0.14);
  --rule-firm: rgba(15, 32, 80, 0.24);

  --display: "Cabinet Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 68px);
  --measure: 34rem;
  --shell: 1180px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
}

/* Paper grain. Inline SVG turbulence, so no network request and nothing to
   block under CSP. Sits above the ground and below everything else. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

body > * {
  position: relative;
  z-index: 1;
}

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

a {
  color: var(--blue-ink);
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  border-bottom: 1px solid rgba(15, 88, 201, 0.32);
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
a:hover {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
a:focus-visible {
  outline: 2px solid var(--blue-ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Shared shell */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* The rule motif, lifted from the creative: a short blue bar as a section mark */
.rule {
  display: block;
  width: 54px;
  height: 4px;
  background: var(--blue);
  border-radius: 2px;
}

.eyebrow {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-mute);
  margin: 0;
}

/* ------------------------------------------------------------------ Header */
.site-head {
  border-bottom: 1px solid var(--rule);
}
.site-head__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border: 0;
  color: var(--navy);
}
.brand:hover {
  color: var(--navy);
}
.brand__mark {
  height: 36px;
  width: auto;
}
.brand__word {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.site-nav {
  display: flex;
  gap: 6px 26px;
  flex-wrap: wrap;
}
.site-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy-soft);
  border: 0;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: var(--blue);
}

/* -------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.hero__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 11vw, 132px) var(--gutter) clamp(52px, 9vw, 104px);
  position: relative;
}

/* The mark as a specimen, cropped by the section edge. Sits on .hero rather
   than the max-width inner wrapper, so the crop holds at any viewport instead
   of drifting inward as the shell stops growing. Decorative, so it is hidden
   from assistive tech and dropped on narrow screens where it would crowd the
   type instead of framing it. */
.hero__specimen {
  position: absolute;
  right: -64px;
  top: 50%;
  transform: translateY(-50%);
  height: min(96%, 460px);
  width: auto;
  opacity: 0.13;
  pointer-events: none;
}

.hero .rule {
  margin-bottom: 26px;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 7.4vw, 78px);
  line-height: 0.99;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  max-width: 22ch;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--blue);
  display: block;
}

.hero__deck {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--navy-soft);
  max-width: var(--measure);
  margin: 0;
}

/* ---------------------------------------------------------------- Sections */
.band {
  border-bottom: 1px solid var(--rule);
}
.band__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(46px, 7vw, 88px) var(--gutter);
}

/* Two columns on wide screens: a sticky label rail and the content.
   Asymmetric on purpose, so the page reads as composed rather than stacked. */
.split {
  display: grid;
  gap: 14px clamp(24px, 4.5vw, 64px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
  .split__label {
    position: sticky;
    top: 34px;
  }
}

.band h2 {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 33px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
  text-wrap: balance;
}

.band p {
  color: var(--navy-soft);
  margin: 0 0 16px;
  max-width: var(--measure);
}
.band p:last-child {
  margin-bottom: 0;
}

/* Numbered editorial list. Deliberately not a card grid: hairline separators
   and a tabular index instead of boxes and shadows. */
.entries {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.entries > li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 4px 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.entries__num {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  padding-top: 2px;
}
.entries h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--navy);
}
.entries p {
  margin: 0;
  color: var(--navy-soft);
  max-width: 46ch;
}

/* Contact rows: label rail plus address, same hairline logic */
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.rows > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 620px) {
  .rows > li {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: baseline;
  }
}
.rows__who {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-mute);
}
.rows__what {
  margin: 0;
  color: var(--navy-soft);
}

/* ------------------------------------------------------------------ Footer */
.site-foot {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 56px) var(--gutter) clamp(46px, 7vw, 76px);
}
.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-bottom: 22px;
}
.site-foot__links a {
  font-size: 15px;
  font-weight: 500;
}
.site-foot__entity,
.site-foot__fine {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--navy-mute);
  max-width: 46rem;
}
.site-foot__fine {
  margin-top: 8px;
}

/* ------------------------------------------------------- Legal documents */
.doc {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) var(--gutter) clamp(56px, 9vw, 104px);
}
.doc > .rule {
  margin-bottom: 24px;
}
.doc h1 {
  font-family: var(--display);
  font-size: clamp(31px, 5vw, 50px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.03;
  margin: 0 0 14px;
}
.doc__meta {
  color: var(--navy-mute);
  font-size: 14.5px;
  margin: 0 0 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule-firm);
  max-width: 40rem;
}
.doc h2 {
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 18px;
}
.doc h2:first-of-type {
  margin-top: 8px;
}
.doc h3 {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 26px 0 6px;
  color: var(--navy);
}
.doc p,
.doc li {
  color: #22304d;
  font-size: 16.5px;
  line-height: 1.72;
  /* The privacy notice quotes bare opt-out URLs up to 47 characters
     (networkadvertising.org, tools.google.com). Unbroken they push the line box
     past a 320px viewport, so let long tokens break rather than the page. */
  overflow-wrap: anywhere;
}
.doc p {
  margin: 0 0 15px;
}
.doc ul {
  margin: 0 0 15px;
  padding-left: 20px;
}
.doc li {
  margin-bottom: 6px;
}
.doc__addr {
  margin-top: 32px;
  padding: 22px 24px;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--blue);
  font-style: normal;
  font-size: 15.5px;
  line-height: 1.7;
}

/* ------------------------------------------------------------------ Motion */
/* One orchestrated entrance rather than scattered micro-interactions. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: none;
  }
}
/* Separate from `rise` on purpose. `rise` resolves to opacity 1 and
   transform: none, and with fill-mode both that overwrote the specimen's
   settled opacity and its translateY(-50%) centring. */
@keyframes rise-specimen {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(18px);
  }
  to {
    opacity: 0.13;
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .rule {
    transform-origin: left center;
    animation: draw 520ms var(--ease) both;
  }
  .hero h1 {
    animation: rise 620ms var(--ease) 90ms both;
  }
  .hero__deck {
    animation: rise 620ms var(--ease) 190ms both;
  }
  .hero__specimen {
    animation: rise-specimen 900ms var(--ease) 260ms both;
  }
}

@media (max-width: 899px) {
  .hero__specimen {
    display: none;
  }
}