/* Get Found by LeaderRoll: design system and screens.
   Mobile first. No external fonts or images (CSP: 'self' only). */

:root {
  --navy: #0F172A;
  --navy-2: #1E1B4B;
  --indigo: #4F46E5;
  --indigo-600: #4338CA;
  --indigo-300: #A5B4FC;
  --indigo-100: #E0E7FF;
  --indigo-50: #EEF2FF;
  --gold: #D9A441;
  --gold-600: #B7862E;
  --gold-700: #7A5410;
  --gold-50: #FBF5E6;
  --emerald: #10B981;
  --emerald-700: #047857;
  --emerald-50: #ECFDF5;
  --orange: #F59E0B;
  --orange-700: #B45309;
  --orange-50: #FFFBEB;
  --rose: #E11D48;
  --rose-700: #BE123C;
  --rose-50: #FFF1F2;
  --sky: #0EA5E9;
  --violet: #7C3AED;
  --teal: #0D9488;
  --slate: #475569;
  --slate-700: #334155;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --line: #E2E8F0;
  --line-soft: #EEF2F7;
  --bg: #F8FAFC;
  --card: #FFFFFF;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .06);
  --shadow-lg: 0 10px 40px rgba(15, 23, 42, .16);
  --focus: 0 0 0 3px rgba(79, 70, 229, .40);

  --font: "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --tabbar-h: 64px;
  --topbar-h: 56px;
  --sidebar-w: 264px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 26px; font-weight: 750; letter-spacing: -.02em; }
h2 { font-size: 19px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 650; }
h4 { font-size: 14px; font-weight: 650; }
p { margin: 0; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
strong, b { color: var(--navy); font-weight: 650; }
small { font-size: 13px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
code, pre, kbd { font-family: var(--mono); font-size: 13px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus); border-radius: 10px; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--slate-500); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }
.strong { color: var(--navy); font-weight: 650; }
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff;
  padding: 10px 14px; border-radius: 10px; font-weight: 600;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ------------------------------------------------------------------ app shell */
.app { min-height: 100vh; min-height: 100dvh; }
.shell { min-height: 100vh; min-height: 100dvh; }
.main {
  padding: calc(var(--topbar-h) + 16px) 16px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));
  max-width: 1180px; margin: 0 auto;
}
.main:focus { box-shadow: none; }
.shell--public .main { padding: 0; max-width: none; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 30;
  display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px;
  background: rgba(248, 250, 252, .88); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, .7);
}
.topbar__title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.topbar__name { color: var(--navy); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__by { font-size: 11.5px; color: var(--slate-500); letter-spacing: .02em; }
.topbar .btn--icon { flex: none; }

.brandmark {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--indigo) 0%, #6D5BF6 55%, var(--gold) 140%); color: #fff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .35);
}
.brandmark svg { width: 20px; height: 20px; }

.sidebar { display: none; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); box-shadow: 0 -4px 24px rgba(15, 23, 42, .05);
}
.tabbar__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; color: var(--slate-500); font-size: 11.5px; font-weight: 600; text-decoration: none;
  transition: color .15s;
}
.tabbar__item:hover { text-decoration: none; color: var(--navy); }
.tabbar__item svg { width: 24px; height: 24px; }
.tabbar__item[aria-current="page"] { color: var(--indigo); }
.tabbar__item[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--indigo);
}
.tabbar__badge, .nav__badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rose); color: #fff;
  font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tabbar__badge { position: absolute; top: 6px; left: calc(50% + 6px); box-shadow: 0 0 0 2px #fff; }

@media (min-width: 1024px) {
  .shell--nav { display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
  .topbar, .tabbar { display: none; }
  .shell--nav .main { padding: 36px 40px 64px; width: 100%; }
  .sidebar {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: #fff; border-right: 1px solid var(--line); padding: 20px 14px;
  }
}
.sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.sidebar__brand b { display: block; font-size: 17px; color: var(--navy); letter-spacing: -.01em; }
.sidebar__brand small { display: block; color: var(--slate-500); font-size: 12px; line-height: 1.2; }
.sidebar__tenant { margin: 0 4px 14px; }
.sidebar__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.nav { display: grid; gap: 2px; }
.nav__section { font-size: 11.5px; font-weight: 700; color: var(--slate-500); letter-spacing: .08em; text-transform: uppercase; padding: 14px 12px 6px; }
.nav__item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px;
  color: var(--slate-700); font-weight: 560; text-decoration: none; transition: background .15s, color .15s;
}
.nav__item svg { width: 20px; height: 20px; color: var(--slate-400); flex: none; transition: color .15s; }
.nav__item:hover { background: var(--bg); text-decoration: none; color: var(--navy); }
.nav__item[aria-current="page"] { background: var(--indigo-50); color: var(--indigo-600); }
.nav__item[aria-current="page"] svg { color: var(--indigo); }
.nav__item .nav__badge { margin-left: auto; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; min-width: 0; }
.user-chip__text { min-width: 0; line-height: 1.25; }
.user-chip__text b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip__text small { display: block; color: var(--slate-500); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.op-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between;
  background: var(--navy); color: #E2E8F0; border-radius: 12px; padding: 10px 14px; margin-bottom: 18px; font-size: 14px;
}
.op-banner b { color: #fff; }
.op-banner a { color: var(--indigo-300); font-weight: 600; }

/* ------------------------------------------------------------------ page */
.page { display: grid; gap: 18px; animation: page-in .28s var(--ease) both; min-width: 0; }
.page--static { animation: none; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { box-shadow: none; }
.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
.page__head > div { min-width: 0; }
.page__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700); margin-bottom: 6px; }
.page__sub { margin-top: 6px; color: var(--slate); max-width: 62ch; }
.page__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 2px -4px; }
.section-title h2 { font-size: 17px; }

.grid { display: grid; gap: 16px; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stack { display: grid; gap: 12px; }
.stack--lg { gap: 18px; }
.stack--sm { gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.row--top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.cluster { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* today layout */
.today { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .today { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .today__main, .today__side { display: grid; gap: 16px; }
  .today__full { grid-column: 1 / -1; }
}
@media (max-width: 1023px) { .today__main, .today__side { display: contents; } }

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid rgba(226, 232, 240, .6); padding: 18px; min-width: 0;
}
@media (min-width: 720px) { .card { padding: 22px; } }
.card--flat { box-shadow: none; border: 1px solid var(--line); }
.card--tight { padding: 14px; }
.card--link { display: block; color: inherit; text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s; }
.card--link:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 12px 28px rgba(15,23,42,.09); }
.card__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 14px; }
.card__head h2, .card__head h3 { display: flex; align-items: center; gap: 8px; }
.card__head .muted { font-size: 13.5px; }
.card__title-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-50); color: var(--indigo); flex: none; }
.card__title-icon svg { width: 18px; height: 18px; }
.card__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.card + .card { margin-top: 0; }
.divider { height: 1px; background: var(--line-soft); margin: 14px 0; }

