/* Landing skin: Dial Tone — calibrated modern instrument (issues #48, #51).
   Paints the structural landing.css in Dial Tone's own voice: hairline-ruled
   record cards on the field ground, Space Grotesk display, sentence-case Inter
   labels, and IBM Plex Mono for captured values. No stationery props. */

body.landing {
  --paper: var(--surface);
  --accent: var(--copper);
  --font-hand: var(--font-mono);
}

/* ---- shared bits ---- */

.landing .btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .88rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
}
.landing .btn-solid { background: var(--ink); color: #fff; }
.landing .btn-solid:hover { background: var(--copper); border-color: var(--copper); }
.landing .btn-outline { background: transparent; color: var(--ink); border-color: var(--hairline); }
.landing .btn-outline:hover { background: rgba(16, 22, 43, .06); }

.landing .wordmark { font-weight: 700; }

.landing .lbl {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .7rem;
  color: rgba(16, 22, 43, .65);
}

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

.landing .site-nav { border-bottom: 1px solid var(--hairline); }
.landing .site-links a:not(.btn) {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .82rem;
}

/* ---- hero ---- */

.landing .kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .06em;
  color: rgba(16, 22, 43, .65);
}

/* ---- the slip: a calibrated record card ---- */

.landing .slip-behind {
  inset: 4% 2%;
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(16, 22, 43, .10);
}
.landing .slip-goldenrod { background: color-mix(in srgb, var(--copper) 30%, var(--bg)); }
.landing .slip-pink { background: var(--hairline); }

.landing .slip {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  box-shadow: 0 10px 28px rgba(16, 22, 43, .12);
}

.landing .field { border-bottom: 1px solid var(--hairline); }
.landing .field .val {
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--ink);
}

.landing .slip-checks { border-bottom: 1px solid var(--hairline); }
.landing .slip-checks li { font-weight: 500; font-size: .72rem; }

.landing .slip-message .val {
  font-family: var(--font-mono);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink);
}
.landing .slip-foot { font-weight: 500; color: rgba(16, 22, 43, .55); }

/* ---- content bands ---- */

.landing .band { background: var(--bg); }
.landing .band-paper { background: var(--surface); }

.landing .inbox-panel {
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--surface);
}
.landing .inbox-title {
  font-weight: 600;
  font-size: .74rem;
  color: rgba(16, 22, 43, .65);
}
.landing .mini-slip {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
}
.landing .mini-slip + .mini-slip { margin-top: .5rem; }
.landing .mini-pink { background: var(--surface); }
.landing .mini-goldenrod { background: var(--surface); }
.landing .mini-slip strong { font-weight: 600; font-size: .78rem; }
.landing .mini-slip .snippet { font-family: var(--font-body); font-size: .92rem; }
.landing .mini-slip .stamp { color: rgba(16, 22, 43, .6); }

.landing .plan-card {
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--surface);
}
.landing .plan-card h3 { font-weight: 600; font-size: .82rem; }

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

.landing .site-foot { background: var(--ink); color: var(--surface); }
.landing .site-foot a { color: var(--surface); }