@charset "UTF-8";
:root {
  --bg: #070a08;
  --surface: #101512;
  --surface-muted: #182019;
  --border: #232b26;
  --border-strong: #33403a;
  --border-stronger: #47564e;
  --text-primary: #eaf2ec;
  --text-secondary: #9fb0a6;
  --text-muted: #7d9086;
  --accent: #00e87a;
  --accent-hi: #4dff9f;
  --accent-light: #0e2c1d;
  --accent-dark: #00b862;
  --on-accent: #04140b;
  --accent-glow: rgba(0, 232, 122, 0.28);
  /* Success states. Previously referenced by contact/forgot/reset-password as
     var(--green) but never defined, so those messages rendered in the
     inherited colour instead of green. */
  --green: #00e87a;
  --blue: #57a8ff;
  --blue-light: #10243a;
  --amber: #ffc75a;
  --amber-light: #2c2411;
  --red: #ff6b60;
  --red-light: #33191a;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Shadows read as depth against a dark ground only when they are near-black
     and stronger than the light-theme equivalents. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.55), 0 1px 3px -1px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 8px 16px -8px rgba(0, 0, 0, 0.55);
  --ring-accent: 0 0 0 4px rgba(0, 232, 122, 0.18);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg);
  background-image:
    radial-gradient(900px 500px at 100% -5%, rgba(0, 232, 122, 0.10), transparent 60%),
    radial-gradient(800px 500px at 0% 0%, rgba(0, 232, 122, 0.06), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
.section-head h2, .cta-band h2 { font-family: var(--font-display); font-weight: 600; }

p { margin: 0; line-height: 1.65; color: var(--text-secondary); }

::selection { background: var(--accent); color: var(--on-accent); }

a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn:hover { background: var(--surface-muted); border-color: var(--border-stronger); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: var(--accent-dark);
  color: var(--on-accent);
  box-shadow: 0 2px 10px -2px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #7bffb8, var(--accent-hi));
  border-color: var(--accent);
  box-shadow: 0 8px 22px -4px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.btn-sm { padding: 8px 15px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: var(--shadow-xs);
}
.btn-danger:hover { background: #e2554a; border-color: #e2554a; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 17px;
  transition: background 0.14s var(--ease), color 0.14s var(--ease), border-color 0.14s var(--ease);
}
.icon-btn:hover { background: var(--red-light); color: var(--red); border-color: var(--red); }

/* ---------- Top marketing nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(7, 10, 8, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(35, 43, 38, 0.9);
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand .mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--accent-hi), var(--accent-dark));
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 10px -2px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-nav a {
  font-size: 14px;
  font-weight: 450;
  color: var(--text-secondary);
  position: relative;
  transition: color 0.16s var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.2s var(--ease);
}
.site-nav a:hover { color: var(--text-primary); }
.site-nav a:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 12px; }

/* ---------- Hero ---------- */
.hero {
  padding: 104px 0 76px;
  text-align: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent), var(--accent-light);
  padding: 7px 16px;
  border: 1px solid rgba(0, 232, 122, 0.3);
  border-radius: 999px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.08;
  max-width: 800px;
  margin: 0 auto 22px;
  letter-spacing: -0.02em;
}
.hero p.lead {
  font-size: 19px;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto 34px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 48px;
}
.hero-actions .btn { padding: 12px 24px; font-size: 15px; }

.trust-strip {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 40px;
}
.trust-strip span { display: inline-flex; align-items: center; gap: 6px; }
.trust-strip i { color: var(--accent); font-size: 15px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 880px;
  margin: 0 auto 40px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.stat-card .num { font-size: 20px; font-weight: 600; margin-bottom: 6px; color: var(--accent); white-space: nowrap; letter-spacing: -0.01em; }
.stat-card .label { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { font-size: 34px; margin-bottom: 14px; letter-spacing: -0.02em; }
.section-head p { font-size: 16px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-xs);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card .icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--surface-muted), var(--accent-light));
  border: 1px solid rgba(0, 232, 122, 0.22);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-xs);
}
.card h3 { font-size: 17px; margin-bottom: 8px; font-weight: 600; letter-spacing: -0.01em; }
.card p { font-size: 14px; line-height: 1.6; }

/* ---------- Blog index ---------- */
.blog-index-list { display: flex; flex-direction: column; gap: 18px; }
.blog-index-card { display: block; }
.blog-index-tag { display: inline-block; margin-bottom: 10px; }

/* ---------- Blog post article ---------- */
.blog-post-meta { font-size: 13px; color: var(--text-muted); margin: 10px 0 24px; }
.blog-post-body { font-size: 16px; line-height: 1.75; color: var(--text-secondary); }
.blog-post-body h2 { font-size: 1.4rem; color: var(--text-primary); margin: 36px 0 14px; letter-spacing: -0.01em; }
.blog-post-body h3 { font-size: 1.1rem; color: var(--text-primary); margin: 26px 0 10px; }
.blog-post-body p { margin: 0 0 18px; }
.blog-post-body ul, .blog-post-body ol { margin: 0 0 18px; padding-left: 22px; }
.blog-post-body li { margin-bottom: 8px; line-height: 1.6; }
.blog-post-body strong { color: var(--text-primary); font-weight: 600; }
.blog-post-cta { text-align: center; padding: 36px 30px; margin-top: 40px; }

/* ---------- Pricing ---------- */
.billing-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px;
  width: fit-content;
  margin: 0 auto 36px;
  box-shadow: var(--shadow-sm);
}
.toggle-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.toggle-option.active { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--on-accent); box-shadow: 0 2px 6px -1px rgba(107, 72, 37, 0.35); }
.toggle-option .save-tag {
  font-size: 11px;
  font-weight: 600;
  background: var(--accent-light);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 999px;
}
.toggle-option.active .save-tag { background: rgba(4, 20, 11, 0.22); color: var(--on-accent); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  /* Cards size to their own content. Grid items stretch to the row height by
     default, which left the shorter plans with hundreds of pixels of blank
     space under their last feature once the free plan's list grew long. */
  align-items: start;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease), border-color 0.24s var(--ease);
  /* Every card is the containing block for its own corner badge — otherwise a
     badge on a non-featured card anchors to some outer positioned ancestor and
     lands in an unrelated part of the page. */
  position: relative;
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.price-card.featured {
  border: 1.5px solid var(--accent);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0, 232, 122, 0.12), transparent 65%),
    var(--surface);
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(0, 232, 122, 0.10), 0 0 40px -8px var(--accent-glow);
}
.price-card.featured:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(0, 232, 122, 0.14), 0 0 56px -6px var(--accent-glow);
}
/* Direct child only — this is the card's own corner ribbon ("Most popular").
   As a descendant selector it also caught the .badge-muted "Coming soon" tags
   inside the feature-list <li>s, pulling them out of the text flow and
   stacking them all in the card corner, so every card looked like it was
   labelled "Coming soon". */
