/*
 * Sipmate landing page — motion and layout on top of styles.css.
 * Only index.html loads this file. Every effect here has a static, fully
 * readable fallback: content never depends on JS or on scroll-driven CSS to
 * be visible, only to be *animated*. See docs/site.md for the full rundown.
 *
 * Animation budget: only transform, opacity, clip-path, filter and
 * background-color are animated (no layout properties). `prefers-reduced-
 * motion: reduce` is handled globally in styles.css for time-based
 * animations/transitions; every scroll-linked (`animation-timeline`) effect
 * in this file is additionally wrapped in
 * `@media (prefers-reduced-motion: no-preference)` because a scroll timeline
 * has no "duration" for that global rule to collapse.
 */

/* ---------------------------------------------------------------------- */
/* Sticky header — hero variant                                           */
/* ---------------------------------------------------------------------- */

.site-header--hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  color: var(--ink);
}

.site-header--hero .brand,
.site-header--hero .brand-word {
  color: var(--ink);
}

/* The orange icon tile all but disappears on the orange hero without this —
   a thin cream ring plus a soft shadow keeps it legible. Kept even after
   scrolling; it still reads fine on a solid header. */
.site-header--hero .brand-mark {
  box-shadow:
    0 0 0 2px rgb(255 247 240 / 90%),
    0 4px 14px rgb(0 0 0 / 28%);
}

.site-header--hero .get-app-pill {
  background: var(--ink);
  color: var(--cream);
}

.site-header--hero .get-app-pill:hover {
  background: #000;
}

.site-header--hero.is-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.site-header--hero.is-scrolled .brand,
.site-header--hero.is-scrolled .brand-word {
  color: var(--text);
}

.site-header--hero.is-scrolled .get-app-pill {
  background: var(--spritz);
  color: var(--ink);
}

.site-header--hero,
.site-header--hero .brand,
.site-header--hero .brand-word,
.site-header--hero .get-app-pill {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

/* Scroll-driven enhancement: when supported, the header solidifies exactly
   in step with scroll instead of at a fixed JS-measured threshold. landing.js
   skips its own scroll listener when this is supported. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .site-header--hero {
      animation: header-solidify linear both;
      animation-timeline: scroll(root);
      animation-range: 0 320px;
    }

    /* Same timeline, bound again on the two descendants that also need to
       swap colour — an animation only affects the element it's declared on,
       so the header bar solidifying doesn't by itself recolour its children. */
    .site-header--hero .brand,
    .site-header--hero .brand-word {
      animation: header-solidify-text linear both;
      animation-timeline: scroll(root);
      animation-range: 0 320px;
    }

    .site-header--hero .get-app-pill {
      animation: header-solidify-pill linear both;
      animation-timeline: scroll(root);
      animation-range: 0 320px;
    }
  }
}

