/* Soulthentic marketing site. Colors and fonts mirror the app's AppColors and pubspec fonts. */

@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/Poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/Poppins-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); }

:root {
  --primary: #EC0B82;
  --secondary: #A300FA;
  --gradient: linear-gradient(160deg, #D90A7B 0%, #B405BC 55%, #9500E6 100%);
  --accent-ink: #8A0B9E;      /* purple text on light backgrounds, 7.9:1 on white */
  --accent-tint: #F6E8FB;
  --text: #1C1C1E;
  --text-muted: #55566A;
  --surface: #FFFFFF;
  --surface-alt: #FBF7FD;
  --card: #FFFFFF;            /* cards, panels and chips that sit on a surface */
  --pill: #F1F1F5;            /* neutral pill/tab background */
  --ink-soft: #3A3A48;        /* body copy a touch softer than --text */
  --link: #B0086A;
  --header-bg: rgba(255, 255, 255, 0.92);
  --hero-glow-a: #F3DDFE;
  --hero-glow-b: #FDE3F1;
  --border: #ECE3F2;
  --radius: 20px;
  --shadow: 0 30px 60px -28px rgba(70, 0, 110, 0.55);
  --shadow-soft: 0 12px 30px -16px rgba(70, 0, 110, 0.35);
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-h: 68px;
  color-scheme: light;
}

/* Dark theme. Follows the visitor's device setting (no toggle), using the app's dark palette
   (AppPalette.dark: surfaces #1C1C1E / #2C2C2E / #3A3A3C, softer brand pink #DF2A85). */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #DF2A85;
    --accent-ink: #D9A6FF;    /* light purple text on dark backgrounds, 9:1 on #1C1C1E */
    --accent-tint: rgba(163, 0, 250, 0.22);
    --text: #FFFFFF;
    --text-muted: #AEAEB2;
    --ink-soft: #D1D1D6;
    --surface: #1C1C1E;
    --surface-alt: #161618;
    --card: #2C2C2E;
    --pill: #3A3A3C;
    --link: #FF7AC0;
    --header-bg: rgba(28, 28, 30, 0.88);
    --hero-glow-a: rgba(163, 0, 250, 0.28);
    --hero-glow-b: rgba(236, 11, 130, 0.20);
    --border: #3A3A3C;
    --shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85);
    --shadow-soft: 0 12px 30px -16px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; }
