/* Shared styling for the marketing pages (/, /player, /extension).
   The login, waitlist and checkout pages are standalone card layouts and
   deliberately keep their own inline styles - they are app surfaces, not
   marketing, and shouldn't move whenever this file changes. */

:root { color-scheme: dark; }
* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #141317;
  color: #EDEBE6;
  margin: 0;
  line-height: 1.5;
}
a { color: inherit; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* Header */
header.site { padding: 24px 0; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font-size: 18px; font-weight: 700; letter-spacing: 0.2px; text-decoration: none; }
.wordmark span { color: #E37A83; }
/* Flex with a gap rather than margins on inline links: an inline link that
   wraps mid-phrase splits its background across both lines, which is exactly
   what the pill-shaped CTA did on a phone. Each item is nowrap, so the nav
   wraps between items and never through one. */
nav.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
}
nav.site-nav a {
  color: #9c9a97;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
nav.site-nav a:hover { color: #EDEBE6; }
nav.site-nav a.current { color: #EDEBE6; font-weight: 600; }
nav.site-nav a.nav-cta {
  color: #141317;
  background: #E37A83;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 8px;
}
@media (max-width: 620px) {
  header.site .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* The hero carries a large CTA a few hundred pixels below; a second one
     crammed into a wrapped nav on a phone is noise, not reach. */
  nav.site-nav a.nav-cta { display: none; }
}

/* Hero */
.hero { padding: 56px 0 64px; text-align: center; }
.hero .eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  color: #E37A83;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 14px;
}
.hero h1 {
  font-size: 40px;
  line-height: 1.15;
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.hero h1 .accent { color: #E37A83; }
.hero p.sub { font-size: 17px; color: #b9b7b3; max-width: 580px; margin: 0 auto 32px; }
@media (max-width: 620px) {
  .hero { padding: 36px 0 44px; }
  .hero h1 { font-size: 30px; }
  .btn-waitlist { font-size: 15.5px; padding: 15px 22px; }
}

/* Buttons */
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-row-secondary { margin-top: 22px; }
.cta-row-secondary .btn { font-size: 14px; padding: 10px 18px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary { background: #E37A83; color: #141317; }
.btn-secondary { background: #1D1C21; color: #EDEBE6; border-color: #2c2b30; }
.btn svg { width: 18px; height: 18px; flex: none; }
/* The waitlist is the primary action across the whole site: larger than the
   other buttons and given the accent fill, so it wins on contrast too. */
.btn-waitlist {
  max-width: 100%;
  text-align: center;
  background: #E37A83;
  color: #141317;
  font-size: 17px;
  font-weight: 800;
  padding: 16px 34px;
  border-radius: 10px;
  box-shadow: 0 10px 30px -8px rgba(227, 122, 131, 0.55);
}
.cta-note { margin-top: 14px; font-size: 13px; color: #6b6968; }

/* Sections */
section.block { padding: 56px 0; border-top: 1px solid #232227; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-head .eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  color: #E37A83;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 10px;
}
.section-head h2 { font-size: 26px; margin: 0 0 12px; }
.section-head p { color: #9c9a97; font-size: 15px; margin: 0; }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 680px) { .grid { grid-template-columns: 1fr; } }
.card {
  background: #1D1C21;
  border: 1px solid #232227;
  border-radius: 12px;
  padding: 24px;
}
.card .icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(227, 122, 131, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.card .icon svg { width: 18px; height: 18px; color: #E37A83; }
.card h3 { font-size: 16px; margin: 0 0 8px; }
.card p { font-size: 14px; color: #9c9a97; margin: 0; }

/* Product cards on the umbrella page - a card that is itself a link. */
a.product-card { text-decoration: none; display: block; transition: border-color .15s; }
a.product-card:hover { border-color: rgba(227, 122, 131, 0.55); }
.product-card .platform {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #E37A83;
  margin-bottom: 8px;
}
.product-card h3 { font-size: 19px; margin: 0 0 10px; }
.product-card .more { margin-top: 14px; font-size: 14px; font-weight: 700; color: #E37A83; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 680px) { .steps { grid-template-columns: 1fr; } }
.step { text-align: center; }
.step .num {
  counter-increment: step;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1D1C21;
  border: 1px solid #E37A83;
  color: #E37A83;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.step .num::before { content: counter(step); }
.step h3 { font-size: 15px; margin: 0 0 6px; }
.step p { font-size: 13px; color: #9c9a97; margin: 0; }

.centered { text-align: center; }
.small-note { margin-top: 16px; font-size: 13px; color: #6b6968; }

/* Footer */
footer.site { border-top: 1px solid #232227; padding: 28px 0; }
footer.site .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #6b6968;
}
footer.site a { color: #9c9a97; text-decoration: none; }
footer.site a:hover { color: #EDEBE6; }

/* Product illustrations
   Stylised diagrams of each app's layout, drawn inline as SVG - not
   screenshots. They stay honest about being illustrations (abstract bars
   stand in for body text), scale crisply, need no image assets, and can be
   swapped for real screenshots later without touching the layout. */
.shot {
  max-width: 780px;
  margin: 40px auto 0;
  border-radius: 14px;
  border: 1px solid #232227;
  background: #101014;
  padding: 14px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
}
.shot svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.shot-caption {
  margin: 14px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 13px;
  color: #6b6968;
}