/* Plain CSS, no framework. The site is five pages that mostly show one number and
   one button; a build step and a utility vocabulary would be more machinery than
   the thing they'd be describing.

   It reads as a companion to the Mac app rather than a product of its own, so it
   borrows the app's manners: system type, restrained colour, and enough contrast
   that a form is obviously a form. */

:root {
  --ink: #16161a;
  --ink-soft: #5b5b66;
  --line: #e3e3e8;
  --paper: #ffffff;
  --surface: #f7f7f9;
  --accent: #2b59ff;
  --accent-ink: #ffffff;
  --good: #0f7b4f;
  --warn: #9a3412;
  --radius: 10px;
}

/* Follows the system, like the app does. Nobody wants a white page at night on a
   machine they've told to be dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f2f5;
    --ink-soft: #a2a2ae;
    --line: #2c2c33;
    --paper: #131317;
    --surface: #1b1b21;
    --accent: #7d97ff;
    --accent-ink: #0b0b0f;
    --good: #4ade80;
    --warn: #fca5a5;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  color: var(--ink);
  font-weight: 640;
  letter-spacing: -0.015em;
  font-size: 17px;
}
.wordmark:hover { text-decoration: none; }

.bar nav { display: flex; gap: 18px; font-size: 15px; }

main {
  flex: 1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

h1 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin: 0 0 10px;
}

h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin: 36px 0 12px;
}

p { margin: 0 0 16px; }
.lede { color: var(--ink-soft); font-size: 17px; }
.muted { color: var(--ink-soft); font-size: 14px; }

/* Forms. The login code field is the one input that matters, so it gets to be big
   and monospaced — six digits copied from an email, read back at a glance. */
input[type="email"],
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.code-field {
  font: 600 28px/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.34em;
  text-align: center;
  padding: 16px 13px;
}

input[type="submit"], button, .button {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 560;
  cursor: pointer;
}
input[type="submit"]:hover, button:hover, .button:hover {
  filter: brightness(1.07);
  text-decoration: none;
}

form { margin-bottom: 8px; }

/* Buttons rendered by button_to sit in their own form, which would otherwise stack
   them vertically with a gap nobody asked for. */
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row form { margin: 0; }

.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 20px 22px;
  margin-bottom: 18px;
}

.balance {
  font: 600 34px/1.1 ui-sans-serif, -apple-system, system-ui, sans-serif;
  letter-spacing: -0.02em;
  margin: 0;
}

.flash {
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 22px;
}
.flash.alert { border-color: var(--warn); color: var(--warn); }
.flash.notice { border-color: var(--good); color: var(--good); }

/* The ledger. Right-aligned figures so the decimal points line up and a run of
   charges can be read as a column rather than a list of strings. */
.ledger { width: 100%; border-collapse: collapse; font-size: 15px; }
.ledger th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 0 0 8px;
  font-weight: 600;
}
.ledger td { padding: 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .charge { color: var(--ink-soft); }
.ledger .credit { color: var(--good); }

footer {
  border-top: 1px solid var(--line);
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 14px;
}

@media (max-width: 560px) {
  main { padding: 32px 18px 48px; }
  h1 { font-size: 26px; }
}

/* ─── Homepage ─────────────────────────────────────────────────────────────
   A headline and a picture of the app. The picture is drawn rather than
   screenshotted so it stays true as the app changes, and because a screenshot
   of a three-column design tool is illegible at this size.

   Every colour comes from the same variables as the rest of the site, so the
   window follows the reader's light or dark setting the way the real one
   follows the system. The artwork inside the canvas — the photograph, the gold
   disc — keeps its own colours, because that's content, not chrome. */

.home-wide { max-width: 1120px; }

h1.hero {
  font-size: clamp(28px, 4.1vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 8px 0 34px;
  max-width: 20ch;
}

.appshot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  /* Sits above the page rather than on it, like a window does. */
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.10), 0 18px 44px -12px rgb(0 0 0 / 0.30);
}
@media (prefers-color-scheme: dark) {
  .appshot { box-shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 18px 44px -12px rgb(0 0 0 / 0.7); }
}