/* Long single words (Afrikaans, isiZulu) break or hyphenate instead of running off small screens. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
ul, ol { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; border-radius: 8px; }

.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .container { padding: 0 32px; } }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--text); color: var(--surface); padding: 10px 16px; border-radius: 10px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 12px; }
.brand img { height: 40px; width: auto; }
.primary-nav { display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav-links a:hover { color: var(--accent-ink); }
.nav-links .nav-cta {
  display: inline-block; white-space: nowrap; color: #fff; background: var(--gradient); padding: 10px 18px; border-radius: 999px;
}
.nav-links .nav-cta:hover { color: #fff; filter: brightness(1.08); }

.nav-menu { display: none; position: relative; }
.nav-menu summary {
  list-style: none; cursor: pointer; font-weight: 600; font-size: 15px;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { background: var(--accent-tint); border-color: transparent; }
.nav-menu ul {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 8px;
  box-shadow: var(--shadow-soft);
}
.nav-menu a { display: block; padding: 12px 14px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 600; }
.nav-menu a:hover { background: var(--accent-tint); }

@media (max-width: 860px) {
  .nav-section { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 360px) {
  .brand img { height: 32px; }
  .nav-links .nav-cta { padding: 9px 13px; font-size: 14px; }
  .nav-menu summary { padding: 8px 11px; font-size: 14px; }
}

/* Language switcher (built by i18n.js, so it only appears when the script runs) */
.lang-switch:empty { display: none; }
.primary-nav > .lang-switch { margin-right: 6px; }
.lang-menu { position: relative; }
.lang-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 40px;
  font-weight: 600; font-size: 14px; letter-spacing: .02em; color: var(--text);
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card);
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { background: var(--accent-tint); border-color: transparent; }
.lang-globe { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lang-panel {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 200px; z-index: 11;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 8px;
  box-shadow: var(--shadow-soft);
}
.lang-options button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px;
  padding: 10px 14px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: 600 15px/1.3 var(--font-body); color: var(--text); text-align: start;
}
.lang-options button:hover { background: var(--accent-tint); }
.lang-options button[aria-pressed="true"] { color: var(--accent-ink); }
.lang-options button[aria-pressed="true"]::after {
  content: ""; width: 8px; height: 14px; margin-right: 3px; flex: none;
  border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-2px);
}
.lang-heading {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
/* Inside the phone menu: under the section links, two columns of languages. */
.nav-menu .menu-lang { border-top: 1px solid var(--border); margin-top: 6px; padding: 12px 6px 4px; }
.nav-menu .menu-lang:empty { display: none; }
.nav-menu .menu-lang .lang-heading { padding: 0 8px 6px; }
.nav-menu .menu-lang .lang-options {
  position: static; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.nav-menu .menu-lang .lang-options button { padding: 10px 8px; font-size: 14px; }
/* Footer: one row of languages that wraps on small screens. */
.lang-switch-footer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lang-switch-footer .lang-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
.lang-switch-footer .lang-options button { width: auto; min-height: 40px; padding: 8px 12px; font-size: 14px; font-weight: 400; color: var(--text-muted); }
.lang-switch-footer .lang-options button[aria-pressed="true"] { font-weight: 600; color: var(--accent-ink); }
.lang-switch-footer .lang-options button[aria-pressed="true"]::after { display: none; }
@media (max-width: 860px) {
  .is-wide-only { display: none; }
}

/* Waiting for a language file: hidden for at most 1.5 s, then shown regardless (i18n.js). */
html.i18n-wait body { visibility: hidden; animation: i18n-failsafe 0s linear 1.5s forwards; }
@keyframes i18n-failsafe { to { visibility: visible; } }

/* Korean keeps words whole when lines wrap; Thai needs taller lines for its vowel and tone marks. */
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) p, :lang(ko) li { word-break: keep-all; overflow-wrap: anywhere; }
:lang(th) h1, :lang(th) h2, :lang(th) h3 { line-height: 1.4; }
:lang(th) body { line-height: 1.75; }

.page .lang-note {
  margin: 14px 0 0; padding: 12px 16px; border-radius: 12px;
  background: var(--accent-tint); color: var(--text); font-size: 15px;
}

/* Hero */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 520px at 88% 12%, var(--hero-glow-a) 0%, transparent 70%),
    radial-gradient(700px 420px at 0% 100%, var(--hero-glow-b) 0%, transparent 70%),
    var(--surface);
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: 28px;
  padding-top: 40px; padding-bottom: 8px;
}
.eyebrow {
  display: inline-block; margin: 0 0 18px;
  font-weight: 600; font-size: 14px; letter-spacing: 0.01em;
  color: var(--accent-ink); background: var(--accent-tint); padding: 6px 14px; border-radius: 999px;
}
.hero h1 { font-weight: 700; font-size: clamp(36px, 7.4vw, 60px); letter-spacing: -0.02em; }
.grad-text { display: block; color: #B405BC; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .grad-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.lede { font-size: clamp(17px, 2.2vw, 19px); margin: 20px 0 28px; max-width: 32em; color: var(--ink-soft); }

.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store-badge { display: inline-flex; flex-direction: column; align-items: center; border-radius: 10px; transition: transform .15s ease; }
.store-badge img { height: 52px; width: auto; }
a.store-badge:hover { transform: translateY(-2px); }
.store-badge.is-soon { opacity: .55; cursor: default; }
@media (max-width: 400px) { .store-badge img { height: 46px; } }
.store-badge .soon-label { font-size: 13px; font-weight: 600; margin-top: 4px; }

/* "Download here": two mirror-image hand-drawn arrows, one looping down to each store button.
   .store-cta is as wide as the buttons, so the label sits centred over them and each arrow
   lands on its own button. Drawn and still by default (no JavaScript, reduced motion);
   site.js adds .is-on the first time it's on screen. */
.store-cta { display: inline-flex; flex-direction: column; max-width: 100%; }
.tap-hint {
  display: flex; justify-content: center; align-items: flex-start; gap: 0;
  margin: -10px 0 0; height: 56px;
  color: var(--primary); pointer-events: none; user-select: none;
}
.tap-arrow { flex: none; width: 56px; height: auto; overflow: visible; }
.tap-arrow path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tap-text {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.2;
  color: var(--accent-ink); transform: rotate(-4deg); margin-top: 1px; white-space: nowrap;
}
.tap-hint.is-light { color: #fff; }
.tap-hint.is-light .tap-text { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .js .tap-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .tap-head, .js .tap-text { opacity: 0; }
  .js .tap-hint.is-on .tap-text { animation: tap-text .45s cubic-bezier(.3, 1.6, .5, 1) .05s forwards; }
  /* Two mirror-image arrows, each with one small loop. The Google Play one follows a beat later. */
  .js .tap-hint.is-on .tap-arrow-a .tap-line { animation: tap-draw 1.1s cubic-bezier(.45, .05, .35, 1) .3s forwards; }
  .js .tap-hint.is-on .tap-arrow-a .tap-head { animation: tap-pop .25s ease-out 1.35s forwards, tap-bob 1.1s ease-in-out 1.65s 3; }
  .js .tap-hint.is-on .tap-arrow-b .tap-line { animation: tap-draw 1.1s cubic-bezier(.45, .05, .35, 1) .45s forwards; }
  .js .tap-hint.is-on .tap-arrow-b .tap-head { animation: tap-pop .25s ease-out 1.5s forwards, tap-bob 1.1s ease-in-out 1.8s 3; }
  .js .tap-hint.is-on + .store-buttons .store-badge { animation: tap-nudge .55s ease-in-out 1.5s; }
  .js .tap-hint.is-on + .store-buttons .store-badge + .store-badge { animation-delay: 1.65s; }
}
@keyframes tap-draw { to { stroke-dashoffset: 0; } }
@keyframes tap-pop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes tap-bob { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }
@keyframes tap-text { from { opacity: 0; transform: rotate(-4deg) scale(.6); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes tap-nudge { 0%, 100% { transform: none; } 35% { transform: translateY(-4px) scale(1.05); } 70% { transform: translateY(1px) scale(.99); } }
/* The smallest phones (320 px): shrink the badges a little so they stay side by side and each arrow keeps its button. */
@media (max-width: 359px) {
  .store-buttons { gap: 10px; }
  .store-badge img { height: 42px; }
  .download-inner { padding-left: 14px; padding-right: 14px; }
  .download .store-buttons { gap: 8px; }
  .download .store-badge img { height: 38px; }
}
.hero-secondary { margin: 18px 0 0; }
.hero-secondary a { font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.hero-secondary a:hover { text-decoration: underline; }

.hero-visual { position: relative; height: clamp(380px, 112vw, 470px); }
.hero-phone {
  position: absolute; width: min(46vw, 210px);
  border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); background: var(--card);
}
.hero-phone-back { left: 4%; top: 36px; rotate: -4deg; }
.hero-phone-front { right: 4%; top: 0; }
.chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); color: var(--text); border-radius: 999px; padding: 8px 14px;
  font-weight: 600; font-size: 14px; white-space: nowrap; box-shadow: var(--shadow-soft);
}
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--gradient); }
.chip-1 { left: 0; top: 62%; }
.chip-2 { left: 2%; top: -4px; }
.chip-3 { right: 0; bottom: 18px; }
.ring { position: absolute; border-radius: 50%; border: 22px solid rgba(163, 0, 250, 0.07); pointer-events: none; }
.ring-a { width: 280px; height: 280px; right: -90px; top: -60px; }

