/* ============================================================
   Design tokens
   ============================================================ */
:root {
  /* CAXO's own indigo/purple, not the old orange DigitalMarketing brand — this is the same
     gradient pair used throughout the dashboard/Welcome page (var(--pv-indigo)/--pv-purple),
     just under the token names this marketing-page stylesheet already uses everywhere. */
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --brand-light: #eef0ff;
  --accent: #0f9b8e;
  --accent-light: #dff5f2;

  --ink: #1c1b1f;
  --ink-soft: #4a4750;
  --muted: #8a8690;

  --bg: #ffffff;
  --bg-alt: #fff8f5;
  --border: #f0e4dd;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 2px 8px rgba(28, 27, 31, 0.06);
  --shadow: 0 12px 32px rgba(28, 27, 31, 0.08);
  --shadow-brand: 0 12px 28px rgba(255, 90, 54, 0.28);

  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}

p {
  margin: 0 0 1rem;
}

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

a:hover {
  color: var(--brand-dark);
}

.text-muted-custom {
  color: var(--muted);
}

/* ============================================================
   Buttons — override Bootstrap defaults with our own look
   ============================================================ */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 0.65rem 1.4rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  border: none;
}

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

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline-primary,
.btn.btn-outline-primary {
  color: var(--brand);
  border: 2px solid var(--brand);
  background: transparent;
  padding: 0.6rem 1.35rem;
}

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

.btn-lg {
  padding: 0.85rem 1.9rem;
  font-size: 1.05rem;
}

.btn:focus,
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: none;
}

/* ============================================================
   Layout shell
   ============================================================ */
.site-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

main.site-main {
  padding: 0;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  gap: 1rem;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink);
}

.brand-mark:hover {
  color: var(--ink);
}

.brand-glyph-img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
  flex: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: nowrap;
}

.site-nav a:not(.btn) {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.site-nav a:not(.btn):hover {
  color: var(--brand);
}

/* Only two secondary links exist today — simpler and more reliable on narrow
   screens to drop them (both are also reachable by scrolling the page) than to
   add a hamburger menu for two items. */
@media (max-width: 700px) {
  .site-nav a:not(.btn) {
    display: none;
  }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--ink);
  color: #d8d4d9;
  margin-top: 5rem;
  padding: 3.5rem 0 1.5rem;
}

.site-footer h5 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.site-footer a {
  color: #d8d4d9;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer .footer-brand p {
  color: #a9a4ac;
  max-width: 320px;
}

.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: #a9a4ac;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
}
.footer-bottom-links { display: flex; gap: 1.25rem; }

/* ============================================================
   Legal pages (Terms of Service, Privacy Policy) — a narrower reading column than the
   marketing sections' full-width layout, since this is dense text meant to be read
   top-to-bottom rather than scanned.
   ============================================================ */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 5rem;
}
.legal-page h1 { font-size: 2rem; margin-bottom: 0.4rem; }
.legal-page .legal-updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 2.5rem; }
.legal-page h2 { font-size: 1.25rem; margin-top: 2.25rem; }
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page p, .legal-page li { color: var(--ink-soft); font-size: 0.98rem; }
.legal-page ul, .legal-page ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.legal-page li { margin-bottom: 0.4rem; }
.legal-page a { text-decoration: underline; }
.legal-page strong { color: var(--ink); }

/* ============================================================
   Sections (generic rhythm)
   ============================================================ */
.section {
  padding: 4.5rem 0;
}

.section-alt {
  background: var(--bg-alt);
}

.eyebrow {
  display: inline-block;
  color: var(--brand);
  background: var(--brand-light);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.section-head {
  max-width: 620px;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding: 4.5rem 0 5rem;
  background:
    radial-gradient(60% 55% at 85% 10%, var(--brand-light) 0%, transparent 70%),
    radial-gradient(45% 45% at 5% 90%, var(--accent-light) 0%, transparent 70%);
}

.hero.hero-compact {
  padding: 3rem 0 2.5rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  margin-bottom: 1.1rem;
}

.hero .lead-text {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 500px;
  margin-bottom: 2rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.hero-trust .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* ============================================================
   Sector / feature tiles
   ============================================================ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

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

.sector-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sector-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.sector-tile .icon {
  font-size: 1.8rem;
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  background: var(--brand-light);
  border-radius: 50%;
  margin-bottom: 0.75rem;
}

.sector-tile .name {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

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

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

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

.feature-card .icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.feature-card h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

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

/* ============================================================
   How it works — process steps
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

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

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

.step {
  position: relative;
  text-align: center;
  padding: 0 0.5rem;
}

.step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  position: relative;
  z-index: 1;
}

.step:nth-child(1) .step-number { background: var(--brand); }
.step:nth-child(2) .step-number { background: var(--accent); }
.step:nth-child(3) .step-number { background: var(--brand); }
.step:nth-child(4) .step-number { background: var(--accent); }

.step h5 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

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


/* ============================================================
   Dashboard preview — a framed, near-exact replica of the actual
   customer dashboard UI (sidebar + topbar + widgets), shown as the site's
   primary "first impression" so a visitor sees the real product before
   signing up, not a marketing illustration of it. Its own product palette
   (indigo/purple/pink) is deliberately distinct from the site's warm coral
   marketing brand — that contrast is what sells "this is real software."
   ============================================================ */
:root {
  --pv-indigo: #4f46e5;
  --pv-indigo-dark: #3730a3;
  --pv-purple: #7c3aed;
  --pv-pink: #ec4899;
  --pv-green: #16a34a;
  --pv-amber: #d97706;
  --pv-blue: #2563eb;
  --pv-bg: #f7f8fc;
  --pv-border: #ecedf5;
  --pv-text: #1e2130;
  --pv-muted: #80839a;
}

.dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
  display: inline-block;
}

/* Full-bleed variant: the dashboard IS the top of the page, edge to edge,
   filling the first viewport — no card frame, no label, no site chrome
   above it. The site's own nav is reintroduced just below (.mini-nav). */
.dashboard-hero {
  background: var(--pv-bg);
  border-bottom: 1px solid var(--pv-border);
}

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 640px;
}

.app-shell.full-bleed {
  min-height: 100vh;
}

.app-shell.full-bleed .app-content-grid {
  max-width: 1500px;
  margin: 0 auto;
}

.mini-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.mini-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---- Fake app sidebar ---- */
.app-sidebar {
  flex: none;
  width: 218px;
  background: #fff;
  border-right: 1px solid var(--pv-border);
  display: flex;
  flex-direction: column;
}

/* Logo + tagline + tenant switcher — scrolls away with the page (normal flow, not sticky),
   unlike .sidebar-sticky below it. Top padding matches .app-main's own (0.6rem) so the logo
   lines up with the topbar's "Good morning..." heading instead of sitting noticeably lower. */
.sidebar-header { padding: 0.6rem 1.1rem 0; flex: none; }

/* Pinned to the top of the viewport once scrolling carries .sidebar-header above it — the
   nav and "Contact Support" stay reachable without permanently losing that space to the
   logo/tenant switcher. Needs its own opaque background (the page behind it keeps scrolling
   underneath) and its own horizontal padding, since .app-sidebar itself no longer has any. */
.sidebar-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 0.9rem 1.1rem 1.5rem;
  display: flex;
  flex-direction: column;
  /* Not flex: 1 — sized to its own content (nav + status/help cards) so it reads as a
     compact block once stuck at the top, rather than stretching to fill the sidebar's full
     height (which used to push the status/help cards all the way down to match the main
     column's height — the opposite of "stay visible while scrolling"). */
  flex: none;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  margin-bottom: 0.2rem;
}

