/* Zyora v10 — final visual and accessibility pass */
:root {
  --zy-bg: #f6f4fb;
  --zy-surface: #ffffff;
  --zy-surface-soft: #f0edf8;
  --zy-text: #17141d;
  --zy-muted: #6f6a77;
  --zy-line: #e0dce8;
  --zy-violet: #6552e8;
  --zy-violet-hi: #8b72ff;
  --zy-coral: #f16f52;
  --zy-cyan: #31a5cf;
  --zy-positive: #237b5d;
  --zy-focus: #8b72ff;
  color-scheme: light;
}

html[data-theme="dark"] {
  --zy-bg: #0c0a10;
  --zy-surface: #15121a;
  --zy-surface-soft: #1d1923;
  --zy-text: #f8f5fc;
  --zy-muted: #aaa3b1;
  --zy-line: #342e3b;
  --zy-positive: #7dd9af;
  color-scheme: dark;
}

body {
  background: var(--zy-bg);
  color: var(--zy-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
a { -webkit-tap-highlight-color: transparent; }
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--zy-focus) 55%, transparent);
  outline-offset: 3px;
}

.nav-wrap {
  background: color-mix(in srgb, var(--zy-bg) 86%, transparent);
  border-color: color-mix(in srgb, var(--zy-line) 76%, transparent);
}
.nav-links a { transition: color .18s ease, opacity .18s ease; }
.nav-links a:hover { color: var(--zy-violet); }
.brand-mark {
  background: #17131d;
  color: #cfc7ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.home-ios-switch,
.ios-switch { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.home-ios-switch.on,
.ios-switch.on { background: linear-gradient(135deg,var(--zy-violet),var(--zy-violet-hi)); }

.hero h1 span { color: var(--zy-violet); }
.hero-lead { color: var(--zy-muted); }
.btn-primary {
  background: linear-gradient(135deg,#17131d,#2d253a);
  box-shadow: 0 14px 36px rgba(30,22,46,.2);
}
.btn-primary:hover { box-shadow: 0 18px 42px rgba(30,22,46,.27); }
.btn-ghost { background: color-mix(in srgb,var(--zy-surface) 78%,transparent); border-color: var(--zy-line); }
.floating-card,
.smart-split,
.goal-widget,
.white-card { background: var(--zy-surface); border-color: var(--zy-line); }
.phone { border-color: #15121a; }
.feature-card { border: 1px solid color-mix(in srgb,var(--zy-line) 65%,transparent); }
.dark-card { border-color: #302a39; }
.lime-card {
  background: linear-gradient(145deg,#dfff72,#c9f64a);
  color: #17141d;
}
.cream-card { background: #eee9f3; }
.security { background: #ece8f2; }
.cta { background: linear-gradient(135deg,#5b47dd 0%,#7d62f3 56%,#8d71f7 100%); }

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 0%,rgba(102,82,232,.16),transparent 34rem),
    var(--zy-bg);
}
html[data-theme="dark"] .brand,
html[data-theme="dark"] .nav-links a,
html[data-theme="dark"] .btn-text,
html[data-theme="dark"] .footer a { color: var(--zy-text); }
html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .benefits p,
html[data-theme="dark"] .pain-strip p { color: var(--zy-muted); }
html[data-theme="dark"] .phone,
html[data-theme="dark"] .floating-card,
html[data-theme="dark"] .smart-split,
html[data-theme="dark"] .goal-widget,
html[data-theme="dark"] .white-card {
  background: var(--zy-surface);
  border-color: var(--zy-line);
  color: var(--zy-text);
}
html[data-theme="dark"] .cream-card,
html[data-theme="dark"] .security,
html[data-theme="dark"] .streak-game,
html[data-theme="dark"] .shield,
html[data-theme="dark"] .brand-pills span {
  background: var(--zy-surface-soft);
  color: var(--zy-text);
}
html[data-theme="dark"] .lime-card {
  background: linear-gradient(145deg,#27203c,#35201c);
  color: var(--zy-text);
}
html[data-theme="dark"] .bicon { border-color: var(--zy-line); }

/* Demo shell */
.demo-page { min-height: 100vh; }
.demo-intro { padding-top: 64px; }
.demo-intro h1 { letter-spacing: -.055em; }
.demo-note { border-radius: 14px; }
.phone-shell {
  box-shadow: 0 42px 110px rgba(29,20,48,.23),0 0 0 1px rgba(255,255,255,.08) inset;
}
.phone-screen { background: var(--zy-surface); }
.mobile-view { scrollbar-width: none; }
.mobile-view::-webkit-scrollbar { display: none; }
.mobile-topline,
.inside-header { position: relative; z-index: 3; }
.spendable-hero > strong { letter-spacing: -.045em; }
.quick-action,
.tab-btn,
.round-btn,
.header-add,
.back-home { touch-action: manipulation; }
.quick-action > span { transition: transform .17s ease,box-shadow .17s ease; }
.quick-action:active > span { transform: scale(.94); }
.smart-split-banner { transition: transform .18s ease,box-shadow .18s ease; }
.smart-split-banner:hover { transform: translateY(-1px); }
.smart-split-banner:active { transform: scale(.985); }
.transaction-row { transition: background-color .16s ease; }
.transaction-row:hover { background: color-mix(in srgb,var(--zy-violet) 4%,transparent); }
.mobile-tabbar { padding-bottom: max(7px,env(safe-area-inset-bottom)); }
.tab-btn > span { transition: transform .18s ease,background-color .18s ease,color .18s ease; }
.tab-btn:active > span { transform: scale(.9); }
.tab-btn.active > span { box-shadow: 0 6px 15px rgba(92,71,207,.16); }
.friends-tab > span { background: linear-gradient(145deg,var(--zy-violet),var(--zy-violet-hi))!important; color: #fff!important; }
.pro-tab > span { border: 1px solid var(--zy-line); }
.pro-coming { overflow: hidden; position: relative; }
.pro-coming::after {
  content: "";
  position: absolute;
  width: 145px;
  height: 145px;
  right: -55px;
  top: -60px;
  border: 1px solid rgba(139,114,255,.24);
  border-radius: 50%;
}
.send-sheet.open .sheet-card { animation: sheetIn .24s cubic-bezier(.22,.8,.32,1); }
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

html[data-theme="dark"] .demo-note {
  background: linear-gradient(135deg,#201a31,#191522);
  border-color: #3d3450;
  color: #c9c0e8;
}
html[data-theme="dark"] .phone-screen,
html[data-theme="dark"] .pro-view { background: #121017; }
html[data-theme="dark"] .inside-header strong,
html[data-theme="dark"] .section-head strong,
html[data-theme="dark"] .friend-list-head strong,
html[data-theme="dark"] .challenge-head strong,
html[data-theme="dark"] .level-roadmap-head strong,
html[data-theme="dark"] .pro-section-title strong { color: var(--zy-text); }
html[data-theme="dark"] .inside-header small,
html[data-theme="dark"] .section-head small,
html[data-theme="dark"] .friend-list-head small,
html[data-theme="dark"] .challenge-head small,
html[data-theme="dark"] .pro-section-title small { color: var(--zy-muted); }
html[data-theme="dark"] .transaction-list,
html[data-theme="dark"] .friend-row,
html[data-theme="dark"] .mission,
html[data-theme="dark"] .mobile-goal,
html[data-theme="dark"] .pro-metrics article,
html[data-theme="dark"] .pro-feature-list article,
html[data-theme="dark"] .split-result-card,
html[data-theme="dark"] .shield-mobile {
  background: #18151d;
  border-color: var(--zy-line);
  color: var(--zy-text);
}
html[data-theme="dark"] .transaction-row,
html[data-theme="dark"] .allocation-mobile-list article,
html[data-theme="dark"] .level-row { border-color: #2d2833; }
html[data-theme="dark"] .tx-main strong,
html[data-theme="dark"] .tx-amount strong,
html[data-theme="dark"] .allocation-mobile-list strong,
html[data-theme="dark"] .allocation-mobile-list article > b { color: var(--zy-text); }
html[data-theme="dark"] .tx-main small,
html[data-theme="dark"] .tx-amount small,
html[data-theme="dark"] .friend-row small,
html[data-theme="dark"] .mission small,
html[data-theme="dark"] .level-row p { color: var(--zy-muted); }
html[data-theme="dark"] .mobile-tabbar {
  background: rgba(20,17,25,.96);
  border-color: #39323f;
  box-shadow: 0 14px 36px rgba(0,0,0,.46);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
}

@media (max-width: 700px) {
  .home-nav-actions .btn-small,
  .nav-right-demo .btn-small { display: none; }
  .demo-intro { padding-top: 42px; }
}

@media (max-width: 480px) {
  .demo-intro h1 { font-size: clamp(38px,11vw,50px); }
  .demo-intro p { font-size: 15px; }
  .phone-shell-wrap { width: 100%; }
  .phone-shell { max-width: calc(100vw - 20px); margin-inline: auto; }
}

/* =========================================================
   Zyora v11 — screenshot-driven bug fixes
   ========================================================= */

/* 01 — Rotating the entire phone rasterized its text and produced coloured
   fringes. Keep the device upright so all copy stays crisp. */
.hero-visual .phone {
  transform: none;
  isolation: isolate;
  backface-visibility: hidden;
}
.hero-visual .phone,
.hero-visual .phone * {
  text-shadow: none !important;
}
html[data-theme="dark"] .hero-visual .phone {
  background: #121017;
  border-color: #383241;
  color: #f8f5fc;
}
html[data-theme="dark"] .hero-visual .app-head small { color: #b5aebc; }
html[data-theme="dark"] .hero-visual .app-head h3 { color: #fff; }
html[data-theme="dark"] .hero-visual .mini-icon:not(.purple),
html[data-theme="dark"] .hero-visual .avatar {
  color: #18200f;
  text-shadow: none;
}

/* More aspirational level rewards with distinct visual identities. */
.brand-pills span {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--zy-line) 80%,transparent);
  box-shadow: 0 8px 22px rgba(26,18,42,.06);
}
.brand-pills span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  display: inline-block;
  border-radius: 50%;
  box-shadow: 0 0 13px currentColor;
}
.brand-pills span:nth-child(1)::before { background:#a7d92f; color:#a7d92f; }
.brand-pills span:nth-child(2)::before { background:#8068f2; color:#8068f2; }
.brand-pills span:nth-child(3)::before { background:#d5a92e; color:#d5a92e; }
.brand-pills span:nth-child(1) b { color:#6e9410; }
.brand-pills span:nth-child(2) b { color:#6450d9; }
.brand-pills span:nth-child(3) b { color:#9a7310; }
html[data-theme="dark"] .brand-pills span:nth-child(1) { background:linear-gradient(135deg,#20271b,#1c1a22); border-color:#39442c; }
html[data-theme="dark"] .brand-pills span:nth-child(2) { background:linear-gradient(135deg,#241f38,#1c1a22); border-color:#3c345b; }
html[data-theme="dark"] .brand-pills span:nth-child(3) { background:linear-gradient(135deg,#2b2518,#1c1a22); border-color:#4b4028; }
html[data-theme="dark"] .brand-pills span:nth-child(1) b { color:#d9ff57; }
html[data-theme="dark"] .brand-pills span:nth-child(2) b { color:#cfc7ff; }
html[data-theme="dark"] .brand-pills span:nth-child(3) b { color:#ffd77a; }

/* 02 — Trust avatars must never become white-on-white in dark mode. */
.avatars span {
  color: #fff;
  border-color: var(--zy-bg);
  box-shadow: 0 4px 12px rgba(22,16,35,.16);
}
.avatars span:nth-child(1) { background: linear-gradient(145deg,#6552e8,#8c78ff); }
.avatars span:nth-child(2) { background: linear-gradient(145deg,#ef6b50,#ff9278); }
.avatars span:nth-child(3) { background: linear-gradient(145deg,#278fb8,#56c9eb); }
.avatars span:nth-child(4) { background: linear-gradient(145deg,#292431,#17141d); }

/* 03 — --ink changes meaning in dark mode; the primary feature card must
   remain a genuinely dark, high-contrast surface. */
html[data-theme="dark"] .feature-card.dark-card {
  background:
    radial-gradient(circle at 86% 12%,rgba(101,82,232,.17),transparent 34%),
    linear-gradient(145deg,#191620,#0f0d13);
  border-color: #393240;
  color: #f8f5fc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .feature-card.dark-card .feature-copy h3 { color: #fff; }
html[data-theme="dark"] .feature-card.dark-card .feature-copy p {
  color: #b9b2c1;
  opacity: 1;
}
html[data-theme="dark"] .feature-card.dark-card .step { color: #a99cff; opacity: 1; }
html[data-theme="dark"] .feature-card.dark-card .tag {
  background: #2b2443;
  border-color: #493d69;
  color: #d0c7ff;
}

/* 04 — Shield badge contrast. */
html[data-theme="dark"] .shield {
  border: 1px solid #37313f;
}
html[data-theme="dark"] .shield > span {
  background: #332a49;
  color: #d8d0ff;
  border: 1px solid #4a3d69;
}
html[data-theme="dark"] .shield small { color: #aaa3b1; }
html[data-theme="dark"] .shield strong { color: #fff; }

/* 05 — Explicit form colours prevent the browser's dark form controls from
   leaking into the purple CTA. */
.waitlist-form,
html[data-theme="dark"] .waitlist-form {
  background: #fff;
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 12px 30px rgba(40,23,105,.18);
}
.waitlist-form input,
html[data-theme="dark"] .waitlist-form input {
  background: #fff !important;
  color: #17131f !important;
  -webkit-text-fill-color: #17131f;
  caret-color: #6552e8;
}
.waitlist-form input::placeholder,
html[data-theme="dark"] .waitlist-form input::placeholder {
  color: #77717f;
  opacity: 1;
  -webkit-text-fill-color: #77717f;
}
.waitlist-form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #17131f !important;
}

/* 06 — The homepage's generic .quick-actions button selector used to win the
   cascade and paint black tiles behind app-demo actions. */
.demo-page .quick-actions .quick-action,
html[data-theme="dark"] .demo-page .quick-actions .quick-action {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
html:not([data-theme="dark"]) .demo-page .quick-action > span {
  background: #fff;
  border-color: #ded8e8;
}
html:not([data-theme="dark"]) .demo-page .quick-action:nth-child(1) > span { background:#eeeaff; border-color:#d9d1ff; color:#5b48db; }
html:not([data-theme="dark"]) .demo-page .quick-action:nth-child(2) > span { background:#e8f8ff; border-color:#c9ebf8; color:#267896; }
html:not([data-theme="dark"]) .demo-page .quick-action:nth-child(3) > span { background:#fff0eb; border-color:#ffd7ca; color:#c65335; }
html:not([data-theme="dark"]) .demo-page .quick-action:nth-child(4) > span { background:#fff5cf; border-color:#f3e2a4; color:#7b6212; }

/* 07 — Real CSS status indicators instead of font-dependent block glyphs. */
.app-statusbar .status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 13px;
}
.phone-top .status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 13px;
  color: currentColor;
}
.signal-bars {
  width: 17px;
  height: 10px;
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
}
.signal-bars i {
  display: block;
  width: 3px;
  background: currentColor;
  border-radius: 1px;
}
.signal-bars i:nth-child(1) { height: 4px; }
.signal-bars i:nth-child(2) { height: 6px; }
.signal-bars i:nth-child(3) { height: 8px; }
.signal-bars i:nth-child(4) { height: 10px; }
.wifi-icon {
  position: relative;
  width: 13px;
  height: 10px;
  overflow: hidden;
}
.wifi-icon::before,
.wifi-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border: 1.5px solid currentColor;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 0 0 3px 0;
}
.wifi-icon::before { width: 11px; height: 11px; top: -7px; }
.wifi-icon::after { width: 5px; height: 5px; top: -1px; }
.battery {
  position: relative;
  min-width: 22px;
  height: 11px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 6px;
  line-height: 1;
}
.battery::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 3px;
  width: 2px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
}

@media (max-width:560px) {
  .waitlist-form,
  html[data-theme="dark"] .waitlist-form {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

/* Rackhost waitlist form states. */
.waitlist-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.waitlist-form.is-loading { opacity: .78; }
.waitlist-form button:disabled { cursor: wait; }
.form-message[data-state="success"] { color: #d9ff57; }
.form-message[data-state="error"] { color: #ffe0e0; }
.form-message[data-state="loading"] { color: rgba(255,255,255,.8); }