/* ============================================================
   SalesTooling design system
   Clarity-first: one accent color, generous whitespace,
   no framework dependencies.
   ============================================================ */

:root {
  --brand: #2563eb;
  --brand-dark: #1e4fd6;
  --brand-light: #eff4ff;
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --bg: #f7f8fa;
  --card: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --green: #16a34a;
  --green-bg: #ecfdf3;
  --amber: #b45309;
  --amber-bg: #fffbeb;
  --violet: #7c3aed;
  --violet-bg: #f5f3ff;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --violet-bg: #f5f3ff;
  --sun: #f59e0b;
  --sun-ink: #b45309;
  --sun-bg: #fef3c7;
  --gray-bg: #f1f5f9;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 30px -8px rgba(15, 23, 42, 0.14);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img, svg {
  max-width: 100%;
  vertical-align: middle;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 0.925rem/1.2 var(--font);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
}

.btn--primary:hover {
  background: var(--brand-dark);
}

/* Greyed-out until the gated field is filled (see [data-continue-gate] in
   site.js) — background already transitions via the .btn base rule, so the
   grey-to-blue swap animates on its own, no extra transition needed. */
.btn--primary:disabled,
.btn--primary:disabled:hover {
  background: var(--gray-bg);
  color: var(--faint);
  cursor: not-allowed;
}

.btn--ghost {
  background: var(--card);
  color: var(--ink-soft);
  border-color: var(--border-strong);
}

.btn--ghost:hover {
  border-color: var(--faint);
  background: var(--gray-bg);
}

.btn--danger {
  background: var(--card);
  color: var(--red);
  border-color: #fca5a5;
}

.btn--danger:hover {
  background: var(--red-bg);
}

.btn--sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

.btn--lg {
  padding: 0.8rem 1.6rem;
  font-size: 1.05rem;
  border-radius: var(--radius);
}

.btn--block {
  width: 100%;
}

/* ---------- Forms ---------- */

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.field .hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: 400 0.95rem var(--font);
  /* Never below 16px: iOS Safari auto-zooms any focused field smaller than
     that, which lurches the whole signup form on every tap. */
  font-size: max(16px, 0.95rem);
  color: var(--ink);
  background: var(--card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

textarea {
  resize: vertical;
  min-height: 90px;
}

.field-error {
  display: block;
  color: var(--red);
  font-size: 0.82rem;
  margin-top: 0.25rem;
}

.form-errors {
  background: var(--red-bg);
  border: 1px solid #fecaca;
  color: var(--red);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.form-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

.input-invalid,
.input-validation-error {
  border-color: var(--red) !important;
}

/* ASP.NET validation summary renders an empty container when valid — hide it. */
.validation-summary-valid {
  display: none;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.checkbox-field input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--brand);
}

/* ---------- Cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card__body {
  padding: 1.25rem;
}

.card__header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.card__header h2,
.card__header h3 {
  margin: 0;
  font-size: 1rem;
}

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge--new { background: var(--brand-light); color: var(--brand); }
.badge--contacted { background: var(--amber-bg); color: var(--amber); }
.badge--qualified { background: var(--violet-bg); color: var(--violet); }
.badge--won { background: var(--green-bg); color: var(--green); }
.badge--lost { background: var(--gray-bg); color: var(--muted); }

/* ---------- Alerts ---------- */

.alert {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}

.alert--success {
  background: var(--green-bg);
  border-color: #bbf7d0;
  color: #15803d;
}

.alert--info {
  background: var(--brand-light);
  border-color: #bfdbfe;
  color: var(--brand-dark);
}

.alert--error {
  background: var(--red-bg);
  border-color: #fecaca;
  color: var(--red);
}

/* ---------- Tables ---------- */

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table th {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: #fafbfc;
}

.table .table-primary-link {
  font-weight: 600;
  color: var(--ink);
}

.table .table-primary-link:hover {
  color: var(--brand);
  text-decoration: none;
}

.table .table-muted {
  color: var(--muted);
}

/* ---------- Auth screens ---------- */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Top padding reserves the band the absolutely-positioned brand sits in, so
     a short viewport scrolls rather than letting the card ride over the logo. */
  padding: 5.5rem 1rem 2rem;
  background: var(--bg);
  position: relative;
}

/* Register only, via ViewData["AuthPageClass"] in _AuthLayout — Login,
   ForgotPassword, ResetPassword etc keep the ordinary --bg. Qualified with
   .auth-page so it reliably outranks the rule above regardless of source
   order (the same specificity trap the headline hit earlier). */
.auth-page.auth-page--register {
  background: rgb(227, 243, 255);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 2rem;
}

.auth-card h1 {
  font-size: 1.35rem;
  margin-bottom: 0.25rem;
}

/* The signup start-step headline: 2x the shared auth h1 (1.35rem -> 2.7rem).
   Scoped to this one heading, not .auth-card h1 globally, so every other
   step (password, phone, code) and the Login card keep their normal size. */
.auth-card h1.auth-hero-h1 {
  /* Capped at 32px per Hayk's request (was 2.7rem/43.2px) — one size on
     every viewport, so the mobile override below is gone too. */
  font-size: 32px;
  line-height: 1.15;
  text-align: center;
  /* .auth-card h1 already sets margin-bottom: 0.25rem (4px); +25px on top,
     per Hayk's request, so 29px is the gap under the headline before
     whatever comes next (the Google button, once the removed sub-line is gone). */
  margin-bottom: 29px;
}


.auth-card .auth-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}

.auth-brand {
  position: absolute;
  top: 1.75rem;
  left: 2rem;
  margin: 0;
}

.auth-footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

/* The whole "Already have a SalesTooling account? Log in" line as one link,
   not just the trailing words — a bigger, easier target, especially on
   mobile. The muted colour keeps it from competing with the primary button
   above it; "Log in" stays bold so the call to action still stands out. */
.auth-footer__link {
  color: var(--muted);
  text-decoration: none;
}

.auth-footer__link:hover {
  color: var(--ink-soft);
  text-decoration: underline;
}

.auth-footer__link strong {
  color: var(--brand);
}

.auth-footer__link:hover strong {
  color: var(--brand-dark);
}

/* ---------- Below the auth card (log-in link, social proof) ---------- */

.auth-below {
  width: 100%;
  max-width: 420px;
}

/* The card already ends with padding, so this only needs the gap the card
   itself doesn't provide. */
.auth-below .auth-footer {
  margin-top: 1.25rem;
}

/* Roughly the two blank lines asked for, as spacing rather than empty <br>s so
   it stays proportional on small screens. */
.testimonial {
  margin: 2.25rem 0 0;
  padding: 0;
}

.testimonial__quote {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  /* --ink-soft, not --ink: full black read as too harsh for a pull quote —
     this is the same softened off-black the rest of the site already uses
     for body copy. */
  color: var(--ink-soft);
}

.testimonial__person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.testimonial__avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gray-bg);
  border: 1px solid var(--border);
}

.testimonial__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.testimonial__who {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: 0.9rem;
}

.testimonial__role {
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .auth-page {
    padding-top: 4.75rem;
  }

  .auth-brand {
    top: 1.25rem;
    left: 1.25rem;
  }
}

.auth-page > .auth-footnote {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--faint);
}

/* ---------- Logo ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.logo:hover {
  text-decoration: none;
}

.logo__mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.logo--light {
  color: #fff;
}

/* ---------- App shell ---------- */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.sidebar__nav {
  padding: 0.9rem 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.94rem;
  text-decoration: none;
}

.sidebar__link svg {
  width: 18px;
  height: 18px;
  color: var(--faint);
  flex-shrink: 0;
}

