/* BonusLevel.dev — shared styles
   Toned-down brutalist aesthetic: bold headline type + hairline rules.
   No rounded corners, no shadows, no card containers. */

:root {
  --bg: #f4f2ec;
  --text: #111;
  --text-2: #444;
  --text-3: #555;
  --text-4: #666;
  --border: #111;
  --border-soft: rgba(17, 17, 17, .15);
  --pink: #e0468e;
  --teal: #1eab8f;
  --font: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  --pad-lg: clamp(30px, 6vw, 60px) clamp(20px, 5vw, 48px);
  --pad-split: clamp(24px, 4vw, 40px);
  --pad-nav: 20px clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; }

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

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, p { margin: 0; }

img { max-width: 100%; }

/* Logo mark: 3x3 pixel grid */
.bl-mark {
  display: grid;
  grid-template-columns: repeat(3, 7px);
  grid-template-rows: repeat(3, 7px);
  gap: 2px;
  flex: none;
}
.bl-p { width: 7px; height: 7px; border-radius: 1px; }
.bl-p--1 { background: var(--text); grid-column: 1; grid-row: 1; }
.bl-p--2 { background: var(--text); grid-column: 2; grid-row: 1; }
.bl-p--3 { background: var(--text); grid-column: 3; grid-row: 1; }
.bl-p--4 { background: var(--pink); grid-column: 2; grid-row: 2; }
.bl-p--5 { background: var(--pink); grid-column: 3; grid-row: 2; }
.bl-p--6 { background: var(--pink); grid-column: 3; grid-row: 3; }

/* Nav */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-nav);
  border-bottom: 1px solid var(--border);
}
.logo { display: flex; align-items: center; gap: 8px; }
.wordmark {
  font: 800 20px var(--font);
  letter-spacing: -.02em;
}
.wordmark span { color: var(--pink); }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  font: 500 13px var(--font);
  letter-spacing: .02em;
  flex-wrap: wrap;
}
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* Section helpers */
.section { border-bottom: 1px solid var(--border); }
.section--pad { padding: var(--pad-lg); }
.section--pad-tight { padding: var(--pad-lg); padding-bottom: 0; }
.section--flush { border-bottom: none; }

/* Hero */
.hero {
  border-bottom: 1px solid var(--border);
  padding: var(--pad-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.hero h1 {
  font: 800 clamp(36px, 7vw, 80px) / 1 var(--font);
  letter-spacing: -.03em;
}
.hero--page h1 {
  font: 800 clamp(32px, 6vw, 64px) / 1 var(--font);
  letter-spacing: -.03em;
}
.hero p.lede {
  margin-top: 18px;
  max-width: 46ch;
  font: 400 16px/1.6 var(--font);
  color: var(--text-2);
}

/* Two-column split (shipped / in progress) */
.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cell {
  padding: var(--pad-split);
  border-bottom: 1px solid var(--border);
}
.cell--shipped {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cell--progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
@media (max-width: 620px) {
  .cell--shipped { border-right: none; }
}

.pill {
  font: 600 11px var(--font);
  letter-spacing: .15em;
  background: var(--text);
  color: var(--bg);
  display: inline-block;
  padding: 5px 10px;
  width: fit-content;
}
.app-screens {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1.6vw, 14px);
}
.app-screen {
  width: clamp(72px, 22%, 104px);
  height: auto;
  display: block;
  border: 1px solid var(--border);
  flex: none;
}
.app-visual {
  flex: 1 1 100px;
  min-width: 72px;
  align-self: stretch;
  background: #005cb9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-visual-icon {
  width: 56%;
  max-width: 110px;
  aspect-ratio: 1 / 1;
  border-radius: 22%;
  display: block;
}
@media (max-width: 520px) {
  .app-screen:not(:first-child) { display: none; }
  .app-screen:first-child { width: clamp(120px, 42vw, 170px); }
}
.app-name { font: 700 20px var(--font); }
.app-desc { font: 400 14px var(--font); color: var(--text-3); margin-top: 6px; }

.link-underline {
  font: 600 13px var(--font);
  text-decoration: underline;
  text-underline-offset: 4px;
  width: fit-content;
}

.label-progress {
  font: 600 11px var(--font);
  letter-spacing: .15em;
  color: var(--pink);
}
.progress-statement { font: 700 22px/1.2 var(--font); }

/* About teaser split (also reused as generic two-col content block) */
.two-col {
  border-bottom: 1px solid var(--border);
  padding: var(--pad-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  align-items: center;
}
.two-col h2 {
  font: 800 clamp(26px, 3.5vw, 38px) / 1.1 var(--font);
  letter-spacing: -.02em;
}
.two-col p {
  font: 400 15px/1.7 var(--font);
  color: var(--text-2);
}

/* Devlog preview list */
.devlog-label,
.eyebrow {
  font: 600 11px var(--font);
  letter-spacing: .15em;
  color: var(--text-4);
}
.devlog-list { margin-top: 20px; display: flex; flex-direction: column; }
.devlog-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: baseline;
}
.devlog-row:last-child { border-bottom: none; }
.devlog-date { font: 500 13px var(--font); color: var(--text-4); width: 110px; }
.devlog-title { font: 600 17px var(--font); }

/* App icon showcase (Home) */
.apps-strip {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 40px);
}
.app-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 108px;
}
.app-icon-img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 1px solid var(--border);
  display: block;
}
.app-tile-name { font: 600 14px/1.3 var(--font); }

/* Value / principle cards (About page) */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.value-card {
  padding: var(--pad-split);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.value-card:last-child { border-right: none; }
.value-card .bl-mark { transform: scale(1.4); transform-origin: left top; margin-bottom: 6px; }
.value-title { font: 700 17px var(--font); }
.value-desc { font: 400 14px/1.6 var(--font); color: var(--text-3); }

/* FAQ (Support page) */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--border-soft);
}
.faq-item:last-child { border-bottom: none; }
.faq-q { font: 700 17px var(--font); }
.faq-a { margin-top: 8px; font: 400 15px/1.65 var(--font); color: var(--text-2); max-width: 60ch; }

.support-cta {
  padding: var(--pad-lg);
}
.support-cta .eyebrow { display: block; margin-bottom: 12px; }
.support-cta p { font: 400 15px/1.7 var(--font); color: var(--text-2); max-width: 52ch; }
.support-cta a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.two-col.section--flush,
.hero.section--flush { border-bottom: none; }

/* Footer */
.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad-nav);
  border-top: 1px solid var(--border);
}
.footer span { font: 500 12px var(--font); color: var(--text-3); }