:root {
  --ink: #241c21;
  --muted: #6c6067;
  --paper: #fffafd;
  --petal: #ffd9e6;
  --berry: #8d3158;
  --white: #fff;
}

* { box-sizing: border-box; }
html { color: var(--ink); background: var(--paper); font-family: Inter, system-ui, sans-serif; }
body { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.discover-header,
footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1240px;
  padding: 24px 28px;
}

.discover-brand { align-items: center; display: flex; font-size: 18px; font-weight: 800; gap: 10px; text-decoration: none; }
.discover-brand img { border-radius: 8px; }
.header-cta,
.app-cta > a {
  background: var(--ink);
  border-radius: 999px;
  color: var(--white);
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  text-decoration: none;
}

main { overflow: hidden; }
.discover-hero {
  margin: 0 auto;
  max-width: 1240px;
  padding: clamp(80px, 12vw, 160px) 28px clamp(72px, 10vw, 132px);
  position: relative;
}
.discover-hero::after {
  color: var(--petal);
  content: "try it";
  font: 700 clamp(90px, 18vw, 250px)/.7 Caveat, cursive;
  pointer-events: none;
  position: absolute;
  right: -1vw;
  top: 35%;
  transform: rotate(-8deg);
  z-index: -1;
}
.eyebrow { color: var(--berry); font-size: 12px; font-weight: 800; letter-spacing: .16em; margin: 0 0 18px; }
h1 { font-size: clamp(50px, 8vw, 112px); letter-spacing: -.065em; line-height: .92; margin: 0; max-width: 900px; }
.app-cta h2 span { color: var(--berry); font-family: Caveat, cursive; font-weight: 700; letter-spacing: -.03em; }
.discover-hero > p:not(.eyebrow) { color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.6; max-width: 640px; }
.back-link { color: var(--berry); font-size: 14px; font-weight: 800; text-underline-offset: 4px; }

.discover-empty { min-height: 62vh; }
.discover-empty h1 { font-size: clamp(44px, 6vw, 82px); max-width: 850px; }
.discover-empty .back-link { display: inline-block; margin-top: 20px; }
.app-cta { background: var(--petal); margin: 0 auto; padding: clamp(72px, 10vw, 130px) 28px; text-align: center; }
.app-cta h2 { font-size: clamp(42px, 7vw, 86px); letter-spacing: -.055em; line-height: .95; margin: 0; }
.app-cta > p:not(.eyebrow) { color: var(--muted); margin: 24px auto; }
footer { color: var(--muted); font-size: 13px; padding-bottom: 40px; padding-top: 40px; }
footer nav { display: flex; gap: 22px; }

a:focus-visible { outline: 3px solid var(--berry); outline-offset: 4px; }
@media (max-width: 540px) {
  .discover-header, footer { padding-left: 20px; padding-right: 20px; }
  .discover-hero { padding-left: 20px; padding-right: 20px; }
  footer { align-items: start; flex-direction: column; gap: 20px; }
}