.sidebar__link:hover {
  background: var(--gray-bg);
  text-decoration: none;
}

.sidebar__link.active {
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 600;
}

.sidebar__link.active svg {
  color: var(--brand);
}

.sidebar__footer {
  border-top: 1px solid var(--border);
  padding: 0.9rem 1.25rem;
  font-size: 0.85rem;
}

.sidebar__user {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar__team {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.5rem;
}

.sidebar__signout {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font: 500 0.85rem var(--font);
  cursor: pointer;
}

.sidebar__signout:hover {
  color: var(--red);
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: 1.75rem 2rem 3rem;
  max-width: 1200px;
}

/* Backdrop behind the mobile sidebar. Hidden everywhere by default; the
   820px media query repositions and reveals it while the nav is open. */
.sidebar-backdrop {
  display: none;
  border: none;
  padding: 0;
  background: transparent;
}

/* Mobile top bar (hidden on desktop) */
.mobile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.mobile-bar__toggle {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  color: var(--ink-soft);
  display: inline-flex;
}

/* ---------- Page headers ---------- */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.page-head h1 {
  font-size: 1.45rem;
  margin: 0;
}

.page-head .page-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0.15rem 0 0;
}

.page-head__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ---------- Dashboard stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
}

.stat__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat__value {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 0.15rem;
}

.stat__sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.dash-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* Pipeline mini-bars */
.pipeline-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: 0.9rem;
}

.pipeline-row__label {
  width: 90px;
  flex-shrink: 0;
  color: var(--ink-soft);
  font-weight: 500;
}

.pipeline-row__bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--gray-bg);
  overflow: hidden;
}

.pipeline-row__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
}

.pipeline-row__count {
  width: 2rem;
  text-align: right;
  font-weight: 600;
  flex-shrink: 0;
}

/* ---------- Timeline ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline__item {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.timeline__item:last-child {
  border-bottom: none;
}

.timeline__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline__icon svg {
  width: 16px;
  height: 16px;
}

.timeline__icon--note {
  background: var(--amber-bg);
  color: var(--amber);
}

.timeline__icon--call {
  background: var(--brand-light);
  color: var(--brand);
}

.timeline__content {
  flex: 1;
  min-width: 0;
}

.timeline__meta {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.timeline__meta strong {
  color: var(--ink-soft);
}

.timeline__body {
  font-size: 0.92rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0;
}

.timeline__tags {
  margin-top: 0.3rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--gray-bg);
  border-radius: 6px;
  padding: 0.12rem 0.5rem;
}

/* ---------- Lead detail layout ---------- */

/* Add / Edit lead: the amount and its one-time / monthly switch, one field. */
.value-field {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.value-field > input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
}
.value-type {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg, #f1f5f9);
}
.value-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.value-type label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}
.value-type input:checked + label { color: var(--ink); }
/* The thumb glides under the chosen side. */
.value-type__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: calc(var(--radius-sm) - 3px);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.value-type input:nth-of-type(2):checked ~ .value-type__thumb { transform: translateX(100%); }
.value-type input:focus-visible + label {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: calc(var(--radius-sm) - 3px);
}
@media (prefers-reduced-motion: reduce) {
  .value-type__thumb, .value-type label { transition: none; }
}

.lead-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
  align-items: start;
}

.fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.fact-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.fact-list li:last-child {
  border-bottom: none;
}

.fact-list .fact-label {
  color: var(--muted);
  flex-shrink: 0;
}

.fact-list .fact-value {
  text-align: right;
  overflow-wrap: anywhere;
  font-weight: 500;
}

/* ---------- Tabs (add note / log call) ---------- */

.composer-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  padding: 0 1.25rem;
}

.composer-tab {
  padding: 0.7rem 0.9rem;
  font: 600 0.9rem var(--font);
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}

.composer-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.composer-panel {
  padding: 1.25rem;
}

.composer-panel[hidden] {
  display: none;
}

/* ---------- Filters ---------- */

.filter-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.filter-bar .search-box {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}

.status-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.status-tab {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--border-strong);
  text-decoration: none;
}

.status-tab:hover {
  text-decoration: none;
  background: var(--gray-bg);
}

.status-tab.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------- Empty states ---------- */

.empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--muted);
}

.empty__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.9rem;
  border-radius: 12px;
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty h3 {
  color: var(--ink);
  font-size: 1.05rem;
}

.empty p {
  max-width: 380px;
  margin: 0 auto 1.1rem;
  font-size: 0.92rem;
}

/* ---------- Pagination ---------- */

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.pager__links {
  display: flex;
  gap: 0.5rem;
}

/* ---------- Tag input (industry labels) ---------- */

.tag-input {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: text;
}

.tag-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.tag-input__text {
  flex: 1;
  min-width: 140px;
  border: none !important;
  box-shadow: none !important;
  padding: 0.25rem 0.25rem !important;
}

.tag-input__text:focus {
  outline: none;
  box-shadow: none !important;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--brand-light);
  color: var(--brand-dark);
  border-radius: 999px;
  padding: 0.15rem 0.3rem 0.15rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  max-width: 100%;
}

.chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.chip__remove {
  border: none;
  background: transparent;
  color: var(--brand-dark);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.3rem;
  cursor: pointer;
  border-radius: 999px;
}

.chip__remove:hover {
  background: rgba(37, 99, 235, 0.18);
}

.tag-input__suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 220px;
  overflow-y: auto;
  padding: 0.25rem;
}

.tag-input__option {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font: 500 0.9rem var(--font);
  color: var(--ink-soft);
  cursor: pointer;
}

.tag-input__option:hover,
.tag-input__option.active {
  background: var(--brand-light);
  color: var(--brand-dark);
}

/* Small read-only label chips (details facts, leads table) */
.chip--link {
  text-decoration: none;
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
}

.chip--link:hover {
  background: rgba(37, 99, 235, 0.18);
  text-decoration: none;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

/* ---------- Invite box ---------- */

.invite-box {
  display: flex;
  gap: 0.5rem;
}

.invite-box input {
  font-size: max(16px, 0.88rem); /* stay ≥16px — iOS zooms on focus below that */
  color: var(--muted);
  background: var(--gray-bg);
}

/* ---------- Marketing site ---------- */

.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header__nav .nav-link {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.95rem;
}

.site-header__nav .nav-link:hover {
  color: var(--ink);
  text-decoration: none;
}

.site-main {
  min-height: 60vh;
}

.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem;
}

.section--tight {
  padding: 3rem 1.5rem;
}

/* Wider than the 1080px .section default: the hero carries the product
   shot, and on a desktop the old cap left ~360px of empty gutter either side
   while the headline wrapped early. Written as .section.hero so it outranks
   .section by specificity rather than relying on source order. */
.section.hero {
  max-width: 1280px;
  text-align: center;
  padding-top: 5rem;
  padding-bottom: 3.5rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  /* Wide enough that the headline holds ONE line at full desktop width.
     This is only a cap: on a narrower viewport the h1 is bounded by the
     container instead and wraps naturally, so nothing overflows. */
  max-width: 1100px;
  margin: 0 auto 1rem;
  letter-spacing: -0.03em;
}

.hero .hero-sub {
  font-size: 1.15rem;
  color: var(--muted);
  /* Kept well under the headline: a sub-line reads worst when it runs the
     full width of a wide hero. */
  max-width: 640px;
  margin: 0 auto 1.75rem;
}

.hero__cta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.hero__note {
  font-size: 0.88rem;
  color: var(--faint);
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.75rem;
}