.price-card > .badge {
  position: absolute;
  top: -13px;
  left: 26px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 3px 12px -2px var(--accent-glow);
}
.price-card h3 {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.price-card.featured h3 {
  color: var(--accent);
  background: var(--accent-light);
  border-color: rgba(0, 232, 122, 0.35);
}
.price-card .price { font-size: 34px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.02em; font-family: var(--font-display); color: var(--text-primary); }
.price-card .price span { font-size: 13px; font-weight: 400; color: var(--text-muted); font-family: var(--font); }
.price-card .period { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.price-card ul { list-style: none; margin: 0 0 20px; padding: 0; font-size: 13px; color: var(--text-secondary); flex: 1; }
/* Padding-left plus an absolutely positioned marker rather than flex, so the
   label and its "Coming soon" badge stay in one inline flow and wrap together
   under a hanging tick instead of the badge dropping to its own line. */
.price-card ul li {
  position: relative;
  padding: 6px 0 6px 21px;
  border-top: 0.5px solid var(--border);
  line-height: 1.45;
}
.price-card ul li:first-child { border-top: none; }
.price-card ul li::before {
  content: "✓";
  position: absolute;
  left: 1px;
  top: 6px;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.45;
}
/* Unbuilt features get a neutral marker — a tick beside something that doesn't
   exist yet reads as a claim that it ships today. */
.price-card ul li.soon { color: var(--text-muted); }
.price-card ul li.soon::before { content: "•"; color: var(--border-strong); }
/* Slightly smaller than a standalone badge: inside a dense feature list this
   is secondary information, and the default size pushed the longest label's
   badge onto its own line. */
.price-card ul li .badge { white-space: nowrap; font-size: 10.5px; padding: 2px 7px; }

/* ---------- Industry modes table ---------- */
.modes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mode-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-xs);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.mode-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.mode-card .phase {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.phase-mvp { background: var(--accent-light); color: var(--accent); }
.phase-2 { background: var(--blue-light); color: var(--blue); }
.phase-3 { background: var(--amber-light); color: var(--amber); }
.mode-card h4 { font-size: 15px; margin-bottom: 6px; font-weight: 500; }
.mode-card p { font-size: 13px; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #0b2418, #0d3222 55%, #061309);
  border-radius: var(--radius-xl);
  padding: 68px 56px;
  text-align: center;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 80% -20%, rgba(0, 232, 122, 0.22), transparent 60%),
    radial-gradient(500px 280px at 10% 120%, rgba(0, 232, 122, 0.14), transparent 60%);
  pointer-events: none;
}
.cta-band h2 { font-size: 32px; margin-bottom: 14px; font-weight: 600; color: var(--text-primary); font-family: var(--font-display); letter-spacing: -0.01em; position: relative; }
.cta-band p { margin-bottom: 28px; color: var(--text-secondary); font-size: 16px; position: relative; }
.cta-band .btn { position: relative; }
.cta-band .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.35);
}
.cta-band .btn-primary:hover { background: var(--accent-hi); transform: translateY(-2px); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 56px 0 28px; background: var(--surface-muted); }
.footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: 40px; }
.footer-brand { max-width: 280px; }
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.footer-col a { font-size: 13.5px; color: var(--text-secondary); transition: color 0.15s var(--ease); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--border); }
.footer-bottom span { font-size: 13px; color: var(--text-muted); }
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 17px; transition: all 0.16s var(--ease);
}
.footer-social a:hover { color: var(--accent); border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

@media (max-width: 700px) {
  .footer-cols { gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 16px; }
}

/* ================= APP SHELL ================= */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar .brand { padding: 0 8px 26px; }
.nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 16px 10px 6px; }
.nav-item {
  /* Rendered as both <a> and <button> (Log out). A button carries the UA's
     default light-grey background and border, which was invisible on the old
     light theme but shows as a grey block on a dark one. */
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 450;
  color: var(--text-secondary);
  margin-bottom: 3px;
  position: relative;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.nav-item:hover { background: var(--surface-muted); color: var(--text-primary); }
.nav-item.active {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent), var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.nav-item .ico { width: 18px; text-align: center; font-size: 17px; }
.sidebar .spacer { flex: 1; }
.sidebar .user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent-hi), var(--accent-dark));
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.user-row .name { font-size: 13px; font-weight: 600; }
.user-row .plan { font-size: 12px; color: var(--text-muted); }

.app-main { flex: 1; min-width: 0; }
.app-topbar {
  height: 68px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(16, 21, 18, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.app-topbar h1 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.app-content { padding: 32px; max-width: 1120px; }

/* metric cards */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.metric-card .label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.metric-card .value { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.metric-card.success .value { color: var(--accent); }

/* tables */
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 26px; box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 13px 18px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}
tbody td { padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.14s var(--ease); }
tbody tr:hover { background: var(--surface-muted); }
td.num, th.num { text-align: right; }

.badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; }
.badge-success { background: var(--accent-light); color: var(--accent); }
.badge-warning { background: var(--amber-light); color: var(--amber); }
.badge-danger { background: var(--red-light); color: var(--red); }
.badge-info { background: var(--blue-light); color: var(--blue); }
.badge-muted { background: var(--surface-muted); color: var(--text-secondary); }

.filters { display: flex; gap: 8px; margin-bottom: 16px; }
.filter-pill { font-size: 13px; padding: 6px 14px; border-radius: 999px; color: var(--text-secondary); background: var(--surface-muted); }
.filter-pill.active { background: var(--accent); color: var(--on-accent); }

.section-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-title-row h2 { font-size: 16px; font-weight: 500; }

.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }

