/*
  sendchat.ca's look, shared by the home, Features, Pro, Download and Help
  pages. The legal pages, /windows/ and /check/ keep their own inline styles
  and are not changed by this file.

  Colours are the app's default accent (lib/theme/accent_palette.dart, Blue):
  the bar #1976D2, links in its ink #1460AB, and in dark mode #64B5F6 / #A6D5FA.
  No outside files: system fonts, no scripts, no cookies (the Privacy Policy
  promises the site has no analytics or trackers). The one script, inline on
  /download/, only picks which store card shows; it sends and stores nothing.
*/
:root {
  --bg: #f6f8fb;
  --bg-alt: #eef3f9;
  --card: #ffffff;
  --text: #1f2933;
  --muted: #5b6672;
  --line: #e2e7ee;
  --brand: #1976d2;
  --brand-strong: #1460ab;
  --brand-ink: #ffffff;
  --link: #1460ab;
  --link-hover: #0f4f99;
  --tint: #dceefe;
  --soon-bg: #e9edf2;
  --soon-text: #5b6672;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
  /* The blue band behind the home hero and every page heading (Sid's pick,
     6 Nov 2026: ideas 2 + 4). It runs from --band-start to --brand-deep. */
  --brand-deep: #0d3f78;
  --band-start: #1460ab;
  --on-band: #ffffff;
  --on-band-muted: #d6e7fb;
  --band-btn-bg: #ffffff;
  --band-btn-text: #0d3f78;
  /* A colour for each part of the app: Chats blue (--brand), Posts orange,
     the Marketplace green. --posts-ink is --posts darkened for text and
     icons, which plain --posts is too light for on --posts-tint. */
  --posts: #ef6c00;
  --posts-ink: #ad4b00;
  --posts-tint: #fff1e3;
  --market: #2e7d32;
  --market-tint: #e6f4e7;
  /* The drawn phones. */
  --phone-frame: #1f2933;
  --phone-screen: #efeae2;
  --bubble-in: #ffffff;
  --bubble-out: #dceefe;
  --bubble-text: #1f2933;
  --bubble-meta: #6b7680;
  --tick: #1976d2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b141a;
    --bg-alt: #101c24;
    --card: #16222b;
    --text: #e7edf1;
    --muted: #9aa6ae;
    --line: #2a3942;
    --brand: #64b5f6;
    --brand-strong: #a6d5fa;
    --brand-ink: #0b141a;
    --link: #79b9f5;
    --link-hover: #a6d5fa;
    --tint: #13476b;
    --soon-bg: #1d2b35;
    --soon-text: #9aa6ae;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    /* --band-start is darker than --brand-strong here, which is a light blue
       in dark mode: the band's words need it to stay readable. */
    --brand-deep: #0f2c46;
    --band-start: #174a7f;
    --on-band: #e7edf1;
    --on-band-muted: #a6c3de;
    --band-btn-bg: #e7edf1;
    --band-btn-text: #0f2c46;
    --posts: #ffb74d;
    --posts-ink: #ffb74d;
    --posts-tint: #3a2a14;
    --market: #81c784;
    --market-tint: #16301a;
    --phone-frame: #000000;
    --phone-screen: #0b141a;
    --bubble-in: #1f2c34;
    --bubble-out: #13476b;
    --bubble-text: #e7edf1;
    --bubble-meta: #9aa6ae;
    --tick: #64b5f6;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 44px; letter-spacing: -.02em; }
h2 { font-size: 30px; letter-spacing: -.01em; }
h3 { font-size: 18px; }
p { margin: 0 0 14px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--card); padding: 8px 12px; border-radius: 8px;
}
.skip:focus { left: 8px; z-index: 10; }

