:root { --ink:#2b1d12; --sub:#6b5844; --accent:#7a1f2b; --gold:#b8892b; --line:#d8c6a0; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ink);
  line-height:1.65; background: linear-gradient(#efe0bd, #f5ead0 40%, #faf3e1); min-height:100vh; }
/* Support, Privacy, Terms and the other inner pages: a richer parchment-to-gold-to-rose gradient behind the text. */
body.inner { background: linear-gradient(160deg, #f8edd2 0%, #ecd49b 45%, #dfb7a0 100%) fixed; }
main { max-width: 720px; margin: 0 auto; padding: 32px 20px 56px; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; color: var(--accent); }
h1 { font-size: 2rem; margin: 8px 0 4px; }
.wordmark { font-size: 2.8rem; letter-spacing: -0.01em; margin: 4px 0 4px; display: flex; align-items: center; gap: 14px; }
.logo { width: 64px; height: 64px; border-radius: 14px; flex: none; }
/* Home page: a small picture of the app's screens at the right end of the title (on a narrow screen it drops under the title, centered). */
.with-showcase { flex-wrap: wrap; }
.wm { display: flex; align-items: center; gap: 14px; }
.with-showcase { font-size: 3rem; }
/* The title is a maroon gradient (lighter at the top, darker at the bottom); plain maroon is the fallback. */
.wm-text { color: var(--accent); background: linear-gradient(#c24557 18%, #7a1f2b 52%, #3f0c17 86%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.showcase { width: 150px; height: auto; border-radius: 12px; margin-left: auto; flex: none; }
@media (max-width: 640px) {
  .showcase { margin: 6px auto 0; }
  /* On a phone the title stays on one line: a smaller logo and type that scales with the screen width. */
  .with-showcase { font-size: clamp(1.4rem, 8vw, 3rem); }
  .wm { white-space: nowrap; gap: 10px; }
  .wm .logo { width: 44px; height: 44px; border-radius: 10px; }
}
.tagline { color: var(--accent); font-weight: 600; font-size: 1.15rem; margin-top: 0; }
h2 { font-size: 1.15rem; margin: 28px 0 6px; }
p, li { font-size: 1rem; }
ul { padding-left: 1.2rem; }
li { margin: 4px 0; }
a { color: var(--accent); }
.meta { color: var(--sub); margin-top: 0; }
.crest { font-size: 2rem; color: var(--gold); line-height: 1; }
/* Home page: the black paragraphs are bold. */
.hero ~ p:not(.test-build) { font-weight: 700; }
/* Home page photo: sits at the very top and fades into the page. */
.hero { position:absolute; top:0; left:0; right:0; height:560px; z-index:-1; pointer-events:none;
  background: linear-gradient(rgba(245,234,208,.68), rgba(245,234,208,.5) 60%), url(/hero.jpg) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 15%, transparent 92%); mask-image: linear-gradient(#000 15%, transparent 92%); }
.draft { background:#fdece8; border:1px solid #b3261e; color:#b3261e; border-radius:10px; padding:10px 14px; font-weight:600; }
.stores { display:grid; grid-auto-flow:column; grid-template-rows:auto auto; grid-template-columns:repeat(2, auto); justify-content:center; justify-items:center; gap:10px 14px; margin: 20px 0 8px; }
@media (max-width: 640px) { .stores { grid-auto-flow:row; grid-template-rows:none; grid-template-columns:auto; } }
.store { display:inline-block; padding: 12px 18px; border-radius: 12px; background: linear-gradient(#a3303f, #7a1f2b 50%, #561320); color:#fff;
  text-decoration:none; font-weight:600; }
.store.beta { display:inline-flex; align-items:center; gap:10px; }
.ico { width:1.3em; height:1.3em; flex:none; }
/* "Coming soon" buttons: no fill, with a maroon gradient border (a masked ::before draws only the 2px ring). */
.store.soon { position:relative; background: transparent; color: var(--sub); font-weight:500; padding: 14px 20px; }
.store.soon::before { content:""; position:absolute; inset:0; border-radius:12px; padding:2px; pointer-events:none;
  background: linear-gradient(#a3303f, #7a1f2b 50%, #561320);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
nav { margin-top: 40px; font-size: .9rem; }
nav span { color: var(--sub); margin: 0 4px; }
footer { margin-top: 10px; font-size: .8rem; color: var(--sub); }