@keyframes header-solidify {
  from {
    background-color: transparent;
    border-bottom-color: transparent;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  to {
    background-color: color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom-color: var(--border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

@keyframes header-solidify-text {
  from {
    color: var(--ink);
  }
  to {
    color: var(--text);
  }
}

@keyframes header-solidify-pill {
  from {
    background-color: var(--ink);
    color: var(--cream);
  }
  to {
    background-color: var(--spritz);
    color: var(--ink);
  }
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn-ink {
  background: var(--ink);
  color: var(--cream);
}

.btn-ink:hover {
  background: #000;
  color: var(--cream);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
}

.btn-outline:hover {
  background: rgb(22 17 26 / 10%);
  color: var(--ink);
}

.btn:active {
  transform: scale(0.97);
}

.btn-small {
  padding: 9px 18px;
  font-size: 13px;
}

/* ---------------------------------------------------------------------- */
/* 1. Hero                                                                 */
/* ---------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--spritz-gradient);
  overflow: clip;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 116px 24px 56px;
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  align-items: center;
  gap: 32px;
}

.hero-copy {
  max-width: 900px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  /* Tuned so the widest grouping ("Someone to clink") stays on one line up
     to very wide viewports — see docs/site.md for the exact numbers. */
  font-size: clamp(2.75rem, 5.5vw + 1.2rem, 7.25rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

/* Each word gets its own tight clip box, independent of which visual line
   it lands on — a forced <br> (see `.brk`) decides the grouping, so a word
   that unexpectedly wraps at a narrow width is still fully visible, never
   clipped away like a shared per-line box would. */
.hero-title .word-wrap {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  padding-bottom: 0.08em;
}

.hero-title .word {
  display: inline-block;
  transform: translateY(115%);
  animation: word-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 80ms + 20ms);
}

.hero-title .word--accent {
  color: var(--cream);
}

/* Line-break control: always break after "clink" and after "with,"; only
   break after "Someone" on narrow viewports (see the media query below). */
.hero-title .brk {
  display: none;
}
.hero-title .brk-clink,
.hero-title .brk-with {
  display: block;
}

@keyframes word-in {
  to {
    transform: translateY(0);
  }
}

.hero-lede {
  font-size: clamp(17px, 1.1vw + 14px, 20px);
  color: var(--ink);
  max-width: 46ch;
  margin: 0 0 24px;
  opacity: 0;
  transform: translateY(14px);
  animation: fade-up 0.7s ease 0.56s both;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  opacity: 0;
  transform: translateY(14px);
  animation: fade-up 0.7s ease 0.68s both;
}

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  animation: fade-up-scale 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@keyframes fade-up-scale {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 108px 20px 48px;
    gap: 56px;
  }

  .hero-copy {
    max-width: none;
  }

  /* Four lines instead of three: "Someone" gets its own line too, so no
     grouping has to shrink below a comfortable reading size. */
  .hero-title .brk-someone {
    display: block;
  }

  .hero-visual {
    order: 2;
    min-height: 380px;
  }

  .hero-visual .phone-mock {
    width: min(250px, 64vw);
  }
}

/* Phone mockup — shared by the hero and the "how it works" story. */

.phone-mock {
  /* Big enough to read the real screen, capped by the viewport height so the
     hero phone never runs past the fold on a short laptop screen. */
  width: min(300px, 34vh);
  animation: idle-float 6s ease-in-out infinite;
}

.phone-mock--static {
  width: 200px;
  animation: none;
}

@keyframes idle-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.phone-frame {
  position: relative;
  width: 100%;
  background: #0b0a0f;
  border-radius: 38px;
  padding: 10px;
  box-shadow:
    0 40px 70px -30px rgb(0 0 0 / 55%),
    0 0 0 1px rgb(255 255 255 / 8%) inset;
}

.phone-screen {
  position: relative;
  width: 100%;
  /* The screen, not the frame, carries the capture's ratio (1320x2868 minus
     the 150px status-bar crop, scaled), so the image fills it with no crop;
     the frame's padding adds the bezel around it. */
  aspect-ratio: 600 / 1235;
  border-radius: 30px;
  overflow: hidden;
  background: var(--surface);
}

.phone-screen picture {
  position: absolute;
  inset: 0;
}

.screen-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sticker {
  position: absolute;
  font-size: 30px;
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / 25%));
  animation: sticker-bob 5s ease-in-out infinite;
}

.sticker-1 {
  top: 4%;
  left: -4%;
  animation-delay: 0.1s;
}
.sticker-2 {
  top: 20%;
  right: -8%;
  animation-delay: 0.7s;
}
.sticker-3 {
  bottom: 24%;
  left: -10%;
  animation-delay: 1.3s;
}
.sticker-4 {
  bottom: 6%;
  right: -4%;
  animation-delay: 0.4s;
}
.sticker-5 {
  top: 52%;
  left: -13%;
  animation-delay: 1.7s;
}

@keyframes sticker-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-14px) rotate(4deg);
  }
}

@media (max-width: 480px) {
  .sticker-3,
  .sticker-5 {
    display: none;
  }
  .sticker-1 {
    left: 0;
  }
  .sticker-2,
  .sticker-4 {
    right: 0;
  }
}

/* Gentle scroll parallax on the stickers — pure bonus, no fallback needed:
   without support the idle bob above still gives them life. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero {
      view-timeline-name: --hero-view;
      view-timeline-axis: block;
    }

    .sticker[data-depth='1'] {
      animation: sticker-parallax-1 linear both, sticker-bob 5s ease-in-out infinite;
      animation-timeline: --hero-view, auto;
      animation-range: cover 0% cover 100%;
    }
    .sticker[data-depth='2'] {
      animation: sticker-parallax-2 linear both, sticker-bob 5s ease-in-out infinite;
      animation-timeline: --hero-view, auto;
      animation-range: cover 0% cover 100%;
    }
    .sticker[data-depth='3'] {
      animation: sticker-parallax-3 linear both, sticker-bob 5s ease-in-out infinite;
      animation-timeline: --hero-view, auto;
      animation-range: cover 0% cover 100%;
    }

    @keyframes sticker-parallax-1 {
      to {
        transform: translateY(40px);
      }
    }
    @keyframes sticker-parallax-2 {
      to {
        transform: translateY(-30px);
      }
    }
    @keyframes sticker-parallax-3 {
      to {
        transform: translateY(70px);
      }
    }
  }
}

/* ---------------------------------------------------------------------- */
/* 2. Marquee                                                              */
/* ---------------------------------------------------------------------- */