@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; align-items: center; padding-top: 72px; padding-bottom: 72px; gap: 40px; }
  .hero-visual { height: 560px; }
  .hero-phone { width: 250px; }
  .hero-phone-back { left: 6%; top: 44px; }
  .hero-phone-front { right: 4%; }
  .chip-1 { left: -4%; top: 58%; }
  .chip-2 { left: 14%; top: 0; }
  .chip-3 { right: -2%; bottom: 40px; }
}

/* Shared section type */
.section-title { font-weight: 700; font-size: clamp(28px, 4.2vw, 40px); text-align: center; letter-spacing: -0.01em; }
.section-sub { text-align: center; color: var(--text-muted); margin: 12px auto 0; max-width: 36em; }
.kicker {
  margin: 0 0 10px; font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink);
}

/* Who it's for */
.who { background: var(--surface-alt); padding: 72px 0; }
.who-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
@media (min-width: 760px) { .who-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.who-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.who-card h3 { font-weight: 500; font-size: 19px; margin: 12px 0 6px; }
.who-card p { margin: 0; color: var(--text-muted); font-size: 16px; }
.tag {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-tint); border-radius: 999px; padding: 3px 11px;
}

/* How it works */
.how { padding: 80px 0 24px; }
.steps { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 40px; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.step { position: relative; }
.step-num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--gradient); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 19px;
}
.step h3 { font-weight: 500; font-size: 20px; margin: 16px 0 6px; }
.step p { margin: 0; color: var(--text-muted); font-size: 16px; }