/* ---------- Sunrise hero band ----------
   Warm, high-key and optimistic: a soft amber glow top-left, mint on the
   right, a cool blue lift under the product shot. People decide how a page
   FEELS before they read a word — this one should feel like a good morning,
   not a warning. Pure CSS: nothing to load, crisp on retina. */
.hero-band {
  background:
    radial-gradient(58rem 32rem at 10% -12%, rgba(251, 191, 36, 0.28), transparent 62%),
    radial-gradient(50rem 30rem at 92% 4%, rgba(45, 212, 191, 0.24), transparent 64%),
    radial-gradient(46rem 30rem at 50% 108%, rgba(96, 165, 250, 0.22), transparent 60%),
    linear-gradient(180deg, #fffdf8 0%, #ffffff 70%);
}

/* Marker-pen highlight behind the payoff words — the friendliest emphasis
   device there is: human, hand-made, happy. */
.hl {
  /* Painted as the span's own background so it can never fall behind the
     band's gradient (a z-index:-1 pseudo-element would). */
  background-image: linear-gradient(90deg, rgba(253, 224, 71, 0.9), rgba(251, 191, 36, 0.8));
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 86%;
  padding: 0 0.14em;
  border-radius: 0.2em;
}

.btn--glow {
  box-shadow: 0 10px 34px rgba(37, 99, 235, 0.55), 0 2px 8px rgba(37, 99, 235, 0.4);
}

.btn--glow:hover {
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.65), 0 2px 8px rgba(37, 99, 235, 0.45);
}

/* Floating result chips over the mock — the "life" cue every modern LP
   hero uses: small wins drifting around the product. */
.mock-wrap {
  position: relative;
  /* Matches the widened hero: this product shot is what the hero is mostly
     showing, so capping it at 880 was what actually made the section look
     narrow. The floating chips anchor to this box, so they follow it. */
  max-width: 1100px;
  margin: 3rem auto 0;
}

.float-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
  animation: chip-float 5.5s ease-in-out infinite alternate;
}

.float-chip--won {
  left: -0.75rem;
  bottom: 2.2rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
}

.float-chip--won .float-chip__val {
  color: var(--green);
}

.float-chip--done {
  right: -0.5rem;
  top: -0.9rem;
  background: var(--green);
  color: #fff;
  animation-delay: 1.4s;
}

@keyframes chip-float {
  from { transform: translateY(-4px); }
  to   { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .float-chip {
    animation: none;
  }
}

@media (max-width: 640px) {
  /* Keep the chips inside the viewport on phones — negative offsets would
     poke past the edge and hand the page a horizontal scrollbar. */
  .float-chip--won {
    left: 0.5rem;
    bottom: 1.4rem;
  }

  .float-chip--done {
    right: 0.5rem;
    top: -0.7rem;
  }
}

/* App preview mock */
.mock {
  max-width: 1100px;
  margin: 3rem auto 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--card);
  text-align: left;
}

/* Inside the wrap the wrap owns the spacing; a soft blue-tinted lift makes
   the product float above the warm ground instead of sitting flat on it. */
.mock-wrap .mock {
  margin: 0;
  max-width: none;
  box-shadow: 0 28px 60px rgba(30, 64, 175, 0.18), 0 6px 18px rgba(15, 23, 42, 0.06);
}

.mock__bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: var(--gray-bg);
  border-bottom: 1px solid var(--border);
}

.mock__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}

.mock__body {
  display: flex;
  min-height: 320px;
}

.mock__side {
  width: 160px;
  border-right: 1px solid var(--border);
  padding: 1rem 0.75rem;
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
}

.mock__side .mock-nav {
  height: 26px;
  border-radius: 6px;
  background: var(--gray-bg);
}

.mock__side .mock-nav--active {
  background: var(--brand-light);
}

.mock__content {
  flex: 1;
  padding: 1.25rem;
  min-width: 0;
}

.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.mock-row__name {
  font-weight: 600;
}

.mock-row__co {
  color: var(--muted);
  font-size: 0.8rem;
}

/* The mock's stat row — mirrors the real dashboard's top cards so the hero
   reads as an actual product, not an abstract sketch. */
.mock-stats {
  display: grid;
  /* minmax(0,…) lets tracks shrink on narrow phones — plain 1fr refuses to
     go below content width and shears the third card off the edge. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.mock-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  background: var(--bg);
}

.mock-stat--due {
  border-color: var(--brand);
  background: var(--brand-light);
}

.mock-stat__num {
  font-weight: 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.mock-stat--due .mock-stat__num {
  color: var(--brand);
}

.mock-stat__label {
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-chip {
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  white-space: nowrap;
}

/* ---------- Trust strip (the promises where competitors put logo bars) ---------- */

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  max-width: 900px;
  margin: 0 auto;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  padding: 0.9rem 0.95rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-align: left;
  box-shadow: var(--shadow);
}

/* Each promise gets its own friendly color pill — four identical grey ticks
   read as fine print; four colors read as four gifts. */
.trust-strip__ico {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-strip__item span {
  line-height: 1.35;
}

.trust-strip__item strong {
  color: var(--ink);
}

.trust-strip__ico--mint { background: var(--green-bg); color: var(--green); }
.trust-strip__ico--sun { background: var(--sun-bg); color: var(--sun-ink); }
.trust-strip__ico--sky { background: var(--brand-light); color: var(--brand); }
.trust-strip__ico--violet { background: var(--violet-bg); color: var(--violet); }

/* ---------- Problem / solution ---------- */

.ps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 900px;
  margin: 2rem auto 0;
}

.ps-col {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.ps-col h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.ps-col--problem h3 {
  color: var(--muted);
}

/* The "after" column is the hero of this section: mint ground, green rule,
   lifted off the page. The "before" column stays deliberately quiet — we
   name the friction once, we don't wallow in it. */
.ps-col--solution {
  border-color: #a7f3d0;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 70%);
  box-shadow: 0 16px 40px rgba(16, 163, 74, 0.12);
}

.ps-col--solution h3 {
  color: var(--green);
}

.ps-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ps-col li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.5;
  font-size: 0.95rem;
}

.ps-col li svg {
  flex: none;
  margin-top: 0.25rem;
}

.ps-col--problem li {
  color: var(--muted);
}

.ps-col--problem {
  background: var(--bg);
  box-shadow: none;
}

.ps-col--problem li svg {
  color: var(--faint);
}

.ps-col--solution li svg {
  color: var(--green);
}

/* ---------- Pricing card ---------- */

.price-card {
  max-width: 380px;
  margin: 2.25rem auto 0;
  background: var(--card);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 1.75rem 1.75rem;
  text-align: center;
}

.price-card__amount {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price-card__currency {
  font-size: 1.6rem;
  font-weight: 700;
  vertical-align: 0.9rem;
  color: var(--muted);
}

.price-card__per {
  color: var(--muted);
  margin-top: 0.35rem;
  margin-bottom: 1.25rem;
}

.price-card__list {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  font-size: 0.93rem;
}

.price-card__list li {
  padding-left: 1.5rem;
  position: relative;
}

.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28rem;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--green);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}

.price-card__note {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.8rem;
}

/* Features */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.feature__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}

/* A little color range across the grid — six identical blue tiles read as
   wireframe; alternating tints read as a finished product page. */
.feature__icon--violet {
  background: var(--violet-bg);
  color: var(--violet);
}

.feature__icon--green {
  background: var(--green-bg);
  color: var(--green);
}

.feature__icon--amber {
  background: var(--amber-bg);
  color: var(--amber);
}

.feature h3 {
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
}