.marquee {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.marquee-row {
  display: flex;
  width: max-content;
  animation: marquee-left 32s linear infinite;
}

.marquee-row--right {
  animation-name: marquee-right;
}

.marquee-track {
  display: inline-flex;
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 6vw, 62px);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

@keyframes marquee-left {
  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------------------- */
/* 3. How it works                                                         */
/* ---------------------------------------------------------------------- */

.how {
  background: var(--surface);
  padding: 56px 24px 110px;
}

.how-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.how-visual {
  position: sticky;
  top: 100px;
  display: flex;
  justify-content: center;
}

.how-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 8px;
}

.how-steps {
  display: flex;
  flex-direction: column;
}

.how-step {
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0;
}

/* The heading sits right above step 1 in the same viewport on first load —
   centring step 1's text the same way steps 2/3 are (deep in a tall block,
   heading long scrolled off) reads as a big dead gap. Anchor it near the
   top instead; steps 2/3 keep the centred, self-contained feel. */
.how-step:first-of-type {
  justify-content: flex-start;
  padding-top: 12px;
}

.step-number {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(72px, 11vw, 148px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--spritz);
  opacity: 0.16;
  margin: 0 0 -0.18em;
}

/* Outline-only numeral where supported — an editorial "big cover number"
   treatment instead of a small label. Falls back to the solid low-opacity
   fill above everywhere else (older Firefox, etc). */
@supports (-webkit-text-stroke: 1px black) {
  .step-number {
    opacity: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--spritz);
  }
}

.how-step > h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.05;
  margin: 0 0 14px;
}

/* Direct child only — `.how-step` also contains a decorative phone mockup
   with its own unrelated content (a screenshot, the CHEERS stamp) that
   must not inherit this paragraph's styling. */
.how-step > p {
  color: var(--muted);
  font-size: 20px;
  max-width: 40ch;
  margin: 0;
}

.how-step-phone {
  display: none;
}

@media (max-width: 899px) {
  .how-inner {
    display: block;
  }

  .how-visual {
    display: none;
  }

  .how-step {
    min-height: 0;
    padding: 28px 0;
  }

  .how-step:first-of-type {
    padding-top: 0;
  }

  .how-step-phone {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .how-step-phone .phone-mock {
    width: 170px;
  }
}

/* Story screens inside the phone ------------------------------------- */

.phone-screen--story {
  position: relative;
}

.story-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.story-step.is-active {
  opacity: 1;
}

.swipe-card {
  position: relative;
  flex: 1;
  border-radius: inherit;
  overflow: hidden;
}

.cheers-stamp {
  position: absolute;
  /* Over the card, not the screen's header: the stamp belongs to the person
     being cheered, the way it lands in the app. */
  top: 30%;
  left: 50%;
  border: 4px solid var(--spritz);
  color: var(--spritz);
  background: rgb(11 10 15 / 55%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.08em;
  padding: 4px 14px;
  border-radius: 10px;
  transform: translateX(-50%) rotate(-12deg);
  opacity: 0;
  transition: opacity 0.4s ease 0.15s;
}

.cheers-stamp.is-shown,
.story-step.is-active .cheers-stamp {
  opacity: 1;
}

/* Scroll-scrubbed stamp on step 2: it lands as you read, the screen itself
   stays put (tilting a whole screenshot reads as a glitch). A bonus on top
   of the crossfade, which already tells the story without it. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .how-step[data-step='2'] {
      view-timeline-name: --step2-view;
      view-timeline-axis: block;
    }

    .how-visual .story-step--2 .cheers-stamp {
      transition: none;
      animation: stamp-land linear both;
      animation-timeline: --step2-view;
      animation-range: contain 15% contain 45%;
    }

    @keyframes stamp-land {
      0% {
        opacity: 0;
        transform: translateX(-50%) rotate(-4deg) scale(1.8);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) rotate(-12deg) scale(1);
      }
    }
  }
}

/* ---------------------------------------------------------------------- */
/* 5. Big statement                                                        */
/* ---------------------------------------------------------------------- */

.statement {
  padding: 140px 24px;
  text-align: center;
}

.statement-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw + 1rem, 5.6rem);
  color: var(--text);
  margin: 0 0 16px;
  transform: scale(0.88);
}

.statement-sub {
  color: var(--muted);
  font-size: 19px;
  margin: 0;
}

