/* Brand palette mirrors VibzColors.kt so the site and the app stay in sync. */
:root {
  --ivory: #fff9f2;
  --porcelain: #fffcf8;
  --charcoal: #2a2a2a;
  --crimson: #7e2239;
  --ruby: #a82a2c;
  --coral: #ed573e;
  --peach: #f5b07b;
  --tawny: #e6c59d;
  --emerald: #21b36e;

  --max-width: 60rem;
  --radius: 1rem;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant_garamond_bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm_sans_regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm_sans_semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  color: var(--crimson);
  line-height: 1.1;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.875rem, 5vw, 2.5rem);
}
h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1.15em;
}

a {
  color: var(--crimson);
  text-underline-offset: 0.2em;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  /* Horizontal gutter only. The `padding` shorthand would also zero the vertical
     padding, and .wrap outranks `section`, silently killing section spacing. */
  padding-inline: 1.5rem;
}

/* Header */
.site-header {
  padding: 2rem 0 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.brand img {
  height: 2.25rem;
  width: auto;
  display: block;
}

/* Hero */
.hero {
  padding-block: 3rem 1.5rem;
  text-align: center;
}
.hero .lede {
  font-size: clamp(1.125rem, 2.5vw, 1.3125rem);
  max-width: 34rem;
  margin: 0 auto 2.5rem;
  color: #4a4a4a;
}

/* Store buttons */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--coral);
  color: var(--porcelain);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.0625rem;
  padding: 0.9375rem 1.75rem;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.store-btn:hover,
.store-btn:focus-visible {
  background: var(--ruby);
  transform: translateY(-1px);
}
.store-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  flex: none;
}

/* QR codes */
.qr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;
}
.qr {
  text-align: center;
}
.qr img {
  width: 9.5rem;
  height: 9.5rem;
  display: block;
  border: 1px solid var(--tawny);
  border-radius: var(--radius);
  padding: 0.5rem;
  background: var(--porcelain);
}
.qr figcaption {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6a6a6a;
}

/* A QR code is only useful on a device you cannot install from, so it is dead
   weight on the phone that would be scanning it. */
@media (pointer: coarse), (max-width: 34rem) {
  .qr-row {
    display: none;
  }
  .stores {
    margin-bottom: 0;
  }
}

/* Sections */
section {
  padding-block: 1.5rem;
}

/* Extra air between the last card row and the footer rule. */
main > section:last-of-type {
  padding-bottom: 4rem;
}
.steps {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps li {
  background: var(--porcelain);
  border: 1px solid var(--tawny);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.steps .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--peach);
  color: var(--crimson);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.steps p {
  margin: 0;
  font-size: 0.9375rem;
  color: #4a4a4a;
}

/* Footer */
footer {
  border-top: 1px solid var(--tawny);
  padding: 2rem 0 3rem;
  font-size: 0.9375rem;
  color: #6a6a6a;
}
footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1rem;
}
footer a {
  color: #6a6a6a;
}

/* Legal pages */
.legal {
  padding-block: 2.5rem 4.5rem;
}
.legal h2 {
  font-size: 1.5rem;
  margin-top: 2.25rem;
}
.legal ul {
  padding-left: 1.25rem;
}
.legal li {
  margin-bottom: 0.5rem;
}
.updated {
  color: #6a6a6a;
  font-size: 0.9375rem;
}