/* Blockbout site — shared styles. Tokens live in tokens.css (Hallmark stamp there). */

*,
*::before,
*::after { box-sizing: border-box; margin: 0; }

html { overflow-x: clip; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 1rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ink-deep);
  overflow-wrap: anywhere;
  min-width: 0;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -3.5rem;
  z-index: var(--z-sticky);
  background: var(--color-ink-deep);
  color: var(--color-paper);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-chip);
  text-decoration: none;
  white-space: nowrap;
}
.skip-link:focus-visible { top: var(--space-sm); }

/* ---------- Nav · N7 brutal slab ---------- */

.nav-slab {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--page-gutter);
  border-bottom: var(--rule-slab) solid var(--color-ink-deep);
  background: var(--color-paper);
}
.slab-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-ink-deep);
}
.slab-mark b {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.3em;
  background: var(--color-accent);
  border: 2px solid var(--color-ink-deep);
  vertical-align: baseline;
}
.slab-nav { margin-left: auto; }
.slab-nav ul {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
}
.slab-nav a {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-ink);
  padding-block: var(--space-2xs);
}
.slab-nav a:hover { color: var(--color-ink-deep); box-shadow: 0 2px 0 0 var(--color-accent-deep); }
.slab-nav a[aria-current="page"] { box-shadow: 0 2px 0 0 var(--color-accent-deep); }

/* ---------- Buttons ---------- */

.btn-fill,
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-weight: 650;
  font-size: var(--text-base);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-chip);
  transition: background-color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
.btn-fill {
  background: var(--color-accent);
  color: var(--color-ink-deep);
  border: 2px solid var(--color-ink-deep);
}
.btn-fill:hover { background: var(--color-accent-deep); transform: translateY(-1.5px); }
.btn-fill:active { transform: translateY(1px); }
.btn-outline {
  background: transparent;
  color: var(--color-ink-deep);
  border: 1.5px solid var(--color-ink);
}
.btn-outline:hover { background: var(--color-paper-2); transform: translateY(-1.5px); }
.btn-outline:active { transform: translateY(1px); }

/* ---------- Hero · H2 split diptych 7/5 ---------- */

.hero-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
  max-width: 72rem;
  margin-inline: auto;
}
.hero-name {
  /* The vw cap only binds under text-only zoom on narrow viewports: rem
   * grows with zoom, vw does not, so the non-wrapping wordmark can never
   * outgrow the screen (Codex P2, WCAG 1.4.4). */
  font-size: min(var(--text-display), 17vw);
  font-weight: 800;
  white-space: nowrap;
}
/* Pixar-lamp wordmark gag, in game terms: a gold piece drops in from
 * above, bounces along the letter tops (squash at every touch, stretch in
 * the air), then slams into the second "o" — flattening the letter and
 * taking its place, exactly like a block landing in its slot. One-shot on
 * load; both animations share one clock so the squished letter and the
 * landing block stay in sync. Reduced motion renders the settled wordmark
 * (block already in the slot) with no motion. */
