/* Joying — marketing + download landing page
   Editorial / paper aesthetic on a dark stage. Sharp corners only.
   Color system (docs/joying-color-system.md):
     Paper  #f7f7f7  — everything you read, opacity steps for hierarchy
     Ember  #FF5722  — the ONLY interactive/accent color, used sparingly
     Orbit  #673AB7  — identity only, never interactive (logo mark, a thin rule)
     Night  #181818  — the stage
   No other hex values. No webfonts. No rounded corners. */

:root {
  --paper: #f7f7f7;
  --paper-60: rgba(247, 247, 247, 0.6);
  --paper-45: rgba(247, 247, 247, 0.45);
  --paper-30: rgba(247, 247, 247, 0.3);
  --hairline: rgba(247, 247, 247, 0.08);
  --hairline-strong: rgba(247, 247, 247, 0.14);
  --hover-fill: rgba(247, 247, 247, 0.05);

  --ember: #FF5722;
  --orbit: #673AB7;

  --night: #181818;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 56px);
}

/* Reset / base */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, p, dl, dd, ul { margin: 0; }

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

/* Sharp corners, everywhere */
* { border-radius: 0; }

/* Focus — restrained ember ring (spark is reserved for the app; a visible, on-brand ring) */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ember);
  color: var(--night);
  padding: 10px 16px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: var(--gutter);
  top: 10px;
}

/* Layout helpers */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-45);
  margin-bottom: 18px;
}

.section__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 18ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn--accent {
  background: var(--ember);
  color: var(--night);
  padding: 12px 22px;
}
/* Hover: darken ember slightly without introducing a new colour. */
.btn--accent:hover { filter: brightness(0.92); }
.btn--accent:active { transform: translateY(1px); }

.btn--sm { padding: 8px 16px; font-size: 0.86rem; }
.btn--lg { padding: 15px 30px; font-size: 1.02rem; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--night); /* solid fallback if color-mix unsupported */
  background: color-mix(in srgb, var(--night) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--paper);
}
.wordmark__mark {
  width: 14px;
  height: 14px;
  /* Solid orbit mark -- identity only, never interactive. */
  background: var(--orbit);
  flex: none;
}
.wordmark__logo {
  width: 30px;
  height: 30px;
  display: block;
  flex: none;
}
.wordmark__text {
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}

.topnav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
}
.topnav__link {
  text-decoration: none;
  color: var(--paper-60);
  font-size: 0.92rem;
  font-weight: 600;
  transition: color 120ms ease;
}
.topnav__link:hover { color: var(--paper); }

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(64px, 12vw, 132px) clamp(56px, 10vw, 104px);
  border-bottom: 1px solid var(--hairline);
  /* very subtle dark vignette, the only permitted gradient on a surface */
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(247, 247, 247, 0.04), transparent 60%);
}
.hero__title {
  font-size: clamp(2.3rem, 7vw, 4.6rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: 26px;
}
.hero__standfirst {
  font-size: clamp(1.02rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--paper-60);
  max-width: 56ch;
  margin-bottom: 38px;
}
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-45);
}
.hero__version {
  color: var(--paper);
  padding-right: 12px;
  border-right: 1px solid var(--hairline-strong);
}
.hero__osnote,
.download__osnote {
  font-size: 0.84rem;
  color: var(--paper-45);
  margin: 0;
}

/* ---------- Features ---------- */
.features {
  padding-block: clamp(56px, 10vw, 104px);
  border-bottom: 1px solid var(--hairline);
}
.features .section__title { margin-bottom: clamp(36px, 6vw, 56px); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* hairlines act as dividers via the gap background trick */
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.feature {
  background: var(--night);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature__no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--paper-30);
}
.feature__title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.feature__body {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--paper-60);
  max-width: 38ch;
}

/* ---------- Download ---------- */
.download {
  padding-block: clamp(64px, 11vw, 120px);
}
.download__inner { max-width: 760px; }
.download__lead {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--paper-60);
  max-width: 52ch;
  margin: 14px 0 34px;
}
.download__facts {
  margin-top: 40px;
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.download__fact {
  background: var(--night);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 18px clamp(18px, 2.5vw, 26px);
  align-items: baseline;
}
.download__fact dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-45);
}
.download__fact dd {
  font-size: 0.96rem;
  color: var(--paper);
}