.feature p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.25rem;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
}

.step__num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  font-size: 0.95rem;
}

.step h3 {
  font-size: 1rem;
}

.step p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}

/* CTA band */
/* Bright, confident close — brand blue into cyan, the colour of "go".
   White button on top so the last thing on the page is the easiest click. */
.cta-band {
  background: linear-gradient(120deg, #2563eb 0%, #3b82f6 45%, #06b6d4 100%);
  border-radius: 18px;
  padding: 3.25rem 2rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 24px 60px rgba(37, 99, 235, 0.28);
}

.cta-band .btn--white {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 10px 26px rgba(2, 20, 60, 0.22);
}

.cta-band .btn--white:hover {
  background: #fff;
  color: var(--brand-dark);
  transform: translateY(-1px);
}

.cta-band h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.cta-band p {
  color: #cbd5e1;
  margin-bottom: 1.5rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--card);
}

.site-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--muted);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  column-gap: 1.25rem;
}

.site-footer__links a {
  color: var(--muted);
}

/* On phones the copyright line and the links stack; center both rows. */
@media (max-width: 640px) {
  .site-footer__inner {
    justify-content: center;
    text-align: center;
  }

  .site-footer__links {
    justify-content: center;
  }
}

/* Prose (privacy page etc.) */
.prose {
  max-width: 720px;
}

.prose h1 {
  font-size: 1.8rem;
}

.prose h2 {
  font-size: 1.2rem;
  margin-top: 2rem;
}

.prose p, .prose li {
  color: var(--ink-soft);
}

/* ---------- Utilities ---------- */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }
.text-muted { color: var(--muted); }
.text-sm { font-size: 0.875rem; }
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ---------- Responsive ---------- */

@media (min-width: 640px) {
  .mock__side {
    display: flex;
  }
}

@media (max-width: 960px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-grid,
  .lead-grid {
    grid-template-columns: 1fr;
  }

  /* One column: flatten the two column wrappers so the Details card can
     lead the whole page, ahead of the composer and the timeline. The grid
     gap spaces the cards, so their own top margins stand down. */
  .lead-grid > div {
    display: contents;
  }

  .lead-grid > div > .card {
    margin-top: 0;
  }

  .lead-grid .lead-details-card {
    order: -1;
  }

  .features-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .ps-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .trust-strip {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .trust-strip__item {
    justify-content: flex-start;
    padding: 0.65rem 0.85rem;
  }
}

@media (max-width: 480px) {
  /* The header must never wrap or scroll beside the primary CTA — on phones
     the "Log in" text link yields (it lives in the footer and on every auth
     page); the CTA keeps the whole stage. */
  .site-header__nav .nav-link {
    display: none;
  }

  .site-header__inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 820px) {
  .mobile-bar {
    display: flex;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
  }

  .app.nav-open .sidebar {
    transform: translateX(0);
  }

  .app {
    flex-direction: column;
  }

  .app-main {
    padding: 1.25rem 1rem 2.5rem;
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 55;
    border: none;
  }

  .app.nav-open .sidebar-backdrop {
    display: block;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .stats {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 3rem 1.25rem;
  }
}

/* ---------- Modal (Fill with AI) ---------- */
.modal {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--card);
  color: var(--ink);
  padding: 1.4rem;
  width: min(520px, calc(100vw - 2rem));
}

.modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.modal__title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.modal__hint {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.modal textarea {
  width: 100%;
  resize: vertical;
}

.modal .form-errors {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

/* "Didn't arrive" on a recent payout: a reason and a button on one line, so
   the row keeps its height and the table stays scannable. */
.payout-bounce {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.payout-bounce input {
  width: 12rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}

.payout-bounce .btn {
  white-space: nowrap;
}

/* The confirmation dialog that replaced window.confirm(). It reuses .modal
   for the frame, backdrop and entrance motion; only the message needs its own
   treatment, because it is a sentence to read rather than a heading. */
.confirm-modal {
  width: min(26rem, calc(100vw - 2rem));
}

.confirm-modal__title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}

@media (max-width: 380px) {
  .confirm-modal .modal__actions {
    flex-direction: column-reverse;
  }

  .confirm-modal .modal__actions .btn {
    width: 100%;
  }
}

/* ---------- Follow-ups ---------- */
.followup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.followup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  /* The action buttons never shrink (nowrap labels), so in a narrow column —
     the lead page's sidebar — they would squeeze the text to a few characters
     per line and hyphen-break mid-word. Let the row wrap instead: the actions
     drop onto their own line and the text keeps a readable measure. */
  flex-wrap: wrap;
}

.followup--overdue {
  border-color: #fecaca;
  background: var(--red-bg);
}

.followup__info {
  /* Claim the row, but hand it over entirely once there is less than ~13rem
     for the text — that is the point where wrapping beats squeezing. */
  flex: 1 1 13rem;
  min-width: 0;
}

.followup__due {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}

.followup--overdue .followup__due {
  color: var(--red);
}

.followup__overdue-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.followup__note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.1rem;
  overflow-wrap: anywhere;
}

.followup__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  /* Stay right-aligned on one line, and on the wrapped line too. */
  margin-left: auto;
}

/* ---------- Timeline item actions (edit/delete) ---------- */
.timeline__actions {
  margin-left: 0.5rem;
  font-size: 0.8rem;
}

.timeline__actions a {
  color: var(--muted);
  text-decoration: none;
  margin-right: 0.5rem;
}

.timeline__actions a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.timeline__delete {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
}

.timeline__delete:hover {
  color: var(--red);
  text-decoration: underline;
}

.timeline__edit {
  margin-top: 0.5rem;
}

.timeline__edit-actions {
  display: flex;
  gap: 0.5rem;
}

.timeline__icon--email {
  background: var(--violet-bg);
  color: var(--violet);
}

.alert--warning {
  background: var(--amber-bg);
  border-color: #fde68a;
  color: var(--amber);
}

/* ---- Onboarding checklist ---- */
.checklist-card {
  border-left: 3px solid var(--brand);
}
.checklist__progress {
  height: 6px;
  background: var(--gray-bg);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.checklist__progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.checklist__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
}
.checklist__check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #fff;
}
.checklist__check--done {
  background: var(--green);
  border-color: var(--green);
}
.checklist__label--done {
  color: var(--muted);
  text-decoration: line-through;
}
.checklist__link {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.25rem;
}
.checklist__link:hover { text-decoration: underline; }

/* ---- Source report ---- */
.report-bar {
  position: relative;
  background: var(--gray-bg);
  border-radius: var(--radius-sm);
  height: 24px;
  min-width: 90px;
  display: flex;
  align-items: center;
}
.report-bar__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--brand-light);
  border-radius: var(--radius-sm);
}
.report-bar__count {
  position: relative;
  padding: 0 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
}
.win-rate {
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.85rem;
}
.win-rate--good { background: var(--green-bg); color: var(--green); }
.win-rate--ok   { background: var(--amber-bg); color: var(--amber); }
.win-rate--low  { background: var(--red-bg); color: var(--red); }