/* Surfaces */
.appshot .s-window  { fill: var(--paper); }
.appshot .s-chrome  { fill: var(--surface); }
.appshot .s-rail    { fill: var(--surface); }
.appshot .s-canvas  { fill: var(--canvas-bg, #8f8f96); }
.appshot .s-line    { stroke: var(--line); stroke-width: 1; }
.appshot .s-frame   { fill: none; stroke: var(--line); stroke-width: 1; }
.appshot .s-artboard { fill: #fff; }
.appshot .s-imgedge { fill: none; stroke: rgb(0 0 0 / 0.16); stroke-width: 1; }

/* Type. One family, three weights, sizes that hold up when the SVG is scaled
   down on a phone. */
.appshot text { font-family: ui-sans-serif, -apple-system, system-ui, sans-serif; }
.appshot .s-title   { fill: var(--ink); font-size: 13px; font-weight: 560; }
.appshot .s-head    { fill: var(--ink); font-size: 13px; font-weight: 640; }
.appshot .s-sub     { fill: var(--ink-soft); font-size: 11.5px; font-weight: 620;
                      letter-spacing: 0.05em; text-transform: uppercase; }
.appshot .s-count   { fill: var(--ink-soft); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.appshot .s-row     { fill: var(--ink); font-size: 13px; }
.appshot .s-rowon-t { fill: var(--accent-ink); font-size: 13px; font-weight: 560; }
.appshot .s-tag     { fill: var(--accent-ink); font-size: 10.5px; opacity: 0.85; }
.appshot .s-tagq    { fill: var(--ink-soft); font-size: 10.5px; }
.appshot .s-lbl     { fill: var(--ink-soft); font-size: 11.5px; }
.appshot .s-val     { fill: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.appshot .s-muted   { fill: var(--ink-soft); font-size: 11.5px; }
.appshot .s-status  { fill: var(--ink-soft); font-size: 11.5px; }
.appshot .s-ph      { fill: var(--ink-soft); font-size: 12px; }
.appshot .s-board   { fill: var(--board-label, #e9e9ee); font-size: 12px; font-weight: 560; }
.appshot .s-glyph-t { fill: var(--ink-soft); font-size: 12px; font-weight: 640; }

/* Rows and controls */
.appshot .s-rowon   { fill: var(--accent); }
.appshot .s-toolon  { fill: var(--accent); }
.appshot .s-glyph   { stroke: var(--ink-soft); }
.appshot .s-glyphon { fill: var(--accent-ink); }
.appshot .s-glyphon-s { stroke: var(--accent-ink); }
.appshot .s-field   { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.appshot .s-swatch  { stroke: var(--line); stroke-width: 1; }
.appshot .s-askpill { fill: var(--accent); }
.appshot .s-asktext { fill: var(--accent-ink); }
.appshot .s-asktext-t { fill: var(--accent-ink); font-size: 12px; font-weight: 560; }

/* Chat */
.appshot .s-bubbleme   { fill: var(--accent); }
.appshot .s-bubbleme-t { fill: var(--accent-ink); font-size: 11.5px; }
.appshot .s-bubble     { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.appshot .s-bubble-t   { fill: var(--ink); font-size: 11.5px; }
.appshot .s-bubble-s   { fill: var(--ink-soft); font-size: 11px; }

/* Canvas overlays: selection, points, guides. The colours the app uses. */
.appshot .s-sel     { fill: none; stroke: #2b7fff; stroke-width: 1.5; }
.appshot .s-selh    { fill: #fff; stroke: #2b7fff; stroke-width: 1.5; }
.appshot .s-pt      { fill: #fff; stroke: #2b7fff; stroke-width: 1.5; }
.appshot .s-ptsel   { fill: #2b7fff; stroke: #fff; stroke-width: 1.5; }
.appshot .s-handle  { stroke: #2b7fff; stroke-width: 1.2; }
.appshot .s-handleknob { fill: #2b7fff; }
.appshot .s-guide   { stroke: #ff3b8d; stroke-width: 1; stroke-dasharray: 4 3; }
.appshot .s-discring { fill: none; stroke: rgb(0 0 0 / 0.22); stroke-width: 1.5; }
.appshot .s-canvastext { fill: #16161a; font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }
.appshot .s-arct    { fill: #4a3208; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }

:root { --canvas-bg: #8f8f96; --board-label: #3f3f46; }
@media (prefers-color-scheme: dark) {
  :root { --canvas-bg: #26262c; --board-label: #b9b9c4; }
}

/* On a narrow screen the window would shrink until the panel labels were specks.
   Better to keep it legible and let it scroll sideways inside its own box — the
   page itself must never scroll horizontally, only this. */
.shot-scroll { margin: 0; }
@media (max-width: 720px) {
  .shot-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Enough that the layer names and the inspector are still words. */
    scrollbar-width: thin;
  }
  .shot-scroll .appshot { width: 700px; max-width: none; }
}