/* ---------- Footer ---------- */
.footer { padding-bottom: 48px; }
.footer__rule {
  height: 2px;
  /* identity-only orbit rule above the footer */
  background: var(--orbit);
  opacity: 0.55;
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 28px;
}
.footer__copy {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--paper-45);
}
.footer__links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.86rem;
}
.footer__links a {
  text-decoration: none;
  color: var(--paper-60);
  transition: color 120ms ease;
}
.footer__links a:hover { color: var(--paper); }
.footer__sep {
  width: 1px;
  height: 12px;
  background: var(--hairline-strong);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }
  .download__fact {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .topnav__link { display: none; }
  .topnav { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ===========================================================================
   Kinetic brand hero
   "Joying" centered between two rails of sharp colour bars that drift in
   OPPOSITE directions. Bars are hard-edged (repeating-linear-gradient, no
   blur). --spark (yellow) lives ONLY here — never on anything interactive.
   Motion is slow + linear, and switched off under prefers-reduced-motion.
   =========================================================================== */
:root { --spark: #FFEB3B; }

.hero { text-align: center; }
.hero__lead { display: flex; flex-direction: column; align-items: center; }
.hero .eyebrow { margin-bottom: 14px; }
.hero__title { max-width: 22ch; }
.hero__standfirst { margin-inline: auto; }
.hero__cta { align-items: center; }
.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.brandband {
  display: grid;
  gap: clamp(10px, 1.6vw, 18px);
  margin-bottom: clamp(36px, 6vw, 64px);
}
.brandband__word {
  font-size: clamp(3.4rem, 17vw, 12rem);
  line-height: 0.86;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-align: center;
  margin: 0;
  padding-inline: var(--gutter);
}
.brandband__rail {
  height: clamp(14px, 2.4vw, 26px);
  background-repeat: repeat-x;
}
/* two different patterns + speeds so the rails don't look mirrored */
.brandband__rail--a {
  background-image: repeating-linear-gradient(90deg,
    var(--ember) 0 112px, transparent 112px 156px,
    var(--orbit) 156px 296px, transparent 296px 340px,
    var(--spark) 340px 430px, transparent 430px 486px,
    var(--paper) 486px 540px, transparent 540px 612px);
  animation: railLeft 30s linear infinite;
}
.brandband__rail--b {
  background-image: repeating-linear-gradient(90deg,
    var(--orbit) 0 96px, transparent 96px 150px,
    var(--spark) 150px 252px, transparent 252px 300px,
    var(--ember) 300px 408px, transparent 408px 452px,
    var(--paper) 452px 500px, transparent 500px 560px);
  animation: railRight 24s linear infinite;
}
@keyframes railLeft  { to { background-position-x: -612px; } }
@keyframes railRight { to { background-position-x:  560px; } }

/* ---------- Showcase (app mock) ---------- */
.showcase {
  padding-block: clamp(56px, 10vw, 104px);
  border-bottom: 1px solid var(--hairline);
}
.showcase__lead {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--paper-60);
  max-width: 52ch;
  margin: 14px 0 clamp(36px, 6vw, 56px);
}
/* The app's chat UI is ROUNDED (unlike the sharp landing page). These class rules
   out-specify the global `* { border-radius: 0 }`, so they win. Colours, radii and
   shapes mirror the real app (.message-avatar circle, .message-bubble 4/20/20/20 on
   #1E1F22, .chat-composer pill, the unread-notification ember rule). */
.appmock {
  position: relative;
  max-width: 760px;
  margin-top: clamp(28px, 4vw, 48px);
}

/* --- app window --- */
.appmock__win {
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: var(--night);
  overflow: hidden;
}
.appmock__titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--hairline);
}
.appmock__titlebar-mark {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--ember), var(--orbit));
}
.appmock__titlebar-name { font-weight: 800; font-size: 0.9rem; letter-spacing: -0.01em; }

/* --- DM header --- */
.appmock__dmhead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hairline);
}
.appmock__dmname { font-weight: 800; }
.appmock__dmsub {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-45);
}

/* --- circle gradient avatar with initial (mirrors the app's message avatar) --- */
.appmock__avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ember) 0%, var(--orbit) 100%);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.05rem;
}
.appmock__avatar--sm { width: 34px; height: 34px; font-size: 0.82rem; }

/* --- thread + message --- */
.appmock__thread { padding: clamp(18px, 3vw, 26px); }
.appmock__msg { display: flex; gap: 16px; align-items: flex-start; }
.appmock__msgcontent { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.appmock__msghead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.appmock__sender { font-weight: 800; color: #fff; font-size: 0.96rem; }
.appmock__badge {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-60);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  padding: 2px 6px;
}
.appmock__time { font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.4); }

/* speech-bubble — the app's exact shape + colour */
.appmock__bubble {
  align-self: flex-start;
  max-width: 60ch;
  padding: 9px 14px;
  border-radius: 4px 18px 18px 18px;
  background: #1E1F22;
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  line-height: 1.5;
  font-size: 0.95rem;
}
.appmock__bubble + .appmock__bubble { margin-top: 6px; border-radius: 18px; }

/* composer — rounded #1E1F22 pill with an icon tool, no Send button (matches app) */
.appmock__composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 18px 18px;
  padding: 8px 12px;
  background: #1E1F22;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.appmock__tool {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--paper-45);
  font-size: 1.2rem;
  line-height: 1;
}
.appmock__input { flex: 1; color: var(--paper-45); font-size: 0.92rem; }

/* notification toast — floats over the top of the window; the app's unread style
   (ember left rule + soft lift). This is the "notification on top". */
.appmock__toast {
  position: absolute;
  top: -16px;
  right: clamp(10px, 4%, 28px);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(340px, 84%);
  padding: 12px 14px;
  background: #1c1c1f;
  border: 1px solid var(--hairline-strong);
  border-left: 2px solid var(--ember);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.appmock__toast-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ember), var(--orbit));
  color: var(--paper);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 0.82rem;
}
.appmock__toast-body { min-width: 0; flex: 1; }
.appmock__toast-line { font-size: 0.82rem; color: rgba(247, 247, 247, 0.85); line-height: 1.35; }
.appmock__toast-line strong { color: #f4f4f4; font-weight: 700; }
.appmock__toast-preview {
  margin-top: 2px;
  font-size: 0.78rem;
  color: rgba(247, 247, 247, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appmock__toast-time {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--paper-45);
}

/* ---------- Secondary (ghost) button — paper hairline, introduces no colour ---------- */
.btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--hairline-strong);
}
.btn--ghost:hover { border-color: var(--paper-45); background: var(--hover-fill); }

@media (max-width: 600px) {
  .brandband__rail { height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .brandband__rail--a,
  .brandband__rail--b { animation: none; }
}