/* The Singapore pages (/, /blog/, /blog/post.html, /privacy). They load
   us.css, the shared design system (DESIGN.md carried over to a marketing
   page), and then this file, which holds only the pieces the US pages have no
   use for. Anything both regions use belongs in us.css, not here. */

/* The hero photo: us.css's .hero.photo (the New York hero's wash, white
   copy and white focus ring) with the Singapore image swapped in. */
.hero.photo.sg{--hero-img:url(/assets/images/singapore-skyline.webp);--hero-img-sm:url(/assets/images/singapore-skyline-1200.webp);--hero-pos:center 40%}
/* The product screenshot that follows the photo hero */
.hero-shot{padding:56px 0 72px}

/* Before / after: the monthly total under the two timelines */
.ba-sum{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 32px;margin-top:16px;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--s1)}
.ba-sum .figure{font:700 30px/1.1 var(--f-display);letter-spacing:-0.02em;color:var(--ink)}
.ba-sum .figure span{font:500 16px/1.4 var(--f-sans);letter-spacing:0;color:var(--ink-2);margin-left:6px}
.ba-sum p{font-size:15px;color:var(--ink-2);max-width:60ch}

/* The apps: the admin dashboard under the two phones */
.apps-office{margin:48px 0 0}

/* What is next on the roadmap */
.roadmap{border-top:1px solid var(--line);padding:32px 0}
.roadmap p{font-size:15px;color:var(--ink-2);max-width:70ch}
.roadmap .facts{margin-top:12px;padding-top:0;border-top:0;font-size:14px;color:var(--ink)}

/* Blog listing: a ListRow per post, its thumbnail on the left */
.listing{padding-top:48px}
.rows.flush{margin-top:0}
.lrow.post{grid-template-columns:160px minmax(0,1fr) auto;gap:24px}
.lrow.post img,.lrow.post .thumb{width:160px;height:100px;object-fit:cover;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--s2)}
.lrow.post h3{display:block}
.lrow.post p{margin-top:6px}
.list-state{font-size:15px;color:var(--ink-2)}

/* Blog post: the rendered Markdown, on top of .prose */
.post-h1{margin-top:14px}
.post-tags{font-size:13px;color:var(--ink-2);margin-top:16px}
.post-thumb{margin-top:40px;max-width:800px}
.post-body h1{font-size:30px;line-height:1.2;letter-spacing:-0.02em;margin-top:56px}
.post-body h4{font:600 17px/1.4 var(--f-sans);color:var(--ink);margin-top:28px}
.post-body h1+*,.post-body h4+*{margin-top:12px}
.post-body blockquote{margin:0;border-left:3px solid var(--line-strong);padding:4px 0 4px 18px;color:var(--ink-2)}
.post-body code{font-family:var(--f-mono);font-size:.875em;color:var(--ink);background:var(--s2);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 5px}
.post-body pre{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;overflow-x:auto}
.post-body pre code{background:none;border:0;padding:0;font-size:13px;line-height:1.6}
.post-body img,.post-body .post-fig{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.post-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}

@media (max-width:900px){
  .hero-shot{padding:32px 0 48px}
  .ba-sum{padding:18px}
  .ba-sum .figure{font-size:26px}
  .lrow.post{grid-template-columns:minmax(0,1fr);gap:12px}
  .lrow.post img,.lrow.post .thumb{width:100%;height:auto;aspect-ratio:16/10}
  .post-body h1{font-size:24px}
}