.o-slot { position: relative; display: inline-block; }
.o-slot__letter {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: o-squish 1.6s linear 300ms both;
}
.o-slot__block {
  position: absolute;
  left: 50%;
  bottom: 0.02em;
  width: 0.56em;
  height: 0.54em;
  margin-left: -0.28em;
  background: var(--color-accent);
  border: 0.05em solid var(--color-ink-deep);
  border-radius: 0.07em;
  box-shadow: inset 0.045em 0.045em 0 var(--color-accent-hi);
  transform-origin: 50% 100%;
  animation: block-hop 1.6s linear 300ms both;
}
@keyframes block-hop {
  0%   { translate: -3.4em -2.4em; scale: 0.92 1.15; opacity: 0; animation-timing-function: var(--ease-in); }
  5%   { opacity: 1; }
  13%  { translate: -2.95em -0.78em; scale: 1.3 0.65; animation-timing-function: var(--ease-out); }
  22%  { translate: -2.45em -1.55em; scale: 0.88 1.18; animation-timing-function: var(--ease-in); }
  36%  { translate: -1.5em -0.78em; scale: 1.28 0.68; animation-timing-function: var(--ease-out); }
  46%  { translate: -1.05em -1.4em; scale: 0.9 1.15; animation-timing-function: var(--ease-in); }
  58%  { translate: -0.62em -0.78em; scale: 1.22 0.72; animation-timing-function: var(--ease-out); }
  68%  { translate: -0.28em -1.5em; scale: 0.9 1.15; animation-timing-function: var(--ease-in); }
  78%  { translate: 0 0; scale: 1.35 0.6; animation-timing-function: var(--ease-out); }
  86%  { translate: 0 -0.12em; scale: 0.92 1.1; }
  93%  { translate: 0 0; scale: 1.12 0.88; }
  100% { translate: 0 0; scale: 1 1; }
}
@keyframes o-squish {
  0%, 74% { scale: 1 1; opacity: 1; }
  80% { scale: 1.3 0.12; opacity: 1; }
  81%, 100% { scale: 1.3 0.02; opacity: 0; }
}
.hero-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink-deep);
  margin-top: var(--space-md);
  overflow-wrap: anywhere;
  min-width: 0;
}
.hero-split .lede {
  margin-top: var(--space-lg);
  max-width: 46ch;
  font-size: var(--text-md);
  color: var(--color-muted);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.hero-note {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ---------- Board art (Tier-A CSS, no device chrome) ---------- */

.board {
  width: min(100%, 23rem);
  margin-inline: auto;
  padding: var(--space-md);
  background: var(--color-board);
  border: 2px solid var(--color-board-2);
  border-radius: 14px;
  rotate: -1.5deg;
}
.board__clock {
  height: 8px;
  border-radius: 4px;
  background: var(--color-paper-2);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}
.board__clock i {
  display: block;
  height: 100%;
  width: 62%;
  background: var(--color-red);
  border-radius: 4px 0 0 4px;
}
.board__face {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: 2px;
  aspect-ratio: 1;
  padding: 4px;
  background: var(--color-ink);
  border-radius: 8px;
}
.board__face .b {
  background: var(--color-green);
  box-shadow: inset 2px 2px 0 var(--color-green-hi), inset -2px -2px 0 var(--color-green-deep);
  border-radius: 2px;
}
.board__face .b--gap {
  background: transparent;
  box-shadow: none;
  border: 2px dashed var(--color-accent);
  border-radius: 3px;
}
.board__tray {
  display: flex;
  justify-content: space-around;
  align-items: end;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-board-2);
  border-radius: 8px;
}
.piece { display: grid; gap: 2px; }
.piece i {
  width: 13px;
  height: 13px;
  background: var(--color-green);
  box-shadow: inset 1px 1px 0 var(--color-green-hi), inset -1px -1px 0 var(--color-green-deep);
  border-radius: 2px;
}
.piece--bar { grid-template-columns: repeat(3, auto); }
.piece--square { grid-template-columns: repeat(2, auto); }
.piece--el { grid-template-columns: repeat(2, auto); }
.piece--el i:nth-child(2) { visibility: hidden; }

/* ---------- Bento band · F1, hairline-all, irregular spans ---------- */

.band {
  background: var(--color-board);
  border-block: var(--rule-slab) solid var(--color-ink-deep);
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
}
.band__inner { max-width: 72rem; margin-inline: auto; }
.band h2 {
  margin-bottom: var(--space-xs);
  font-size: var(--text-2xl);
}
.band .band-sub {
  max-width: 70ch;
  margin-bottom: var(--space-xl);
  color: var(--color-ink);
}
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(9.5rem, auto);
  gap: var(--space-md);
}
.cell {
  background: var(--color-paper);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  min-width: 0;
}
.span-2x2 { grid-column: span 2; grid-row: span 2; }
.span-2x1 { grid-column: span 2; }
.cell h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.cell p { color: var(--color-muted); font-size: var(--text-base); }

/* stat tiles inside cells */
.stat-label { font-size: var(--text-sm); color: var(--color-muted); }
.stat-value {
  font-family: var(--font-body);
  font-weight: 650;
  font-size: var(--text-3xl);
  line-height: 1.1;
  color: var(--color-ink-deep);
  margin-block: var(--space-2xs);
}
.stat-note { font-size: var(--text-sm); color: var(--color-muted); }

/* how-a-bout-works steps inside the 2x2 cell */
.steps { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.steps li { display: flex; align-items: center; gap: var(--space-md); list-style: none; }
.steps .piece { flex: none; }
.steps p { color: var(--color-ink); }
.code-chip {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.3em;
  font-size: var(--text-md);
  padding: var(--space-2xs) var(--space-xs) var(--space-2xs) calc(var(--space-xs) + 0.3em);
  border: 1.5px dashed var(--color-ink);
  border-radius: var(--radius-chip);
  background: var(--color-paper-2);
  margin-bottom: var(--space-sm);
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-3xl) var(--page-gutter) var(--space-2xl);
}
.faq h2 { font-size: var(--text-2xl); margin-bottom: var(--space-xl); }
.faq details { border-top: 1px solid var(--color-board-2); }
.faq details:last-of-type { border-bottom: 1px solid var(--color-board-2); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-weight: 650;
  font-size: var(--text-md);
  font-family: var(--font-body);
  color: var(--color-ink-deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-weight: 700; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 var(--space-lg); max-width: 60ch; color: var(--color-muted); }
.faq details a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent-deep); text-decoration-thickness: 2px; }

