/* heyrelm.com. Dark and neutral on purpose, like the icon: a star in graphite and white,
   with starlight as the only accent. The screenshots are of the dark app. Color only
   appears where it's the person's own (collection tints and images in the illustrations,
   taken from the app's palette); the page itself stays quiet.

   Every size here is on one scale: type on Tailwind's steps (12/16, 14/20, 16/24, 18/28,
   30/36, 36/40, 48, 60), spacing on 2 4 8 12 16 24 32 40 48 64 80 96, and radii on
   Tailwind's (4 6 8 12 16 24, full). */
:root {
  color-scheme: dark;
  --ground: #181818;
  --panel: #1f1f1f;
  --raised: #272727;
  --lifted: #313131;
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.14);
  --text: #ededed;
  --muted: #9b9b9b;
  --faint: #6b6b6b;
  /* Starlight: the accent, a white with a little cool in it. */
  --star: #dfe3f5;
  /* Shadows take the ground's hue (a neutral), deepened, instead of an arbitrary black. */
  --shadow: rgb(6 6 6 / 0.55);
  /* The app's collection tints (CollectionTint), for the illustrations. */
  --tint-rose: #d96194;
  --tint-sky: #3899cc;
  --tint-amber: #cc8a24;
  --tint-red: #d16161;
  --tint-violet: #8570e6;
  --tint-grass: #549e4d;
  --serif: "Newsreader", "New York", ui-serif, Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* One curve for everything that moves. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --z-nav: 10;
  --z-skip: 20;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 16px/24px var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-inline: 16px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.wrap { max-width: 1080px; margin-inline: auto; }
.center { text-align: center; }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: var(--z-skip);
  padding: 8px 12px; border-radius: 8px; background: var(--star); color: var(--ground);
  font: 600 14px/20px var(--sans); transition: top 300ms var(--ease);
}
.skip:focus { top: 16px; }

/* ── Navigation ───────────────────────────────────────────── */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-nav);
  margin-inline: -16px; padding: 12px 16px;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/24px var(--sans); letter-spacing: -0.01em; }
