:root {
  --sky-blue: #4c7ef3;
  --sun-coral: #ff6f59;
  --meadow-green: #3fb68b;
  --soft-cream: #faf7f2;
  --slate-ink: #2b2d42;
  --text-muted: #6b7280;
  --border: #e7e2d8;
  --max-width: 1080px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--slate-ink);
  background: var(--soft-cream);
  line-height: 1.6;
}

a {
  color: var(--sky-blue);
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

header.site {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--slate-ink);
  font-weight: 800;
  font-size: 18px;
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

nav.site a {
  margin-left: 24px;
  color: var(--slate-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

nav.site a:hover {
  color: var(--sky-blue);
}

footer.site {
  border-top: 1px solid var(--border);
  padding: 32px 0;
  margin-top: 64px;
}

footer.site .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}

footer.site a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
}

footer.site a:hover {
  color: var(--sky-blue);
}

footer.site .social {
  display: flex;
  gap: 8px;
  order: 2;
}

footer.site .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--slate-ink);
  background: rgba(43, 45, 66, 0.06);
  transition: background 0.15s ease, color 0.15s ease;
}

footer.site .social a:hover,
footer.site .social a:focus-visible {
  background: #ffb800;
  color: #2b2d42;
}

footer.site .links {
  display: flex;
  gap: 20px;
}

/* ---- Landing page ---- */
.hero {
  padding: 72px 0 56px;
  text-align: center;
}

.hero .icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(43, 45, 66, 0.15);
  margin-bottom: 24px;
}

.hero h1 {
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 16px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.hero p.lead {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 32px;
}

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

.store-badge-img {
  height: 52px;
  width: auto;
  cursor: default;
}

.coming-soon-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

section.screenshots {
  padding: 8px 0 56px;
}

.screenshot-scroll {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px 24px 18px;
  margin: 0 -24px;
  scroll-snap-type: x proximity;
}

.screenshot-scroll img {
  height: 380px;
  width: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px -16px rgba(43, 45, 66, 0.35);
  flex-shrink: 0;
  scroll-snap-align: start;
}

@media (max-width: 640px) {
  .screenshot-scroll img {
    height: 280px;
  }
}

section.features {
  padding: 24px 0 64px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
}

.feature-card .emoji {
  font-size: 26px;
  display: block;
  margin-bottom: 10px;
}

.feature-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

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

section.support {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 56px 0;
  text-align: center;
}

section.support h2 {
  font-size: 24px;
  margin: 0 0 10px;
}

section.support p {
  color: var(--text-muted);
  margin: 0 0 20px;
}

.support-email {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 10px;
  background: var(--sky-blue);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}

/* ---- Legal pages (privacy) ---- */
main.legal {
  padding: 48px 0 32px;
}

main.legal .wrap {
  max-width: 760px;
}

main.legal h1 {
  font-size: 30px;
  margin-bottom: 4px;
}

main.legal .updated {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 32px;
}

main.legal h2 {
  font-size: 19px;
  margin-top: 36px;
  margin-bottom: 10px;
  color: var(--slate-ink);
}

main.legal p,
main.legal li {
  color: #3d3f52;
  font-size: 15.5px;
}

main.legal ul {
  padding-left: 20px;
}

main.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}

main.legal th,
main.legal td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

main.legal th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ---- Support page ---- */
main.support-page {
  padding: 48px 0 24px;
}

main.support-page .wrap {
  max-width: 760px;
}

main.support-page h1 {
  font-family: "Outfit", sans-serif;
  font-size: 30px;
  margin-bottom: 8px;
}

main.support-page .lede {
  color: var(--text-muted);
  font-size: 15.5px;
  margin-bottom: 8px;
}

main.support-page h2 {
  font-family: "Outfit", sans-serif;
  font-size: 21px;
  margin: 48px 0 8px;
}

main.support-page .section-hint {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 24px;
}

.steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 4px 0 4px 2px;
}

/* The path itself — a dashed line running behind every node, from the center of the first icon
   to the center of the last. Icon width 48px, so center sits at 24px from this container's edge. */
.steps::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 24px;
  width: 2px;
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 13px);
}

.step {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.step .step-icon {
  font-size: 21px;
  line-height: 1;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--node-color, var(--sky-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  /* Punches a page-colored ring around the node so the dashed line reads as passing behind it,
     rather than getting visually cut off mid-dash right at the node's edge. */
  box-shadow: 0 0 0 6px var(--cream);
}

.step:nth-child(3n+1) .step-icon { --node-color: var(--sky-blue); }
.step:nth-child(3n+2) .step-icon { --node-color: var(--sun-coral); }
.step:nth-child(3n+3) .step-icon { --node-color: var(--meadow-green); }

.step .step-body {
  padding-top: 4px;
}

.step .step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--sky-blue);
  text-transform: uppercase;
}

.step h3 {
  margin: 2px 0 4px;
  font-size: 15.5px;
}

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

.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 18px;
}

.faq summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

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

.faq summary::after {
  content: "+";
  font-size: 20px;
  color: var(--sky-blue);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

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

.faq p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

main.support-page .support-email {
  margin-top: 40px;
  display: inline-block;
}