/* SIGNL app theme: SLOTTED DESIGN SYSTEM (2026-10-25).
   Jeff approved Slotted's final design and ordered the SIGNL app
   restyled to match it: mint + black ONLY as the accent system
   (mint #A9E8C9, deep mint #8FD3AC, accent blue #006AFC —
   the deep-green accent was retired 2026-10-26 — pale mint #B9F1D6 /
   #E3F5EA tints, ink #0B0D0C, off-white #FAFCFA pages, sage
   secondary text, hairline borders, Manrope everywhere, pill
   buttons, large radii, soft shadows, black topbar / hero bands /
   footer). Tokens mirror the :root of the Slotted landing page.
   Body text on light stays ink; mint is for fills, accents and
   large elements, never small text on white.

   Loaded AFTER styles.css: every rule here re-declares its legacy
   counterpart, so no old-palette value survives the cascade.
   Legacy variable names are kept as aliases so older rules that
   reference them resolve to the Slotted values too. */

:root {
  /* Slotted tokens (source of truth) */
  --black: #0B0D0C;
  --black2: #141714;
  --panel-d: #171A17;
  --mint: #A9E8C9;
  --mint-b: #B9F1D6;
  --mint-pale: #E3F5EA;
  --mint-soft: #8FD3AC;
  --mint-deep: #006AFC;
  --mint-dot: #3FA66B;
  --hair-d: #272C27;
  --bg: #FAFCFA;
  --bg2: #F4F7F4;
  --card: #FFFFFF;
  --ink: #0B0D0C;
  --ink2: #3C443C;
  --ink3: #5F7265;
  --line: #DFE7DF;
  --line2: #EAF2EA;
  --grad: linear-gradient(94deg, #A9E8C9 0%, #B9F1D6 100%);
  --grad-soft: #E3F5EA;
  --sh-sm: 0 10px 26px rgba(11,13,12,.08), 0 2px 8px rgba(11,13,12,.04);
  --sh-md: 0 24px 48px rgba(11,13,12,.12), 0 4px 14px rgba(11,13,12,.06);
  --sh-lg: 0 24px 48px rgba(11,13,12,.16), 0 4px 14px rgba(11,13,12,.08);
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 16px;
  /* legacy aliases, re-pointed at the Slotted values */
  --panel: #FFFFFF;
  --panel-2: #F4F7F4;
  --text: #0B0D0C;
  --muted: #5F7265;
  --blue: #006AFC;
  --teal: #006AFC;
  --green: #006AFC;
  --red: #C2482B;
  --amber: #B97A0F;
  --radius: 18px;
}

::selection { background: #A9E8C9; color: #0B0D0C; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .display {
  font-family: 'Manrope', sans-serif;
  color: var(--ink);
  letter-spacing: -0.02em;
}
h1 { font-weight: 800; }
h2, h3 { font-weight: 800; }
a { color: #006AFC; }
.muted { color: var(--ink2); }
.num { font-family: 'Manrope', sans-serif; }
.grad-text { color: var(--mint-deep); }

/* ---------- header / nav ---------- */
.topbar {
  /* Slotted topbar: solid black. Fully opaque (the 2026-10-24 QA rule
     stands: scrolled page text must never ghost through the sticky
     header and collide with the logo). */
  background: #0B0D0C;
  border-bottom: 1px solid var(--hair-d);
  padding: 12px 22px;
}
.brand-logo { height: 34px; }
#topnav a, #topnav button.linklike {
  color: #C6CFC6; font-weight: 600;
}
#topnav a:hover, #topnav button.linklike:hover { color: #fff; }

/* Mobile bottom tab bar: SOLID black (the Slotted mobile bar),
   sage items, mint active item. Solid on purpose (Jeff, 2026-10-20):
   the old translucent glass bar clipped labels, washed out the
   sign-out item, and jittered against the browser chrome on scroll. */
@media (max-width: 720px) {
  #bottomnav {
    background: #0B0D0C;
    border-top: 1px solid var(--hair-d);
    box-shadow: 0 -8px 24px -12px rgba(11,13,12,.35);
  }
  .bn-item { color: #9AA79E; }
  .bn-item.on { color: var(--mint); }
  .bn-item.on .bn-label { color: var(--mint); }
  .bn-item:active { color: #fff; }
}

main { max-width: 1080px; }
.loading { color: var(--ink3); }

/* ---------- hero (logged-out home) ---------- */
.hero h1 { font-weight: 800; letter-spacing: -0.028em; }
.hero p { color: var(--ink2); }

/* ---------- buttons ---------- */
.btn {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  background: var(--mint); color: var(--ink); border: 1px solid transparent;
  box-shadow: var(--sh-sm);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover {
  filter: none; transform: translateY(-2px); background: var(--mint-b);
  box-shadow: 0 16px 32px rgba(11,13,12,.18);
}
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); box-shadow: none;
}
.btn.ghost:hover { background: rgba(169,232,201,.25); box-shadow: none; }
.btn.small-btn { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn.danger {
  background: #F7E9E4; color: var(--red);
  border: 1px solid #EDD5CB; box-shadow: none;
}
.btn:disabled { opacity: .5; box-shadow: none; }

/* ---------- cards / panels ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px;
  box-shadow: var(--sh-md);
}
.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--sh-md); margin-bottom: 20px;
}
.card.paused { opacity: .55; filter: grayscale(.7); }

/* ---------- forms ---------- */
label { color: var(--ink); }
input, select, textarea {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px;
}
input::placeholder, textarea::placeholder { color: var(--ink3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--mint-deep);
  box-shadow: 0 0 0 3px rgba(169,232,201,.55);
}
.checkrow label { color: var(--ink2); }

/* Plan cards (business founding sign-up) */
.plan-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px; box-shadow: var(--sh-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.plan-card:hover { box-shadow: var(--sh-md); }
.plan-card.selected {
  border: 1px solid var(--ink);
  box-shadow: 0 0 0 1px var(--ink), var(--sh-lg);
}
.plan-card .price {
  font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--ink);
}
.plan-card ul { color: var(--ink2); }

/* ---------- tabs ---------- */
.tabs button {
  background: var(--card); color: var(--ink2);
  border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.tabs button:hover { color: var(--ink); }
.tabs button.active {
  background: var(--ink); color: var(--mint); border-color: var(--ink);
  box-shadow: var(--sh-sm);
}

/* ---------- badges / chips ---------- */
.badge {
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink2);
}
/* Build -38: badges are nowrap pills by design (see the later
   .badge rule), which is right for labels; the founding status
   panel's "first 100" line is a sentence wearing badge styling,
   and its nowrap text pushed the panel past the phone's edge.
   The .badge-line variant keeps the pill look and lets the
   sentence wrap inside it. */
.badge.badge-line { white-space: normal; }
.badge.tier {
  background: var(--black); border-color: var(--black); color: var(--mint);
}
.badge.ok {
  background: var(--mint); border-color: var(--mint-soft); color: var(--ink);
}
.badge.warn {
  background: #FBF3E2; border-color: #E7CF9E; color: #8A5A12;
}
.badge.bad {
  background: #F9E9E4; border-color: #EDC4B6; color: #A83A1E;
}
.badge.info {
  background: var(--mint-pale); border-color: var(--mint-soft); color: var(--mint-deep);
}
.chip {
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--sh-sm);
}
.chip:hover { background: var(--grad-soft); }
.stack-chip {
  background: #fff; border: 1px solid var(--line); color: var(--ink2);
  font-family: 'Manrope', sans-serif;
}

/* ---------- stats ---------- */
.stat .num {
  font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--ink);
}
.stat .lbl { color: var(--ink3); }

/* Stat band (ported from v2 .stat-band): dashboard summary blocks. */
.stat-band {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
  display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden;
}
@media (min-width: 920px) { .stat-band { grid-template-columns: repeat(4, 1fr); } }
.stat-cell { padding: 26px 24px 22px; border-right: 1px solid var(--line2); }
.stat-cell:last-child { border-right: none; }
.stat-cell .stat-num {
  font-family: 'Manrope', sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: var(--ink);
}
.stat-cell .stat-num em { font-style: normal; color: var(--mint-deep); }
.stat-cell .stat-lbl { margin-top: 9px; font-size: .86rem; color: var(--ink2); line-height: 1.45; }

/* ---------- redemption credential ---------- */
.code-display {
  font-family: 'Manrope', sans-serif; font-weight: 700; letter-spacing: .08em;
  background: var(--bg); color: var(--ink);
  border: 1.5px dashed #B7C6B7; border-radius: var(--r-md);
}
.qr-box img, .qr-box svg {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--sh-sm);
}
.countdown { font-family: 'Manrope', sans-serif; font-weight: 700; }

/* ---------- notices ---------- */
.notice {
  border: 1px solid #E7CF9E; background: #FBF3E2; color: #6B4E12;
  border-radius: 14px;
}
.notice.blue {
  border-color: #8FD3AC; background: #E3F5EA; color: #006AFC;
}
.error-box {
  border: 1px solid #EDC4B6; background: #F9E9E4; color: #8F2F18;
  border-radius: 14px;
}
.sparks { color: #006AFC; }

/* ---------- tables (admin) ---------- */
th { color: var(--ink3); }
th, td { border-bottom: 1px solid var(--line2); }
tbody tr:hover td { background: rgba(227,245,234,.55); }

/* ---------- messaging ---------- */
.thread-list .thread-item, .msg {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sh-sm);
}
.thread-item:hover { border-color: var(--ink3); }
.msg { box-shadow: none; }
.msg.mine { background: var(--grad-soft); border-color: var(--line); }
.msg .meta { color: var(--ink3); }

/* Platform thread (Build -40): the SIGNL team conversation is
   visually distinct from offer/visit threads on both sides. */
.thread-platform { border-left: 4px solid var(--mint-dot); }
.msg.platform-msg { background: var(--mint-pale); border-color: var(--mint-soft); }
.admin-msg-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--card); cursor: pointer; }
.admin-msg-item:hover { border-color: var(--ink3); }

/* ---------- profile media ---------- */
.profile-photo {
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--bg2); box-shadow: var(--sh-sm);
}
.photo-placeholder {
  border: 1.5px dashed #B7C6B7; border-radius: 18px; color: var(--ink3);
  background: var(--bg);
}
.avatar { border: 1px solid var(--line); }
.avatar-initial {
  background: var(--mint); color: var(--ink); font-weight: 800;
  font-family: 'Manrope', sans-serif;
}

/* ---------- footer ---------- */
.footer {
  background: var(--black); border-top: 1px solid var(--hair-d); color: #9AA79E;
}
.footer .muted { color: #9AA79E; }
.footer p:first-child { color: #fff; font-family: 'Manrope', sans-serif; font-weight: 800; }

.heart { color: var(--ink3); }
.heart.on { color: #C2482B; }

/* ---------- preview (simulation) chrome ---------- */
/* Ink panel: stays unmissable on the light theme. */
.preview-banner {
  background: var(--ink); color: #DDE7DD;
  border: 1px solid var(--ink); border-radius: var(--r-md);
  box-shadow: var(--sh-md); padding: 16px 20px;
}
.preview-banner .muted { color: #9AA79E; }
.preview-tag {
  background: var(--mint); color: var(--ink);
  font-family: 'Manrope', sans-serif; letter-spacing: .1em;
}
.showcase-block { border-top: 1px solid var(--line2); }

/* ---------- momentum: earn list + ledger ---------- */
.earn-row { border-bottom: 1px solid var(--line2); }
.earn-state { border: 1px solid var(--line); color: var(--ink3); background: #fff; }
/* Not actionable right now: no icon at all — an empty slot of
   the same width keeps the labels aligned until the row either
   becomes doable (filled mint +) or happens (mint check)
   (Jeff, 2026-10-27). */
.earn-state.earn-slot { background: transparent; border-color: transparent; color: transparent; }
.earn-row.done .earn-state {
  background: var(--mint); color: var(--ink); border-color: transparent; font-weight: 800;
}
.earn-points {
  font-family: 'Manrope', sans-serif; font-weight: 700; color: #006AFC;
}
.earn-points.neg { color: var(--red); }
/* Earn-row deep links (Jeff, 2026-10-27): a row that can be
   completed right now is a real button: the + sits in a filled
   mint circle (the done treatment, still open), a house chevron
   trails the points, and the row warms on hover. Rows that
   cannot be acted on render no icon at all (the .earn-slot
   above), so the difference reads at a glance. */
button.earn-row {
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: transparent; border: 0; border-bottom: 1px solid var(--line2);
  cursor: pointer;
}
.earn-row.earn-link .earn-state {
  background: var(--mint); color: var(--ink); border-color: transparent; font-weight: 800;
}
.earn-row.earn-link:hover { background: rgba(169, 232, 201, .18); }
.earn-row .earn-chev { color: var(--ink3); font-size: 1.2rem; line-height: 1; }
.ledger { display: grid; }
.ledger .lg-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line2); font-size: .93rem;
}
.ledger .lg-row:last-child { border-bottom: none; }
.ledger .pts { font-family: 'Manrope', sans-serif; font-weight: 700; white-space: nowrap; }
.ledger .pts.plus { color: #006AFC; }
.ledger .pts.minus { color: var(--red); }
.meter { height: 10px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--black); border-radius: 99px; }

/* ---------- best work / reviews ---------- */
.work-card {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--sh-sm);
}
.work-card:hover { border-color: var(--ink3); }
.work-play { color: #006AFC; }
.work-host { color: var(--ink3); }
.stars { color: #006AFC; }
.review-item {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}

/* ---------- dashboard panels (ported v2 ui-panel language) ---------- */
.ui-panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 28px;
  position: relative; overflow: hidden; margin-bottom: 20px;
}
.ui-kicker {
  font-family: 'Manrope', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink3);
}
.ui-title {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.3rem;
  letter-spacing: -.015em; margin: 8px 0 4px; color: var(--ink);
}
.ui-sub { color: var(--ink2); font-size: .94rem; line-height: 1.55; }
.ui-divider { height: 1px; background: var(--line2); margin: 18px 0; }
.ui-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line2); font-size: .95rem;
}
.ui-row:last-child { border-bottom: none; }
.ui-row .k { color: var(--ink2); }
.ui-row .v { font-weight: 700; text-align: right; font-family: 'Manrope', sans-serif; }
.check-list { list-style: none; display: grid; gap: 12px; padding: 0; margin: 0; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; line-height: 1.5; }
.check-list .ck {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-soft); border: 1px solid var(--line);
  font-size: .72rem; font-weight: 800; color: var(--ink);
}
.check-list .ck.no { background: #F7E9E4; border-color: #EDD5CB; }
.count-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad-soft); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .9rem;
}
.tally-input {
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  padding: 10px 14px; font-family: 'Manrope', sans-serif; font-size: .92rem;
  width: 130px; color: var(--ink);
}
.roas-hero { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.roas-num {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 3.4rem;
  line-height: 1; letter-spacing: -.03em; color: var(--mint-deep);
}

/* =====================================================================
   Ported flagship components (from v2.css / DESIGN-SYSTEM.md).
   .creator-card is ONE component across discovery, the public /c/
   profile hero, and the creator's own profile header. .visit-card is
   the offer / booking card pattern from the skyline center phone.
   ===================================================================== */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink2);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad); flex: none;
}

/* ---------- .creator-card ---------- */
.creator-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .creator-grid { grid-template-columns: 1fr 1fr; } }
.creator-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--sh-md); padding: 18px 18px 20px;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.creator-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.cc-photo { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1/0.92; background: var(--bg2); }
.cc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-mono {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--black);
  font-family: 'Manrope', sans-serif; font-weight: 900; font-size: 4.2rem; letter-spacing: -.02em;
}
.cc-mono span { color: var(--mint); }
.cc-tier {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(255,255,255,.92); color: var(--ink);
  padding: 6px 11px; border-radius: 999px; box-shadow: var(--sh-sm);
}
.cc-paid {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: #DDE7DD;
  padding: 6px 11px; border-radius: 999px; box-shadow: var(--sh-sm);
}
.cc-id { padding: 17px 6px 0; }
.cc-name {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.34rem;
  line-height: 1.12; letter-spacing: -.018em; color: var(--ink);
}
.cc-handle { font-family: 'Manrope', sans-serif; font-size: .92rem; color: var(--ink3); margin-top: 3px; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.cc-chip {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: var(--bg2); color: var(--ink2); border: 1px solid var(--line);
}
.cc-chip.market { background: var(--ink); color: #DDE7DD; border-color: var(--ink); }
.cc-local {
  margin-top: 18px; padding: 15px 16px 13px;
  background: var(--mint-pale); border: 1px solid #CDE9D8; border-radius: 18px;
}
.cc-local .big {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2.9rem; line-height: .95;
  color: var(--mint-deep);
}
.cc-local .lbl { font-size: .82rem; color: var(--ink2); margin-top: 5px; }
.cc-local .src {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink3); margin-top: 3px;
}
.cc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; padding: 0 6px; }
.cc-meta .k {
  font-size: .66rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink3);
}
.cc-meta .v {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.24rem;
  color: var(--ink); margin-top: 2px;
}
.cc-platforms { display: flex; gap: 8px; margin-top: 15px; padding: 0 6px; flex-wrap: wrap; }
.cc-plat {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Manrope', sans-serif; font-size: .78rem; font-weight: 600; color: var(--ink2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; background: #fff;
}
.cc-track {
  margin-top: 16px; background: var(--grad-soft);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 15px; font-size: .84rem; color: var(--ink2); line-height: 1.5;
}
.cc-track strong { color: var(--ink); display: block; font-size: .86rem; }
.cc-fit { margin-top: 12px; padding: 0 6px; font-size: .84rem; color: var(--ink2); line-height: 1.5; }
.cc-fit strong { color: var(--ink); }
.cc-actions { margin-top: auto; padding: 16px 6px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cc-link { font-weight: 700; font-size: .9rem; }
.cc-link a { color: var(--mint-deep); }

/* Full variant: public /c/ profile hero + own-profile header. */
.creator-card.full { padding: 22px; }
@media (min-width: 760px) {
  .creator-card.full { flex-direction: row; gap: 26px; align-items: stretch; }
  .creator-card.full .cc-photo { flex: 0 0 300px; aspect-ratio: auto; min-height: 300px; }
  .creator-card.full .cc-body { flex: 1; display: flex; flex-direction: column; }
  .creator-card.full .cc-id { padding-top: 4px; }
}

/* ---------- .visit-card (offer / booking pattern) ---------- */
.visit-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--sh-md); padding: 20px; display: flex; flex-direction: column; gap: 13px;
}
.visit-card.active { border-top: 4px solid transparent; }
.vc-head { display: flex; gap: 12px; align-items: center; }
.vc-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--sh-sm); }
.vc-name { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1rem; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.vc-sub { font-family: 'Manrope', sans-serif; font-size: .78rem; color: var(--ink3); }
.vc-chip {
  align-self: flex-start; font-size: .64rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
  background: var(--grad-soft); border: 1px solid var(--line);
  padding: 6px 11px; border-radius: 999px;
}
.vc-hero {
  background: var(--bg); border: 1px solid var(--line); border-radius: 20px;
  padding: 15px 17px; box-shadow: var(--sh-sm);
}
.vc-hero .big {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2.3rem; line-height: 1;
  color: var(--mint-deep);
}
.vc-hero .lbl { font-size: .78rem; color: var(--ink2); margin-top: 5px; }
.vc-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 11px 15px; font-size: .85rem; color: var(--ink2);
}
.vc-row b { color: var(--ink); font-family: 'Manrope', sans-serif; font-weight: 700; }
.vc-action { margin-top: auto; }
.vc-action .btn { width: 100%; text-align: center; }