/* The real CAXO wordmark (wwwroot/img/caxo-logo.png), not the "CX" glyph + text this used to
   be — sized to height so its own 2073x759 aspect ratio sets the width proportionally.
   Kept small deliberately: this whole logo+tagline block was asked to take up as little
   vertical room as possible, so the tenant switcher below it sits higher in the sidebar. */
.sidebar-logo-img {
  height: 22px;
  width: auto;
  display: block;
}

.sidebar-tagline {
  font-size: 0.576rem;
  color: var(--pv-muted);
  margin: 0.15rem 0 0.5rem;
}

/* Tenant/business switcher — the demo account can belong to several
   businesses; this is the "which one am I looking at" control. */
.sidebar-switcher {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #eef0ff;
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 1.1rem;
}
.sidebar-switcher .switcher-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--pv-pink), var(--pv-purple));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.624rem;
}
.sidebar-switcher .switcher-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar-switcher .switcher-text strong { font-size: 0.608rem; color: var(--pv-text); line-height: 1.2; }
.sidebar-switcher .switcher-text span { font-size: 0.56rem; color: var(--pv-muted); }
.sidebar-switcher svg { flex: none; width: 16px; height: 16px; color: var(--pv-muted); }

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* The clickable element is now the <a> inside each <li> (sidebar items link to real
   in-page sections) rather than the <li> itself — same flex row/spacing, just moved down
   one level so the whole row is an actual link, not styled text next to an invisible one. */
.sidebar-nav .snav-item a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  color: #4338ca;
  font-size: 0.696rem;
  font-weight: 600;
  text-decoration: none;
}

.sidebar-nav .snav-item svg { flex: none; width: 18px; height: 18px; }

.sidebar-nav .snav-item.active a {
  background: #eef0ff;
  color: var(--pv-indigo);
  font-weight: 700;
}

.snav-badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  font-size: 0.544rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
}

.snav-badge-new {
  margin-left: auto;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.52rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
}

.sidebar-status-card {
  background: var(--pv-bg);
  border: 1px solid var(--pv-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
  font-size: 0.64rem;
}

.sidebar-status-card .status-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--pv-text);
  margin-bottom: 0.3rem;
}

.sidebar-status-card .status-title .dot-live { margin: 0; }
.sidebar-status-card p { color: var(--pv-muted); margin: 0; font-size: 0.608rem; }

.sidebar-help-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-size: 0.64rem;
}
.sidebar-help-card .help-icon { flex: none; font-size: 0.88rem; }
.sidebar-help-card .help-text { display: flex; flex-direction: column; }
.sidebar-help-card .help-text strong { color: var(--pv-text); font-size: 0.656rem; }
.sidebar-help-card .help-text span { color: var(--pv-muted); font-size: 0.592rem; }
.help-link { display: block; margin: 0.35rem 0 0 1.7rem; font-size: 0.624rem; font-weight: 700; color: var(--pv-indigo); }

@media (max-width: 880px) {
  .app-sidebar { display: none; }
}

/* ---- Fake app main + topbar ---- */
.app-main {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 1.5rem 1.25rem;
}

.app-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.topbar-heading {
  /* Lets the heading block actually shrink/wrap instead of forcing
     .topbar-actions onto its own line the moment the subtext's nowrap
     width doesn't fit — was happening well above the old 720px
     breakpoint on ordinary laptop widths.
     flex-basis: 0 (not "auto") is the important part, not just
     min-width: 0 — with an "auto" basis, the browser's line-wrap
     decision is based on the item's UNWRAPPED content width (the
     subtext's full one-line sentence, ~600-700px), even though the text
     itself can wrap once rendered — so it still wrapped the whole row
     onto two lines at ordinary laptop widths (1024-1280px) despite
     min-width: 0 allowing it to shrink AFTER that decision was already
     made. A 0 basis makes the wrap decision start from nothing plus
     grown space instead of the unwrapped text's width. */
  min-width: 0;
  flex: 1 1 0%;
}

.app-topbar h2 {
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.app-topbar .subtext {
  color: var(--pv-muted);
  font-size: 0.72rem;
  margin: 0;
  /* Only forced onto one line when there's genuinely room for it (see
     the min-width media query below) — otherwise it wraps normally
     within .topbar-heading rather than dragging .topbar-actions down
     with it. */
  white-space: normal;
}

@media (min-width: 1300px) {
  .app-topbar .subtext { white-space: nowrap; }
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: none;
}

.date-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--pv-border);
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  font-size: 0.656rem;
  font-weight: 600;
  color: var(--pv-text);
}

