/* The badge, copied from the app so the website reads as the same product
   (his ask, 2026-09-20: "exactly the same as it is on the app"). ONE PLACE FOR
   THE SIZE: --ring drives the artwork, the arc and the bubbles. */
.brandnav{ --ring:320px; position:relative; width:var(--ring); height:var(--ring); flex:0 0 auto; }
.brandlogo{ display:block; width:100%; height:100%; border-radius:50%;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.55)); }
.navbub{
  position:absolute; width:calc(var(--ring) * 0.14); height:calc(var(--ring) * 0.14);
  margin:calc(var(--ring) * -0.07) 0 0 calc(var(--ring) * -0.07);
  border-radius:50%; border:1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:radial-gradient(circle at 34% 28%, #303c68, #141b36 72%);
  color:#d5e4ff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; font:inherit; transition:transform .16s ease, box-shadow .16s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.navbub svg{ width:52%; height:52%; pointer-events:none; }
.navbub:hover{ transform:scale(1.14); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), 0 3px 12px rgba(0,0,0,.5); }
.navbub:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.navbub.active{
  color:var(--accent-ink); border-color:var(--accent);
  background:radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--accent) 92%, white), var(--accent) 72%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 3px 14px rgba(0,0,0,.5);
}
/* LOCKED on the website: everything but Thoughts lives in the app (his rule) */
.navbub.locked{ opacity:.45; cursor:not-allowed; color:#8fa3cc; }
.navbub.locked:hover{ transform:none; box-shadow:0 2px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.brandword{
  position:absolute; left:0; right:0; top:calc(var(--ring) * 0.115);
  text-align:center; pointer-events:none; user-select:none;
}
.brandword .bwname{
  display:block; font-family:"Zilla Slab",serif; font-weight:600;
  font-size:calc(var(--ring) * 0.115); line-height:1.02; letter-spacing:.5px;
  color:#eef4ff; text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 20px rgba(8,16,44,.95);
}
.brandword .bwtag{
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--ring) * 0.016); margin-top:calc(var(--ring) * 0.014);
  font-family:"Zilla Slab",serif; font-weight:600;
  font-size:calc(var(--ring) * 0.047); letter-spacing:.01em; line-height:1;
  color:#d8e8ff; text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 14px rgba(8,16,44,.9);
}
.brandword .bwtag i{ font-style:normal; }
.brandword .bwtag b{ font-weight:400; color:#5f86d8; }
.navlabel{
  position:absolute; left:0; right:0; top:calc(var(--ring) * 0.605); text-align:center;
  font-size:13px; font-weight:600; letter-spacing:.5px; color:var(--ink);
  text-shadow:0 1px 6px rgba(0,0,0,.85); pointer-events:none;
  padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* why a locked button did nothing - UNDER the badge, never over the artwork */
.navmsg{
  position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%);
  width:max(220px, var(--ring)); text-align:center; font-size:12.5px; line-height:1.4;
  color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:9px; padding:8px 10px; box-shadow:var(--shadow); pointer-events:none; z-index:3;
}
.navmsg:empty{ display:none; }
/* a phone cannot hold a 320 px badge next to anything */
@media (max-width: 700px){
  .brandnav{ --ring:220px; }
  .navlabel{ font-size:12px; }
}

/* ---- the app-download block at the bottom (both controls: coming soon) ---- */
.getapp{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; justify-content:center;
  border-top:1px solid var(--line); margin-top:28px; padding:22px 16px 6px; }
.getapp .qr{ width:104px; height:104px; border-radius:10px; background:#fff; padding:7px;
  box-shadow:var(--shadow); border:1px solid var(--line); cursor:pointer; display:block; }
.getapp .qr img{ display:block; width:100%; height:100%; }
.getapp .col{ display:flex; flex-direction:column; gap:7px; align-items:flex-start; max-width:330px; }
.getapp .dl{ font:inherit; font-size:14px; font-weight:600; padding:11px 18px; border-radius:9px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); }
.getapp .sub{ color:var(--ink-soft); font-size:12.5px; line-height:1.45; }
.getapp .soon{ color:var(--ink); font-size:12.5px; font-weight:600; }
.getapp .soon:empty{ display:none; }