/* Header and navigation: no script, so on a phone the links wrap to a
   second row instead of hiding behind a menu button. */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 20px; padding-top: 12px; padding-bottom: 12px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-weight: 700; font-size: 20px; margin-right: auto;
}
.brand:hover { color: var(--text); }
.brand img { width: 36px; height: 36px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 4px; }
.site-nav a {
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 8px 12px; border-radius: 999px;
}
.site-nav a:hover { background: var(--bg-alt); color: var(--text); }
.site-nav a[aria-current="page"] { background: var(--tint); color: var(--brand-strong); }
@media (prefers-color-scheme: dark) {
  .site-nav a[aria-current="page"] { color: var(--text); }
}

/* Sections */
.section { padding: 64px 0; }
.section.alt { background: var(--bg-alt); }
.section-head { max-width: 680px; margin-bottom: 32px; }
.section-head p { color: var(--muted); font-size: 18px; }
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand-strong); margin-bottom: 10px;
}
@media (prefers-color-scheme: dark) { .eyebrow { color: var(--brand); } }

/* The blue band (Sid's pick, 6 Nov 2026: idea 2): the home hero and the inner
   pages' heading sit on SendChat blue, with a curved bottom edge in the colour
   of the section that follows (--curve-fill). The curve is a radial gradient
   inside the band, so nothing sticks out sideways at any width. The legal
   pages, /windows/ and /delete-account/ draw the same band in their own
   inline styles. */
.hero, .page-head {
  position: relative; color: var(--on-band);
  background: linear-gradient(135deg, var(--band-start), var(--brand-deep));
}
.hero::after, .page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background: radial-gradient(ellipse 55% 100% at 50% 100%, var(--curve-fill) 99.4%, transparent 100%);
  pointer-events: none;
}
.hero .wrap, .page-head .wrap { position: relative; z-index: 1; }
.hero a:not(.store), .page-head a { color: var(--on-band); }
.hero a:not(.store):hover, .page-head a:hover { color: var(--on-band-muted); }
.hero a:focus-visible, .page-head a:focus-visible { outline-color: var(--on-band); }

/* Page heading for the inner pages; the section after it is plain --bg. */
.page-head { padding: 56px 0 72px; --curve-fill: var(--bg); }
.page-head p { color: var(--on-band-muted); font-size: 19px; max-width: 680px; }

/* Hero. Its section after is .section.alt, hence the curve's --bg-alt. The
   phone hangs 40px over the curve into that section (its caption under it),
   so the hero clips sideways only. */