/* ---- Kanban board ---- */
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  align-items: start;
}
.board-col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 120px;
}
.board-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.85rem;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: 2px solid currentColor;
  font-weight: 700;
  font-size: 0.9rem;
}
.board-col__head.badge--new { color: var(--muted); }
.board-col__head.badge--contacted { color: var(--brand); }
.board-col__head.badge--qualified { color: var(--violet); }
.board-col__head.badge--won { color: var(--green); }
.board-col__head.badge--lost { color: var(--red); }
.board-col__title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
}
/* The column's total value, small and quiet beside its name. */
.board-col__value {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
/* The whole board's total, beside the page title. */
.board-total {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  vertical-align: middle;
}
.board-col__count {
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.8rem;
}
.board-col__body {
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: background 0.15s ease;
}
.board-col__body--over {
  background: var(--brand-light);
  outline: 2px dashed var(--brand);
  outline-offset: -4px;
}
.board-col__empty {
  color: var(--faint);
  font-size: 0.85rem;
  text-align: center;
  padding: 0.75rem 0;
}
.board-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  position: relative;
  transition: border-color 0.18s ease, box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The whole card is the link: the name's anchor is stretched over it. */
.board-card__name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.board-card:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}
.board-card:hover .board-card__name { color: var(--brand); }
.board-card:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.board-card__name:focus-visible { outline: none; }
.board-card:active { cursor: grabbing; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .board-card { transition: none; }
  .board-card:hover { transform: none; }
}
.board-card--dragging { opacity: 0.5; }
.board-card__name {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  display: block;
}
.board-card__name:hover { color: var(--brand); }
.board-card__company {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.1rem;
}
.board-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.board-card__value {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--green);
}
.board-card__owner {
  font-size: 0.75rem;
  color: var(--faint);
  margin-left: auto;
}
.board-col__more {
  text-align: center;
  font-size: 0.82rem;
  color: var(--brand);
  text-decoration: none;
  padding: 0.35rem;
}
.board-col__more:hover { text-decoration: underline; }
.board-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  z-index: 50;
}
.board-toast--error { background: var(--red); }

/* ---- Public capture form ---- */
.capture-head { text-align: center; margin-bottom: 1.25rem; }
.capture-head h1 { font-size: 1.5rem; margin: 0 0 0.35rem; }
.capture-done { text-align: center; padding: 1.5rem 0; }
.capture-done__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.capture-done h1 { font-size: 1.4rem; margin: 0 0 0.35rem; }
/* Honeypot: kept in the DOM for bots, removed from view and a11y tree. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Company switcher (sidebar, under the logo) ---- */
.switcher {
  position: relative;
  margin-top: 0.6rem;
}
.switcher summary { list-style: none; }
.switcher summary::-webkit-details-marker { display: none; }
.switcher__current {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.switcher__current:hover { border-color: var(--border-strong); }
.switcher__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}
.switcher__chevron { flex: none; color: var(--faint); }
.switcher[open] .switcher__chevron { transform: rotate(180deg); }
.switcher__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 200px;
  /* Joined companies are unbounded — scroll rather than render off-screen. */
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 0.3rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.switcher__menu form { display: contents; }
.switcher__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: none;
  background: none;
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.switcher__item--button:hover,
.switcher__item--new:hover { background: var(--gray-bg); color: var(--ink); }
.switcher__item--active {
  font-weight: 600;
  color: var(--ink);
  cursor: default;
}
.switcher__check { color: var(--green); margin-right: 0.2rem; }
.switcher__item--new {
  color: var(--brand);
  font-weight: 600;
  border-top: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  margin-top: 0.2rem;
  padding-top: 0.55rem;
}

/* ---- Role tags on the members table ---- */
.tag--owner { background: var(--violet-bg); color: var(--violet); }
.tag--admin { background: var(--brand-light); color: var(--brand); }

/* ---- Feedback page ---- */
.feedback-message {
  white-space: pre-wrap;
  margin-top: 0.35rem;
  color: var(--ink-soft);
}
.tag--done { background: var(--green-bg); color: var(--green); }
.tag--muted { background: var(--gray-bg); color: var(--muted); }

/* ---- Checklist dismiss (bottom-right) ---- */
.checklist__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* ---- Work queue (Tier A) ---- */
.segmented {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.segmented__item {
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--card);
}
.segmented__item + .segmented__item { border-left: 1px solid var(--border-strong); }
.segmented__item.active { background: var(--brand); color: #fff; }
.segmented__item:hover { text-decoration: none; }
.queue-count {
  display: inline-block;
  min-width: 1.5rem;
  text-align: center;
  padding: 0 0.45rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  background: var(--gray-bg);
  color: var(--ink-soft);
  font-size: 0.8rem;
  vertical-align: middle;
}
.queue-card--overdue { border-left: 3px solid var(--red); }
.queue-card--today { border-left: 3px solid var(--brand); }
.queue-card--attention { border-left: 3px solid var(--amber); }
.followup__contact {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}
.followup__action {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.followup__action:hover { text-decoration: underline; }
.next-step--none { color: var(--amber); font-weight: 600; }
.status-tab--attention.active { background: var(--amber); color: #fff; }

/* Reschedule menu */
.reschedule { position: relative; }
.reschedule summary { list-style: none; display: inline-flex; }
.reschedule summary::-webkit-details-marker { display: none; }
.reschedule__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 230px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 0.3rem;
  z-index: 30;
}
.reschedule__opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: none;
  background: none;
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.reschedule__opt:hover { background: var(--gray-bg); color: var(--ink); }
.reschedule__pick {
  display: flex;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem 0.3rem;
  border-top: 1px solid var(--border);
  margin-top: 0.2rem;
}
.reschedule__pick input { flex: 1; font-size: max(16px, 0.8rem); /* ≥16px or iOS zooms */ padding: 0.3rem 0.45rem; min-width: 0; }

/* Date preset chips */
.preset-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.4rem; }
.preset-chips .chip { cursor: pointer; border: none; font: inherit; font-size: 0.78rem; }

/* Templates */
.template-preview {
  white-space: pre-wrap;
  max-height: 4.6em;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
.merge-fields { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.35rem; }
.merge-fields code {
  background: var(--gray-bg);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.82rem;
}
.merge-fields span { color: var(--muted); font-size: 0.85rem; margin-left: 0.4rem; }

/* Your day card */
.yourday-counts { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.yourday-count { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.yourday-count:hover { text-decoration: none; }
.yourday-count__num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.yourday-count__label { font-size: 0.78rem; color: var(--muted); }
.yourday-count--overdue .yourday-count__num { color: var(--red); }
.yourday-count--today .yourday-count__num { color: var(--brand); }
.yourday-count--attention .yourday-count__num { color: var(--amber); }
.board-card__next { font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; }

/* ---- Signup: verification code step ---- */
.code-input {
  font-size: 1.75rem;
  letter-spacing: 0.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0.7rem 0.5rem 0.7rem 1rem;
}
.auth-code-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
/* Tapped on phones, next to each other: real 44px targets, not text links. */
.auth-code-actions .btn {
  min-height: 44px;
  padding: 0.55rem 0.9rem;
}
.auth-code-actions .auth-start-over {
  flex-basis: 100%;
  text-align: center;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.auth-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.auth-terms {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* ---------- Multi-step signup ---------- */

/* "Continue with Google": Google's guidelines want their mark on a neutral
   button, not our brand blue. */
.btn--google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn--google:hover {
  background: var(--card);
  color: var(--ink);
  border-color: var(--muted);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}
.btn--google svg {
  flex: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}

/* One quiet bar instead of numbered chips: progress you feel, not homework
   you count. The width transition makes each step advance visibly glide. */
.auth-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--gray-bg);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.auth-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-back {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
}
.auth-back:hover {
  color: var(--ink);
}

/* "You already have an account" — an answer, not an error. */
.auth-notice {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--gray-bg);
  padding: 1rem;
  margin-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: center;
}
.auth-notice p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.password-wrap {
  position: relative;
}
.password-wrap input {
  padding-right: 3.6rem;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--muted);
  font: 600 0.78rem var(--font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0.25rem 0.35rem;
}
.password-toggle:hover {
  color: var(--ink);
}
/* ---------- Billing paywall preview ---------- */
/* A decorative, non-interactive dashboard mockup shown behind the "start your
   trial" card so the pitch is "here's what you'd unlock", not a blank wall. */

.paywall-page {
  position: relative;
}

.paywall-preview {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
}

/* The impersonation banner must stay clickable above EVERYTHING — including
   the paywall overlay (z-index 120): an admin viewing a locked-out account
   still needs the way back to their own. */
.alert--impersonation {
  position: relative;
  z-index: 130;
}

/* Admin overview: 30 tiny stacked columns, one per day. Pure CSS heights —
   no animation, so reduced-motion and print need nothing special. */
.signup-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 96px;
}

.signup-bars__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--gray-bg);
}

.signup-bars__seg {
  width: 100%;
  min-height: 0;
}

.signup-bars__seg--attr {
  background: var(--brand);
  border-radius: 0 0 2px 2px;
}

.signup-bars__seg--organic {
  background: var(--border-strong);
  border-radius: 2px 2px 0 0;
}
/* An alert that carries a button: text takes the room, the action stays put. */
.alert--action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

/* The message takes the room and wraps inside itself, so the action stays
   where the eye expects it instead of dropping onto its own line. */
.alert--action > span {
  flex: 1 1 20rem;
  min-width: 0;
}

.alert--action .btn {
  flex-shrink: 0;
}
/* Their own figures behind the glass: frosted enough to read as "locked",
   clear enough to recognise as theirs. */
.paywall-preview--own {
  filter: blur(1.5px);
}

/* The tally of what a locked-out account has built, inside the modal. */
.tally {
  list-style: none;
  margin: 0.9rem 0 1.1rem;
  padding: 0.9rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--gray-bg);
}