/* ---------- CTA strip ---------- */

.cta-strip {
  background: var(--color-ink-deep);
  color: var(--color-paper);
  padding: var(--space-2xl) var(--page-gutter);
}
.cta-strip__inner {
  max-width: 72rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg) var(--space-2xl);
}
.cta-strip h2 {
  color: var(--color-paper);
  font-size: var(--text-xl);
  max-width: 24ch;
}
.cta-strip .btn-fill { border-color: var(--color-accent-deep); }
.cta-strip .apk-link {
  color: var(--color-paper);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* ---------- Footer · Ft8 marquee + meta row ---------- */

.foot-marquee { overflow: hidden; border-top: var(--rule-slab) solid var(--color-ink-deep); }
.foot-marquee__track {
  display: flex;
  gap: var(--space-2xl);
  white-space: nowrap;
  padding-block: var(--space-md);
  animation: foot-marquee 32s linear infinite;
}
.foot-marquee__track:hover { animation-play-state: paused; }
.foot-marquee__track span {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--color-ink-deep);
}
@keyframes foot-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.foot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-md) var(--page-gutter) var(--space-xl);
  border-top: 1px solid var(--color-board-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.foot-meta a {
  color: var(--color-muted);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--color-board-2);
}
.foot-meta a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent-deep); }

/* ---------- Stats page ---------- */

.page-head {
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--space-2xl) var(--page-gutter) var(--space-lg);
}
.page-head h1 { font-size: var(--text-3xl); font-weight: 800; }
.page-head p { margin-top: var(--space-sm); max-width: 60ch; color: var(--color-muted); }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--space-md);
  max-width: 72rem;
  margin-inline: auto;
  padding: 0 var(--page-gutter) var(--space-xl);
}
.kpi {
  background: var(--color-paper-2);
  border: 1px solid var(--color-board-2);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  min-width: 0;
}

.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-xl);
  max-width: 72rem;
  margin-inline: auto;
  padding: 0 var(--page-gutter) var(--space-3xl);
}
.chart h2 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.chart .chart-sub { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-lg); }
.chart-rows { display: grid; gap: var(--space-xs); }
.chart-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}
.chart-row .bar-label { color: var(--color-ink); overflow-wrap: anywhere; }
.chart-row .bar-track { border-left: 1px solid var(--color-board-2); align-self: stretch; display: flex; align-items: center; }
.chart-row .bar {
  height: 16px;
  max-width: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--color-green);
  min-width: 2px;
}
.chart--gold .bar { background: var(--color-accent); }
.chart-row .bar-value {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  min-width: 2.5ch;
  text-align: right;
}
.chart-more { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); }
.stats-note {
  max-width: 72rem;
  margin-inline: auto;
  padding: 0 var(--page-gutter) var(--space-2xl);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.stats-note span { display: block; max-width: 70ch; }

/* ---------- Legal / support prose pages ---------- */

.prose {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
}
.prose h1 { font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-2xs); }
.prose .meta { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.prose h2 {
  font-size: var(--text-md);
  margin: var(--space-xl) 0 var(--space-xs);
  border-bottom: 3px solid var(--color-accent);
  display: inline-block;
  padding-bottom: 2px;
}
.prose p, .prose li { margin-bottom: var(--space-xs); max-width: 70ch; }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--color-ink-deep); text-decoration: underline; text-decoration-color: var(--color-accent-deep); text-decoration-thickness: 2px; }
.prose .summary {
  background: var(--color-paper-2);
  border: 1px solid var(--color-board-2);
  border-radius: var(--radius-chip);
  padding: var(--space-sm) var(--space-md);
  margin-block: var(--space-md);
}

/* ---------- Responsive ---------- */

@media (max-width: 60rem) {
  .hero-split { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-2xl); }
  .board { rotate: 0deg; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .slab-nav a[data-secondary] { display: none; }
  .nav-slab { gap: var(--space-sm); padding-inline: var(--space-md); }
  .slab-nav ul { gap: var(--space-md); }
  .nav-slab .btn-fill { padding: var(--space-xs) var(--space-md); }
  .slab-mark { font-size: var(--text-base); }
  .cta-suffix { display: none; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .span-2x2, .span-2x1 { grid-column: auto; grid-row: auto; }
  .cta-strip__inner { flex-direction: column; align-items: flex-start; }
  .foot-marquee__track { animation-duration: 42s; }
  .chart-row { grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .foot-marquee__track { animation: none; }
  .o-slot__block { animation: none; opacity: 1; translate: 0 0; scale: 1 1; }
  .o-slot__letter { animation: none; opacity: 0; }
}