.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--pv-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pv-text);
  flex: none;
}

.icon-btn .bell-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
}

/* Now the dropdown-toggle <button> for the sign-out menu (see Index.cshtml) rather than a
   plain <div> — the reset undoes default button chrome so it still looks like the same
   plain chip, just with a real click target instead of a decorative chevron. */
.user-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  padding: 0.25rem 0.35rem;
  border-radius: 10px;
  cursor: pointer;
}
.user-chip:hover { background: var(--pv-bg); }

.user-chip .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pv-pink), var(--pv-purple));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  flex: none;
}

.user-chip .who strong { display: block; font-size: 0.68rem; color: var(--pv-text); }
.user-chip .who span { font-size: 0.576rem; color: var(--pv-muted); }
.user-chip .who-chevron { width: 16px; height: 16px; color: var(--pv-muted); flex: none; }

/* Bootstrap's .dropdown-menu already supplies the card/shadow/positioning — this just
   nudges its spacing and type to match the rest of the topbar instead of Bootstrap's
   default dense list styling. */
.user-menu-panel {
  min-width: 160px;
  padding: 0.4rem;
  border-radius: 12px;
  border-color: var(--pv-border);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.user-menu-panel .dropdown-item {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--pv-text);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
.user-menu-panel .dropdown-item:hover { background: var(--pv-bg); }

/* Measured directly off the reference mockup at its native resolution
   (panel right edge vs. sidebar card left/right edges): roughly a 66/34
   split, not a narrow fixed side column. */
.app-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 960px) {
  .app-content-grid { grid-template-columns: 1fr; }
}

/* ---- Calendar page (real month grid, not a scroll-to-list) ---- */
.cal-page-content {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.25rem 0.25rem 1.5rem;
}

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cal-month-label { font-family: var(--font-heading); font-size: 0.92rem; margin: 0; }
.cal-nav-btns { display: flex; gap: 0.5rem; }