.brand img { width: 24px; height: 24px; }
.nav-links { display: flex; gap: 24px; font-size: 14px; line-height: 20px; }
.nav-links a { color: var(--muted); transition: color 300ms var(--ease); }
.nav-links a:hover { color: var(--text); }
.nav .button { justify-self: end; }
@media (max-width: 700px) {
  .nav .wrap { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
}

/* ── Buttons ──────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px; border-radius: 9999px;
  font: 600 16px/24px var(--sans); white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), transform 300ms var(--ease);
}
.button:active { transform: scale(0.98); }
.button.primary { background: var(--text); color: var(--ground); }
.button.primary:hover { background: #fff; }
.button.quiet { background: var(--raised); color: var(--text); border-color: var(--line); }
.button.quiet:hover { background: var(--lifted); border-color: var(--line-strong); }
.button.small { padding: 4px 12px; font-size: 14px; line-height: 20px; }
.button svg { width: 16px; height: 16px; flex: none; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero { padding-block: 80px 0; text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
  padding: 4px 12px 4px 4px; border-radius: 9999px; font-size: 12px; line-height: 16px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line);
}
.badge b { font-weight: 500; color: var(--ground); background: var(--star); padding: 2px 8px; border-radius: 9999px; }
h1 { font: 400 36px/40px var(--serif); letter-spacing: -0.02em; max-width: 16ch; margin-inline: auto; }
/* The hero heading fades from white to grey, left to right. */
.hero h1 {
  background: linear-gradient(90deg, #ffffff, #9b9b9b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 768px) { h1 { font-size: 60px; line-height: 1; } }
.lede { color: var(--muted); max-width: 50ch; margin: 24px auto 32px; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 24px; color: var(--faint); font-size: 12px; line-height: 16px; }

/* The screenshot sits on a panel lit from below by starlight, like the icon's star. */
.stage {
  position: relative; margin-top: 64px; border-radius: 24px; overflow: hidden;
  padding: 16px 16px 0;
  background:
    radial-gradient(55% 75% at 50% 118%, rgb(223 227 245 / 0.28), transparent 70%),
    radial-gradient(90% 60% at 50% 130%, rgb(223 227 245 / 0.08), transparent 75%),
    var(--panel);
  border: 1px solid var(--line);
}
@media (min-width: 768px) { .stage { padding: 48px 48px 0; } }
.stage img { width: 100%; margin-bottom: -2%; }

/* ── Section headings ─────────────────────────────────────── */
section { padding-block: 96px 0; }
.heading { text-align: center; max-width: 620px; margin-inline: auto; }
h2 { font: 400 30px/36px var(--serif); letter-spacing: -0.015em; }
@media (min-width: 768px) { h2 { font-size: 36px; line-height: 40px; } }
.heading p { color: var(--muted); margin-top: 16px; }

/* ── Bento ────────────────────────────────────────────────── */
/* Six columns, so the rows can differ: wide and narrow, three across, narrow and wide. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 48px; }
.cell {
  grid-column: span 2;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
}
.cell:nth-child(1), .cell:nth-child(7) { grid-column: span 4; }
.cell:nth-child(8), .cell:nth-child(9) { grid-column: span 3; }
.art { height: 172px; display: grid; place-items: center; padding: 24px; position: relative; }
.cell .text { padding: 0 24px 24px; margin-top: auto; }
.cell h3 { font: 500 16px/24px var(--sans); letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; }
.cell p { color: var(--muted); font-size: 14px; line-height: 20px; margin-top: 4px; }
.pill { font: 500 12px/16px var(--sans); color: var(--muted); background: var(--raised); border-radius: 9999px; padding: 2px 8px; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell, .cell:nth-child(n) { grid-column: span 1; }
}
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

/* Small pieces the illustrations are made of. */
.kbd {
  display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px; border-radius: 12px;
  font: 500 18px/28px var(--mono); color: var(--text);
  background: linear-gradient(#2d2d2d, #212121); border: 1px solid var(--line-strong);
  box-shadow: 0 2px 0 var(--shadow), 0 8px 24px var(--shadow);
}
.keys-row { display: flex; gap: 8px; }
.window {
  width: 100%; max-width: 250px; border-radius: 12px; background: var(--raised);
  border: 1px solid var(--line-strong); box-shadow: 0 16px 40px var(--shadow); padding: 12px;
}
.row { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; }
.row + .row { margin-top: 8px; }
.row + .row.spaced { margin-top: 12px; }
.push { margin-left: auto; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); }
.tile { width: 18px; height: 18px; border-radius: 4px; display: inline-grid; place-items: center; font-size: 12px; flex: none; }
.tile.rose { background: var(--tint-rose); }
.tile.sky { background: var(--tint-sky); }
.tile.amber { background: var(--tint-amber); }
.tile.red { background: var(--tint-red); }
.tile.violet { background: var(--tint-violet); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; border-radius: 9999px;
  background: var(--raised); border: 1px solid var(--line); font-size: 12px; line-height: 16px;
}
.chip.url { padding: 4px 8px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 250px; }
/* Stand-ins for saved images: a tint fading into its own dark. */
.thumbs { display: grid; grid-template-columns: repeat(3, 58px); gap: 8px; }
.thumbs span, .answer span { border-radius: 8px; }
.thumbs span { height: 58px; }
.thumbs .picked { outline: 1.5px dashed var(--muted); outline-offset: 4px; }
.img-sky { background: linear-gradient(160deg, var(--tint-sky), #243a5c); }
.img-sky-2 { background: linear-gradient(160deg, #4aa6d6, #2a4366); }
.img-amber { background: linear-gradient(160deg, var(--tint-amber), #6e3f14); }
.img-rose { background: linear-gradient(150deg, var(--tint-rose), #5a2a55); }
.img-grass { background: linear-gradient(150deg, var(--tint-grass), #243f22); }
.img-violet { background: linear-gradient(150deg, var(--tint-violet), #2e2760); }
.ask { display: grid; width: 100%; max-width: 250px; }
.bubble { background: var(--text); color: var(--ground); border-radius: 16px 16px 4px 16px; padding: 8px 12px; font-size: 12px; line-height: 16px; justify-self: end; }
.answer { display: flex; gap: 8px; margin-top: 8px; }
.answer span { width: 40px; height: 40px; }
.answer .more { width: auto; height: auto; align-self: center; font-size: 12px; color: var(--faint); }
.capture { display: grid; gap: 12px; }
.select {
  height: 64px; border: 1.5px dashed var(--muted); border-radius: 6px; position: relative;
  background: rgb(255 255 255 / 0.03);
}
.select span { position: absolute; right: 8px; bottom: 4px; font: 12px/16px var(--mono); color: var(--muted); }
.platforms { display: flex; gap: 8px; }
.platforms .kbd { flex-direction: column; gap: 8px; height: 64px; min-width: 64px; font: 500 12px/16px var(--sans); color: var(--muted); }
.platforms svg { width: 20px; height: 20px; color: var(--text); }

/* ── Surfaces (tabs of screenshots) ───────────────────────── */
.tabs { display: flex; justify-content: center; margin-top: 32px; }
.tablist { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 4px; border-radius: 9999px; background: var(--panel); border: 1px solid var(--line); }
.tablist button {
  font: 500 14px/20px var(--sans); color: var(--muted); background: none; border: 0; cursor: pointer;
  padding: 8px 16px; border-radius: 9999px;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), transform 300ms var(--ease);
}
.tablist button:hover { color: var(--text); }
.tablist button:active { transform: scale(0.98); }
.tablist button[aria-selected="true"] { background: var(--raised); color: var(--text); }
.surface { margin: 24px 0 0; }
.surface img { width: 100%; }
/* The screenshots carry their window shadow, so the caption tucks up into it. */
.caption { text-align: center; color: var(--faint); font-size: 14px; line-height: 20px; margin-top: -3%; }

/* ── Native band ──────────────────────────────────────────── */
.band { margin-top: 96px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); padding: 64px 24px; text-align: center; }
.band .chips { max-width: none; margin-top: 24px; }
.band .chip { padding: 8px 12px; color: var(--muted); }
/* The icon's star, as the bullet. */
.band .chip i {
  width: 9px; height: 11px; display: inline-block; background: var(--star);
  -webkit-mask: url(assets/star.svg) center / contain no-repeat; mask: url(assets/star.svg) center / contain no-repeat;
}

/* ── Pricing ──────────────────────────────────────────────── */
.price-card {
  max-width: 420px; margin: 40px auto 0; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 16px; padding: 32px;
}
.price { display: flex; align-items: baseline; gap: 12px; }
.price .amount { font: 400 48px/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price .per { color: var(--muted); font-size: 14px; line-height: 20px; }
.price-card ul { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 8px; }
.price-card li { display: flex; gap: 12px; color: var(--muted); font-size: 14px; line-height: 20px; }
.price-card li svg { flex: none; width: 16px; height: 16px; color: var(--star); margin-top: 2px; }
.price-card .button { width: 100%; }
.price-card .or { text-align: center; color: var(--faint); font-size: 14px; line-height: 20px; margin-top: 12px; }
.price-card .or a { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; transition: color 300ms var(--ease); }
.price-card .or a:hover { color: var(--text); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.faq-layout h2 { text-align: left; }
.faq details { border-top: 1px solid var(--line); padding: 16px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--faint); font-family: var(--mono); }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin-top: 8px; font-size: 14px; line-height: 20px; max-width: 62ch; }
@media (max-width: 760px) { .faq-layout { grid-template-columns: 1fr; gap: 24px; } }

/* ── Closing call to action ───────────────────────────────── */
.closing { padding-block: 96px; text-align: center; }
.closing h2 { font-size: 36px; line-height: 40px; max-width: 22ch; margin: 0 auto 24px; }
@media (min-width: 768px) { .closing h2 { font-size: 48px; line-height: 1; } }

/* ── Footer ───────────────────────────────────────────────── */
footer { background: var(--panel); border-top: 1px solid var(--line); margin-inline: -16px; padding: 48px 16px 40px; font-size: 14px; line-height: 20px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid p { color: var(--faint); margin-top: 12px; max-width: 30ch; }
.footer-grid h4 { margin: 0 0 12px; font: 400 12px/16px var(--sans); color: var(--faint); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--muted); transition: color 300ms var(--ease); }
.footer-grid a:hover { color: var(--text); }
.legalline { margin-top: 40px; color: var(--faint); font-size: 12px; line-height: 16px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ── Legal pages and 404 ──────────────────────────────────── */
.legal { max-width: 660px; margin-inline: auto; padding-block: 80px 96px; }
.legal h1 { margin: 0; max-width: none; text-align: left; }
@media (min-width: 768px) { .legal h1 { font-size: 48px; line-height: 1; } }
.legal h2 { font: 500 18px/28px var(--sans); margin-top: 32px; }
.legal p, .legal li { color: var(--muted); margin-top: 8px; }
.legal .updated { color: var(--faint); font-size: 14px; line-height: 20px; margin-top: 12px; }
.legal .button { margin-top: 32px; }

/* ── Scroll reveals ───────────────────────────────────────── */
/* Added by the script only when motion is welcome, so the page never depends on it. */
.reveal {
  opacity: 0; transform: translateY(24px); filter: blur(12px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease), filter 800ms var(--ease);
}
.reveal.shown { opacity: 1; transform: none; filter: none; }
.cell.reveal:nth-child(3n + 2) { transition-delay: 80ms; }
.cell.reveal:nth-child(3n) { transition-delay: 160ms; }