/* Keystone — site styles.
   One token set. Everything else is inline on the markup, deliberately. */

/* Ink only. The site offered Paper and Ink, and the switch cost more than it
   gave: a control in the nav of a three-page site, a localStorage write, and a
   flash of the wrong palette before the script ran. The app keeps both, because
   an app is used at 7am and 11pm; a marketing page is read once. */
:root {
  color-scheme: dark;
  --paper:#131110; --card:#1E1A16; --ink:#F6F2EA; --ink70:#CFC5B7; --ink55:#B3A899;
  --muted:#8E8377; --rule:rgba(246,242,234,.14); --ruleSoft:rgba(246,242,234,.09);
  --brass:#C9A961; --slab:#272119; --chrome:#211C18;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--ink); }

.app { min-height: 100vh; }

/* Screenshot placeholders — replace each with an <img> when the shots exist. */
.slot {
  border: 1.5px dashed var(--rule);
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, rgba(128,118,104,.07) 0 6px, transparent 6px 12px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  font-size: 13px; color: var(--muted);
}

/* Screenshots. Sit flush inside their framing card, which clips them. */
.shot {
  display: block; width: 100%; height: auto; border-radius: 10px;
}

/* A phone screenshot is twice as tall as it is wide. Given a half-width column
   it renders over a thousand pixels tall and swamps the paragraph beside it,
   so it is capped and centred instead. */
.shot-phone { max-width: 290px; margin: 0 auto; }

/* "What it refuses to be" — six cells in a ruled grid.
   The rules used to be borders written on each cell by hand for three columns,
   but the grid was auto-fit and laid itself out as four on a wide screen, so
   the lines landed in the wrong places and the last row looked torn. Now the
   container is the rule colour and a one-pixel gap lets it show between cells,
   so every line is drawn by the layout itself. The column counts are 3, 2 and
   1 because six divides by all of them — a count that left a hole would show
   the rule colour through the empty cell. */
.refusals {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: 15px; overflow: hidden; margin-top: 16px;
}
@media (max-width: 820px) { .refusals { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .refusals { grid-template-columns: 1fr; } }

/* The four promises under the hero — no accounts, no servers, no analytics,
   pay once. The same ruled-grid construction as .refusals, and the same fix:
   auto-fit put three columns on a tablet-width screen, stranding the fourth
   promise alone on a row with two empty cells of rule colour beside it. Four
   divides by 4, 2 and 1, so no width leaves a hole. */
.promises {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: 14px; overflow: hidden;
}
@media (max-width: 900px) { .promises { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .promises { grid-template-columns: 1fr; } }