:root {
      color-scheme: light dark;
      --primary: #0891b2;
      --primary-dark: #0e7490;
      --primary-glow: rgba(8, 145, 178, 0.18);
      --brand: #0d9488;
      --brand2: #6366f1;
      --brand2-glow: rgba(99, 102, 241, 0.15);
      --cta: #22c55e;
      --cta-dark: #16a34a;
      --cta-glow: rgba(34, 197, 94, 0.3);
      --bg: #f0fdfa;
      --bg-elevated: #ffffff;
      --surface: #ffffff;
      --surface-hover: #f8fafc;
      --ink: #134e4a;
      --ink-body: #0f172a;
      --muted: #475569;
      --border: #cbd5e1;
      --border-light: #e2e8f0;
      --verified: #047857;
      --verified-bg: #ecfdf5;
      --chw-bg: #eef2ff;
      --chw-text: #4338ca;
      --nav-bg: rgba(255, 255, 255, 0.88);
      --modal-bg: rgba(15, 23, 42, 0.45);
      --hero-gradient: linear-gradient(135deg, rgba(13, 148, 136, 0.08) 0%, rgba(99, 102, 241, 0.06) 50%, transparent 100%);
      --app-cta-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #134e4a 100%);
      --orb-1: rgba(13, 148, 136, 0.12);
      --orb-2: rgba(99, 102, 241, 0.08);
      --orb-3: rgba(34, 197, 94, 0.05);
      --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
      --shadow-md: 0 12px 32px rgba(8, 145, 178, 0.12);
      --shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.08);
      --card-hover-border: #99f6e4;
      --avatar-bg: linear-gradient(135deg, #ccfbf1, #e0e7ff);
      --input-bg: #ffffff;
      --radius: 14px;
      --radius-lg: 20px;
      --nav-h: 64px;
      --font-head: 'Figtree', 'Noto Sans', system-ui, sans-serif;
      --font-body: 'Noto Sans', 'Padauk', system-ui, sans-serif;
      --font-my: 'Padauk', 'Noto Sans', sans-serif;
      --ease: cubic-bezier(0.33, 1, 0.68, 1);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --primary: #22d3ee;
        --primary-dark: #2dd4bf;
        --primary-glow: rgba(45, 212, 191, 0.15);
        --brand: #2dd4bf;
        --brand2: #818cf8;
        --brand2-glow: rgba(129, 140, 248, 0.18);
        --cta: #4ade80;
        --cta-dark: #22c55e;
        --cta-glow: rgba(74, 222, 128, 0.25);
        --bg: #0f172a;
        --bg-elevated: #1e293b;
        --surface: #1e293b;
        --surface-hover: #334155;
        --ink: #ccfbf1;
        --ink-body: #f1f5f9;
        --muted: #94a3b8;
        --border: #475569;
        --border-light: #334155;
        --verified: #6ee7b7;
        --verified-bg: rgba(6, 78, 59, 0.45);
        --chw-bg: rgba(49, 46, 129, 0.45);
        --chw-text: #a5b4fc;
        --nav-bg: rgba(30, 41, 59, 0.92);
        --modal-bg: rgba(0, 0, 0, 0.65);
        --hero-gradient: linear-gradient(135deg, rgba(45, 212, 191, 0.1) 0%, rgba(129, 140, 248, 0.08) 50%, transparent 100%);
        --app-cta-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 40%, rgba(13, 148, 136, 0.25) 100%);
        --orb-1: rgba(45, 212, 191, 0.12);
        --orb-2: rgba(129, 140, 248, 0.1);
        --orb-3: rgba(74, 222, 128, 0.06);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
        --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.4);
        --card-hover-border: rgba(45, 212, 191, 0.45);
        --avatar-bg: linear-gradient(135deg, rgba(45, 212, 191, 0.25), rgba(129, 140, 248, 0.25));
        --input-bg: #0f172a;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }

    body {
      font-family: var(--font-body);
      font-size: 16px;
      background: var(--bg);
      color: var(--ink-body);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
      padding-bottom: calc(88px + var(--safe-bottom));
      scroll-padding-bottom: calc(88px + var(--safe-bottom));
    }

    @media (min-width: 768px) {
      body { padding-bottom: 0; }
    }

    /* Ambient background */
    .ambient {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .ambient .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.85;
    }

    .ambient .orb-1 {
      width: min(480px, 90vw);
      height: min(480px, 90vw);
      background: var(--orb-1);
      top: -120px;
      right: -80px;
    }

    .ambient .orb-2 {
      width: min(360px, 70vw);
      height: min(360px, 70vw);
      background: var(--orb-2);
      bottom: 20%;
      left: -100px;
    }

    .ambient .orb-3 {
      width: min(280px, 60vw);
      height: min(280px, 60vw);
      background: var(--orb-3);
      top: 45%;
      right: 10%;
    }

    .page-wrap {
      position: relative;
      z-index: 1;
    }

    .skip-link {
      position: absolute;
      left: -9999px;
      top: calc(12px + var(--safe-top));
      z-index: 400;
      padding: 12px 20px;
      background: var(--ink-body);
      color: var(--bg);
      border-radius: 8px;
      font-weight: 600;
    }

    .skip-link:focus {
      left: 12px;
      outline: 3px solid var(--primary);
      outline-offset: 2px;
    }

    a {
      color: var(--primary-dark);
      text-decoration: none;
      transition: color 0.2s var(--ease);
    }

    a:hover { color: var(--brand); }

    :focus { outline: none; }

    :focus-visible {
      outline: 3px solid var(--primary);
      outline-offset: 2px;
    }

    .preview-badge { display: none; }

    .hero-actions .btn-teal,
    .hero-actions .btn-indigo {
      flex: 1 1 160px;
      min-width: 0;
      justify-content: center;
    }

    @media (min-width: 480px) {
      .hero-actions .btn-teal,
      .hero-actions .btn-indigo { flex: 1 1 0; max-width: 220px; }
    }

    .hero-actions-label {
      width: 100%;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: -4px;
      font-family: var(--font-head);
    }

    .dual-path-hint {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
      font-size: 0.82rem;
      color: var(--muted);
      margin-bottom: 18px;
    }

    .dual-path-hint span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .dual-path-hint .dot-teal,
    .dual-path-hint .dot-indigo {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .dual-path-hint .dot-teal { background: var(--brand); }
    .dual-path-hint .dot-indigo { background: var(--brand2); }

    /* Nav */
    .nav-shell {
      position: fixed;
      top: calc(10px + var(--safe-top));
      left: max(12px, env(safe-area-inset-left));
      right: max(12px, env(safe-area-inset-right));
      z-index: 200;
      max-width: 1120px;
      margin: 0 auto;
    }

    @media (min-width: 768px) {
      .nav-shell {
        top: calc(16px + var(--safe-top));
        left: 16px;
        right: 16px;
      }
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 14px;
      background: var(--nav-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-light);
      border-radius: 16px;
      box-shadow: var(--shadow-md);
      transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
    }

    @media (min-width: 768px) {
      .nav { padding: 12px 20px; gap: 16px; }
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--ink-body);
      cursor: pointer;
      min-width: 0;
    }

    .brand-logo {
      display: block;
      line-height: 0;
      flex-shrink: 0;
    }

    .brand-logo img {
      display: block;
      height: 46px;
      width: auto;
      max-width: min(44vw, 148px);
    }

    @media (min-width: 768px) {
      .brand-logo img {
        height: 52px;
        max-width: 160px;
      }
    }

    .nav-links {
      display: none;
      align-items: center;
      gap: 4px;
    }

    @media (min-width: 768px) {
      .nav-links { display: flex; }
    }

    .nav-links a {
      padding: 8px 14px;
      border-radius: 10px;
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      transition: background 0.2s var(--ease), color 0.2s var(--ease);
    }

    .nav-links a:hover,
    .nav-links a.active {
      background: var(--verified-bg);
      color: var(--primary-dark);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    @media (min-width: 480px) {
      .nav-actions { gap: 8px; }
    }

    .btn-icon {
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 12px;
    }

    .menu-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid var(--border-light);
      color: var(--ink-body);
      cursor: pointer;
      transition: background 0.2s var(--ease);
    }

    .menu-toggle:hover { background: var(--surface-hover); }

    @media (min-width: 768px) {
      .menu-toggle { display: none; }
    }

    .btn-signin-text { display: none; }

    @media (min-width: 640px) {
      .btn-signin-text { display: inline; }
    }

    .btn-join-short::after { content: 'Join'; }

    @media (min-width: 480px) {
      .btn-join-short::after { content: 'Join free'; }
    }

    .btn {
      font-family: var(--font-head);
      font-size: 0.88rem;
      font-weight: 600;
      min-height: 44px;
      min-width: 44px;
      padding: 10px 14px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease), transform 0.2s var(--ease);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: nowrap;
    }

    @media (min-width: 480px) {
      .btn { font-size: 0.9rem; padding: 10px 18px; }
    }

    .btn:active { transform: scale(0.98); }

    @media (prefers-reduced-motion: reduce) {
      .btn:active { transform: none; }
    }

    .btn-ghost {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border-light);
    }

    .btn-ghost:hover {
      background: var(--surface-hover);
      color: var(--ink-body);
    }

    .btn-primary {
      background: var(--cta);
      color: #0f172a;
      box-shadow: 0 4px 14px var(--cta-glow);
      font-weight: 700;
    }

    @media (prefers-color-scheme: dark) {
      .btn-primary { color: #0f172a; }
    }

    .btn-primary:hover { background: var(--cta-dark); }

    .btn-teal {
      background: var(--brand);
      color: #0f172a;
      font-weight: 700;
    }

    @media (prefers-color-scheme: light) {
      .btn-teal { color: #fff; }
    }

    .btn-teal:hover { filter: brightness(1.05); }

    .btn-indigo {
      background: var(--brand2);
      color: #fff;
    }

    .btn-indigo:hover { filter: brightness(1.08); }

    .btn-full-mobile {
      width: 100%;
    }

    @media (min-width: 480px) {
      .btn-full-mobile { width: auto; }
    }

    .icon { width: 20px; height: 20px; flex-shrink: 0; }

    /* Mobile drawer */
    .drawer-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--modal-bg);
      backdrop-filter: blur(4px);
      z-index: 250;
    }

    .drawer-backdrop.open { display: block; }

    .mobile-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: min(320px, 88vw);
      height: 100%;
      height: 100dvh;
      background: var(--surface);
      border-left: 1px solid var(--border-light);
      z-index: 260;
      padding: calc(20px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
      transform: translateX(100%);
      transition: transform 0.28s var(--ease);
      box-shadow: var(--shadow-lg);
      overflow-y: auto;
    }

    .mobile-drawer.open { transform: translateX(0); }

    .drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 28px;
    }

    .drawer-close {
      width: 44px;
      height: 44px;
      border: 1px solid var(--border-light);
      border-radius: 12px;
      background: transparent;
      color: var(--ink-body);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .drawer-nav {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 24px;
    }

    .drawer-nav a {
      padding: 14px 16px;
      border-radius: 12px;
      font-weight: 600;
      color: var(--ink-body);
      cursor: pointer;
      transition: background 0.2s var(--ease);
    }

    .drawer-nav a:hover,
    .drawer-nav a.active {
      background: var(--verified-bg);
      color: var(--primary-dark);
    }

    .drawer-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .drawer-actions .btn { width: 100%; }

    /* Hero */
    .page-hero {
      padding: calc(var(--nav-h) + 36px + var(--safe-top)) 16px 28px;
      max-width: 1120px;
      margin: 0 auto;
      background: var(--hero-gradient);
    }

    @media (min-width: 768px) {
      .page-hero {
        padding: calc(var(--nav-h) + 48px + var(--safe-top)) 24px 32px;
      }
    }

    .hero-grid {
      display: grid;
      gap: 24px;
      align-items: center;
    }

    @media (min-width: 900px) {
      .hero-grid {
        grid-template-columns: 1.15fr 1fr;
        gap: 28px;
      }
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--verified);
      background: var(--verified-bg);
      padding: 6px 12px;
      border-radius: 999px;
      margin-bottom: 16px;
      font-family: var(--font-head);
      border: 1px solid transparent;
    }

    @media (min-width: 480px) {
      .eyebrow { font-size: 0.82rem; }
    }

    @media (prefers-color-scheme: dark) {
      .eyebrow { border-color: rgba(45, 212, 191, 0.2); }
    }

    .eyebrow .dot {
      width: 8px;
      height: 8px;
      background: var(--cta);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
      flex-shrink: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .eyebrow .dot { animation: none; }
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.55; transform: scale(0.92); }
    }

    .hero-copy h1 {
      font-family: var(--font-head);
      font-size: clamp(1.65rem, 5.5vw, 2.65rem);
      font-weight: 700;
      line-height: 1.18;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .hero-copy h1 .my {
      font-family: var(--font-my);
      font-weight: 700;
      display: block;
      background: linear-gradient(135deg, var(--brand) 0%, var(--primary) 50%, var(--brand2) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    .hero-copy h1 .subline {
      color: var(--ink-body);
      -webkit-text-fill-color: var(--ink-body);
    }

    .hero-copy > p {
      font-size: clamp(0.95rem, 2.5vw, 1.05rem);
      color: var(--muted);
      max-width: 520px;
      margin-bottom: 24px;
    }

    .hero-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 28px;
    }

    @media (min-width: 480px) {
      .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
      }
    }

    .trust-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      padding-top: 20px;
      border-top: 1px solid var(--border-light);
    }

    @media (min-width: 480px) {
      .trust-row { grid-template-columns: repeat(3, 1fr); }
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.82rem;
      color: var(--muted);
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border-light);
      border-radius: var(--radius);
    }

    @media (min-width: 900px) {
      .trust-item {
        background: transparent;
        border: none;
        padding: 0;
      }
    }

    .trust-item strong {
      display: block;
      font-family: var(--font-head);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--ink-body);
      line-height: 1.2;
    }

    .hero-panel {
      background: var(--surface);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      padding: 20px;
      box-shadow: var(--shadow-lg);
      position: relative;
      overflow: hidden;
    }

    @media (min-width: 768px) {
      .hero-panel { padding: 24px; }
    }

    .hero-panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--brand), var(--brand2));
    }

    .panel-title {
      font-family: var(--font-head);
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--primary-dark);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 16px;
    }

    .live-thread {
      display: flex;
      gap: 12px;
      padding: 14px 8px;
      border-bottom: 1px solid var(--border-light);
      cursor: pointer;
      transition: background 0.2s var(--ease);
      border-radius: 10px;
    }

    .live-thread:last-child { border-bottom: none; }
    .live-thread:hover { background: var(--surface-hover); }

    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--avatar-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 0.85rem;
      color: var(--primary-dark);
      flex-shrink: 0;
    }

    .live-thread h3 {
      font-family: var(--font-my);
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 4px;
    }

    @media (min-width: 480px) {
      .live-thread h3 { font-size: 0.92rem; }
    }

    .live-meta {
      font-size: 0.75rem;
      color: var(--muted);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      font-family: var(--font-head);
    }

    .badge-verified {
      background: var(--verified-bg);
      color: var(--verified);
    }

    .badge-chw {
      background: var(--chw-bg);
      color: var(--chw-text);
    }

    main {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 16px 48px;
    }

    @media (min-width: 768px) {
      main { padding: 0 24px 64px; }
    }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .section-head h2 {
      font-family: var(--font-head);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    @media (min-width: 768px) {
      .section-head h2 { font-size: 1.25rem; }
      .section-head { margin-bottom: 20px; }
    }

    .section-head a {
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
    }

    .categories-scroll {
      margin: 0 -16px 36px;
      padding: 0 16px 4px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .categories-scroll::-webkit-scrollbar { display: none; }

    @media (min-width: 768px) {
      .categories-scroll {
        margin: 0 0 40px;
        padding: 0;
        overflow: visible;
      }
    }

    .categories {
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      width: max-content;
    }

    @media (min-width: 768px) {
      .categories {
        flex-wrap: wrap;
        width: auto;
      }
    }

    .cat-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: var(--surface);
      border: 1px solid var(--border-light);
      border-radius: 999px;
      font-family: var(--font-my);
      font-size: 0.85rem;
      color: var(--ink-body);
      cursor: pointer;
      transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
      min-height: 44px;
      flex-shrink: 0;
    }

    .cat-btn:hover,
    .cat-btn:focus-visible {
      border-color: var(--brand);
      color: var(--primary-dark);
      box-shadow: var(--shadow-sm);
      background: var(--bg-elevated);
    }

    .cat-btn svg { color: var(--primary); }

    .content-split {
      display: grid;
      gap: 36px;
      margin-bottom: 40px;
    }

    @media (min-width: 900px) {
      .content-split {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-bottom: 48px;
      }
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border-light);
      border-radius: var(--radius);
      padding: 16px 18px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
      border-left: 3px solid transparent;
    }

    a.card-link {
      display: block;
      text-decoration: none;
      color: inherit;
    }

    a.card-link h3 {
      font-family: var(--font-head);
      font-size: 0.98rem;
      font-weight: 700;
      line-height: 1.35;
      margin: 0 0 8px;
      color: var(--ink-body);
    }

    a.card-link:hover h3 { color: var(--primary-dark); }

    @media (min-width: 768px) {
      a.card-link h3 { font-size: 1rem; }
    }

    @media (min-width: 768px) {
      .card { padding: 18px 20px; }
    }

    .card:hover {
      box-shadow: var(--shadow-md);
      border-left-color: var(--brand);
      border-color: var(--card-hover-border);
      background: var(--bg-elevated);
    }

    .card .meta {
      font-size: 0.75rem;
      color: var(--muted);
      margin-bottom: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .card h3 {
      font-family: var(--font-my);
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.45;
      margin-bottom: 6px;
    }

    @media (min-width: 768px) {
      .card h3 { font-size: 1rem; }
    }

    .card h3 a { color: var(--ink-body); }
    .card h3 a:hover { color: var(--primary-dark); }

    .card .excerpt {
      font-size: 0.88rem;
      color: var(--muted);
      line-height: 1.55;
    }

    .members-section {
      background: var(--surface);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      padding: 24px 20px;
      margin-bottom: 36px;
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
    }

    @media (min-width: 768px) {
      .members-section { padding: 28px 32px; margin-bottom: 40px; }
    }

    .members-section::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, var(--brand), transparent 40%, var(--brand2));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: 0.55;
    }

    .members-section h2 {
      font-family: var(--font-head);
      font-size: 1.1rem;
      margin-bottom: 8px;
      color: var(--ink);
    }

    .members-section p.lead {
      color: var(--muted);
      font-size: 0.92rem;
      margin-bottom: 20px;
      max-width: 560px;
    }

    .member-row {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }

    @media (min-width: 640px) {
      .member-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
      }
    }

    .member-stack { display: flex; }

    .member-stack .m {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 3px solid var(--surface);
      margin-left: -12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-head);
      font-size: 0.75rem;
      font-weight: 700;
      color: #fff;
    }

    .member-stack .m:first-child { margin-left: 0; }

    .m1 { background: #0891b2; }
    .m2 { background: #6366f1; }
    .m3 { background: #0d9488; }
    .m4 { background: #64748b; }
    .m5 { background: #22c55e; }

    .member-stat {
      font-size: 0.88rem;
      color: var(--muted);
      flex: 1;
    }

    .member-stat strong {
      color: var(--ink-body);
      font-family: var(--font-head);
    }

    .member-row .btn {
      width: 100%;
    }

    @media (min-width: 640px) {
      .member-row .btn { width: auto; }
    }

    .app-cta {
      background: var(--app-cta-bg);
      color: #f1f5f9;
      border-radius: var(--radius-lg);
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: var(--shadow-lg);
      box-sizing: border-box;
      overflow: hidden;
      width: 100%;
    }

    @media (min-width: 768px) {
      .app-cta {
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        padding: 32px 36px;
        gap: 24px;
      }

      .app-cta-copy,
      .app-cta-visuals {
        align-self: center;
      }
    }

    @media (min-width: 960px) {
      .app-cta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
        align-items: stretch;
        gap: 28px 24px;
      }

      .app-cta-copy,
      .app-cta-visuals {
        align-self: center;
      }
    }

    .app-cta-visuals {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    @media (min-width: 768px) {
      .app-cta-visuals {
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
        width: auto;
        max-width: min(100%, 420px);
        flex: 0 1 auto;
        margin-left: auto;
      }
    }

    .app-cta-copy {
      min-width: 0;
    }

    .app-preview-hero {
      margin: 0;
      flex: 0 1 auto;
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-sizing: border-box;
      align-self: stretch;
      width: 100%;
      max-width: 240px;
      min-width: 0;
      margin-inline: auto;
      min-height: min(58vh, 460px);
    }

    .app-preview-hero img {
      display: block;
      width: auto;
      height: 100%;
      min-height: min(56vh, 440px);
      max-width: 100%;
      border: none;
      border-radius: 18px;
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
      object-fit: contain;
      object-position: center top;
    }

    @media (min-width: 960px) {
      .app-preview-hero {
        margin-inline: 0;
        padding: 8px 12px;
        min-height: 100%;
        height: auto;
        max-width: 220px;
      }

      .app-preview-hero img {
        min-height: 0;
        height: 100%;
        width: 100%;
        max-width: 196px;
      }
    }

    .app-download-visuals-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .app-download-visuals {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 14px;
    }

    .app-preview:not(.app-preview-hero),
    .app-qr-tile {
      margin: 0;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: var(--radius);
      border: 1px solid rgba(255, 255, 255, 0.1);
      height: 164px;
      box-sizing: border-box;
    }

    .app-preview:not(.app-preview-hero) img {
      display: block;
      width: auto;
      height: 144px;
      max-width: none;
      border: none;
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
      object-fit: contain;
      object-position: center top;
    }

    .app-qr-tile {
      height: auto;
      padding: 12px;
    }

    .app-qr-tile img {
      display: block;
      width: 140px;
      height: 140px;
      border-radius: 8px;
      background: #fff;
      padding: 6px;
      box-sizing: border-box;
    }

    .app-cta h2 {
      font-family: var(--font-head);
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 8px;
    }

    @media (min-width: 768px) {
      .app-cta h2 { font-size: 1.35rem; }
    }

    .app-cta p {
      font-size: 0.9rem;
      opacity: 0.88;
      max-width: 480px;
      line-height: 1.6;
      color: #cbd5e1;
    }

    .app-features {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      margin-top: 14px;
      max-width: 520px;
    }

    .app-features span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem;
      opacity: 0.92;
    }

    .app-cta .btn-teal {
      color: #0f172a;
      box-shadow: 0 4px 20px var(--primary-glow);
    }

    .app-cta-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      flex: 0 0 auto;
      min-width: 0;
    }

    @media (min-width: 768px) {
      .app-cta-actions { align-items: flex-end; }
    }

    .app-qr-caption {
      font-size: 0.78rem;
      opacity: 0.85;
      text-align: center;
      max-width: 22ch;
      line-height: 1.4;
    }


    footer {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 16px calc(24px + var(--safe-bottom));
      text-align: center;
    }

    @media (min-width: 768px) {
      footer { padding: 0 24px 40px; }
    }

    .disclaimer {
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.6;
      padding: 18px 20px;
      background: var(--surface);
      border: 1px solid var(--border-light);
      border-radius: var(--radius);
    }

    .footer-links {
      margin-top: 16px;
      font-size: 0.85rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 24px;
    }

    .footer-links a { cursor: pointer; }

    /* Mobile bottom bar */
    .mobile-bar {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 180;
      padding: 10px 12px calc(10px + var(--safe-bottom));
      background: var(--nav-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-top: 1px solid var(--border-light);
      gap: 8px;
      box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
    }

    @media (min-width: 768px) {
      .mobile-bar { display: none; }
    }

    .mobile-bar a,
    .mobile-bar button {
      flex: 1;
      min-height: 44px;
      font-family: var(--font-head);
      font-size: 0.78rem;
      font-weight: 600;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      background: transparent;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s var(--ease), background 0.2s var(--ease);
    }

    .mobile-bar a:hover,
    .mobile-bar a.active {
      color: var(--primary-dark);
      background: var(--verified-bg);
    }

    .mobile-bar .bar-cta {
      flex: 1.4;
      background: var(--cta);
      color: #0f172a;
      flex-direction: row;
      gap: 6px;
      font-size: 0.85rem;
    }

    .mobile-bar svg { width: 18px; height: 18px; }

    /* Modal */
    .modal-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--modal-bg);
      backdrop-filter: blur(6px);
      align-items: flex-end;
      justify-content: center;
      z-index: 300;
      padding: 0;
    }

    @media (min-width: 480px) {
      .modal-backdrop {
        align-items: center;
        padding: 20px;
      }
    }

    .modal-backdrop.open { display: flex; }

    .modal {
      background: var(--surface);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      padding: 28px 24px calc(28px + var(--safe-bottom));
      width: 100%;
      max-width: 420px;
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--border-light);
      max-height: 90dvh;
      overflow-y: auto;
    }

    @media (min-width: 480px) {
      .modal {
        border-radius: var(--radius-lg);
        padding: 32px;
      }
    }

    .modal h2 {
      font-family: var(--font-head);
      font-size: 1.35rem;
      margin-bottom: 6px;
      color: var(--ink-body);
    }

    .modal .sub {
      font-size: 0.88rem;
      color: var(--muted);
      margin-bottom: 24px;
    }

    .field { margin-bottom: 16px; }

    .field label {
      display: block;
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--ink-body);
    }

    .field input {
      width: 100%;
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      font-family: var(--font-body);
      font-size: 16px;
      background: var(--input-bg);
      color: var(--ink-body);
      transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }

    .field input::placeholder { color: var(--muted); opacity: 0.7; }

    .field input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-glow);
    }

    .modal .btn-primary { width: 100%; margin-top: 8px; }

    .login-error {
      display: none;
      margin: 12px 0 4px;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 0.85rem;
      line-height: 1.4;
      color: #fecaca;
      background: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.35);
    }

    .login-error.visible { display: block; }

    .login-session {
      margin-top: 8px;
      text-align: center;
    }

    .login-session-label {
      font-size: 0.82rem;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .login-session-user {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 16px;
      word-break: break-all;
    }

    .login-signout { width: 100%; }

    .modal-note {
      margin-top: 16px;
      font-size: 0.82rem;
      color: var(--muted);
      text-align: center;
    }