.cal-grid-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.cal-head-cell {
  text-align: center;
  font-size: 0.576rem;
  font-weight: 700;
  color: var(--pv-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(72px, auto);
  gap: 0.4rem;
}

.cal-cell {
  background: #fff;
  border: 1px solid var(--pv-border);
  border-radius: 10px;
  padding: 0.35rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.cal-cell-muted { background: var(--pv-bg); }
.cal-cell-muted .cal-cell-date { color: var(--pv-muted); }
.cal-cell-today { border-color: var(--pv-indigo); box-shadow: 0 0 0 1px var(--pv-indigo) inset; }

.cal-cell-date { font-size: 0.6rem; font-weight: 700; color: var(--pv-text); }

.cal-cell-items { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.cal-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.512rem;
  font-weight: 600;
  padding: 0.18rem 0.3rem;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  min-width: 0;
}
.cal-item.status-upcoming { background: #e0e7ff; color: #4338ca; }
.cal-item.status-today { background: #fef3c7; color: #92400e; }
.cal-item.status-completed { background: #dcfce7; color: #15803d; }
.cal-item.status-pending { background: #fef3c7; color: #92400e; }
.cal-item.status-rejected { background: #fee2e2; color: #b91c1c; }
.cal-item:hover { filter: brightness(0.96); }

.cal-item-glyph {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.464rem;
  background: rgba(255, 255, 255, 0.6);
}

.cal-item-text { overflow: hidden; text-overflow: ellipsis; }

/* ---- Small status badges, reused on Calendar items, item lists and the item-detail page ---- */
.cal-item-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.544rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cal-item-badge.status-upcoming { background: #e0e7ff; color: #4338ca; }
.cal-item-badge.status-today { background: #fef3c7; color: #92400e; }
.cal-item-badge.status-completed { background: #dcfce7; color: #15803d; }
.cal-item-badge.status-pending { background: #fef3c7; color: #92400e; }
.cal-item-badge.status-rejected { background: #fee2e2; color: #b91c1c; }

/* ---- Shared "item detail" page (MarketingItem/CampaignDetail) ---- */
.item-detail-card {
  display: flex;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--pv-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  max-width: 900px;
}
.item-detail-media {
  flex: none;
  width: 220px;
  height: 220px;
  border-radius: var(--radius);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
}
.item-detail-body { flex: 1; min-width: 0; }

/* ---- Reusable "row list" used by Approvals, CampaignDetail's related content, and My Marketing's upcoming list ---- */
.item-list { display: flex; flex-direction: column; gap: 0.5rem; max-width: 900px; }
.item-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #fff;
  border: 1px solid var(--pv-border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  text-decoration: none;
  color: inherit;
}
.item-row-body { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.item-row-body strong { font-size: 0.68rem; color: var(--pv-text); }
.item-row-body span { font-size: 0.6rem; color: var(--pv-muted); }

/* ---- My Marketing page ---- */
.autopilot-status-banner {
  background: #fff;
  border: 1px solid var(--pv-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
}
.my-marketing-campaign-card {
  background: #fff;
  border: 1px solid var(--pv-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  margin-bottom: 0.9rem;
  max-width: 900px;
}
.upcoming-day-label {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--pv-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0.6rem 0 0.1rem;
}

@media (max-width: 900px) {
  .cal-grid, .cal-grid-head { grid-template-columns: repeat(7, minmax(40px, 1fr)); }
  .cal-item { font-size: 0.48rem; }
  .item-detail-card { flex-direction: column; }
  .item-detail-media { width: 100%; }
}

/* ---- Home page "your plan needs attention" action banner (PastDue/Cancelled subscription) ---- */
.subscription-alert-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  text-decoration: none;
  color: #92400e;
}
.subscription-alert-banner:hover { background: #fde68a; }
.subscription-alert-icon { font-size: 0.88rem; }
.subscription-alert-text { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.68rem; }
.subscription-alert-text strong { font-size: 0.72rem; }
.subscription-alert-cta { font-weight: 700; font-size: 0.656rem; white-space: nowrap; }

/* The blocking "complete your payment" popup (_PaymentPendingModal) — auto-shown on every
   dashboard page (not just Home) whenever DashboardShellViewModel.RequiresPayment is true.
   Deliberately has a close button rather than trapping the user entirely (bad UX/accessibility
   practice) — it reopens on the next page load instead, alongside the home page's own
   dismissible banner as a secondary reminder in between. */
#paymentPendingModal .modal-dialog { max-width: 400px; }
.ppm-content { border: none; border-radius: 18px; box-shadow: 0 24px 60px rgba(20, 22, 58, 0.25); }
.ppm-body { padding: 2rem 1.75rem 1.75rem; text-align: center; position: relative; }
.ppm-close {
  position: absolute; top: 0.75rem; right: 0.9rem; border: none; background: none;
  font-size: 1.3rem; line-height: 1; color: var(--pv-muted); cursor: pointer;
}
.ppm-close:hover { color: var(--pv-text); }
.ppm-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.ppm-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: var(--pv-text); margin: 0 0 0.5rem; }
.ppm-reason { color: var(--pv-muted); font-size: 0.88rem; margin: 0 0 1.25rem; line-height: 1.45; }
.ppm-pay-btn {
  display: block; width: 100%; padding: 0.75rem; border-radius: 10px; text-align: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: #fff;
  background: linear-gradient(90deg, var(--pv-indigo), var(--pv-purple)); text-decoration: none;
}
.ppm-pay-btn:hover { color: #fff; background: linear-gradient(90deg, var(--pv-indigo-dark), var(--pv-purple)); }
.ppm-hint { font-size: 0.72rem; color: var(--pv-muted); margin: 1rem 0 0; line-height: 1.4; }

/* Everything from "AUTOMATION IN PROGRESS" down through the "Publishing across your
   channels" heading used to be hand-built HTML/CSS here: a title, a decorative robot image,
   a status badge and a step tracker, each independently positioned. Across several rounds,
   fixing one pair of them colliding (title vs. robot, badge vs. robot, badge vs. the robot's
   actual glow rather than its assumed footprint) kept reopening a different collision at
   some other panel width — three-plus independently-positioned things were never going to
   reliably share one card. All of that is now wwwroot/img/autopilot-hero.png, the mockup
   itself cropped down to exactly that content (see the <img> in Index.cshtml) — this
   wrapper just clips it and the real channel-chip footer below into one rounded, shadowed
   card, with no layout of its own left to fight over. */
.autopilot-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(15, 30, 90, 0.35);
  /* Full width of .app-col-main, matching every other card in this column — an earlier
     85%-width/centered version traded that consistency away to shave a little height off
     the image, which wasn't wanted after all. */
}

/* Positioning context for the image plus its two live-text overlays below — kept separate
   from .autopilot-panel (which also contains .autopilot-panel-foot beneath it) so the
   overlays' percentage-based left/top/width are relative to the image's own scaled box,
   not the panel's combined height. */
.autopilot-hero-media {
  position: relative;
}

.autopilot-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

/* These two sit exactly over pixels erased from autopilot-hero.png itself (same flat fill
   color as the image directly around them — #07305d/#26439d spot-sampled from the source),
   not over a re-cropped or resized image, so no other graphic in the mockup (robot, stepper,
   badge card, check icon) shifts or changes. Position/size as % of the image's own box so
   they track it exactly as it scales with container width. */
.autopilot-hero-label {
  position: absolute;
  left: 2.2%;
  top: 8.4%;
  color: #7dd3fc;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(0.53rem, 0.4vw + 0.4rem, 0.6rem);
  white-space: nowrap;
  pointer-events: none;
}

.autopilot-hero-badge {
  position: absolute;
  left: 81%;
  top: 15.5%;
  pointer-events: none;
}
.autopilot-hero-badge strong {
  display: block;
  color: #fff;
  font-weight: 800;
  line-height: 1.35;
  font-size: clamp(0.6rem, 0.35vw + 0.5rem, 0.68rem);
  white-space: nowrap;
}
.autopilot-hero-badge span {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  margin-top: 0.2rem;
  font-size: clamp(0.52rem, 0.3vw + 0.42rem, 0.58rem);
  white-space: nowrap;
}

/* No radius/background of its own beyond plain white — .autopilot-panel's own
   overflow: hidden + border-radius above already clips this (and the image before it) into
   one seamlessly rounded card, top corners already baked into the image. */
.autopilot-panel-foot {
  position: relative;
  background: #fff;
  padding: 0.5rem 0.85rem 0.75rem;
}

/* minmax(0, ...) on every track, not bare 1fr — otherwise a chip's own label
   (.chip-text strong is white-space:nowrap, for its own ellipsis truncation) can force
   its column wider than its 1fr share, since bare fr tracks size to content's min-content
   by default. That pushed the row past this panel's right edge at ordinary browser zoom
   (100%) — invisible at 90% zoom only because zooming out hands the row extra slack, not
   because anything was actually fixed. */
.channel-chip-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (max-width: 900px) { .channel-chip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .channel-chip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.channel-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  /* minmax(0, 1fr) on the grid track above only stops the TRACK from growing to fit content
     — a grid item's own default min-width is still "auto" (its min-content size), so at
     narrower windows the chip itself kept overflowing its track's edge even though the track
     stayed the right width. min-width: 0 here lets the chip actually shrink to the track,
     which is what finally lets .chip-text's ellipsis truncate instead of the row overflowing. */
  min-width: 0;
  background: var(--pv-bg);
  border: 1px solid var(--pv-border);
  border-radius: 10px;
  padding: 0.4rem 0.5rem;
}
.channel-chip .chip-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.576rem;
  font-weight: 800;
  color: #fff;
}
.chip-icon.grad-instagram { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.chip-icon.bg-facebook { background: #1877f2; }
.chip-icon.bg-whatsapp { background: #25d366; }
.chip-icon.bg-google { background: #fff; color: #4285f4; border: 1px solid var(--pv-border); }
.chip-icon.bg-blog { background: var(--pv-indigo); }
.chip-icon.bg-youtube { background: #ff0000; }
.channel-chip .chip-text { display: flex; flex-direction: column; min-width: 0; }
.channel-chip .chip-text strong { font-size: 0.576rem; color: var(--pv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-chip .chip-text span { font-size: 0.528rem; font-weight: 700; }
.channel-chip .chip-text span.active { color: #16a34a; }
.channel-chip .chip-text span.inactive { color: var(--pv-muted); }

/* A fresh tenant with no ChannelConnection rows yet — every platform shown, but visibly
   switched off (grayscale icon, muted everything) rather than in each channel's own brand
   color, so the row reads as "nothing set up yet" instead of implying six real, if inactive,
   connections. */
.channel-chip.disabled { background: #f3f4f6; opacity: 0.75; }
.channel-chip.disabled .chip-icon { background: #d1d5db; color: #6b7280; }
.channel-chip.disabled .chip-text strong { color: var(--pv-muted); }
.apf-connect-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.624rem;
  font-weight: 700;
  color: var(--pv-indigo);
  text-decoration: none;
}
.apf-connect-link:hover { text-decoration: underline; }

/* ---- Settings: channel list ---- */
.settings-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.settings-channel-card {
  background: #fff;
  border: 1px solid var(--pv-border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.settings-channel-card.locked { background: #f8f9fb; opacity: 0.85; }
.settings-channel-head { display: flex; align-items: center; gap: 0.65rem; }
.settings-channel-icon {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1rem;
}
.settings-channel-card.locked .settings-channel-icon { background: #d1d5db !important; color: #6b7280; }
.settings-channel-name { font-weight: 700; color: var(--pv-text); font-size: 0.95rem; }
.settings-channel-account { font-size: 0.78rem; color: var(--pv-muted); }
.settings-status-pill {
  align-self: flex-start;
  font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px;
}
.settings-status-pill.connected { background: #dcfce7; color: #16a34a; }
.settings-status-pill.not-connected { background: #f3f4f6; color: var(--pv-muted); }
.settings-status-pill.attention { background: #fef3c7; color: #b45309; }
.settings-status-pill.locked { background: #f3f4f6; color: var(--pv-muted); }
.settings-channel-action { margin-top: auto; }
.settings-connect-btn {
  display: inline-block; width: 100%; text-align: center;
  border: 1.5px solid var(--pv-indigo); color: var(--pv-indigo); background: #fff;
  font-weight: 700; font-size: 0.85rem; border-radius: 10px; padding: 0.5rem; text-decoration: none;
}
.settings-connect-btn:hover { background: var(--pv-bg); }
.settings-disconnect-btn {
  width: 100%; border: none; background: transparent; color: var(--pv-muted);
  font-weight: 600; font-size: 0.78rem; padding: 0.3rem; cursor: pointer; text-decoration: underline;
}
.settings-locked-note { font-size: 0.78rem; color: var(--pv-muted); margin: 0; }

.section-title-sm { font-weight: 800; font-size: 0.72rem; margin: 1.1rem 0 0.5rem; color: var(--ink); }
.autopilot-main > .section-title-sm:first-of-type { margin-top: 1.75rem; }
.section-title-sm .title-sub { font-weight: 600; font-size: 0.64rem; color: var(--pv-muted); }

.content-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; position: relative; }
.content-card-grid.four-up { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .content-card-grid.four-up { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .content-card-grid { grid-template-columns: 1fr; } }

.content-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.content-card .cc-media { aspect-ratio: 16/10; position: relative; display: flex; align-items: flex-start; padding: 0.5rem; color: #fff; }
.content-card .cc-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.3); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1; }
.content-card .cc-platform { z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.624rem; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.content-card .cc-platform.bg-facebook { background: #1877f2; color: #fff; font-weight: 800; font-style: italic; }
.content-card .cc-platform.bg-whatsapp { background: #25d366; }

.content-card .cc-body { padding: 0.55rem 0.75rem 0.65rem; display: flex; flex-direction: column; align-items: flex-start; }
.content-card .cc-status { font-size: 0.512rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; margin-bottom: 0.35rem; }
.content-card .cc-status.status-scheduled { background: #dcfce7; color: #15803d; }
.content-card .cc-body strong { display: block; font-size: 0.656rem; margin-bottom: 0.1rem; color: var(--pv-text); }
/* align-self: stretch (not the column's own flex-start default, which the badge/label above
   still use so they stay their own natural width) plus min-width: 0 are both needed for
   text-overflow: ellipsis to actually have a box narrower than the text to truncate against
   — without them the span just grows to fit its content and never clips, which is what let
   longer post titles/timestamps wrap onto a second and third line instead. title="" repeats
   the full text so it's still available on hover. */
.content-card .cc-title {
  display: block;
  align-self: stretch;
  min-width: 0;
  font-size: 0.592rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-card .cc-datetime {
  display: block;
  align-self: stretch;
  min-width: 0;
  font-size: 0.56rem;
  color: var(--pv-muted);
  margin-top: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-card .cc-ai-pill { display: inline-block; font-size: 0.512rem; font-weight: 700; color: var(--pv-indigo); background: #eef0ff; padding: 0.15rem 0.5rem; border-radius: 999px; margin-top: 0.4rem; }

.cc-scroll-next {
  position: absolute;
  top: 40%;
  right: -18px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pv-text);
}
.cc-scroll-next svg { width: 16px; height: 16px; }
@media (max-width: 1180px) { .cc-scroll-next { display: none; } }

.grad-hair { background: linear-gradient(135deg, #f3c6d8 0%, #d88bb0 55%, #7a3f5c 100%); }
.grad-facial { background: linear-gradient(135deg, #e6d9f5 0%, #c9a8e0 60%, #9b7ab8 100%); }
.grad-tablet { background: linear-gradient(135deg, #3a3a4a 0%, #1c1c26 100%); }
.grad-spacare { background: linear-gradient(135deg, #cfe8d8 0%, #8fbf9f 55%, #4a7a5c 100%); }

/* ---- Needs Your Approval cards (horizontal, matches the mockup) ---- */
/* Matches .section-title-sm's own margin-top (1.75rem) so "Needs Your
   Approval" lines up on the same row as "Upcoming Marketing" on the left,
   once .growth-plan-card + .ad-budget-card together match .autopilot-panel's
   height. */
.approval-block { margin-top: 1.1rem; }
.approval-head { display: flex; justify-content: space-between; align-items: baseline; }
.approval-sub { font-size: 0.624rem; color: var(--pv-muted); margin: 0.1rem 0 0.6rem; }
.section-sub { font-size: 0.624rem; color: var(--pv-muted); margin: 0.1rem 0 0.6rem; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 0.35rem; margin-left: 0.4rem; background: #ef4444; color: #fff; font-size: 0.576rem; font-weight: 800; border-radius: 999px; }

.needs-you-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.needs-you-card + .needs-you-card { margin-top: 0.55rem; }
.needs-you-card.horizontal { display: flex; }
.needs-you-card .ny-media { aspect-ratio: 16/10; position: relative; }
.needs-you-card.horizontal .ny-media { flex: none; width: 34%; aspect-ratio: auto; display: flex; align-items: flex-end; padding: 0.5rem; color: #fff; font-weight: 700; font-size: 0.64rem; }
.needs-you-card.horizontal .ny-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%); }
.needs-you-card.horizontal .ny-media span.ny-text { position: relative; z-index: 1; }
.needs-you-card .ny-media .ny-chip { position: absolute; top: 0.4rem; right: 0.4rem; width: 20px; height: 20px; font-size: 0.52rem; }
.needs-you-card .ny-body { padding: 0.6rem 0.85rem 0.7rem; }
.needs-you-card .ny-badge { display: inline-block; background: #fce7f3; color: #be185d; font-size: 0.496rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.5rem; border-radius: 999px; margin-bottom: 0.25rem; }
.needs-you-card h4 { font-size: 0.68rem; margin-bottom: 0.15rem; }
.needs-you-card p { font-size: 0.576rem; color: var(--muted); margin-bottom: 0.5rem; line-height: 1.3; }
.ny-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.ny-actions .btn { font-size: 0.56rem; padding: 0.3rem 0.55rem; }

.btn-outline-sm {
  background: #fff;
  border: 1.5px solid var(--pv-border);
  color: var(--pv-text);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.btn-outline-sm:hover { background: var(--pv-bg); }
.btn-outline-sm.btn-reject { color: #dc2626; border-color: #fecaca; }
.btn-outline-sm.btn-reject:hover { background: #fef2f2; }

@media (max-width: 480px) {
  .needs-you-card.horizontal { flex-direction: column; }
  .needs-you-card.horizontal .ny-media { width: 100%; aspect-ratio: 16/9; }
}

/* ---- Growth Plan card (sidebar) ----
   Sized to land at roughly the same height as .autopilot-panel so the row
   below (Upcoming Marketing / Needs You) sits at the same height on both
   sides instead of the panel finishing well above this card. */
.growth-plan-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.55rem 1.1rem; box-shadow: var(--shadow-sm); }
.gp-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.1rem; }
.gp-head h4 { display: flex; align-items: center; gap: 0.4rem; font-size: 0.736rem; margin: 0; }
.gp-sub { font-size: 0.6rem; color: var(--muted); margin-bottom: 0.2rem; }
.gp-head .btn-manage-plan {
  color: var(--pv-indigo);
  border: 1.5px solid #ddd9fb;
  background: #fff;
  padding: 0.3rem 0.7rem;
  font-size: 0.6rem;
  border-radius: 8px;
  font-weight: 700;
}
.gp-head .btn-manage-plan:hover { background: #eef0ff; color: var(--pv-indigo-dark); }

/* margin-bottom: 0 deliberately — this is the last element inside
   .growth-plan-card, so any bottom margin here is just dead space before
   the card's own padding-bottom, not separation from a sibling. */
.plan-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-bottom: 0; }
@media (max-width: 480px) { .plan-tiles { grid-template-columns: repeat(2, 1fr); } }

.plan-tile { background: #fff; border: 1px solid var(--pv-border); border-radius: 10px; padding: 0.4rem 0.45rem; text-align: left; }
.plan-tile .pt-icon { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.25rem; font-size: 0.576rem; }
.plan-tile .pt-icon.pink { background: #fce7f3; color: #db2777; }
.plan-tile .pt-icon.purple { background: #ede9fe; color: var(--pv-purple); }
.plan-tile .pt-icon.green { background: #dcfce7; color: var(--pv-green); }
.plan-tile .pt-icon.amber { background: #fef3c7; color: var(--pv-amber); }
.plan-tile .pt-icon.bg-whatsapp { width: 22px; height: 22px; font-size: 0.624rem; }
.plan-tile strong { display: block; font-family: var(--font-heading); font-size: 0.736rem; color: var(--pv-text); }
.plan-tile span { display: block; font-size: 0.512rem; color: var(--pv-muted); }
.plan-tile .pt-used { font-size: 0.48rem; color: #b7bccb; }

.link-indigo, .link-indigo:hover { color: var(--pv-indigo); }
.app-col-main .link-indigo { color: var(--pv-indigo); }

/* ---- Ad Budget (PPC) card — its own card below Growth Plan, not part of
   it, matching the reference's two visually separate white boxes. ---- */
.ad-budget-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.55rem 1.1rem; box-shadow: var(--shadow-sm); margin-top: 0.4rem; }
.ad-budget-card .btn-add-budget { background: #fde68a; color: #78350f; border: none; padding: 0.3rem 0.7rem; font-size: 0.592rem; border-radius: 8px; font-weight: 700; }
.ad-budget-card .btn-add-budget:hover { background: #fcd34d; color: #78350f; }
.ad-amount { margin: 0.1rem 0 0.15rem; }
.ad-amount strong { font-family: var(--font-heading); font-size: 0.88rem; color: var(--pv-text); }
.ad-amount span { font-size: 0.608rem; color: var(--pv-muted); margin-left: 0.2rem; }
.plan-progress-track { height: 6px; border-radius: 999px; background: var(--pv-bg); overflow: hidden; margin-bottom: 0.3rem; }
.plan-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pv-indigo), var(--pv-blue)); }
.ad-spend-row { display: flex; justify-content: flex-end; gap: 1rem; font-size: 0.608rem; color: var(--pv-muted); font-weight: 600; }

/* ---- Performance section ----
   Each stat is now its own bordered card (icon+number on top, label,
   then trend) rather than an icon+text row, matching the reference. */
.perf-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
@media (max-width: 720px) { .perf-stat-grid { grid-template-columns: repeat(2, 1fr); } }

.perf-stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.85rem; }
.perf-stat-card .ps-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.perf-stat-card .ps-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.576rem; }
.perf-stat-card .ps-icon.blue { background: #dbeafe; color: var(--pv-blue); }
.perf-stat-card .ps-icon.pink { background: #fce7f3; color: #db2777; }
.perf-stat-card .ps-icon.indigo { background: #e0e7ff; color: var(--pv-indigo); }
.perf-stat-card strong { font-family: var(--font-heading); font-size: 0.84rem; color: var(--pv-text); }
.perf-stat-card .ps-label { display: block; font-size: 0.576rem; color: var(--pv-muted); margin-bottom: 0.25rem; }
.perf-stat-card .ps-trend { font-size: 0.56rem; color: var(--pv-green); font-weight: 700; }

.perf-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.9rem 1.1rem; }
.perf-chart-col { min-width: 0; }
.chart-legend { display: flex; justify-content: flex-end; gap: 1rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.576rem; color: var(--pv-muted); font-weight: 600; }
.chart-legend .ldot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chart-svg { width: 100%; height: auto; display: block; }

/* ---- Pro upsell CTA (bottom of sidebar) — a light blue-to-purple
   gradient card with dark text, replacing the earlier dark navy version,
   matching the reference's lighter "Get more with Pro" treatment. ---- */
.pro-cta-light {
  background: linear-gradient(120deg, #dbeafe 0%, #ede9fe 55%, #f3e8ff 100%);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem;
  margin-top: 0.6rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.pro-cta-light .pro-diamond { flex: none; font-size: 1.44rem; line-height: 1; filter: drop-shadow(0 4px 8px rgba(79, 70, 229, 0.35)); }
.pro-cta-light h4 { font-size: 0.736rem; color: var(--pv-text); margin-bottom: 0.2rem; }
.pro-cta-light p { font-size: 0.6rem; color: #55597a; margin-bottom: 0.6rem; }
.pro-cta-light .btn-upgrade { background: linear-gradient(90deg, #4f46e5, #7c3aed); color: #fff; box-shadow: none; }
.pro-cta-light .btn-upgrade:hover { background: linear-gradient(90deg, #4338ca, #6d28d9); color: #fff; }

.app-col-side .btn-block { width: 100%; text-align: center; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  background: linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2.5rem;
  text-align: center;
  color: #fff;
  margin: 0 auto;
}

.cta-band h2 {
  color: #fff;
  margin-bottom: 0.75rem;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 480px;
  margin: 0 auto 1.75rem;
}

.cta-band .btn-primary {
  background: #fff;
  color: var(--brand);
  box-shadow: none;
}

.cta-band .btn-primary:hover {
  background: var(--ink);
  color: #fff;
}

/* ============================================================
   Get Started page
   ============================================================ */
.get-started-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 860px) {
  .get-started-grid {
    grid-template-columns: 1fr;
  }
}

.next-steps-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1.75rem;
}

.next-steps-list .item {
  display: flex;
  gap: 0.85rem;
}

.next-steps-list .num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.next-steps-list strong {
  color: var(--ink);
  display: block;
  font-size: 0.95rem;
}

.next-steps-list span {
  color: var(--muted);
  font-size: 0.88rem;
}

.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2rem;
}

.form-card label {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.form-card .form-control,
.form-card .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 0.65rem 0.85rem;
}

.form-card .form-control:focus,
.form-card .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.alert-success {
  background: var(--accent-light);
  color: #0b6b62;
  border: none;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

/* ============================================================
   Responsive gutter safety (per-page)
   ============================================================ */
@media (max-width: 400px) {
  .hero { padding: 3rem 0 3.5rem; }
  .section { padding: 3rem 0; }
}

/* ============================================================
   Package selector (/PackageSelector) — shown once, right after signup,
   to a user who hasn't chosen a plan yet. Styled to match the dashboard's
   own palette (--pv-*) and sidebar-logo gradient, not the marketing site's
   orange --brand tokens, since this is the first thing a signed-in
   customer sees, not a guest page.
   ============================================================ */
.pkgsel-page {
  background: var(--pv-bg);
  min-height: 100%;
  padding-bottom: 4rem;
}

.pkgsel-banner {
  background: linear-gradient(135deg, var(--pv-indigo) 0%, var(--pv-purple) 100%);
  padding: 1.1rem 0;
  margin-bottom: 2.5rem;
}
.pkgsel-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pkgsel-brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; }
/* The real CAXO favicon (wwwroot/img/favicon.png) — its own dark rounded-square background
   and gradient monogram already look right here, no separate background/centering needed. */
.pkgsel-brand .glyph { width: 32px; height: 32px; border-radius: 9px; display: block; }
.pkgsel-brand strong { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; }

.pkgsel-steps { display: flex; align-items: center; gap: 0.6rem; color: rgba(255, 255, 255, 0.85); font-size: 0.82rem; font-weight: 600; }
.pkgsel-step { display: flex; align-items: center; gap: 0.4rem; }
.pkgsel-step .dot {
  width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; background: rgba(255, 255, 255, 0.18); color: #fff;
}
.pkgsel-step.active { color: #fff; }
.pkgsel-step.active .dot { background: #fff; color: var(--pv-indigo); }
.pkgsel-step-line { width: 28px; height: 1.5px; background: rgba(255, 255, 255, 0.35); }
.pkgsel-signout { color: rgba(255, 255, 255, 0.85); font-size: 0.84rem; font-weight: 600; text-decoration: none; }
.pkgsel-signout:hover { color: #fff; text-decoration: underline; }

.pkgsel-body { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

.pkgsel-intro { text-align: center; margin-bottom: 2rem; }
.pkgsel-intro h1 { font-family: var(--font-heading); font-weight: 800; font-size: 1.8rem; color: var(--pv-text); margin-bottom: 0.5rem; }
.pkgsel-intro p { color: var(--pv-muted); }

.pkgsel-error { color: #dc2626; text-align: center; margin-bottom: 1rem; font-weight: 600; }

.pkgsel-business-card {
  background: #fff;
  border: 1px solid var(--pv-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.pkgsel-business-card h4 { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 800; font-size: 1rem; color: var(--pv-text); margin: 0; }
.pkgsel-card-icon { font-size: 1.1rem; }
.pkgsel-business-fields {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}
.pkgsel-business-fields > div { flex: 1; min-width: 220px; }
.pkgsel-business-fields label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--pv-text); }
.pkgsel-business-fields input, .pkgsel-business-fields select, .pkgsel-business-fields textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--pv-border);
  font-size: 0.9rem;
  font-family: inherit;
}
.pkgsel-business-fields input:focus, .pkgsel-business-fields select:focus, .pkgsel-business-fields textarea:focus {
  outline: none; border-color: var(--pv-indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.pkgsel-business-fields textarea { resize: vertical; min-height: 4.5rem; }
.pkgsel-business-fields input[type="file"] { padding: 0.45rem; background: var(--pv-bg); cursor: pointer; }
/* Spans the whole row instead of sharing space with its siblings — for a description
   textarea or anything else that shouldn't be squeezed into a narrow column. */
.pkgsel-field-full { flex-basis: 100% !important; }
.pkgsel-field-hint { display: block; font-size: 0.76rem; color: var(--pv-muted); margin-top: 0.3rem; }

.pkgsel-continue-btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0.5rem auto 0;
  text-align: center;
  border: none;
  border-radius: 10px;
  padding: 0.8rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(90deg, var(--pv-indigo), var(--pv-purple));
  cursor: pointer;
}
.pkgsel-continue-btn:hover { background: linear-gradient(90deg, var(--pv-indigo-dark), var(--pv-purple)); }

.pkgsel-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.pkgsel-plan-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--pv-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pkgsel-plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pkgsel-plan-card.popular { border-color: var(--pv-indigo); box-shadow: 0 12px 32px rgba(79, 70, 229, 0.16); }

.pkgsel-popular-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--pv-indigo), var(--pv-purple)); color: #fff;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 999px; box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
}

.pkgsel-plan-icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 0.7rem;
  display: flex; align-items: center; justify-content: center;
}
.pkgsel-plan-icon svg { width: 22px; height: 22px; }
.pkgsel-plan-icon-0 { background: #dcfce7; color: #16a34a; }
.pkgsel-plan-icon-1 { background: #eef0ff; color: var(--pv-indigo); }
.pkgsel-plan-icon-2 { background: #fdf2ff; color: var(--pv-purple); }

.pkgsel-plan-card h3 { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 0.2rem; color: var(--pv-text); }
.pkgsel-plan-sub { color: var(--pv-muted); font-size: 0.85rem; margin-bottom: 1rem; }
.pkgsel-plan-price { margin-bottom: 1rem; }
.pkgsel-plan-price strong { font-family: var(--font-heading); font-size: 1.8rem; color: var(--pv-text); }
.pkgsel-plan-price span { color: var(--pv-muted); font-size: 0.85rem; }
.pkgsel-plan-features { list-style: none; padding: 0; margin: 0 0 1.25rem; flex: 1; }
.pkgsel-plan-features li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; margin-bottom: 0.5rem; color: var(--pv-text); }
.pkgsel-plan-features .ck { color: var(--pv-green); font-weight: 800; }
.pkgsel-choose-btn {
  width: 100%; border: 1.5px solid var(--pv-border); background: #fff; color: var(--pv-text);
  font-weight: 700; border-radius: 10px; padding: 0.6rem; cursor: pointer;
}
.pkgsel-choose-btn:hover { background: var(--pv-bg); }
.pkgsel-choose-free { background: linear-gradient(90deg, #16a34a, #22c55e); border: none; color: #fff; }
.pkgsel-choose-free:hover { background: linear-gradient(90deg, #15803d, #16a34a); color: #fff; }
.pkgsel-choose-popular { background: linear-gradient(90deg, var(--pv-indigo), var(--pv-purple)); border: none; color: #fff; }
.pkgsel-choose-popular:hover { background: linear-gradient(90deg, var(--pv-indigo-dark), var(--pv-purple)); color: #fff; }

.pkgsel-plan-card.current { border-color: var(--pv-green); box-shadow: 0 12px 32px rgba(22, 163, 74, 0.14); }
.pkgsel-current-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #16a34a, #22c55e); color: #fff;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 999px; box-shadow: 0 4px 10px rgba(22, 163, 74, 0.3);
}
.pkgsel-plan-card.locked { opacity: 0.6; }
.pkgsel-plan-card.locked:hover { transform: none; box-shadow: var(--shadow-sm); }
.pkgsel-locked-note { font-size: 0.78rem; color: var(--pv-muted); text-align: center; margin: 0; }
.pkgsel-choose-btn:disabled { cursor: not-allowed; opacity: 0.7; }
.pkgsel-choose-btn:disabled:hover { background: #fff; }