/* evolens.app home: Figma 223KnKRHY9zoEcaprJbIGR, node 2395:6769 (440 × 1428, iPhone 16/17 Pro Max).
   Values are Figma's. The frame's top 62 pt is the iOS status bar, so in a browser the page starts 62 pt higher. */
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/instrument-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #f9fafb;
  --ink: #181818;
  --night: #1b1b1b;
  --night-deep: #141414;
  --night-line: #1f1f1f;
  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --track: -0.04em;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--night); }

body {
  margin: 0;
  background: var(--night);
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
}

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

a:focus-visible, .gallery:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

ul { list-style: none; margin: 0; padding: 0; }

/* The footer reaches the bottom of a tall window. */
.page { min-height: 100vh; display: flex; flex-direction: column; }

/* The white card: nav, headline, badge, and the gallery running off its rounded bottom edge. */
.hero {
  background: var(--paper);
  color: var(--ink);
  border-radius: 0 0 35px 35px;
  overflow: hidden;
  padding-top: max(12px, env(safe-area-inset-top));
}

.hero__nav {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-right)) 0 max(30px, env(safe-area-inset-left));
  font-size: 16px;
  line-height: 20px;
}

.hero__title {
  max-width: 344px;
  margin: 43px auto 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -1.28px;
  text-align: center;
}

.badge {
  display: block;
  width: 146px;
  height: 48px;
  margin: 26px auto 0;
}

.badge img { display: block; width: 146px; height: 48px; }

.badge--soon { position: relative; }

.badge__note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
  opacity: 0.55;
}

/* Two app screens side by side, 21 pt apart, cut off by the card's bottom edge (633 of their 688 pt). On a phone the
   first is centred and the second peeks in from the right; they scroll sideways. */
