/* 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 .sides {
  display: flex;
  gap: 20px;
  align-items: baseline;
}
.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 .updated:has(+ .updated), .terms .updated:has(+ .updated) { margin-bottom: 4px; }
.terms h3 { margin: 28px 0 10px; font-size: 17px; }
.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, .terms ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.privacy li, .terms li { margin: 0 0 8px; }
.privacy li:last-child, .terms 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; }

/* Yearly was hidden from 2026-09-20 to 2026-10-15; the founder asked for it back, first on every plan (15 October). */
.pricing .plans { margin-top: 12px; }

.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; }
  .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); } }

/* A plan rises to meet the pointer, or the keyboard (the founder, 2026-10-15: "when you hover above on each one, maybe
   they should pop up"). Written as .plans > .plan so it outranks the home page's arrive-on-scroll rule, which would
   otherwise hold the card still; with reduced motion it lights up without moving. */
.plans > .plan { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .2s ease, opacity .7s ease; }
.plans > .plan:focus-within { transform: translateY(-8px); border-color: color-mix(in srgb, var(--ink) 28%, var(--line)); box-shadow: 0 2px 4px rgba(34, 29, 25, .04), 0 30px 54px -28px rgba(34, 29, 25, .45); }
@media (hover: hover) {
  .plans > .plan:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--ink) 28%, var(--line)); box-shadow: 0 2px 4px rgba(34, 29, 25, .04), 0 30px 54px -28px rgba(34, 29, 25, .45); }
  .plans > .plan:hover .button:not(.quiet) { filter: brightness(1.08); }
}
@media (prefers-reduced-motion: reduce) { .plans > .plan:hover, .plans > .plan:focus-within { transform: none; } }
@keyframes swap { from { opacity: 0; transform: translateY(4px); } }

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