.list-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px; box-shadow: var(--shadow-xs); }
.list-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; border-radius: var(--radius); transition: background 0.14s var(--ease); }
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--surface-muted); }

.progress-bar { height: 6px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; margin-top: 6px; }
.progress-bar span { display: block; height: 100%; background: var(--accent); }

.empty-note { font-size: 13px; color: var(--text-muted); padding: 14px 18px; }

/* ---------- Mini bar chart ---------- */
.mini-chart { margin-top: 22px; padding-top: 4px; }
.mini-chart-bars { display: flex; align-items: flex-end; gap: 18px; height: 120px; }
.mini-chart-bars.compact { height: 100px; }
.mini-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.mini-chart-bar { width: 100%; border-radius: 6px 6px 0 0; background: var(--accent-light); }
.mini-chart-bar.is-current { background: var(--accent); }
.mini-chart-label { font-size: 12px; color: var(--text-muted); margin-top: 10px; text-align: center; line-height: 1.5; }
.mini-chart-label strong { display: block; color: var(--text-primary); font-weight: 500; }

@media (max-width: 900px) {
  .grid-3, .grid-2, .pricing-grid, .modes-grid, .metric-grid, .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
}

/* ---------- Marketing page layout helpers ---------- */
.section-muted { background: var(--surface-muted); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pricing-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin: 0 auto; }

/* Who each plan is for — the line that makes $19 vs $39 legible at a glance. */
.price-card .plan-who { font-size: 12px; color: var(--text-muted); margin: -8px 0 14px; line-height: 1.4; }

/* "Everything in Starter, plus:" — a heading for the list rather than a
   feature, so it gets no tick and reads as the lead-in it is. */
.price-card ul li.inherits {
  padding-left: 0;
  color: var(--text-primary);
  font-weight: 500;
  border-top: none;
}
.price-card ul li.inherits::before { content: none; }

/* ---------- Plan comparison table ---------- */
.compare-wrap { max-width: 1040px; margin: 44px auto 0; }
.compare-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  text-align: center; margin-bottom: 18px;
}
/* The table is wider than a phone; it scrolls inside this box so the page
   itself never scrolls sideways. */
.compare-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.compare-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.compare-table thead th {
  text-align: center;
  font-weight: 600;
  color: var(--text-primary);
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
  position: sticky; top: 0;
}
.compare-table thead th:first-child { text-align: left; }
.compare-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--text-secondary);
  padding: 11px 12px;
  border-top: 0.5px solid var(--border);
}
.compare-table tbody td {
  text-align: center;
  padding: 11px 12px;
  border-top: 0.5px solid var(--border);
  white-space: nowrap;
}
.compare-table tbody tr:hover th,
.compare-table tbody tr:hover td { background: var(--surface-muted); }
.cmp-yes { color: var(--accent); font-weight: 600; }
.cmp-no { color: var(--border-stronger); }
.cmp-soon { color: var(--text-muted); font-size: 11.5px; }
/* Declared after the generic breakpoint above, which this rule would otherwise
   override. Three dense feature lists side by side squeeze to ~220px below this
   width, which breaks every "Coming soon" badge onto its own line — one
   full-width column reads far better than three cramped ones. */
@media (max-width: 900px) {
  .pricing-grid-3 { grid-template-columns: 1fr; max-width: 440px; }
}
.text-center-note { text-align: center; font-size: 13px; margin-top: 24px; color: var(--text-secondary); }
.link-underline { text-decoration: underline; }

/* ---------- Hero dashboard preview (3D) ---------- */
.hero-3d-stage {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  perspective: 1400px;
  padding: 30px 40px;
}
.hero-preview-frame {
  max-width: 760px; margin: 0 auto;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, var(--accent-light), var(--border-strong), var(--accent-light));
  transform: rotateX(6deg) rotateY(-8deg);
  transform-style: preserve-3d;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.7),
    0 10px 24px -8px rgba(0, 232, 122, 0.16);
  transition: box-shadow 0.3s ease;
  will-change: transform;
}
.hero-3d-stage:hover .hero-preview-frame {
  box-shadow:
    0 40px 70px -18px rgba(0, 0, 0, 0.75),
    0 14px 28px -8px rgba(0, 232, 122, 0.22);
}
.hero-preview {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 17px;
  padding: 24px 28px 26px; text-align: left;
}

.floating-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.6);
  font-size: 12.5px;
  transform: translateZ(40px);
  animation: chip-float 4.5s ease-in-out infinite;
}
.floating-chip i { font-size: 18px; color: var(--accent); }
.floating-chip .fc-title { font-weight: 500; color: var(--text-primary); }
.floating-chip .fc-sub { color: var(--text-muted); font-size: 11.5px; }
.chip-invoice { top: 8%; right: -2%; animation-delay: 0s; }
.chip-tax { bottom: 6%; left: -4%; animation-delay: 1.2s; }

@keyframes chip-float {
  0%, 100% { transform: translateZ(40px) translateY(0); }
  50% { transform: translateZ(40px) translateY(-8px); }
}

@media (max-width: 900px) {
  .floating-chip { display: none; }
  .hero-preview-frame { transform: none; }
  .hero-3d-stage { padding: 0; }
}

@media (max-width: 640px) {
  .hero { padding: 72px 0 56px; }
  .hero h1 { font-size: 38px; }
  .hero p.lead { font-size: 17px; }
  .section { padding: 60px 0; }
  .section-head h2 { font-size: 27px; }
  .cta-band { padding: 48px 28px; }
  .cta-band h2 { font-size: 26px; }
  .site-nav { display: none; }
}
.hero-preview .hp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 0.5px solid var(--border); }
.hero-preview .hp-head span { font-size: 13px; color: var(--text-muted); }
.hero-preview .hp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.hero-preview .hp-metric { background: var(--surface-muted); border-radius: var(--radius); padding: 14px 16px; }
.hero-preview .hp-metric .hp-label { font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.hero-preview .hp-metric .hp-value { font-size: 18px; font-weight: 500; }
.hero-preview .hp-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; border-top: 0.5px solid var(--border); font-size: 13.5px; }
.hero-preview .hp-row:first-of-type { border-top: none; }