.gallery {
  margin-top: 36px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.gallery::-webkit-scrollbar { display: none; }

.gallery__track {
  display: flex;
  gap: 21px;
  width: max-content;
  padding: 0 calc((100vw - 325px) / 2);
}

.screen {
  display: block;
  flex: none;
  width: 325px;
  height: 633px;
  border-radius: 24px 24px 0 0;
  scroll-snap-align: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* My Cards, at the 325 pt phone's scale (Figma 2395:7216). */
.cards-screen { position: relative; overflow: hidden; background: #0f0f0f; }

.cs { position: absolute; left: 0; top: -2.07px; width: 325px; height: 706px; color: #fff; }

.cs img { display: block; }

.cs__status {
  position: absolute;
  left: 14.03px;
  top: 0;
  width: 296.93px;
  height: 45.8px;
  display: flex;
  align-items: center;
  gap: 113.75px;
  padding: 15.5px 17.73px 14.03px;
}

.cs__time, .cs__levels { flex: 1 0 0; display: flex; justify-content: center; align-items: center; }

.cs__time {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  font-size: 12.56px;
  font-weight: 590;
  letter-spacing: 0;
  line-height: 16.25px;
  padding-top: 1.1px;
}

.cs__levels { gap: 5.17px; height: 16.25px; padding: 0.74px 0.74px 0 0; }

.cs__battery { margin-left: -0.35px; }

.cs__brand { position: absolute; left: 18.47px; top: 57.61px; width: 23.64px; height: 23.64px; }

.cs__mark { position: absolute; inset: 0; }

.cs__mark img { position: absolute; left: -88.64px; top: -88.64px; }

.cs__word {
  position: absolute;
  left: 28.81px;
  top: -1.11px;
  color: #f9f9f9;
  font-size: 19.2px;
  letter-spacing: -1.15px;
  white-space: nowrap;
}

.cs__actions { position: absolute; left: 227.5px; top: 60.57px; display: flex; gap: 14.03px; }

.cs__tabs {
  position: absolute;
  left: 21.42px;
  top: 99.72px;
  width: 277.73px;
  display: flex;
  justify-content: space-between;
  font-size: 10.34px;
  letter-spacing: -0.21px;
  line-height: 13px;
  white-space: nowrap;
}

.cs__tab { color: rgb(255 255 255 / 0.4); display: flex; align-items: center; gap: 4.43px; }

.cs__tab--on { color: #fff; }

.cs__count {
  background: #202020;
  border-radius: 5.17px;
  padding: 1.48px 2.95px;
  font-size: 8.13px;
  font-weight: 500;
  line-height: 10px;
  letter-spacing: -0.16px;
}

.cs__tab-line { position: absolute; left: 18.47px; top: 122.06px; }

.cs__rule { position: absolute; left: 0; top: 122.49px; }

.cs__sort {
  position: absolute;
  left: 8.13px;
  top: 130.74px;
  width: 306.53px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4.43px 7.39px;
}

.cs__sort-label {
  display: flex;
  align-items: center;
  gap: 1.48px;
  color: #e4e4e4;
  font-size: 9.6px;
  font-weight: 500;
  letter-spacing: -0.19px;
  line-height: 12px;
}

.cs__grid {
  position: absolute;
  left: 10.34px;
  top: 159.55px;
  width: 304.32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8.86px;
  align-items: center;
}

.cs__grid img { width: 100%; aspect-ratio: 660 / 920; object-fit: cover; border-radius: 4.43px; }

.cs__grid .cs__r5 { border-radius: 5.17px; }

.cs__grid .cs__wide { aspect-ratio: 640 / 890; border-radius: 3.69px; box-shadow: 0 0.74px 44.32px rgb(0 0 0 / 0.12); }

.cs__dock { position: absolute; left: 50%; top: 637.44px; transform: translateX(-50%); display: flex; align-items: center; gap: 10.34px; }

.cs__pill {
  display: flex;
  gap: 17.73px;
  padding: 13.3px 17.73px;
  border-radius: 29.55px;
  background: rgb(40 40 40 / 0.95);
  box-shadow: 0 0 11.08px rgb(0 0 0 / 0.15), inset 0 0 17.21px rgb(255 255 255 / 0.07);
}

.cs__pill--round { padding: 14.77px; }

/* The dark footer: 35 pt under the card, its own rounded top. */
.foot {
  margin-top: 35px;
  background: var(--night-deep);
  border-top: 1px solid var(--night-line);
  border-radius: 35px 35px 0 0;
  padding: 63px 0 max(58px, env(safe-area-inset-bottom));
  color: #fff;
  overflow: hidden;
  flex: 1 0 auto;
}

.foot .badge { margin-top: 0; }

.foot__links {
  display: flex;
  justify-content: space-between;
  width: 317px;
  margin: 69px auto 0;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.64px;
}

.foot__links ul { display: flex; flex-direction: column; gap: 25px; }

.foot__social { font-weight: 600; width: 72px; }

.foot__legal { font-weight: 500; color: rgb(255 255 255 / 0.5); width: 57px; }

.foot__legal a:hover, .foot__social a:hover { color: #fff; opacity: 0.8; }

.foot__marquee {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 69px;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: -0.56px;
  white-space: nowrap;
}

.foot__marquee span:nth-child(1), .foot__marquee span:nth-child(9) { color: rgb(255 255 255 / 0.05); }
.foot__marquee span:nth-child(2), .foot__marquee span:nth-child(8) { color: rgb(255 255 255 / 0.15); }
.foot__marquee span:nth-child(3), .foot__marquee span:nth-child(7) { color: rgb(255 255 255 / 0.35); }
.foot__marquee span:nth-child(4), .foot__marquee span:nth-child(6) { color: rgb(255 255 255 / 0.66); }
.foot__marquee span:nth-child(5) { color: rgb(255 255 255 / 0.85); }

/* Wider screens: the same column, centred; both screens shown whole side by side, no scrolling. */
@media (min-width: 700px) {
  .hero { padding-top: 32px; }
  .hero__title { margin-top: 72px; max-width: 520px; font-size: 48px; letter-spacing: -1.92px; }
  .badge { margin-top: 32px; }
  .gallery { margin-top: 56px; overflow: visible; scroll-snap-type: none; }
  .gallery__track { margin: 0 auto; padding: 0; }
}