/* Keychange landing page — design 1a "Panel desk".
   Monospace is the page's voice; system sans is reserved for the headline,
   the wordmark and feature titles. */

:root {
  --desk: #E4E1DB;
  --panel: #FBFBFC;
  --ink: #1D1D1F;
  --body: #57534C;
  --footer: #4F4B45;
  --hairline: rgba(0, 0, 0, 0.1);
  --accent: #007AFF;          /* macOS default accent: the app draws the rail
                                 and switches in the system accent, not green */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--body);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

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

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 40px;
  border-bottom: 0.5px solid var(--hairline);
}

.wordmark { display: flex; align-items: center; gap: 10px; }
.wordmark img { border-radius: 6px; }
.wordmark span { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.wordmark:hover { text-decoration: none; }

.nav-links { display: flex; align-items: center; gap: 26px; font-size: 12px; }

.button {
  background: var(--ink);
  color: var(--panel);
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 13px;
  box-shadow: 0 2px 5px rgba(20, 18, 30, 0.24);
  white-space: nowrap;
}
.button:hover { background: #000; text-decoration: none; }
.button.small { padding: 6px 13px; font-size: 12px; border-radius: 6px; box-shadow: none; }

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

.hero {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: center;
  padding: 76px 40px 68px;
}

.hero-mark { display: block; margin-bottom: 22px; }

h1 {
  font-family: var(--sans);
  font-size: 46px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: 15ch;
  margin: 0 0 16px;
  text-wrap: balance;
}

.hero-copy > p { max-width: 44ch; margin: 0; }

.cta { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.cta-note { font-size: 11.5px; line-height: 1.5; margin: 0; }

/* ---------- the app shot ----------
   panel.png is the real popover captured at 2x, shown at half size so it
   measures its true 344px. The bar above it is drawn here rather than
   photographed, as one more flat surface in the same family as the cards. */

.hero-shot { justify-self: end; width: 400px; }

/* Menu bar metrics measured off a real capture: 40pt tall, 14px system text,
   items 20pt apart, 18pt from the right edge. The surface is .cards article's:
   flat panel, hairline, 11px radius, whisper shadow. */
.menubar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  height: 40px;
  padding: 0 18px;
  background: var(--panel);
  border: 0.5px solid var(--hairline);
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(20, 18, 30, 0.05);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}

/* The status item exactly as the app builds it (AppState.markImage): two 9.2×6.9
   plates 1.84/1.38 apart, scaled 18/8.68, corner radius 2 — the back one at 40%,
   the front punching a 0.4 rim out of it so they read as separate cards, and the
   code knocked clean through the front. The template image renders black in a
   light menu bar, and the knocked-out glyph is the bar showing through. */
.mb-badge { position: relative; width: 23px; height: 18px; flex: none; }
.mb-badge i,
.mb-badge b {
  position: absolute;
  width: 19.07px;
  height: 14.31px;
  border-radius: 4.15px;
}
.mb-badge i { left: 3.81px; top: 0.83px; background: rgba(29, 29, 31, 0.4); }
.mb-badge b {
  left: 0;
  top: 3.69px;
  background: var(--ink);
  box-shadow: 0 0 0 0.83px var(--panel);   /* the rim gap punched by the front plate */
  color: var(--panel);
  font-size: 9.95px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 14.31px;
  text-align: center;
}
.mb-dim { color: var(--ink); }

.hero-shot img {
  display: block;
  width: 390px;
  /* The capture carries 23px of transparent shadow margin; -13px top puts the
     panel 6px under the bar, where macOS draws it. */
  margin: -13px 0 0 auto;
}


/* ---------- feature cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 0 40px 48px;
}

.cards article {
  background: var(--panel);
  border: 0.5px solid var(--hairline);
  border-radius: 11px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(20, 18, 30, 0.05);
}
.eyebrow { font-size: 10.5px; letter-spacing: 0.1em; color: var(--body); }
.cards h2 {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 9px 0;
}
.cards p { font-size: 12px; line-height: 1.6; margin: 0; }
em { font-style: normal; color: var(--ink); }

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

footer {
  margin-top: auto;          /* keep the footer at the bottom on short pages */
  padding: 18px 40px;
  border-top: 0.5px solid var(--hairline);
  font-size: 11px;
  color: var(--footer);
}

/* ---------- responsive ----------
   The panel is a real 344pt macOS surface: it never scales below that. */

@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr minmax(400px, 44%); }
}

@media (max-width: 900px) {
  nav { padding: 16px 24px; }
  .nav-links a:not(.button) { display: none; }

  .hero {
    grid-template-columns: 1fr;
    padding: 48px 24px 52px;
  }
  /* Single column: the bar runs the full width like a real menu bar, with the
     panel hanging off its right end. Narrower than the panel and the container
     scrolls rather than shrinking it. */
  .hero-shot { justify-self: stretch; width: 100%; overflow-x: auto; margin-top: 28px; }
  .hero-mark { width: 72px; height: 72px; }
  h1 { font-size: 32px; }

  .cards { grid-template-columns: 1fr; padding: 0 24px 32px; }
  footer { padding: 16px 24px; }
}