/* ---------- Google OAuth button ---------- */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); font-size: 14px; font-weight: 500;
  color: var(--text-primary); text-decoration: none; cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
  font-family: var(--font);
}
.btn-google:hover { background: var(--surface-muted); border-color: var(--border-stronger); }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--text-muted); font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ---------- Auth pages ---------- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 40px 36px; box-shadow: var(--shadow-lg); }
.auth-card .brand { justify-content: center; margin-bottom: 26px; }
.auth-card h1 { text-align: center; font-size: 24px; margin-bottom: 6px; font-family: var(--font-display); font-weight: 600; }
.auth-card .auth-sub { text-align: center; font-size: 14px; color: var(--text-secondary); margin-bottom: 28px; }
.auth-card .auth-footer { text-align: center; font-size: 13px; color: var(--text-secondary); margin-top: 20px; }
.form-error { display: none; font-size: 13px; color: var(--red); background: var(--red-light); padding: 10px 12px; border-radius: var(--radius); margin-bottom: 16px; }
.form-error.show { display: block; }

/* ---------- Utility classes (replace inline styles) ---------- */
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.mb-xs { margin-bottom: 6px; }
.mb-sm { margin-bottom: 10px; }
.mb-md { margin-bottom: 14px; }
.mb-lg { margin-bottom: 24px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.card-description { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.plain-list { margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-secondary); }
.plain-list li { padding: 5px 0; border-top: 0.5px solid var(--border); }
.plain-list li:first-child { border-top: none; }
.text-strong { color: var(--text-primary); font-weight: 500; }

/* ---------- Trend indicators ---------- */
.metric-card { position: relative; }
.metric-card .metric-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--accent); margin-bottom: 10px;
}
.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; margin-top: 6px; }
.trend-up { color: var(--accent); }
.trend-down { color: var(--red); }
.trend-neutral { color: var(--text-muted); }
.metric-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ---------- Smart insight card ---------- */
.insight-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--accent-light); border-radius: var(--radius-lg);
  padding: 18px 20px; margin-bottom: 24px;
}
.insight-card .insight-icon {
  width: 34px; height: 34px; border-radius: 9px; background: var(--surface);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.insight-card h3 { font-size: 14px; font-weight: 500; color: var(--accent); margin-bottom: 4px; }
.insight-card p { font-size: 13px; color: var(--accent); opacity: 0.85; margin: 0; }

/* ---------- Your Billvy Brief ---------- */
.brief-card { margin-bottom: 24px; }
.brief-card .card-description { margin-bottom: 14px; }
.brief-findings { display: flex; flex-direction: column; gap: 10px; }
.brief-finding { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.brief-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.brief-dot.red { background: var(--red); }
.brief-dot.yellow { background: var(--amber); }
.brief-dot.green { background: var(--accent); }
.brief-setup-note { font-size: 12.5px; color: var(--text-muted); margin-top: 12px; }

/* ---------- Ask Billvy ---------- */
.ask-billvy-panel { margin-bottom: 24px; }
.ask-billvy-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ask-billvy-head .icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(150deg, var(--surface-muted), var(--accent-light));
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.ask-billvy-sub { font-size: 13px; color: var(--text-muted); margin: 4px 0 14px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ask-chip {
  font-size: 12.5px; padding: 7px 13px; border-radius: 999px;
  background: var(--surface-muted); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; transition: background 0.14s var(--ease), border-color 0.14s var(--ease);
}
.ask-chip:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.ask-form { display: flex; gap: 8px; }
.ask-form input { flex: 1; }
.ask-answer {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-lg);
  background: var(--surface-muted); border: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
}
.ask-answer.unverified { border-color: var(--amber); background: var(--amber-light); }
.ask-answer-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.ask-answer-note.caution { color: var(--amber); }
.ask-not-configured { font-size: 13px; color: var(--text-muted); padding: 4px 0; }

/* ---------- Toolbar: search + filters ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 9px 13px; font-size: 13px; color: var(--text-muted); min-width: 220px; flex: 1; max-width: 320px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.search-box:focus-within { border-color: var(--accent); box-shadow: var(--ring-accent); }
.search-box input {
  border: none; outline: none; background: transparent; font-size: 13px; color: var(--text-primary); width: 100%; font-family: var(--font);
}
.search-box i { font-size: 15px; }
.toolbar-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- Bulk actions ---------- */
.bulk-bar {
  display: none; align-items: center; justify-content: space-between;
  background: var(--accent-light); border-radius: var(--radius); padding: 10px 16px; margin-bottom: 12px;
}
.bulk-bar.show { display: flex; }
.bulk-bar .text-sm { color: var(--accent); }
th.checkbox-col, td.checkbox-col { width: 36px; }

/* ---------- Table extras ---------- */
tbody tr.clickable { cursor: pointer; }
.empty-state { text-align: center; padding: 48px 24px; }
.empty-state i { font-size: 26px; color: var(--text-muted); margin-bottom: 10px; display: block; }
.empty-state p { font-size: 13px; color: var(--text-muted); }

/* ---------- Modal ---------- */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  align-items: center; justify-content: center; z-index: 200; padding: 20px;
}
.modal-overlay.open { display: flex; animation: overlay-in 0.2s var(--ease); }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border);
  width: 100%; max-width: 460px; padding: 26px; max-height: 90vh; overflow: auto;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.24s var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-head h3 { font-size: 17px; font-weight: 500; }
.modal-close { border: none; background: transparent; cursor: pointer; color: var(--text-muted); font-size: 18px; line-height: 1; padding: 4px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.form-group input, .form-group textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-size: 14px; font-family: var(--font); color: var(--text-primary); background: var(--surface);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.form-group input:focus, .form-group textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring-accent);
}
.form-group select { width: 100%; }

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 9px 34px 9px 12px;
  font-size: 13.5px;
  font-family: var(--font);
  color: var(--text-primary);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6862' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
select:hover { background-color: var(--surface-muted); border-color: var(--border-stronger); }
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 40px; width: 100%; }
.password-toggle {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; padding: 2px; line-height: 1;
}
.password-toggle:hover { color: var(--text-primary); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--text-primary); color: var(--bg);
  padding: 12px 18px; border-radius: var(--radius); font-size: 13px; z-index: 300;
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ---------- Security / trust ---------- */
.security-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 0.5px solid var(--border); }
.security-row:first-child { border-top: none; }
.security-row .label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.security-row .label i { font-size: 17px; color: var(--accent); }