.tally__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tally__value {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tally__label {
  font-size: 0.78rem;
  color: var(--muted);
}

.paywall-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.5);
  overflow-y: auto;
}

.paywall-modal {
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}

/* ---------- Admin: acquisition source ---------- */

.source-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

/* The one line an admin actually reads: which channel sent this signup.
   Paid clicks get the brand colour because they are the ones that cost
   money and need to be judged. */
.source-badge {
  display: inline-block;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--gray-bg);
  color: var(--ink);
}

.source-badge--paid {
  background: var(--brand-light);
  color: var(--brand);
}

/* ---------- Mailing lists ---------- */

/* Street on one line, city/state/ZIP under it — reads like an envelope. */
.addr {
  line-height: 1.35;
}
.addr__line {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
}
.addr__line:first-child {
  color: var(--ink);
  font-size: inherit;
}

/* Inline counters on a list row: "412 contacts · 18 converted". */
.list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Row-level action buttons stay quiet until the row is hovered. */
.row-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  white-space: nowrap;
}
.row-actions form {
  display: inline;
}

/* ---------------------------------------------------------------------------
   Affiliate portal (/Affiliates/*)
   Its own shell: a slim top nav instead of the app's sidebar, because a
   partner has five screens and no workspace to switch between.
   --------------------------------------------------------------------------- */
.aff-body {
  background: var(--page-bg, #f8fafc);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.affnav {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.affnav__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.affnav__badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-light);
  padding: 0.15rem 0.4rem;
  border-radius: 5px;
  margin-left: 0.35rem;
}
.affnav__links {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.affnav__link {
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.affnav__link:hover { background: var(--gray-bg); color: var(--ink); }
.affnav__link.is-active { background: var(--brand-light); color: var(--brand); font-weight: 600; }
.affnav__out { margin-left: 0.25rem; }
.aff-main {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}
.aff-footer {
  border-top: 1px solid var(--border);
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  color: var(--muted);
  font-size: 0.85rem;
}
.aff-footer a { color: var(--muted); }

/* The referral link, front and centre — it is the whole product for a partner. */
.aff-link-card { margin-bottom: 1.25rem; }
.aff-link-card__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.aff-link-card__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.aff-link-card__input {
  flex: 1 1 320px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: max(16px, 0.95rem);
  background: var(--gray-bg);
}
.aff-code-row { display: flex; align-items: stretch; }
.aff-code-row__prefix {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  background: var(--gray-bg);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.aff-code-row__input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.aff-months {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
}
/* Progress toward the payout minimum. */
.payout-progress {
  height: 10px;
  background: var(--gray-bg);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 1rem;
}
.payout-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--green, #16a34a));
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.payout-progress__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
}
@media (max-width: 640px) {
  .affnav__inner { gap: 0.6rem; }
  .affnav__links { order: 3; width: 100%; margin-left: 0; }
  .affnav__out { margin-left: auto; }
}

/* =====================================================================
   Pricing tiers (2026-09-06): public pricing + contact pages, nav
   ===================================================================== */

/* ============================================================
   Marketing site: header nav state, pricing page, contact page
   ============================================================ */

/* ---------- Header nav: the current page ---------- */

.site-header__nav .nav-link {
  position: relative;
  padding: 0.15rem 0;
  transition: color 0.15s ease;
}

.site-header__nav .nav-link.is-active {
  color: var(--ink);
  font-weight: 600;
}

/* A short brand underline, drawn as a pseudo-element so the link's box and
   the header height never change between pages. */
.site-header__nav .nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

/* The header CTA has a short label for phones: "Get Sales Tooling for free"
   plus the logo is wider than a 375px screen. */
.site-header__cta-short {
  display: none;
}

@media (max-width: 760px) {
  .site-header__nav {
    gap: 0.75rem;
  }

  /* Contact sales and Log in live in the footer too — Pricing keeps its
     place until the phone breakpoint hides every text link. */
  .site-header__nav .nav-link--secondary {
    display: none;
  }
}

@media (max-width: 480px) {
  .site-header__cta-long {
    display: none;
  }

  .site-header__cta-short {
    display: inline;
  }
}

/* ---------- Page intro (pricing, contact) ---------- */

.page-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.75rem;
}

.page-intro h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
}

.page-intro h2 {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.page-intro p {
  color: var(--muted);
  font-size: 1.1rem;
  margin: 0;
}

.page-intro--sm {
  margin-bottom: 1.75rem;
}

.page-intro--sm p {
  font-size: 1rem;
}

/* ---------- Plan cards ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.75rem 1.5rem 1.5rem;
  transition: box-shadow var(--dur-base, 240ms) var(--ease-soft, ease),
              border-color var(--dur-base, 240ms) ease;
}

.plan:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

/* The recommended plan: brand border, a touch more lift, the ribbon. */
.plan--featured,
.plan--featured:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-lg);
}

.plan__ribbon {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
  white-space: nowrap;
}

.plan__name {
  font-size: 1.15rem;
  margin: 0 0 0.3rem;
}

/* Two lines reserved so the prices sit on one line across the row. */
.plan__tagline {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
  min-height: 2.9em;
  margin: 0 0 1.1rem;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.plan__amount {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.plan__per {
  color: var(--muted);
  font-size: 0.9rem;
}

.plan > .btn {
  margin-bottom: 1.25rem;
}

.plan__inherits {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}

.plan__list {
  list-style: none;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

/* The tick, shared by the cards and the comparison table. */
.plan-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
  margin-top: 0.08rem;
}

.plan-check svg {
  width: 0.7rem;
  height: 0.7rem;
}

.plans__note {
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 640px;
  margin: 1.75rem auto 0;
}

@media (max-width: 880px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
    margin: 0 auto;
    gap: 1.5rem;
  }

  .plan__tagline {
    min-height: 0;
  }
}

/* ---------- Comparison table ---------- */

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.93rem;
}