html.js-motion .statement,
html.js-motion .statement-title,
html.js-motion .statement-sub {
  transition: background-color 0.7s ease, color 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js-motion .statement.is-in {
  background: var(--ink);
}

html.js-motion .statement.is-in .statement-title {
  transform: scale(1);
  color: var(--cream);
}

html.js-motion .statement.is-in .statement-sub {
  color: rgb(246 244 250 / 72%);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .statement {
      view-timeline-name: --statement-view;
      view-timeline-axis: block;
    }

    html.js-motion .statement-title {
      animation: statement-grow linear both;
      animation-timeline: --statement-view;
      animation-range: entry 0% cover 45%;
    }

    @keyframes statement-grow {
      from {
        transform: scale(0.8);
      }
      to {
        transform: scale(1);
      }
    }
  }
}

/* ---------------------------------------------------------------------- */
/* Filmstrip — a second scroll moment between the statement and the values */
/* ---------------------------------------------------------------------- */

.filmstrip {
  padding: 72px 24px 88px;
  text-align: center;
}

.filmstrip-caption {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 32px);
  margin: 0 0 36px;
  color: var(--text);
}

.filmstrip-viewport {
  max-width: 1240px;
  margin: 0 auto;
  overflow: hidden;
}

.filmstrip-track {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 0 8px; /* breathing room for the drift so nothing clips at rest */
}

.filmstrip-phone {
  flex: none;
  width: 190px;
}

/* `.phone-mock--static` carries its own fixed width (reused from the "how
   it works" mockups) — override it so the phone actually fills whatever
   width `.filmstrip-phone` sets instead of forcing its own overflow. */
.filmstrip-phone .phone-mock {
  width: 100%;
}

.filmstrip-phone .phone-frame {
  box-shadow:
    0 24px 46px -22px rgb(0 0 0 / 45%),
    0 0 0 1px rgb(255 255 255 / 8%) inset;
}

@media (max-width: 620px) {
  .filmstrip-track {
    flex-wrap: wrap;
  }
  .filmstrip-phone {
    width: 128px;
  }
}

/* Scroll-driven horizontal drift — a gentle parallax, not a carousel: no
   scroll hijacking, no snap points. Static, centred row otherwise. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .filmstrip {
      view-timeline-name: --filmstrip-view;
      view-timeline-axis: block;
    }

    .filmstrip-track {
      animation: filmstrip-drift linear both;
      animation-timeline: --filmstrip-view;
      animation-range: cover 0% cover 100%;
    }

    @keyframes filmstrip-drift {
      from {
        transform: translateX(48px);
      }
      to {
        transform: translateX(-48px);
      }
    }
  }
}

/* ---------------------------------------------------------------------- */
/* 6. Values                                                               */
/* ---------------------------------------------------------------------- */

.values {
  padding: 96px 24px;
  max-width: 1120px;
  margin: 0 auto;
}

.values h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  text-align: center;
  margin: 0 0 40px;
}

/* Flex + justify-content: center instead of a grid: with 5 cards a grid's
   last row leaves a lone orphan pinned to the left. A wrapping flex row
   centres whatever's left on the final line at every width. */
.values-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.value-card {
  flex: 1 1 220px;
  max-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 22px;
}

.value-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 12px;
}

.value-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0 0 6px;
}

.value-card p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

html.js-motion .value-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}

html.js-motion .value-card.is-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------- */
/* 7. Safety band                                                          */
/* ---------------------------------------------------------------------- */

.safety-band {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 60px 24px;
  text-align: center;
}

.safety-line {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 4vw, 32px);
  margin: 0 0 12px;
  color: var(--text);
}

.safety-link {
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
}

.safety-link:hover,
.safety-link:focus-visible {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* 8. Final CTA                                                            */
/* ---------------------------------------------------------------------- */

.get {
  background: var(--spritz-gradient);
  color: var(--ink);
  padding: 112px 24px 90px;
  text-align: center;
}

.get-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.get-mark {
  width: 92px;
  height: 92px;
  margin-bottom: 20px;
}

.get-mark svg {
  width: 100%;
  height: 100%;
}

.get-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw + 1.4rem, 4.6rem);
  margin: 0 0 12px;
  color: var(--ink);
}

.get-sub {
  font-size: 18px;
  margin: 0 0 34px;
  color: var(--ink);
  opacity: 0.85;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.store-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 172px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 14px;
  padding: 11px 20px;
  text-decoration: none;
  cursor: default;
}

.store-badge-label {
  font-weight: 700;
  font-size: 16px;
}

.store-badge-note {
  font-size: 12px;
  opacity: 0.7;
}

.wrap--footer {
  padding-top: 48px;
}