/* Feature spotlights */
.spotlights { padding: 40px 0 24px; }
.spotlight {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  padding: 44px 0; border-top: 1px solid var(--border);
}
.spotlight:first-child { border-top: 0; }
.spotlight h2 { font-weight: 700; font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -0.01em; }
.spotlight-copy p:not(.kicker) { color: var(--text-muted); margin: 14px 0 0; max-width: 30em; }
.spotlight-shot { justify-self: center; width: min(62vw, 270px); }
.spotlight-shot img { border-radius: 26px; box-shadow: var(--shadow); }
.spotlight-shot.is-ui img { border: 1px solid var(--border); background: var(--card); }
@media (min-width: 860px) {
  .spotlight { grid-template-columns: 1.1fr 0.9fr; gap: 64px; padding: 56px 0; }
  .spotlight.is-flipped .spotlight-copy { order: 2; }
  .spotlight-shot { width: 280px; }
}

/* Organisers */
.organisers { padding: 40px 0; }
.organisers-inner {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 28px;
  padding: 36px 24px;
}
.organisers h2 { font-weight: 700; font-size: clamp(26px, 3.6vw, 34px); letter-spacing: -0.01em; }
.organisers-inner > div > p:not(.kicker) { color: var(--text-muted); margin: 12px 0 0; }
.org-list { display: grid; gap: 18px; }
.org-list li { display: flex; gap: 14px; align-items: flex-start; }
.org-list strong { font-weight: 600; }
.org-icon {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--gradient);
}
.org-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 860px) {
  .organisers-inner { grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px; align-items: center; }
}

