/* Chorez marketing site — shared styles.
   Tokens lifted from web/src/styles.css :root so the site matches the shipped
   "Pop" design system. Dark-first, mint-on-near-black. Self-hosted fonts only:
   no CDN, no external requests — privacy is a selling point on this site and a
   tracker-free page has to actually be tracker-free. */

@import url('./fonts/fonts.css');

:root {
  color-scheme: dark;
  --bg: #0a0a0f;
  --surface: #14141c;
  --surface-2: #17171f;
  --border: #2c2c38;
  --text: #f6f6fb;
  --muted: #8f8fa0;
  --muted-2: #6a6a7a;

  --accent: #5cf29a;
  --accent-ink: #04120a;
  --accent-grad: linear-gradient(150deg, #7dffb0, #3fe884);
  --glow-accent: 0 8px 24px -6px rgba(92, 242, 154, .45);

  --warn: #ffcf5c;
  --danger: #ff7a7a;

  --r-card: 20px;
  --r-btn: 16px;
  --r-pill: 999px;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-ui: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-meta: 'Space Grotesk', system-ui, monospace;

  --shadow-card: 0 24px 50px -18px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 720px; }

/* ---- header / nav ---- */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 0 10px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 800; font-size: 23px; letter-spacing: -0.03em;
  color: var(--text); text-decoration: none;
}
.brand span { color: var(--accent); }
.site-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-nav a {
  color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 600;
}
.site-nav a:hover { color: var(--text); }

/* ---- type ---- */

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.03em; line-height: 1.1; }
h1 { font-size: clamp(34px, 6vw, 60px); font-weight: 800; margin: 0 0 18px; }
h2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; margin: 0 0 14px; }
h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
p { margin: 0 0 16px; }
a { color: var(--accent); }
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); max-width: 62ch; }
.money { font-family: var(--font-meta); font-weight: 700; color: var(--accent); }
.eyebrow {
  font-family: var(--font-meta); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
  margin: 0 0 12px;
}

/* ---- sections ---- */

section { padding: 64px 0; border-top: 1px solid var(--border); }
section:first-of-type { border-top: 0; }
.hero { padding: 56px 0 72px; border-top: 0; }

/* ---- hero layout: copy left, tilted device right ---- */

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.hero-copy { min-width: 0; }

/* In the two-column hero the headline gets a narrower measure than a
   full-width h1, so it needs a smaller ceiling — at 60px it wrapped to seven
   lines and pushed the device below the fold. */
.hero-copy h1 { font-size: clamp(32px, 3.9vw, 50px); }
.hero-copy .lede { font-size: clamp(17px, 1.5vw, 19px); }

/* ---- the device ----
   A CSS-built iPhone frame around a real app screenshot, tilted in 3D. The
   frame is drawn rather than shipped as an image so it stays crisp at any size
   and adds no bytes. The screenshot itself is the parent board — chosen over
   the payout-celebration shot because that one still has the PWA
   "add to home screen" banner baked into it. */

.device-stage {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1500px;
  padding: 20px 0;
  /* The bloom below is wider than the stage on purpose, and the device's
     shadow spreads past it too. Without this the page picked up ~19px of
     horizontal scroll at narrow widths. `clip` rather than `hidden` so this
     never becomes a scroll container in its own right. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Ambient mint bloom behind the phone. Sits under everything, never
   intercepts a click. */
.device-stage::before {
  content: '';
  position: absolute;
  width: 118%; height: 74%;
  background: radial-gradient(ellipse at 50% 50%, rgba(92, 242, 154, .26), rgba(92, 242, 154, .07) 42%, transparent 70%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}

.device {
  position: relative;
  z-index: 1;
  width: min(298px, 74vw);
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(150deg, #3a3a46, #16161d 38%, #0d0d12 62%, #33333e);
  box-shadow:
    0 50px 90px -30px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(255, 255, 255, .07) inset,
    0 22px 60px -24px rgba(92, 242, 154, .38);
  transform: rotateY(-17deg) rotateX(7deg) rotateZ(-3.5deg);
  transform-style: preserve-3d;
  /* Very subtle yaw drift — ±1.5deg over 12s. No vertical travel: this should
     read as the object settling in space, not bouncing. */
  animation: device-drift 12s ease-in-out infinite;
}

@keyframes device-drift {
  0%, 100% { transform: rotateY(-18.5deg) rotateX(7deg) rotateZ(-3.5deg); }
  50%      { transform: rotateY(-15.5deg) rotateX(6.4deg) rotateZ(-3deg); }
}
.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 36px;
}

/* Specular sheen across the glass. */
.device::after {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 36px;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 22%, transparent 46%);
  pointer-events: none;
}

/* Side buttons, for the detail that sells the frame. */
.device .btn-vol, .device .btn-pwr {
  position: absolute;
  width: 3px;
  background: linear-gradient(180deg, #4a4a57, #24242d);
  border-radius: 3px;
}
.device .btn-vol { left: -3px; top: 132px; height: 62px; }
.device .btn-pwr { right: -3px; top: 158px; height: 84px; }

@media (prefers-reduced-motion: reduce) {
  .device { animation: none; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .device-stage { order: 2; }
}

/* ---- buttons ---- */

.btn {
  display: inline-block; padding: 15px 26px; border-radius: var(--r-btn);
  font-weight: 800; font-size: 17px; text-decoration: none;
  background: var(--accent-grad); color: var(--accent-ink);
  box-shadow: var(--glow-accent); border: 0;
}
.btn:hover { filter: brightness(1.06); }
.btn.secondary {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); box-shadow: none;
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 26px 0 10px; }
.cta-note { color: var(--muted-2); font-size: 15px; }

/* ---- cards / grids ---- */

.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 24px;
}
.card h3 { margin-bottom: 6px; }
.card p:last-child { margin-bottom: 0; }
.card .num {
  font-family: var(--font-meta); font-size: 13px; font-weight: 700;
  color: var(--accent); display: block; margin-bottom: 10px;
}

/* ---- steps ---- */

.steps { counter-reset: step; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.steps li {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px 16px 58px; position: relative;
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 18px; top: 16px;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-meta); font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
}
.steps strong { display: block; }

/* ---- pricing ---- */

.price-card {
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--r-card); padding: 30px; max-width: 460px;
  box-shadow: var(--shadow-card);
}
.price {
  font-family: var(--font-meta); font-size: 44px; font-weight: 700;
  color: var(--accent); line-height: 1; margin: 6px 0 2px;
}
.price small { font-size: 17px; color: var(--muted); font-weight: 500; }
.price-card ul { padding-left: 20px; margin: 16px 0 0; }
.price-card li { margin: 7px 0; }

/* ---- tables (compare pages) ---- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 16px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-family: var(--font-meta); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
td.yes { color: var(--accent); font-weight: 700; }
td.no { color: var(--muted-2); }

/* ---- faq ---- */

.faq h3 { margin-top: 26px; }
.faq p { color: var(--muted); }

/* ---- footer ---- */

.site-footer {
  border-top: 1px solid var(--border); margin-top: 40px;
  padding: 30px 0 60px; color: var(--muted-2); font-size: 14px; line-height: 1.6;
}
.site-footer a { color: var(--muted); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.disclaimer { max-width: 76ch; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  section { padding: 46px 0; }
}