/* Hemmingway's public site, in Altworld's paper and ink: the same tokens as the admin page, light and dark. */
:root {
  --paper:#fdfcfa; --raise:#f3f0ea; --ink:#221d19; --body:#4a433c; --muted:#7a7169; --line:#e9e4dc; --acc:#46738c; --on-acc:#fff; --warn:#b4453a;
  --acc-soft:#e8eff3; --ok:#4c7a52; --gold:#d8ab69; --knob:#fdfcfa;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --font:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#171512; --raise:#1f1c18; --ink:#f3efe8; --body:#d3cdc4; --muted:#8f877d; --line:#2a2622; --acc:#7fa6bd; --on-acc:#12161a;
    --warn:#e0877b; --acc-soft:#1d272d; --ok:#8fbb94; --knob:#2c2824;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 16px/1.6 var(--font);
}
h1, h2 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
}
a {
  color: var(--acc);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { opacity: .85; }
a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Home page: the name, the maker, the two downloads with how to open them the first time, Pricing, Privacy and Terms.
   The page Stripe sends the desktop app's buyers back to has the same layout, with one line (.note). */
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
}
.home h1 {
  margin: 0;
  font-size: clamp(40px, 9vw, 64px);
  letter-spacing: -0.01em;
}
.home .byline {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
}
.home .note {
  margin: 24px 0 0;
  color: var(--ink);
  font-size: 17px;
}
.home .links {
  margin: 40px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  font-size: 15px;
}
.home .downloads {
  margin: 40px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  font-size: 17px;
}
.home .first-open {
  max-width: 460px;
  margin: 40px 0 0;
  text-align: left;
  font-size: 14px;
}
.home .first-open h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.home .first-open p { margin: 0 0 10px; }
.home .first-open strong { color: var(--ink); font-weight: 600; }

/* Privacy, pricing and terms pages: a readable column with headed sections. */
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.back {
  margin: 0 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.back a {
  font-family: var(--serif);
  font-size: 18px;
  text-decoration: none;
}
.back a:hover { text-decoration: underline; }
.back a.side {
  font-family: var(--font);
  font-size: 15px;
  text-decoration: underline;
}

.privacy h1, .pricing h1, .terms h1 {
  margin: 0 0 8px;
  font-size: clamp(32px, 7vw, 44px);
  letter-spacing: -0.01em;
}
.privacy .updated, .terms .updated {
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 14px;
}
.privacy h2, .pricing h2, .terms h2 {
  margin: 40px 0 12px;
  font-size: 22px;
}
.privacy p, .pricing p, .terms p { margin: 0 0 16px; }
.privacy ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.privacy li { margin: 0 0 8px; }
.privacy li:last-child { margin-bottom: 0; }

/* A table wider than the screen scrolls sideways inside its own box; the page never does. */
.table-wrap {
  margin: 0 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Buttons: the accent for the thing to do; .quiet for the lesser of two. The pricing page and the API platform share them. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--acc);
  border-radius: 10px;
  background: var(--acc);
  color: var(--on-acc);
  font: 500 15px/1.2 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s, transform .15s, background-color .15s, color .15s, opacity .15s;
}
.button:hover { opacity: 1; filter: brightness(1.07); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.button.quiet { background: transparent; color: var(--acc); }
.button.quiet:hover { background: var(--acc-soft); filter: none; }
.button:disabled, .button[aria-disabled="true"] { opacity: .45; cursor: default; filter: none; transform: none; }

/* Pricing: the four plans side by side (two by two, then one above the other on a narrow screen), monthly or yearly,
   then the API's price. Monthly or yearly is two radios: :has() shows the .m or the .y prices, so there is no script. */
.page.wide { max-width: 1100px; }
.period {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0 32px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raise);
}
.period input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.period label {
  position: relative;
  z-index: 1;
  padding: 9px 22px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s;
}
.period input:checked + label { color: var(--ink); }
.period input:focus-visible + label { outline: 2px solid var(--acc); outline-offset: 2px; }
.period .save {
  margin-left: 8px;
  color: var(--acc);
  font-size: 13px;
}
.period .thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--knob);
  box-shadow: 0 1px 3px rgba(34, 29, 25, .12), 0 0 0 1px var(--line);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.pricing:has(#p-year:checked) .thumb { transform: translateX(100%); }
.pricing:has(#p-year:checked) .m, .pricing:not(:has(#p-year:checked)) .y { display: none; }

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.plan {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.pricing .plan h2 {
  margin: 0;
  font-size: 26px;
}
.plan .price {
  margin: 18px 0 0;
  color: var(--ink);
}
.plan .price > span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.plan .amount, .rate .amount {
  font-family: var(--serif);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.plan .amount { font-size: 46px; }
.plan .per { color: var(--muted); font-size: 15px; }
.plan .billed {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.plan .billed .y { color: var(--acc); }
.plan ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 22px 0 26px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.plan li strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.plan li .note { color: var(--muted); white-space: nowrap; }
.plan .button {
  margin-top: auto;
  width: 100%;
}
.pricing .notes {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.pricing .api {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 40px;
  margin: 56px 0 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--raise);
}
.pricing .api h2 { margin: 0 0 18px; }
.pricing .api p:last-child { margin: 0; }
.pricing .rates {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  margin: 0 0 18px;
}
.rate {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}
.rate .amount { font-size: 40px; }
.rate .unit { color: var(--muted); font-size: 15px; }

@media (max-width: 980px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pricing .api { grid-template-columns: 1fr; }
  .pricing .api .button { justify-self: start; }
}
@media (max-width: 560px) {
  .plans { grid-template-columns: 1fr; }
  .period { display: grid; }
}
@media (prefers-reduced-motion: no-preference) {
  .plan {
    animation: rise .6s cubic-bezier(.2, .8, .2, 1) backwards;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .plan:nth-child(2) { animation-delay: .05s; }
  .plan:nth-child(3) { animation-delay: .1s; }
  .plan:nth-child(4) { animation-delay: .15s; }
  .plan:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--acc) 35%, var(--line));
    box-shadow: 0 12px 32px -20px rgba(34, 29, 25, .4);
  }
  .pricing .m, .pricing .y { animation: swap .35s ease backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .period .thumb, .period label { transition: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes swap { from { opacity: 0; transform: translateY(4px); } }

@media (min-width: 900px) {
  .page { padding-top: 56px; }
}