/* Ink code box (creator audience code at a business, staff view). */
.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--ink); color: #DDE7DD; border-radius: var(--r-md); padding: 18px 20px;
}
.code-box .cb-code { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: .1em; }
.code-box .cb-lbl { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }

/* Business card: same geometry as creators, plan state instead of tier.
   Live/active state carries the 4px gradient top rule (v2 .move). */
.biz-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-md); padding: 30px; position: relative; overflow: hidden;
}
.biz-card.live::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--mint); opacity: 1;
}
.biz-card .b-num {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .2em;
  color: var(--mint-deep);
}

/* Small app-only states carried over from the legacy theme. */
.creator-card.paused { opacity: .55; filter: grayscale(.7); }
.creator-card.paused .btn { pointer-events: none; }
.saved { color: #006AFC; font-weight: 600; font-size: .9rem; }
.pv-tick { font-family: 'Manrope', sans-serif; font-weight: 700; }
.rules { color: #006AFC; }

/* ---------- home dashboards (concept merge, 2026-10-20) ----------
   Mobile is a hard requirement (Jeff): every rule below is
   single-column and fully usable at phone width (~390px) by
   default; min-width queries only WIDEN a layout that already
   works. No fixed pixel widths beyond the phone viewport, no
   horizontal scroll, and action buttons keep a 44px tap height. */
.home-metrics { margin: 18px 0 20px; }
.home-title {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.45rem;
  letter-spacing: -.02em; margin: 6px 0 4px; color: var(--ink); line-height: 1.15;
}
.home-h { margin: 4px 0 8px; font-size: 1.12rem; }
.home-count {
  font-family: 'Manrope', sans-serif; font-weight: 700;
  font-size: clamp(1.65rem, 8vw, 2.4rem); line-height: 1.05; color: var(--ink);
}
/* The active-visit step tracker: 2 by 2 on a phone, one row of
   four once there is room. */
.home-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
@media (min-width: 760px) { .home-steps { grid-template-columns: repeat(4, 1fr); } }
.home-step {
  display: flex; align-items: center; gap: 9px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  background: var(--bg); color: var(--ink3); font-size: .86rem; font-weight: 600; line-height: 1.35;
}
.home-step .hs-dot {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; color: var(--ink3);
}
.home-step.done { color: var(--ink); border-color: var(--mint-soft); background: rgba(169,232,201,.25); }
.home-step.done .hs-dot { background: var(--mint); border-color: transparent; color: var(--ink); }
.home-step.current { color: var(--ink); border-color: var(--mint-deep); background: rgba(169,232,201,.18); }
.home-step.current .hs-dot { border-color: var(--blue); color: var(--blue); }
/* Code and QR stack on a phone (the QR is never squeezed); side
   by side only when both fit comfortably. */
.home-visit-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 700px) { .home-visit-grid { grid-template-columns: 1fr auto; align-items: start; } }
.home-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.home-actions .btn, .home-opp .btn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
/* Money piles: stacked on a phone, three across on desktop. Cash
   and comp stay visually separate piles at every width. */
.home-money { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 6px; }
@media (min-width: 760px) { .home-money { grid-template-columns: repeat(3, 1fr); } }
.hm-pile { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px; }
.hm-num { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--ink); }
.hm-lbl { font-size: .84rem; color: var(--ink2); margin-top: 5px; line-height: 1.45; }
/* Preview pipeline funnel: 2 columns on a phone (the fifth stage
   wraps full width), 5 across on desktop. Never a scroll row. */
.pv-funnel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0 6px; }
.pv-funnel .pv-stage:last-child { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .pv-funnel { grid-template-columns: repeat(5, 1fr); }
  .pv-funnel .pv-stage:last-child { grid-column: auto; }
}
.pv-stage { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 12px; text-align: center; }
.pv-stage-num { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--ink); }
.pv-stage-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-top: 3px; }
.pv-stage-sub { font-size: .76rem; color: var(--ink3); margin-top: 2px; }
/* Phone tightening for the shared stat band when it carries a
   home's headline metrics: smaller cells, numbers stay legible. */
@media (max-width: 480px) {
  .home-metrics .stat-cell { padding: 18px 16px 15px; }
  .home-metrics .stat-cell .stat-num { font-size: 1.6rem; }
  .home-opp { padding: 18px; }
}

/* Reveal motion: matches v2 (IO-driven .in), off under reduced motion. */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
  .creator-card { transition: none; }
  .creator-card:hover { transform: none; }
}

/* Listing proof sheet (realtor layer, 2026-10-22): one clean
   page, screen-readable and print-first. */
