/* ============================================================================
   Never Stall — the app's own skin, layered over /assets/ludyem.css.
   Link it AFTER the shared sheet on every /never-stall/ page.

   Everything here comes from ~/Developer/Rung/DESIGN.md section 3. Never invent
   a hex: if a value is not in that table it does not belong on this page. The
   shared sheet's look (indigo orbs, gradient headlines, pill buttons, emoji
   tiles) is the constellation default and is deliberately overridden, because
   the app is a dark instrument and a gradient is not one of its four ways of
   drawing depth.
   ========================================================================== */

:root {
  /* Ground and surface */
  --bg:        #0E1116;
  --bg2:       #0A0D12;
  --panel:     #161A22;
  --sunk:      #12151C;
  --border:    rgba(255,255,255,0.06);
  --line:      rgba(255,255,255,0.07);
  --card:      #161A22;
  --radius:    18px;

  /* Ink ramp */
  --text:      #EAF0F7;
  --muted:     #97A3B4;
  --ink3:      #7C8796;
  --faint:     #626D7D;

  /* Accent, and only ever for what DESIGN.md says */
  --cyan:      #35E0FF;   /* progress, XP, a completed check, the primary button */
  --violet:    #A87BFF;   /* a ceiling, a graduation */
  --orange:    #FF8A4C;   /* overdue, the streak flame */

  /* The six stats. None of them is cyan, so a cyan bar always means progress. */
  --str: #FF6A5E; --vit: #48E08A; --int: #FFD166;
  --foc: #6E8BFF; --spi: #A87BFF; --ord: #F06FB8;

  /* The shared sheet's four theming hooks, pointed at the app's accents.
     --grad-a/b are no longer a gradient: both resolve to cyan so any component
     still asking for one draws a flat accent instead. */
  --accent1: #35E0FF; --accent2: #A87BFF;
  --grad-a:  #35E0FF; --grad-b:  #35E0FF;
  --accent-soft: rgba(53,224,255,0.10);
  --accent-line: rgba(53,224,255,0.28);

  --font-ui:   "Sora", "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

body { font-family: var(--font-ui); background: var(--bg); color: var(--text); }

/* The ground the app draws: a dot grid, fixed, under everything. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ── Type ──────────────────────────────────────────────────────────────────
   Sora for everything that is words, IBM Plex Mono for every number, label
   and identifier. The mono is most of the personality, so it is applied by a
   single class rather than sprinkled per component. */
.mono {
  font-family: var(--font-mono); font-weight: 500;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3);
}

h1, h2, h3, .section-title, .cta-card h2 { letter-spacing: -0.02em; }
h1 { font-weight: 800; font-size: clamp(40px, 6.4vw, 72px); line-height: 1.05; }

/* No gradient text anywhere: the app has none. .grad stays as a hook so the
   markup reads the same across the constellation, but it draws flat cyan. */
.grad {
  background: none; -webkit-text-fill-color: currentColor; color: var(--cyan);
}

.section-label, .page-label, .faq-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; color: var(--cyan);
}
.page-label, .faq-label { color: var(--violet); }
.section-sub, .hero-sub { color: var(--muted); }
/* 560px orphaned "up." onto a third line under the How-it-works heading. */
.section-sub { max-width: 620px; }