/* hero score card */
.hero {
  position: relative; overflow: hidden; color: #CBD5E1; border: 0;
  background: radial-gradient(120% 140% at 100% 0%, #312E81 0%, rgba(49,46,129,0) 55%), linear-gradient(160deg, #0F172A 0%, #1E1B4B 100%);
  box-shadow: 0 12px 36px rgba(15, 23, 42, .25);
}
.hero::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,164,65,.20), rgba(217,164,65,0) 70%); pointer-events: none;
}
.hero h2, .hero h3, .hero strong, .hero b { color: #fff; }
.hero .muted { color: #CBD5E1; }
.hero__top { display: flex; gap: 18px; align-items: center; }
.hero__meta { min-width: 0; display: grid; gap: 6px; }
.hero__label { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.hero__band { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.hero__value { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: 14px; color: #E2E8F0; display: flex; gap: 10px; align-items: flex-start; }
.hero__value svg { color: var(--gold); flex: none; width: 20px; height: 20px; margin-top: 1px; }

/* score ring */
.ring { position: relative; width: 132px; height: 132px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ring__track { fill: none; stroke: rgba(255, 255, 255, .12); }
.ring--light .ring__track { stroke: var(--line); }
.ring__value { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.ring__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring__num { font-size: 40px; font-weight: 780; color: #fff; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ring--light .ring__num { color: var(--navy); }
.ring__of { font-size: 12px; color: #CBD5E1; margin-top: 2px; }
.ring--light .ring__of { color: var(--slate-500); }
.ring--sm { width: 96px; height: 96px; }
.ring--sm .ring__num { font-size: 30px; }

.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.delta svg { width: 14px; height: 14px; }
.delta--up { background: rgba(16, 185, 129, .16); color: #34D399; }
.delta--down { background: rgba(225, 29, 72, .16); color: #FDA4AF; }
.delta--flat { background: rgba(148, 163, 184, .18); color: #CBD5E1; }
.card:not(.hero) .delta--up { background: var(--emerald-50); color: var(--emerald-700); }
.card:not(.hero) .delta--down { background: var(--rose-50); color: var(--rose-700); }
.card:not(.hero) .delta--flat { background: #F1F5F9; color: var(--slate-700); }

/* component bars */
.bars { display: grid; gap: 12px; margin-top: 18px; }
.bar { display: grid; gap: 6px; }
.bar__top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.bar__label { color: #E2E8F0; font-weight: 560; }
.bar__val { color: #CBD5E1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar__val b { color: #fff; }
.bar__track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .10); overflow: hidden; }
.bar__fill { height: 100%; border-radius: inherit; width: 0; background: linear-gradient(90deg, #818CF8, #A5B4FC); transition: width 1s var(--ease); }
.bar__fill--gold { background: linear-gradient(90deg, #C79233, #E9C67A); }
.bars--light .bar__label { color: var(--navy); }
.bars--light .bar__val { color: var(--slate-500); }
.bars--light .bar__val b { color: var(--navy); }
.bars--light .bar__track { background: #EEF2F7; }
.bars--light .bar__fill { background: linear-gradient(90deg, var(--indigo), #818CF8); }
.bar__fill--emerald { background: linear-gradient(90deg, #059669, #34D399) !important; }
.bar__fill--rose { background: linear-gradient(90deg, #E11D48, #FB7185) !important; }
.bar__fill--slate { background: linear-gradient(90deg, #94A3B8, #CBD5E1) !important; }

/* fixes */
.fixes { display: grid; gap: 10px; }
.fix { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-soft); }
.fix__icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--gold-50); color: var(--gold-600); }
.fix__icon svg { width: 17px; height: 17px; }
.fix__body { min-width: 0; flex: 1; }
.fix__title { color: var(--navy); font-weight: 620; font-size: 15px; }
.fix__why { font-size: 14px; margin-top: 2px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  -webkit-appearance: none; appearance: none; border: 1px solid transparent; border-radius: 12px;
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 620; font-size: 15px; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .08s, box-shadow .15s; user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn--primary { background: var(--indigo); color: #fff; box-shadow: 0 1px 2px rgba(79, 70, 229, .3), inset 0 1px 0 rgba(255,255,255,.12); }
.btn--primary:hover { background: var(--indigo-600); }
.btn--secondary { background: #fff; color: var(--navy); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--secondary:hover { border-color: var(--slate-300); background: #FCFDFE; }
.btn--ghost { background: transparent; color: var(--slate-700); }
.btn--ghost:hover { background: #EEF2F7; color: var(--navy); }
.btn--success { background: var(--emerald); color: var(--navy); }
.btn--success:hover { background: #0EA371; }
.btn--danger { background: #fff; color: var(--rose-700); border-color: #FECDD3; }
.btn--danger:hover { background: var(--rose-50); }
.btn--danger-solid { background: var(--rose); color: #fff; }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: #CF9A35; }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: #1E293B; }
.btn--sm { min-height: 44px; padding: 0 14px; font-size: 14.5px; border-radius: 11px; }
.btn--lg { min-height: 54px; padding: 0 22px; font-size: 16.5px; border-radius: 14px; }
.btn--block { width: 100%; }
.btn--icon { width: 44px; padding: 0; }
.btn--icon.btn--sm { width: 44px; }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy svg { opacity: 0; }
.btn.is-busy::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-color: rgba(255,255,255,.9) rgba(255,255,255,.9) rgba(255,255,255,.25) rgba(255,255,255,.25);
  animation: spin .7s linear infinite;
}
.btn--secondary.is-busy::after, .btn--ghost.is-busy::after, .btn--danger.is-busy::after, .btn--gold.is-busy::after, .btn--success.is-busy::after {
  border-color: var(--slate-500) var(--slate-500) var(--line) var(--line);
}
@keyframes spin { to { transform: rotate(360deg); } }
.link-btn { background: none; border: 0; padding: 0; color: var(--indigo-600); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { text-decoration: underline; }
.link-btn svg { width: 16px; height: 16px; }

/* the big "We have an opening" button */
.cta-opening {
  width: 100%; border: 0; border-radius: 20px; padding: 18px 18px; text-align: left; display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #E7B95A 0%, var(--gold) 45%, #C99330 100%); color: var(--navy);
  box-shadow: 0 8px 24px rgba(217, 164, 65, .35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s var(--ease), box-shadow .2s;
  min-height: 84px;
}
.cta-opening:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(217, 164, 65, .42), inset 0 1px 0 rgba(255,255,255,.35); }
.cta-opening:active { transform: scale(.985); }
.cta-opening__icon { width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .9); display: grid; place-items: center; flex: none; color: var(--gold-700); box-shadow: 0 2px 8px rgba(122,84,16,.18); }
.cta-opening__icon svg { width: 28px; height: 28px; }
.cta-opening__text { flex: 1; min-width: 0; }
.cta-opening__title { display: block; font-size: 19px; font-weight: 780; letter-spacing: -.01em; }
.cta-opening__sub { display: block; font-size: 14px; color: #3B2A08; margin-top: 2px; }
.cta-opening__arrow svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ pills, tags, badges */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650;
  background: #F1F5F9; color: var(--slate-700); white-space: nowrap; line-height: 1.5;
}
.pill svg { width: 14px; height: 14px; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--emerald { background: var(--emerald-50); color: var(--emerald-700); }
.pill--gold { background: var(--gold-50); color: var(--gold-700); }
.pill--rose { background: var(--rose-50); color: var(--rose-700); }
.pill--orange { background: var(--orange-50); color: var(--orange-700); }
.pill--indigo { background: var(--indigo-50); color: var(--indigo-600); }
.pill--navy { background: var(--navy); color: #fff; }
.pill--outline { background: #fff; border: 1px solid var(--line); }
.tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; background: #F1F5F9; color: var(--slate-700); vertical-align: middle; white-space: nowrap; }
.tag--chain { background: #FFF7ED; color: #9A3412; border: 1px solid #FED7AA; }
.tag--you { background: var(--indigo); color: #fff; }
.tag--demo { background: var(--gold-50); color: var(--gold-700); border: 1px solid #F1DDAE; }
.tag--home { background: #F0FDFA; color: #0F766E; }
.tag--center { background: #EFF6FF; color: #1D4ED8; }

/* ------------------------------------------------------------------ forms */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field__label { font-size: 14px; font-weight: 640; color: var(--navy); }
.field__label .opt { font-weight: 500; color: var(--slate-500); }
.field__hint { font-size: 13px; color: var(--slate-500); }
.field__error { font-size: 13px; color: var(--rose-700); font-weight: 560; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--slate-300);
  background: #fff; color: var(--navy); font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--slate-500); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate-400); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--indigo); box-shadow: var(--focus); outline: none; }
.input[aria-invalid="true"] { border-color: var(--rose); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.select { -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate-500) 50%), linear-gradient(135deg, var(--slate-500) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.input--sm, .select--sm { min-height: 40px; padding: 8px 12px; font-size: 15px; border-radius: 10px; }
.form-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.char-count { font-size: 12.5px; color: var(--slate-500); text-align: right; font-variant-numeric: tabular-nums; }
.char-count.is-over { color: var(--rose-700); font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--slate-700); font-weight: 600; font-size: 14.5px;
  transition: background .15s, color .15s, border-color .15s;
}
.chip { white-space: nowrap; }
.chips--scroll > .chip { flex-shrink: 0; }   /* in a sideways-scrolling row, chips keep their size instead of squashing */
.chip:hover { border-color: var(--slate-300); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip svg { width: 16px; height: 16px; }
.chip--add { border-style: dashed; color: var(--indigo); }
.chip__x { margin-right: -6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(15,23,42,.06); border: 0; color: inherit; padding: 0; }
.chip__x svg { width: 12px; height: 12px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.chips--scroll::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .chips--scroll { flex-wrap: wrap; margin: 0; padding: 0; } }

.tags-input { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid var(--slate-300); border-radius: 12px; background: #fff; min-height: 48px; align-items: center; }
.tags-input:focus-within { border-color: var(--indigo); box-shadow: var(--focus); }
.tags-input .chip { min-height: 32px; font-size: 14px; padding: 0 10px; background: var(--indigo-50); border-color: transparent; color: var(--indigo-600); }
.tags-input input { border: 0; flex: 1; min-width: 120px; min-height: 34px; padding: 4px 8px; outline: none; font-size: 16px; background: transparent; }

.switch { position: relative; display: inline-flex; align-items: center; flex: none; width: 52px; height: 44px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch__track { width: 52px; height: 32px; border-radius: 999px; background: var(--slate-300); transition: background .2s; position: relative; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); transition: transform .2s var(--ease); }
.switch input:checked + .switch__track { background: var(--emerald); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus); }
.switch input:disabled + .switch__track { opacity: .5; }

.radio-cards { display: grid; gap: 10px; }
.radio-card { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.radio-card:hover { border-color: var(--slate-300); }
.radio-card input { margin: 3px 0 0; width: 20px; height: 20px; accent-color: var(--indigo); flex: none; }
.radio-card:has(input:checked) { border-color: var(--indigo); background: var(--indigo-50); }
.radio-card__title { display: block; color: var(--navy); font-weight: 650; }
.radio-card__text { display: block; font-size: 14px; margin-top: 2px; }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--indigo); flex: none; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--slate-300); border-radius: 14px; overflow: hidden; background: #fff; }
.stepper button { width: 52px; height: 52px; border: 0; background: #fff; color: var(--navy); display: grid; place-items: center; }
.stepper button:hover { background: var(--bg); }
.stepper button svg { width: 20px; height: 20px; }
.stepper output { min-width: 56px; text-align: center; font-size: 22px; font-weight: 750; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ stats / KPIs */
.stat { display: grid; gap: 4px; }
.stat__label { font-size: 13.5px; color: var(--slate-500); font-weight: 560; }
.stat__value { font-size: 28px; font-weight: 760; color: var(--navy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat__value small { font-size: 15px; font-weight: 600; color: var(--slate-500); letter-spacing: 0; }
.stat__text { font-size: 14px; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi { background: #fff; border-radius: var(--radius); border: 1px solid rgba(226,232,240,.7); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 6px; min-width: 0; }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-50); color: var(--indigo); }
.kpi__icon svg { width: 18px; height: 18px; }
.kpi__icon--emerald { background: var(--emerald-50); color: var(--emerald-700); }
.kpi__icon--gold { background: var(--gold-50); color: var(--gold-600); }
.kpi__icon--rose { background: var(--rose-50); color: var(--rose-700); }
.kpi__value { font-size: 26px; font-weight: 760; color: var(--navy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi__label { font-size: 13.5px; color: var(--slate-500); font-weight: 560; }
.kpi__sub { font-size: 13px; color: var(--slate-500); }

.quick { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quick .card { display: grid; gap: 8px; align-content: start; }
.quick__icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; }
.quick__icon svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------------ lists and tables */
.list { list-style: none; margin: 0; padding: 0; display: grid; }
.list__item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.list__item:first-child { padding-top: 0; }
.list__icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--bg); color: var(--slate-500); }
.list__icon svg { width: 18px; height: 18px; }
.list__body { flex: 1; min-width: 0; }
.list__title { color: var(--navy); font-weight: 600; font-size: 15px; }
.list__text { font-size: 14px; color: var(--slate); }
.list__meta { font-size: 13px; color: var(--slate-500); }
.wins .list__icon { background: var(--emerald-50); color: var(--emerald-700); }

.table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
@media (min-width: 720px) { .table-wrap { margin: 0 -22px; padding: 0 22px; } }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: .06em; padding: 0 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tr.is-self td { background: var(--indigo-50); }
.table tr.is-self td:first-child { box-shadow: inset 3px 0 0 var(--indigo); padding-left: 10px; }
.table tbody tr { transition: background .12s; }
.table--hover tbody tr:hover td { background: #FBFCFE; }
.cell-title { color: var(--navy); font-weight: 620; }
.cell-sub { font-size: 13px; color: var(--slate-500); }
.mini-bar { height: 6px; border-radius: 999px; background: #EEF2F7; overflow: hidden; min-width: 60px; }
.mini-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--indigo); }
.mini-bar--over > span { background: var(--rose); }
.mini-bar--warn > span { background: var(--orange); }

/* mobile card rows for wide tables */
.rows { display: grid; gap: 10px; }
.row-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px; }
.only-wide { display: none; }
@media (min-width: 900px) { .only-wide { display: block; } .only-narrow { display: none; } }

/* ------------------------------------------------------------------ alerts, empty, skeleton */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--indigo-50); color: var(--slate-700); border: 1px solid var(--indigo-100); }
.alert > svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--indigo); }
.alert__body { flex: 1; min-width: 0; font-size: 15px; }
.alert__body b { display: block; margin-bottom: 2px; }
.alert--rose { background: var(--rose-50); border-color: #FECDD3; }
.alert--rose > svg { color: var(--rose); }
.alert--gold { background: var(--gold-50); border-color: #F1DDAE; }
.alert--gold > svg { color: var(--gold-600); }
.alert--emerald { background: var(--emerald-50); border-color: #A7F3D0; }
.alert--emerald > svg { color: var(--emerald-700); }

.empty { text-align: center; padding: 28px 16px; display: grid; justify-items: center; gap: 8px; }
.empty__art { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, var(--indigo-50), #F5F3FF); color: var(--indigo); margin-bottom: 6px; }
.empty__art svg { width: 34px; height: 34px; }
.empty__art--emerald { background: linear-gradient(135deg, var(--emerald-50), #F0FDF4); color: var(--emerald-700); }
.empty__art--gold { background: linear-gradient(135deg, var(--gold-50), #FFFBEB); color: var(--gold-600); }
.empty__title { color: var(--navy); font-weight: 700; font-size: 17px; }
.empty__text { max-width: 44ch; font-size: 15px; }
.empty .btn { margin-top: 8px; }

.skeleton { display: grid; gap: 16px; }
.sk { position: relative; overflow: hidden; background: #EDF1F6; border-radius: 10px; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-line { height: 14px; }
.sk-line--lg { height: 26px; width: 45%; }
.sk-line--md { width: 70%; }
.sk-line--sm { width: 35%; }
.sk-block { height: 120px; border-radius: var(--radius); }
.sk-circle { width: 120px; height: 120px; border-radius: 50%; }
.sk-card { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.sk-hero { background: linear-gradient(160deg, #1B2337, #241F4F); border-radius: var(--radius); padding: 22px; display: flex; gap: 18px; align-items: center; }
.sk-hero .sk { background: rgba(255,255,255,.08); }
.sk-hero .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }

/* ------------------------------------------------------------------ toasts */
.toasts { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
@media (min-width: 1024px) { .toasts { left: auto; right: 24px; bottom: 24px; justify-items: end; } }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 520px; width: max-content; max-width: min(520px, 100%);
  background: var(--navy); color: #F1F5F9; border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-lg); font-size: 15px;
  animation: toast-in .25s var(--ease) both;
}
.toast > svg { width: 20px; height: 20px; flex: none; }
.toast--success > svg { color: #34D399; }
.toast--error { background: #4C0519; }
.toast--error > svg { color: #FDA4AF; }
.toast--info > svg { color: var(--indigo-300); }
.toast__msg { flex: 1; min-width: 0; }
.toast__action { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; padding: 0 16px; min-height: 44px; font-weight: 700; font-size: 15px; flex: none; }
.toast__action:hover { background: rgba(255,255,255,.2); }
.toast.is-leaving { animation: toast-out .2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------------------ bottom sheet / modal */
.sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); animation: fade-in .2s ease both; }
.sheet__panel {
  position: relative; width: 100%; max-height: 92vh; max-height: 92dvh; background: #fff; border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: sheet-up .32s var(--ease) both;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet__grip { width: 40px; height: 5px; border-radius: 99px; background: var(--slate-300); margin: 8px auto 0; flex: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 10px; flex: none; }
.sheet__head h2 { font-size: 20px; }
.sheet__body { padding: 4px 18px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
.sheet__foot { padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); display: flex; gap: 10px; flex: none; background: #fff; border-radius: 0 0 22px 22px; }
.sheet__foot .btn { flex: 1; }
.sheet.is-closing .sheet__panel { animation: sheet-down .22s ease forwards; }
.sheet.is-closing .sheet__backdrop { animation: fade-out .22s ease forwards; }
@media (min-width: 720px) {
  .sheet { align-items: center; padding: 24px; }
  .sheet__panel { max-width: 560px; border-radius: 22px; animation: pop-in .24s var(--ease) both; max-height: 88vh; }
  .sheet__panel--wide { max-width: 820px; }
  .sheet__grip { display: none; }
  .sheet__head { padding-top: 20px; }
  .sheet.is-closing .sheet__panel { animation: pop-out .18s ease forwards; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pop-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
body.has-sheet { overflow: hidden; }

/* ------------------------------------------------------------------ avatars (team personas) */
.avatar {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 750; font-size: 14px; letter-spacing: -.01em; background: var(--indigo);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.avatar--sm { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
.avatar--lg { width: 52px; height: 52px; border-radius: 16px; font-size: 18px; }
.avatar--round { border-radius: 50%; }
.avatar--user { background: linear-gradient(135deg, #334155, #0F172A); }
.av-sage { background: linear-gradient(135deg, #34D399, #059669); }
.av-pixel { background: linear-gradient(135deg, #38BDF8, #0284C7); }
.av-atlas { background: linear-gradient(135deg, #818CF8, #4F46E5); }
.av-scout { background: linear-gradient(135deg, #FB923C, #EA580C); }
.av-compass { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.av-relay { background: linear-gradient(135deg, #2DD4BF, #0D9488); }
.av-beacon { background: linear-gradient(135deg, #FBBF24, #D97706); color: var(--navy); }
.av-quill { background: linear-gradient(135deg, #F472B6, #DB2777); }
.av-harbor { background: linear-gradient(135deg, #60A5FA, #1D4ED8); }
.av-spotlight { background: linear-gradient(135deg, #E9C67A, #D9A441); color: var(--navy); }
.av-echo { background: linear-gradient(135deg, #C084FC, #9333EA); }
.av-coach { background: linear-gradient(135deg, #475569, #0F172A); }
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -8px; box-shadow: 0 0 0 2px #fff; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ------------------------------------------------------------------ approvals */
.approvals { display: grid; gap: 16px; }
.approval { display: grid; gap: 14px; transition: transform .38s var(--ease), opacity .3s ease, max-height .35s ease .2s, margin .35s ease .2s, padding .35s ease .2s; max-height: 4000px; }
.approval.is-leaving { transform: translateX(110%); opacity: 0; }
.approval.is-leaving--left { transform: translateX(-110%); }
.approval.is-collapsing { max-height: 0 !important; padding-top: 0; padding-bottom: 0; margin-top: -16px; border-width: 0; overflow: hidden; }
.approval__head { display: flex; gap: 12px; align-items: flex-start; }
.approval__who { flex: 1; min-width: 0; }
.approval__who b { font-size: 14.5px; }
.approval__who .muted { font-size: 13px; display: block; }
.approval__title { font-size: 17px; font-weight: 700; color: var(--navy); }
.approval__summary { font-size: 15px; margin-top: 4px; }
.approval__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.approval__actions .btn--primary { flex: 1 1 160px; }
@media (min-width: 720px) { .approval__actions .btn--primary { flex: 0 0 auto; min-width: 140px; } }
.approval__tenant { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--indigo-600); background: var(--indigo-50); padding: 3px 10px; border-radius: 999px; }
.approval__edit { display: grid; gap: 8px; }
.why { font-size: 14px; background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.why summary { cursor: pointer; font-weight: 640; color: var(--navy); list-style: none; display: flex; align-items: center; gap: 6px; min-height: 44px; }
.why summary::-webkit-details-marker { display: none; }
.why summary svg { width: 16px; height: 16px; transition: transform .2s; }
.why[open] summary svg { transform: rotate(90deg); }
.why p { margin-top: 6px; }
.guard { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.guard li { display: flex; gap: 8px; align-items: flex-start; }
.guard li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.guard__ok svg { color: var(--emerald); }
.guard__warn { color: var(--orange-700); font-weight: 560; }
.guard__warn svg { color: var(--orange); }
.mini-approval { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); transition: transform .35s var(--ease), opacity .3s; }
.mini-approval:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-approval.is-leaving { transform: translateX(60px); opacity: 0; }
.mini-approval__body { flex: 1; min-width: 0; }
.mini-approval__title { color: var(--navy); font-weight: 620; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* previews */
.preview { border-radius: 14px; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.preview__label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-500); padding: 9px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.preview__label svg { width: 14px; height: 14px; }
.preview__body { padding: 14px; }
.gpost__head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.gpost__logo { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #E9C67A); color: var(--navy); display: grid; place-items: center; font-weight: 800; flex: none; }
.gpost__name { color: #202124; font-weight: 650; font-size: 14.5px; line-height: 1.2; }
.gpost__sub { color: #5F6368; font-size: 12.5px; }
.gpost__media { border-radius: 10px; overflow: hidden; margin-bottom: 10px; aspect-ratio: 16/9; background: var(--bg); }
.gpost__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gpost__text { color: #202124; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.gpost__cta { display: inline-flex; margin-top: 12px; color: #1A73E8; font-weight: 650; font-size: 14.5px; border: 1px solid #DADCE0; border-radius: 999px; padding: 7px 16px; }
.gpost__event { margin-bottom: 8px; color: #202124; font-weight: 650; }
.fbpost__head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.fbpost__logo { width: 38px; height: 38px; border-radius: 50%; background: #1877F2; color: #fff; display: grid; place-items: center; font-weight: 800; }
.fbpost__text { color: #050505; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fbpost__bar { display: flex; justify-content: space-around; border-top: 1px solid #E4E6EB; margin-top: 12px; padding-top: 8px; color: #65676B; font-weight: 600; font-size: 13.5px; }
.review { display: grid; gap: 6px; }
.review__head { display: flex; gap: 10px; align-items: center; }
.review__avatar { width: 34px; height: 34px; border-radius: 50%; background: #E8EAED; color: #3C4043; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.review__author { color: var(--navy); font-weight: 640; font-size: 14.5px; }
.review__text { font-size: 15px; color: var(--slate-700); overflow-wrap: anywhere; }
.reply { margin-top: 10px; margin-left: 14px; padding: 12px 14px; background: var(--bg); border-radius: 12px; border-left: 3px solid var(--indigo); }
.reply__label { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.reply__text { font-size: 15px; color: var(--slate-700); white-space: pre-wrap; overflow-wrap: anywhere; }
.stars { display: inline-flex; gap: 1px; color: #FBBC04; vertical-align: middle; }
.stars svg { width: 15px; height: 15px; }
.stars .is-off { color: #DADCE0; }
.diff { font-size: 15px; line-height: 1.65; color: var(--slate-700); overflow-wrap: anywhere; }
.diff ins, .tiny ins { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; background: #D1FAE5; color: #065F46; border-radius: 4px; padding: 0 2px; }
.diff del, .tiny del { text-decoration: line-through; text-decoration-thickness: 2px; background: #FFE4E6; color: #9F1239; border-radius: 4px; padding: 0 2px; }
.diff del::before, .diff ins::before { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.diff del::before { content: " [taken out: "; }
.diff ins::before { content: " [added: "; }
.diff-cols { display: grid; gap: 10px; }
.diff-col { border-radius: 12px; padding: 12px; font-size: 14.5px; }
.diff-col--before { background: #FFF5F6; color: #6B1F2E; }
.diff-col--after { background: #F0FDF7; color: #064E3B; }
.diff-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; color: inherit; opacity: .8; }
.kv { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 8px 14px; font-size: 14.5px; margin: 0; }
.kv dt { color: var(--slate-500); font-weight: 560; }
.kv dd { margin: 0; color: var(--navy); overflow-wrap: anywhere; }
.changes { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.changes th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); padding: 0 8px 8px 0; }
.changes td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line-soft); vertical-align: top; overflow-wrap: anywhere; }
.changes .before { color: #9F1239; text-decoration: line-through; text-decoration-color: rgba(159,18,57,.4); }
.changes .after { color: #065F46; font-weight: 600; }
.changes tr.is-changed td { background: #FAFFFC; }
.services { display: grid; gap: 8px; }
.service { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.service svg { width: 18px; height: 18px; color: var(--emerald); flex: none; margin-top: 2px; }
.service b { display: block; font-size: 14.5px; }
.service small { color: var(--slate-500); }
.service--old { opacity: .65; }
.service--old svg { color: var(--slate-400); }
.code {
  margin: 0; padding: 14px; border-radius: 12px; background: #0B1220; color: #E2E8F0; overflow: auto; max-height: 280px;
  font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.code-wrap { position: relative; }
.code-wrap .btn { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.12); color: #fff; border: 0; }
.code-wrap .btn:hover { background: rgba(255,255,255,.22); }
.email-mock { font-size: 14.5px; }
.email-mock__row { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.email-mock__row span { color: var(--slate-500); min-width: 64px; }
.email-mock__body { padding-top: 10px; white-space: pre-wrap; color: var(--slate-700); overflow-wrap: anywhere; }
.bubble { background: #E9F1FF; color: #0B1F44; border-radius: 18px 18px 18px 6px; padding: 10px 14px; font-size: 15px; max-width: 520px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble--sms { background: #34C759; color: #fff; border-radius: 18px 18px 6px 18px; margin-left: auto; }
.bubble-label { font-size: 12px; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: .06em; margin: 6px 0 4px; }
.page-mock { font-size: 15px; }
.page-mock h3 { font-size: 18px; margin-bottom: 8px; }
.page-mock p + p { margin-top: 8px; }
.photo-mock { display: flex; gap: 12px; align-items: center; }
.photo-mock img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; background: var(--bg); }

.hours { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hours th, .hours td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line-soft); }
.hours th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); }
.hours tr:last-child td { border-bottom: 0; }
.hours td:first-child { font-weight: 640; color: var(--navy); width: 64px; }
.hours tr.is-changed td { background: #FFFBEB; }
.hours tr.is-changed td:last-child { color: var(--orange-700); font-weight: 650; }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { counter-increment: step; display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.steps li::before {
  content: counter(step); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--indigo); color: #fff; font-weight: 750; font-size: 14px; margin-top: -2px;
}
.steps--rose li::before { background: var(--rose); }
.human-only { border-radius: 14px; padding: 14px; background: linear-gradient(180deg, #FFFBEB, #FFF7E6); border: 1px solid #F6DFA4; display: grid; gap: 12px; }
.human-only__title { display: flex; gap: 8px; align-items: center; color: var(--gold-700); font-weight: 750; }
.human-only__title svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ visibility map */
.map-card { display: grid; gap: 14px; }
.map-wrap { position: relative; max-width: 520px; margin: 0 auto; width: 100%; }
.map { width: 100%; height: auto; display: block; border-radius: 18px; touch-action: manipulation; }
.map-dot { cursor: pointer; outline: none; }
.map-dot circle.map-dot__c { transition: r .15s var(--ease), stroke-width .15s; stroke: #fff; stroke-width: 2.5; }
.map-dot:hover circle.map-dot__c, .map-dot:focus-visible circle.map-dot__c { stroke-width: 4; }
.map-dot.is-selected circle.map-dot__ring { opacity: 1; }
.map-dot circle.map-dot__ring { opacity: 0; fill: none; stroke: var(--navy); stroke-width: 2.5; transition: opacity .15s; }
.map-dot:focus-visible circle.map-dot__ring { opacity: 1; stroke: var(--indigo); }
.map-dot text { font-weight: 800; font-size: 13px; pointer-events: none; font-family: var(--font); }
.map-self-halo { fill: none; stroke: var(--indigo); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: halo 2.6s ease-out infinite; pointer-events: none; }
@keyframes halo { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
.map-pop { margin-top: 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); padding: 12px 14px; animation: pop-in .2s var(--ease) both; }
.map-pop__title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.map-pop ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.map-pop li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; }
.map-pop .rank-num { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 750; font-size: 13px; background: #fff; border: 1px solid var(--line); color: var(--navy); flex: none; }
.map-pop li.is-self { color: var(--indigo-600); font-weight: 700; }
.map-pop li.is-self .rank-num { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font-size: 13.5px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.big-number { font-size: 44px; font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.big-number small { font-size: 18px; color: var(--slate-500); font-weight: 650; letter-spacing: 0; }

.spark { display: block; width: 100%; height: auto; overflow: visible; }
.spark__line { fill: none; stroke: var(--indigo); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.spark__dot { fill: var(--indigo); stroke: #fff; stroke-width: 2; }
.hero .spark__line { stroke: var(--gold); }
.hero .spark__dot { fill: var(--gold); stroke: #1E1B4B; }
.spark-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--slate-500); margin-top: 4px; }
.hero .spark-labels { color: #CBD5E1; }

/* ------------------------------------------------------------------ AI answers */
.band { position: relative; height: 14px; border-radius: 999px; background: #EEF2F7; margin: 18px 0 8px; }
.band__range { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(79,70,229,.25), rgba(79,70,229,.35)); }
.band__mark { position: absolute; top: -5px; width: 4px; height: 24px; border-radius: 4px; background: var(--indigo); transform: translateX(-2px); box-shadow: 0 0 0 3px #fff; }
.band__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--slate-500); font-variant-numeric: tabular-nums; }
.people { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.people i { width: 22px; height: 22px; border-radius: 50%; background: #E2E8F0; display: grid; place-items: center; }
.people i svg { width: 14px; height: 14px; color: #fff; }
.people i.is-on { background: var(--indigo); }
.people i.is-maybe { background: var(--indigo-300); }
.quote { display: grid; gap: 10px; }
.quote__q { display: inline-flex; align-self: start; justify-self: start; gap: 8px; align-items: center; background: var(--navy); color: #fff; border-radius: 16px 16px 16px 4px; padding: 8px 14px; font-size: 14.5px; font-weight: 560; max-width: 100%; }
.quote__q svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.quote__a { font-size: 15px; color: var(--slate-700); line-height: 1.6; padding-left: 14px; border-left: 3px solid var(--line); overflow-wrap: anywhere; }
.quote__a mark { background: #FEF3C7; color: var(--navy); font-weight: 700; border-radius: 4px; padding: 0 3px; box-shadow: 0 0 0 1px #FCD34D inset; }
.quote__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--slate-500); }
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.claims li { display: flex; gap: 6px; align-items: flex-start; }
.claims svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.claims .ok svg { color: var(--emerald); }
.claims .bad { color: var(--rose-700); font-weight: 600; }
.claims .bad svg { color: var(--rose); }
.claims .unk svg { color: var(--slate-400); }
.engine { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--navy); font-size: 13px; }
.engine i { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; }
.sov { display: grid; gap: 10px; }
.sov__row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 6px 10px; align-items: center; font-size: 14.5px; }
.sov__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); font-weight: 560; }
.sov__pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--navy); }
.sov__bar { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: #EEF2F7; overflow: hidden; }
.sov__bar span { display: block; height: 100%; border-radius: inherit; background: var(--slate-400); transition: width 1s var(--ease); }
.sov__row.is-self .sov__bar span { background: linear-gradient(90deg, var(--indigo), #818CF8); }
.sov__row.is-self .sov__name { color: var(--indigo-600); font-weight: 750; }

/* ------------------------------------------------------------------ openings */
.opening { display: flex; gap: 14px; align-items: flex-start; }
.opening__spots { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--gold-50); color: var(--gold-700); text-align: center; line-height: 1; }
.opening__spots b { display: block; font-size: 22px; color: var(--gold-700); }
.opening__spots small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.opening--filled .opening__spots { background: #F1F5F9; color: var(--slate-500); }
.opening--filled .opening__spots b { color: var(--slate-500); }
.destinations { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.destinations li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 14.5px; }
.destinations .d-icon { width: 34px; height: 34px; border-radius: 10px; background: #fff; display: grid; place-items: center; flex: none; color: var(--indigo); box-shadow: var(--shadow-sm); }
.destinations .d-icon svg { width: 18px; height: 18px; }
.destinations b { display: block; font-size: 14.5px; }
.destinations small { color: var(--slate-500); display: block; line-height: 1.35; }
.destinations li.is-done .d-icon { color: var(--emerald-700); }
.destinations li { animation: pop-in .3s var(--ease) both; }
.success-burst { width: 76px; height: 76px; border-radius: 50%; margin: 6px auto 4px; display: grid; place-items: center; background: var(--emerald-50); color: var(--emerald-700); animation: burst .5s var(--ease) both; }
.success-burst svg { width: 40px; height: 40px; }
@keyframes burst { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

/* ------------------------------------------------------------------ reviews */
.qr { width: 168px; height: 168px; border-radius: 14px; background: #fff; padding: 10px; border: 1px solid var(--line); display: block; image-rendering: pixelated; }
.copy-row { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); min-width: 0; }
.copy-row code { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); }
.message-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.message-card__text { white-space: pre-wrap; font-size: 15px; color: var(--slate-700); overflow-wrap: anywhere; }
.week { display: grid; gap: 8px; }
.ask-row { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.ask-row .grow b { font-size: 14.5px; }

/* ------------------------------------------------------------------ profile */
.section-nav { position: sticky; top: calc(var(--topbar-h) + 4px); z-index: 5; background: var(--bg); padding: 8px 0; }
@media (min-width: 1024px) { .section-nav { top: 0; } }
.fact-section { scroll-margin-top: 120px; }
.program-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 12px; background: #FCFDFE; }
.hours-edit { display: grid; gap: 8px; }
.hours-edit__row { display: grid; grid-template-columns: 52px 60px 1fr; gap: 6px 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.hours-edit__row:last-child { border-bottom: 0; }
.hours-edit__row .times { display: flex; gap: 6px; align-items: center; min-width: 0; }
.hours-edit__row .times .input { min-height: 44px; padding: 8px 10px; min-width: 0; flex: 1; }
@media (max-width: 520px) {
  .hours-edit__row .times { grid-column: 1 / -1; }
}
.hours-edit__row .day { font-weight: 700; color: var(--navy); }
.confirm-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.photos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.photo { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; display: grid; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--bg); }
.photo figcaption { padding: 10px 12px; display: grid; gap: 4px; font-size: 14px; }

/* ------------------------------------------------------------------ website checks */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.checks li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.checks li:last-child { border-bottom: 0; }
.check-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.check-icon svg { width: 16px; height: 16px; }
.check-icon--pass { background: var(--emerald-50); color: var(--emerald-700); }
.check-icon--fail { background: var(--rose-50); color: var(--rose-700); }

/* ------------------------------------------------------------------ team */
.team { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.agent { display: grid; gap: 12px; align-content: start; }
.agent__head { display: flex; gap: 12px; align-items: center; }
.agent__name { color: var(--navy); font-weight: 750; font-size: 16.5px; }
.agent__title { font-size: 13.5px; color: var(--slate-500); }
.agent__last { font-size: 14px; background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.agent__meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--slate-500); align-items: center; }
.team-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.team-strip::-webkit-scrollbar { display: none; }
.team-strip__item { display: grid; justify-items: center; gap: 4px; min-width: 64px; font-size: 12px; text-align: center; color: var(--slate-500); text-decoration: none; }
.team-strip__item:hover { text-decoration: none; }
.team-strip__item b { font-size: 12.5px; color: var(--navy); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--slate-300); }
.status-dot--done { background: var(--emerald); }
.status-dot--running { background: var(--indigo); animation: pulse 1.2s infinite; }
.status-dot--failed { background: var(--rose); }
.status-dot--skipped { background: var(--orange); }
@keyframes pulse { 50% { opacity: .35; } }
.activity { list-style: none; margin: 0; padding: 0; display: grid; }
.activity li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; align-items: flex-start; }
.activity li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ settings */
.consent { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.consent:last-child { border-bottom: 0; }
.consent__body { flex: 1; min-width: 0; }
.consent__title { color: var(--navy); font-weight: 650; }
.consent__text { font-size: 14px; margin-top: 2px; }

/* ------------------------------------------------------------------ more menu */
.more-list { display: grid; gap: 2px; }
.more-item { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 6px; border-radius: 12px; color: var(--navy); text-decoration: none; font-weight: 620; }
.more-item:hover { background: #fff; text-decoration: none; }
.more-item .list__icon { background: var(--indigo-50); color: var(--indigo); }
.more-item small { display: block; font-weight: 500; color: var(--slate-500); font-size: 13.5px; }
.more-item > svg:last-child { margin-left: auto; color: var(--slate-400); width: 18px; height: 18px; }

/* ------------------------------------------------------------------ wizard */
.wizard-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 6px; }
.wizard-steps li { flex: 1; height: 6px; border-radius: 99px; background: var(--line); }
.wizard-steps li.is-done { background: var(--indigo); }
.wizard-steps li.is-current { background: linear-gradient(90deg, var(--indigo), var(--indigo-300)); }
.place-result { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; text-align: left; width: 100%; }
.place-result:hover { border-color: var(--indigo-300); }
.place-result[aria-pressed="true"] { border-color: var(--indigo); background: var(--indigo-50); }

/* ------------------------------------------------------------------ public pages (login, report) */
.public { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background:
  radial-gradient(900px 500px at 10% -10%, rgba(79,70,229,.10), transparent 60%),
  radial-gradient(800px 500px at 110% 0%, rgba(217,164,65,.14), transparent 60%), var(--bg); }
.public__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; max-width: 1120px; width: 100%; margin: 0 auto; }
.public__brand { display: flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; }
.public__brand:hover { text-decoration: none; }
.public__brand b { display: block; font-size: 17px; line-height: 1.1; }
.public__brand small { display: block; font-size: 12px; color: var(--slate-500); }
.public__main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 8px 16px 48px; }
.public__foot { text-align: center; font-size: 13px; color: var(--slate-500); padding: 20px 16px 28px; }
.login-card { max-width: 440px; margin: 6vh auto 0; }
.login-card h1 { font-size: 26px; }
.hero-public { display: grid; gap: 24px; align-items: start; padding-top: 12px; }
@media (min-width: 960px) { .hero-public { grid-template-columns: 1.05fr .95fr; gap: 48px; padding-top: 40px; } }
.hero-public h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -.03em; }
.hero-public .lead { font-size: 18px; margin-top: 14px; max-width: 52ch; }
.benefits { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.benefits li { display: flex; gap: 12px; align-items: flex-start; }
.benefits .b-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: #fff; box-shadow: var(--shadow); color: var(--indigo); }
.benefits .b-icon svg { width: 20px; height: 20px; }
.progress-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.progress-steps li { display: flex; gap: 12px; align-items: center; font-size: 15.5px; color: var(--slate-500); transition: color .3s; }
.progress-steps .p-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px solid var(--line); background: #fff; }
.progress-steps .p-icon svg { width: 16px; height: 16px; }
.progress-steps li.is-done { color: var(--navy); }
.progress-steps li.is-done .p-icon { background: var(--emerald); border-color: var(--emerald); color: #fff; animation: burst .4s var(--ease) both; }
.progress-steps li.is-active { color: var(--navy); font-weight: 650; }
.progress-steps li.is-active .p-icon { border-color: var(--indigo); border-top-color: transparent; animation: spin .8s linear infinite; }
.report-cta { background: linear-gradient(135deg, var(--navy), #312E81); color: #CBD5E1; border-radius: 22px; padding: 26px; display: grid; gap: 14px; box-shadow: 0 16px 40px rgba(15,23,42,.25); }
.report-cta h2 { color: #fff; font-size: 24px; }
.report-cta .cluster .btn--secondary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; box-shadow: none; }

/* ------------------------------------------------------------------ demo switcher (mock mode only) */
.demo-pill {
  position: fixed; z-index: 70; top: 10px; right: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold-50); border: 1px solid #EBD5A1; color: var(--gold-700); font-weight: 700; font-size: 12.5px;
  border-radius: 999px; padding: 0 12px; min-height: 34px; box-shadow: var(--shadow);
}
.demo-pill svg { width: 15px; height: 15px; }
@media (max-width: 1023px) { .shell--nav ~ .demo-pill, .demo-pill--nav { top: auto; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); right: 12px; } }

/* ------------------------------------------------------------------ misc */
.kbd-hint { font-size: 12px; color: var(--slate-500); }
.inline-icon { width: 16px; height: 16px; vertical-align: -3px; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.w-full { width: 100%; }
.text-emerald { color: var(--emerald-700); }
.text-rose { color: var(--rose-700); }
.text-gold { color: var(--gold-700); }
.text-indigo { color: var(--indigo-600); }
.text-navy { color: var(--navy); }
.bg-soft { background: var(--bg); border-radius: 12px; padding: 12px; }
.not-found { text-align: center; padding: 60px 16px; }
.fade-in { animation: fade-in .3s ease both; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checklist li { display: flex; gap: 10px; align-items: center; font-size: 15px; min-height: 36px; }
.checklist .c-box { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--slate-300); display: grid; place-items: center; flex: none; background: #fff; }
.checklist li.is-done .c-box { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.checklist li.is-done .c-box svg { width: 14px; height: 14px; }
.checklist li.is-done span.label { color: var(--slate-500); text-decoration: line-through; text-decoration-color: var(--slate-300); }
.task { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.task:last-child { border-bottom: 0; padding-bottom: 0; }
.task__check { width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--slate-300); background: #fff; display: grid; place-items: center; flex: none; padding: 0; color: transparent; transition: background .2s, border-color .2s, color .2s; }
.task__check:hover { border-color: var(--emerald); color: var(--emerald); }
.task__check svg { width: 16px; height: 16px; }
.task__check { position: relative; }
.task__check::after { content: ""; position: absolute; inset: -9px; }
.task.is-done .task__check { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.task.is-done .task__title { text-decoration: line-through; color: var(--slate-500); }
.task__title { color: var(--navy); font-weight: 600; font-size: 15px; }
.task__detail { font-size: 14px; margin-top: 2px; }
.progress { height: 8px; border-radius: 999px; background: #EEF2F7; overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--emerald), #34D399); border-radius: inherit; transition: width .8s var(--ease); }
.note-body { font-size: 15.5px; color: var(--slate-700); line-height: 1.6; }
.note-body p + p { margin-top: 10px; }
.note-body ul { margin: 8px 0 0; padding-left: 20px; }
.note-body li { margin: 4px 0; }
.note-cols { display: grid; gap: 14px; }
@media (min-width: 720px) { .note-cols { grid-template-columns: 1fr 1fr; } }
.note-cols h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); margin-bottom: 8px; }
.note-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.note-cols li { display: flex; gap: 8px; font-size: 15px; align-items: flex-start; }
.note-cols li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* touch screens: every control is at least 44px tall (WCAG 2.5.5 target size) */
@media (pointer: coarse) {
  .btn--sm, .chip, .link-btn, .input--sm, .select--sm { min-height: 44px; }
  .btn--icon.btn--sm { width: 44px; }
  .tags-input .chip { min-height: 40px; }
  .chip__x { width: 36px; height: 36px; }
}

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

@media print {
  .sidebar, .topbar, .tabbar, .toasts, .demo-pill, .btn { display: none !important; }
  .main { padding: 0 !important; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

/* ================================================================== v2 owner app (workstream J) */
/* Today: "Your next 3 things" */
.next3 { display: grid; gap: 4px; border: 1.5px solid var(--indigo-100); }
.next3 .card__head { margin-bottom: 6px; }
.next3 .card__head h2 { flex-wrap: wrap; }
.next3__time { color: var(--slate-500); font-weight: 600; font-size: 15px; }
.next3__setup { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--indigo-50); margin-bottom: 6px; }
.next3__setup .link-btn { justify-self: start; min-height: 36px; }
.next3__list { list-style: none; margin: 0; padding: 0; display: grid; }
.next3__item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.next3__item:last-child { border-bottom: 0; padding-bottom: 2px; }
.next3__num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--navy); color: #fff; font-weight: 750; font-size: 14px; }
.next3__item > .grow { min-width: 180px; }
.next3__title { color: var(--navy); font-weight: 650; font-size: 16px; }
.next3__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: 42px; }
@media (min-width: 720px) { .next3__actions { margin-left: auto; } }
.wins-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wins-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.wins-list svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--emerald-700); }

/* Today: visibility card (dark hero) */
.vis__lines { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.vis__lines li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: #E2E8F0; }
.vis__lines svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--gold); }
.hero__note { color: #CBD5E1; }
.bar__detail { color: #CBD5E1; }
.bars--light .bar__detail { color: var(--slate-500); }
.ready { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: #E2E8F0; }
.ready b { color: #fff; }
.ready__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.ready__list li { display: flex; gap: 8px; align-items: flex-start; }
.ready__list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--gold); }
.ready__list a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ready__fix { display: block; color: #CBD5E1; }
.progress--dark { background: rgba(255,255,255,.12); }
.link-btn--light { color: #fff; }
.btn--dark-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.btn--dark-ghost:hover { background: rgba(255,255,255,.16); }

/* Today: results from Google, help card */
.results__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.results__num { background: var(--bg); border-radius: 12px; padding: 12px; display: grid; gap: 2px; }
.results__num b { font-size: 28px; font-weight: 780; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.results__num span { font-size: 13.5px; color: var(--slate-700); }
.help-card { background: linear-gradient(180deg, #fff, var(--gold-50)); border: 1px solid #F1DDAE; }
.help-card__title { font-size: 17px; }
.help-now { padding: 12px; border-radius: 12px; background: var(--bg); display: grid; gap: 8px; }

/* approvals */
.approval--sheet { display: grid; gap: 14px; }
.approval.is-focus { box-shadow: 0 0 0 3px rgba(79,70,229,.35), var(--shadow); }
.waits { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--slate-700); background: var(--bg); border-radius: 10px; padding: 8px 10px; }
.waits svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--slate-500); }
.guards { display: grid; gap: 10px; }
.guard-block { display: grid; gap: 6px; }
.guard-block__title { display: flex; gap: 6px; align-items: center; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--navy); }
.guard-block__title svg { width: 16px; height: 16px; color: var(--emerald-700); }
.guard-block--warn { background: var(--orange-50); border: 1px solid #FCD34D; border-radius: 12px; padding: 10px 12px; }
.guard-block--warn .guard-block__title svg { color: var(--orange-700); }
.guard--lg { font-size: 15px; gap: 10px; }
.guard__ok svg { color: var(--emerald-700); }
.guard__warn { color: #92400E; }
.guard__warn svg { color: var(--orange-700); }
.tag--new { background: #ECFDF5; color: #047857; }
.tag--changed { background: #FEF3C7; color: #92400E; }
.desc { border-radius: 12px; padding: 10px 12px; background: #F0FDF7; }
.desc--old { background: var(--bg); }
.desc__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-700); margin-bottom: 4px; }
.desc__text { font-size: 16px; line-height: 1.6; color: var(--navy); overflow-wrap: anywhere; }
.fbpost__name { color: #050505; }
.fbpost__sub { color: #65676B; }

/* openings */
.stays { font-size: 14px; color: var(--slate-700); }
.stays--soon { background: var(--gold-50); border: 1px solid #F1DDAE; border-radius: 10px; padding: 8px 10px; color: #3B2A08; }
.card--rose { border-color: #FECDD3; }
.card--gold { border: 1.5px solid #F1DDAE; background: linear-gradient(180deg, #fff, #FFFCF4); }

/* reviews: families to ask */
.family-row { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #FCFDFE; }
@media (min-width: 720px) { .family-row { grid-template-columns: 1.3fr 1.2fr 1fr; align-items: end; } }
.seg { display: inline-flex; border: 1px solid var(--slate-300); border-radius: 12px; overflow: hidden; background: #fff; }
.seg__opt { position: relative; display: inline-flex; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__opt span { min-height: 44px; min-width: 64px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; font-weight: 650; color: var(--slate-700); }
.seg__opt + .seg__opt span { border-left: 1px solid var(--slate-300); }
.seg__opt input:checked + span { background: var(--navy); color: #fff; }
.seg__opt input:focus-visible + span { box-shadow: inset 0 0 0 3px rgba(79,70,229,.5); }
.list__icon--white { background: #fff; }
.list__icon--indigo { background: var(--indigo-50); color: var(--indigo); }
.list__icon--navy { background: var(--navy); color: #fff; }
.review--row { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }

/* my info: one sticky save bar */
.fact-sections { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 18px; }
.confirm-bar--todo { background: var(--gold-50); border-color: #F1DDAE; }
.card__title-icon--ok { background: var(--emerald-50); color: var(--emerald-700); }
.card__title-icon--todo { background: #fff; color: var(--gold-700); }
.save-bar { position: sticky; bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); z-index: 25; }
@media (min-width: 1024px) { .save-bar { bottom: 16px; } }
.save-bar__inner { display: flex; gap: 10px 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--navy); color: #F1F5F9; border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-lg); }
.save-bar__text { font-weight: 600; }
.save-bar .btn--ghost { color: #E2E8F0; }
.save-bar .btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* website */
.web-lead { border: 1.5px solid var(--indigo-100); }
.web-lead__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.web-lead__actions .btn { flex: 1 1 240px; white-space: normal; text-align: center; }
.web-person { padding: 0; }
.web-person > :not(summary) { margin-left: 18px; margin-right: 18px; }
.web-person > :last-child { margin-bottom: 18px; }
.web-person__summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 16px 18px; min-height: 60px; }
.web-person__summary::-webkit-details-marker { display: none; }
.web-person__summary > svg:first-child { width: 22px; height: 22px; color: var(--indigo); flex: none; }
.web-person__summary > span { flex: 1; }
.web-person__summary small { display: block; color: var(--slate-500); font-size: 13.5px; }
.web-person[open] .web-person__summary > svg:last-child { transform: rotate(180deg); }
.snippet { border-top: 1px solid var(--line-soft); padding-top: 14px; }
.report-frame { width: 100%; height: 65vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* forced-colors (Windows high contrast): keep focus, toggles and bars visible */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
  .switch__track { border: 2px solid CanvasText; }
  .switch input:checked + .switch__track { background: Highlight; }
  .btn, .chip, .pill, .tag, .seg { border: 1px solid ButtonText; }
  .progress > span, .bar__fill, .sov__bar span { background: Highlight !important; forced-color-adjust: none; }
  .diff ins, .diff del { border: 1px solid CanvasText; }
}
.all-things h3 { margin-bottom: 8px; }
.all-things .task { padding: 10px 0; }