.compare-table th,
.compare-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
}

/* The plan names ride along under the site header while the rows scroll.
   Sticky only works while the table is NOT inside a scroll container, so
   the phone breakpoint below switches it off when the wrapper scrolls. */
.compare-table thead th {
  position: sticky;
  top: 65px;
  z-index: 2;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.compare-table__lead {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.compare-table__plan {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.compare-table__price {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 0.15rem;
  white-space: nowrap;
}

.compare-table thead th.is-featured .compare-table__plan {
  color: var(--brand);
}

.compare-table__group th {
  text-align: left;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-top: 1.75rem;
  padding-bottom: 0.45rem;
}

.compare-table tbody th {
  font-weight: 500;
  color: var(--ink);
}

.compare-table tbody td {
  color: var(--ink-soft);
  /* The hover tints land on the cells, so the transition lives here too. */
  transition: background var(--dur-fast, 150ms) ease;
}

.compare-table__sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
}

/* The recommended plan's column carries a whisper of brand tint. */
.compare-table tbody td.is-featured {
  background: rgba(37, 99, 235, 0.04);
}

.compare-table tbody tr:hover td:not(.is-featured) {
  background: #fafbfc;
}

.compare-table tbody tr:hover td.is-featured {
  background: rgba(37, 99, 235, 0.07);
}

.compare-table .plan-check {
  margin: 0 auto;
}

@media (max-width: 720px) {
  /* The wrapper scrolls, never the page. */
  .compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .compare-table {
    min-width: 640px;
  }

  .compare-table thead th {
    position: static;
  }
}

/* ---------- "Need more?" band ---------- */

.enterprise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.75rem 2rem;
}

.enterprise h2 {
  font-size: 1.2rem;
  margin: 0 0 0.25rem;
}

.enterprise p {
  color: var(--muted);
  margin: 0;
}

.enterprise .btn {
  flex: none;
}

@media (max-width: 720px) {
  .enterprise {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1.25rem;
  }
}

/* ---------- FAQ accordion ---------- */

.faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  /* Lets the open/close height transition below interpolate to `auto`
     (browsers that don't know the property simply snap, as before). */
  interpolate-size: allow-keywords;
}

.faq__item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color var(--dur-base, 240ms) ease,
              box-shadow var(--dur-base, 240ms) var(--ease-soft, ease);
}

.faq__item[open] {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--ink);
  border-radius: var(--radius);
  transition: color var(--dur-fast, 150ms) ease;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--brand);
}

/* A chevron that turns rather than a marker that swaps. */
.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.2rem 0.25rem 0 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--dur-base, 240ms) var(--ease-soft, ease),
              margin var(--dur-base, 240ms) var(--ease-soft, ease);
}

.faq__item[open] summary::after {
  margin-top: 0.2rem;
  transform: rotate(-135deg);
}

.faq__item p {
  margin: 0;
  padding: 0 1.25rem 1.15rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Smooth open/close where the browser can animate the details content
   (Chromium 131+); everywhere else the answer simply appears. */
.faq__item::details-content {
  height: 0;
  overflow: clip;
  transition: height var(--dur-slow, 380ms) var(--ease-soft, ease),
              content-visibility var(--dur-slow, 380ms) allow-discrete;
}

.faq__item[open]::details-content {
  height: auto;
}

/* The answer rises in as it opens (rise-in lives in motion.css). Gated on
   html.motion like every other from-invisible animation. */
html.motion .faq__item[open] > p {
  animation: rise-in var(--dur-base, 240ms) var(--ease-soft, ease) both;
}

/* ---------- Contact sales ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.5rem;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}

.contact-form .card__body {
  padding: 1.75rem;
}

.field__optional {
  font-weight: 400;
  color: var(--muted);
}

.contact-form__note {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

.contact-aside h2 {
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}

.expect-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.expect-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}

.expect-list strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.expect-list__ico {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

.expect-list__ico--sky { background: var(--brand-light); color: var(--brand); }
.expect-list__ico--mint { background: var(--green-bg); color: var(--green); }
.expect-list__ico--violet { background: var(--violet-bg); color: var(--violet); }

.contact-aside__alt {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.contact-aside__alt p {
  margin: 0 0 0.6rem;
}

.contact-aside__alt p:last-child {
  margin-bottom: 0;
}

.contact-done {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 0;
}

.contact-done h1 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}

.contact-done__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

@media (max-width: 820px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form .card__body {
    padding: 1.25rem;
  }
}

/* =====================================================================
   Pricing tiers (2026-09-06): in-app billing, usage meters, admin inbox
   ===================================================================== */
/* ==========================================================================
   In-app billing: plan page, usage meters, plan cards, company limit, admin
   sales inquiries. (Merged from the in-app slice's scratch CSS.)
   ========================================================================== */

/* ---- Billing page layout: "Your plan" beside "Usage this month" ---- */
.billing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.billing-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.billing-actions:empty {
  display: none;
}

.plan-note {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 1rem 0 0;
}

/* ---- Usage meters ---- */
.usage + .usage {
  margin-top: 1.1rem;
}

.usage__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.9rem;
  margin-bottom: 0.45rem;
}

.usage__head strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.usage__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--gray-bg);
  overflow: hidden;
}

/* Width animates whenever the number changes (a fresh render after a plan
   switch); colour eases too so amber/red never pops in. */
.usage__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 480ms cubic-bezier(.2, .8, .2, 1), background-color 300ms ease;
}

.usage__fill--unlimited {
  background: linear-gradient(90deg, var(--green), #4ade80);
  opacity: 0.55;
}

.usage--warn .usage__fill {
  background: var(--sun);
}

.usage--full .usage__fill {
  background: var(--red);
}

.usage__hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.45rem 0 0;
}

.usage--full .usage__hint {
  color: var(--amber);
}

/* ---- Plan cards (in-app, compact) ---- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem 1.25rem;
  transition: border-color 200ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(.2, .8, .2, 1);
}

.tier-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

.tier-card--featured {
  border-color: var(--brand);
}

.tier-card--current {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.tier-card--current:hover {
  box-shadow: 0 0 0 3px var(--brand-light), var(--shadow-lg);
}

.tier-card__flag {
  position: absolute;
  top: -0.7rem;
  left: 1rem;
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--brand-light);
  color: var(--brand);
  border: 1px solid var(--card);
}

.tier-card__flag--popular {
  left: auto;
  right: 1rem;
  background: var(--brand);
  color: #fff;
}

.tier-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.tier-card__tagline {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.2rem;
  min-height: 2.5em;
}

.tier-card__price {
  margin: 0.9rem 0 0.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.tier-card__amount {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tier-card__per {
  color: var(--muted);
  font-size: 0.82rem;
}

.tier-card__list {
  list-style: none;
  margin: 0.9rem 0 1.25rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.tier-card__list li {
  padding-left: 1.4rem;
  position: relative;
}

.tier-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--green);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}

.tier-card__action {
  margin-top: auto;
}

.tier-card__action form {
  margin: 0;
}

/* A "Current plan" / "After your trial" button is a label, not a control. */
.tier-card__action .btn--ghost:disabled,
.tier-card__action .btn--ghost:disabled:hover {
  background: var(--gray-bg);
  color: var(--muted);
  border-color: var(--border);
  cursor: default;
}

/* ---- Company limit card (Companies/New) ---- */
.limit-card {
  border-left: 3px solid var(--brand);
}

