/* Design tokens from the Findr marketing Figma file. */
:root {
  --color-ink: #0d0d0d;
  --color-surface-dark: #1d1d1d;
  --color-glow-blue: #1a8cff;
  --color-glow-cyan: #6fd4ff;

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;

  --shadow-app-icon: 0px 108px 30px 0px rgba(0, 0, 0, 0),
    0px 69px 28px 0px rgba(0, 0, 0, 0.01), 0px 39px 23px 0px rgba(0, 0, 0, 0.02),
    0px 17px 17px 0px rgba(0, 0, 0, 0.03), 0px 4px 10px 0px rgba(0, 0, 0, 0.04);

  /* transitions-dev: card resize (used by the FAQ answers). */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Base */

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

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

body {
  margin: 0;
  background: #ffffff;
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ol {
  margin: 0;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.wide-only {
  display: none;
}

/* Buttons */

.button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px 12px 20px;
  border-radius: 999px;
  background: var(--color-ink);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.16px;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

.button:hover {
  opacity: 0.85;
}

.button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

.button-sm {
  padding: 8px 16px 8px 12px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.14px;
}

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 16px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 10px 10px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-icon {
  box-shadow: var(--shadow-app-icon);
}

.nav-links {
  display: none;
  align-items: center;
  gap: 2px;
}

.nav-links a {
  padding: 8px 12px;
  color: rgba(13, 13, 13, 0.72);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  text-align: center;
  transition: color 150ms ease;
}

.nav-links a:hover {
  color: var(--color-ink);
}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 140px;
}

/* Blurred blue/cyan glow behind the header. */
.hero-glow {
  position: absolute;
  inset: 0 0 auto;
  height: 480px;
  pointer-events: none;
}

.hero-glow::before,
.hero-glow::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1024px;
  height: 769px;
  border-radius: 50%;
  filter: blur(140px);
  transform: translateX(-50%);
}

.hero-glow::before {
  top: -669px;
  background: var(--color-glow-cyan);
}

.hero-glow::after {
  top: -787px;
  background: var(--color-glow-blue);
}

.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

.hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 172px;
}

.hero-icon img {
  box-shadow: var(--shadow-app-icon);
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 2px 0;
  text-align: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -0.8px;
}

.hero-text p {
  max-width: 648px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.hero-cta {
  padding: 12px 0;
}

.hero-image {
  position: relative;
  width: 100%;
  max-width: 1512px;
  height: auto;
  margin: 12px auto 0;
}

/* How it works */

.how {
  padding: 48px 16px 96px;
  background: var(--color-ink);
  color: #ffffff;
}

.how-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 562px;
  margin: 0 auto;
  padding: 50px 0;
  text-align: center;
}

.how h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.64px;
}

.how h2 .muted {
  color: rgba(255, 255, 255, 0.56);
}

.how-intro p {
  color: rgba(255, 255, 255, 0.64);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 1306px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  width: 100%;
  max-width: 422px;
  height: 612px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 32px;
  background: var(--color-surface-dark);
}

.step h3 {
  position: absolute;
  top: 32px;
  inset-inline: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.48px;
  text-align: center;
}

.step img {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
}

.step p {
  position: absolute;
  top: 532px;
  left: 50%;
  width: 269px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.64);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  text-align: center;
}

/* FAQ */

.faq {
  width: 100%;
  max-width: 752px;
  margin: 0 auto;
  padding: 88px 16px 48px;
  scroll-margin-top: 96px;
}

.faq h2 {
  padding: 2px 0 32px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.72px;
}

.faq-list {
  margin-top: 12px;
}

.faq details {
  padding: 24px 0 23px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.4px;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Plus icon that turns into a × when the answer is open. */
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: url("images/icon-plus.png") center / 24px 24px no-repeat;
  transition: transform var(--resize-dur) var(--resize-ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  padding: 12px 52px 0 0;
  color: rgba(13, 13, 13, 0.64);
  font-size: 16px;
  line-height: 24px;
}

/* Answers tween their height in browsers that can animate to auto. */
@supports (interpolate-size: allow-keywords) {
  .faq-list {
    interpolate-size: allow-keywords;
  }

  .faq details::details-content {
    height: 0;
    overflow: clip;
    transition:
      height var(--resize-dur) var(--resize-ease),
      content-visibility var(--resize-dur) var(--resize-ease) allow-discrete;
  }

  .faq details[open]::details-content {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after,
  .faq details::details-content {
    transition: none !important;
  }
}

/* Footer */

.site-footer {
  width: 100%;
  max-width: 752px;
  margin: 0 auto;
  padding: 0 16px;
}

.wordmark {
  width: 100%;
  height: auto;
}

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  margin-top: 40px;
  color: rgba(13, 13, 13, 0.64);
  font-size: 14px;
  line-height: 20px;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-links a {
  transition: color 150ms ease;
}

.footer-links a:hover {
  color: var(--color-ink);
}

/* Floating download card */

.download-card {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 16px;
  background: rgba(13, 13, 13, 0.9);
}

.download-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 171px;
}

.download-card-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.16px;
}

.download-card-sub {
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.13px;
}

/* Tablet and up: the design's desktop sizes. */
@media (min-width: 640px) {
  .wide-only {
    display: inline;
  }

  .nav-links {
    display: flex;
  }

  .hero h1 {
    font-size: 64px;
    line-height: 68px;
    letter-spacing: -1.28px;
  }

  .hero-text p,
  .how-intro p {
    font-size: 18px;
    line-height: 28px;
  }

  .how h2 {
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.96px;
  }

  .faq h2 {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -0.96px;
  }

  .faq details p {
    padding-right: 152px;
  }
}

@media (min-width: 1024px) {
  .steps {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }

  .download-card {
    display: flex;
  }
}