/* Community */
.community { padding: 32px 0 56px; }
.community-inner { max-width: 760px; text-align: center; }
.community h2 { font-weight: 700; font-size: clamp(24px, 3.2vw, 30px); }
.community p { color: var(--text-muted); margin: 12px 0 0; }
.trust-badges { display: grid; gap: 10px; margin: 22px auto 6px; max-width: 520px; text-align: left; }
.trust-badges li { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); color: var(--ink-soft); }
.trust-badges strong { color: var(--text); font-weight: 600; margin-right: 6px; }
.trust-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.trust-dot.is-gold { background: linear-gradient(180deg, #FFF5D1 0%, #F7D677 40%, #9A6A0C 56%, #EDBB45 80%, #FFF5D1 100%); }
.trust-dot.is-silver { background: linear-gradient(180deg, #F4F7FC 0%, #DCE5F2 40%, #8794AA 56%, #CDB9A4 80%, #F4F7FC 100%); }
.trust-dot.is-bronze { background: #B0703C; }

/* Download CTA */
.download { padding: 0 0 80px; }
.download-inner {
  background: var(--gradient); color: #fff; border-radius: 28px;
  text-align: center; padding: 56px 24px;
  display: flex; flex-direction: column; align-items: center;
}
.download-icon { border-radius: 22px; box-shadow: var(--shadow); }
.download h2 { font-weight: 700; font-size: clamp(28px, 4vw, 40px); margin-top: 22px; }
.download p { margin: 8px 0 26px; color: #fff; }
.download .store-buttons { justify-content: center; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 32px 0 40px; }
.footer-inner { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.footer-links a { color: var(--text); font-weight: 600; text-decoration: none; font-size: 15px; display: inline-block; padding: 4px 0; }
.footer-links a:hover { color: var(--accent-ink); text-decoration: underline; }
.legal { margin: 0; color: var(--text-muted); font-size: 13px; max-width: 46em; }

/* Text pages (Terms, 404) */
.page { padding: 48px 0 72px; }
.page .container { max-width: 760px; }
.page h1 { font-weight: 700; font-size: clamp(30px, 5vw, 42px); }
.page h2 { font-weight: 500; font-size: 20px; margin: 32px 0 8px; }
.page h3 { font-weight: 500; font-size: 17px; margin: 20px 0 6px; }
.page p, .page li { color: #2B2B33; }
.page ul { list-style: disc; padding-left: 1.3em; }
.updated { color: var(--text-muted); font-size: 14px; margin-top: 8px; }

/* Scroll motion. Only applies when JavaScript added .js and the visitor allows motion;
   otherwise everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(16px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  .js .reveal-side { transform: translateX(24px); }
  .js .spotlight.is-flipped .reveal-side { transform: translateX(-24px); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .who-grid .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: .08s; }
  .who-grid .reveal:nth-child(3), .steps .reveal:nth-child(3) { transition-delay: .16s; }

  [data-drift] { translate: 0 var(--drift, 0px); will-change: translate; }
  .hero-phone, .chip { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-phone-front { animation-delay: .08s; }
  .chip { animation-delay: .25s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Community section (Circles). Built from the app's Circle feed and Members screens. */
.community-section { padding: 48px 0 24px; background: var(--surface-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.community-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.community-copy h2 { font-weight: 700; font-size: clamp(28px, 4.2vw, 40px); letter-spacing: -0.01em; }
.community-lede { color: var(--text-muted); margin: 14px 0 0; max-width: 30em; }
.community-points { display: grid; gap: 16px; margin-top: 26px; }
.community-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--text-muted); }
.community-points strong { color: var(--text); font-weight: 600; }
.point-icon {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: var(--gradient);
}
.point-icon svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.community-note { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 13px; color: var(--text-muted); }

.community-visual { position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; justify-items: center; }
.app-panel {
  width: 100%; max-width: 340px; background: var(--card); border: 1px solid var(--border); border-radius: 26px;
  padding: 18px 14px 16px; box-shadow: var(--shadow); font-size: 13px; line-height: 1.4; color: var(--text);
}
.app-panel p { margin: 0; }
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.app-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2; }
.app-sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.app-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.app-tabs span { flex: 1; text-align: center; padding: 7px 0; border-radius: 999px; background: var(--pill); font-weight: 600; font-size: 12px; color: var(--ink-soft); }
.app-tabs .is-active { background: var(--gradient); color: #fff; }
.app-label { font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.app-label b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #DCF7E6; color: #137A3A; font-size: 11px; font-weight: 600; vertical-align: 2px; margin-left: 2px; }
.app-active { background: #FDF0F6; border-radius: 16px; padding: 12px 12px 10px; margin-bottom: 10px; }
.app-avatars { display: flex; gap: 10px; }
.app-avatars li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); min-width: 48px; }
.av {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-style: normal; font-weight: 600; font-size: 15px; color: #fff; flex: 0 0 auto;
}
.av-1 { background: linear-gradient(150deg, #F26AB8, #B405BC); }
.av-2 { background: linear-gradient(150deg, #9A5CF2, #5B21B6); }
.av-3 { background: linear-gradient(150deg, #FF8A5B, #E0366F); }
.av-4 { background: linear-gradient(150deg, #4FB8E8, #7C3AED); }
.app-avatars .av::after, .member-list .av::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: #22C55E; border: 2px solid var(--card);
}
.app-card { border: 1px solid var(--border); border-radius: 16px; padding: 12px; margin-bottom: 10px; background: var(--card); }
.app-daily { display: flex; gap: 10px; align-items: flex-start; color: var(--text-muted); font-size: 12px; }
.app-daily .app-strong { margin-bottom: 2px; }
.daily-icon { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #EAF2FF; }
.daily-icon svg { width: 18px; height: 18px; fill: none; stroke: #2563EB; stroke-width: 1.8; stroke-linecap: round; }
.app-strong { font-weight: 600; font-size: 13px; color: var(--text); }
.app-meta { color: var(--text-muted); font-size: 11px; }
.post-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.post-head .av { width: 36px; height: 36px; font-size: 14px; }
.badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.badge-pin { background: #E8EEFF; color: #3B5BDB; }
.badge-top { background: #FFF0E0; color: #C2410C; }
.post-text { color: var(--ink-soft); font-size: 12.5px; }
.post-tags { display: flex; gap: 6px; margin-top: 8px !important; }
.post-tags span { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.post-tags span:first-child { background: #E8EEFF; color: #3B5BDB; }
.post-tags span:last-child { background: #FFE9EC; color: #BE123C; }
.post-votes { display: flex; align-items: center; gap: 10px; margin-top: 10px !important; font-size: 11px; color: var(--text-muted); }
.agree-pill { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text); font-size: 11px; }
.agree-pill::before { content: ""; width: 18px; height: 18px; border-radius: 999px; background: var(--gradient); }
.post-actions { display: flex; justify-content: space-between; margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--ink-soft); }

.app-members { max-width: 300px; }
.member-list { display: grid; gap: 8px; margin-bottom: 12px; }
.member-list li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 14px; padding: 8px 10px; }
.member-list li > span:not(.connect) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.member-list b { font-weight: 600; font-size: 13px; }
.member-list em { font-style: normal; font-size: 11px; color: #16A34A; }
.connect { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--pill); color: var(--text); }
.connect.is-message { background: var(--card); color: var(--primary); border: 1px solid var(--primary); }
.member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.member-grid li { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 14px; padding: 10px 6px; font-size: 11px; color: var(--text-muted); }

@media (min-width: 640px) {
  .community-visual { grid-template-columns: 1fr 1fr; align-items: start; gap: 0; }
  .app-feed { justify-self: end; margin-right: -16px; z-index: 1; }
  .app-members { justify-self: start; margin-top: 64px; padding-left: 30px; }
}
@media (min-width: 960px) {
  .community-section { padding: 80px 0 32px; }
  .community-grid { grid-template-columns: 0.95fr 1.05fr; gap: 56px; }
  .community-note { margin-top: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .community-visual .reveal { transform: translateY(14px); }
  .js .community-visual .reveal.is-in { transform: none; }
  .js .app-feed .reveal:nth-child(3) { transition-delay: .12s; }
  .js .app-feed .reveal:nth-child(4) { transition-delay: .22s; }
  .js .app-feed .reveal:nth-child(5) { transition-delay: .32s; }
  .js .member-list .reveal:nth-child(2) { transition-delay: .1s; }
  .js .member-list .reveal:nth-child(3) { transition-delay: .2s; }
}

/* Dark theme: the tinted badges and the app mock-up's coloured fills, deepened so they read on dark cards. */
@media (prefers-color-scheme: dark) {
  .ring { border-color: rgba(163, 0, 250, 0.16); }
  .app-active { background: rgba(236, 11, 130, 0.14); }
  .app-label b { background: rgba(34, 197, 94, 0.2); color: #6EE7A0; }
  .daily-icon { background: rgba(37, 99, 235, 0.22); }
  .daily-icon svg { stroke: #8AB4FF; }
  .badge-pin, .post-tags span:first-child { background: rgba(59, 91, 219, 0.26); color: #A9BCFF; }
  .badge-top { background: rgba(194, 65, 12, 0.26); color: #FDBA8C; }
  .post-tags span:last-child { background: rgba(190, 18, 60, 0.26); color: #FDA4B4; }
  .member-list em { color: #4ADE80; }
  .page p, .page li { color: var(--ink-soft); }
}