/* ---------- Settings tabs ---------- */
.settings-layout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.settings-tabs { display: flex; flex-direction: column; gap: 2px; }
.settings-tab {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius);
  font-size: 13.5px; color: var(--text-secondary); cursor: pointer; border: none; background: transparent; text-align: left; width: 100%;
}
.settings-tab:hover { background: var(--surface-muted); color: var(--text-primary); }
.settings-tab.active { background: var(--accent-light); color: var(--accent); font-weight: 500; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.billing-toggle.inline { margin: 0 0 20px; }

@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; }
}

/* ---------- Entrance + scroll reveal ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero .eyebrow { animation: rise-in 0.6s var(--ease) both; }
.hero h1 { animation: rise-in 0.6s var(--ease) 0.06s both; }
.hero p.lead { animation: rise-in 0.6s var(--ease) 0.12s both; }
.hero-actions { animation: rise-in 0.6s var(--ease) 0.18s both; }
.trust-strip { animation: rise-in 0.6s var(--ease) 0.24s both; }
.hero-stats { animation: rise-in 0.7s var(--ease) 0.3s both; }
.hero-3d-stage { animation: rise-in 0.8s var(--ease) 0.36s both; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Legal pages ---------- */
.legal-body h2 { font-size: 1.05rem; font-weight: 600; margin: 28px 0 8px; color: var(--text-primary); }
.legal-body p { font-size: 0.95rem; line-height: 1.75; color: var(--text-secondary); margin-bottom: 12px; }
.legal-body ul { padding-left: 20px; margin-bottom: 12px; }
.legal-body ul li { font-size: 0.95rem; line-height: 1.75; color: var(--text-secondary); margin-bottom: 4px; }
.legal-body a { color: var(--accent); }

/* ---------- FAQ accordion ---------- */
.faq-list { display: flex; flex-direction: column; gap: 1px; }
.faq-item { border-top: 0.5px solid var(--border); }
.faq-item:last-child { border-bottom: 0.5px solid var(--border); }
.faq-item summary {
  padding: 14px 4px; font-size: 0.95rem; font-weight: 500; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  color: var(--text-primary);
}
.faq-item summary::after { content: '+'; font-size: 1.2rem; color: var(--text-muted); transition: transform 0.2s; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { padding: 0 4px 14px; font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .sidebar, .app-topbar, .toolbar-actions { display: none !important; }
  .app-shell { display: block; }
  .app-main { padding: 0; }
  .app-content { max-width: 100% !important; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  body { background: #fff; color: #000; }
  .badge { border: 1px solid currentColor; }
  .list-card { border: 1px solid #ccc; }
}
/* probe */

/* Payment reminders card ------------------------------------------------- */

.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}
.switch-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: var(--border-strong);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
.switch-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform 0.15s ease;
}
.switch-row input[type="checkbox"]:checked { background: var(--accent); }
.switch-row input[type="checkbox"]:checked::after { transform: translateX(17px); }
.switch-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

.reminder-history { margin-top: 16px; }
.reminder-history h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }

/* Keeps the row's action buttons together instead of letting them stretch
   the cell apart once there is more than one. */
.row-actions { white-space: nowrap; }
.row-actions .icon-btn + .icon-btn { margin-left: 2px; }

/* Publish date on the blog index cards. Small and muted — it is a trust
   signal for the reader (and for Google on tax/finance content), not a
   headline, so it sits above the title without competing with it. */
.blog-index-date {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

/* Ask Billvy — the suggestion list ---------------------------------------- */

/* Rendered as one bordered list with divided rows rather than loose pills.
   Wrapped into rows they read as a word cloud and the eye has to re-find the
   left edge on every line; as a list they scan as the menu of questions they
   actually are, and each row gets a clear hit target. */
.ask-vertical .ask-chips {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-muted);
  margin-bottom: 16px;
}
.ask-vertical .ask-chip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 13.5px;
  color: var(--text-secondary);
  transition: background 0.13s var(--ease), color 0.13s var(--ease);
}
/* Divider between rows only — a border on every row would double up against
   the container's own edge. */
.ask-vertical .ask-chip + .ask-chip { border-top: 1px solid var(--border); }

.ask-chip-ico {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 14px;
}
.ask-chip-text { flex: 1; min-width: 0; }

/* The go affordance. Present but quiet until the row is hovered, so eight of
   them in a column do not read as eight competing buttons. */