.hero { --hero-pb: 72px; --curve-fill: var(--bg-alt); padding: 56px 0 var(--hero-pb); overflow: hidden; }
@supports (overflow: clip) { .hero { overflow: visible; overflow-x: clip; } }
.hero .wrap {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
}
.hero .phone-wrap { align-self: end; margin-bottom: calc(-1 * var(--hero-pb) - 73px); }
.hero-logo { width: 88px; height: 88px; margin-bottom: 18px; }
.hero h1 { font-size: 52px; }
.hero .lead { font-size: 20px; color: var(--on-band-muted); max-width: 560px; margin-bottom: 26px; }
.hero .note {
  margin-top: 14px; background: rgba(255, 255, 255, .12); color: var(--on-band);
}
/* The three parts of the app, named above the headline (idea 4). */
.parts {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.parts li {
  font-size: 13px; font-weight: 700; line-height: 1.5; padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
}
.parts li::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px;
}
.parts .part-chats::before { background: #90caf9; }
.parts .part-posts::before { background: #ffb74d; }
.parts .part-market::before { background: #81c784; }
.hero .promises small { color: var(--on-band-muted); }
.hero .promises .icon { background: rgba(255, 255, 255, .14); color: #fff; }
/* The store buttons on the band: "coming soon" translucent with a light dashed
   edge; once one is a link (a.store with an href), solid light. */
.hero .store {
  background: rgba(255, 255, 255, .1); color: var(--on-band); border-color: rgba(255, 255, 255, .28);
}
.hero a.store[href] {
  background: var(--band-btn-bg); color: var(--band-btn-text); border: 1px solid transparent;
  text-decoration: none;
}
.hero a.store[href]:hover { background: var(--on-band-muted); color: var(--band-btn-text); }
/* The hero's two promises (Sid's pick A, 6 Nov 2026): the feature cards' icon
   tile and a label, side by side, with no card around them. */
.promises {
  list-style: none; padding: 0; margin: -6px 0 26px;
  display: flex; flex-wrap: wrap; gap: 14px 28px; max-width: 600px;
}
.promises li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.promises .icon { margin-bottom: 0; flex: none; }
.promises b { display: block; font-size: 17px; line-height: 1.25; }
.promises small { display: block; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* Buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 20px; border-radius: 12px;
  font-weight: 600; font-size: 16px; text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-strong); color: var(--brand-ink); }
.btn-ghost { background: var(--card); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
/* Store buttons: our own buttons, not Apple's, Google's or Microsoft's badges.
   Each is an <a class="store">. With an href it is a live link, drawn like
   .btn-ghost, and shows its .s1.live line ("Get it on"); without one it stays
   the grey "Coming soon" (.s1.soon) and is not a link (the App Store's until
   Apple approves). */
.store {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 18px 8px 14px; border-radius: 12px;
  background: var(--soon-bg); color: var(--soon-text);
  border: 1px dashed var(--line); cursor: default; user-select: none;
  text-decoration: none;
}
a.store[href] {
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); cursor: pointer; user-select: auto;
}
a.store[href]:hover { color: var(--text); border-color: var(--muted); }
.store svg { width: 26px; height: 26px; flex: none; }
.store span { display: block; line-height: 1.25; }
.store .s1 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.store .s2 { font-size: 17px; font-weight: 700; }
a.store[href] .s1.soon, .store:not([href]) .s1.live { display: none; }
/* /download/ on a phone (Sid, 11 Nov 2026): its one script sets data-device
   on <html> for an iPhone or iPad ("ios") or an Android device ("android"),
   and only that store's card shows, centred. Without the attribute (a
   computer, an unknown device, scripts off) all three show. */
html[data-device="ios"] .stores > [data-platform]:not([data-platform="ios"]),
html[data-device="android"] .stores > [data-platform]:not([data-platform="android"]) {
  display: none;
}
html[data-device] .grid-3.stores { grid-template-columns: minmax(0, 440px); justify-content: center; }
/* "Other devices" under that one card; a click takes data-device away, and
   with it this line, so all three show. */
.other-stores { display: none; margin: 16px 0 0; text-align: center; }
html[data-device] .other-stores { display: block; }
.other-stores a { display: inline-block; padding: 12px 8px; font-weight: 600; }
.stores:focus { outline: none; }

/* Cards and grids */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; box-shadow: var(--shadow);
}
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); }
.icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
  display: grid; place-items: center; background: var(--tint); color: var(--brand-strong);
}
@media (prefers-color-scheme: dark) { .icon { color: var(--brand-strong); } }
.icon svg { width: 24px; height: 24px; }

