/* Yappy — https://github.com/OperatingSystem-1/Yappy
   Copyright (C) 2026 ProxialGn. All rights reserved.
   SPDX-License-Identifier: LicenseRef-Proprietary

   This source is proprietary and confidential. Unauthorized copying,
   distribution, or modification of this file, via any medium, is strictly
   prohibited without the express written permission of ProxialGn. */

/* "Jev is now natively available in Yappy" (PJ 2026-09-19): the section the
   email blast to the Cloud Body users and the Luma guest list points at. One
   line, one Get Access pill that starts the DMG, and the four bar charts
   from /research/yappy-vs-heyclicky/ with their prose stripped — the charts
   are the argument, the study page holds the words. Bar colours and widths
   are the study's; change them there first. */

.jev,
.jev *,
.jev *::before,
.jev *::after {
  box-sizing: border-box;
}

.jev {
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 110px 32px 20px;
  scroll-margin-top: 24px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.jev-kicker {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.jev-h2 {
  margin: 0 auto;
  max-width: 22ch;
  color: #ffffff;
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.1;
  text-wrap: balance;
}

/* The word gets the study's Jev bar gradient, so the name on the page and
   the bar in the chart read as the same thing. */
.jev-h2 em {
  font-style: normal;
  background: linear-gradient(90deg, #7c5cff, #ff5c8a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Same pill as the hero's, so the two download CTAs on the page are one
   thing. Kept separate from .hero-cta because hero.css scopes its sizing
   and shadows to the hero stage. */
.jev-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 28px;
  padding: 15px 34px;
  background: #ffffff;
  color: #09090b;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 12px 32px -16px rgba(255, 255, 255, 0.25);
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.jev-cta svg {
  width: 1em;
  height: 1em;
  margin-top: -0.1em;
}
.jev-cta:hover {
  background: #e9e9ee;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 16px 40px -16px rgba(255, 255, 255, 0.35);
}
.jev-cta:active {
  transform: translateY(1px);
}
.jev-cta:focus-visible {
  outline: 2px solid var(--accent-a);
  outline-offset: 3px;
}

.jev-fine {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- the charts ---------- */
.jev-charts {
  margin: 56px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  text-align: left;
}

.jev-chart {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 16px;
}

.jev-ct {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.jev-bar {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}
.jev-who {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}
.jev-who small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.jev-track {
  position: relative;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}
.jev-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.jev-fill.h {
  background: linear-gradient(90deg, #c0392b, #e74c3c);
  color: #ffffff;
}
.jev-fill.y {
  background: var(--grad);
  color: #0b0b0e;
}
.jev-fill.j {
  background: linear-gradient(90deg, #7c5cff, #ff5c8a);
  color: #0b0b0e;
}
/* A bar too short to hold its number carries it just past the end. */
.jev-lab {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
}

.jev-source {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.jev-source a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jev-source a:hover {
  color: var(--text);
}

@media (max-width: 880px) {
  .jev {
    padding: 80px 20px 12px;
  }
  .jev-charts {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }
  .jev-cta {
    padding: 12px 26px;
    font-size: 15px;
  }
  .jev-fine {
    font-size: 12px;
  }
  .jev-bar {
    grid-template-columns: 84px minmax(0, 1fr);
  }
}