.proof-sheet {
  max-width: 760px; margin: 28px auto; background: #fff;
  border: 1px solid var(--line); border-radius: 18px; padding: 34px 36px;
}
.proof-head { display: flex; gap: 20px; align-items: center; }
.proof-photo { width: 104px; height: 104px; border-radius: 16px; object-fit: cover; flex: 0 0 104px; }
.proof-mono {
  width: 104px; height: 104px; border-radius: 16px; flex: 0 0 104px;
  background: var(--mint); display: flex; align-items: center; justify-content: center;
}
.proof-mono span { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2.4rem; color: var(--ink); }
.proof-id { flex: 1; min-width: 0; }
.proof-name { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1.1; }
.proof-handle { font-weight: 600; color: var(--ink2); margin-top: 3px; }
.proof-place { color: var(--ink2); margin-top: 2px; }
.proof-brand { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: .04em; }
.proof-hoods { margin: 20px 0 0; font-weight: 600; }
.proof-stats { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.proof-biz { margin-top: 18px; }
.proof-brokerage { margin-top: 14px; font-size: .9rem; color: var(--ink2); }
.proof-foot { margin-top: 26px; border-top: 1px solid var(--line2); padding-top: 16px; font-size: .9rem; }
.proof-foot p:first-child { font-weight: 700; }

@media print {
  .topbar, .footer, #bottomnav, .no-print { display: none !important; }
  body { background: #fff !important; }
  main#app { padding: 0 !important; margin: 0 !important; }
  .proof-sheet { border: none; border-radius: 0; margin: 0; max-width: none; padding: 10mm; }
  .proof-stats { break-inside: avoid; }
}

/* ---------- Wave 2 (UX redesign, 2026-10-24) ---------- */
/* Signed-in bottom bar at EVERY width: one nav system per role.
   Signed-out views keep the styles.css mobile-only dark bar. The
   bar is solid black like Slotted's mobile bar; mint marks the
   active item. */
#bottomnav.signed-in {
  display: flex; align-items: stretch; position: fixed;
  left: 50%; transform: translateX(-50%); right: auto; bottom: 0; z-index: 60;
  width: min(620px, 100%); box-sizing: border-box;
  height: calc(58px + env(safe-area-inset-bottom));
  background: #0B0D0C; border-top: 1px solid var(--hair-d);
  box-shadow: 0 -6px 24px rgba(11,13,12,.35);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
}
#bottomnav.signed-in .bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; cursor: pointer; color: #9AA79E;
  font-family: 'Manrope', sans-serif; padding: 4px 2px; min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
#bottomnav.signed-in .bn-icon { display: flex; align-items: center; justify-content: center; height: 24px; position: relative; }
#bottomnav.signed-in .bn-icon svg { width: 22px; height: 22px; display: block; }
#bottomnav.signed-in .bn-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0; line-height: 1.15; white-space: nowrap; }
#bottomnav.signed-in .bn-item.on { color: var(--mint); }
#bottomnav.signed-in .bn-item.on .bn-label { color: var(--mint); }
body.bn-on main { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
body.bn-on .footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

/* Tab badge bubble: unread counts on the icon, hidden at zero. */
.bn-badge {
  position: absolute; top: -5px; right: -13px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--mint); color: var(--ink);
  font-size: 0.62rem; font-weight: 800; line-height: 17px; text-align: center;
  padding: 0 4px; box-sizing: border-box;
}
.bn-badge.static { position: static; display: inline-block; }

/* Bottom sheets (More menu, confirms, paid booking, info popups):
   one fixed overlay, one bottom-anchored white sheet. */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(11, 13, 12, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: #fff; width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  border-radius: 18px 18px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(11, 13, 12, 0.25);
}
.sheet-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--line2, #DFE7DF);
  padding: 15px 4px; font: inherit; font-weight: 600; color: var(--ink, #0B0D0C);
  cursor: pointer; text-align: left; min-height: 52px;
}
.sheet-row:last-child { border-bottom: 0; }

/* Offer composer: per-field errors, required/optional tags, info. */
.field-err { color: #C2482B; font-size: 0.82rem; margin: 4px 0 0; min-height: 0; }
.field-err:empty { display: none; }
.req-tag, .opt-tag {
  display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: 999px; padding: 2px 7px; vertical-align: 2px;
}
.req-tag { background: #0B0D0C; color: #fff; }
.opt-tag { background: #E3F5EA; color: #3C443C; }
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px; border: 1px solid #B7C6B7;
  background: #fff; color: #3C443C; font-size: 0.72rem; font-weight: 800; font-style: italic;
  cursor: pointer; vertical-align: 2px; padding: 0; line-height: 1;
}

/* Feed cards (section 6): tight chip rows on white cards. */
.feed-card .chip-row { margin: 8px 0 2px; }
.chip-mini {
  display: inline-block; font-size: 0.74rem; font-weight: 700; color: #0B0D0C;
  background: #F4F7F4; border: 1px solid #DFE7DF; border-radius: 999px; padding: 3px 9px;
}
.card.highlight { outline: 3px solid #006AFC; outline-offset: 2px; transition: outline-color 0.3s; }
.perf-update-card { border-color: #006AFC; }

/* =====================================================================
   Visual experience pass (2026-10-24)
   Appended section only: new components, type/motion polish, and the
   sanctioned overrides for .info-btn sizing and the photo-less
   .cc-photo.no-photo / .cc-mono fallback. Everything above this
   section is untouched; these rules win by cascade order where the
   pass deliberately re-declares a value (type scale, card depth).
   Light theme only; the locked gradient stays the brand accent.
   ===================================================================== */

/* ---------- 1. Type scale + rhythm ---------- */
h1, .hero h1 { font-size: clamp(2.35rem, 8.5vw, 3.5rem); line-height: 1.04; }
#app h2 { font-size: 1.55rem; }
.home-title { font-size: 1.72rem; }
.home-count { color: var(--ink); }
main { padding-top: 26px; }

/* ---------- 2. Card depth ---------- */
/* Deeper layered shadow + 1px inner top highlight, combined in one
   box-shadow. The base hover lift (transform) above still applies. */
.creator-card, .visit-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 2px rgba(11,13,12,.05),
    0 24px 44px -18px rgba(11,13,12,.18);
}

/* ---------- 3. Dashboard hero (.dash-hero) ---------- */
.dash-hero {
  background: var(--black); border-radius: var(--r-lg);
  padding: 24px 24px 22px; color: #fff;
  position: relative; overflow: hidden; margin-bottom: 20px;
  box-shadow: 0 24px 44px -18px rgba(11,13,12,.4);
  text-shadow: none;
}
.dash-hero::before {
  content: ""; position: absolute; top: -110px; right: -70px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.dash-hero::after {
  content: ""; position: absolute; bottom: -130px; left: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero h1, .dash-hero h2, .dash-hero h3 { color: #fff; }
.dh-kicker {
  font-family: 'Manrope', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.82);
}
.dh-name {
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: clamp(1.65rem, 6vw, 2.25rem); letter-spacing: -.02em;
  line-height: 1.08; margin-top: 6px;
}
.dh-sub {
  font-family: 'Manrope', sans-serif; font-size: .94rem;
  color: rgba(255,255,255,.88); margin-top: 5px; line-height: 1.45;
}
.dh-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 16px;
}
.dh-num {
  font-family: 'Manrope', sans-serif; font-weight: 800; color: var(--mint);
  font-size: clamp(2.2rem, 9vw, 2.9rem); line-height: .95;
}
.dh-num-lbl { font-size: .8rem; color: rgba(255,255,255,.85); margin-top: 4px; }
.dash-hero .btn {
  background: var(--mint); color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(11,13,12,.5);
}
.dash-hero a { color: #fff; text-decoration: underline; }

/* ---------- 4. Motion system (transform / opacity only) ---------- */
@keyframes vxRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.vx-in { animation: vxRise .5s cubic-bezier(.22,.8,.3,1) backwards; }
.vx-stagger > * { animation: vxRise .55s cubic-bezier(.22,.8,.3,1) backwards; }
.vx-stagger > *:nth-child(1) { animation-delay: 0ms; }
.vx-stagger > *:nth-child(2) { animation-delay: 50ms; }
.vx-stagger > *:nth-child(3) { animation-delay: 100ms; }
.vx-stagger > *:nth-child(4) { animation-delay: 150ms; }
.vx-stagger > *:nth-child(5) { animation-delay: 200ms; }
.vx-stagger > *:nth-child(6) { animation-delay: 250ms; }
.vx-stagger > *:nth-child(7) { animation-delay: 300ms; }
.vx-stagger > *:nth-child(8) { animation-delay: 350ms; }
.vx-stagger > *:nth-child(n+9) { animation-delay: 400ms; }

@keyframes vxOverlayIn { from { opacity: 0; } }
.sheet-overlay { animation: vxOverlayIn .25s ease both; }
@keyframes vxSheetUp {
  from { transform: translateY(48px); opacity: .4; }
  to { transform: none; opacity: 1; }
}
.sheet { animation: vxSheetUp .38s cubic-bezier(.22,.8,.3,1) both; }

@keyframes vxBadgePop {
  0% { transform: scale(.4); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.bn-badge { animation: vxBadgePop .35s cubic-bezier(.22,.8,.3,1) both; }

/* Press feedback */
.btn:active { transform: scale(.97); }
.bn-item:active, .chip:active { transform: scale(.96); }
#bottomnav.signed-in .bn-item { transition: transform .12s ease; }

/* ---------- 5. Skeletons ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skel-wrap { display: grid; gap: 16px; }
.skel {
  position: relative; overflow: hidden;
  background: var(--bg2); border-radius: var(--r-md);
}
.skel-card {
  position: relative; overflow: hidden; height: 148px;
  border: 1px solid var(--line); background: #fff; border-radius: var(--r-md);
}
.skel::after, .skel-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: vxShimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vxShimmer { to { transform: translateX(100%); } }
.skel-line { height: 14px; border-radius: 7px; background: var(--bg2); margin: 12px 18px; }
.skel-line.short { width: 45%; }
.skel-line.med { width: 70%; }

/* ---------- 6. Photo-less creator fallback ---------- */
/* Scoped strictly under .cc-photo.no-photo: the default dark
   .cc-mono treatment is unchanged everywhere else. */
.cc-photo.no-photo { aspect-ratio: auto; height: 108px; background: var(--mint); }
.cc-photo.no-photo::before {
  content: ""; position: absolute; top: -60px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.cc-photo.no-photo::after {
  content: ""; position: absolute; bottom: -70px; left: -40px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.cc-photo.no-photo .cc-mono { background: transparent; height: 100%; }
.cc-photo.no-photo .cc-mono span {
  background: none; color: var(--ink); -webkit-text-fill-color: var(--ink);
  font-size: 1.9rem; width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid rgba(11,13,12,.55); background-color: rgba(255,255,255,.35);
  display: inline-flex; align-items: center; justify-content: center;
}
.creator-card.full .cc-photo.no-photo { height: auto; background: var(--mint); }
.creator-card.full .cc-photo.no-photo .cc-mono span {
  font-size: 2.6rem; width: 76px; height: 76px;
}

/* ---------- 7. Info button tap target ---------- */
/* Visual stays a small circle; ::after extends the hit area to 44px. */
.info-btn { width: 22px; height: 22px; font-size: .8rem; position: relative; flex: none; }
.info-btn::after {
  content: ""; position: absolute; inset: -11px; border-radius: 999px;
}

/* ---------- 8. Empty states ---------- */
.empty-state {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
  padding: 36px 24px 30px; text-align: center;
}
.es-badge {
  width: 58px; height: 58px; border-radius: 50%; background: var(--mint);
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 28px -10px rgba(11,13,12,.25); margin-bottom: 14px;
}
.es-badge svg { width: 26px; height: 26px; }
.empty-state h3 {
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: 1.28rem; margin: 0 0 6px;
}
.empty-state p { color: var(--ink2); line-height: 1.55; max-width: 420px; margin: 0 auto; }
.empty-state .btn { margin-top: 18px; }

/* ---------- 9. Success moment ---------- */
.success-hero { text-align: center; padding: 30px 20px 22px; }
.success-check-wrap {
  width: 96px; height: 96px; border-radius: 50%; background: var(--grad-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; animation: vxBadgePop .45s cubic-bezier(.22,.8,.3,1) both;
}
.success-check { width: 54px; height: 54px; display: block; }
.success-check circle {
  fill: none; stroke: #006AFC; stroke-width: 3;
  stroke-dasharray: 302; stroke-dashoffset: 302;
  animation: vxDraw .7s ease forwards;
}
.success-check path {
  stroke: #0B0D0C; stroke-width: 4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: vxDraw .45s ease .5s forwards;
}
@keyframes vxDraw { to { stroke-dashoffset: 0; } }
.success-hero h3 {
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: 1.35rem; margin: 0 0 6px;
}
.success-hero p { color: var(--ink2); }

/* ---------- 10. Due banner ---------- */
.due-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--grad-soft); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 16px;
}
.due-banner .db-lbl {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink2);
}
.due-banner .db-num {
  font-family: 'Manrope', sans-serif; font-weight: 700;
  font-size: 1.45rem; color: var(--ink); line-height: 1;
}
.due-banner.late { background: #F9E9E4; border-color: #EDC4B6; }

/* ---------- Reduced motion: the whole pass goes still ---------- */
@media (prefers-reduced-motion: reduce) {
  .vx-in, .vx-stagger > *, .sheet, .sheet-overlay, .bn-badge,
  .skel::after, .skel-card::after,
  .success-check circle, .success-check path, .success-check-wrap {
    animation: none;
  }
  .btn:active, .bn-item:active, .chip:active { transform: none; }
}

/* ---------- Visual pass addendum: view transitions ----------
   Every render() swaps #app's children, so a top-level rise on
   direct children gives tab/view changes a consistent enter
   motion without touching any render code. Transform/opacity
   only; still under reduced motion. */
#app > * { animation: vxRise .45s cubic-bezier(.22,.8,.3,1) backwards; }
#app > *:nth-child(2) { animation-delay: 40ms; }
#app > *:nth-child(3) { animation-delay: 80ms; }
#app > *:nth-child(n+4) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  #app > * { animation: none; }
}

/* =====================================================================
   REDESIGN V2 — COMPOSITION (2026-10-25)
   Jeff rejected V1 as "masking the current platform with these
   colors": V1 swapped tokens over the old layouts. This section
   recomposes the screens the way Slotted is composed (see
   DESIGN-STUDY-V2.md): black hero bands and black stat blocks,
   left-aligned display type, the app-head + live-row dashboard
   opening, slot-card anatomy for every feed card (tile, tags,
   title, meta, hairline, value-anchored foot with ONE pill
   action), form panels split into a black head band over a white
   form body, and Slotted's tab / bottom-bar treatments. Rules
   here win by cascade order over everything above.
   ===================================================================== */

/* ---------- frame + rhythm ---------- */
html, body { overflow-x: clip; }
main { max-width: 1140px; padding-top: 26px; padding-left: 24px; padding-right: 24px; }
@media (max-width: 720px) {
  main { padding-top: 20px; padding-left: 16px; padding-right: 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
#app h2 { font-size: clamp(1.55rem, 4.6vw, 2rem); letter-spacing: -.03em; line-height: 1.12; }
#app > h2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 18px; }
#app > h2 .badge { font-size: .78rem; padding: 7px 13px; }
.panel { border-radius: var(--r-lg); padding: 26px; }
@media (max-width: 640px) { .panel { padding: 20px; } }
.panel h3, .card h3 { letter-spacing: -.02em; }
label { font-weight: 700; letter-spacing: -.01em; }
.notice { border-radius: var(--r-md); padding: 16px 18px; }

/* ---------- topbar: Slotted top-links + mint CTA ---------- */
.topbar { min-height: 66px; padding-top: 10px; padding-bottom: 10px; }
#topnav { gap: 26px; }
#topnav a, #topnav button.linklike { font-size: .92rem; }
#topnav a.nav-cta {
  background: var(--mint); color: var(--ink); font-weight: 700;
  padding: 10px 18px; border-radius: 999px;
}
#topnav a.nav-cta:hover { background: var(--mint-b); color: var(--ink); }

/* ---------- bottom bar: Slotted mobile bar (active = mint square) ---------- */
/* Jeff, 2026-10-25 (second pass): the first tile was a fixed 48px
   square centered on the item — narrower than the longest labels
   ("Dashboard" measures 57px), so the word spilled past the tile
   on both sides and its bottom rode the bar's edge. The tile now
   INSETS the whole item (4px top/bottom, edge to edge across the
   item), so the highlight frames icon + the FULL label
   symmetrically at any label length, and the bar is a touch
   taller so nothing sits near its edges. */
@media (max-width: 720px) {
  #bottomnav {
    height: calc(72px + env(safe-area-inset-bottom));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
}
#bottomnav.signed-in {
  height: calc(72px + env(safe-area-inset-bottom));
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  width: min(640px, 100%);
}
#bottomnav .bn-item { position: relative; margin: 0 1px; }
#bottomnav .bn-item.on { color: var(--ink); }
#bottomnav .bn-item.on .bn-label { color: var(--ink); }
#bottomnav.signed-in .bn-item.on { color: var(--ink); }
#bottomnav.signed-in .bn-item.on .bn-label { color: var(--ink); }
#bottomnav .bn-item.on::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; bottom: 4px;
  border-radius: 15px;
  background: var(--mint);
  pointer-events: none;
}
#bottomnav .bn-label { font-size: 0.62rem; letter-spacing: 0; }
#bottomnav .bn-icon, #bottomnav .bn-label { position: relative; z-index: 1; }
body.bn-on main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.bn-on .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- HOME: black hero band (Slotted hero composition) ---------- */
.hero {
  text-align: left; background: var(--black); color: #fff;
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: -26px;
  padding: 76px max(24px, calc(50vw - 546px)) 64px;
}
@media (max-width: 720px) {
  .hero { margin-top: -20px; padding: 56px max(20px, calc(50vw - 546px)) 48px; }
}
.hero h1 {
  color: #fff; font-size: clamp(2.7rem, 7.4vw, 4.6rem);
  line-height: 1.03; letter-spacing: -.035em; max-width: 660px; margin: 0 0 6px;
}
.hero h1 .grad-text { color: var(--mint); }
.hero p {
  color: #C6CFC6; font-size: 1.06rem; line-height: 1.6; font-weight: 500;
  max-width: 560px; margin: 18px 0 0;
}
.hero p strong { color: #fff; }
.hero .cta-row { justify-content: flex-start; margin-top: 30px; gap: 12px; }
.hero .btn { min-height: 54px; font-size: .98rem; }
.hero .btn.ghost {
  background: rgba(11,13,12,.25); border-color: rgba(255,255,255,.65);
  color: #fff; box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero .btn.ghost:hover { background: rgba(255,255,255,.14); }
.hero p.small { font-size: .82rem; color: #A9BFA9; max-width: 660px; line-height: 1.6; }
@media (max-width: 560px) { .hero .cta-row .btn { flex: 1 1 100%; } }
.hero + section { margin-top: 52px; }

/* Home steps: Slotted step cards (number line, title, copy). */
.grid .card { border-radius: 20px; padding: 24px; box-shadow: var(--sh-sm); }
.grid .card h3 { font-size: 1.06rem; margin: 0 0 6px; }
.grid .card p { line-height: 1.6; font-size: .94rem; }
.sx-num {
  display: block; font-size: .95rem; font-weight: 800;
  color: var(--mint-deep); letter-spacing: .05em; margin-bottom: 10px;
}

/* Home rules: Slotted black example panel. */
.rules-panel { background: var(--black); border-color: var(--black); color: #DDE7DD; padding: 30px; }
.rules-panel h3 { color: #fff; font-size: 1.4rem; margin-top: 0; }
.rules-panel p { color: #C6CFC6; line-height: 1.65; }
@media (max-width: 640px) { .rules-panel { padding: 24px 20px; } }

/* ---------- FORM PANELS: black head band + white body ---------- */
.panel.form-panel { padding: 0; overflow: hidden; }
.form-head { background: var(--black); color: #fff; padding: 32px 28px 28px; }
.form-head h2 { color: #fff; margin: 0 0 12px; font-size: clamp(1.8rem, 5vw, 2.2rem); }
.form-head h3 { color: #fff; }
.form-head p { color: #C6CFC6; line-height: 1.6; margin: 0 0 10px; }
.form-head p:last-child { margin-bottom: 0; }
.form-head p strong, .form-head strong { color: #fff; }
.form-head .muted { color: #9AA79E; }
.form-head a { color: var(--mint); }
.form-body { padding: 28px; }
@media (max-width: 640px) {
  .form-head { padding: 26px 20px 22px; }
  .form-body { padding: 22px 20px; }
}
.form-panel .btn[type="submit"] { min-height: 54px; font-size: 1rem; }
.form-body .notice.blue { border-radius: var(--r-md); padding: 18px 20px; line-height: 1.6; }

/* Plan cards inside the business form: benefit cards; the selected
   plan goes black with a mint price (Slotted stat treatment). */
.form-body .plan-card { border-radius: var(--r-md); padding: 22px; }
.form-body .plan-card .price { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.plan-card.selected { background: var(--black); border-color: var(--black); color: #fff; box-shadow: var(--sh-md); }
.plan-card.selected .price { color: var(--mint); }
.plan-card.selected .muted, .plan-card.selected ul { color: #9AA79E; }

/* ---------- DASHBOARD HERO: flat black, live-row stats ---------- */
.dash-hero { border-radius: 28px; padding: 28px; }
.dash-hero::before, .dash-hero::after { display: none; }
.dh-kicker { color: var(--mint); letter-spacing: .16em; }
.dh-name { font-size: clamp(1.9rem, 6vw, 2.7rem); margin-top: 8px; }
.dh-sub { color: #C6CFC6; font-size: .98rem; line-height: 1.55; max-width: 580px; }
.dh-row {
  justify-content: flex-start; gap: 0; flex-wrap: nowrap;
  border-top: 1px solid var(--hair-d); padding-top: 18px; margin-top: 20px;
}
.dh-row > div { padding: 0 22px; min-width: 0; }
.dh-row > div:first-child { padding-left: 0; }
.dh-row > div + div { border-left: 1px solid var(--hair-d); }
.dh-num { font-size: clamp(1.9rem, 7vw, 2.5rem); }
.dh-num-lbl {
  text-transform: uppercase; letter-spacing: .08em; font-size: .68rem;
  font-weight: 700; color: #9AA79E; margin-top: 5px; line-height: 1.4;
}
@media (max-width: 640px) {
  .dash-hero { padding: 24px 20px; border-radius: 24px; }
  .dh-row > div { padding: 0 14px; }
}

/* ---------- STAT BAND: Slotted black stat blocks ---------- */
.stat-band { background: transparent; border: none; box-shadow: none; gap: 12px; overflow: visible; border-radius: 0; }
.stat-band .stat-cell { background: var(--black); border-radius: var(--r-md); padding: 22px; border-right: none; }
.stat-band .stat-num { color: var(--mint); }
.stat-band .stat-num em { color: var(--mint); }
.stat-band .stat-lbl { color: #9AA79E; }
.stat-band .muted { color: #9AA79E; }
.stat-band .grad-text { color: var(--mint); }
/* The proof sheet is a print document: its band stays light. */
.proof-sheet .stat-band { background: var(--card); border: 1px solid var(--line); box-shadow: none; gap: 0; border-radius: 14px; overflow: hidden; }
.proof-sheet .stat-band .stat-cell { background: #fff; border-right: 1px solid var(--line2); }
.proof-sheet .stat-band .stat-cell:last-child { border-right: none; }
.proof-sheet .stat-band .stat-num { color: var(--ink); }
.proof-sheet .stat-band .stat-lbl { color: var(--ink2); }

/* ---------- KICKERS / SECTION HEADS in dashboard blocks ---------- */
.ui-kicker { color: var(--mint-deep); display: inline-flex; align-items: center; gap: 10px; }
.ui-kicker::before { content: ""; width: 26px; height: 2px; background: var(--mint-dot); flex: none; }
.home-h { font-size: 1.32rem; letter-spacing: -.02em; margin: 8px 0 8px; }
.showcase-block h4 {
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink3);
}
#open-board > h3, #tab-body > h3 { font-size: 1.45rem; letter-spacing: -.025em; }

/* ---------- SLOT CARDS: the feed anatomy ---------- */
.slot-card { padding: 14px; border-radius: var(--r-md); }
.slot-top { display: flex; gap: 12px; align-items: flex-start; }
.slot-top .avatar-initial {
  width: 56px !important; height: 56px !important; border-radius: 14px !important;
  background: var(--black); color: var(--mint); font-size: 1.3rem !important;
}
.slot-body { flex: 1; min-width: 0; }
.slot-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; align-items: center; }
.slot-name { font-weight: 800; font-size: 1.06rem; line-height: 1.25; letter-spacing: -.015em; }
.slot-cat { font-size: .8rem; color: var(--ink3); font-weight: 600; margin-top: 2px; }
.slot-meta { font-size: .8rem; font-weight: 600; color: var(--ink2); margin-top: 5px; display: flex; gap: 6px 12px; flex-wrap: wrap; }
.slot-deal { border-top: 1px solid var(--line2); margin-top: 12px; }
.slot-deal .showcase-block { border-top: none; margin-top: 10px; padding-top: 0; }
.slot-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--mint-pale); margin-top: 12px; padding-top: 12px;
}
.slot-price { font-size: 1.65rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.slot-note {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink3); margin-top: 5px;
}
.slot-actions { display: flex; gap: 8px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.btn.book { background: var(--black); color: var(--mint); box-shadow: var(--sh-sm); }
.btn.book:hover { background: var(--black2); color: var(--mint); }
@media (max-width: 480px) {
  .slot-foot { align-items: flex-end; }
  .slot-actions .btn { min-height: 48px; }
}

/* Home opportunity cards: same book-action treatment. */
.home-opp { padding: 16px; }
.home-opp form .btn { background: var(--black); color: var(--mint); }
.home-opp form .btn:hover { background: var(--black2); color: var(--mint); }

/* ---------- PUBLIC PROFILE: black hero card ---------- */
.creator-card.full {
  background: var(--black); border-color: var(--black); color: #DDE7DD;
  border-radius: 28px; padding: 26px;
}
.creator-card.full:hover { transform: none; }
.creator-card.full .cc-name { color: #fff; font-size: clamp(1.9rem, 6vw, 2.5rem); letter-spacing: -.03em; }
.creator-card.full .cc-handle { color: #9AA79E; }
.creator-card.full .cc-chip { background: var(--panel-d); border-color: var(--hair-d); color: #C6CFC6; }
.creator-card.full .cc-chip.market { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.creator-card.full .cc-local { background: transparent; border: none; padding: 6px 6px 0; margin-top: 20px; }
.creator-card.full .cc-local .big { color: var(--mint); font-size: 3.4rem; }
.creator-card.full .cc-local .lbl { color: #C6CFC6; }
.creator-card.full .cc-local .src { color: #9AA79E; }
.creator-card.full .cc-meta .k { color: #9AA79E; }
.creator-card.full .cc-meta .v { color: #fff; }
.creator-card.full .cc-plat { background: var(--panel-d); border-color: var(--hair-d); color: #C6CFC6; }
.creator-card.full .badge { background: var(--panel-d); border-color: var(--hair-d); color: #DDE7DD; }
.creator-card.full .badge.ok { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.creator-card.full .badge.tier, .creator-card.full .badge.elite { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.creator-card.full .badge.info { background: var(--panel-d); border-color: var(--hair-d); color: var(--mint); }
.creator-card.full a { color: var(--mint); }
@media (max-width: 759px) {
  .creator-card.full { padding: 20px; }
  .creator-card.full .cc-photo { aspect-ratio: 4/3; }
  .creator-card.full .cc-photo.no-photo { aspect-ratio: auto; }
}

/* ---------- BUSINESS HOME: pipeline + rows ---------- */
.pv-stage { background: var(--mint-pale); border-color: #CDE9D8; border-radius: 14px; }
.pv-stage-num { font-size: 1.9rem; font-weight: 800; }
.ui-row { padding: 13px 0; }

/* ---------- COMPOSER: Slotted fat pill selectors ---------- */
.chip { min-height: 42px; padding: 8px 16px; font-weight: 700; display: inline-flex; align-items: center; }
.chip.on { background: var(--black); border-color: var(--black); color: var(--mint); }

/* ---------- ADMIN: black preview band, tab row, dash tables ---------- */
.panel.preview-cta { background: var(--black); border-color: var(--black); color: #DDE7DD; }
.preview-cta strong { color: #fff; }
.preview-cta .muted { color: #9AA79E; }
.preview-cta .btn.ghost { background: transparent; border-color: rgba(255,255,255,.65); color: #fff; box-shadow: none; }
.preview-cta .btn.ghost:hover { background: rgba(255,255,255,.14); }
.tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; min-height: 48px; padding: 0 20px; font-size: .92rem; }
@media (min-width: 900px) { .tabs { flex-wrap: wrap; overflow: visible; } }
table th { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
th, td { padding: 11px 10px; }
.table-wrap.panel { padding: 10px 18px; }
.camp-counts { font-size: .95rem; }
.camp-counts strong { font-size: 1.12rem; font-weight: 800; }

/* ---------- SLOT FOOT: wrap on phones (price keeps its line, actions wrap under) ---------- */
@media (max-width: 560px) {
  .slot-foot { flex-wrap: wrap; }
  .slot-actions { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
  .slot-actions .btn.book { flex: 1 1 auto; }
}

/* =====================================================================
   V3 (Jeff, 2026-10-25 evening): the copy cut + Slotted grammar.
   Sections are color FIELDS (black / white / mint), cards are data,
   lanes are toggles, steps are numbered rows, offer terms are tight
   labeled rows with the full text behind ONE tap. See COPY-CUT-V3.md.
   ===================================================================== */

/* ---------- color fields ---------- */
.fld { width: 100vw; margin-left: calc(50% - 50vw); padding: 46px max(24px, calc(50vw - 546px)); }
@media (max-width: 720px) { .fld { padding: 36px 20px; } }
.fld-mint { background: var(--mint); color: var(--ink); }
.fld-mint .ui-kicker { color: var(--ink); }
.fld-mint .ui-kicker::before { background: var(--mint-deep); }
.fld-mint h2, .fld-mint h3 { color: var(--ink); }
.fld-mint h2 .acc, .fld-mint h3 .acc { color: #fff; }
.fld-mint .ui-row { border-color: rgba(11,13,12,.22); }
.fld-mint .ui-row .k { color: #26402F; }
.fld-mint .muted { color: #3D5A47; }
.black-card { background: var(--black); color: #DDE7DD; border-radius: 24px; padding: 24px; }
.black-card h3, .black-card h4 { color: #fff; }
.black-card .muted { color: #9AA79E; }
.black-card .small { color: #C6CFC6; }

/* dashboard heroes become black fields (Slotted field rhythm) */
.dash-hero {
  width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0;
  padding-left: max(24px, calc(50vw - 546px)); padding-right: max(24px, calc(50vw - 546px));
}
@media (max-width: 720px) { .dash-hero { padding-left: 20px; padding-right: 20px; } }

/* ---------- steps: numbered rows ---------- */
.srow { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line2); }
.srow:first-of-type { border-top: none; padding-top: 8px; }
.snum { font-size: 1.85rem; font-weight: 800; color: var(--mint-deep); line-height: 1; min-width: 46px; }
.stitle { font-weight: 800; font-size: 1.08rem; letter-spacing: -.015em; }
.swhis { color: var(--ink2); font-size: .93rem; margin-top: 3px; }

/* ---------- lane toggle rows ---------- */
.lrow { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; }
.lrow + .lrow { border-top: 1px solid var(--line2); }
.tg { width: 50px; height: 29px; border-radius: 999px; background: var(--black); flex: none; position: relative; margin-top: 2px; }
.tg::after { content: ""; position: absolute; top: 4px; right: 4px; width: 21px; height: 21px; border-radius: 50%; background: var(--mint); }
.tg.off { background: #D9E9DE; }
.tg.off::after { right: auto; left: 4px; background: #fff; }
/* Build -51 (fresh-eyes A-02): plain lane dots for the static
   lane-explainer rows (landing + claim forms). The .tg switch
   pill there read as a control a new visitor could toggle; a
   dot says "this is a list," not "this is a switch." The real
   lane control (.tgrow) is untouched. */
.ldot { width: 14px; height: 14px; border-radius: 50%; background: var(--black); flex: none; margin: 5px 18px 0 18px; }
.ldot.off { background: #fff; border: 2px solid var(--black); width: 10px; height: 10px; margin-top: 7px; }
.lname { font-weight: 800; }
.lline { color: var(--ink2); font-size: .95rem; }
label.lname { cursor: pointer; }

/* ---------- live lane control (dashboard panel + profile) ---------- */
/* The lane rows carry REAL switches (input.sw) instead of the .tg
   display spans: every flip saves on its own. */
.lane-sw { flex: none; margin-top: 1px; cursor: pointer; }
.lane-bothrow { padding: 2px 0 4px; }
.lane-rate { border-top: 1px solid var(--line2); padding: 12px 0 2px; }
.lane-rate > label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 7px; }
.lane-rate-flex { display: flex; align-items: center; gap: 10px; }
.lane-rate-flex input { width: 110px; flex: none; }
.lane-err { color: var(--red); font-weight: 700; margin-top: 8px; }

/* ---------- deal rows: compressed offer terms ---------- */
.deal-rows { margin-top: 2px; }
.drow { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line2); }
.drow .dk { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); min-width: 88px; padding-top: 3px; flex: none; }
.drow .dv { font-size: .93rem; font-weight: 600; line-height: 1.45; }
.visit-mint .drow, .pkg-mint .drow { border-color: rgba(11,13,12,.2); }
.visit-mint .dk, .pkg-mint .dk { color: #33503F; }

/* ---------- the one-tap plain-words expander ---------- */
details.deal-details { margin-top: 12px; }
details.deal-details > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  background: var(--black); color: var(--mint); font-weight: 700; font-size: .86rem;
  padding: 10px 18px; border-radius: 999px;
}
details.deal-details > summary::-webkit-details-marker { display: none; }
details.deal-details > summary:hover { background: var(--black2); }
details.deal-details .dd-body { padding-top: 4px; }
details.deal-details .dd-body .showcase-block { border-top: 1px solid var(--line2); margin-top: 10px; padding-top: 10px; }
.black-card details.deal-details > summary { background: var(--mint); color: var(--ink); }
.visit-mint details.deal-details .dd-body p, .pkg-mint details.deal-details .dd-body p { color: var(--ink); }

/* ---------- mint strip inside form panels ---------- */
.form-mint { background: var(--mint); color: var(--ink); padding: 13px 28px; font-weight: 700; font-size: .95rem; line-height: 1.45; }
@media (max-width: 640px) { .form-mint { padding: 12px 20px; } }

/* ---------- mint field regions (profile visit, composer package) ---------- */
.visit-mint, .pkg-mint { background: var(--mint); border-radius: 20px; padding: 20px; margin-top: 16px; }
.visit-mint h4, .pkg-mint h4 { color: var(--ink); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; }

/* ---------- feed tile = photo size ---------- */
.slot-top .avatar-initial { width: 84px !important; height: 84px !important; border-radius: 16px !important; font-size: 1.85rem !important; }
@media (min-width: 720px) { .slot-top .avatar-initial { width: 104px !important; height: 104px !important; } }

/* ---------- rules rows inside the black card on mint ---------- */
.rule-row { padding: 11px 0; border-top: 1px solid rgba(255,255,255,.16); font-weight: 700; color: #fff; font-size: 1.02rem; }
.rule-row:first-of-type { border-top: none; padding-top: 2px; }

/* =====================================================================
   V4 (Jeff, 2026-10-25 night): color-blocked functional screens +
   forms on toggles / checks / chips. Offer cards split into fields
   (white header / pale-mint deal block / hairline terms block /
   BLACK foot with mint price + mint pill action). Forms group into
   calm color fields (.fgroup) and every small choice renders as a
   chip, toggle, check row or stepper bound to the same input.
   ===================================================================== */

/* ---------- color-blocked panels + blocks ---------- */
.panel.tint { background: var(--bg2); border-color: var(--line2); }
.panel.tint .hm-pile { background: #fff; }
.tint-block { background: var(--bg2); border-radius: 16px; padding: 10px 16px 8px; margin-top: 16px; }
.tint-block h4 { margin: 10px 0 4px; }
.tint-block .ui-row:last-child { border-bottom: none; }

/* ---------- offer cards: field split ---------- */
.slot-deal { border-top: none; }
.deal-main {
  background: var(--mint-pale); border-radius: 16px;
  padding: 6px 14px; margin-top: 2px;
}
.deal-main .drow { border-color: rgba(11,13,12,.09); }
.deal-main .drow:first-child, .deal-terms .drow:first-child { border-top: none; }
.deal-main .dk { color: #33503F; }
.deal-terms {
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  padding: 6px 14px; margin-top: 10px;
}
.deal-terms .drow { border-color: var(--line2); }
div.deal-terms p:first-child { margin-top: 6px; }
div.deal-terms p:last-child { margin-bottom: 6px; }

/* the foot is the card's one BLACK block: mint price, mint pill */
.slot-foot {
  background: var(--black); border-top: none; border-radius: 16px;
  padding: 14px 16px; margin-top: 14px;
}
.slot-foot .slot-price { color: var(--mint); }
.slot-foot .slot-note { color: #9AA79E; }
.slot-foot .btn.book { background: var(--mint); color: var(--black); box-shadow: none; }
.slot-foot .btn.book:hover { background: var(--mint-b); color: var(--black); }
.slot-foot .btn.ghost {
  background: transparent; border-color: rgba(255,255,255,.45);
  color: #fff; box-shadow: none;
}
.slot-foot .btn.ghost:hover { background: rgba(255,255,255,.12); }
.slot-foot .btn:not(.book):not(.ghost):not(.danger) { background: #fff; color: var(--black); border-color: #fff; }
.slot-foot a { color: var(--mint); }
.slot-foot .badge { background: var(--panel-d); border-color: var(--hair-d); color: #DDE7DD; }
.slot-foot .badge.info { color: var(--mint); }

/* ---------- form fields: grouped color blocks ---------- */
.fgroup {
  border: 1.5px solid var(--line2); border-radius: 18px;
  padding: 16px 16px 6px; margin: 0 0 14px;
}
.fgroup.tint { background: var(--bg2); border-color: transparent; }
.fg-kicker {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mint-deep); margin: 0 0 12px;
}

/* ---------- chip radio groups (bound to a hidden input) ---------- */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 10px 16px; min-height: 44px;
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer;
}
.rchip.on { background: var(--black); border-color: var(--black); color: var(--mint); }
.rchip:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }

/* ---------- multi-select chips: categories / comp fits ---------- */
.checkrow { gap: 8px; }
.checkrow label {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 10px 16px; min-height: 44px; cursor: pointer;
  font-weight: 700; color: var(--ink); margin: 0;
}
.checkrow label input, .radio-chip input, .tier-chip input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  padding: 0; border: none; margin: 0; pointer-events: none;
}
.checkrow label:has(input:checked) { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.checkrow label:has(input:checked)::before { content: "\2713"; font-weight: 800; }
.checkrow label:focus-within, .radio-chip:focus-within, .tier-chip:focus-within {
  outline: 2px solid var(--mint-deep); outline-offset: 2px;
}

/* ---------- radio chips: stacked option rows ---------- */
.radio-stack { display: flex; flex-direction: column; gap: 8px; }
.radio-chip {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  padding: 13px 16px; min-height: 50px; font-weight: 700;
  cursor: pointer; margin: 0; color: var(--ink);
}
.radio-chip::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line); flex: none; box-sizing: border-box;
}
.radio-chip:has(input:checked) { background: var(--black); border-color: var(--black); color: var(--mint); }
.radio-chip:has(input:checked)::before {
  border-color: var(--mint); background: var(--mint);
  box-shadow: inset 0 0 0 4px var(--black);
}

/* ---------- tier chips (composer who-can-apply) ---------- */
.tier-chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 10px 16px; min-height: 44px; font-weight: 700;
  cursor: pointer; margin: 0; color: var(--ink);
}
.tier-chip:has(input:checked) { background: var(--mint); border-color: var(--mint); }
.tier-chip:has(input:checked) .tc-name::before { content: "\2713  "; font-weight: 800; }
.tier-chip:has(input:checked) .muted { color: #33503F; }

/* ---------- consent check rows ---------- */
.ckrow {
  display: flex; gap: 12px; align-items: flex-start; width: 100%;
  box-sizing: border-box; background: #fff;
  border: 1.5px solid var(--line); border-radius: 16px;
  padding: 14px 16px; font-weight: 500; cursor: pointer; margin: 0;
}
.ckrow:has(.ckbox:checked) { border-color: var(--black); }
.ckbox {
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px; flex: none; padding: 0; margin: 1px 0 0;
  border: 2px solid var(--ink3); border-radius: 8px; background: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.ckbox:checked { background: var(--black); border-color: var(--black); }
.ckbox:checked::after { content: "\2713"; color: var(--mint); font-size: 16px; font-weight: 800; line-height: 1; }
.ckbox:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }

/* ---------- toggle switches (bound to the same checkbox) ---------- */
/* The switch floats at the label's first line and the text flows
   full width under it: two of the toggle labels are full
   paragraphs, and a fixed flex column squeezed them. */
.tgl-row { display: block; font-weight: 500; cursor: pointer; margin: 0; }
.tgl-row input.sw { float: left; margin: 2px 12px 6px 0; }
input.sw {
  appearance: none; -webkit-appearance: none;
  width: 52px; height: 30px; flex: none; padding: 0;
  border: none; border-radius: 999px; background: #D9E9DE;
  position: relative; cursor: pointer; transition: background .15s ease;
}
input.sw::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left .15s ease, background .15s ease;
}
input.sw:checked { background: var(--black); }
input.sw:checked::after { left: 25px; background: var(--mint); }
input.sw:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }

/* ---------- steppers (bound to the same number input) ---------- */
.stepper { display: flex; align-items: stretch; gap: 8px; }
.stepper input { text-align: center; }
.step-btn {
  width: 48px; flex: none; min-height: 48px; border-radius: 14px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: 1.25rem; font-weight: 800; cursor: pointer;
}
.step-btn:active { background: var(--mint-pale); }
.step-btn:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }

/* =====================================================================
   V5 (Jeff, 2026-10-25 late): tier toggles, drag bars, and the
   Tinder-feel card stacks for Discover + the creator Offers feed.
   ===================================================================== */

/* ---------- who-can-apply: Slotted lane toggle rows ---------- */
.tier-toggles { display: flex; flex-direction: column; gap: 8px; }
.tier-toggle {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  padding: 13px 16px; min-height: 58px; cursor: pointer; margin: 0;
}
.tier-toggle:focus-within { outline: 2px solid var(--mint-deep); outline-offset: 2px; }
.tier-toggle .tt-body { display: flex; flex-direction: column; gap: 1px; }
.tier-toggle .tt-name { font-weight: 800; font-size: 1rem; color: var(--ink); }
.tier-toggle .tt-line { font-size: .85rem; font-weight: 600; color: var(--ink3); }

/* ---------- drag bars (bound to the same number input) ---------- */
.dragbar {
  display: grid; grid-template-columns: 1fr auto; column-gap: 14px;
  align-items: center; padding: 4px 0 2px;
}
.drag-range {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 10px; border-radius: 999px; margin: 0; padding: 0;
  background: linear-gradient(90deg, var(--mint-soft) var(--fill, 0%), #E1EBE1 var(--fill, 0%));
  cursor: pointer; touch-action: pan-y;
}
.drag-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--black); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(11,13,12,.35); cursor: grab;
}
.drag-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--black); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(11,13,12,.35); cursor: grab;
}
.drag-range::-moz-range-progress { background: var(--mint-soft); height: 10px; border-radius: 999px; }
.drag-range::-moz-range-track { background: #E1EBE1; height: 10px; border-radius: 999px; }
.drag-range:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 4px; }
.drag-val input {
  width: 78px; text-align: center; border: none; background: var(--bg2);
  border-radius: 12px; padding: 9px 4px;
  font: inherit; font-size: 1.3rem; font-weight: 800; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.drag-val input::-webkit-outer-spin-button, .drag-val input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.drag-val input:focus { outline: 2px solid var(--mint-deep); outline-offset: 1px; background: var(--mint-pale); }
.drag-minmax {
  grid-column: 1; display: flex; justify-content: space-between;
  font-size: .75rem; font-weight: 700; color: var(--ink3); margin-top: 2px;
}

/* ---------- Cards | List toggle + stack chrome ---------- */
.view-toggle {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px; margin: 14px 0 12px;
}
.view-toggle .vt-group { display: flex; gap: 8px; }
.stack-pos { font-size: .85rem; font-weight: 700; color: var(--ink3); }
.stk-wrap { position: relative; max-width: 560px; margin: 0 auto; }
.stk-behind {
  position: absolute; left: 6px; right: 6px; top: 10px; z-index: 0;
  transform: scale(.965); opacity: .5; pointer-events: none;
  filter: saturate(.75);
}
.stk-card { position: relative; z-index: 1; touch-action: pan-y; cursor: grab; }
.stk-card img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.stk-card:active { cursor: grabbing; }
.stk-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 18px auto 0; width: fit-content;
  /* One floating action dock on both stacks. An offer card is
     taller than the viewport, so the dock sticks above the
     bottom nav while the card scrolls under it: Pass / Apply
     are always one thumb-reach away. The frosted plate keeps
     the dock readable over card content while it is stuck. */
  position: sticky; bottom: 84px; z-index: 6;
  background: rgba(250, 252, 250, .85);
  /* Build -38: on phones there is no bottom nav left to clear,
     so the dock hugs the bottom edge there. */
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1.5px solid var(--line2); border-radius: 999px;
  padding: 8px 12px; box-shadow: var(--sh-md);
}
@media (max-width: 767.98px) { .stk-actions { bottom: 16px; } }
.stk-pass {
  height: 58px; flex: none; border-radius: 999px; padding: 0 28px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: var(--sh-sm);
}
/* Later pile system (2026-10-26): deck chrome, the Second look
   pill, the Later grid, the hidden restore rows and the toast. */
.stk-secondlook {
  position: absolute; top: 12px; right: 12px;
  z-index: 4; background: var(--mint); color: var(--black);
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; box-shadow: var(--sh-sm);
  pointer-events: none; white-space: nowrap;
}
.deck-counts { font-size: .85rem; font-weight: 700; color: var(--ink3); }
.later-chip {
  font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer;
  border: 1.5px solid var(--line2); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 7px 14px;
}
.deck-teach { margin: 0 0 10px; }
.later-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 8px; }
.later-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 22px; }
.hidden-block { margin-top: 26px; }
.hidden-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.offer-pile-row { display: flex; gap: 8px; margin-top: 12px; }
.signl-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 16px);
  z-index: 90; display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: #fff; border-radius: 999px;
  padding: 11px 20px; font-weight: 700; font-size: .92rem;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  box-shadow: var(--sh-md);
}
.signl-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.signl-toast button {
  font: inherit; font-weight: 800; cursor: pointer; border: none;
  background: var(--mint); color: var(--black); border-radius: 999px; padding: 5px 14px;
}
.stk-pass:active { transform: scale(.93); }
.stk-go {
  min-height: 58px; padding: 0 42px; border: none; border-radius: 999px;
  background: var(--mint); color: var(--black);
  font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer;
  box-shadow: var(--sh-sm);
}
.stk-go:active { transform: scale(.97); }
.stk-pass:focus-visible, .stk-go:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }
.stk-end {
  background: #fff; border: 1.5px dashed var(--line); border-radius: 24px;
  padding: 44px 24px; text-align: center;
}
.stk-end h3 { margin: 0 0 8px; }
.stk-end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* ---------- discover stack card: photo-led, local reach hero ---------- */
.dcard {
  background: #fff; border-radius: 24px; box-shadow: var(--sh-md);
  overflow: hidden; text-align: left;
}
.dcard.paused { opacity: .62; filter: grayscale(.6); }
.dcard-photo { position: relative; aspect-ratio: 4 / 3.3; background: var(--bg2); }
.dcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard-photo.no-photo { background: var(--mint); }
.dcard-mono { height: 100%; display: grid; place-items: center; }
.dcard-mono span { font-size: 5.2rem; font-weight: 800; color: var(--black); letter-spacing: -.03em; }
.dcard-tier {
  position: absolute; left: 14px; top: 14px;
  background: var(--black); color: var(--mint);
  font-size: .78rem; font-weight: 800; letter-spacing: .02em;
  padding: 6px 12px; border-radius: 999px;
}
.dcard-sample {
  position: absolute; right: 14px; top: 14px;
  background: rgba(11,13,12,.82); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 999px;
}
.dcard-body { padding: 18px 20px 20px; }
.dcard-name { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.dcard-handle { color: var(--ink3); font-weight: 600; margin-top: 2px; }
.dcard-local { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; }
.dcard-pct { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.dcard-local-lbl {
  font-size: .74rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mint-deep);
}
.dcard-local-na { font-size: 1rem; font-weight: 700; color: var(--ink3); }
.dcard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.dcard-meta {
  display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 13px;
  color: var(--ink2); font-weight: 600; font-size: .93rem;
}
.dcard-meta span + span::before { content: "\00B7  "; color: var(--ink3); }

@media (prefers-reduced-motion: reduce) {
  .stk-card { transition: none !important; }
  .stk-pass:active, .stk-go:active { transform: none; }
}

/* ---------- badges: content-sized pills, never blobs (Jeff, 2026-10-25) ---------- */
/* A badge squeezed into a narrow table column used to wrap into a
   huge multi-line blob ("Founding priority #9"). Badges now size
   to their content on one line, everywhere. */
.badge { width: max-content; max-width: 100%; white-space: nowrap; }

/* ---------- admin tables on phones: stacked cards (Jeff, 2026-10-25) ---------- */
/* Every table in the app is an admin .table-wrap table. At phone
   widths the table becomes one card per row: cells stack (name +
   email first, then chips, details, actions), the header row
   hides, and nothing can overflow the page sideways. */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; box-sizing: border-box; }
  .table-wrap table tr:first-child:has(> th) { display: none; }
  .table-wrap table tr:not(:first-child) { border-top: 1px solid var(--line2); padding: 10px 0; }
  .table-wrap td { padding: 3px 0; border-bottom: 0; }
  /* A stacked cell can carry its column's name with it: any cell
     whose value is not self-evident (a count, a date) sets
     data-label and the label rides above the value on phones, so
     no number ever renders bare (Jeff, 2026-10-26). */
  .table-wrap td[data-label]::before { content: attr(data-label); display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 1px; }
}

/* ---------- photo gallery (profile edit + public row) ---------- */
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gal-tile { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--bg2); }
.gal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-cover { position: absolute; top: 6px; left: 6px; background: var(--mint); color: var(--ink); font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.gal-btn { position: absolute; bottom: 6px; left: 6px; background: rgba(11,13,12,.82); color: #fff; border: 0; font-size: .68rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.gal-btn.gal-del { left: auto; right: 6px; top: 6px; bottom: auto; }
.gal-add { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--line); background: transparent; cursor: pointer; color: var(--ink2); font-weight: 700; font-size: .85rem; }
.gal-add input { display: none; }
.gal-row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 16px 2px; scrollbar-width: none; }
.gal-row::-webkit-scrollbar { display: none; }
.gal-row-img { width: 68%; max-width: 280px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; scroll-snap-align: start; flex: none; }

/* ---------- P2.2 dashboard segments (2026-10-25) ---------- */
.dash-segs { margin: 14px 0 4px; }
.dash-segs .vt-group { flex-wrap: wrap; }
.seg-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: var(--mint); font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; vertical-align: 1px; }
.rchip.on .seg-badge { background: var(--bg); color: var(--ink); }
[data-seg] { animation: vxRise .3s ease both; }

/* =====================================================================
   OVERHAUL V2 (2026-10-27): Grin-template recomposition. The icon
   rail IS the navigation at every width (no bottom nav, no app
   header slab); workspace screens carry one huge one-word title,
   an underlined tab row, toolbars with one strong filled primary,
   and large white hairline cards. Accent #006AFC (--mint-deep)
   carries interactive meaning; mint is reserved for Live/positive
   signals and the agent button ring. Stage 1's composition (black
   236px desktop rail, bottom bar, black KPI slabs, pill-chip
   segments, black ready card) is discarded; this block replaces it.
   ===================================================================== */

/* --- Icon rail: persistent at ALL widths for signed-in app --- */
#rail { display: none; }
body.rail-on #rail {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  position: fixed; left: 0; top: 0; bottom: 0; width: 78px; z-index: 60;
  background: #fff; border-right: 1px solid var(--line);
  padding: 12px 0 calc(10px + env(safe-area-inset-bottom));
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
body.rail-on #rail::-webkit-scrollbar { display: none; }
body.rail-on main, body.rail-on .footer { margin-left: 78px; }
body.rail-on main { width: auto; padding-top: 6px; padding-bottom: 44px; }
@media (max-width: 760px) { body.rail-on main { padding-left: 12px; padding-right: 12px; } #toprow .wrap { width: calc(100% - 24px); } }
body.rail-on .footer { width: auto; }
body.rail-on .topbar { display: none; }
body.rail-on #bottomnav { display: none !important; }
.rail-brand { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 6px; border: 0; background: none; cursor: pointer; padding: 0; }
.rail-brand img { width: 36px; height: 36px; border-radius: 10px; display: block; }
.rail-sep { width: 34px; border-top: 1px solid var(--line); margin: 8px 0; flex: none; }
.rail-item {
  width: 64px; min-height: 54px; border-radius: 14px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 7px 2px 6px;
  background: transparent; border: 0; color: #8A968C; cursor: pointer; position: relative;
}
.rail-item:hover { background: var(--tint2); color: var(--ink); }
.rail-item.on { background: #EDF2ED; color: var(--mint-deep); }
.rail-item svg { width: 22px; height: 22px; }
.rail-item .bn-icon { display: flex; position: relative; }
/* Word label under every rail icon (Jeff, 2026-10-29): bare
   icons "don't mean anything" — every destination names
   itself, at every width, phones included. Long labels wrap
   to two short lines inside the 78px rail. */
.rail-label {
  font: 700 .58rem 'Manrope', sans-serif; letter-spacing: .01em;
  line-height: 1.08; text-align: center; white-space: normal;
}
.rail-badge {
  position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--mint-deep); color: #fff;
  font-size: .62rem; font-weight: 800; line-height: 17px; text-align: center;
  border: 2px solid #fff; box-sizing: content-box;
}
.rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 10px; }
.rail-avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--black); color: #fff; font: 800 .85rem 'Manrope', sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.rail-avatar:hover { background: var(--black2); }

/* --- Quiet top row inside the content column --- */
#toprow { display: none; }
body.rail-on #toprow { display: block; margin-left: 78px; padding-top: 12px; }
.tr-in { display: flex; align-items: center; gap: 10px; }
.tr-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--mint-pale); color: var(--ink); font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; flex: none; }
.tr-name { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-right { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: none; }
.tr-right a, .tr-right button { color: var(--ink2); font: 600 .86rem 'Manrope', sans-serif; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 0; }
.tr-right svg { width: 17px; height: 17px; }

/* --- Workspace scaffold: huge title, underline tabs, toolbars --- */
.ws-head { margin: 10px 0 2px; }
.ws-title { font-size: clamp(2.3rem, 7vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin: 0; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.ws-sub { color: var(--ink2); margin: 9px 0 0; font-size: .95rem; line-height: 1.45; max-width: 62ch; }
.ws-action { margin: 16px 0 2px; }
.ws-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin: 18px 0 6px; overflow-x: auto; scrollbar-width: none; }
.ws-tabs::-webkit-scrollbar { display: none; }
.ws-tab { border: 0; background: none; padding: 0 1px 10px; font: 700 .95rem 'Manrope', sans-serif; color: var(--ink3); cursor: pointer; white-space: nowrap; position: relative; }
.ws-tab .cnt { font-weight: 600; margin-left: 4px; }
.ws-tab:hover { color: var(--ink); }
.ws-tab.on { color: var(--mint-deep); }
/* Build -48: Receipt subtab panels (Results page). One panel
   shows at a time; the rest stay in the DOM so open details
   and form state survive a switch. */
.rc-panel { display: none; }
.rc-panel.on { display: block; }
.ws-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--mint-deep); }
/* Phone widths: tab rows wrap instead of clipping the last tab
   off the right edge (Build -47, audit B4). */
@media (max-width: 560px) { .ws-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; column-gap: 18px; } }
.ws-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0 6px; }
.ws-tools .sp { flex: 1; }
.ws-search { flex: 1 1 200px; min-width: 170px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 0 13px; color: var(--ink3); }
.ws-search svg { width: 17px; height: 17px; flex: none; }
.ws-search input { border: 0; outline: 0; flex: 1; min-width: 0; padding: 11px 0; font: 600 .92rem 'Manrope', sans-serif; background: transparent; color: var(--ink); }
.ws-select { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; font: 600 .9rem 'Manrope', sans-serif; color: var(--ink); }
.btn.ws-primary { background: var(--black); color: #fff; border-color: var(--black); border-radius: 11px; padding: 11px 18px; }
.btn.ws-primary:hover { background: var(--black2); }
.btn.ws-outline { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; padding: 10px 15px; }
.btn.ws-outline:hover { border-color: var(--ink3); }
.live-pill { display: inline-flex; align-items: center; gap: 7px; background: #E7F7EE; color: #0E7A4A; font-size: .76rem; font-weight: 800; padding: 6px 12px; border-radius: 999px; vertical-align: middle; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #12B76A; display: block; }
.beta-pill { display: inline-flex; background: #EAF2FE; color: var(--mint-deep); font-size: .74rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; }

/* iOS-style segmented switch (short either/or choices) */
.segsw { display: inline-flex; background: #EDF1ED; border-radius: 999px; padding: 3px; gap: 2px; }
.segsw button { border: 0; background: transparent; padding: 6px 15px; border-radius: 999px; font: 700 .84rem 'Manrope', sans-serif; color: var(--ink2); cursor: pointer; }
.segsw button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(11,13,12,.14); }

/* --- White cards, KPI cards, empty states --- */
.wcard { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin: 14px 0; }
.wcard > h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.wcard .wc-sub { color: var(--ink3); font-size: .86rem; margin: 0 0 6px; }
.empty-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 36px 22px; text-align: center; margin: 14px 0; }
.empty-card .ec-t { font-weight: 700; color: var(--ink2); font-size: 1.03rem; }
.empty-card .ec-s { color: var(--ink3); font-size: .9rem; margin-top: 5px; line-height: 1.45; }
.kpi-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 14px 0; }
@media (min-width: 700px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .kpi-grid.c3 { grid-template-columns: repeat(3, 1fr); } .kpi-grid.c4 { grid-template-columns: repeat(4, 1fr); } }
.kpi-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.kpi-label { font-weight: 600; font-size: .95rem; }
.kpi-num { font-size: 2.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.06; margin-top: 5px; }
.kpi-num .unit { font-size: 1.1rem; color: var(--ink3); font-weight: 700; letter-spacing: 0; }
.kpi-sub { color: var(--ink3); font-size: .82rem; margin-top: 5px; font-weight: 600; line-height: 1.4; }
.delta-pill { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; background: #EAF2FE; color: var(--mint-deep); font-size: .78rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; }
.delta-pill.down { background: #FBEDEB; color: #B4453F; }
.delta-pill.flat { background: var(--tint2); color: var(--ink2); }

/* --- Sig (agent) card + goals card --- */
.sig-card { background: #EAF2FE; border-radius: 20px; padding: 20px 22px; margin: 14px 0; }
.sig-top { display: flex; gap: 14px; align-items: center; }
.sig-ava { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--mint-deep); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 1px 3px rgba(11,13,12,.08); }
.sig-ava svg { width: 24px; height: 24px; }
.sig-title { font-weight: 800; font-size: 1.07rem; letter-spacing: -.01em; }
.sig-sub { color: var(--ink2); font-size: .88rem; margin-top: 2px; }
.sig-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
.sig-pill { background: #fff; border: 0; border-radius: 999px; padding: 9px 15px; font: 700 .86rem 'Manrope', sans-serif; color: var(--ink); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; box-shadow: 0 1px 2px rgba(11,13,12,.07); }
.sig-pill:hover { box-shadow: 0 2px 8px rgba(11,13,12,.12); }
.sig-pill .n { background: var(--mint-deep); color: #fff; border-radius: 999px; min-width: 19px; height: 19px; padding: 0 5px; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.sig-pill.dis { cursor: default; color: var(--ink2); box-shadow: none; border: 1px dashed var(--line); }
.goals-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin: 14px 0; }
.goals-card h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; }
.goals-card p { color: var(--ink3); font-size: .9rem; margin: 0; line-height: 1.5; }

/* --- Floating agent button: white circle, mint ring --- */
#agent-fab {
  position: fixed; right: 18px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 55;
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--mint);
  background: #fff; color: var(--ink); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(11,13,12,.18);
}
#agent-fab.show { display: flex; }
#agent-fab svg { width: 26px; height: 26px; }
#agent-fab .fab-badge { position: absolute; top: -5px; right: -5px; min-width: 21px; padding: 0 5px; border-radius: 999px; background: var(--mint-deep); color: #fff; font-size: .7rem; font-weight: 800; line-height: 21px; text-align: center; border: 2px solid #fff; box-sizing: content-box; }

/* --- Feed: filter chips + date-grouped list card --- */
.feed-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.fchip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font: 700 .84rem 'Manrope', sans-serif; color: var(--ink2); cursor: pointer; }
.fchip:hover { border-color: var(--ink3); color: var(--ink); }
.fchip.on { background: var(--black); border-color: var(--black); color: #fff; }
.feed-list { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin: 12px 0; }
.feed-day { padding: 10px 20px; background: var(--tint2); color: var(--ink2); font-weight: 700; font-size: .82rem; border-top: 1px solid var(--line); }
.feed-list .feed-day:first-child { border-top: 0; }
.feed-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 20px; border-top: 1px solid var(--line2); }
.feed-list .feed-day + .feed-row { border-top: 0; }
.feed-dot { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--tint2); color: var(--ink2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; }
.feed-dot.acc { background: #EAF2FE; color: var(--mint-deep); }
.feed-dot svg { width: 18px; height: 18px; }
.feed-main { flex: 1; min-width: 0; }
.feed-title { font-weight: 700; font-size: .94rem; line-height: 1.35; }
.feed-meta { font-size: .8rem; color: var(--ink3); margin-top: 2px; }
.feed-act { flex: none; }
.feed-empty { padding: 30px 22px; text-align: center; }
.feed-empty .ec-t { font-weight: 700; color: var(--ink2); }
.feed-empty .ec-s { color: var(--ink3); font-size: .88rem; margin-top: 4px; }

/* --- Approvals (Requests) rows --- */
.req-alert { background: #FFF7E8; border: 1px solid #F0DFC0; border-radius: 14px; padding: 13px 16px; font-size: .9rem; margin: 14px 0 4px; line-height: 1.45; }
.req-alert strong { font-weight: 800; }
.req-list { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin: 12px 0; }
.req-row { padding: 15px 16px; border-top: 1px solid var(--line2); }
.req-list .req-row:first-child { border-top: 0; }
.req-row.dim { opacity: .62; }
.req-top { display: flex; gap: 11px; align-items: center; }
.req-body { margin-top: 9px; }
.req-check { width: 18px; height: 18px; accent-color: var(--mint-deep); flex: none; cursor: pointer; }
.req-ava { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--mint-pale); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; overflow: hidden; }
.req-ava img { width: 100%; height: 100%; object-fit: cover; }
.req-main { flex: 1; min-width: 0; }
.req-name { font-weight: 800; font-size: .97rem; }
.req-name .hd { color: var(--ink3); font-weight: 600; font-size: .86rem; }
.req-meta { font-size: .83rem; color: var(--ink2); margin-top: 2px; line-height: 1.45; }
.req-why { font-size: .83rem; color: var(--ink2); margin-top: 7px; line-height: 1.5; background: var(--tint2); border-radius: 10px; padding: 9px 12px; }
.req-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.kebab-wrap { position: relative; flex: none; }
.kebab-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink2); cursor: pointer; font-size: 1.05rem; line-height: 1; }
.kebab-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px rgba(11,13,12,.14); padding: 6px; min-width: 216px; z-index: 40; }
.kebab-menu button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 11px; border: 0; background: none; border-radius: 9px; font: 600 .9rem 'Manrope', sans-serif; color: var(--ink); cursor: pointer; text-align: left; }
.kebab-menu button:hover { background: var(--tint2); }
.kebab-menu button.danger { color: #B4453F; }
.kebab-menu .km-sep { border-top: 1px solid var(--line2); margin: 5px 4px; }
.req-bulk { position: sticky; bottom: 14px; z-index: 35; display: flex; gap: 10px; align-items: center; background: var(--black); color: #fff; border-radius: 14px; padding: 12px 16px; margin: 12px 0; box-shadow: 0 12px 30px rgba(11,13,12,.25); font-size: .9rem; font-weight: 700; }
.req-bulk .btn { margin-left: auto; }
.req-bulk .btn + .btn { margin-left: 0; }

/* --- Offers (campaigns pattern) --- */
.offer-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; margin: 12px 0; }
.offer-top { display: flex; gap: 13px; align-items: flex-start; }
.offer-tile { width: 46px; height: 46px; border-radius: 13px; background: var(--tint2); color: var(--mint-deep); display: flex; align-items: center; justify-content: center; flex: none; }
.offer-tile svg { width: 24px; height: 24px; }
.offer-name { font-weight: 800; font-size: 1.02rem; line-height: 1.3; }
.offer-meta { font-size: .84rem; color: var(--ink2); margin-top: 2px; line-height: 1.45; }
.set-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.set-chip { background: var(--tint2); color: var(--ink2); font-size: .76rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.set-chip.more { background: #fff; border: 1px solid var(--line); }
.offer-acts { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.tmpl-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0; }
@media (min-width: 760px) { .tmpl-grid { grid-template-columns: repeat(3, 1fr); } }
.tmpl-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 9px; }
.tmpl-tile { width: 46px; height: 46px; border-radius: 13px; background: var(--tint2); display: flex; align-items: center; justify-content: center; color: var(--mint-deep); }
.tmpl-tile svg { width: 24px; height: 24px; }
.tmpl-name { font-weight: 800; font-size: 1.04rem; }
.tmpl-desc { font-size: .88rem; color: var(--ink2); flex: 1; line-height: 1.5; }
.tmpl-card .btn { align-self: flex-start; }

/* --- Content screen --- */
.rights-line { display: flex; gap: 11px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 17px; margin: 14px 0; font-size: .9rem; line-height: 1.5; color: var(--ink2); }
.rights-line svg { width: 19px; height: 19px; flex: none; color: var(--mint-deep); margin-top: 1px; }
.track-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; margin: 14px 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.track-card .tc-main { flex: 1 1 190px; min-width: 0; }
.track-card .btn { margin-left: auto; }
.track-card .tc-t { font-weight: 800; font-size: 1rem; }
.track-card .tc-s { color: var(--ink2); font-size: .88rem; margin-top: 2px; line-height: 1.45; }
.lib-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 2px; border-bottom: 1px solid var(--line2); }
.lib-row:last-child { border-bottom: 0; }
.lib-main { flex: 1; min-width: 0; }
.lib-title { font-weight: 700; font-size: .94rem; }
.lib-meta { font-size: .8rem; color: var(--ink3); margin-top: 2px; line-height: 1.45; }
.lic-pill { flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .02em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink2); background: var(--bg); white-space: nowrap; }
.lic-pill.live { background: var(--mint); border-color: var(--mint); color: var(--black); }
.lic-pill.over { border-color: #E4C9C9; color: #9C4A4A; }

/* --- Analytics: charts, funnel, leaderboard --- */
.chart-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin: 14px 0; }
.chart-card h3 { margin: 0 0 2px; font-size: 1.03rem; font-weight: 800; }
.chart-card .wc-sub { color: var(--ink3); font-size: .84rem; margin: 0 0 10px; }
.chart-card svg { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; gap: 18px; font-size: .8rem; color: var(--ink2); font-weight: 700; margin-top: 10px; flex-wrap: wrap; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.fn2-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; padding: 13px 0; border-top: 1px solid var(--line2); }
.fn2-row:first-of-type { border-top: 0; }
.fn2-stage { font-weight: 800; font-size: .98rem; }
.fn2-num { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.fn2-cap { color: var(--ink3); font-size: .83rem; line-height: 1.45; }
.fn2-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--tint2); overflow: hidden; margin-top: 5px; }
.fn2-bar i { display: block; height: 100%; background: var(--mint-deep); border-radius: 99px; }
.lb-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line2); }
.lb-row:first-of-type { border-top: 0; }
.lb-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--tint2); color: var(--ink2); font-weight: 800; font-size: .78rem; display: flex; align-items: center; justify-content: center; flex: none; }
.lb-main { flex: 1; min-width: 0; }
.lb-name { font-weight: 800; font-size: .94rem; }
.lb-meta { font-size: .8rem; color: var(--ink3); margin-top: 1px; }
.lb-num { font-weight: 800; font-size: 1.05rem; text-align: right; }
.lb-num .u { display: block; font-size: .7rem; color: var(--ink3); font-weight: 700; }

/* --- Profile header (Grin brand profile pattern) --- */
.prof-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin: 14px 0; }
.prof-cover { height: 92px; background: linear-gradient(100deg, #006AFC, #019BFC 38%, #03C9AB 72%, #2FE07E); }
.prof-in { padding: 0 22px 22px; }
.prof-ava { width: 74px; height: 74px; border-radius: 20px; background: var(--black); color: #fff; border: 4px solid #fff; margin-top: -30px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; overflow: hidden; position: relative; }
.prof-ava img { width: 100%; height: 100%; object-fit: cover; }
.prof-name { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 2px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.prof-meta { color: var(--ink2); font-size: .9rem; line-height: 1.5; }
.prof-meta a { color: var(--mint-deep); font-weight: 700; text-decoration: none; }
.prof-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.prof-stats .ps b { display: block; font-size: 1.15rem; letter-spacing: -.01em; }
.prof-stats .ps span { font-size: .78rem; color: var(--ink3); font-weight: 600; }
.verified-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--mint-deep); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.verified-dot svg { width: 12px; height: 12px; }

/* Legacy hooks kept alive for screens not yet recomposed: the
   screen header + analytics block spacing used by secondary tabs. */
.scr-head { margin: 2px 0 16px; }
.scr-head h2, .scr-head .scr-title { font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scr-head .scr-sub { color: var(--ink2); margin: 6px 0 0; font-size: .95rem; }
.ana-block { margin-top: 18px; }
.ana-block:first-child { margin-top: 2px; }
.ana-block h4 { margin: 0 0 6px; font-size: 1rem; }
.ana-note { font-size: .8rem; color: var(--ink3); margin-top: 6px; }
.series-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.series-table th { text-align: left; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.series-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line2); font-weight: 600; }
.series-table tr:last-child td { border-bottom: 0; }

/* Offer card light terms + foot, and template cards (Grin Campaigns) */
.ws-offer-terms { border-top: 1px solid var(--line2); margin-top: 12px; padding-top: 12px; }
.ws-offer-terms p { margin: 3px 0; }
.ws-offer-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; border-top: 1px solid var(--line2); padding-top: 14px; }
.ws-price { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.tpl-card { display: flex; gap: 14px; align-items: flex-start; }
.tpl-tile { width: 46px; height: 46px; flex: none; border-radius: 13px; background: var(--wash); border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.tpl-tile svg { width: 22px; height: 22px; }
.tpl-main { flex: 1; min-width: 0; }
.tpl-name { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; }
.tpl-desc { color: var(--sage); font-size: 13.5px; margin-top: 2px; line-height: 1.45; }
.tpl-meta { color: var(--sage); font-size: 12.5px; margin-top: 5px; }
.tpl-card .btn { flex: none; }
@media (max-width: 620px) { .tpl-card { flex-wrap: wrap; } .tpl-card .btn { width: 100%; } }

/* ============================================================
   V3 (overhaul/v3-simple): 5-destination chrome, Sig Home,
   and the V3 component set. Mobile-first; the same
   destinations become a 232px labeled rail at >=768px (V4.3).
   ============================================================ */
body.v3-on .topbar, body.v3-slim .topbar,
body.v3-on .footer, body.v3-slim .footer,
body.v3-on #rail, body.v3-slim #rail,
body.v3-on #agent-fab, body.v3-slim #agent-fab,
body.v3-on #toprow, body.v3-slim #toprow { display: none !important; }
body.v3-on main, body.v3-slim main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
/* Build -38 (Jeff, 2026-10-29): every login gets the labeled left
   rail at every width, so full accounts sit beside a slim 72px
   rail on phones (232px from 768px up, see the media query below)
   instead of above a bottom tab bar; the bottom-bar clearance
   above stays for slim (founding / pending) accounts only. */
body.v3-on main { margin-left: 72px; width: calc(100% - 72px); }
@media (max-width: 767.98px) { body.v3-on main { padding-bottom: 44px; } }
/* Build -38: the phone content column is 72px narrower beside the
   rail, so the auto-fit grid floors (300px / 240px) no longer fit
   inside panels and pushed card content past the right edge; on
   phones the floors shrink to the container instead. */
@media (max-width: 767.98px) {
  .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
}

/* slim top bar */
#topbar2 { display: none; }
body.v3-on #topbar2, body.v3-slim #topbar2 { display: block; position: sticky; top: 0; z-index: 90; background: #fff; border-bottom: 1px solid var(--line); }
.tb2-in { display: flex; align-items: center; gap: 8px; max-width: 1180px; margin: 0 auto; padding: 8px 14px; }
.tb2-id { display: flex; align-items: center; gap: 10px; min-width: 0; background: none; border: 0; cursor: pointer; padding: 4px 6px 4px 4px; border-radius: 999px; font: inherit; color: var(--ink); }
.tb2-ava { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; }
.tb2-ava.txt { background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; }
.tb2-name { font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.tb2-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tb2-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); text-decoration: none; }
.tb2-btn svg { width: 22px; height: 22px; }
.tb2-btn .tab-badge { position: absolute; top: -3px; right: -3px; }

/* bottom tab bar (mobile) / rail (desktop) */
#tabbar { display: none; }
body.v3-on #tabbar { display: block; position: fixed; left: 0; top: 0; right: auto; bottom: 0; width: 72px; z-index: 80; background: #fff; border-top: 0; border-right: 1px solid var(--line); padding: 72px 4px calc(10px + env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden; }
#tabbar .tab-main { display: flex; flex-direction: column; gap: 2px; }
#tabbar .tab-main .tab-item { flex: none; width: 100%; }
/* BUILD -41: the rail lists every destination (no More item,
   no .tab-more cluster); the hairline now sits only above
   Sign out, at every width. On the 72px rail the short label
   form shows (see RAIL_SHORT in app.js); the full label
   returns from 768px up. */
#tabbar .tab-more-sep { border-top: 1px solid var(--line); margin: 10px 4px; }
.tab-item .lbl-full { display: none; }
.tab-item .lbl-short { display: inline; }
.tab-item { background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink3); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 7px; min-height: 60px; }
.tab-item .tab-ic { position: relative; display: inline-flex; padding: 3px 10px; border-radius: 999px; }
.tab-item .tab-ic svg { width: 24px; height: 24px; display: block; }
.tab-item .tab-label { font-size: 0.68rem; font-weight: 600; line-height: 1.1; text-align: center; overflow-wrap: break-word; max-width: 100%; }
.tab-item.on { color: var(--ink); }
.tab-item.on .tab-ic { background: var(--mint-pale); }
.tab-item.on .tab-label { font-weight: 800; }
.tab-badge { position: absolute; top: -4px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #D43D2A; color: #fff; font-size: 0.66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.tab-badge.inline { position: static; margin-left: auto; }
/* Build -38 (Jeff, 2026-10-29): one navigation system, ONE form —
   the labeled left rail at every width (V4.3 had made it two
   forms: bottom tab bar on phones, rail from 768px up; Jeff's
   ruling killed the phone bottom bar). Phones get the slim 72px
   rail from the base rules above; this block widens it to 232px
   from 768px up, so iPad portrait gets the wide rail too. The rail
   breakpoint lives in exactly four blocks (this one, the V4 ink
   rail colors, and the two Home field bleeds that widen because
   main gains 24px padding beside the wide rail); keep them in step. */
@media (min-width: 768px) {
  body.v3-on #tabbar { top: 0; right: auto; bottom: 0; width: 232px; border-top: 0; border-right: 1px solid var(--line); padding: 76px 12px 16px; overflow-y: auto; }
  /* Definite width, not auto: main is a flex item in the body's
     column, so margin-left + width:auto shrink-wraps it to its
     widest content (a stuck 600px column at every rail width —
     the same flex trap V4.2 fixed for the admin rail). */
  body.v3-on main { margin-left: 232px; padding-left: 24px; padding-right: 24px; width: calc(100% - 232px); }
  body.v3-on .wrap { max-width: min(1080px, 100%); margin-left: auto; margin-right: auto; }
  body.v3-on #tabbar .tab-main { display: flex; flex-direction: column; gap: 2px; }
  /* BUILD -41: full labels on the wide rail; the short forms
     are a 72px-rail concession only. */
  .tab-item .lbl-full { display: inline; }
  .tab-item .lbl-short { display: none; }
  .tab-more-sep { border-top: 1px solid var(--line); margin: 10px 4px; }
  .tab-item, .tab-more-row { flex-direction: row; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 14px; text-align: left; width: 100%; }
  .tab-item .tab-ic { padding: 0; }
  .tab-item.on .tab-ic { background: none; }
  .tab-item.on, .tab-more-row.on { background: var(--mint-pale); }
  .tab-item .tab-label, .tab-more-row .tab-label { font-size: 0.95rem; font-weight: 600; }
  .tab-item.on .tab-label, .tab-more-row.on .tab-label { font-weight: 800; }
  .tab-more-row { background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); display: flex; }
  .tab-more-row .tab-ic svg { width: 24px; height: 24px; display: block; }
}

/* screen heads */
.ws-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.ws-sub { color: var(--ink3); }
.sub-x { border: 0; background: none; cursor: pointer; color: var(--ink3); font-size: 1rem; line-height: 1; padding: 2px 4px; vertical-align: middle; }

/* Home greeting */
.home-greet { margin: 2px 0 14px; }
.hg-hi { font-size: 1.45rem; font-weight: 800; }
.hg-line { color: var(--ink2); margin-top: 2px; }

/* Sig queue card */
.sig-card { background: var(--mint-pale); border: 1px solid var(--mint-soft); border-radius: var(--r-lg); padding: 16px; margin: 0 0 16px; }
.sig-top { display: flex; align-items: center; gap: 12px; }
.sig-ava { width: 44px; height: 44px; border-radius: 14px; background: var(--ink); color: var(--mint); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sig-ava svg { width: 26px; height: 26px; }
.sig-ava-img { border-radius: 50%; overflow: hidden; background: none; }
.sig-ava-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sig-title { font-weight: 800; font-size: 1.05rem; }
.sig-sub { color: var(--ink2); font-size: 0.88rem; }
.sig-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin-top: 10px; }
.sig-stxt { flex: 1; font-size: 0.95rem; }
.sig-item .btn { flex: none; }
.sig-seeall { margin-top: 10px; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--ink); padding: 6px 2px; }
.sig-x { flex: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; color: var(--ink3, #7C877C); padding: 4px 6px; }
/* Build -47 (audit C14): on phones the queue row stacked its
   button beside the sentence, squeezing the text into ~55% of
   the card and breaking sentences mid-thought. The sentence
   takes the full row; the button drops underneath it. */
@media (max-width: 560px) {
  .sig-item { flex-wrap: wrap; }
  .sig-item .sig-stxt { flex: 1 1 100%; }
  .sig-item .sig-x { position: absolute; }
  .sig-item { position: relative; }
  .sig-item .sig-x { top: 6px; right: 6px; }
  .sig-item:has(.sig-x) .sig-stxt { padding-right: 26px; }
}
.sig-links { margin-top: 8px; display: flex; gap: 18px; flex-wrap: wrap; }
.sig-link { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.sig-empty { margin-top: 10px; }

/* launch checklist */
.check-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; margin: 0 0 16px; }
.check-head { font-weight: 800; margin-bottom: 6px; display: flex; gap: 10px; align-items: baseline; }
.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line2); }
.check-row:first-of-type { border-top: 0; }
.check-ic { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); color: var(--mint-dot); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; margin-top: 1px; }
.check-row.done .check-ic { background: var(--mint-pale); border-color: var(--mint-soft); }
/* Build -47 (audit B12): done rows keep their step number so the
   numbering never jumps; the check rides at the row's end. */
.check-done-mark { color: var(--mint-dot); display: inline-flex; flex: none; margin-left: auto; }
.check-row.next { background: var(--bg2); border-radius: var(--r-md); padding: 12px; border-top: 0; }
.check-tx { flex: 1; }
.check-tx .btn { margin-top: 8px; }

/* snapshot strip */
.snap-strip { display: grid; grid-template-columns: repeat(var(--snap-n, 3), 1fr); gap: 10px; margin: 0 0 16px; cursor: pointer; appearance: none; background: none; border: 0; padding: 0; font: inherit; text-align: left; width: 100%; }
.snap-cell { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 12px; }
.snap-num { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.snap-lbl { display: block; color: var(--ink3); font-size: 0.8rem; margin-top: 2px; }
/* Build -51 (fresh-eyes A-06): the plain-words sub-line under a
   snapshot number, for cells whose term needs one breath of
   explanation (local reach, Momentum). */
.snap-sub { display: block; color: var(--ink3); font-size: 0.72rem; margin-top: 1px; }
.snap-fill { display: block; grid-column: 1 / -1; color: var(--ink2); font-size: 0.92rem; }

/* More list */
.more-list { display: flex; flex-direction: column; gap: 8px; }
.more-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; cursor: pointer; font: inherit; color: var(--ink); min-height: 56px; }
.more-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--mint-pale); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.more-ic svg { width: 22px; height: 22px; }
.more-tx { flex: 1; display: flex; flex-direction: column; }
.more-label { font-weight: 800; }
.more-sub { color: var(--ink3); font-size: 0.85rem; }
.more-chev { color: var(--ink3); font-size: 1.3rem; }
.results-row { margin: 4px 0 16px; }

/* Ask Sig row */
.ask-sig { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; cursor: pointer; font: inherit; color: var(--ink); margin-top: 16px; }
.ask-tx { flex: 1; }
.ask-chev { color: var(--ink3); font-size: 1.3rem; }

/* Visits */
.counter-cta { display: flex; align-items: center; gap: 14px; background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 16px; margin: 0 0 14px; }
.counter-cta .btn { margin-left: auto; flex: none; }
.visit-duebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--mint-pale); border: 1px solid var(--mint-soft); border-radius: var(--r-md); padding: 10px 12px; margin: 0 0 10px; font-size: 0.92rem; }
.visit-duebar .btn { margin-left: auto; }

/* Requests banner inside Offers */
.req-banner { background: var(--ink); color: #fff; border-radius: var(--r-md); padding: 12px 14px; font-weight: 700; margin: 0 0 12px; }

/* Find creators */
.dcat-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.dcat-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; cursor: pointer; font: inherit; font-weight: 600; min-height: 40px; }
.dcat-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Spanish-speaking creators toggle (Jeff, 2026-10-28): this is a
   ROSTER filter, not a site-language switcher — the first pass at
   it (a "Language" eyebrow over a bare "Español" chip) read as a
   language switcher and confused exactly the person it was built
   for. The toggle now spells out what it filters and wears the
   deep SIGNL green (#0C7A43, the --blue/--mint-deep accent in V4)
   filled at rest, so it stands apart from the white category
   chips below it. ON goes a shade darker with an inset ring and
   the check, so the state is unmistakable without borrowing the
   category chips' black-pill treatment. */
.dspan-row { display: flex; flex-wrap: wrap; margin: 12px 0 0; }
/* Build -47 (audit B11): the toggles used to sit filled deep
   green in BOTH states, so off read as on. They now speak the
   filter-chip language: quiet tint when off, black pill with
   mint text when on, check visible only when on. */
.dspan-toggle { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; background: var(--tint, #E3F5EA); color: var(--ink); border: 1px solid var(--line, #DDE7DD); border-radius: 999px; padding: 9px 16px; cursor: pointer; font: inherit; min-height: 40px; text-align: left; }
.dspan-toggle .dspan-main { font-weight: 700; }
.dspan-toggle .dspan-sub { font-weight: 500; font-size: .88em; opacity: .75; }
.dspan-toggle .dspan-check { font-weight: 800; visibility: hidden; }
.dspan-toggle.on { background: var(--ink); border-color: var(--ink); color: var(--mint, #A9E8C9); }
.dspan-toggle.on .dspan-check { visibility: visible; }
/* The market select gets the full row so the current market's
   name never truncates (audit B11). */
.filters.disc-top > div { flex: 1 1 100%; }
.filters.disc-top select { width: 100%; }
/* Spanish highlights (Jeff, 2026-10-28): one tint treatment shared
   by the creator's Spanish panel and the business composer's
   Spanish callout, so the option reads as a featured section on
   both sides. Pale mint field, same family as the visit duebar. */
.spanish-panel { background: var(--mint-pale); border: 1px solid #CDE9D8; border-radius: var(--r-md); padding: 14px 16px; margin: 0 0 12px; }
.spanish-panel-h { margin: 0 0 4px; font-size: 1.02rem; }
.spanish-panel-sub { margin: 0 0 10px; color: var(--ink2); }
.spanish-panel .lane-row { margin-bottom: 0; }
.filters-fold { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; margin: 10px 0; background: #fff; }
.filters-fold summary { cursor: pointer; font-weight: 700; padding: 4px 0; }

/* gate + help + threads */
.gate-list { margin: 8px 0 0; padding-left: 20px; }
.help-qa { border-top: 1px solid var(--line2); padding: 10px 0; }
.help-qa summary { cursor: pointer; font-weight: 700; }
.thread-ctx { color: var(--mint-deep); font-weight: 700; }
.thread-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; }
.stack-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }


/* ============================================================
   OVERHAUL V4 — SIGNL-native fields (Jeff, 2026-10-27)
   Design: files/signl-overhaul-v4/DESIGN.md
   Composition is full-bleed COLOR FIELDS (ink → mint → white →
   photo), not cards on gray. Chrome is ink; the active
   destination sits in a mint pill; headline numbers are mint
   on black. This layer re-skins V3 only — every V3 rule and
   every string the verify suite pins stays in place above.
   ============================================================ */

/* ---------- chrome: the top bar goes ink ---------- */
body.v3-on #topbar2, body.v3-slim #topbar2 { background: var(--ink); border-bottom: 0; }
body.v3-on .tb2-id, body.v3-slim .tb2-id { color: #fff; }
body.v3-on .tb2-name, body.v3-slim .tb2-name { color: #fff; }
body.v3-on .tb2-ava.txt, body.v3-slim .tb2-ava.txt { background: var(--mint); color: var(--ink); }
body.v3-on .tb2-btn, body.v3-slim .tb2-btn { background: transparent; border-color: rgba(255,255,255,.30); color: #fff; }
body.v3-on .tb2-btn .tab-badge, body.v3-slim .tb2-btn .tab-badge { box-shadow: 0 0 0 2px var(--ink); }

/* ---------- chrome: the rail goes ink, active = mint pill ---------- */
body.v3-on #tabbar { background: var(--ink); border-top: 0; box-shadow: 10px 0 28px rgba(11,13,12,.22); }
body.v3-on .tab-item { color: rgba(255,255,255,.58); margin: 6px 2px; padding: 6px 2px 5px; min-height: 58px; justify-content: center; border-radius: 16px; }
body.v3-on .tab-item.on { background: var(--mint); color: var(--ink); }
body.v3-on .tab-item.on .tab-ic { background: none; }
body.v3-on .tab-item.on .tab-label { color: var(--ink); }
body.v3-on .tab-badge { box-shadow: 0 0 0 2px var(--ink); }
body.v3-on .tab-more-sep { border-top-color: rgba(255,255,255,.14); }
@media (min-width: 768px) {
  body.v3-on #tabbar { background: var(--ink); border-right: 0; box-shadow: none; }
  body.v3-on .tab-item, body.v3-on .tab-more-row { color: rgba(255,255,255,.72); margin: 0; border-radius: 14px; justify-content: flex-start; }
  body.v3-on .tab-item.on, body.v3-on .tab-more-row.on { background: var(--mint); color: var(--ink); }
  body.v3-on .tab-item.on .tab-label, body.v3-on .tab-more-row.on .tab-label { color: var(--ink); }
  .tab-more-sep { border-top-color: rgba(255,255,255,.14); }
}

/* ---------- Home: fields, not cards ----------
   Home scope = the three home containers (business [data-dash],
   creator #creator-home, founding #founding-dash). */
body.v3-on :is([data-dash], #creator-home, #founding-dash) .ws-head { display: none; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .home-greet {
  background: var(--ink); color: #fff;
  /* Build -38: the bleed matches main's real phone padding
     (16px), so the ink field lands exactly on main's box beside
     the rail instead of overshooting it by 2px a side. */
  margin: -28px -16px 0; padding: 26px 16px 24px;
}
@media (min-width: 768px) {
  body.v3-on :is([data-dash], #creator-home, #founding-dash) .home-greet { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
}
body.v3-on :is([data-dash], #creator-home, #founding-dash) .home-greet::before {
  content: "— SIG"; display: block; color: var(--mint);
  font-size: .68rem; font-weight: 800; letter-spacing: .22em; margin-bottom: 12px;
}
body.v3-on :is([data-dash], #creator-home, #founding-dash) .hg-hi { font-size: 1.85rem; letter-spacing: -.02em; line-height: 1.12; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .hg-line { color: rgba(255,255,255,.86); font-size: 1.05rem; line-height: 1.45; margin-top: 8px; max-width: 36ch; }

/* Sig's queue is a full-mint field: in mint, you're in Sig's hands. */
body.v3-on .sig-card { background: var(--mint); border: 0; border-radius: 24px; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .sig-card {
  border-radius: 0; margin: 0 -16px 18px; padding: 20px 16px 22px;
}
@media (min-width: 768px) {
  body.v3-on :is([data-dash], #creator-home, #founding-dash) .sig-card { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
}
body.v3-on .sig-sub { color: rgba(11,13,12,.62); }
body.v3-on .sig-ava-img { box-shadow: 0 0 0 2px var(--ink); }
body.v3-on .sig-item { border: 0; border-radius: 16px; padding: 14px; box-shadow: 0 1px 2px rgba(11,13,12,.08); }
body.v3-on .sig-item .btn { background: var(--ink); color: #fff; border-color: var(--ink); }
body.v3-on .sig-item .btn:hover { background: #232825; }
body.v3-on .sig-empty { color: rgba(11,13,12,.75); }

/* Checklist: white field, big mint numerals, one loud next step. */
body.v3-on :is([data-dash], #creator-home, #founding-dash) .check-card { background: none; border: 0; border-radius: 0; padding: 6px 0 2px; margin-bottom: 18px; }
body.v3-on .check-row.next .check-ic { width: 38px; height: 38px; background: var(--ink); color: var(--mint); border-color: var(--ink); font-size: 1.1rem; }
body.v3-on .check-row.done .check-ic { background: var(--mint); border-color: var(--mint); color: var(--ink); }

/* Snapshot: one black tile block, mint numerals (Jeff's surface). */
body.v3-on .snap-strip { background: var(--ink); border-radius: 20px; padding: 18px 8px; gap: 0; }
body.v3-on .snap-cell { background: none; border: 0; border-radius: 0; padding: 2px 14px; min-width: 0; }
/* Build -43: a four-cell snapshot (the ROAS cell joined the
   Home band) squeezes each column at phone width; tighter cell
   padding and a smaller label keep every word inside its cell. */
body.v3-on .snap-strip[style*="--snap-n:4"] .snap-cell { padding: 2px 8px; }
body.v3-on .snap-strip[style*="--snap-n:4"] .snap-lbl { font-size: .72rem; }
body.v3-on .snap-cell + .snap-cell { border-left: 1px solid rgba(255,255,255,.12); }
body.v3-on .snap-num { color: var(--mint); font-size: 1.85rem; letter-spacing: -.02em; }
body.v3-on .snap-lbl { color: rgba(255,255,255,.60); }
body.v3-on .snap-sub { color: rgba(255,255,255,.45); }
body.v3-on .snap-strip.fill { background: var(--bg2); }
body.v3-on .snap-strip.fill .snap-fill { padding: 0 10px; }
body.v3-on .snap-strip.fill .ask-chev { color: var(--ink3); padding-right: 8px; }

/* Ask Sig: an ink row at the foot of Home. */
body.v3-on .ask-sig { background: var(--ink); color: #fff; border: 0; border-radius: 20px; }
body.v3-on .ask-sig .muted { color: rgba(255,255,255,.62); }
body.v3-on .ask-sig .ask-chev { color: var(--mint); }
body.v3-on .ask-sig .sig-ava-img { box-shadow: 0 0 0 2px var(--mint); }

/* Activity: a hairline list on the white field, kicker day heads. */
body.v3-on :is([data-dash], #creator-home, #founding-dash) .feed-list { background: none; border: 0; border-radius: 0; overflow: visible; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .feed-day { background: none; text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; padding: 14px 2px 2px; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .feed-row { padding-left: 2px; padding-right: 2px; }
body.v3-on .feed-dot.acc { background: var(--ink); color: var(--mint); }

/* Creator Momentum card: a mint-on-black object. */
body.v3-on #creator-home .mom-card { background: var(--ink); color: #fff; border-color: var(--ink); }
body.v3-on #creator-home .mom-card .kpi-num { color: var(--mint); }
body.v3-on #creator-home .mom-card .kpi-label { color: rgba(255,255,255,.55); }
body.v3-on #creator-home .mom-card .kpi-sub { color: rgba(255,255,255,.70); }
body.v3-on #creator-home .mom-card .btn.ws-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }

/* Founding home: KPI tiles and the local-reach hero go ink. */
body.v3-on #founding-dash .kpi-card { background: var(--ink); border-color: var(--ink); }
body.v3-on #founding-dash .kpi-card .kpi-num { color: var(--mint); }
body.v3-on #founding-dash .kpi-card .kpi-label { color: rgba(255,255,255,.55); }
body.v3-on #founding-dash .kpi-card .kpi-sub { color: rgba(255,255,255,.66); }
body.v3-on #founding-dash .wcard:has(.kpi-num) { background: var(--ink); color: #fff; border-color: var(--ink); }
body.v3-on #founding-dash .wcard:has(.kpi-num) .kpi-num { color: var(--mint); }
body.v3-on #founding-dash .wcard:has(.kpi-num) .kpi-label { color: rgba(255,255,255,.55); }
body.v3-on #founding-dash .wcard:has(.kpi-num) .kpi-sub { color: rgba(255,255,255,.72); }
body.v3-on #founding-dash .wcard:has(.kpi-num) .btn { background: var(--mint); color: var(--ink); border-color: var(--mint); }

/* ---------- segment tabs become pills ---------- */
body.v3-on .ws-tabs { border-bottom: 0; gap: 8px; margin: 14px 0 10px; padding-bottom: 2px; }
body.v3-on .ws-tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 15px; color: var(--ink2); }
body.v3-on .ws-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
body.v3-on .ws-tab.on::after { display: none; }
body.v3-on .ws-tab .cnt { color: #5F7265; }
body.v3-on .ws-tab.on .cnt { color: var(--mint); }

/* ---------- More rows: ink icon chips, mint glyphs ---------- */
body.v3-on .more-ic { background: var(--ink); color: var(--mint); }
body.v3-on .more-row { border-radius: 16px; }
body.v3-on .counter-cta svg { color: var(--mint); }

/* ---------- the deck: full-bleed photo, reach is the hero ---------- */
.dcard { border-radius: 26px; box-shadow: 0 18px 44px rgba(11,13,12,.20); }
.dcard-photo { aspect-ratio: 4 / 4.4; }
.dcard-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 46px 18px 16px; color: #fff;
  background: linear-gradient(180deg, rgba(11,13,12,0) 0%, rgba(11,13,12,.52) 52%, rgba(11,13,12,.88) 100%);
}
.dcard-scrim .dcard-name { color: #fff; font-size: 1.65rem; }
.dcard-scrim .dcard-handle { color: rgba(255,255,255,.78); margin-top: 1px; }
.dcard-scrim .dcard-local { margin-top: 10px; }
.dcard-scrim .dcard-pct { color: var(--mint); font-size: 3rem; }
.dcard-scrim .dcard-local-lbl { color: rgba(255,255,255,.85); }
.dcard-scrim .dcard-local-na { color: rgba(255,255,255,.88); }
.dcard-rate {
  display: inline-flex; margin-top: 12px; background: var(--mint); color: var(--ink);
  font-weight: 800; font-size: .82rem; padding: 6px 12px; border-radius: 999px;
}
.dcard-photo.no-photo .dcard-scrim { background: none; color: var(--ink); }
.dcard-photo.no-photo .dcard-name { color: var(--ink); }
.dcard-photo.no-photo .dcard-handle { color: rgba(11,13,12,.60); }
.dcard-photo.no-photo .dcard-pct { color: var(--ink); }
.dcard-photo.no-photo .dcard-local-lbl { color: rgba(11,13,12,.55); }
.dcard-photo.no-photo .dcard-local-na { color: var(--ink2); }
.dcard-photo.no-photo .dcard-rate { background: var(--ink); color: var(--mint); }
.dcard-body { padding: 16px 18px 18px; }
.dcard-body .dcard-chips { margin-top: 0; }
.dcard-body .dcard-meta { margin-top: 10px; }
/* the action dock goes ink so it reads over any photo */
.stk-actions { background: rgba(11,13,12,.92); border-color: rgba(255,255,255,.16); box-shadow: 0 14px 34px rgba(11,13,12,.35); }
.stk-pass { background: transparent; border-color: rgba(255,255,255,.38); color: #fff; box-shadow: none; }
.stk-go { background: var(--mint); color: var(--ink); }

/* ---------- offer cards: the money leads ---------- */
.slot-value {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--ink); border-radius: 14px; padding: 13px 16px; margin-top: 14px;
}
.slot-value .sv-num { color: var(--mint); font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.slot-value .sv-lbl { color: rgba(255,255,255,.72); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.feed-card { border-radius: 22px; }
.slot-foot:has(.slot-actions:only-child) { justify-content: flex-end; }


/* ---------- V4 refinements (from the first screenshot pass) ---------- */
/* The azure accent is retired: --mint-deep (repurposed to #006AFC by an
   earlier theme) resolves to a deep SIGNL green everywhere in V4, so
   icons, links and fit labels stay in the mint family. */
body.v3-on { --mint-deep: #0C7A43; }

/* Find creators: the deck is the screen. The filter band compresses to
   a compact control strip, and the category chip row WRAPS inside the
   content column (Jeff, 2026-10-28: the old single swipeable row
   clipped off the rail column's right edge on desktop, hiding chips
   including Español). Every chip stays visible and tappable at rail
   and phone widths; chips never shrink, the row wraps instead. */
body.v3-on .dcat-row { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
body.v3-on .dcat-chip { flex: 0 0 auto; }
body.v3-on .dcat-chip.on { color: var(--mint); }
body.v3-on .filters.disc-top { margin: 6px 0 10px; padding: 10px 12px; }
body.v3-on .filters.disc-top select { padding: 10px 12px; }
body.v3-on .filters-fold { margin: 2px 0 8px; }
body.v3-on .view-toggle { margin: 8px 0 4px; }
body.v3-on .deck-teach { margin: 2px 0 8px; }


/* ---------- V4 refinements II (screenshot pass 2) ---------- */
/* Every KPI tile is Jeff's signature object — black tile, mint
   numeral — on Results, Earnings, Numbers and profile showcases. */
body.v3-on .kpi-card { background: var(--ink); border-color: var(--ink); }
body.v3-on .kpi-card .kpi-num { color: var(--mint); }
body.v3-on .kpi-card .kpi-label { color: rgba(255,255,255,.55); }
body.v3-on .kpi-card .kpi-sub { color: rgba(255,255,255,.66); }
/* The counter banner is an ink field: its copy and button must read
   as ink-field elements (muted light copy, mint action). */
body.v3-on .counter-cta p, body.v3-on .counter-cta .muted { color: rgba(255,255,255,.72); }
body.v3-on .counter-cta .btn.ws-primary { background: var(--mint); color: var(--ink); border-color: var(--mint); }

/* Dashboard links speak in the deep SIGNL green, never default blue. */
body.v3-on #tab-body a:not(.btn) { color: var(--mint-deep); }

/* Last azure remnants in the signed-in app: the legacy --blue token
   (focus rings, info badges, notice text) and the success ring go
   deep SIGNL green. Signed-out/public surfaces keep their palette. */
body.v3-on { --blue: #0C7A43; }
body.v3-on .success-check circle { stroke: #0C7A43; }


/* ============================================================
   OVERHAUL V4.1 — four doors + the Sig tab (Jeff, 2026-10-27)
   Design: files/signl-overhaul-v4/DESIGN.md §12
   The bar is now Home · Explore · Sig · More at every width.
   Sig's face rides his tab; the Home ask box is a white pill in
   the mint field; the Sig tab carries the queue, the chat and
   the straight answers on the white field.
   ============================================================ */

/* Sig's tab icon is his face, sized like the line glyphs. */
.tab-sig-img { width: 25px; height: 25px; border-radius: 50%; display: block; }
body.v3-on .tab-item.on .tab-sig-img { box-shadow: 0 0 0 2px var(--ink); }

/* The Home ask box: unmistakably a place to type. */
.sig-askbox {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: #fff; border: 0; border-radius: 999px; cursor: pointer;
  padding: 7px 8px 7px 7px; margin: 14px 0 2px; font: inherit; text-align: left;
  box-shadow: 0 2px 10px rgba(11,13,12,.14);
}
.sig-askbox .sig-ava { width: 34px; height: 34px; }
.sig-askbox-ph { flex: 1; color: var(--ink3, #7C877C); font-weight: 600; font-size: .98rem; }
.sig-askbox-go {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--mint);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 800; line-height: 1; padding-bottom: 2px;
}
.sig-askbox:active { transform: scale(.99); }

/* The Sig tab: queue card keeps the mint field (global .sig-card
   rule above), the chat is a white panel under it. */
.sig-chat { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px; margin-top: 4px; }
.sig-chat-head { display: flex; align-items: center; gap: 12px; }
.sig-chat-title { font-weight: 800; font-size: 1.05rem; }
.sig-thread { margin-top: 12px; max-height: 46vh; overflow-y: auto; }
.sig-turn { display: flex; gap: 8px; margin: 10px 0; align-items: flex-start; }
.sig-turn.user { justify-content: flex-end; }
.sig-turn-ava .sig-ava { width: 28px; height: 28px; }
.sig-bub { padding: 10px 14px; border-radius: 16px; line-height: 1.45; max-width: 86%; }
.sig-turn.sig .sig-bub { background: var(--tint, #E3F5EA); color: var(--ink); border-bottom-left-radius: 6px; }
.sig-turn.user .sig-bub { background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.sig-turn-act { display: flex; margin-top: 10px; background: var(--ink); color: #fff; border-color: var(--ink); }
.sig-ask-form { display: flex; gap: 8px; margin-top: 12px; }
.sig-ask-form input {
  flex: 1; min-width: 0; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 12px 16px; background: #fff;
}
.sig-ask-form input:focus { outline: 2px solid var(--mint-deep); outline-offset: 1px; }
.sig-ask-form .btn { border-radius: 999px; padding-left: 22px; padding-right: 22px; }
.sig-panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 2px 16px; }
.sig-panel .sheet-row { width: 100%; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }

/* The Sig hero: the character owns the top of his tab — a large
   bust on the ink field, his name, and a living presence line.
   The dot is mint while he is ready or talking, coral while he
   is thinking; the line itself is swapped by sigAskSubmit. */
.sig-hero { display: grid; grid-template-columns: 104px 1fr; gap: 18px; align-items: center; background: var(--ink); color: #fff; border-radius: 26px; padding: 20px; margin: 4px 0 16px; overflow: hidden; }
.sig-hero-kicker { color: var(--mint); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sig-hero h2 { margin: 2px 0 6px; font-size: 2rem; line-height: 1; letter-spacing: -.03em; color: #fff; }
.sig-presence { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .94rem; }
.sig-presence strong { font-weight: 800; }
.sig-presence [data-sig-presence-sub] { color: rgba(255,255,255,.68); }
.sig-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(169,232,201,.18); flex: none; }
.sig-live-dot.thinking { background: #FF6B4A; box-shadow: 0 0 0 4px rgba(255,107,74,.18); animation: sigPresencePulse 1s ease-in-out infinite; }
@keyframes sigPresencePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.sig-hero p { margin: 8px 0 0; color: rgba(255,255,255,.72); line-height: 1.45; font-size: .95rem; }
.sig-says { flex: none; background: var(--ink); color: var(--mint); border-radius: 999px; padding: 4px 8px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sig-typing { display: inline-flex; gap: 4px; margin-left: 9px; vertical-align: middle; }
.sig-typing i { width: 6px; height: 6px; border-radius: 50%; background: #0C7A43; animation: sigTyping 1s ease-in-out infinite; }
.sig-typing i:nth-child(2) { animation-delay: .14s; }
.sig-typing i:nth-child(3) { animation-delay: .28s; }
@keyframes sigTyping { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-3px); opacity: 1; } }
@media (max-width: 520px) {
  .sig-hero { grid-template-columns: 84px 1fr; gap: 14px; padding: 16px; border-radius: 22px; }
  .sig-hero h2 { font-size: 1.65rem; }
  .sig-hero p { font-size: .9rem; }
}

/* ============================================================
   OVERHAUL V4.2 — the admin console and the Business Preview
   join the V4 system (Jeff, 2026-10-27). Both surfaces were
   left behind when V4 shipped: the whole V4/V4.1 layer above
   is scoped to body.v3-on / body.v3-slim, and the shell
   deliberately excluded admin ("the admin console keeps the
   V2 icon rail") while preview mode drops the app chrome
   entirely — so admin rendered the pre-V4 light rail with the
   global azure tokens, and the preview rendered under the
   logged-out .topbar with the old gradient logo. The shell
   now marks these surfaces body.admin-on / body.preview-on
   (renderBottomNav owns the classes); this layer does the
   rest, without touching any admin data, panel or action.
   ============================================================ */

/* --- Tokens: azure retires on these surfaces too, exactly
   the way body.v3-on retires it (deep SIGNL green #0C7A43),
   plus the three hardcoded azure spots the V4 layer also
   patches: notice text, Momentum points, lifetime stars. --- */
body.admin-on, body.preview-on {
  --mint-deep: #0C7A43; --blue: #0C7A43;
}
body.admin-on .notice.blue, body.preview-on .notice.blue { color: var(--mint-deep); }
body.admin-on .earn-points, body.preview-on .earn-points { color: var(--mint-deep); }
body.admin-on .sparks, body.preview-on .sparks { color: var(--mint-deep); }

/* --- Admin rail: chrome is black in V4 (the icon rail is
   admin-only by construction — renderRail returns early for
   every other role — so rail-on rules cannot leak). Active
   destination = the mint pill; the pending badge takes the
   tab bar's red count badge. --- */
body.rail-on #rail {
  background: var(--ink);
  border-right: 1px solid var(--hair-d);
}
body.rail-on .rail-brand img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
body.rail-on .rail-item { color: #9AA79E; }
body.rail-on .rail-item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
body.rail-on .rail-item.on { background: var(--mint); color: var(--ink); }
body.rail-on .rail-badge {
  background: #D43D2A;
  border-color: var(--ink);
}
body.rail-on .rail-sep { border-top-color: rgba(255, 255, 255, .14); }
body.rail-on .rail-avatar { background: var(--mint); color: var(--ink); }
body.rail-on .rail-avatar:hover { background: var(--mint-b); }
body.rail-on .tr-ava { background: var(--mint); }

/* --- Admin KPI tiles: the V4 stat tile (black, mint
   numeral) — the same treatment body.v3-on gets above. --- */
body.admin-on .kpi-card { background: var(--ink); border-color: var(--ink); }
body.admin-on .kpi-card .kpi-num { color: var(--mint); }
body.admin-on .kpi-card .kpi-label { color: rgba(255, 255, 255, .55); }
body.admin-on .kpi-card .kpi-sub { color: rgba(255, 255, 255, .66); }

/* --- Preview chrome: the ink preview banner IS the chrome
   (it re-renders on every step and carries the PREVIEW tag,
   the plan pill and Exit). The legacy logged-out header —
   old gradient logo, marketing nav — and the marketing
   footer no longer sit above a business surface. --- */
body.preview-on .topbar, body.preview-on .footer { display: none; }
body.preview-on main { padding-top: 20px; }

/* --- Preview Discover mirrors the live chip row: a wrapped
   row inside the column, active chip ink with mint text. --- */
body.preview-on .dcat-row { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
body.preview-on .dcat-chip { flex: 0 0 auto; }
body.preview-on .dcat-chip.on { color: var(--mint); }
.pv-step-head { margin: 2px 0 8px; }

/* --- Phone fit (390px): the console was unusable on a
   phone. #app is a flex item in the body's column; the rail
   offset gives it a definite margin-left (78px) with width:
   auto, which takes it out of stretch sizing — the item
   shrink-wraps to its widest unbreakable content, the admin
   tab row (.tabs never wraps below 900px), and every panel
   inherits that desktop width (measured: main 818px on a
   390px phone). A definite width beside the rail, main
   allowed to shrink, and the tab row capped at the box put
   the row's own horizontal scroll back in charge; the tab
   content below then fits the phone on every admin tab and
   every preview step. Desktop sizing is untouched. --- */
body.rail-on main, body.preview-on main { min-width: 0; }
.tabs { min-width: 0; max-width: 100%; }
@media (max-width: 760px) {
  body.rail-on main { width: calc(100% - 78px); }
  body.preview-on main { width: 100%; }
}

/* Sig (V4, Jeff, 2026-10-28): a rendered character delivered
   as generated video. The Sig-tab hero is a video stack over
   the hero still (sigHeroMediaHtml / sigHeroSet in app.js): an
   idle loop, a talk loop while an answer renders, one-shot
   greet and celebrate clips on their existing triggers, and
   the think still while he is thinking (no think clip, by
   design). Everywhere small, Sig is a tight head-crop still
   of the state (sig-ava-img) carrying the mood presence
   treatments below; no video at small sizes, ever. A clip
   that fails hides itself and leaves its still standing. */
/* Greet: one pop on the wrapper when the card renders. */
.sig-mood-greet { animation: sigGreetPop 1.05s cubic-bezier(.34, 1.4, .64, 1) 1; }
@keyframes sigGreetPop { 0% { transform: scale(.86) translateY(3px); } 45% { transform: scale(1.07) translateY(-3px); } 70% { transform: scale(.98) translateY(0); } 100% { transform: scale(1) translateY(0); } }
/* Think: a gentle sway while Sig composes or the queue loads. */
.sig-mood-think { animation: sigThinkSway 1.6s ease-in-out infinite; }
@keyframes sigThinkSway { 0%, 100% { transform: rotate(-2.6deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-1px); } }
/* Talk: a quick bob while an answer renders. */
.sig-mood-talk { animation: sigTalkBob .36s ease-in-out infinite; }
@keyframes sigTalkBob { 0%, 100% { transform: rotate(-.7deg) translateY(0); } 50% { transform: rotate(.9deg) translateY(1.4px); } }
/* Celebrate: two restrained hops on the small still (the
   claim confirmation renders the celebrate clip instead). */
.sig-mood-celebrate { animation: sigCeleb 1.45s cubic-bezier(.28, .84, .42, 1) 1; }
@keyframes sigCeleb { 0% { transform: translateY(0) scale(1, 1); } 22% { transform: translateY(-7px) scale(.97, 1.04); } 40% { transform: translateY(0) scale(1.05, .93); } 58% { transform: translateY(-4px) scale(.99, 1.02); } 76% { transform: translateY(0) scale(1.02, .98); } 100% { transform: translateY(0) scale(1, 1); } }
/* The hero media stack: poster still under, video over,
   think still for the thinking state. */
.sig-hero-media { position: relative; display: block; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 2px var(--mint); }
.sig-hero-media img, .sig-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sig-hero-media video[hidden], .sig-celeb-media video[hidden], .sig-hero-media img[hidden] { display: none; }
.sig-hero-media .sig-hero-think { animation: sigThinkSway 1.6s ease-in-out infinite; }
@media (max-width: 520px) { .sig-hero-media { width: 84px; height: 84px; } }
/* The claim confirmation's celebration clip. */
.sig-celeb-media { position: relative; display: block; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 2px var(--mint); }
.sig-celeb-media img, .sig-celeb-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Queue loading: Sig thinks over the dashboard skeleton. */
.sig-load-row { display: flex; align-items: center; margin: 0 0 10px; }
/* Sig everywhere (Jeff, 2026-10-28): the partner Overview
   presence card and Help mark, the partner Sig surface, and
   the Admin attention list all ride the same hero media stack
   and head-crop stills as the Sig tab. No new media model. */
.pt-sig-card { display: flex; gap: 16px; align-items: center; }
.pt-sig-card .sig-hero-media { width: 84px; height: 84px; flex: none; }
.pt-sig-card .sig-ava { flex: none; }
.pt-sig-copy { flex: 1; min-width: 0; }
@media (max-width: 520px) { .pt-sig-card .sig-hero-media { width: 72px; height: 72px; } }
.admin-sig-panel { margin-top: 16px; }
.admin-sig-head { display: flex; gap: 14px; align-items: center; }
.admin-sig-head > div { flex: 1; min-width: 0; }
.admin-sig-media .sig-hero-media { width: 72px; height: 72px; }
.admin-sig-item { display: flex; gap: 10px; align-items: center; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line2, #EAF2EA); }
.admin-sig-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mint-deep, #0C7A43); }
@media (prefers-reduced-motion: reduce) {
  .sig-ava, .sig-ava *, .sig-hero-media .sig-hero-think { animation: none !important; }
}
/* Sig in Admin (Jeff, 2026-10-28): the rail grows the Sig
   destination with the v4 head crop. BUILD -28 (Jeff,
   2026-10-29): there is NO admin bottom bar at any width.
   -27 hid this rail below 768px behind a horizontally
   scrolling bottom bar; Jeff rejected it on sight ("I wanted
   to keep it on the left nav bar — this bottom one is garbage
   having to scroll like that"). The labeled left rail above
   is the admin nav on phones exactly as on desktop: all nine
   destinations, icon + word label, sign out in the rail foot.
   #tabbar stays display:none for admin (the base rule; only
   body.v3-on ever shows it, and admin strips v3 classes). */
.rail-sig-img { width: 25px; height: 25px; border-radius: 50%; display: block; }
.rail-item.on .rail-sig-img { box-shadow: 0 0 0 2px var(--mint); }

/* Founding business preview (first 60 seconds, 2026-10-29):
   the roster rows, plan cards and local-reach figure on the
   founding status page. Compact data rows, not deck cards: the
   preview is a list a business scans, and the local reach
   figure is the headline number on every row. */
.rp-list { display: grid; gap: 10px; margin-top: 12px; }
.rp-card { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; }
.rp-photo { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex: 0 0 56px; background: var(--ink); color: var(--mint); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; }
.rp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-main { flex: 1 1 auto; min-width: 0; }
.rp-main .dcard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rp-name { font-weight: 800; }
.rp-sub { color: var(--ink3); font-size: .84rem; margin-top: 2px; }
.rp-local { text-align: right; flex: 0 0 auto; }
.rp-pct { display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.1; color: #0C7A43; }
.rp-local-lbl { font-size: .7rem; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; }
.rp-local-na { display: block; font-size: .76rem; color: var(--ink3); max-width: 92px; }
.rp-plans { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 700px) { .rp-plans { grid-template-columns: repeat(3, 1fr); } }
.rp-plan { border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.rp-plan.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.rp-plan-name { font-weight: 800; }
.rp-plan-price { font-size: 1.4rem; font-weight: 800; margin-top: 4px; }

/* Creator excitement layer (2026-10-29): the founding stat card
   on the creator founding home. Ink field with a mint accent,
   the same tokens as the founding identity card; the city
   unlock meter reuses the shared .meter component above. */
.stat-card { background: #0B0D0C; color: #fff; border-radius: 18px; padding: 20px 22px; margin: 14px 0; }
.stat-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stat-brand { font-weight: 800; letter-spacing: .14em; }
.stat-name { font-size: 1.25rem; font-weight: 800; margin-top: 14px; }
.stat-handle { color: #A9E8C9; font-weight: 600; }
.stat-place { color: rgba(255, 255, 255, .62); font-size: .88rem; margin-top: 2px; }
.stat-big { font-size: 3rem; font-weight: 800; line-height: 1.05; margin-top: 14px; color: #A9E8C9; }
.stat-lbl { color: rgba(255, 255, 255, .62); font-size: .85rem; }
.stat-rank { font-size: 1.05rem; font-weight: 800; margin-top: 12px; }
.stat-sub { color: rgba(255, 255, 255, .72); font-size: .86rem; margin-top: 4px; }
.stat-actions { margin-top: 14px; }
.stat-actions .btn { background: #A9E8C9; border-color: #A9E8C9; color: #0B0D0C; font-weight: 700; }

/* Charter Creator card (BUILD -30, 2026-10-29): the founding
   artifact. Same ink field and mint as the stat card, with a
   circular seal in the top row, the handle as the headline, and
   the class named, never numbered. */
.charter-card { border: 1px solid #A9E8C9; box-shadow: 0 0 0 1px rgba(169, 232, 201, .25); }
.charter-seal { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border: 2px solid #A9E8C9; border-radius: 50%; color: #A9E8C9; font-weight: 800; font-size: .6rem; letter-spacing: .1em; line-height: 1.35; text-align: center; transform: rotate(-8deg); flex: none; }
.charter-handle { font-size: 1.7rem; font-weight: 800; margin-top: 16px; color: #fff; word-break: break-word; }
.charter-class { font-size: 1.05rem; font-weight: 800; color: #A9E8C9; margin-top: 6px; }
.charter-class-sub { color: rgba(255, 255, 255, .62); font-size: .88rem; margin-top: 2px; letter-spacing: .06em; text-transform: uppercase; }
.charter-scarcity { color: rgba(255, 255, 255, .78); font-size: .88rem; margin: 14px 0 0; }

/* ---------- Build -31 (2026-10-29): proximity, first month,
   book-me page, Charter perk ---------- */
.charter-perk { color: #A9E8C9; font-weight: 700; font-size: .95rem; margin: 10px 0 0; }
.charter-prompt { color: rgba(255, 255, 255, .78); font-size: .88rem; margin: 10px 0 0; }
.charter-seal.sm { width: auto; height: auto; border-radius: 999px; padding: 5px 12px; transform: none; font-size: .68rem; letter-spacing: .08em; }

.bookme-cover { display: flex; gap: 16px; align-items: center; padding: 22px; border-radius: 18px; background: #0B0D0C; color: #fff; }
.bookme.theme-mint .bookme-cover { background: #A9E8C9; color: #0B0D0C; }
.bookme.theme-deep .bookme-cover { background: #8FD3AC; color: #0B0D0C; }
.bookme.theme-pale .bookme-cover { background: #E3F5EA; color: #0B0D0C; }
.bookme.theme-mint .charter-seal.sm, .bookme.theme-deep .charter-seal.sm, .bookme.theme-pale .charter-seal.sm { border-color: #0B0D0C; color: #0B0D0C; }
.bookme-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.bookme-mono { width: 84px; height: 84px; border-radius: 50%; flex: none; }
.bookme-name { color: inherit; }
.bookme-handle { opacity: .75; font-size: .95rem; margin-top: 2px; }
.bookme-cover-id .charter-seal.sm { margin-top: 8px; }
.bookme-body { margin-top: 16px; }
.bookme-bio { font-size: 1rem; margin: 12px 0 0; }
.bookme-h { margin: 20px 0 10px; font-size: 1.05rem; }
.bookme-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bookme-embed iframe { width: 100%; height: 420px; border: 1px solid #DDE7DD; border-radius: 12px; background: #fff; }
.bookme-locked { border: 1.5px dashed #B9CDB9; background: #F4F7F4; border-radius: 12px; padding: 14px 16px; margin-top: 16px; color: #40513F; font-size: .92rem; }
.bookme-socials { margin-top: 4px; }
.bookme-channel { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid #DDE7DD; border-radius: 12px; margin-bottom: 8px; text-decoration: none; color: #0B0D0C; background: #FAFCFA; }
.bookme-channel-name { font-weight: 700; }
.bookme-channel-go { color: #0C7A43; font-weight: 700; font-size: .88rem; }
.bookme-message textarea { width: 100%; box-sizing: border-box; }

.fm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.fm-week { background: #F4F7F4; border: 1px solid #DDE7DD; border-radius: 12px; padding: 10px; min-height: 92px; }
.fm-week-h { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #40513F; margin-bottom: 8px; }
.fm-slot { background: #fff; border: 1px solid #A9E8C9; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.fm-slot:last-child { margin-bottom: 0; }
.fm-slot-cat { font-weight: 700; font-size: .9rem; }
.fm-slot-type { font-size: .8rem; color: #5B6B5B; }
@media (max-width: 560px) { .fm-grid { grid-template-columns: repeat(2, 1fr); } }

.band-group { margin-bottom: 22px; }
.band-h { font-size: 1.05rem; margin: 0 0 10px; }
.cc-chip.band { background: #0C7A43; color: #fff; }
.dcard-band { background: #0C7A43; color: #fff; border-radius: 999px; padding: 2px 9px; font-weight: 700; }

.msg-system { text-align: center; color: #5B6B5B; font-size: .83rem; background: #F4F7F4; border: 1px dashed #B9CDB9; border-radius: 10px; padding: 8px 12px; margin: 10px auto; max-width: 88%; }

/* ---------- ROAS presentation + credit panel (Build -43) ----------
   Visual numbers first: the giant score, in-vs-back bars, the
   counted-by-week chart, came-back segments, tap-to-expand rows.
   Tokens only: ink, mint, hairlines. */
.roas-big { font-size: 3.1rem; font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); }
.roas-big-label { font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.roas-score-top { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-top: 6px; }
.roas-score-side { flex: 1; min-width: 200px; padding-top: 20px; }
.roas-vs { margin-top: 12px; }
.roas-vs-row { margin-top: 10px; }
.roas-vs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .92rem; }
.roas-bar { display: block; height: 14px; border-radius: 999px; background: #EDF3ED; margin-top: 5px; overflow: hidden; }
.roas-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--mint); }
.roas-bar.ink > i { background: var(--ink); }
/* Build -43: stacked segment tracks for the versus bars. One
   track, several fills side by side; a new segment class is all
   a future component needs. */
.roas-bar.stack { display: flex; }
.roas-bar.stack > i { flex: none; border-radius: 0; }
.roas-bar.stack > i.counted { background: var(--mint); }
.roas-bar.stack > i.in { background: var(--ink); }
.roas-bar.stack > i.halo { background: #0C7A43; }
.roas-split { margin-top: 10px; }
.roas-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.roas-dot.counted { background: var(--mint); border: 1px solid #8FD3AC; }
.roas-dot.halo { background: #0C7A43; }
/* Build -43: the kv row (label left, value right) used by the
   points surfaces and the Golden Ticket panel. It shipped
   without a definition and rendered as run-on inline text
   ("signing up+100 points"); this is its first styling. */
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hairline, #DFE7DF); }
.kv:last-child { border-bottom: 0; }
.kv > span { flex: 1 1 auto; min-width: 0; }
.kv > b { flex: none; text-align: right; }
.roas-bar.slim { height: 8px; max-width: 280px; }
.roas-wks { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.roas-wk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.roas-wk-bar { width: 100%; max-width: 72px; background: var(--mint); border-radius: 6px 6px 0 0; }
.roas-wk-v { font-weight: 800; font-size: .8rem; color: var(--ink); white-space: nowrap; }
.roas-wk-l { font-size: .7rem; color: var(--ink3); font-weight: 700; text-align: center; }
.roas-seg { display: flex; gap: 3px; margin-top: 8px; }
.roas-seg > i { flex: 1; height: 10px; border-radius: 3px; background: #EDF3ED; }
.roas-seg > i.on { background: var(--mint-dot); }
.roas-month-cur { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
details.roas-x { border-top: 1px solid var(--line); padding: 8px 0; }
details.roas-x > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; row-gap: 2px; }
details.roas-x > summary::-webkit-details-marker { display: none; }
.roas-sum-v { text-align: right; }
.credit-step { display: flex; gap: 10px; margin-top: 10px; align-items: flex-start; }
.credit-n { width: 24px; height: 24px; border-radius: 999px; background: var(--mint); color: var(--ink); font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }

/* Build -53: Admin Stats sign-up board (Jeff, 2026-10-30) — one
   row per market, a two-segment bar (creators in the deep green,
   businesses in ink) sized against the biggest market, counts in
   plain words, state split as quiet sub-lines. Rows are buttons:
   they open Applications filtered to the market (or the unlisted
   city). .sb-filterbar is the queue's filter banner. */
.sb-row { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 12px 2px; cursor: pointer; font: inherit; color: inherit; }
.sb-row:hover { background: #F4F7F4; }
.sb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sb-total { font-weight: 800; white-space: nowrap; }
.sb-bar { display: flex; height: 10px; border-radius: 999px; background: #EDF3ED; overflow: hidden; margin: 8px 0 6px; }
.sb-seg { display: block; height: 100%; }
.sb-seg.sb-creators { background: #0C7A43; }
.sb-seg.sb-biz { background: var(--ink); }
.sb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 1px; vertical-align: baseline; }
.sb-dot.sb-creators { background: #0C7A43; }
.sb-dot.sb-biz { background: var(--ink); }
.sb-counts { display: block; font-weight: 700; font-size: .9rem; }
.sb-splits { display: block; margin-top: 2px; font-size: .8rem; color: var(--ink3); line-height: 1.55; }
.sb-filterbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }

/* Command Center (Build -54): the Stats shell's tiles, honesty
   chips, filter bar, attention strip, market blocks and launch
   gate. Same palette as the sign-up board above: mint is the
   hero accent, ink carries the numbers, chips carry the honesty
   classes and are never decoration. */
.cc-filters { margin-bottom: 12px; }
.cc-filter-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.cc-flabel { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; }
.cc-flabel select { font: inherit; text-transform: none; letter-spacing: 0; font-weight: 500; }
.cc-flabel.cc-check { flex-direction: row; align-items: center; gap: 6px; min-width: 170px; justify-content: flex-start; text-transform: none; letter-spacing: 0; font-size: .85rem; color: inherit; font-weight: 500; padding-bottom: 6px; }
.cc-flabel.cc-check input { width: auto; flex: none; margin: 0; }
.cc-legend { margin-top: 10px; font-size: .8rem; color: var(--ink3); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.cc-chip { display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.cc-chip.counted { background: #0C7A43; color: #fff; }
.cc-chip.recorded { background: var(--ink); color: #fff; }
.cc-chip.charged { background: #7A4FD0; color: #fff; }
.cc-chip.modeled { background: #E8E2D2; color: #6B5E33; }
.cc-chip.live { background: var(--mint); color: var(--black); }
.cc-chip.cc-ready { background: var(--mint); color: var(--ink); }
.cc-chip.cc-blocked { background: #B3261E; color: #fff; }
.cc-recon-items { margin: 2px 0 8px; border-top: 1px dashed var(--line); }
.cc-recon-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0 5px 14px; border-bottom: 1px dashed var(--line); font-size: .86rem; }
.cc-recon-amt { font-weight: 800; white-space: nowrap; }
.cc-sel-row { background: #F4F7F4; }
.cc-chip.founding { background: #EDF3ED; color: var(--ink3); }
.cc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cc-tile { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #fff; }
.cc-tile.cc-hero { background: var(--mint-pale); border-color: var(--mint-soft); }
.cc-tile.forming { background: #FAFBFA; }
.cc-tlabel { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); }
.cc-tnum { font-size: 2rem; font-weight: 800; line-height: 1.15; }
.cc-tform { font-size: 1.05rem; font-weight: 700; color: var(--ink3); line-height: 1.5; }
.cc-tsub { font-size: .8rem; color: var(--ink3); line-height: 1.45; }
.cc-attention { margin-bottom: 12px; }
.cc-att-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.cc-att-row .btn { flex-shrink: 0; }
.cc-waiting { margin-bottom: 12px; }
.cc-market { margin-bottom: 12px; }
.cc-mhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 1.02rem; }
.cc-gate { display: flex; gap: 10px; align-items: center; }
.cc-gatebar { display: block; flex: 0 0 180px; height: 10px; border-radius: 999px; background: #EDF3ED; overflow: hidden; }
.cc-gatebar i { display: block; height: 100%; background: #0C7A43; }
.cc-unlisted-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.cc-unlisted-n { text-align: right; font-weight: 700; white-space: nowrap; }
.cc-form-rows p { margin: 0 0 8px; font-size: .9rem; line-height: 1.55; }
@media (max-width: 560px) {
  .cc-tiles { grid-template-columns: 1fr 1fr; }
  .cc-gate { flex-wrap: wrap; }
  .cc-gatebar { flex-basis: 100%; }
  .cc-unlisted-row { flex-direction: column; }
  .cc-unlisted-n { text-align: left; }
}
/* Command Center Money + Businesses (Build -55): class-table
   total rows and the quarantined Modeled panel — dashed and
   warm-toned so an estimate can never be mistaken for a total. */
.cc-total-row td { border-top: 2px solid var(--line); }
.cc-modeled-panel { border-style: dashed; background: #FBF9F1; }
@media (max-width: 560px) {
  /* Attention/reconciliation rows stack at phone width instead
     of squeezing the sentence into a one-word column beside the
     button (found in the -55 render pass; the Overview strip
     uses the same row). */
  .cc-att-row { flex-wrap: wrap; }
  .cc-att-row .btn { margin-top: 2px; }
}
/* Command Center Partners (Build -56): at phone width the tile
   grid goes single-column — a 2rem money figure ("$31,661.5")
   cannot fit a half-width tile beside the rail, and the -54
   two-column rule clipped the second column's numbers without
   ever overflowing the page, so the scrollWidth check could not
   see it (found in the -56 render pass, partner detail at 390).
   Applies to every Command Center view's tiles: one stack,
   nothing cut. */
@media (max-width: 560px) {
  .cc-tiles { grid-template-columns: 1fr; }
  /* The split bar stacks its two sides full-width: side by side
     at phone width, the mint side's label was clipped mid-figure
     by the black side (same render pass). */
  .cc-splitbar { flex-direction: column; height: auto !important; }
  .cc-splitbar > div { width: 100% !important; padding-top: 7px !important; padding-bottom: 7px !important; }
}