/*
 * Lockbox - shared design system.
 *
 * The homepage was rebuilt with an editorial voice (serif display, mono
 * utility, left-aligned, restrained accent) while the other twenty pages kept
 * the old one: Inter everywhere, centred, gradient-filled headings. A visitor
 * who clicks "Read exactly how it works" currently lands on what looks like a
 * different company's website, at the exact moment they were checking whether
 * to trust this one.
 *
 * These are the tokens the homepage already uses. Kept in one file so the rest
 * of the site can adopt them without each page inventing its own values again.
 */

:root {
  /* Ground and surfaces. Not pure black: #000 smears on OLED and reads
     clinical rather than private. */
  --ink:      #070a14;
  --paper:    #0e1424;
  --edge:     rgba(233, 230, 223, .07);
  --edge-lit: rgba(233, 230, 223, .14);

  /* Text. Warm off-white rather than #fff - pure white on near-black is the
     high-contrast look every generated dark page reaches for. */
  --chalk: #e9e6df;
  --dim:   #8b95a8;
  --faint: #6f7a90;

  /* Brand accent. Deliberately rationed: it earns attention only where it is
     the point (price, the one thing that is ours, a link). */
  --emerald: #34d399;

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 1000px;   /* one column width across the whole site */
  --gutter:  32px;
}

/* --- Primitives -------------------------------------------------------- */

.lb-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 14px;
}

.lb-display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.14;
  color: var(--chalk);
}

.lb-wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.lb-lede {
  color: var(--dim);
  font-size: 17px;
  line-height: 1.65;
  max-width: 56ch;
}

/* Links inside prose: underline is the affordance, colour is the accent. */
.lb-prose a {
  color: var(--emerald);
  text-decoration: none;
  border-bottom: 1px solid rgba(52, 211, 153, .35);
}
.lb-prose a:hover { border-bottom-color: var(--emerald); }

/* --- Onward links -----------------------------------------------------
   Every page that is not the homepage is currently a dead end: /transparency,
   the page doing the most trust work after the homepage, has SEVEN links on
   it. 89% of visitors see exactly one page. A reader who finishes something
   should always be offered the next thing. */

.lb-next {
  border-top: 1px solid var(--edge);
  margin-top: 64px;
  padding-top: 32px;
}
.lb-next h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  color: var(--chalk);
  margin: 0 0 20px;
}
.lb-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.lb-next-card {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: rgba(14, 20, 36, .5);
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.lb-next-card:hover { border-color: var(--edge-lit); transform: translateY(-2px); }
.lb-next-card b {
  display: block;
  color: var(--chalk);
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 5px;
}
.lb-next-card span { color: var(--dim); font-size: 13.5px; line-height: 1.5; }

/* --- Quality floor ----------------------------------------------------- */

/* Keyboard users must be able to see where they are. */
:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
}

/* --- Wide content must scroll inside itself, never widen the page ------
   A comparison table in blog/password-manager-no-subscription is 413px wide
   and pushed the document 62px past a 375px viewport, so the whole article
   scrolled sideways on a phone. Contained here rather than per-page, because
   the next wide table will do the same thing. */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre, code { max-width: 100%; overflow-x: auto; }
img, svg, video { max-width: 100%; height: auto; }