/* Text and picture side by side */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.split.flip .split-text { order: 2; }
.split-text p { color: var(--muted); font-size: 17px; }
.ticks { list-style: none; padding: 0; margin: 0 0 14px; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 5px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--tint);
}
.ticks li::after {
  content: ""; position: absolute; left: 7px; top: 8px; width: 5px; height: 8px;
  border: solid var(--brand-strong); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Drawn phones: example screens in CSS, drawn from the app's own theme
   (lib/theme/app_theme.dart ChatColors, accent_palette.dart Blue) and layouts
   (chat_screen, postings_screen, market_screen). Not screenshots. */
.phone-wrap { display: flex; flex-direction: column; align-items: center; }
.phone {
  width: 300px; max-width: 100%; border-radius: 42px; padding: 11px;
  background: #1b1f24; box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
}
.screen {
  --a-bar: #1976d2; --a: #1976d2; --a-ink: #1460ab; --a-tint: #dceefe; --on-a: #fff;
  --s-bg: #ffffff; --s-chat: #f6f8fb; --s-in: #ffffff; --s-out: #dceefe; --s-border: #e6e9ee;
  --s-text: #191c20; --s-meta: #6b7280; --s-tick: #1e88e5; --s-line: #eeeeee;
  --s-pill: #ffffff; --s-nav: #eef2f8; --s-chip: #ffffff; --s-card: #ffffff; --s-grey: #b8bfc6;
  border-radius: 32px; overflow: hidden; background: var(--s-bg); color: var(--s-text);
  height: 560px; display: flex; flex-direction: column; position: relative;
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .screen {
    --a-bar: #1d2a32; --a: #64b5f6; --a-ink: #a6d5fa; --a-tint: #13476b; --on-a: #0b141a;
    --s-bg: #121b22; --s-chat: #0b141a; --s-in: #1f2c34; --s-out: #13476b; --s-border: #2a3942;
    --s-text: #e1e2e8; --s-meta: #9aa6ae; --s-tick: #64b5f6; --s-line: #2a3942;
    --s-pill: #1f2c34; --s-nav: #1d2a32; --s-chip: #1f2c34; --s-card: #1f2c34; --s-grey: #4a5963;
  }
}
@media (prefers-color-scheme: dark) { .phone { box-shadow: 0 0 0 1px #2a3942, 0 24px 60px rgba(0, 0, 0, .4); } }
.screen svg { display: block; fill: currentColor; }
.statusbar { height: 26px; background: var(--a-bar); flex: none; }
.appbar {
  background: var(--a-bar); color: #fff; padding: 4px 12px 10px; flex: none;
  display: flex; align-items: center; gap: 10px; min-height: 52px;
}
.appbar .title { font-size: 19px; font-weight: 500; flex: 1; }
.appbar .ic { width: 22px; height: 22px; flex: none; opacity: .95; }
.appbar .who { flex: 1; min-width: 0; }
.appbar .t1 { font-weight: 500; font-size: 16px; line-height: 1.2; }
.appbar .t2 { font-size: 12px; opacity: .8; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 500; font-size: 14px; color: #fff;
}
/* The app's monogram colours (widgets/avatar.dart). */
.av1 { background: #1e88e5; } .av2 { background: #43a047; } .av3 { background: #e53935; }
.av4 { background: #fb8c00; } .av5 { background: #8e24aa; } .av6 { background: #00897b; }
.av7 { background: #3949ab; } .av8 { background: #d81b60; }

/* Chat */
.msgs {
  flex: 1; background: var(--s-chat); padding: 10px 10px 4px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
}
.day {
  align-self: center; font-size: 11.5px; color: var(--s-meta); background: var(--s-in);
  border: 1px solid var(--s-border); border-radius: 8px; padding: 1px 10px; margin: 2px 0 4px;
}
.b {
  max-width: 80%; padding: 6px 9px 4px; font-size: 14px; line-height: 1.35;
  border-radius: 16px; color: var(--s-text);
}
.b.in { background: var(--s-in); border: 1px solid var(--s-border); align-self: flex-start; border-top-left-radius: 3px; }
.b.out { background: var(--s-out); align-self: flex-end; border-top-right-radius: 3px; }
.b .nm { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 1px; }
.b .meta { float: right; font-size: 11px; color: var(--s-meta); margin: 6px 0 -2px 8px; display: flex; align-items: center; gap: 2px; }
.b .meta svg { width: 15px; height: 15px; color: var(--s-tick); }
.b::after { content: ""; display: block; clear: both; }
.b.media { padding: 3px 3px 4px; }
.b.media .cap { padding: 3px 6px 0; }
.b.media .nm { padding: 2px 6px 0; }
.photo {
  width: 196px; height: 132px; border-radius: 13px; display: block;
  background: linear-gradient(180deg, #8ec5f4 0%, #cfe7fb 52%, #f4f8fb 53%, #dfe9f1 100%);
  position: relative; overflow: hidden;
}
.photo::after {
  content: ""; position: absolute; left: 30px; bottom: 26px; width: 60px; height: 5px;
  background: #2b3a47; border-radius: 3px; transform: rotate(-8deg); box-shadow: 70px 6px 0 #2b3a47;
}
.react-row { display: flex; justify-content: flex-end; margin-top: -9px; margin-right: 6px; }
.react {
  font-size: 12px; background: var(--s-in); border: 1px solid var(--s-border);
  border-radius: 999px; padding: 0 6px; line-height: 18px; color: var(--s-meta);
}
.voice { display: flex; align-items: center; gap: 8px; width: 190px; }
.voice .play { width: 28px; height: 28px; flex: none; color: var(--a); }
.wave { flex: 1; height: 22px; display: flex; align-items: center; gap: 2px; }
.wave i { display: block; width: 3px; border-radius: 2px; background: var(--s-grey); }
.wave i.on { background: var(--a); }
.voice-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--s-meta); padding-left: 36px; }
.poll { width: 200px; }
.poll .q { font-weight: 600; margin: 2px 0 2px; }
.poll .hint { font-size: 11.5px; color: var(--s-meta); margin-bottom: 4px; }
.poll .opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-top: 6px; }
.poll .box { width: 16px; height: 16px; border: 2px solid var(--s-meta); border-radius: 50%; flex: none; }
.poll .box.on { border-color: var(--a); background: var(--a); box-shadow: inset 0 0 0 2px var(--s-in); }
.poll .lbl { flex: 1; }
.poll .n { font-size: 12px; color: var(--s-meta); }
.poll .bar { height: 4px; border-radius: 2px; background: var(--s-line); margin: 3px 0 0 24px; }
.poll .bar i { display: block; height: 100%; border-radius: 2px; background: var(--a); }
.composer {
  flex: none; background: var(--s-chat); display: flex; align-items: flex-end; gap: 6px;
  padding: 6px 6px 14px;
}
.composer .pill {
  flex: 1; background: var(--s-pill); border-radius: 26px; height: 44px; color: var(--s-meta);
  display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 15px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}
.composer .pill span { flex: 1; }
.composer .pill svg { width: 22px; height: 22px; }
.composer .mic {
  width: 44px; height: 44px; border-radius: 50%; background: var(--a); color: var(--on-a);
  display: grid; place-items: center; flex: none;
}
.composer .mic svg { width: 22px; height: 22px; }

/* Bottom navigation (Material 3 NavigationBar: Chats, Posts, Market, Settings) */
.navbar {
  flex: none; background: var(--s-nav); display: flex; justify-content: space-around;
  padding: 10px 4px 14px;
}
.navbar .d { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; color: var(--s-meta); width: 64px; }
.navbar .d .pillbg { width: 56px; height: 30px; border-radius: 15px; display: grid; place-items: center; }
.navbar .d svg { width: 22px; height: 22px; }
.navbar .d.on { color: var(--s-text); font-weight: 600; }
.navbar .d.on .pillbg { background: var(--a-tint); }

/* Floating buttons */
.fabs { position: absolute; right: 14px; bottom: 82px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fab {
  width: 54px; height: 54px; border-radius: 16px; background: var(--a-tint); color: var(--a-ink);
  display: grid; place-items: center; box-shadow: 0 3px 6px rgba(0, 0, 0, .18);
}
.fab svg { width: 24px; height: 24px; }
.fab.small { width: 40px; height: 40px; border-radius: 12px; background: var(--s-in); color: var(--s-meta); }
.fab.small svg { width: 20px; height: 20px; }
.fab.ext { width: auto; padding: 0 18px 0 14px; gap: 8px; display: flex; align-items: center; font-weight: 600; font-size: 14px; }

/* Posts list */
.plist { flex: 1; overflow: hidden; background: var(--s-bg); }
.prow { display: flex; align-items: center; gap: 14px; padding: 7px 16px; }
.prow .nm { font-size: 16px; line-height: 1.25; }
.prow .sub { font-size: 13.5px; color: var(--s-meta); line-height: 1.3; }
.psec { font-size: 13.5px; font-weight: 500; color: var(--s-meta); padding: 12px 16px 2px; }
/* The avatar ring (widgets/posting_avatar_ring.dart): one arc per post,
   accent when unseen, grey when watched; 2.5 stroke, 2 gap. */
.ringed { position: relative; width: 57px; height: 57px; flex: none; }
.ringed > svg { position: absolute; inset: 0; width: 57px; height: 57px; }
.ringed .avatar { position: absolute; left: 4.5px; top: 4.5px; width: 48px; height: 48px; font-size: 17px; }
.ringed .plus {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--a); color: var(--on-a); border: 2px solid var(--s-bg); display: grid; place-items: center;
}
.ringed .plus svg { width: 14px; height: 14px; }

/* Marketplace */
.mtabs { background: var(--a-bar); color: rgba(255, 255, 255, .72); display: flex; flex: none; font-size: 14px; font-weight: 500; }
.mtabs span { flex: 1; text-align: center; padding: 10px 0 9px; border-bottom: 3px solid transparent; }
.mtabs span.on { color: #fff; border-bottom-color: #fff; }
.chips { display: flex; gap: 6px; padding: 10px 10px 6px; flex: none; overflow: hidden; }
.chip {
  font-size: 12.5px; border: 1px solid var(--s-border); background: var(--s-chip); color: var(--s-text);
  border-radius: 8px; padding: 4px 8px; white-space: nowrap; display: flex; align-items: center; gap: 3px;
}
.chip::after { content: "\25BE"; color: var(--s-meta); font-size: 10px; }
.listings { flex: 1; overflow: hidden; padding: 4px 10px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content; gap: 10px; align-content: start; }
.listing { background: var(--s-card); border: 1px solid var(--s-border); border-radius: 14px; overflow: hidden; }
.listing .pic { height: 92px; }
.listing .txt { padding: 8px; }
.listing .tt { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.listing .pr { display: flex; align-items: baseline; gap: 5px; margin-top: 3px; }
.listing .pr b { font-size: 15.5px; font-weight: 600; }
.listing .pr span { font-size: 11px; color: var(--s-meta); }
.listing .mt { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--s-meta); margin-top: 4px; }
.listing .mt svg { width: 13px; height: 13px; margin-right: 2px; }
.listing .mt > span { display: flex; align-items: center; }
.p1 { background: linear-gradient(135deg, #bcaaa4, #6d4c41); }
.p2 { background: linear-gradient(135deg, #90caf9, #1565c0); }
.p3 { background: linear-gradient(135deg, #c5e1a5, #558b2f); }
.p4 { background: linear-gradient(135deg, #ffcc80, #ef6c00); }
.phone-caption { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* A colour for each part of the app (Sid's pick, 6 Nov 2026: idea 4). Wherever
   Posts or the Marketplace has its own section, card or panel, it takes its
   colour: the eyebrow, the ticks and the icon tile. A whole section is tinted
   and gets a soft blob; .part-card is a tinted panel inside another section.
   Chats and everything else stay blue. */
.part-posts { --part: var(--posts); --part-ink: var(--posts-ink); --part-tint: var(--posts-tint); }
.part-market { --part: var(--market); --part-ink: var(--market); --part-tint: var(--market-tint); }
.part-posts .eyebrow, .part-market .eyebrow { color: var(--part-ink); }
.part-posts .ticks li::before, .part-market .ticks li::before { background: var(--card); }
.part-posts .ticks li::after, .part-market .ticks li::after { border-color: var(--part-ink); }
.part-posts .icon, .part-market .icon { background: var(--part-tint); color: var(--part-ink); }
.section.part-posts, .section.part-market {
  background: var(--part-tint); position: relative; overflow: hidden; isolation: isolate;
}
.section.part-posts::before, .section.part-market::before {
  content: ""; position: absolute; z-index: -1; width: 220px; height: 220px;
  background: var(--part); opacity: .10; pointer-events: none;
}
.section.part-posts::before { border-radius: 42% 58% 55% 45%; right: -40px; top: -60px; }
.section.part-market::before { border-radius: 55% 45% 42% 58%; left: -50px; bottom: -70px; }
.part-card { background: var(--part-tint); border-radius: 16px; padding: 28px; }
.part-card > :last-child { margin-bottom: 0; }
.split > .part-card { align-self: stretch; }
/* The drawn phones: unwatched Posts rings in orange (the circles' inline
   stroke reads --a), and Marketplace prices in green. */
.part-posts .ringed > svg { --a: var(--posts); }
.part-market .listing .pr b { color: var(--market); }

/* Pro: Free and Pro side by side */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan.pro { border: 2px solid var(--brand); }
.plan .price { font-size: 36px; font-weight: 700; line-height: 1.1; margin: 6px 0 2px; }
.plan .per { color: var(--muted); font-size: 15px; }
.badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 6px; background: var(--brand); color: var(--brand-ink);
  vertical-align: middle;
}
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
table.compare { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 15px; }
.compare th, .compare td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: 14px; color: var(--muted); background: var(--bg-alt); }
.compare tbody th { font-weight: 600; width: 44%; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare td.yes { color: var(--brand-strong); font-weight: 600; }
@media (prefers-color-scheme: dark) { .compare td.yes { color: var(--brand); } }

/* FAQ, with <details> so it opens without a script */
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 22px; width: 8px; height: 8px;
  border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg);
  transition: transform .15s;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }
.faq .a { padding: 0 20px 16px; color: var(--muted); }
.faq .a > :last-child { margin-bottom: 0; }
.faq h2 { margin-top: 36px; font-size: 22px; }
.faq h2:first-child { margin-top: 0; }

.note {
  background: var(--tint); border-radius: 12px; padding: 12px 16px; color: var(--text);
}
address { font-style: normal; }

/* Call to action band */
.cta { text-align: center; }
.cta .btn-row { justify-content: center; }
.cta p { color: var(--muted); font-size: 18px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 36px 0 44px; font-size: 14px; color: var(--muted); }
.site-footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.site-footer p { margin: 0 0 4px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media (max-width: 900px) {
  .hero .wrap, .split { grid-template-columns: 1fr; gap: 40px; }
  .split.flip .split-text { order: 0; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  /* One column: the phone and its caption hang over the next section's top. */
  .hero + .section { padding-top: 120px; }
}
@media (max-width: 640px) {
  h1, .hero h1 { font-size: 34px; }
  h2 { font-size: 25px; }
  .hero { --hero-pb: 56px; padding: 36px 0 var(--hero-pb); }
  .hero::after, .page-head::after { height: 28px; }
  .hero .lead, .page-head p { font-size: 18px; }
  .hero-logo { width: 68px; height: 68px; }
  .section { padding: 48px 0; }
  .hero + .section { padding-top: 112px; }
  .page-head { padding: 36px 0 52px; }
  .part-card { padding: 22px 18px; }
  .grid-3, .grid-2, .plans { grid-template-columns: 1fr; }
  .card { padding: 20px 18px; }
  .brand { font-size: 18px; }
  .site-nav { width: 100%; margin: 0 -12px; }
  .site-nav a { padding: 8px 12px; }
  .store, .btn { width: 100%; }
  .screen { height: 540px; }
}