/* ---- Admin: sales inquiries ---- */
.inquiry-msg {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 34rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.inquiry-msg summary {
  cursor: pointer;
  list-style: none;
}

.inquiry-msg summary::-webkit-details-marker {
  display: none;
}

.inquiry-msg__more {
  color: var(--brand);
  font-weight: 600;
  white-space: nowrap;
}

/* The summary stays as the toggle when open (it keeps keyboard focus and
   lets the message fold back); only the truncated preview goes away and
   the label flips from "Read all" to "Show less". */
.inquiry-msg[open] summary {
  margin-bottom: 0.3rem;
}

.inquiry-msg__more--close,
.inquiry-msg[open] .inquiry-msg__preview,
.inquiry-msg[open] .inquiry-msg__more--open {
  display: none;
}

.inquiry-msg[open] .inquiry-msg__more--close {
  display: inline;
}

.inquiry--handled td {
  color: var(--muted);
}

.inquiry--handled td strong {
  font-weight: 500;
}

@media (max-width: 900px) {
  .billing-grid,
  .tier-grid {
    grid-template-columns: 1fr;
  }

  .tier-card {
    margin-top: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .usage__fill,
  .tier-card {
    transition: none;
  }

  .tier-card:hover {
    transform: none;
  }
}

/* =====================================================================
   Pricing tiers (2026-09-06): "Fill with AI" usage meter + upgrade panel
   ===================================================================== */

/* ---------- "Fill with AI" usage meter ----------
   The allowance the user is spending, shown twice: a quiet pill next to the
   Fill with AI button, and a labelled bar inside the dialog. Both share the
   same state classes — amber from 80% (.is-warn), red when spent (.is-full) —
   and the bars glide to each new count through the width transition. The
   dialog's .modal--upgrade state swaps the paste form for the upgrade panel;
   the server renders that class when the allowance is already spent, so the
   first paint is right without a script. */

.ai-meter {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-width: 9rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ai-meter[hidden] {
  display: none;
}

.ai-meter__label {
  display: block;
}

.ai-meter__track {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--gray-bg);
  overflow: hidden;
}

.ai-meter__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--brand);
  transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease;
}

/* Unlimited plans have nothing to count down: label only. */
.ai-meter--unlimited {
  color: var(--brand-dark);
  border-color: #bfdbfe;
  background: var(--brand-light);
}

.ai-meter--unlimited .ai-meter__track {
  display: none;
}

.ai-meter.is-warn {
  color: var(--amber);
  border-color: #fde68a;
  background: var(--amber-bg);
}

.ai-meter.is-warn .ai-meter__track {
  background: rgba(180, 83, 9, 0.12);
}

.ai-meter.is-warn .ai-meter__fill {
  background: var(--amber);
}

.ai-meter.is-full {
  color: var(--red);
  border-color: #fecaca;
  background: var(--red-bg);
}

.ai-meter.is-full .ai-meter__track {
  background: rgba(220, 38, 38, 0.12);
}

.ai-meter.is-full .ai-meter__fill {
  background: var(--red);
}

/* Inside the dialog: the same meter with room for a sentence. */
.ai-usage {
  margin: 0 0 0.9rem;
}

.ai-usage[hidden] {
  display: none;
}

.ai-usage__label {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
  transition: color 0.2s ease;
}

.ai-usage__track {
  height: 6px;
  border-radius: 999px;
  background: var(--gray-bg);
  overflow: hidden;
}

.ai-usage__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--brand);
  transition: width 480ms cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease;
}

.ai-usage--unlimited .ai-usage__track {
  display: none;
}

.ai-usage--unlimited .ai-usage__label {
  color: var(--brand-dark);
  margin-bottom: 0;
}

.ai-usage.is-warn .ai-usage__label {
  color: var(--amber);
}

.ai-usage.is-warn .ai-usage__fill {
  background: var(--amber);
}

.ai-usage.is-full .ai-usage__label {
  color: var(--red);
}

.ai-usage.is-full .ai-usage__fill {
  background: var(--red);
}

/* The upgrade panel: calm, centred, on the brand tint. Hidden until the
   dialog is in its .modal--upgrade state. */
.ai-upgrade {
  display: none;
  text-align: center;
  padding: 1.4rem 1.2rem 1.25rem;
  border-radius: var(--radius);
  background: var(--brand-light);
  border: 1px solid #bfdbfe;
}

.ai-upgrade__title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.ai-upgrade__text {
  margin: 0 auto;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

.ai-upgrade__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.ai-upgrade__actions [hidden] {
  display: none;
}

/* The dialog's upgrade face: the paste form steps aside, the panel steps in.
   The panel fades up from its starting style so a mid-session 402 reads as
   a change of state rather than a jump. */
.modal--upgrade .modal__hint,
.modal--upgrade textarea,
.modal--upgrade .form-errors,
.modal--upgrade .modal__actions {
  display: none;
}

.modal--upgrade .ai-upgrade {
  display: block;
  opacity: 1;
  transform: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@starting-style {
  .modal--upgrade .ai-upgrade {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-meter,
  .ai-meter__fill,
  .ai-usage__label,
  .ai-usage__fill,
  .modal--upgrade .ai-upgrade {
    transition: none;
  }
}

@media (max-width: 480px) {
  .ai-meter {
    min-width: 0;
    flex: 1 1 auto;
  }

  .ai-upgrade__actions .btn {
    width: 100%;
  }
}

/* Review fixes (2026-09-06): chosen plan highlight, pricing-page POST CTA spacing */
/* Scratch CSS from the review-fix slice — for the orchestrator to merge into
   wwwroot/css/site.css (this slice does not edit site.css). Two hooks only. */

/* ---- Plan cards (in-app): the plan a ?plan= link asked for ----
   Pages/App/Billing/Index.cshtml adds .tier-card--chosen (and a "Your pick"
   flag) to that card instead of starting Checkout from a GET. Same ring as
   .tier-card--current plus the lifted state, so it reads as "this one" without
   claiming to be the current plan. Place after .tier-card--current:hover. */
.tier-card--chosen {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light), var(--shadow-lg);
  transform: translateY(-2px);
}

.tier-card--chosen:hover {
  box-shadow: 0 0 0 3px var(--brand-light), var(--shadow-lg);
}

/* ---- Pricing page: the signed-in "Choose …" CTA is a POST form now ----
   Pages/Pricing.cshtml wraps the paid-plan button in <form class="plan__cta">
   so Checkout is only reachable by POST. The form takes over the gap that
   .plan > .btn gave the bare link. Place next to .plan > .btn. */
.plan > .plan__cta {
  margin: 0 0 1.25rem;
}

/* Teammates gate (2026-09-07): the invite form's place on Starter is the pitch,
   inside the same card — never a wall. */
/* Settings → "Delete this company": a quiet disclosure that opens into a
   red-bordered panel with a type-to-confirm field. Same rise as the rest
   of the app; nothing flashes. */
.danger-zone summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
  transition: color 0.18s ease;
}

.danger-zone summary::-webkit-details-marker {
  display: none;
}

.danger-zone summary:hover,
.danger-zone[open] summary {
  color: var(--red);
}

.danger-zone summary:hover {
  text-decoration: underline;
}

.danger-zone__body {
  margin-top: 0.85rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--red) 35%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--red) 4%, var(--card));
  animation: danger-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.danger-zone__body .field {
  margin-bottom: 0.7rem;
}

.danger-zone__body .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

@keyframes danger-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .danger-zone__body { animation: none; }
}

.limit-card__pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--card) 100%);
}

.limit-card__pitch h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.limit-card__pitch p {
  margin: 0 0 0.35rem;
  font-size: 0.93rem;
  line-height: 1.55;
}