/* ============================================================
   Sulla Desktop — Developers page (builds on css/site.css)
   ============================================================ */

/* keep hero copy above the site.css .hero::before glow */
.dev-hero > .wrap { position: relative; }
.dev-hero .lead { margin: 20px auto 28px; max-width: 720px; }
.dev-actions { justify-content: center; }

.dev-p { color: var(--ink-2); font-size: 15px; }
.dev-ticks { list-style: none; display: grid; gap: 10px; color: var(--ink-2); font-size: 15px; }
.dev-ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.dev-ticks li::before { content: '✓'; color: var(--accent); font-weight: 800; }
.dev-ticks.star li::before { content: '★'; color: var(--warn); }

/* whitepaper */
.dev-paper { max-width: 880px; margin: 0 auto; padding: 40px; display: grid; gap: 14px; }
.dev-paper .h3 { margin-top: 14px; }
.dev-paper .h3:first-child { margin-top: 0; }
.dev-paper > p { color: var(--ink-2); }
.dev-timeline { list-style: none; display: grid; gap: 0; margin-top: 6px; }
.dev-timeline li { position: relative; padding: 0 0 22px 30px; border-left: 2px solid var(--line); margin-left: 7px; }
.dev-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.dev-timeline li::before {
  content: ''; position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.dev-timeline b { display: block; margin-bottom: 4px; }
.dev-timeline span { color: var(--ink-2); font-size: 15px; }

/* stats */
.dev-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 64px; }
.dev-stat { padding: 28px; text-align: center; display: grid; gap: 2px; }
.dev-stat b { font-size: 44px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; line-height: 1.1; }
.dev-stat .t { font-weight: 700; color: var(--ink); }
.dev-stat span { color: var(--muted); font-size: 14px; }
.dev-sub { margin-bottom: 24px; font-size: 26px; }
.compare .dev-p { margin: -6px 0 16px; }

/* revenue */
.dev-rev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dev-revcard { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.dev-revcard .pi { font-size: 30px; }
.dev-revcard p { color: var(--ink-2); font-size: 15px; flex: 1; }
.dev-amt { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; }
.dev-amt b { font-size: 26px; font-weight: 800; color: var(--accent); }
.dev-amt span { font-size: 13px; color: var(--muted); }

.dev-note {
  max-width: 880px; margin: 24px auto 0; padding: 18px 22px; border-radius: 14px;
  background: var(--accent-soft); color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.dev-note b { color: var(--accent); }

/* getting started */
.dev-block { max-width: 920px; margin: 0 auto; padding: 36px; display: grid; gap: 12px; }
.dev-block + .dev-block { margin-top: 24px; }
.dev-block .h3 { font-size: 22px; margin-bottom: 4px; }
.dev-block h4 { font-size: 16px; margin-top: 8px; }
.dev-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dev-cols h4 { margin: 0 0 12px; }
.dev-mini { margin-top: 10px; padding: 20px; border-radius: 14px; background: var(--bg-alt); border: 1px solid var(--line); }
.dev-code {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7; padding: 16px 18px; border-radius: 12px;
  background: var(--bg-alt); color: var(--ink); border: 1px solid var(--line); overflow-x: auto; white-space: pre;
}
.dev-code .c { color: var(--muted); }
.dev-code .k { color: var(--accent); font-weight: 600; }
.dev-code .s { color: var(--good); }
.dev-code .f { color: var(--warn); }
.dev-code .p { color: var(--ink-2); }
.dev-block code { font-family: var(--mono); font-size: .92em; padding: 2px 6px; border-radius: 6px; background: var(--bg-alt); }
.dev-tip { margin-top: 8px; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--ink-2); font-size: 14.5px; }

/* publish */
.dev-publish .pi { font-size: 36px; margin-bottom: 8px; }
.dev-pubstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 560px; margin: 0 auto 28px; }
.dev-pubstats div { padding: 16px; border-radius: 14px; background: var(--bg-alt); border: 1px solid var(--line); display: grid; }
.dev-pubstats b { font-size: 26px; font-weight: 800; color: var(--accent); }
.dev-pubstats span { font-size: 13px; color: var(--muted); }

/* resources */
.dev-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dev-rescard { padding: 28px; display: grid; gap: 8px; transition: transform .2s ease, border-color .2s ease; }
.dev-rescard:hover { transform: translateY(-3px); border-color: var(--accent); }
.dev-rescard .pi { font-size: 30px; }
.dev-rescard p { color: var(--ink-2); font-size: 15px; }

.dev-ask { margin-top: 22px; }
.dev-ask a { color: var(--accent); font-weight: 600; }

@media (max-width: 980px) {
  .dev-rev, .dev-res { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .dev-stats { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 720px) {
  .dev-paper, .dev-block { padding: 26px 20px; }
  .dev-cols, .dev-pubstats { grid-template-columns: 1fr; }
  .dev-code { font-size: 12.5px; }
}