/* Approved Moxy brand palette. Colour-only layer shared by all public pages. */
:root {
  --bg: #0d0e10;
  --white: #fafafa;
  --muted: #b7b8bf;
  --line: #34363b;
  --edge: #34363b;
  --panel: #1b1d21;
  --panel-raised: #222429;
  --wine: #8d153d;
  --rose: #d8d9df;
  --action-green: #8d153d;
  --action-green-hover: #a51c4b;
}
body, .header, .editorial-hero { background: var(--bg); color: var(--white); }
.header .login, .desktop-nav a, .hero-more { color: #d8d9df; }
.mobile-nav { background: var(--panel); border-color: var(--edge); }
.muted, .eyebrow, .small-note, .editorial-hero-copy > p,
.creator-demo-heading .section-description, .closing-copy p,
.feature-checks li, .earning-feature-copy .availability-note,
.creator-demo-footer, .creator-paid-preview > p,
.creator-replay-controls button, .onboarding-steps p,
.design-footer nav, .earning-period, .earning-note,
.earning-method p, .earning-channels li { color: var(--muted); }
.step-number { color: #d8d9df; }
.editorial-hero:after {
  background: linear-gradient(90deg, #0d0e10 3%, #0d0e10ed 24%, #0d0e1075 50%, #0d0e1000 76%),
    linear-gradient(0deg, #0d0e10, transparent 27%);
}
.demo-section:before { background: radial-gradient(ellipse at 46% 65%, #44474e20, transparent 64%); }
.section-eyebrow, .moxy-redesign .faq-intro .ending-eyebrow,
.moxy-earnings .ending-eyebrow { background: var(--panel); border-color: var(--edge); color: #d8d9df; }
.earning-feature-card, .earning-card, .design-steps li,
.moxy-redesign .moxy-faq-questions details, .closing-panel,
.invitation-panel, .option-preview, .feature-option, .floating-content {
  background: linear-gradient(145deg, #1e2024, #191b1f);
  border-color: var(--edge);
}
.earning-tabs button, .creator-tabs, .mini-conversation {
  background: var(--panel); border-color: var(--edge); color: var(--white);
}
.feature-option:hover, .feature-option[aria-selected="true"] {
  background: var(--panel-raised); border-color: #646770;
}
.earning-tabs button:hover { border-color: #646770; }
.way-illustration { background: radial-gradient(ellipse at 50% 50%, #3a3d4566, transparent 75%); }
.option-preview > .icon, .option-preview > p, .feature-option > .icon,
.moxy-redesign .moxy-faq-questions summary:after { color: #d8d9df; }
.setup-link, .moxy-redesign .faq-contact { color: var(--white); border-color: #777b85; }
.moxy-redesign .moxy-faq-questions p { color: var(--muted); }
.content-unlock { background: #1b1d21ed; border-color: #50535c; }
.photo-label { background: #1b1d21bb; }
.creator-paid-preview { border-color: #646770; box-shadow: inset 0 1px 1px #ffffff40, 0 0 0 2px #34363b66, 0 10px 15px -7px #000b, 12px 24px 36px -10px #000b; }
.telegram-demo { background: linear-gradient(135deg, #25272c, #1b1d21); border-color: #50535c; }
.button, .header .button, .primary-action, .moxy-redesign .primary-action,
.moxy-redesign .earning-cta, .earning-tabs button[aria-selected="true"],
.creator-tabs button[aria-selected="true"], .creator-send {
  background: linear-gradient(135deg, #961b47, #801337);
  border-color: #b73a64;
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff12, 0 3px 8px #00000026;
}
.button:hover, .header .button:hover, .primary-action:hover,
.moxy-redesign .primary-action:hover, .moxy-redesign .earning-cta:hover {
  background: #a51c4b; border-color: #c64773;
}
.button-secondary { background: var(--panel); border-color: #50535c; }
.button-secondary:hover { background: var(--panel-raised); border-color: #777b85; }
.creator-conversation .chat-bubble.fan { background: linear-gradient(135deg, #8d153d, #701130); border-color: #a83c60; }
.creator-conversation .chat-time, .creator-conversation .day-divider,
.creator-chat-heading > div > span, .creator-tabs button,
.creator-conversation .chat-time b { color: var(--muted); }
.creator-tabs button[aria-selected="true"] { color: #fff; }
.demo-signup, .floating-signup {
  background: linear-gradient(145deg, #25272c, #1b1d21);
  color: var(--white); border-color: #50535c;
  box-shadow: inset 0 1px 0 #ffffff0c, 0 8px 24px #00000033;
}
.demo-signup > div > span, .floating-signup > div > span { color: var(--muted); }
.invitation-panel input { background: var(--panel-raised); border-color: #50535c; color: var(--white); }
.invitation-panel input::placeholder { color: #989aa4; }
.invitation-panel label { color: var(--white); }
.invitation-panel > p:not(.eyebrow) { color: var(--muted); }
.form-error { color: #fda4af; }
.design-footer, .footer { border-color: var(--line); color: var(--muted); }
a:focus-visible, button:focus-visible, input:focus-visible,
summary:focus-visible, [tabindex="0"]:focus-visible { outline-color: #e697b3; }

/* The linked information pages share the same colour system. */
.how-page { --bg: #0d0e10; --teal: var(--wine); }
.moxy-monetization, .moxy-launch, .moxy-faq { background: var(--bg); color: var(--white); color-scheme: dark; }
.moxy-faq .ending-eyebrow, .faq-intro h2, .faq-contact,
.moxy-faq-questions summary { color: var(--white); }
.faq-intro > p:not(.ending-eyebrow), .moxy-faq-questions details > p { color: var(--muted); }
.moxy-faq-questions details, .moxy-faq-questions details:last-child { border-color: var(--line); }
.moxy-chat-panel, .monetization-demo, .monetization-motion-credit {
  background: var(--panel); border-color: var(--line); color: var(--white); color-scheme: dark;
}
.monetization-demo-header, .monetization-demo-offer, .monetization-motion-footer { border-color: var(--line); }
.monetization-bubble.is-fan { background: var(--panel-raised); border-color: #50535c; color: var(--white); }
.monetization-bubble.is-ai { background: var(--wine); border-color: #a83c60; color: var(--white); }
.monetization-demo-header > span, .monetization-demo-offer > span,
.monetization-demo-offer > span:last-child:not(:first-child),
.monetization-motion-date, .monetization-motion-footer,
.monetization-motion-credit-copy > span:not(.monetization-motion-credit-state) { color: var(--muted); }
.monetization-demo-offer strong, .monetization-motion-credit strong,
.monetization-motion-controls button { color: var(--white); }
.monetization-motion-controls button:hover { background: var(--panel-raised); }

@media (max-width: 640px) {
  .editorial-hero:after {
    background: linear-gradient(180deg, transparent 26%, #0d0e1008 38%, #0d0e10a6 54%, #0d0e10f5 76%, #0d0e10 94%);
  }
}