/* ── Nav ── */
nav { background: rgba(14,17,22,0.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.logo { font-weight: 700; letter-spacing: -0.01em; }
.logo .logo-mark { background: none; border-radius: 9px; }
.nav-links a { font-size: 14px; }
.btn-nav {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink3); font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 16px;
}

/* ── Buttons.
   The app's primary is a cyan fill with dark ink and the one shadow left in
   the app (DESIGN.md, Depth). It is a 17px rounded rect, never a pill. ── */
.btn-primary {
  background: var(--cyan); color: #08131A; border-radius: 17px;
  padding: 15px 30px; font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  box-shadow: 0 10px 30px -12px rgba(53,224,255,0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(53,224,255,0.6); }
.btn-primary.is-soon {
  background: var(--sunk); color: var(--ink3); border: 1px solid var(--border);
  box-shadow: none; cursor: default;
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.btn-primary.is-soon:hover { transform: none; box-shadow: none; }
.btn-secondary { color: var(--muted); font-size: 15px; font-weight: 500; }
.btn-secondary:hover { color: var(--cyan); }
.btn-contact {
  background: var(--cyan); color: #08131A; border-radius: 14px; font-weight: 700;
  box-shadow: 0 10px 26px -14px rgba(53,224,255,0.55);
}

/* ── Panels. One fill per level: a 1px border and a flat fill, no shadow. ── */
.feature-card, .stats-bar, .app-card, .post-card, details, .author-box, .cmp-wrap {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.feature-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }

/* ── Hero ── */
.hero { padding: 120px 0 88px; }
.hero-badge {
  background: var(--sunk); border: 1px solid var(--border); color: var(--muted);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px;
}
.hero-badge-dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

/* The app's own shape, drawn once and very faintly behind the headline. */
.hero-hex {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: min(760px, 130%); height: auto; z-index: 0; pointer-events: none;
  color: var(--cyan); opacity: 0.045;
}
.hero .container > *:not(.hero-hex) { position: relative; z-index: 1; }

/* ── The ladder card.
   The one idea the product has, drawn instead of described. Lifted from the
   Climb screen's MOVING NEXT card: twelve rungs read in one look, filled to
   where you are, the ceiling in violet at the top. ── */
.ladder-card {
  max-width: 480px; margin: 48px auto 0; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px 20px;
}
.lc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.lc-head .rung { font-size: 12px; color: var(--muted); }
.lc-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.lc-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.lc-target { font-size: 14px; color: var(--cyan); }
.lc-target .to { color: var(--ink3); }

.rungs { display: flex; align-items: flex-end; gap: 6px; height: 46px; max-width: 300px; }
.rungs i {
  flex: 1; display: block; border-radius: 3px;
  background: rgba(255,255,255,0.10);
  /* Height is set per rung inline so the row reads as a climb, not a bar chart. */
}
.rungs i.on { background: var(--cyan); }
.rungs i.top { background: none; border: 1.5px solid var(--violet); opacity: 0.7; }
.lc-note { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.6; }
.lc-note b { color: var(--text); font-weight: 600; }

/* ── Screenshots. A 1px edge and a flat ground, the same way the app draws a
   panel. No device chrome: the shots already carry the app's own. ── */
.shots { display: flex; justify-content: center; align-items: flex-start; gap: 22px; margin: 64px auto 0; flex-wrap: wrap; }
.shot { width: 232px; }
.shot img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.09); background: var(--bg2);
}
.shot figcaption {
  margin-top: 12px; text-align: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3);
}
@media (max-width: 820px) { .shot { width: 200px; } .shots { gap: 16px; } }
@media (max-width: 560px) { .shots > .shot:nth-child(n+2) { display: none; } .shot { width: 250px; } }

/* ── Stats bar, as an instrument readout rather than four emoji ── */
.stats-bar { margin-top: 72px; background: var(--panel); }
.stat-item { padding: 26px 20px; border-right: 1px solid var(--border); }
.stat-num {
  background: none; -webkit-text-fill-color: currentColor; color: var(--text);
  font-family: var(--font-mono); font-weight: 600; font-size: 28px;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.stat-item.is-zero .stat-num { color: var(--cyan); }
.stat-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink3); margin-top: 8px;
}

/* ── Feature cards. The marks are drawn from the app's own vocabulary: rungs,
   the hexagon, a stat chip. No emoji — an emoji is somebody else's art. ── */
.alt { background: var(--bg2); }
.feature-card { padding: 28px; }
.feature-icon {
  width: 46px; height: 46px; border-radius: 13px; background: var(--sunk);
  border: 1px solid var(--border); margin-bottom: 18px;
}
.feature-icon svg { width: 22px; height: 22px; display: block; }
.feature-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.feature-card p { color: var(--muted); font-size: 14.5px; }
/* The stat chips, exactly as the app draws them: a 3-letter mono chip and
   nothing else. Stat colour is never a panel fill. */
.stat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.stat-chips span {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; padding: 3px 7px; border-radius: 6px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* ── CTA. A flat panel with a hairline, not a gradient card. ── */
.cta-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 24px;
  padding: 64px 40px;
}
.cta-card h2 { font-weight: 800; }
.cta-card p { color: var(--muted); margin-bottom: 36px; }
/* The shared sheet's `.cta-card p` (0,1,1) outranks a bare `.cta-note` (0,1,0),
   so the footnote inherited an 18px body size and a 44px bottom margin, which
   is what the empty half of this card was. Match its specificity. */
.cta-card .cta-note {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint);
  margin: 20px 0 0;
}

/* ── Footer and legal pages ── */
footer { border-top: 1px solid var(--border); }
.footer-links a, .footer-copy, .doc-foot p, .doc-foot a { color: var(--faint); }
.footer-links a:hover { color: var(--cyan); }
.doc-body a, .faq-body a { color: var(--cyan); }
.doc-body h2 { letter-spacing: -0.01em; }
.doc-body .updated, .contact-card p { color: var(--muted); }
.contact-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
details[open] { border-color: var(--accent-line); }
details[open] .summary-icon { color: var(--cyan); }
summary { font-family: var(--font-ui); font-weight: 600; }

@media (max-width: 700px) {
  .hero { padding: 76px 0 48px; }
  .ladder-card { padding: 18px 18px 16px; }
  .cta-card { padding: 52px 24px; }
}

/* ── The nav on a phone.
   "Ludyem / Never Stall" and the pill together exceed a 375px bar, and both
   were wrapping mid-phrase: the "/" orphaned onto its own line and the pill
   broken across two. Drop the app suffix on the narrowest bars and never let
   the pill break. ── */
.ns-suffix { color: var(--faint); font-size: 14px; font-weight: 400; }
.btn-nav { white-space: nowrap; }
@media (max-width: 600px) { .ns-suffix { display: none; } }