.ask-chip-go {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  transition: background 0.13s var(--ease), color 0.13s var(--ease), border-color 0.13s var(--ease);
}
.ask-vertical .ask-chip:hover { background: var(--surface); color: var(--text-primary); }
.ask-vertical .ask-chip:hover .ask-chip-go {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.ask-vertical .ask-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ask-vertical .ask-chip:disabled { opacity: 0.55; cursor: not-allowed; }
.ask-vertical .ask-chip:disabled:hover { background: transparent; color: var(--text-secondary); }
.ask-vertical .ask-chip:disabled:hover .ask-chip-go {
  background: transparent; border-color: var(--border); color: var(--text-muted);
}

/* This is the flagship feature, so the panel is allowed to carry a little
   more presence than a plain card. */
.ask-billvy-panel.ask-vertical { border-color: var(--accent-dark); }

/* Invoiced-over-time chart ------------------------------------------------ */

.chart-card { padding: 20px 22px 18px; }

.chart-legend { display: inline-flex; gap: 16px; align-items: center; font-size: 12px; color: var(--text-muted); }
.chart-key { display: inline-flex; align-items: center; gap: 6px; }
.chart-key .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.dot-paid { background: var(--accent); }
.dot-open { background: var(--accent-light); border: 1px solid var(--accent-dark); }

.chart-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.chart-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chart-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.chart-stat-value { font-size: 20px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.chart-stat-value.accent { color: var(--accent); }
.chart-stat-sub { font-size: 11.5px; color: var(--text-muted); }

/* The plot area. The gridlines sit behind the bars in the same box so the
   two always share one coordinate space. */
.big-chart { position: relative; height: 190px; margin-left: 44px; }
.big-chart-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.grid-line { position: relative; border-top: 1px solid var(--border); height: 0; }
.grid-line span {
  position: absolute; right: calc(100% + 8px); top: -0.6em;
  font-size: 10.5px; color: var(--text-muted); white-space: nowrap;
}

.big-chart-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 14px; }
.big-chart-col { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.big-chart-stack {
  position: relative; width: 100%; border-radius: 7px 7px 2px 2px; overflow: hidden;
  background: var(--accent-light); border: 1px solid var(--accent-dark);
  transition: filter 0.14s var(--ease);
}
.big-chart-col:hover .big-chart-stack { filter: brightness(1.25); }
/* Paid sits at the bottom of the stack, growing upward out of the total. */
.seg-paid { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); }
.seg-open { position: absolute; inset: 0; }
.big-chart-col.is-current .big-chart-stack { box-shadow: 0 0 0 1px var(--accent-hi), 0 0 18px var(--accent-glow); }

.big-chart-labels { display: flex; gap: 14px; margin: 10px 0 0 44px; }
.big-chart-label { flex: 1; display: flex; flex-direction: column; gap: 1px; text-align: center; }
.big-chart-label .m { font-size: 12px; color: var(--text-muted); }
.big-chart-label strong { font-size: 14px; color: var(--text-primary); font-weight: 600; }
.big-chart-label .c { font-size: 11px; color: var(--text-muted); }
.big-chart-label.is-current .m,
.big-chart-label.is-current strong { color: var(--accent); }

.chart-foot { font-size: 12.5px; color: var(--text-muted); margin: 14px 0 0; }

@media (max-width: 720px) {
  .chart-summary { grid-template-columns: repeat(2, 1fr); }
  .big-chart { height: 150px; margin-left: 40px; }
  .big-chart-bars, .big-chart-labels { gap: 7px; }
  .big-chart-label strong { font-size: 12.5px; }
  .big-chart-label .c { display: none; }
}

/* Mobile app shell ------------------------------------------------------- */

/* Hidden on desktop; the drawer only exists below the breakpoint. */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 12px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 19px;
    cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Off-canvas rather than sticky. transform (not left/display) so it
     animates on the compositor and stays reachable by screen readers. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100dvh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.22s var(--ease);
    box-shadow: none;
    overflow-y: auto;
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, 0.55); }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  body.nav-locked { overflow: hidden; }

  /* The topbar title has to share the row with the toggle and the action
     button, so let it shrink and ellipsis rather than push them off-screen. */
  .app-topbar { padding: 0 16px; height: 60px; gap: 10px; }
  .app-topbar h1 {
    font-size: 17px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-content { padding: 20px 16px; }

  /* Grid and flex items default to min-width:auto, so a wide table refuses to
     shrink below its content and drags the whole page sideways. This is what
     made the dashboard scroll horizontally rather than the table scrolling
     inside its own card. */
  .two-col > *,
  .app-content > * { min-width: 0; }

  /* Let the top bar wrap instead of forcing its buttons off-screen. Pages with
     one action still fit on a single line; only a crowded bar (invoice detail
     has three) drops to a second row. */
  .app-topbar { flex-wrap: wrap; height: auto; min-height: 60px; padding: 10px 16px; }
  .app-topbar .toolbar-actions { gap: 6px; flex-wrap: wrap; }

  /* For tables that sit directly in a card rather than a .table-card. */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* Anything that forced an explicit column count inline still needs to fold. */
  .metric-grid[style] { grid-template-columns: repeat(2, 1fr) !important; }
  .two-col { grid-template-columns: 1fr; gap: 16px; }

  /* Tables are the other thing that broke the layout: they set width:100% but
     their content has a natural minimum, so the page scrolled sideways as a
     whole. Let each table scroll inside its own card instead. */
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-card table { min-width: 560px; }

  .modal { width: calc(100vw - 32px); max-width: none; }
  .form-row { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .billing-toggle { width: 100%; overflow-x: auto; }
}

@media (max-width: 560px) {
  .metric-grid,
  .metric-grid[style] { grid-template-columns: 1fr !important; }
  .app-topbar .btn { font-size: 12px; padding: 7px 11px; }
}

/* Ask Billvy — suggestions dropdown --------------------------------------- */

.ask-form { position: relative; align-items: stretch; }
.ask-suggest { position: relative; flex: 0 0 auto; display: flex; }
.ask-suggest-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ask-suggest-toggle .ti-bulb { color: var(--accent); }
.ask-suggest-toggle .chev { font-size: 13px; opacity: 0.7; transition: transform 0.15s var(--ease); }
.ask-suggest-toggle[aria-expanded="true"] { border-color: var(--accent-dark); }
.ask-suggest-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* The list keeps its row styling from .ask-vertical .ask-chips; this only
   turns it into a floating panel. The explicit [hidden] rule matters:
   .ask-chips sets display:flex, which would otherwise override it. */
.ask-vertical .ask-chips.ask-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(420px, calc(100vw - 48px));
  max-height: min(380px, 60vh);
  overflow-y: auto;
  margin: 0;
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.ask-vertical .ask-chips.ask-menu[hidden] { display: none; }

@media (max-width: 560px) {
  /* Icon-only toggle so the input keeps most of the row on a phone. */
  .ask-suggest-toggle .lbl { display: none; }
  .ask-vertical .ask-chips.ask-menu { right: auto; left: 0; }
  .ask-suggest { position: static; }
  .ask-vertical .ask-chips.ask-menu { width: 100%; }
}

/* Ask Billvy — voice ------------------------------------------------------ */

.ask-mic { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; font-size: 16px; }
.ask-mic .ti-microphone { color: var(--accent); }
/* A pulsing ring while listening, so it is obvious the page is recording —
   an always-on mic that looks idle would be a trust problem. */
.ask-mic.is-listening {
  background: var(--accent);
  border-color: var(--accent);
  animation: ask-mic-pulse 1.3s ease-out infinite;
}
.ask-mic.is-listening .ti-microphone { color: var(--on-accent); }
@keyframes ask-mic-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  100% { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ask-mic.is-listening { animation: none; box-shadow: 0 0 0 3px var(--accent-glow); }
}

/* Ask Billvy — suggestions under the question box ------------------------- */

/* The panel is lifted above the cards that follow it. Its suggestion list
   hangs below the panel's edge, and without this the metric cards further
   down the page painted over the list. Kept below the sticky top bar (20)
   and the mobile nav drawer (55+). */
.ask-billvy-panel { position: relative; z-index: 15; }

.ask-input-wrap { position: relative; flex: 1; display: flex; min-width: 0; }
.ask-input-wrap input { flex: 1; min-width: 0; }

/* Anchored to the input and matching its width, rather than to a button. */
.ask-vertical .ask-chips.ask-menu {
  left: 0;
  right: 0;
  width: auto;
  top: calc(100% + 6px);
  max-height: none;
  overflow: visible;
  color-scheme: dark;
}
@media (max-width: 560px) {
  .ask-vertical .ask-chips.ask-menu { width: auto; }
  /* "Ask Billvy" shortens to "Ask" so the input keeps room on a phone. */
  .ask-btn-extra { display: none; }
}
@media (max-width: 560px) {
  /* On a phone the input alone is narrow, so the list anchors to the whole
     form row (input + buttons) instead, keeping each question on one line. */
  .ask-input-wrap { position: static; }
}

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

/* Tints shared by the cards, stat icons and panel icons. */
.tint-red    { --tint-bg: rgba(255, 90, 90, 0.10);   --tint-border: rgba(255, 90, 90, 0.28);   --tint-strong: #ff6b6b; }
.tint-green  { --tint-bg: rgba(0, 232, 122, 0.10);   --tint-border: rgba(0, 232, 122, 0.28);   --tint-strong: var(--accent); }
.tint-blue   { --tint-bg: rgba(90, 150, 255, 0.11);  --tint-border: rgba(90, 150, 255, 0.28);  --tint-strong: #6fa9ff; }
.tint-purple { --tint-bg: rgba(160, 110, 255, 0.11); --tint-border: rgba(160, 110, 255, 0.28); --tint-strong: #b38eff; }

.dash-title { min-width: 0; }
.dash-title h1 { margin: 0; font-size: 20px; }
.dash-subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.dash-actions { display: flex; align-items: center; gap: 10px; }
.dash-range-wrap { position: relative; display: inline-flex; align-items: center; }
.dash-range-wrap .ti { position: absolute; pointer-events: none; color: var(--text-secondary); font-size: 15px; }
.dash-range-wrap .ti-calendar { left: 11px; }
.dash-range-wrap .ti-chevron-down { right: 10px; font-size: 13px; }
.dash-range-wrap select {
  appearance: none; -webkit-appearance: none;
  background: var(--surface-muted); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 32px 8px 34px; font: inherit; font-size: 13px; cursor: pointer; color-scheme: dark;
}
.dash-range-wrap select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dash-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.dash-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px;
  border-radius: var(--radius-lg); border: 1px solid var(--tint-border);
  background: linear-gradient(145deg, var(--tint-bg), var(--surface) 72%);
  color: inherit; text-decoration: none;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}
.dash-card:hover { transform: translateY(-2px); border-color: var(--tint-strong); }
.dash-card:focus-visible { outline: 2px solid var(--tint-strong); outline-offset: 2px; }
.dash-card-ico, .cf-stat-ico, .dash-panel-ico {
  flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tint-bg); color: var(--tint-strong);
}
.dash-card-ico { width: 46px; height: 46px; font-size: 22px; }
.dash-card-body { min-width: 0; }
.dash-card-label { font-size: 13.5px; color: var(--text-secondary); }
.dash-card-value { font-size: 25px; font-weight: 700; color: var(--text-primary); margin: 4px 0 6px; letter-spacing: -0.01em; white-space: nowrap; }
.tint-green .dash-card-value { color: var(--accent); }
.dash-card-sub { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.neg { color: #ff7a7a; }
.pos { color: var(--accent); }

.dash-cashflow { padding: 20px 22px; margin: 22px 0; }
/* The chart and list panels are .card, and the card hover lift would make the
   whole chart jump under the pointer while someone is reading it. */
.dash-cashflow:hover, .dash-panel:hover { transform: none; }
.cf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cf-head h2 { margin: 0; font-size: 18px; }
.cf-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.cf-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cf-tabs button { background: none; border: none; color: var(--text-secondary); padding: 7px 16px; font: inherit; font-size: 13px; cursor: pointer; }
.cf-tabs button + button { border-left: 1px solid var(--border); }
.cf-tabs button.active { background: var(--accent-light); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-dark); }
.cf-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.cf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 0; border-bottom: 1px solid var(--border); }
.cf-stat { display: flex; align-items: center; gap: 12px; padding: 0 16px; min-width: 0; }
.cf-stat:first-child { padding-left: 0; }
.cf-stat + .cf-stat { border-left: 1px solid var(--border); }
.cf-stat-ico { width: 40px; height: 40px; font-size: 18px; }
.cf-stat-v { font-size: 19px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.cf-stat-l { font-size: 12.5px; color: var(--text-muted); }

.cf-plot { position: relative; height: 210px; margin: 24px 0 0 52px; }
.cf-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.cf-line { position: relative; height: 0; border-top: 1px solid var(--border); }
.cf-line span { position: absolute; right: calc(100% + 10px); top: -0.65em; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.cf-groups { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.cf-group { position: relative; flex: 1; height: 100%; display: flex; justify-content: center; align-items: flex-end; outline: none; }
.cf-bars { display: flex; align-items: flex-end; gap: 6px; height: 100%; width: min(62%, 96px); }
.cf-bar { flex: 1; border-radius: 4px 4px 0 0; transition: filter 0.12s var(--ease); }
.cf-bar.inv { background: rgba(0, 232, 122, 0.08); border: 1.5px solid var(--accent-dark); border-bottom: none; }
.cf-bar.paid { background: var(--accent); }
.cf-group:hover .cf-bar, .cf-group:focus-visible .cf-bar { filter: brightness(1.2); }
.cf-group:focus-visible .cf-bars { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.cf-tip {
  position: absolute; top: 4px; left: calc(50% + 26px); z-index: 2; min-width: 160px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 0.12s var(--ease), transform 0.12s var(--ease);
}
/* Near the right edge the tooltip opens to the left so it stays in the card. */
.cf-group:nth-last-child(-n+2) .cf-tip { left: auto; right: calc(50% + 26px); }
.cf-group:hover .cf-tip, .cf-group:focus-visible .cf-tip { opacity: 1; transform: none; }
.cf-tip strong { display: block; margin-bottom: 5px; color: var(--text-primary); font-weight: 500; }
.cf-tip span { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); line-height: 1.7; }
.cf-tip b { margin-left: auto; padding-left: 14px; color: var(--text-primary); }
.cf-xlabels { display: flex; margin: 10px 0 0 52px; }
.cf-xlabels span { flex: 1; text-align: center; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.cf-xlabels span.faint { visibility: hidden; }
.cf-legend { display: flex; gap: 22px; margin-top: 16px; font-size: 13px; color: var(--text-secondary); }
.cf-legend span { display: inline-flex; align-items: center; gap: 8px; }
.key { width: 13px; height: 13px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
.key-invoiced { border: 1.5px solid var(--accent-dark); background: rgba(0, 232, 122, 0.08); }
.key-paid { background: var(--accent); }
.cf-note { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); }
.cf-note:empty { display: none; }

.dash-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.dash-panel { padding: 18px 18px 8px; }
.dash-panel-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.dash-panel-head h2 { margin: 0; font-size: 16px; }
.dash-panel-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }
.dash-panel-ico { width: 40px; height: 40px; font-size: 18px; }
.dash-viewall { margin-left: auto; font-size: 13px; color: var(--accent); white-space: nowrap; text-decoration: none; }
.dash-viewall:hover { text-decoration: underline; }
.dash-row { display: flex; align-items: center; gap: 12px; padding: 13px 6px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; font-size: 13.5px; border-radius: 8px; }
.dash-row:last-of-type { border-bottom: none; }
.dash-row:hover { background: var(--surface-muted); }
.dash-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dash-row-ico { color: var(--text-muted); font-size: 18px; }
.dash-row-num { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.dash-row-name { flex: 1; min-width: 0; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-name.strong { color: var(--text-primary); }
.dash-row-meta { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }
.dash-row-amt { min-width: 86px; text-align: right; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.dash-row-go { color: var(--text-muted); }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.chip-red { color: #ff7a7a; background: rgba(255, 90, 90, 0.10); border-color: rgba(255, 90, 90, 0.35); }
.chip-amber { color: #f5c451; background: rgba(245, 196, 81, 0.10); border-color: rgba(245, 196, 81, 0.35); }
.dash-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  background: var(--surface-muted); border: 1px solid var(--border-strong);
}
.dash-empty { display: flex; align-items: center; gap: 8px; padding: 22px 6px; font-size: 13.5px; color: var(--text-muted); }
.dash-empty .ti-circle-check { color: var(--accent); }
.dash-more { display: block; padding: 10px 6px 12px; font-size: 12.5px; color: var(--text-muted); text-decoration: none; }
.dash-more:hover { color: var(--text-secondary); }

@media (max-width: 1100px) {
  .dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .cf-stat:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 900px) {
  .dash-lists { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dash-cards { grid-template-columns: 1fr; }
  .dash-subtitle { display: none; }
  .dash-range-wrap select { padding-left: 30px; }
  .cf-tabs button { padding: 7px 11px; }
  .cf-plot { height: 170px; margin-left: 40px; }
  .cf-xlabels { margin-left: 40px; }
  .dash-row-meta { display: none; }
  .dash-row-amt { min-width: 0; }
}

/* Free plan invoice allowance on the Invoices page. */
.inv-usage { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 12px;
  font-size: 13px; color: var(--text-secondary); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 10px; }
.inv-usage .ti { color: var(--accent); }
.inv-usage.is-low { border-color: rgba(245, 196, 81, 0.45); }
.inv-usage.is-low .ti { color: #f5c451; }
.inv-usage.is-full { border-color: rgba(255, 90, 90, 0.45); }
.inv-usage.is-full .ti { color: #ff7a7a; }

/* Dashboard UX pass ----------------------------------------------------------- */

/* #10 The Ask Billvy panel stays put under the pointer while typing. */
.ask-billvy-panel:hover { transform: none; }
/* #11 A locked input reads as locked on the dark theme, not as a broken grey box. */
.ask-form input:disabled {
  background: var(--surface-muted); color: var(--text-muted); -webkit-text-fill-color: var(--text-muted);
  border-color: var(--border); cursor: not-allowed; opacity: 1;
}
/* #16 */
.ask-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* #12 A comfortable hit area without moving the text. */
.dash-viewall { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px; margin: -4px -10px 0 auto; border-radius: 8px; }
.dash-viewall:hover { background: var(--surface-muted); text-decoration: none; }

/* #6 One line per card subtitle; the copy is short enough to fit. */
.dash-card-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-card-sub .ti { vertical-align: -2px; }

/* #4 Top bar: greeting left, one action right, one row on a phone. */
.dash-title { flex: 1; }
.dash-create { display: inline-flex; align-items: center; gap: 6px; }

/* #1 Get started */
.dash-start { padding: 18px 20px; margin-bottom: 18px; border-color: var(--accent-dark); }
.dash-start:hover { transform: none; }
.dash-start-head { display: flex; gap: 12px; align-items: flex-start; }
.dash-start-head h2 { margin: 0; font-size: 17px; }
.dash-start-head p { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); }
.dash-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dash-step a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 10px; color: inherit; text-decoration: none; }
.dash-step a:hover { border-color: var(--accent-dark); background: var(--surface-muted); }
.dash-step a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-step-mark { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-strong); color: var(--text-muted); }
.dash-step.done .dash-step-mark { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dash-step.done strong { color: var(--text-muted); text-decoration: line-through; }
.dash-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-step-text strong { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.dash-step-text small { font-size: 12px; color: var(--text-muted); }

/* #3 Brief "show all" */
.brief-more { margin-top: 6px; padding: 6px 0; background: none; border: none; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
.brief-more:hover { text-decoration: underline; }
.brief-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 900px) {
  .dash-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dash-create { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .dash-create .lbl { display: none; }
  /* #5 thinned from the current month back, so the latest label always shows */
  .cf-xlabels span.alt { visibility: hidden; }
}