:root {
  --desk: #1a100a;
  --desk-2: #2a1a10;
  --cream: #f4ead4;
  --tan: #cdb694;
  --muted: #9c8466;
  --red: #b2221e;
  --ink: #2a2016;
  --paper: #f6efdd;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--tan);
  background:
    radial-gradient(ellipse 70% 45% at 50% 30%, rgba(160, 98, 46, 0.35), transparent 70%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.012) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, var(--desk-2), var(--desk) 60%);
  background-color: var(--desk);
  font: 17px/1.6 "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  min-height: 100vh;
}

a { color: var(--cream); text-underline-offset: 3px; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* the red embossed label tape from the app */
.dymo {
  display: inline-block;
  padding: 5px 14px 6px;
  border-radius: 4px;
  background: linear-gradient(180deg, #c8332b 0 45%, var(--red) 45%);
  color: #fff6f0;
  font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 rgba(90, 10, 8, 0.8);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  transform: rotate(-1.5deg);
}

.type { font-family: "Special Elite", "American Typewriter", "Courier New", monospace; font-weight: 400; }

/* hero */
.hero { text-align: center; padding: 64px 0 24px; }
.hero .icon {
  width: 120px; height: 120px; border-radius: 27px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.hero h1 { color: var(--cream); font-size: clamp(40px, 8vw, 64px); line-height: 1.05; margin: 22px 0 10px; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }
.hero p.lead { font-size: clamp(18px, 2.6vw, 21px); max-width: 560px; margin: 0 auto 26px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 12px;
  background: #000; color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-weight: 600; font-size: 17px;
}
.store svg { width: 22px; height: 22px; fill: #fff; }
.store small { display: block; font-size: 11px; font-weight: 500; opacity: 0.8; line-height: 1.1; }
.store span { text-align: left; line-height: 1.15; }

/* screens */
.screens {
  display: flex; gap: 22px; justify-content: center;
  padding: 40px 0 16px; overflow-x: auto; scroll-snap-type: x mandatory;
}
.phone {
  flex: 0 0 auto; width: 220px; scroll-snap-align: center;
  padding: 7px; border-radius: 38px; background: #0e0e0f;
  box-shadow: 0 0 0 1.5px #46464a inset, 0 24px 40px rgba(0, 0, 0, 0.6);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 31px; }
.phone:nth-child(2) { transform: translateY(-18px); }
.phone:nth-child(3) { transform: translateY(-18px); }

/* features */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; padding: 40px 0; }
.feature {
  background: rgba(246, 239, 221, 0.06);
  border: 1px solid rgba(246, 239, 221, 0.1);
  border-radius: 14px; padding: 20px 22px;
}
.feature h3 { color: var(--cream); margin: 0 0 6px; font-size: 21px; }
.feature p { margin: 0; font-size: 16px; }

.price { text-align: center; padding: 10px 0 30px; }
.price h2 { color: var(--cream); font-size: 30px; margin: 0 0 8px; }
.price p { margin: 0 auto; max-width: 520px; }

footer {
  text-align: center; padding: 34px 0 48px; font-size: 15px; color: var(--muted);
  border-top: 1px solid rgba(246, 239, 221, 0.08); margin-top: 20px;
}
footer nav { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }

/* the privacy policy, typed on a sheet */
.sheet {
  background: var(--paper);
  color: var(--ink);
  max-width: 760px; margin: 40px auto 20px; padding: 48px clamp(20px, 6vw, 64px) 56px;
  border-radius: 3px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  font-size: 16.5px;
}
.sheet h1 { font-size: clamp(30px, 6vw, 40px); margin: 14px 0 4px; line-height: 1.1; }
.sheet h2 { font-size: 21px; margin: 32px 0 6px; }
.sheet .date { color: #7a6a52; margin: 0 0 22px; font-size: 15px; }
.sheet a { color: #9a2a1e; }
.sheet ul { padding-left: 20px; }
.sheet li { margin: 4px 0; }
.back { display: inline-block; margin-top: 28px; color: var(--cream); }

@media (max-width: 600px) {
  .hero { padding-top: 44px; }
  .screens { justify-content: flex-start; padding-left: 16px; padding-right: 16px; margin: 0 -16px; }
  .phone { width: 200px; }
  .phone:nth-child(n) { transform: none; }
}