/* ============================================================
   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 h3 {
  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 h3 {
  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);
  /* Defensive: several rounds of chasing individual elements that were pushing the page wider
     than the viewport on phones (the Performance stat cards, before that) suggest there may be
     more we haven't found yet. This guarantees no descendant can ever cause a page-wide
     horizontal scrollbar again, regardless of the exact cause — overflow-x only, so vertical
     position: sticky (the sidebar) is unaffected. */
  overflow-x: hidden;
}

.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); }

/* Hidden on desktop — .app-sidebar is a permanent column there, nothing to toggle. Shown
   (display: inline-flex) only inside the mobile media query below. */
.sidebar-toggle-btn {
  display: none;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--pv-border);
  align-items: center;
  justify-content: center;
  color: var(--pv-text);
  cursor: pointer;
}

/* Tap-outside-to-dismiss overlay behind the mobile drawer — hidden by default (both on
   desktop, where there's no drawer, and on mobile until .sidebar-toggle-btn opens it). */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 35, 0.45);
  z-index: 1000;
}
.sidebar-backdrop.show { display: block; }

@media (max-width: 880px) {
  .sidebar-toggle-btn { display: inline-flex; }

  /* Off-canvas drawer instead of the old flat "display: none" — that left mobile visitors
     with no way to reach the sidebar at all (no hamburger, no alternate nav). Slides in from
     the left over the page content; .sidebar-sticky's own `position: sticky` still works
     correctly against .app-sidebar as its nearest scrolling ancestor once this gets
     `overflow-y: auto`. */
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 82vw;
    height: 100vh;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
  }
  .app-sidebar.open { transform: translateX(0); }
}

/* ---- Fake app main + topbar ---- */
.app-main {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 1rem 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 {
  /* flex-basis: 0 (not "auto") is the important part, not just min-width: 0 — with an "auto"
     basis, the browser sizes the row from the heading's unwrapped natural width, which kept
     forcing .topbar-actions onto its own line well above where it actually needed to. A 0
     basis starts from nothing plus grown space instead. */
  min-width: 0;
  flex: 1 1 0%;
}

.app-topbar h2 {
  font-size: 1rem;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Always single-line + ellipsis, at every width — not just "forced nowrap above 1300px, wraps
   below it" like before. A truncated sentence that's still readable beats 2-5 wrapped lines
   pushing the rest of the page down; the full text is still in the title attribute for hover. */
.app-topbar .subtext {
  display: block;
  color: var(--pv-muted);
  font-size: 0.72rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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; }

/* At phone widths, the hamburger + full "Vinod / BusinessName" user chip together left almost
   no room for the greeting — "Good evening, Vinod" wrapped to 2 lines and the subtext sentence
   wrapped to 5. Shrinking the hamburger, dropping the who-text down to just the avatar+chevron,
   and reducing the heading/subtext font sizes all free that width back up for the title, which
   is what was actually meant to be the main content of this row. align-items: flex-start (not
   center) keeps the whole row pinned to its top edge rather than centered against whichever
   item happens to be tallest, and the tightened paddings/margins below are all in service of
   the same goal — this greeting row isn't the important content on the page, so it shouldn't
   push the real content (the autopilot banner) any further down than it has to. */
@media (max-width: 560px) {
  .app-main { padding-top: 0.4rem; }
  .app-topbar { gap: 0.5rem; margin-bottom: 0.35rem; align-items: center; }
  .sidebar-toggle-btn { width: 30px; height: 30px; border-radius: 8px; }
  .sidebar-toggle-btn svg { width: 16px; height: 16px; }
  .app-topbar h2 { font-size: 0.74rem; margin-bottom: 0.05rem; }
  .app-topbar .subtext { font-size: 0.6rem; }
  .topbar-actions { gap: 0.35rem; }
  .icon-btn { width: 30px; height: 30px; }
  .user-chip { padding: 0.1rem; gap: 0.2rem; margin: 0; }
  .user-chip .who { display: none; }
  .user-chip .avatar { width: 28px; height: 28px; }
}

/* 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); }

/* Business badge in the topbar (moved here from the sidebar) + the avatar-only account menu. */
a.sidebar-logo { text-decoration: none; }
.topbar-business {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #eef0ff;
  border: 1px solid #dfe3ff;
  border-radius: 12px;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  text-decoration: none;
  max-width: 230px;
  min-width: 0;
}
.topbar-business:hover { border-color: var(--pv-indigo); }
.topbar-business-badge {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--pv-pink), var(--pv-purple));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.6rem;
}
.topbar-business-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.topbar-business-text strong,
.topbar-business-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-business-text strong { font-size: 0.66rem; color: var(--pv-text); }
.topbar-business-text span { font-size: 0.56rem; color: var(--pv-muted); }

.account-menu { min-width: 250px; padding: 0.5rem; }
.account-menu-head,
.account-menu-business { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.55rem; }
.account-menu-head .avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  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.76rem;
}
.account-menu-business { background: var(--pv-bg); border-radius: 10px; margin-top: 0.15rem; }
.account-menu-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.account-menu-who strong { font-size: 0.7rem; color: var(--pv-text); overflow-wrap: anywhere; }
.account-menu-who span { font-size: 0.6rem; color: var(--pv-muted); overflow-wrap: anywhere; }
.account-menu .dropdown-divider { margin: 0.45rem 0; border-color: var(--pv-border); }
.account-menu-signout { color: #dc2626 !important; }

@media (max-width: 560px) {
  .topbar-business { padding: 0.15rem; border-radius: 9px; }
  .topbar-business-text { display: none; }
  .topbar-business-badge { width: 26px; height: 26px; border-radius: 7px; }
}

/* 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: 1rem;
  align-items: start;
}

@media (max-width: 960px) {
  /* minmax(0, 1fr), not a bare 1fr — a plain 1fr still leaves the grid item's own automatic
     minimum size based on its content's min-content width (same underlying bug as flex's
     min-width: auto). The desktop rule above already guards against this with minmax(0, 2fr)/
     minmax(340px, 1fr); this single-column override didn't, which is why a wide-min-content
     descendant (the Growth Plan tiles row, the Performance stat row) could still force the
     WHOLE GRID TRACK — and with it the whole page — wider than the viewport on phones, even
     though those descendants each scroll internally on their own. */
  .app-content-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Belt-and-suspenders alongside the minmax(0, ...) tracks above — explicit min-width: 0 on the
   grid items themselves too, so neither column's own automatic minimum size can ever be driven
   by an unshrinkable descendant again. */
.app-col-main, .app-col-side { min-width: 0; }

/* ---- 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;
  border: none; cursor: pointer;
}
.ppm-pay-btn:disabled { opacity: 0.7; cursor: progress; }
.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 8px 24px rgba(60, 72, 140, 0.12), 0 1px 3px rgba(60, 72, 140, 0.08);
  /* 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;
  /* The overlay text scales with the image (cqw) so it stays inside its erased area at any width. */
  container-type: inline-size;
}

.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.08%;
  top: 5.67%;
  color: #7dd3fc;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: min(0.6rem, 1.25cqw);
  white-space: nowrap;
  pointer-events: none;
}

.autopilot-hero-badge {
  position: absolute;
  left: 80.98%;
  top: 14.6%;
  pointer-events: none;
}
.autopilot-hero-badge strong {
  display: block;
  color: #fff;
  font-weight: 800;
  line-height: 1.35;
  font-size: min(0.68rem, 1.42cqw);
  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: min(0.58rem, 1.21cqw);
  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: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.576rem;
  font-weight: 800;
  color: #fff;
}
/* The real brand-icon PNGs (sliced from the approved mockup) already carry their own shape
   and background — a plain sized box plus a slightly rounded corner on the image itself
   (rather than a colored circle behind it, which the old text-glyph badges needed) is enough. */
.channel-chip .chip-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.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; }
/* Was wrapping "Not connected" onto a second line at this row's narrower chip widths, pushing
   every chip to 3 visual lines tall instead of 2 — same ellipsis-on-overflow treatment as the
   label above instead of letting it wrap. */
.channel-chip .chip-text span { font-size: 0.528rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-chip .chip-text span.active { color: #16a34a; }
.channel-chip .chip-text span.inactive { color: var(--pv-muted); }

/* A channel outside the tenant's current package — shown, not hidden, so a lower-tier
   customer can see what upgrading would unlock. Same grayscale/muted recipe Settings' own
   .settings-channel-card.locked already uses, applied to this row's smaller chip layout. */
.channel-chip.locked { background: #f3f4f6; opacity: 0.75; cursor: pointer; text-decoration: none; }
.channel-chip.locked .chip-icon { background: #d1d5db; color: #6b7280; border-radius: 50%; }
.channel-chip.locked .chip-icon img { width: 55%; height: 55%; border-radius: 0; }
.channel-chip.locked .chip-text strong { color: var(--pv-muted); }

/* ---- 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;
  background: #f8f9fb;
}
.settings-channel-icon img { width: 62%; height: 62%; object-fit: contain; }
.settings-channel-card.locked .settings-channel-icon { background: #d1d5db !important; }
.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); }

/* ---- Meta Suite combined card (Facebook + Instagram + WhatsApp) ---- */
.settings-meta-icon-cluster { display: flex; flex: none; }
.settings-meta-icon-cluster img {
  width: 34px; height: 34px; border-radius: 10px; background: #f8f9fb; padding: 5px;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15,15,25,0.12);
}
.settings-meta-icon-cluster img + img { margin-left: -10px; }
.settings-meta-icon-cluster-lg img { width: 44px; height: 44px; }
.settings-meta-sublist { display: flex; flex-direction: column; gap: 0.5rem; }
.settings-meta-subrow {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.55rem; background: #f8f9fb; border-radius: 8px;
}
.settings-meta-subrow img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.settings-meta-subname { font-size: 0.78rem; font-weight: 600; color: var(--pv-text); flex: 1 1 auto; min-width: 0; }
.settings-meta-subrow .settings-status-pill { align-self: center; flex: none; }
.settings-meta-subaction { flex: none; }
.settings-meta-unlink-btn {
  border: none; background: transparent; color: var(--pv-muted);
  font-weight: 600; font-size: 0.7rem; padding: 0.2rem; cursor: pointer; text-decoration: underline;
}
.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; }
/* 16/7 is 70% of the original 16/10 height at the same width, per request. */
.content-card .cc-media { aspect-ratio: 16/7; position: relative; display: flex; align-items: flex-start; padding: 0.5rem; color: #fff; background-size: cover, cover; background-position: center, center; background-repeat: no-repeat; }
.content-card .cc-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 30px; height: 30px; 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; box-shadow: 0 2px 6px rgba(0,0,0,0.25); overflow: hidden; }
.content-card .cc-platform img { width: 80%; height: 80%; object-fit: contain; }

.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; }
/* Same phase groupings ReleaseStageDisplay.StageCssClass already drives on the Calendar's
   .cal-item-badge — reused here so a real release's actual pipeline phase (Planning, Creating
   Image, Needs Script Approval, etc.) reads with the same color language everywhere. */
.content-card .cc-status.status-upcoming { background: #e0e7ff; color: #4338ca; }
.content-card .cc-status.status-completed { background: #dcfce7; color: #15803d; }
.content-card .cc-status.status-pending { background: #fef3c7; color: #92400e; }
.content-card .cc-status.status-rejected { background: #fee2e2; color: #b91c1c; }
.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; } }

/* ---- Rich popup modals (plan-upgrade / channel-connect / feature-disabled) ----
   A colored header band with an overlapping icon badge dipping into the white body, the same
   language SaaS products like Stripe/Linear use for confirmation dialogs — replaces the earlier
   plain-white-box-with-a-floating-X version. */
.rich-modal { border: none; border-radius: 20px; overflow: hidden; }
.rich-modal-header {
  position: relative;
  padding: 2.1rem 1.5rem 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rich-modal-header-indigo { background: linear-gradient(135deg, var(--pv-indigo), var(--pv-purple)); }
.rich-modal-header-slate { background: linear-gradient(135deg, #64748b, #334155); }
.rich-modal-close.rich-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  opacity: 0.85;
}
.rich-modal-close.rich-modal-close:hover { opacity: 1; }
.rich-modal-icon-badge {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 3px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(15,15,25,0.18);
}
.rich-modal-icon-badge img { width: 34px; height: 34px; object-fit: contain; filter: brightness(0) invert(1); }
/* The channel-connect popup shows the channel's OWN brand colors, not a white silhouette — a
   solid white circle instead of the translucent one, and no white filter on its icon. */
.rich-modal-icon-badge-solid { background: #fff; border-color: #fff; }
.rich-modal-icon-badge-solid img { filter: none; width: 42px; height: 42px; }
.rich-modal-body {
  position: relative;
  z-index: 2;
  margin-top: -1.6rem;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 1.75rem 1.75rem 2rem;
  text-align: center;
}
.rich-modal-body h3 { font-weight: 800; font-size: 1.15rem; margin: 0 0 0.5rem; }
.rich-modal-body p { color: #6b7280; font-size: 0.88rem; line-height: 1.55; margin: 0 0 1.5rem; }
.rich-modal-subtext { margin-top: -1.1rem; font-size: 0.8rem; }
.rich-modal-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.btn-modal-primary {
  background: linear-gradient(135deg, var(--pv-indigo), var(--pv-purple));
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.6rem 1.25rem;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(79,70,229,0.28);
  text-decoration: none;
  display: inline-block;
}
.btn-modal-primary:hover { filter: brightness(1.06); color: #fff; }
.btn-modal-outline {
  background: #fff;
  color: var(--pv-text);
  border: 1.5px solid var(--pv-border);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.58rem 1.15rem;
  border-radius: 10px;
}
.btn-modal-outline:hover { background: #f8f9fb; }

.upcoming-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pv-indigo);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.upcoming-refresh-btn:disabled { opacity: 0.6; cursor: default; }
.upcoming-refresh-btn .upcoming-refresh-icon { display: inline-block; }
.upcoming-refresh-btn.is-refreshing .upcoming-refresh-icon { animation: upcoming-refresh-spin 0.8s linear infinite; }
@keyframes upcoming-refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.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; }

/* Smaller corner radius than the old var(--radius-lg) (24px) — was rounding the left (image)
   side of the card too aggressively at this width. */
.needs-you-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.needs-you-card + .needs-you-card { margin-top: 0.55rem; }
/* align-items: flex-start (not stretch) so .ny-media keeps its own fixed height below instead
   of stretching to match .ny-body — .ny-body grew taller once the post title line was added,
   which was dragging the image tall along with it. */
.needs-you-card.horizontal { display: flex; align-items: flex-start; }
.needs-you-card .ny-media { aspect-ratio: 16/10; position: relative; background-size: cover, cover; background-position: center, center; background-repeat: no-repeat; }
.needs-you-card.horizontal .ny-media { flex: none; width: 34%; height: 104px; aspect-ratio: auto; display: flex; align-items: flex-end; padding: 0.5rem; color: #fff; font-weight: 700; font-size: 0.64rem; }
.needs-you-card .ny-media .ny-chip {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  overflow: hidden;
}
.needs-you-card .ny-media .ny-chip img { width: 78%; height: 78%; object-fit: contain; }
.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; }
/* A non-actionable "coming up" preview card, padding the approval list toward its minimum —
   same shape as .ny-badge, lighter color so it reads as "not yet real" next to an actual
   pending approval. */
.needs-you-card .ny-badge-upcoming { background: #e5e7eb; color: var(--pv-muted); }
.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; }
.needs-you-card .ny-title { margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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; }
.gp-head h4 { display: flex; align-items: center; gap: 0.4rem; font-size: 0.736rem; margin: 0; }
/* Was a bare 👑 emoji at the surrounding text size (~12px) — easy to miss next to the card
   title. A dedicated vector icon sized independently reads clearly as "this is the premium
   plan card" the way the emoji was meant to. */
.gp-crown { width: 20px; height: 20px; flex: none; }
/* No margin-top: 0 previously, so this just fell back to the browser default div margin of 0
   already — the visible gap was really .gp-head's own margin-bottom plus the taller icon row
   above (once .gp-crown grew past the old inline-emoji's line height). Both tightened together. */
.gp-sub { font-size: 0.6rem; color: var(--muted); margin: 0 0 0.3rem; }
.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.
   Single row, horizontal scroll instead of wrapping — a 5th+ tile (now that every content type
   shows, including 0/0 ones) used to drop to an orphaned second grid row. */
.plan-tiles { display: flex; gap: 0.3rem; margin-bottom: 0; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }

/* Width stays 72px (so 4-5 still fit before the row needs to scroll) — only the icon inside
   grows and everything centers, rather than the tile itself growing to fit a bigger icon. */
.plan-tile { flex: 0 0 72px; background: #fff; border: 1px solid var(--pv-border); border-radius: 9px; padding: 0.4rem 0.3rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.plan-tile .pt-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.3rem; }
.plan-tile .pt-icon img { width: 58%; height: 58%; object-fit: contain; }
.plan-tile .pt-icon.pink { background: #fce7f3; }
.plan-tile .pt-icon.purple { background: #ede9fe; }
.plan-tile .pt-icon.green { background: #dcfce7; }
.plan-tile .pt-icon.amber { background: #fef3c7; }
.plan-tile .pt-icon.bg-whatsapp { width: 36px; height: 36px; }
.plan-tile strong { display: block; font-family: var(--font-heading); font-size: 0.656rem; color: var(--pv-text); }
.plan-tile span { display: block; font-size: 0.464rem; color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.plan-tile .pt-used { font-size: 0.432rem; color: #b7bccb; }
/* A content type the current package doesn't include at all (0/0) — same muted recipe as
   locked channels elsewhere on this page, so "not in your plan" reads consistently. */
.plan-tile.not-in-plan { background: #f8f9fb; opacity: 0.7; }
.plan-tile.not-in-plan .pt-used { color: var(--pv-muted); font-weight: 600; }

.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)); }
/* No real budget set — a colored 0%-wide bar just looks blank/broken. A full-width flat gray
   bar instead reads unambiguously as "disabled", not "nothing spent yet". */
.plan-progress-track.disabled { background: #eceef2; }
.plan-progress-fill.disabled { background: #d1d5db; }
.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-card-combined puts the stat row and the chart side by side in ONE box (the reference's
   actual layout) instead of the stats sitting in their own full-width grid above a second,
   separately-boxed, full-width chart — which is also why that chart used to render so much
   wider/taller than intended ("a lengthy chart"). */
.perf-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.9rem 1.1rem; }
.perf-card-combined { display: flex; align-items: stretch; gap: 1rem; }
@media (max-width: 860px) { .perf-card-combined { flex-direction: column; } }

.perf-stat-row { display: flex; gap: 0.6rem; flex: 1 1 auto; min-width: 0; }

.perf-stat-card { flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.65rem 0.7rem; }
.perf-stat-card .ps-top { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; min-width: 0; }
.perf-stat-card .ps-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.perf-stat-card .ps-icon img { width: 55%; height: 55%; object-fit: contain; }
.perf-stat-card .ps-icon.blue { background: #dbeafe; }
.perf-stat-card .ps-icon.pink { background: #fce7f3; }
.perf-stat-card .ps-icon.indigo { background: #e0e7ff; }
.perf-stat-card strong { font-family: var(--font-heading); font-size: 0.78rem; color: var(--pv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-stat-card .ps-label { display: block; font-size: 0.544rem; color: var(--pv-muted); margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-stat-card .ps-trend { font-size: 0.56rem; color: var(--pv-green); font-weight: 700; }

/* flex: 1 1 0 cards used to shrink below their content's minimum (the icon + nowrap value
   text inside .ps-top has no min-width of its own to shrink further against), which broke out
   of the card's box and widened the whole page horizontally on phones — the same bug the
   Growth Plan tiles had before they moved to this exact fixed-width-plus-scroll pattern. Must
   come after the base .perf-stat-card rule above so this width override actually wins (equal
   specificity, later wins) rather than being clobbered by it. Below 640px each card gets a
   real minimum width and the row scrolls horizontally within itself instead of letting
   anything overflow the page. */
@media (max-width: 640px) {
  .perf-stat-row { overflow-x: auto; padding-bottom: 2px; }
  .perf-stat-card { flex: 0 0 108px; }
}

/* Fixed, modest width rather than stretching to fill whatever's left — this is meant to read
   as a small trend glance next to the counts, not the section's main event. */
.perf-chart-col { flex: 0 0 260px; min-width: 0; }
@media (max-width: 860px) { .perf-chart-col { flex-basis: auto; } }
.chart-legend { display: flex; justify-content: flex-end; gap: 0.7rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.512rem; color: var(--pv-muted); font-weight: 600; }
.chart-legend .ldot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.chart-svg { width: 100%; height: 110px; 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; }

/* ---- /PlanUsage: main column + payment history rail ---- */
.plan-usage-grid { display: grid; grid-template-columns: 1fr 300px; gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .plan-usage-grid { grid-template-columns: 1fr; } }

.payment-history-card { position: sticky; top: 1rem; }
.payment-history-card h4 { font-size: 0.85rem; font-weight: 800; color: var(--pv-text); margin: 0 0 0.75rem; }
.payment-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.payment-history-item { border-bottom: 1px solid var(--pv-border); padding-bottom: 0.6rem; }
.payment-history-item:last-child { border-bottom: none; padding-bottom: 0; }
.phi-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.phi-date { font-size: 0.72rem; color: var(--pv-muted); }
.phi-amount { font-size: 0.85rem; font-weight: 700; color: var(--pv-text); }
.phi-status { display: inline-block; margin-top: 0.25rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.1rem 0.5rem; border-radius: 999px; }
.phi-status-succeeded { background: #dcfce7; color: var(--pv-green); }
.phi-status-failed { background: #fee2e2; color: #dc2626; }
.phi-status-initiated { background: #fef3c7; color: var(--pv-amber); }
.phi-status-refunded { background: #f1f2f8; color: var(--pv-muted); }
.phi-reason { display: block; font-size: 0.68rem; color: #dc2626; margin-top: 0.3rem; }

/* ---- /Settings: tabs ---- */
.settings-tabs { border-bottom-color: var(--pv-border); gap: 0.25rem; }
.settings-tabs .nav-link {
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--pv-muted); font-weight: 700; font-size: 0.88rem; padding: 0.6rem 0.9rem;
}
.settings-tabs .nav-link:hover { color: var(--pv-text); border-color: var(--pv-border); }
.settings-tabs .nav-link.active { color: var(--pv-indigo); border-color: var(--pv-indigo); background: none; }
.settings-tab-badge {
  display: inline-block; margin-left: 0.4rem; background: #fef3c7; color: var(--pv-amber);
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 0.12rem 0.45rem; border-radius: 999px; vertical-align: middle;
}

/* ============================================================
   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; }

/* ==========================================================================
   Calendar (redesigned) — bordered month grid, stats, legend and agenda
   ========================================================================== */
.calx { max-width: 1400px; margin: 0 auto; padding: 0.35rem 0 1.5rem; }

.calx-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(120deg, #4f46e5 0%, #7c3aed 60%, #db2777 120%);
  color: #fff; border-radius: 18px; padding: 1rem 1.25rem; margin-bottom: 0.9rem;
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.22);
}
.calx-title { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.calx-title-icon {
  width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.18);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.calx-title-icon svg { width: 22px; height: 22px; }
.calx-title h3 { margin: 0; color: #fff; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.calx-title span { font-size: 0.66rem; opacity: 0.85; }

.calx-nav { display: flex; align-items: center; gap: 0.45rem; }
.calx-nav-arrow {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff;
  transition: background 0.15s ease;
}
.calx-nav-arrow svg { width: 18px; height: 18px; }
.calx-nav-arrow:hover { background: rgba(255, 255, 255, 0.3); color: #fff; }
.calx-today {
  padding: 0.45rem 1rem; border-radius: 999px; background: #fff; color: var(--pv-indigo);
  font-weight: 700; font-size: 0.66rem; text-decoration: none; border: 1px solid #fff;
}
.calx-today:hover { color: var(--pv-indigo-dark); }
.calx-today.active { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }

.calx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.9rem; }
.calx-stat {
  background: #fff; border: 1px solid var(--pv-border); border-radius: 14px; padding: 0.75rem 0.95rem;
  display: flex; flex-direction: column; gap: 0.1rem; text-decoration: none; position: relative; overflow: hidden;
}
.calx-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.calx-stat strong { font-family: var(--font-heading); font-size: 1.2rem; color: var(--pv-text); line-height: 1.2; }
.calx-stat span { font-size: 0.6rem; color: var(--pv-muted); font-weight: 600; }
.calx-stat.indigo::before { background: var(--pv-indigo); }
.calx-stat.violet::before { background: var(--pv-purple); }
.calx-stat.amber::before { background: var(--pv-amber); }
.calx-stat.green::before { background: var(--pv-green); }
a.calx-stat:hover { border-color: var(--pv-amber); }

.calx-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; align-items: start; }

.calx-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 0.6rem; }
.calx-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.6rem; font-weight: 600; color: var(--pv-muted); }
.calx-swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* The grid itself: one bordered, rounded frame; 1px gaps over a border-coloured background
   draw clean internal lines like a printed wall calendar. */
.calx-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: #dfe2ef; border: 1px solid #dfe2ef; border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(30, 33, 48, 0.06);
}
.calx-dow {
  background: linear-gradient(180deg, #f4f5ff, #eef0ff); padding: 0.55rem 0.5rem;
  text-align: center; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #4338ca;
}
.calx-dow-short { display: none; }
.calx-cell {
  background: #fff; min-height: 112px; padding: 0.4rem 0.45rem 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0;
  transition: background 0.12s ease;
}
.calx-cell:hover { background: #fcfcff; }
.calx-cell.weekend { background: #fafaff; }
.calx-cell.other-month { background: #f6f7fb; }
.calx-cell.other-month .calx-date { color: #b6b9c9; }
.calx-cell.other-month .calx-event { opacity: 0.55; }
.calx-cell.today { background: #f5f3ff; box-shadow: inset 0 0 0 2px var(--pv-indigo); }
.calx-cell-top { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.calx-date {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 700; color: var(--pv-text);
}
.calx-cell.today .calx-date { background: var(--pv-indigo); color: #fff; box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35); }
.calx-today-tag { font-size: 0.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pv-indigo); }

.calx-events { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.calx-event {
  display: flex; align-items: center; gap: 0.3rem; min-width: 0; text-decoration: none;
  font-size: 0.56rem; font-weight: 700; padding: 0.2rem 0.4rem; border-radius: 7px; border-left: 3px solid transparent;
}
.calx-event-icon { flex: none; font-size: 0.62rem; line-height: 1; }
.calx-event-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.calx-event:hover { filter: brightness(0.95); }
.calx-more { font-size: 0.54rem; font-weight: 700; color: var(--pv-muted); padding-left: 0.3rem; cursor: default; }

/* Status colours — shared by grid events, legend swatches and agenda badges. */
.calx-event.status-planned, .calx-swatch.status-planned, .calx-agenda-status.status-planned {
  background: #fff; color: #6d28d9; border: 1px dashed #a78bfa;
}
.calx-event.status-planned { border-left: 3px dashed #a78bfa; }
.calx-event.status-upcoming, .calx-swatch.status-upcoming, .calx-agenda-status.status-upcoming { background: #e0e7ff; color: #4338ca; border-color: #6366f1; }
.calx-event.status-pending, .calx-swatch.status-pending, .calx-agenda-status.status-pending { background: #fef3c7; color: #92400e; border-color: #f59e0b; }
.calx-event.status-completed, .calx-swatch.status-completed, .calx-agenda-status.status-completed { background: #dcfce7; color: #15803d; border-color: #22c55e; }
.calx-event.status-rejected, .calx-swatch.status-rejected, .calx-agenda-status.status-rejected { background: #fee2e2; color: #b91c1c; border-color: #ef4444; }

.calx-agenda {
  background: #fff; border: 1px solid var(--pv-border); border-radius: 16px; padding: 0.95rem;
  box-shadow: 0 6px 20px rgba(30, 33, 48, 0.05); position: sticky; top: 0.75rem;
}
.calx-agenda h4 { margin: 0 0 0.7rem; font-family: var(--font-heading); font-size: 0.82rem; color: var(--pv-text); }
.calx-agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.calx-agenda-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem; border-radius: 12px; border: 1px solid var(--pv-border); }
.calx-agenda-date {
  width: 42px; flex: none; border-radius: 10px; background: #eef0ff; color: #4338ca; text-align: center; padding: 0.25rem 0; line-height: 1.1;
}
.calx-agenda-date span { display: block; font-size: 0.5rem; font-weight: 800; text-transform: uppercase; }
.calx-agenda-date strong { font-family: var(--font-heading); font-size: 0.9rem; }
.calx-agenda-date.today { background: var(--pv-indigo); color: #fff; }
.calx-agenda-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.calx-agenda-info strong { font-size: 0.64rem; color: var(--pv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calx-agenda-status { align-self: flex-start; font-size: 0.52rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid transparent; }
.calx-agenda-open { flex: none; font-size: 1.1rem; color: var(--pv-muted); text-decoration: none; padding: 0 0.3rem; }
.calx-agenda-open:hover { color: var(--pv-indigo); }
.calx-agenda-empty { text-align: center; padding: 0.8rem 0.3rem; color: var(--pv-muted); }
.calx-agenda-empty span { font-size: 1.6rem; }
.calx-agenda-empty p { font-size: 0.62rem; margin: 0.3rem 0 0; }
.calx-agenda-note { font-size: 0.56rem; color: var(--pv-muted); margin: 0.8rem 0 0; }

@media (max-width: 1180px) {
  .calx-body { grid-template-columns: minmax(0, 1fr); }
  .calx-agenda { position: static; }
}
@media (max-width: 720px) {
  .calx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calx-dow-long { display: none; }
  .calx-dow-short { display: inline; }
  .calx-cell { min-height: 64px; padding: 0.25rem; }
  .calx-date { width: 22px; height: 22px; font-size: 0.58rem; }
  .calx-today-tag { display: none; }
  .calx-event { padding: 0.12rem; justify-content: center; border-left-width: 2px; }
  .calx-event-text { display: none; }
  .calx-header { padding: 0.8rem 0.9rem; }
  .calx-title h3 { font-size: 1rem; }
}

/* ==========================================================================
   Leads (the business's own enquiries)
   ========================================================================== */
.leads-page { max-width: 1400px; margin: 0 auto; padding: 0.35rem 0 1.5rem; }
.leads-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.leads-stat { display: flex; align-items: center; gap: 0.7rem; background: #fff; border: 1px solid var(--pv-border); border-radius: 14px; padding: 0.8rem 0.95rem; min-width: 0; }
.leads-stat > div { display: flex; flex-direction: column; min-width: 0; }
.leads-stat strong { font-family: var(--font-heading); font-size: 1.1rem; color: var(--pv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leads-stat span { font-size: 0.6rem; color: var(--pv-muted); font-weight: 600; }
.leads-stat-icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.leads-stat-icon.indigo { background: #eef0ff; }
.leads-stat-icon.green { background: #dcfce7; }
.leads-stat-icon.amber { background: #fef3c7; }
.leads-stat-icon.pink { background: #fce7f3; }

.leads-empty {
  background: #fff; border: 1px dashed #c7cbe0; border-radius: 18px; padding: 2.2rem 1.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.leads-empty-art { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #eef0ff, #fce7f3); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.leads-empty h3 { margin: 0.3rem 0 0; font-size: 0.95rem; color: var(--pv-text); }
.leads-empty p { max-width: 460px; font-size: 0.68rem; color: var(--pv-muted); margin: 0 0 0.5rem; }

.leads-table-card { background: #fff; border: 1px solid var(--pv-border); border-radius: 16px; overflow: hidden; }
.leads-table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.85rem 1rem; border-bottom: 1px solid var(--pv-border); }
.leads-table-head h3 { margin: 0; font-size: 0.85rem; color: var(--pv-text); }
.leads-table-head span { font-size: 0.6rem; color: var(--pv-muted); }
.leads-table-scroll { overflow-x: auto; }
.leads-table { width: 100%; border-collapse: collapse; font-size: 0.66rem; }
.leads-table th { text-align: left; padding: 0.6rem 1rem; background: #f8f9fd; color: var(--pv-muted); font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.05em; }
.leads-table td { padding: 0.7rem 1rem; border-top: 1px solid var(--pv-border); vertical-align: middle; color: var(--pv-text); }
.leads-table tr:hover td { background: #fcfcff; }
.leads-name { display: flex; align-items: center; gap: 0.55rem; }
.leads-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--pv-pink), var(--pv-purple)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.62rem; }
.leads-new-pill { background: #dcfce7; color: #15803d; font-size: 0.5rem; font-weight: 800; padding: 0.1rem 0.45rem; border-radius: 999px; text-transform: uppercase; }
.leads-contact { display: block; color: var(--pv-indigo); text-decoration: none; white-space: nowrap; }
.leads-contact:hover { text-decoration: underline; }
.leads-source { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.leads-source img { width: 16px; height: 16px; }
.leads-date { white-space: nowrap; color: var(--pv-muted) !important; }
.leads-date a { display: block; font-size: 0.58rem; color: var(--pv-indigo); text-decoration: none; }

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

/* ==========================================================================
   Release script (customer) — parts, checks, brief, versions, edit form
   ========================================================================== */
.rs-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.rs-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.6rem; font-weight: 700; background: #eef0ff; color: #4338ca; padding: 0.1rem 0.45rem; border-radius: 6px; }
.rs-version { font-size: 0.6rem; font-weight: 600; color: var(--pv-muted); }
.rs-approved { color: #15803d; }
.rs-card { background: #fff; border: 1px solid var(--pv-border); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.rs-part { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0.8rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--pv-border); }
.rs-part:last-of-type { border-bottom: none; }
.rs-part > span { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pv-muted); padding-top: 0.15rem; }
.rs-part p { margin: 0; white-space: pre-wrap; font-size: 0.72rem; color: var(--pv-text); }
.rs-hook { font-weight: 800; font-size: 0.78rem !important; }
.rs-tags { color: var(--pv-indigo) !important; }
.rs-muted { color: var(--pv-muted) !important; }
.rs-checks { display: grid; gap: 0.35rem; margin-top: 0.75rem; }
.rs-ok { font-size: 0.64rem; font-weight: 700; color: #15803d; background: #f0fdf4; padding: 0.45rem 0.7rem; border-radius: 10px; }
.rs-issue { font-size: 0.64rem; padding: 0.45rem 0.7rem; border-radius: 10px; }
.rs-issue.error { background: #fef2f2; color: #b91c1c; }
.rs-issue.warning { background: #fffbeb; color: #92400e; }
.rs-hint { font-size: 0.62rem; color: var(--pv-muted); margin: 0.2rem 0 0; }
.rs-links { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.rs-details { border: 1px solid var(--pv-border); border-radius: 12px; padding: 0.55rem 0.8rem; background: var(--pv-bg); }
.rs-details summary { cursor: pointer; font-size: 0.66rem; font-weight: 700; color: var(--pv-text); }
.rs-brief { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 0.3rem 0.8rem; margin: 0.6rem 0 0; font-size: 0.64rem; }
.rs-brief dt { color: var(--pv-muted); font-weight: 700; }
.rs-brief dd { margin: 0; color: var(--pv-text); }
.rs-gap { font-size: 0.62rem; color: #92400e; margin: 0.6rem 0 0; }
.rs-old { border-top: 1px dashed var(--pv-border); padding-top: 0.5rem; margin-top: 0.5rem; font-size: 0.62rem; color: var(--pv-muted); }
.rs-old p { white-space: pre-wrap; margin: 0.3rem 0 0; color: var(--pv-text); }
.rs-edit { background: #fff; border: 1px solid #c7d2fe; border-radius: 16px; padding: 0.8rem 1rem; margin-bottom: 1.25rem; }
.rs-edit > summary { cursor: pointer; font-weight: 800; font-size: 0.72rem; color: var(--pv-indigo); }
.rs-edit-form { display: grid; gap: 0.35rem; margin-top: 0.75rem; }
.rs-edit-form label { font-size: 0.62rem; font-weight: 700; color: var(--pv-text); margin-top: 0.4rem; }
.rs-edit-form label span { font-weight: 500; color: var(--pv-muted); }
.rs-edit-form input, .rs-edit-form textarea {
  width: 100%; border: 1px solid var(--pv-border); border-radius: 10px; padding: 0.5rem 0.65rem; font: inherit; font-size: 0.7rem; color: var(--pv-text);
}
.rs-edit-form input:focus, .rs-edit-form textarea:focus { outline: none; border-color: var(--pv-indigo); box-shadow: 0 0 0 3px #eef0ff; }
.rs-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.rs-needs-fix { color: #b91c1c !important; border-color: #fecaca !important; }
@media (max-width: 560px) {
  .rs-part { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ==========================================================================
   Business knowledge form (Settings)
   ========================================================================== */
.kb-form { margin-top: 0.9rem; }

/* Readiness: the six details every post is written from. */
.kb-ready {
  display: flex; gap: 0.9rem; align-items: center;
  padding: 0.75rem 1rem; margin-bottom: 0.8rem;
  border: 1px solid #dfe3fb; border-radius: 16px;
  background: linear-gradient(135deg, #f4f2ff, #eef6ff 60%, #f1fbf6);
}
.kb-ready-ring { position: relative; flex: none; width: 54px; height: 54px; }
.kb-ready-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kb-ready-ring circle { fill: none; stroke-width: 3.6; }
.kb-ring-bg { stroke: #e2e5f3; }
.kb-ring-fg { stroke: var(--pv-indigo); stroke-linecap: round; transition: stroke-dashoffset 0.3s; }
.kb-ready.is-complete .kb-ring-fg { stroke: #16a34a; }
.kb-ready-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; color: var(--pv-text); }
.kb-ready-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.kb-ready-text strong { font-size: 0.78rem; color: var(--pv-text); }
.kb-ready-text > span { font-size: 0.64rem; color: var(--pv-muted); }
.kb-ready-list { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.kb-ready-list a {
  font-size: 0.6rem; font-weight: 700; text-decoration: none; color: #6b7280;
  background: #fff; border: 1px solid #e3e6f0; border-radius: 99px; padding: 0.15rem 0.55rem;
}
.kb-ready-list a::before { content: "○ "; }
.kb-ready-list a.is-done { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.kb-ready-list a.is-done::before { content: "✓ "; }

/* Two columns of section cards; wide sections span both. */
.kb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; align-items: start; }
.kb-span { grid-column: 1 / -1; }
@media (max-width: 900px) { .kb-grid { grid-template-columns: minmax(0, 1fr); } }
.kb-card { background: #fff; border: 1px solid var(--pv-border); border-radius: 16px; padding: 0.85rem 0.95rem 0.9rem; box-shadow: 0 1px 3px rgba(30, 40, 90, 0.04); scroll-margin-top: 1rem; }
.kb-card-head { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.7rem; }
.kb-card-head h4 { margin: 0; font-size: 0.8rem; color: var(--pv-text); }
.kb-card-head p { margin: 0.1rem 0 0; font-size: 0.62rem; color: var(--pv-muted); line-height: 1.4; }
.kb-badge { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.kb-badge-blue { background: #e0edff; }
.kb-badge-pink { background: #fde4f1; }
.kb-badge-violet { background: #ece6ff; }
.kb-badge-green { background: #dcfce7; }
.kb-badge-amber { background: #fef3c7; }
.kb-badge-rose { background: #ffe4e6; }
.kb-badge-slate { background: #eef0f5; }

.kb-field { position: relative; margin-bottom: 0.7rem; }
.kb-field:last-child { margin-bottom: 0; }
.kb-field > label { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.68rem; font-weight: 700; color: #1f2544; margin-bottom: 0.3rem; }
.kb-optional { font-size: 0.58rem; font-weight: 600; color: var(--pv-muted); }
.kb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.kb-two .kb-field { margin-bottom: 0.7rem; }
/* Input boxes that read clearly as "type here": a firm border, a faint tint and a slight
   inner shadow; brighter on hover, a clear ring on focus. */
.kb-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .kb-form textarea, .kb-form select {
  width: 100%; min-width: 0; border: 1.5px solid #cfd4e6; border-radius: 10px;
  padding: 0.55rem 0.7rem; font: inherit; font-size: 0.72rem; color: var(--pv-text);
  background-color: #fcfcff; box-shadow: inset 0 1px 2px rgba(30, 40, 90, 0.06);
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}
.kb-form input::placeholder, .kb-form textarea::placeholder { color: #8e94b0; opacity: 1; }
.kb-form textarea { resize: vertical; line-height: 1.45; }
.kb-form input:not([type=file]):hover, .kb-form textarea:hover, .kb-form select:hover { border-color: #a9b0ee; background-color: #fff; }
.kb-form input:focus, .kb-form textarea:focus, .kb-form select:focus {
  outline: none; border-color: var(--pv-indigo); background-color: #fff;
  box-shadow: 0 0 0 3px rgba(91, 91, 214, 0.16);
}
/* Still empty: a soft lavender tint and a pencil, so what's left to fill stands out. */
.kb-form input:not([type=date]):not([type=file]):placeholder-shown:not(:focus),
.kb-form textarea:placeholder-shown:not(:focus) {
  border-color: #c3c1f3; background-color: #f6f5ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7ae0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 13px 13px; background-position: right 0.6rem top 0.62rem;
  padding-right: 1.9rem;
}
.kb-form input:not([type=date]):not([type=file]):placeholder-shown:hover:not(:focus),
.kb-form textarea:placeholder-shown:hover:not(:focus) { border-color: var(--pv-indigo); background-color: #f1f0ff; }
.kb-note { font-size: 0.6rem; color: var(--pv-muted); margin: -0.35rem 0 0.7rem; }

/* Character / line counters under each limited field. */
.kb-count { display: block; text-align: right; font-size: 0.55rem; color: #a0a6b8; margin-top: 0.15rem; min-height: 0.8rem; }
.kb-count.is-quiet { visibility: hidden; }
.kb-count.is-near { color: #b45309; font-weight: 700; }
.kb-count.is-over { color: #dc2626; font-weight: 700; visibility: visible; }
.kb-row .kb-count { display: none; }
.kb-row .kb-count.is-near, .kb-row .kb-count.is-over { display: block; position: absolute; right: 0; bottom: -0.9rem; }

/* Pick-to-fill chips. */
.kb-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; align-items: center; }
.kb-chips-label { font-size: 0.6rem; font-weight: 700; color: var(--pv-muted); margin-right: 0.1rem; }
.kb-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: 1px solid #e1e4ef; background: #f8f9fc; color: #4b5563;
  border-radius: 99px; padding: 0.2rem 0.6rem; font: inherit; font-size: 0.6rem; font-weight: 600; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.kb-chip:hover { border-color: #c7cbf5; background: #f1f2ff; }
.kb-chip.is-on { background: #eef0ff; border-color: var(--pv-indigo); color: var(--pv-indigo); }
.kb-chip.is-on::before { content: "✓"; font-weight: 800; }
.kb-colour i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); }
.kb-colour.is-on::before { content: none; }
.kb-colour.is-on { box-shadow: inset 0 0 0 1px var(--pv-indigo); }
.kb-chip-block.is-on { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.kb-quick-add .kb-chip { background: #fff; border-style: dashed; }
.kb-quick-add .kb-chip.is-on { border-style: solid; }
.kb-quick-add .kb-chip.is-on::before { content: none; }

/* Opening hours picker. */
.kb-hours-picker { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; margin-bottom: 0.4rem; }
.kb-days { display: flex; gap: 0.2rem; }
.kb-day { width: 34px; padding: 0.25rem 0; border: 1px solid #e1e4ef; border-radius: 8px; background: #f8f9fc; font: inherit; font-size: 0.58rem; font-weight: 700; color: #6b7280; cursor: pointer; }
.kb-day[aria-pressed="true"] { background: var(--pv-indigo); border-color: var(--pv-indigo); color: #fff; }
.kb-hours-times { display: flex; gap: 0.35rem; align-items: center; font-size: 0.62rem; color: var(--pv-muted); }
.kb-form .kb-hours-times select { width: auto; padding: 0.25rem 0.4rem; font-size: 0.62rem; }
.kb-mini-btn { border: 1px solid var(--pv-indigo); background: #fff; color: var(--pv-indigo); border-radius: 8px; padding: 0.25rem 0.55rem; font: inherit; font-size: 0.6rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.kb-mini-btn:hover { background: #eef0ff; }

/* Repeatable rows as a compact table. */
.kb-table-head { display: grid; gap: 0.45rem; font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #9aa1b2; margin: 0 0 0.25rem; padding: 0 0.1rem; }
.kb-rows { display: grid; gap: 0.4rem; margin-bottom: 0.55rem; }
.kb-rows:empty { display: none; }
.kb-table-head:has(+ .kb-rows:empty) { display: none; }
.kb-rows:empty + template + .kb-add, .kb-rows:empty ~ .kb-add { margin-top: 0.1rem; }
.kb-row { position: relative; display: grid; gap: 0.45rem; align-items: center; }
.kb-service-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.7fr) minmax(0, 2fr) 30px; }
.kb-offer-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 140px 30px; }
.kb-faq-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 30px; }
.kb-remove { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--pv-border); background: #fff; color: var(--pv-muted); cursor: pointer; }
.kb-remove:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.kb-add { background: none; border: 1px dashed #a5b4fc; color: var(--pv-indigo); border-radius: 10px; padding: 0.35rem 0.75rem; font: inherit; font-size: 0.62rem; font-weight: 700; cursor: pointer; }
.kb-add:hover { background: #eef0ff; }
.kb-faq-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .kb-faq-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .kb-two { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kb-table-head { display: none; }
  .kb-row { grid-template-columns: minmax(0, 1fr) 30px !important; padding: 0.5rem; border: 1px solid #eef0f5; border-radius: 12px; }
  .kb-row input { grid-column: 1; }
  .kb-row .kb-remove { grid-column: 2; grid-row: 1; }
}

/* Business profile: preview header, logo drop zone, fields with an icon. */
.bp-form .kb-grid { margin-top: 0; }
.bp-hero {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.8rem 1rem; margin-bottom: 0.8rem; border-radius: 16px; border: 1px solid #dfe3fb;
  background: linear-gradient(135deg, #f4f2ff, #eef6ff 60%, #fdf2f8);
}
.bp-logo { position: relative; flex: none; width: 60px; height: 60px; border-radius: 16px; overflow: visible; cursor: pointer; background: linear-gradient(135deg, var(--pv-indigo), #a78bfa); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(91, 91, 214, 0.25); }
.bp-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; background: #fff; }
.bp-logo-initials { color: #fff; font-weight: 800; font-size: 1.1rem; letter-spacing: 0.02em; }
.bp-logo-edit { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid var(--pv-border); font-size: 0.6rem; display: flex; align-items: center; justify-content: center; color: var(--pv-indigo); }
.bp-hero-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bp-hero-text strong { font-size: 0.95rem; color: var(--pv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-hero-text > span { font-size: 0.66rem; color: var(--pv-muted); }
.bp-hero-contact { font-weight: 600; color: #4b5563 !important; }
.bp-hero-note { margin-left: auto; font-size: 0.6rem; color: var(--pv-muted); max-width: 220px; text-align: right; }
@media (max-width: 640px) { .bp-hero-note { margin-left: 0; text-align: left; max-width: none; } }
.bp-input-icon { position: relative; }
.bp-input-icon > span { position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; pointer-events: none; }
.kb-form .bp-input-icon input:not([type=checkbox]):not([type=radio]) { padding-left: 1.9rem; }
.bp-drop {
  /* Positioned + clipped so the visually hidden file input stays inside it (it used to size
     against the whole page and push it sideways). */
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center;
  padding: 0.9rem; border: 1.5px dashed #c7cbf5; border-radius: 12px; background: #fafaff; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.bp-drop:hover, .bp-drop.is-over { background: #eef0ff; border-color: var(--pv-indigo); }
.bp-drop-icon { font-size: 1.1rem; }
.bp-drop strong { font-size: 0.7rem; color: var(--pv-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-drop > span { font-size: 0.6rem; color: var(--pv-muted); }
.kb-form .bp-drop input[type=file] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* Sticky save bar. */
.kb-savebar {
  position: sticky; bottom: 0.6rem; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem;
  margin-top: 0.8rem; padding: 0.55rem 0.7rem 0.55rem 1rem;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px);
  border: 1px solid var(--pv-border); border-radius: 14px; box-shadow: 0 8px 24px rgba(30, 40, 90, 0.12);
}
.kb-savebar-status { margin-right: auto; font-size: 0.64rem; font-weight: 600; color: #16a34a; }
.kb-savebar-status.is-dirty { color: #b45309; }
.kb-savebar-error { font-size: 0.62rem; font-weight: 700; color: #dc2626; }
.kb-shake { animation: kb-shake 0.35s; border-color: #fca5a5 !important; }
@keyframes kb-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* Portal buttons for the newer pages (Leads, script review, business knowledge). */
.pv-btn, .pv-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  font: inherit; font-size: 0.68rem; font-weight: 700; line-height: 1.2;
  padding: 0.55rem 1rem; border-radius: 10px; cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pv-btn { background: var(--pv-indigo); color: #fff; border: 1px solid var(--pv-indigo); }
.pv-btn:hover { background: var(--pv-indigo-dark); border-color: var(--pv-indigo-dark); color: #fff; }
.pv-btn-outline { background: #fff; color: var(--pv-text); border: 1px solid var(--pv-border); }
.pv-btn-outline:hover { border-color: var(--pv-indigo); color: var(--pv-indigo); }
.pv-btn-outline.danger { color: #b91c1c; border-color: #fecaca; }

/* ============================================================================
   Content plan (monthly plan the customer approves before anything is made)
   ============================================================================ */
.plan-alert-banner { background: #ede9fe; border-color: #c4b5fd; color: #4c1d95; }
.plan-alert-banner:hover { background: #ddd6fe; }
a.calx-event.status-planned { text-decoration: none; }
.calx-agenda-topic { font-size: 0.6rem; color: var(--pv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cp-page { max-width: 1100px; margin: 0 auto; padding: 0.35rem 0 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.cp-flash { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 12px; padding: 0.65rem 0.9rem; font-size: 0.68rem; font-weight: 600; }
.cp-flash-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.cp-months { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cp-months a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--pv-border); background: #fff; color: var(--pv-text); font-size: 0.66rem; font-weight: 700; text-decoration: none; }
.cp-months a.active { background: var(--pv-indigo); border-color: var(--pv-indigo); color: #fff; }
.cp-dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }

.cp-banner { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; border-radius: 16px; padding: 1rem 1.15rem; border: 1px solid var(--pv-border); background: #fff; }
.cp-banner h2 { margin: 0 0 0.3rem; font-size: 0.95rem; color: var(--pv-text); }
.cp-banner p { margin: 0; font-size: 0.68rem; color: #4b4f66; max-width: 640px; line-height: 1.55; }
.cp-banner p strong { display: block; margin-top: 0.35rem; color: #92400e; }
.cp-banner-pendingapproval { background: linear-gradient(135deg, #fffbeb, #fff); border-color: #fcd34d; }
.cp-banner-changesrequested { background: linear-gradient(135deg, #eff6ff, #fff); border-color: #bfdbfe; }
.cp-banner-approved { background: linear-gradient(135deg, #f0fdf4, #fff); border-color: #bbf7d0; }
.cp-banner-text { flex: 1 1 320px; min-width: 0; }
.cp-banner-actions { display: flex; gap: 0.5rem; align-items: flex-start; flex-wrap: wrap; }
.cp-banner-actions form { margin: 0; }
.cp-changes > summary { list-style: none; }
.cp-changes > summary::-webkit-details-marker { display: none; }
.cp-changes[open] > summary { border-color: var(--pv-indigo); color: var(--pv-indigo); }
.cp-changes-form { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; width: min(340px, 80vw); }
.cp-changes-form label { font-size: 0.62rem; font-weight: 700; color: var(--pv-text); }
.cp-changes-form textarea, .cp-edit-form input, .cp-edit-form select, .cp-edit-form textarea {
  font: inherit; font-size: 0.66rem; padding: 0.45rem 0.6rem; border: 1px solid var(--pv-border); border-radius: 8px; background: #fff; color: var(--pv-text); width: 100%; box-sizing: border-box;
}
.cp-changes-form textarea:focus, .cp-edit-form :is(input, select, textarea):focus { outline: 2px solid #c7d2fe; border-color: var(--pv-indigo); }

.cp-summary { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--pv-border); border-radius: 14px; padding: 0.7rem 1rem; }
.cp-summary-stat { display: flex; align-items: baseline; gap: 0.35rem; }
.cp-summary-stat strong { font-size: 1.05rem; color: var(--pv-text); }
.cp-summary-stat span { font-size: 0.62rem; color: var(--pv-muted); }
.cp-summary-mix { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.cp-summary-goal { margin-left: auto; font-size: 0.64rem; color: var(--pv-text); max-width: 420px; }
.cp-summary-goal span { display: block; font-size: 0.54rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pv-muted); font-weight: 700; }

.cp-obj { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.56rem; font-weight: 800; white-space: nowrap; background: #eef2ff; color: #4338ca; }
.cp-obj-promotion { background: #fef3c7; color: #92400e; }
.cp-obj-awareness { background: #e0f2fe; color: #075985; }
.cp-obj-engagement { background: #fce7f3; color: #9d174d; }
.cp-obj-leadgeneration { background: #dcfce7; color: #166534; }

.cp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cp-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0.9rem; align-items: start; background: #fff; border: 1px solid var(--pv-border); border-radius: 14px; padding: 0.85rem 1rem; }
.cp-date { display: flex; flex-direction: column; align-items: center; border-radius: 12px; background: #f5f3ff; padding: 0.4rem 0; line-height: 1.1; }
.cp-date-wd, .cp-date-m { font-size: 0.54rem; font-weight: 700; text-transform: uppercase; color: var(--pv-purple); letter-spacing: 0.04em; }
.cp-date-d { font-size: 1.05rem; font-weight: 800; color: var(--pv-text); }
.cp-body { min-width: 0; }
.cp-meta { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.cp-format { font-size: 0.6rem; font-weight: 800; color: var(--pv-text); }
.cp-channels { font-size: 0.58rem; color: var(--pv-muted); }
.cp-topic { margin: 0.35rem 0 0.15rem; font-size: 0.78rem; color: var(--pv-text); }
.cp-key { margin: 0; font-size: 0.64rem; color: #4b4f66; line-height: 1.5; }
.cp-foot { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.4rem; font-size: 0.6rem; color: var(--pv-muted); }
.cp-offer { color: #92400e; font-weight: 600; }
.cp-edit { margin-top: 0.5rem; }
.cp-edit > summary { cursor: pointer; font-size: 0.6rem; font-weight: 700; color: var(--pv-indigo); list-style: none; }
.cp-edit > summary::-webkit-details-marker { display: none; }
.cp-edit-form { margin-top: 0.55rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 0.8rem; padding: 0.75rem; border-radius: 12px; background: #f8f9fd; }
.cp-edit-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.58rem; font-weight: 700; color: var(--pv-muted); }
.cp-edit-form .wide { grid-column: 1 / -1; }
.cp-state { text-align: right; white-space: nowrap; }
.cp-state-link { font-size: 0.6rem; font-weight: 700; color: var(--pv-indigo); text-decoration: none; }
.cp-state-muted { font-size: 0.56rem; color: var(--pv-muted); }

@media (max-width: 720px) {
  .cp-item { grid-template-columns: 46px minmax(0, 1fr); }
  .cp-state { grid-column: 2; text-align: left; }
  .cp-edit-form { grid-template-columns: 1fr; }
  .cp-summary-goal { margin-left: 0; }
}

.cp-plan { background: #fff; border: 1px solid var(--pv-border); border-radius: 16px; padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 0.9rem; }
.cp-plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cp-plan-head h2 { margin: 0; font-size: 0.95rem; color: var(--pv-text); }
.cp-plan-head p { margin: 0.2rem 0 0; font-size: 0.62rem; color: var(--pv-muted); }
.cp-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.8rem; }
.cp-plan-block { background: #f8f9fd; border-radius: 12px; padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.cp-plan-block p { margin: 0; font-size: 0.66rem; color: var(--pv-text); }
.cp-label { font-size: 0.54rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pv-muted); }
.cp-schedule { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.cp-schedule li { display: flex; flex-direction: column; font-size: 0.64rem; }
.cp-schedule strong { color: var(--pv-text); }
.cp-schedule span { color: var(--pv-muted); font-size: 0.6rem; }
.cp-mixbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.cp-mixbar .cp-mixseg { display: block; border-radius: 0; padding: 0; min-width: 4px; }
.cp-mixseg.cp-obj-education { background: #6366f1; }
.cp-mixseg.cp-obj-promotion { background: #f59e0b; }
.cp-mixseg.cp-obj-awareness { background: #0ea5e9; }
.cp-mixseg.cp-obj-engagement { background: #ec4899; }
.cp-edit-form input[type=time] { width: auto; max-width: 160px; }
.cp-goal { color: #4b4f66 !important; }
.cp-change > summary { cursor: pointer; font-size: 0.64rem; font-weight: 700; color: var(--pv-indigo); list-style: none; }
.cp-change > summary::-webkit-details-marker { display: none; }
.cp-change-note { margin: 0; font-size: 0.62rem; color: var(--pv-muted); font-weight: 400; }
.cp-slot-edit, .cp-mix-edit, .cp-focus-edit { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.62rem; color: var(--pv-text); }
.cp-slot-edit strong { min-width: 110px; }
.cp-slot-edit select, .cp-mix-edit input { width: auto !important; }
.cp-mix-edit label { flex-direction: row !important; align-items: center; }
.cp-mix-edit input { max-width: 70px; }
.cp-mix-edit > span, .cp-focus-edit > span { width: 100%; font-weight: 700; color: var(--pv-muted); }
.cp-mix-edit em, .cp-focus-edit em { font-weight: 400; }
.cp-check { flex-direction: row !important; align-items: center; gap: 0.3rem !important; color: var(--pv-text) !important; }
.cp-check input { width: auto !important; }
.cp-section-title { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--pv-text); }
.cp-section-title span { font-weight: 400; color: var(--pv-muted); font-size: 0.66rem; }

/* ---- Script needed / structured script ---- */
/* Home: a format tile where there's no real creative yet (never a stock photo). */
.cc-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; background: linear-gradient(135deg, #eef0ff, #f7f3ff); }
.cc-tile-reel, .cc-tile-video { background: linear-gradient(135deg, #fdecf5, #f3edff); }
.cc-tile-poster { background: linear-gradient(135deg, #eaf4ff, #eef0ff); }
.cc-tile-leadgen { background: linear-gradient(135deg, #e9fbf1, #eef7ff); }
.cc-tile-icon { font-size: 1.6rem; line-height: 1; }
.cc-tile-note { font-size: 0.56rem; font-weight: 700; color: var(--pv-muted); text-transform: uppercase; letter-spacing: 0.04em; }
a.content-card { text-decoration: none; color: inherit; }
.perf-empty { display: flex; gap: 0.8rem; align-items: center; padding: 1.1rem 1.2rem; }
.perf-empty-icon { font-size: 1.4rem; }
.perf-empty strong { font-size: 0.78rem; color: var(--pv-text); }
.perf-empty p { margin: 0.2rem 0 0; font-size: 0.66rem; color: var(--pv-muted); max-width: 560px; }
.rs-creative { padding: 0.8rem; }
.rs-creative img, .rs-creative video { display: block; max-width: 100%; max-height: 640px; border-radius: 12px; margin: 0 auto; background: #0f0f19; }
.rs-needed { display: flex; gap: 0.8rem; align-items: flex-start; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 14px; padding: 0.9rem 1rem; margin-bottom: 0.8rem; }
.rs-needed-icon { font-size: 1.2rem; }
.rs-needed-body strong { font-size: 0.8rem; color: var(--pv-text); }
.rs-needed-body p { margin: 0.25rem 0 0.5rem; font-size: 0.68rem; color: #4b4f66; }
.rs-needed-list { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 14px; padding: 0.8rem; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.rs-needed-list-head { display: flex; flex-direction: column; gap: 0.2rem; padding: 0 0.2rem 0.3rem; }
.rs-needed-list-head strong { font-size: 0.8rem; color: var(--pv-text); }
.rs-needed-list-head span { font-size: 0.64rem; color: #6b5d2a; }
.rs-needed-row { text-decoration: none; color: inherit; background: #fff; }
.rs-needed-row .pv-btn { flex: none; }
.rs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 0.8rem; }
.rs-row .rs-narrow { max-width: 200px; }
.rs-scenes { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.5rem; }
.rs-scene { border: 1px solid var(--pv-border); border-radius: 12px; padding: 0.6rem 0.75rem; background: #fcfcff; }
.rs-scene-top { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.3rem; }
.rs-scene-top input { flex: 1; min-width: 0; }
.rs-scene-top .rs-timing { flex: 0 0 110px; }
.rs-scene-no { font-size: 0.6rem; font-weight: 800; color: var(--pv-purple); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; }
.rs-scene-remove { border: none; background: none; color: var(--pv-muted); cursor: pointer; font-size: 0.75rem; }
.rs-scene-remove:hover { color: #b91c1c; }
.rs-add-scene { margin-bottom: 0.6rem; }
.rs-confirm { margin-top: 0.8rem; padding: 0.8rem 0.9rem; border-radius: 12px; background: #eef2ff; border: 1px solid #c7d2fe; }
.rs-confirm p { margin: 0 0 0.6rem; font-size: 0.68rem; color: var(--pv-text); }
.rs-link-btn { background: none; border: none; color: var(--pv-indigo); font: inherit; font-size: 0.64rem; font-weight: 700; cursor: pointer; }
.rs-scene-list { margin: 0.2rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.rs-scene-list p { margin: 0.1rem 0; }
.rs-scene-title { font-weight: 700; font-size: 0.7rem; color: var(--pv-text); }
.rs-scene-title em { font-weight: 400; color: var(--pv-muted); margin-left: 0.3rem; }
.rs-onscreen { font-weight: 600; color: #4338ca; }
.rs-brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem; }
.rs-brief-grid em { font-style: normal; font-weight: 700; font-size: 0.6rem; text-transform: uppercase; color: var(--pv-muted); letter-spacing: 0.04em; }
.rs-brief-grid ol, .rs-brief-grid ul { margin: 0.2rem 0 0; padding-left: 1rem; font-size: 0.66rem; }
.rs-brief-grid p { margin: 0.2rem 0 0; }

/* ---- Manual steps / automation status ---- */
.rs-progress { display: flex; gap: 0.8rem; align-items: flex-start; background: #f5f7ff; border: 1px solid #dfe3fb; border-radius: 14px; padding: 0.9rem 1rem; margin-bottom: 0.8rem; }
.rs-progress > span { font-size: 1.2rem; }
.rs-progress strong { font-size: 0.8rem; color: var(--pv-text); }
.rs-progress p { margin: 0.2rem 0 0; font-size: 0.66rem; color: var(--pv-muted); }
.rs-posted { display: flex; flex-direction: column; gap: 0.45rem; }
.rs-posted-row { display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap; font-size: 0.68rem; }
.rs-posted-row strong { color: #15803d; }
.rs-posted-row span { color: var(--pv-muted); }
.rs-post-kit { display: flex; flex-direction: column; gap: 0.4rem; }
.rs-caption { white-space: pre-wrap; background: #f8f9fd; border-radius: 10px; padding: 0.6rem 0.75rem; margin: 0 0 0.4rem; }
.rs-post-channel { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0.6rem; align-items: center; }
.rs-automation-note { margin: 0.8rem 0 0; font-size: 0.64rem; color: var(--pv-muted); }
.rs-ready-list { background: #eff6ff; border-color: #bfdbfe; }


/* ---- Home: "Your marketing so far" — the white lower half of the hero card ---- */
.summary-foot { padding: 0.45rem 0.7rem 0.6rem; container-type: inline-size; }
.summary-head { font-size: 0.66rem; font-weight: 800; color: #13235b; margin: 0 0 0.35rem 0.1rem; }
.summary-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
}
/* Each tile: icon, count and label on one row, the status note below. Its own colour (--c/--c2)
   runs through the tinted gradient background, the icon badge and the note. */
.summary-tile {
  --c: #5b5bd6;
  --c2: #8b7cf6;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, #fff);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, #fff), color-mix(in srgb, var(--c2) 7%, #fff));
}
.summary-posts { --c: #6d4aff; --c2: #9b7bff; }
.summary-plan { --c: #0ea5a4; --c2: #34d3c4; }
.summary-works { --c: #f59e0b; --c2: #fbbf24; }
.summary-reach { --c: #2563eb; --c2: #60a5fa; }
.summary-enquiries { --c: #e11d74; --c2: #fb6fa8; }
.summary-row { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.summary-icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  box-shadow: 0 3px 8px color-mix(in srgb, var(--c) 35%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.summary-icon svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.summary-row strong { flex: none; font-size: 1rem; line-height: 1; font-weight: 800; color: var(--pv-text); white-space: nowrap; }
.summary-label { min-width: 0; font-size: 0.58rem; font-weight: 700; line-height: 1.15; color: var(--pv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-note { font-size: 0.55rem; font-weight: 700; color: color-mix(in srgb, var(--c) 85%, #000); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.25rem; }
/* Nothing yet: still in its colour, just softer, so it reads as "not active yet" rather than bad. */
.summary-tile.is-idle { border-color: color-mix(in srgb, var(--c) 16%, #fff); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 9%, #fff), color-mix(in srgb, var(--c2) 3%, #fff)); }
.summary-tile.is-idle .summary-icon { opacity: 0.55; box-shadow: none; }
.summary-tile.is-idle strong { color: #8f97aa; }
.summary-tile.is-idle .summary-note { color: var(--pv-muted); font-weight: 600; }
.summary-idle-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--c) 30%, #cbd0dc); }
/* By the card's width, not the window's. Where five tiles are too narrow for a one-row header,
   the label moves under the icon and count; below 600px, three (then two) tiles per row. */
@container (min-width: 601px) and (max-width: 760px) {
  .summary-row { flex-wrap: wrap; row-gap: 0.2rem; }
  .summary-label { flex-basis: 100%; }
}
@container (max-width: 600px) { .summary-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 420px) { .summary-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Side column: channels, a card of their own above the plan card ---- */
.channels-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #e3e6f5;
  border-radius: var(--radius-lg);
  padding: 0.6rem 1.1rem 0.7rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
  background:
    radial-gradient(120px 80px at 8% 0%, rgba(124, 92, 255, 0.14), transparent 70%),
    radial-gradient(140px 90px at 100% 100%, rgba(37, 211, 102, 0.12), transparent 70%),
    radial-gradient(120px 90px at 60% 120%, rgba(24, 119, 242, 0.10), transparent 70%),
    linear-gradient(135deg, #f7f5ff, #f2f8ff 55%, #f3fbf6);
}
.channels-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.channels-card-head h4 { display: flex; align-items: center; gap: 0.45rem; font-size: 0.736rem; margin: 0; }
.channels-count { font-size: 0.55rem; font-weight: 700; color: #15803d; background: rgba(22, 163, 74, 0.1); border-radius: 99px; padding: 0.1rem 0.45rem; }
.channels-card-link { font-size: 0.62rem; font-weight: 700; color: var(--pv-indigo); text-decoration: none; }
.channels-card-link:hover { text-decoration: underline; }
.gp-channel-icons { display: flex; justify-content: space-between; align-items: center; gap: 0.3rem; min-width: 0; }
.gp-channel {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(60, 72, 140, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.gp-channel img { width: 17px; height: 17px; object-fit: contain; border-radius: 4px; }
a.gp-channel { cursor: pointer; }
.gp-channel:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(60, 72, 140, 0.18); }
.gp-channel.locked { background: rgba(255, 255, 255, 0.55); box-shadow: none; border: 1px dashed #d5d9e6; }
.gp-channel.locked img { filter: grayscale(1); opacity: 0.4; }
.gp-channel.disconnected img { opacity: 0.8; }
.gp-channel-state {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.gp-channel-state svg { width: 8px; height: 8px; }
.gp-channel.connected .gp-channel-state { background: #16a34a; }
.gp-channel.disconnected .gp-channel-state { background: #9ca3af; }


/* ==========================================================================
   My Marketing + Plan & Usage (shared progress colours: mm-c-*)
   ========================================================================== */
.mm-c-plan { --mm: #c7cbe0; background: var(--mm); }
.mm-c-making { --mm: #6366f1; background: var(--mm); }
.mm-c-you { --mm: #f59e0b; background: var(--mm); }
.mm-c-done { --mm: #16a34a; background: var(--mm); }

.mm-page { display: flex; flex-direction: column; gap: 0.9rem; }
.mm-intro {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.2rem; border-radius: 18px; border: 1px solid #dfe3fb;
  background: linear-gradient(135deg, #f4f2ff, #eef6ff 60%, #f1fbf6);
}
.mm-intro h2 { margin: 0; font-size: 1.05rem; color: var(--pv-text); }
.mm-intro p { margin: 0.25rem 0 0; font-size: 0.72rem; color: #4b5563; max-width: 640px; line-height: 1.5; }
.mm-month { flex: none; font-size: 0.66rem; font-weight: 700; color: var(--pv-indigo); background: #fff; border: 1px solid #dfe3fb; border-radius: 99px; padding: 0.25rem 0.7rem; }

/* The four steps, left to right, with an arrow between. */
.mm-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.mm-step {
  position: relative; display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.8rem 0.9rem; background: #fff; border: 1px solid var(--pv-border); border-radius: 14px;
}
.mm-step:not(:last-child)::after {
  content: "›"; position: absolute; right: -0.62rem; top: 50%; transform: translateY(-50%);
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; border: 1px solid var(--pv-border);
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; color: #9aa1b2; z-index: 1;
}
.mm-step-icon { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 0.62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 0.3rem; }
.mm-step-icon.mm-c-plan { color: #4b5563; }
.mm-step strong { font-size: 1.4rem; line-height: 1.1; color: var(--pv-text); }
.mm-step-title { font-size: 0.72rem; font-weight: 800; color: var(--pv-text); }
.mm-step-text { font-size: 0.6rem; color: var(--pv-muted); line-height: 1.4; }
.mm-step-alert { border-color: #fcd34d; background: #fffbeb; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12); }
@media (max-width: 900px) {
  .mm-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-step:not(:last-child)::after { display: none; }
}

.mm-callout { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 1rem; border-radius: 14px; border: 1px solid; }
.mm-callout > div { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.mm-callout strong { font-size: 0.76rem; color: var(--pv-text); }
.mm-callout span:not(.mm-callout-icon) { font-size: 0.64rem; color: #4b5563; }
.mm-callout-icon { font-size: 1.2rem; }
.mm-callout-you { background: #fffbeb; border-color: #fcd34d; }
.mm-callout-ok { background: #f0fdf4; border-color: #bbf7d0; }
.mm-callout-info { background: #f5f7ff; border-color: #dfe3fb; }
@media (max-width: 560px) { .mm-callout { flex-wrap: wrap; } }

.mm-section-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.mm-section-head h3 { margin: 0; font-size: 0.86rem; color: var(--pv-text); }
.mm-section-head > span { font-size: 0.64rem; color: var(--pv-muted); }
.mm-section-head .mm-link { margin-left: auto; }
.mm-link { font-size: 0.64rem; font-weight: 700; color: var(--pv-indigo); text-decoration: none; white-space: nowrap; }
.mm-link:hover { text-decoration: underline; }
.mm-muted { color: var(--pv-muted); }

.mm-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
@media (max-width: 900px) { .mm-types { grid-template-columns: minmax(0, 1fr); } }
.mm-type { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.85rem 0.95rem; background: #fff; border: 1px solid var(--pv-border); border-radius: 14px; }
.mm-type header { display: flex; align-items: center; gap: 0.6rem; }
.mm-type-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #f1f0ff; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.mm-type-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mm-type-name strong { font-size: 0.78rem; color: var(--pv-text); }
.mm-type-name span { font-size: 0.62rem; color: var(--pv-muted); }
.mm-pill { flex: none; font-size: 0.58rem; font-weight: 700; color: var(--pv-indigo); background: #eef0ff; border-radius: 99px; padding: 0.15rem 0.55rem; }
.mm-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: #e8eaf3; }
.mm-bar i { display: block; height: 100%; }
.mm-type-count { font-size: 0.66rem; color: #4b5563; }
.mm-type-count strong { color: var(--pv-text); }
.mm-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; font-size: 0.6rem; color: #4b5563; align-items: center; }
.mm-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.3rem; vertical-align: 0; }
.mm-type footer { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding-top: 0.45rem; border-top: 1px solid #f0f1f6; margin-top: auto; }
.mm-channels { display: flex; gap: 0.3rem; }
.mm-channels img { width: 18px; height: 18px; border-radius: 4px; }
.mm-channels img.mm-off { filter: grayscale(1); opacity: 0.4; }
.mm-next { font-size: 0.6rem; color: #4b5563; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-type footer .mm-link { margin-left: auto; }

.mm-upcoming { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pv-border); border-radius: 14px; overflow: hidden; }
.mm-up-row { display: grid; grid-template-columns: 44px 170px minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.55rem 0.9rem; text-decoration: none; color: inherit; border-bottom: 1px solid #f0f1f6; }
.mm-up-row:last-child { border-bottom: none; }
a.mm-up-row:not(.mm-up-static):hover { background: #f8f9ff; }
.mm-date { display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 0.3rem 0; border-radius: 9px; background: #f4f5fb; }
.mm-date strong { font-size: 0.85rem; color: var(--pv-text); }
.mm-date span { font-size: 0.52rem; font-weight: 700; text-transform: uppercase; color: var(--pv-muted); }
.mm-up-type { font-size: 0.64rem; font-weight: 700; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-up-topic { font-size: 0.7rem; color: var(--pv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-status { font-size: 0.58rem; font-weight: 700; border-radius: 99px; padding: 0.15rem 0.55rem; white-space: nowrap; }
.mm-status-planned { background: #f1f2f6; color: #6b7280; }
.mm-status-making { background: #eef0ff; color: #4f46e5; }
.mm-status-you { background: #fef3c7; color: #b45309; }
.mm-status-ready { background: #e0f2fe; color: #0369a1; }
.mm-status-done { background: #dcfce7; color: #15803d; }
.mm-status-hold { background: #fee2e2; color: #b91c1c; }
@media (max-width: 640px) {
  .mm-up-row { grid-template-columns: 44px minmax(0, 1fr); row-gap: 0.2rem; }
  .mm-up-type, .mm-up-topic, .mm-status { grid-column: 2; }
  .mm-status { justify-self: start; }
  .mm-intro { flex-direction: column; }
}

/* ---- Plan & Usage ---- */
.plan-usage-history { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.plan-usage-history .payment-history-card { position: static; }
.pu-plan { padding: 1rem 1.2rem; border-radius: 18px; border: 1px solid #dfe3fb; background: linear-gradient(135deg, #f4f2ff, #eef6ff 60%, #fdf2f8); }
.pu-plan-main { display: flex; align-items: center; gap: 0.8rem; }
.pu-plan-crown { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 12px rgba(91, 91, 214, 0.15); }
.pu-plan-name { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 1rem; font-weight: 800; color: var(--pv-text); }
.pu-plan-desc { font-size: 0.66rem; color: #4b5563; margin-top: 0.1rem; }
.pu-plan-price { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.pu-plan-price strong { font-size: 1.3rem; color: var(--pv-text); line-height: 1.1; }
.pu-plan-price span { font-size: 0.6rem; color: var(--pv-muted); }
.pu-pill { font-size: 0.58rem; font-weight: 700; border-radius: 99px; padding: 0.15rem 0.55rem; }
.pu-pill-ok { background: #dcfce7; color: #15803d; }
.pu-pill-warn { background: #fef3c7; color: #b45309; }
.pu-pill-bad { background: #fee2e2; color: #b91c1c; }
.pu-facts { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid rgba(91, 91, 214, 0.15); }
.pu-facts > div { display: flex; flex-direction: column; }
.pu-facts > div span { font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pv-muted); }
.pu-facts > div strong { font-size: 0.74rem; color: var(--pv-text); }
.pu-facts .pv-btn { margin-left: auto; }
.pu-section-head { display: flex; flex-direction: column; gap: 0.15rem; margin: 1.1rem 0 0.55rem; }
.pu-section-head h3 { margin: 0; font-size: 0.86rem; color: var(--pv-text); }
.pu-section-head span { font-size: 0.64rem; color: var(--pv-muted); max-width: 640px; }
.pu-usage { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.6rem; }
.pu-usage-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem 0.85rem; background: #fff; border: 1px solid var(--pv-border); border-radius: 14px; }
.pu-usage-top { display: flex; align-items: center; gap: 0.5rem; }
.pu-usage-top div { display: flex; flex-direction: column; min-width: 0; }
.pu-usage-top strong { font-size: 0.72rem; color: var(--pv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-usage-top span { font-size: 0.58rem; color: var(--pv-muted); }
.pu-usage-num strong { font-size: 1.35rem; color: var(--pv-text); }
.pu-usage-num span { font-size: 0.64rem; color: #4b5563; }
.pu-usage-note { font-size: 0.6rem; font-weight: 600; color: #4b5563; }
.pu-legend { margin-top: 0.55rem; }
.pu-legend .mm-link { margin-left: auto; }
.pu-includes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 900px) { .pu-includes { grid-template-columns: minmax(0, 1fr); } }
.pu-inc-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.8rem 0.9rem; background: #fff; border: 1px solid var(--pv-border); border-radius: 14px; }
.pu-inc-label { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pv-muted); }
.pu-inc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pu-inc-list li { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.68rem; color: var(--pv-text); }
.pu-inc-list strong { font-size: 0.64rem; color: var(--pv-indigo); white-space: nowrap; }
.pu-channels { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pu-channel { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.6rem; font-weight: 600; color: var(--pv-text); background: #f8f9fc; border: 1px solid #e3e6f0; border-radius: 99px; padding: 0.15rem 0.55rem 0.15rem 0.2rem; }
.pu-channel img { width: 16px; height: 16px; border-radius: 4px; }
.pu-channel-off { color: #9aa1b2; background: #fff; border-style: dashed; }
.pu-channel-off img { filter: grayscale(1); opacity: 0.4; }
.pu-inc-hint { font-size: 0.58rem; color: var(--pv-muted); }
.pu-inc-big { font-size: 0.95rem; color: var(--pv-text); }
.pu-more { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 14px; background: linear-gradient(135deg, #f5f3ff, #eef2ff); border: 1px solid #e0e0fb; }
.pu-more > div { display: flex; flex-direction: column; flex: 1; }
.pu-more strong { font-size: 0.74rem; color: var(--pv-text); }
.pu-more > div span { font-size: 0.62rem; color: #4b5563; }
@media (max-width: 560px) { .pu-more { flex-wrap: wrap; } .pu-plan-main { flex-wrap: wrap; } .pu-plan-price { margin-left: 0; text-align: left; } }
.pu-manage h4 { font-size: 0.78rem; font-weight: 800; color: var(--pv-text); margin: 0 0 0.35rem; }
.pu-manage p { font-size: 0.62rem; color: var(--pv-muted); margin: 0 0 0.5rem; line-height: 1.5; }
.pu-cancel { background: none; border: 1px solid #fecaca; color: #b91c1c; border-radius: 9px; padding: 0.3rem 0.7rem; font: inherit; font-size: 0.62rem; font-weight: 700; cursor: pointer; }
.pu-cancel:hover { background: #fef2f2; }

/* Plan & Usage: plan card detail and upgrade options. */
.pu-plan-summary { margin: 0.75rem 0 0; font-size: 0.72rem; color: #374151; line-height: 1.5; }
.pu-plan-summary strong { color: var(--pv-text); }
.pu-plan .pu-includes { margin-top: 0.75rem; }
.pu-plan .pu-inc-card { background: rgba(255, 255, 255, 0.85); }
.pu-actions { margin-left: auto; display: flex; gap: 0.45rem; flex-wrap: wrap; }
.pu-upgrades { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.7rem; }
.pu-up-card { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.9rem 1rem; background: #fff; border: 1px solid #dcd8fb; border-radius: 16px; box-shadow: 0 4px 14px rgba(91, 91, 214, 0.08); }
.pu-up-head { display: flex; justify-content: space-between; gap: 0.6rem; align-items: flex-start; }
.pu-up-head > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.pu-up-head strong { font-size: 0.86rem; color: var(--pv-text); }
.pu-up-head > div:first-child span { font-size: 0.62rem; color: var(--pv-muted); }
.pu-up-price { text-align: right; display: flex; flex-direction: column; flex: none; }
.pu-up-price strong { font-size: 1rem; }
.pu-up-price span { font-size: 0.58rem; font-weight: 700; color: #b45309; }
.pu-gains { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.pu-gains li { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.68rem; color: var(--pv-text); line-height: 1.4; }
.pu-gains li span { flex: none; width: 20px; text-align: center; }
.pu-up-btn { width: 100%; }

/* Change plan: what each bigger plan adds over the current one. */
.cp-gains { margin: 0.2rem 0 0.8rem; padding: 0.6rem 0.7rem; border-radius: 12px; background: #f5f3ff; border: 1px solid #e4e0fb; text-align: left; }
.cp-gains-label { display: block; font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pv-indigo); margin-bottom: 0.3rem; }
.cp-gains ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.cp-gains li { display: flex; gap: 0.4rem; font-size: 0.64rem; color: var(--pv-text); line-height: 1.4; }
.cp-gains li span { flex: none; width: 18px; text-align: center; }
.cp-extra { display: block; margin-top: 0.35rem; font-size: 0.6rem; font-weight: 700; color: #b45309; }


/* ==========================================================================
   Content Plan — explained
   ========================================================================== */
.cp-how { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.cp-how li { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.65rem 0.8rem; border-radius: 14px; background: linear-gradient(135deg, #f4f2ff, #eef6ff); border: 1px solid #dfe3fb; font-size: 0.62rem; color: #4b5563; line-height: 1.45; }
.cp-how li > span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pv-indigo); color: #fff; font-weight: 800; font-size: 0.64rem; display: flex; align-items: center; justify-content: center; }
.cp-how strong { display: block; font-size: 0.7rem; color: var(--pv-text); }
@media (max-width: 800px) { .cp-how { grid-template-columns: minmax(0, 1fr); } }
.cp-plan-head h2 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cp-block { padding: 0.8rem 0.9rem; border: 1px solid #eceef6; border-radius: 14px; background: #fbfbfe; margin-top: 0.7rem; }
.cp-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.cp-block-note { font-size: 0.62rem; color: var(--pv-muted); }
.cp-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0.7rem; }
.cp-two .cp-block { margin-top: 0.7rem; }
@media (max-width: 900px) { .cp-two { grid-template-columns: minmax(0, 1fr); } }
.cp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.cp-weekday { display: flex; flex-direction: column; gap: 0.3rem; min-height: 86px; padding: 0.45rem; border-radius: 12px; background: #fff; border: 1px solid #e3e6f0; }
.cp-weekday-off { background: transparent; border-style: dashed; }
.cp-weekday-name { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pv-muted); text-align: center; }
.cp-weekday-rest { font-size: 0.56rem; color: #b0b5c6; text-align: center; margin-top: 0.4rem; }
.cp-weekchip { display: flex; flex-direction: column; font-size: 0.6rem; font-weight: 700; color: #3730a3; background: #eef0ff; border-radius: 8px; padding: 0.3rem 0.35rem; line-height: 1.3; }
.cp-weekchip em { font-style: normal; font-weight: 600; font-size: 0.54rem; color: #6b7280; }
@media (max-width: 760px) {
  .cp-week { grid-template-columns: minmax(0, 1fr); }
  .cp-weekday { flex-direction: row; align-items: center; flex-wrap: wrap; min-height: 0; }
  .cp-weekday-name { width: 36px; text-align: left; }
  .cp-weekday-rest { margin: 0; }
}
.cp-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cp-goal-top { display: flex; align-items: center; gap: 0.4rem; }
.cp-goal-top strong { font-size: 0.7rem; color: var(--pv-text); }
.cp-goal-count { margin-left: auto; font-size: 0.62rem; font-weight: 700; color: #4b5563; }
.cp-goal-dot { width: 9px; height: 9px; border-radius: 50%; }
.cp-goal-bar { height: 6px; border-radius: 99px; background: #eceef6; overflow: hidden; margin: 0.25rem 0 0.2rem; }
.cp-goal-bar i { display: block; height: 100%; border-radius: inherit; }
.cp-goal-hint { font-size: 0.6rem; color: var(--pv-muted); }
.cp-focus-text { font-size: 0.68rem; color: #374151; margin: 0 0 0.45rem; }
.cp-focus-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.cp-focus-chips span { font-size: 0.6rem; font-weight: 600; background: #fff; border: 1px solid #e3e6f0; border-radius: 99px; padding: 0.15rem 0.55rem; }
.cp-month-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.cp-month-head .cp-section-title { margin: 0; }
.cp-month-head .cp-months { margin: 0; }
.cp-month-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.7rem 0 0.4rem; }
.cp-month-stats > div { display: flex; flex-direction: column; min-width: 92px; padding: 0.5rem 0.7rem; background: #fff; border: 1px solid var(--pv-border); border-radius: 12px; }
.cp-month-stats strong { font-size: 1.05rem; color: var(--pv-text); line-height: 1.1; }
.cp-month-stats span { font-size: 0.58rem; color: var(--pv-muted); }
.cp-stat-done { color: #15803d !important; }
.cp-stat-you { color: #b45309 !important; }
.cp-stat-making { color: #4f46e5 !important; }
.cp-stat-muted { color: #9aa1b2 !important; }
.cp-month-note { font-size: 0.62rem; color: var(--pv-muted); margin: 0 0 0.6rem; }
.cp-state { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
/* Solid colours for the goal bars and dots (the pills use pale tints of the same). */
.cp-goal-bar i.cp-obj-education, .cp-goal-dot.cp-obj-education { background: #6366f1; }
.cp-goal-bar i.cp-obj-promotion, .cp-goal-dot.cp-obj-promotion { background: #f59e0b; }
.cp-goal-bar i.cp-obj-awareness, .cp-goal-dot.cp-obj-awareness { background: #0ea5e9; }
.cp-goal-bar i.cp-obj-engagement, .cp-goal-dot.cp-obj-engagement { background: #ec4899; }
.cp-goal-bar i.cp-obj-leadgeneration, .cp-goal-dot.cp-obj-leadgeneration { background: #16a34a; }


/* ---- Home: small layout refinements ---- */
.summary-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.summary-plan-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.62rem; font-weight: 700; color: var(--pv-indigo); text-decoration: none;
  background: #f1f0ff; border: 1px solid #dcd8fb; border-radius: 99px; padding: 0.2rem 0.65rem;
}
.summary-plan-link:hover { background: #e7e5ff; }
.summary-plan-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.summary-plan-badge { font-size: 0.54rem; font-weight: 800; color: #b45309; background: #fef3c7; border-radius: 99px; padding: 0.05rem 0.4rem; }
.channels-card { margin-top: 0.4rem; margin-bottom: 0; }
/* Each channel on a chip tinted in its own brand colour. */
.gp-channel { border: 1px solid transparent; }
.gp-ch-instagram { background: linear-gradient(135deg, #fff1f7, #fff4e5); border-color: #fbcfe8; }
.gp-ch-facebook { background: #eaf2ff; border-color: #c7dcfd; }
.gp-ch-whatsapp { background: #e8faf0; border-color: #bbf0d2; }
.gp-ch-website { background: #eef0ff; border-color: #d4d7fb; }
.gp-ch-youtube { background: #ffecec; border-color: #fecaca; }
.gp-ch-googleads { background: linear-gradient(135deg, #eaf2ff, #fff8e1); border-color: #dbe4f5; }
.gp-channel.locked { background: #f5f5f7; border: 1px dashed #d5d9e6; }
/* Upcoming: icon-only actions. */
.upcoming-icon-btn {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--pv-border); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: var(--pv-indigo); cursor: pointer; padding: 0;
}
.upcoming-icon-btn:hover { background: #f1f0ff; border-color: #c7cbf5; }
.upcoming-icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Help menu (top bar) + Support tickets
   ========================================================================== */
.help-btn { cursor: pointer; padding: 0; }
.help-btn:hover, .help-btn[aria-expanded="true"] { border-color: #c7cbf5; color: var(--pv-indigo); background: #f7f6ff; }
.help-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 0.55rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.help-menu { min-width: 280px; padding: 0.4rem; }
.help-menu-head { display: flex; flex-direction: column; padding: 0.45rem 0.6rem 0.55rem; }
.help-menu-head strong { font-size: 0.78rem; color: var(--pv-text); }
.help-menu-head span { font-size: 0.62rem; color: var(--pv-muted); }
.help-menu-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 10px; text-decoration: none; color: var(--pv-text); }
.help-menu-item:hover { background: #f4f3ff; }
.help-menu-icon { flex: none; width: 30px; height: 30px; border-radius: 9px; background: #f1f0ff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.help-menu-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.help-menu-text strong { font-size: 0.72rem; }
.help-menu-text span { font-size: 0.6rem; color: var(--pv-muted); }
.help-menu-new { font-size: 0.56rem; font-weight: 800; color: #fff; background: #ef4444; border-radius: 99px; padding: 0.1rem 0.45rem; }

.sp-page { display: flex; flex-direction: column; gap: 0.8rem; }
.sp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sp-head h1 { margin: 0; font-size: 1.1rem; color: var(--pv-text); }
.sp-head p { margin: 0.2rem 0 0; font-size: 0.7rem; color: var(--pv-muted); max-width: 620px; }
.sp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0.9rem; align-items: start; }
@media (max-width: 980px) { .sp-layout { grid-template-columns: minmax(0, 1fr); } }
.sp-main { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.sp-side { display: flex; flex-direction: column; gap: 0.75rem; }
.sp-card { background: #fff; border: 1px solid var(--pv-border); border-radius: 14px; padding: 0.85rem 0.95rem; }
.sp-card h3 { margin: 0 0 0.3rem; font-size: 0.78rem; color: var(--pv-text); }
.sp-card-soft { background: linear-gradient(135deg, #f4f2ff, #eef6ff); border-color: #dfe3fb; }
.sp-muted { font-size: 0.62rem; color: var(--pv-muted); margin: 0 0 0.5rem; }
.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 640px) { .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-stats > div { display: flex; flex-direction: column; padding: 0.6rem 0.8rem; background: #fff; border: 1px solid var(--pv-border); border-radius: 12px; }
.sp-stats strong { font-size: 1.15rem; color: var(--pv-text); line-height: 1.1; }
.sp-stats span { font-size: 0.6rem; color: var(--pv-muted); }
.sp-stat-alert { border-color: #fcd34d !important; background: #fffbeb !important; }
.sp-stat-alert strong { color: #b45309; }
.sp-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.sp-tabs a { font-size: 0.66rem; font-weight: 700; color: #4b5563; text-decoration: none; padding: 0.35rem 0.8rem; border-radius: 99px; border: 1px solid var(--pv-border); background: #fff; }
.sp-tabs a.active { background: var(--pv-indigo); border-color: var(--pv-indigo); color: #fff; }
.sp-list { background: #fff; border: 1px solid var(--pv-border); border-radius: 14px; overflow: hidden; }
.sp-list-head, .sp-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 90px 100px; gap: 0.7rem; align-items: center; padding: 0.6rem 0.9rem; }
.sp-list-head { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #9aa1b2; background: #fafbfd; border-bottom: 1px solid #f0f1f6; }
.sp-row { text-decoration: none; color: inherit; border-bottom: 1px solid #f0f1f6; }
.sp-row:last-child { border-bottom: none; }
.sp-row:hover { background: #f8f9ff; }
.sp-row-unread { background: #fbfaff; box-shadow: inset 3px 0 0 var(--pv-indigo); }
.sp-row-main { display: flex; flex-direction: column; min-width: 0; }
.sp-row-main strong { font-size: 0.74rem; color: var(--pv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-row-sub { font-size: 0.6rem; color: var(--pv-muted); }
.sp-ref { font-size: 0.58rem; font-weight: 800; color: var(--pv-indigo); letter-spacing: 0.03em; }
.sp-new { font-style: normal; font-size: 0.54rem; font-weight: 800; color: #fff; background: var(--pv-indigo); border-radius: 99px; padding: 0.05rem 0.4rem; margin-left: 0.3rem; }
.sp-when { font-size: 0.62rem; color: #4b5563; }
@media (max-width: 640px) {
  .sp-list-head { display: none; }
  .sp-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.3rem; }
  .sp-row > span:nth-child(3), .sp-row > span:nth-child(4) { grid-column: 2; justify-self: end; }
}
.sp-pill { display: inline-block; font-size: 0.58rem; font-weight: 700; border-radius: 99px; padding: 0.15rem 0.55rem; white-space: nowrap; }
.sp-st-open { background: #e0f2fe; color: #0369a1; }
.sp-st-inprogress { background: #eef0ff; color: #4f46e5; }
.sp-st-waitingoncustomer { background: #fef3c7; color: #b45309; }
.sp-st-resolved { background: #dcfce7; color: #15803d; }
.sp-st-closed { background: #f1f2f6; color: #6b7280; }
.sp-sev { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.6rem; font-weight: 700; color: #374151; }
.sp-sev::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sp-sev-low { color: #6b7280; }
.sp-sev-normal { color: #2563eb; }
.sp-sev-high { color: #d97706; }
.sp-sev-critical { color: #dc2626; }
.sp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; padding: 2rem 1rem; background: #fff; border: 1px dashed #d5d9e6; border-radius: 14px; }
.sp-empty > span { font-size: 1.8rem; }
.sp-empty strong { font-size: 0.85rem; color: var(--pv-text); }
.sp-empty p { font-size: 0.66rem; color: var(--pv-muted); margin: 0 0 0.4rem; }
.sp-sla { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sp-sla li { display: grid; grid-template-columns: 80px 1fr; gap: 0.4rem; font-size: 0.64rem; color: #374151; align-items: center; }
.sp-sla li em { grid-column: 2; font-style: normal; font-size: 0.56rem; color: var(--pv-muted); }
.sp-sla li.sp-locked { opacity: 0.6; }
.sp-tips { margin: 0; padding-left: 1rem; font-size: 0.64rem; color: #374151; line-height: 1.6; }

.sp-form { display: flex; flex-direction: column; gap: 0.8rem; }
.sp-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; }
.sp-sev-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 900px) { .sp-sev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-choice { position: relative; cursor: pointer; }
.sp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sp-choice-body { display: flex; align-items: center; gap: 0.5rem; height: 100%; padding: 0.6rem 0.75rem; border: 1.5px solid #dfe2ee; border-radius: 12px; background: #fcfcff; font-size: 0.68rem; font-weight: 600; color: var(--pv-text); transition: border-color 0.12s, background 0.12s; }
.sp-choice:hover .sp-choice-body { border-color: #a9b0ee; }
.sp-choice input:checked + .sp-choice-body { border-color: var(--pv-indigo); background: #f3f2ff; box-shadow: 0 0 0 3px rgba(91, 91, 214, 0.12); }
.sp-choice input:focus-visible + .sp-choice-body { outline: 2px solid var(--pv-indigo); outline-offset: 2px; }
.sp-choice-icon { font-size: 1rem; }
.sp-sev-choice .sp-choice-body { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.sp-sev-hint { font-size: 0.6rem; font-weight: 500; color: #4b5563; line-height: 1.4; }
.sp-sev-time { font-size: 0.58rem; font-weight: 700; color: #4b5563; margin-top: auto; }
.sp-sev-lock { font-size: 0.58rem; font-weight: 600; color: #6b7280; }
.sp-choice-locked { cursor: not-allowed; }
.sp-choice-locked .sp-choice-body { background: #f7f7f9; border-style: dashed; opacity: 0.85; }
.sp-savebar-note { color: var(--pv-muted) !important; font-weight: 500 !important; }

.sfp .sfp-drop { padding: 0.7rem; }
.sfp-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sfp-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border: 1px solid #e3e6f0; border-radius: 9px; background: #fff; font-size: 0.64rem; }
.sfp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pv-text); font-weight: 600; }
.sfp-size { color: var(--pv-muted); }
.sfp-list button { border: none; background: none; color: #9aa1b2; cursor: pointer; font-size: 0.7rem; }
.sfp-list button:hover { color: #dc2626; }
.sfp-error { display: block; margin-top: 0.3rem; font-size: 0.62rem; font-weight: 700; color: #dc2626; }

.sp-ticket-head h1 { margin: 0.1rem 0 0.35rem; font-size: 1.05rem; color: var(--pv-text); }
.sp-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.62rem; color: var(--pv-muted); }
.sp-status-note { font-size: 0.66rem; font-weight: 600; padding: 0.55rem 0.8rem; border-radius: 12px; }
.sp-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.sp-msg { display: flex; gap: 0.6rem; align-items: flex-start; scroll-margin-top: 1rem; }
.sp-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #a78bfa, #f472b6); }
.sp-msg-staff .sp-avatar { background: linear-gradient(135deg, var(--pv-indigo), #22d3ee); }
.sp-bubble { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--pv-border); border-radius: 14px; padding: 0.65rem 0.8rem; }
.sp-msg-staff .sp-bubble { background: #f7f7ff; border-color: #e0defb; }
.sp-bubble-head { display: flex; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.3rem; }
.sp-bubble-head strong { font-size: 0.68rem; color: var(--pv-text); }
.sp-bubble-head span { font-size: 0.58rem; color: var(--pv-muted); white-space: nowrap; }
.sp-body { font-size: 0.72rem; color: #1f2544; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-files { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.sp-file { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; padding: 0.3rem 0.6rem; border-radius: 9px; border: 1px solid #e3e6f0; background: #fff; text-decoration: none; font-size: 0.62rem; color: var(--pv-text); }
.sp-file:hover { border-color: var(--pv-indigo); }
.sp-file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.sp-file-size { color: var(--pv-muted); }
.sp-reply { display: flex; flex-direction: column; gap: 0.55rem; }
.sp-reply-actions { display: flex; justify-content: flex-end; }
.sp-rate { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.sp-rate textarea { width: 100%; border: 1.5px solid #cfd4e6; border-radius: 10px; padding: 0.5rem 0.65rem; font: inherit; font-size: 0.7rem; }
.sp-stars { display: inline-flex; flex-direction: row-reverse; gap: 0.1rem; }
.sp-stars input { position: absolute; opacity: 0; pointer-events: none; }
.sp-stars label { font-size: 1.5rem; color: #d5d9e6; cursor: pointer; line-height: 1; }
.sp-stars label:hover, .sp-stars label:hover ~ label, .sp-stars input:checked ~ label { color: #f59e0b; }
.sp-rated { font-size: 0.68rem; color: #374151; }
.sp-rated strong { color: #f59e0b; letter-spacing: 0.05em; }
.sp-details { display: grid; grid-template-columns: 90px 1fr; gap: 0.35rem 0.5rem; margin: 0; font-size: 0.64rem; }
.sp-details dt { color: var(--pv-muted); font-weight: 600; }
.sp-details dd { margin: 0; color: var(--pv-text); }
.sp-wide { width: 100%; margin-bottom: 0.4rem; }
.sp-close-btn { border: 1px solid var(--pv-border); background: #fff; color: #374151; border-radius: 10px; padding: 0.45rem 0.8rem; font: inherit; font-size: 0.68rem; font-weight: 700; cursor: pointer; }
.sp-close-btn:hover { border-color: #fecaca; color: #b91c1c; background: #fef2f2; }

/* ==========================================================================
   Lead pages: Get started + Contact us
   ========================================================================== */
.lp-hero {
  position: relative; overflow: hidden;
  padding: 3.2rem 0 2.6rem;
  background:
    radial-gradient(600px 260px at 12% 0%, rgba(99, 102, 241, 0.16), transparent 70%),
    radial-gradient(520px 260px at 92% 20%, rgba(14, 165, 233, 0.14), transparent 70%),
    linear-gradient(180deg, #f5f7ff, #ffffff);
  border-bottom: 1px solid #eef0f7;
}
.lp-hero-inner { max-width: 820px; text-align: center; }
.lp-eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #4f46e5; background: #eef0ff; border: 1px solid #dfe2ff; border-radius: 99px; padding: 0.3rem 0.8rem;
}
.lp-hero h1 { margin: 0.9rem 0 0.6rem; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.12; letter-spacing: -0.02em; color: #0f172a; }
.lp-hero p { margin: 0 auto; max-width: 640px; font-size: 1.05rem; line-height: 1.6; color: #475569; }
.lp-trust { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.lp-trust li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: #334155; }
.lp-trust li::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 0.72rem; font-weight: 800; }

.lp-section { padding: 2.6rem 0 3.4rem; }
.lp-section-tight { padding: 1.6rem 0 0.4rem; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.4rem; align-items: start; }
@media (max-width: 960px) { .lp-grid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } .lp-form-card { order: -1; } }
.lp-aside h2 { font-size: 1.35rem; color: #0f172a; margin: 0 0 1rem; }
.lp-muted { color: #475569; margin: -0.4rem 0 1.2rem; line-height: 1.6; }

.lp-steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.lp-steps li { display: flex; gap: 0.9rem; align-items: flex-start; position: relative; }
.lp-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: -14px; width: 2px; background: linear-gradient(#c7cbf5, #eef0ff); }
.lp-step-num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #4f46e5, #0ea5e9); box-shadow: 0 6px 14px rgba(79, 70, 229, 0.25); position: relative; z-index: 1; }
.lp-steps strong { display: block; color: #0f172a; font-size: 1rem; }
.lp-steps div > span { display: block; color: #475569; font-size: 0.92rem; line-height: 1.55; }

.lp-card { background: #fff; border: 1px solid #e6e8f2; border-radius: 16px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); }
.lp-card h3 { font-size: 1rem; color: #0f172a; margin: 0 0 0.6rem; }
.lp-card p { color: #475569; margin: 0 0 0.6rem; font-size: 0.92rem; line-height: 1.55; }
.lp-card-soft { background: linear-gradient(135deg, #f4f2ff, #eef6ff); border-color: #dfe3fb; }
.lp-benefits ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lp-benefits li { display: flex; gap: 0.55rem; color: #334155; font-size: 0.93rem; }
.lp-benefits li::before { content: "✓"; flex: none; color: #4f46e5; font-weight: 800; }
.lp-link { font-weight: 700; color: #4f46e5; text-decoration: none; }
.lp-link:hover { text-decoration: underline; }

.lp-form-card { background: #fff; border: 1px solid #e3e6f3; border-radius: 20px; padding: 1.8rem 1.9rem; box-shadow: 0 20px 50px rgba(30, 41, 99, 0.10); }
@media (max-width: 560px) { .lp-form-card { padding: 1.3rem 1.1rem; } }
.lp-form-head h2 { margin: 0; font-size: 1.3rem; color: #0f172a; }
.lp-form-head p { margin: 0.3rem 0 1.2rem; color: #64748b; font-size: 0.88rem; }
.lp-form { display: flex; flex-direction: column; gap: 0.95rem; }
.lp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
@media (max-width: 560px) { .lp-row { grid-template-columns: minmax(0, 1fr); } }
.lp-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.lp-field label, .lp-field legend { font-size: 0.86rem; font-weight: 700; color: #1e293b; padding: 0; margin-bottom: 0.1rem; }
.lp-req { color: #dc2626; }
.lp-opt { font-weight: 500; color: #94a3b8; font-size: 0.78rem; }
.lp-form input:not([type=checkbox]), .lp-form select, .lp-form textarea {
  width: 100%; border: 1.5px solid #d6dbe8; border-radius: 12px; padding: 0.7rem 0.85rem; font: inherit; font-size: 0.95rem;
  color: #0f172a; background: #fbfcff; transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.lp-form input::placeholder, .lp-form textarea::placeholder { color: #94a3b8; }
.lp-form input:hover, .lp-form select:hover, .lp-form textarea:hover { border-color: #a9b0ee; background: #fff; }
.lp-form input:focus, .lp-form select:focus, .lp-form textarea:focus { outline: none; border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14); }
.lp-form .input-validation-error { border-color: #f87171 !important; background: #fff7f7; }
.lp-field-error { color: #dc2626; font-size: 0.8rem; font-weight: 600; }
.lp-field-error:empty { display: none; }
.lp-errors ul { margin: 0; padding: 0.7rem 0.9rem 0.7rem 2rem; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 0.86rem; }
.lp-errors.validation-summary-valid { display: none; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.lp-chip { position: relative; cursor: pointer; }
.lp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.lp-chip span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; border: 1.5px solid #d6dbe8; border-radius: 99px; font-size: 0.86rem; font-weight: 600; color: #334155; background: #fff; transition: all 0.12s; }
.lp-chip:hover span { border-color: #a9b0ee; }
.lp-chip input:checked + span { border-color: #4f46e5; background: #eef0ff; color: #3730a3; }
.lp-chip input:checked + span::before { content: "✓"; font-weight: 800; }
.lp-chip input:focus-visible + span { outline: 2px solid #4f46e5; outline-offset: 2px; }
.lp-captcha { margin-top: 0.2rem; }
.lp-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
  border: none; border-radius: 12px; padding: 0.9rem 1.2rem; font: inherit; font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #4f46e5, #2563eb); box-shadow: 0 10px 24px rgba(79, 70, 229, 0.28); transition: transform 0.12s, box-shadow 0.12s;
}
.lp-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(79, 70, 229, 0.34); }
.lp-consent { margin: 0; font-size: 0.78rem; color: #64748b; text-align: center; line-height: 1.5; }
.lp-consent a { color: #4f46e5; }

.lp-success { text-align: center; padding: 1.2rem 0.4rem; }
.lp-success-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-size: 1.8rem; font-weight: 800; box-shadow: 0 12px 28px rgba(22, 163, 74, 0.3); }
.lp-success h2 { margin: 1rem 0 0.5rem; font-size: 1.4rem; color: #0f172a; }
.lp-success p { color: #475569; max-width: 440px; margin: 0 auto 1.3rem; line-height: 1.6; }
.lp-success-actions { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; }

.lp-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: -3.4rem; position: relative; z-index: 1; }
@media (max-width: 1000px) { .lp-options { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; } }
@media (max-width: 560px) { .lp-options { grid-template-columns: minmax(0, 1fr); } }
.lp-option { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.2rem 1.2rem 1.1rem; background: #fff; border: 1px solid #e3e6f3; border-radius: 18px; text-decoration: none; color: inherit; box-shadow: 0 10px 30px rgba(30, 41, 99, 0.08); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.lp-option:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(30, 41, 99, 0.12); border-color: #c7cbf5; }
.lp-option-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.3rem; }
.lp-option-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-ic-blue { background: #e0edff; color: #2563eb; }
.lp-ic-violet { background: #ede9fe; color: #7c3aed; }
.lp-ic-green { background: #dcfce7; color: #16a34a; }
.lp-ic-amber { background: #fef3c7; color: #d97706; }
.lp-option strong { font-size: 1.02rem; color: #0f172a; }
.lp-option > span:not(.lp-option-icon) { font-size: 0.88rem; color: #475569; line-height: 1.5; flex: 1; }
.lp-option em { font-style: normal; font-size: 0.88rem; font-weight: 700; color: #4f46e5; margin-top: 0.3rem; overflow-wrap: anywhere; }
.lp-faq { border-top: 1px solid #eef0f6; padding: 0.7rem 0; }
.lp-faq:first-of-type { border-top: 0; padding-top: 0.2rem; }
.lp-faq summary { cursor: pointer; font-weight: 700; color: #1e293b; font-size: 0.93rem; list-style: none; display: flex; justify-content: space-between; gap: 0.8rem; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: #4f46e5; font-weight: 800; }
.lp-faq[open] summary::after { content: "–"; }
.lp-faq p { margin: 0.5rem 0 0; }
.lp-faq a { color: #4f46e5; }
#message { scroll-margin-top: 80px; }

/* ==========================================================================
   Ad budget (PPC)
   ========================================================================== */
.ab-page { display: flex; flex-direction: column; gap: 0.85rem; }
.ab-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ab-head h1 { margin: 0; font-size: 1.1rem; color: var(--pv-text); }
.ab-head p { margin: 0.2rem 0 0; font-size: 0.7rem; color: var(--pv-muted); max-width: 640px; }
.ab-refresh { display: flex; align-items: center; gap: 0.6rem; font-size: 0.62rem; color: var(--pv-muted); }
.ab-card { background: #fff; border: 1px solid var(--pv-border); border-radius: 16px; padding: 0.95rem 1.05rem; }
.ab-h2 { margin: 0 0 0.5rem; font-size: 0.86rem; color: var(--pv-text); }
.ab-muted { font-size: 0.64rem; color: var(--pv-muted); margin: 0; }
.ab-label { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pv-muted); }
.ab-alert { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.95rem; border-radius: 14px; border: 1px solid; font-size: 0.66rem; }
.ab-alert strong { font-size: 0.74rem; }
.ab-alert-amber { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.ab-alert-red { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.ab-summary { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; padding: 1rem 1.15rem; border-radius: 18px; border: 1px solid #dfe3fb;
  background: linear-gradient(135deg, #f4f2ff, #eef6ff 60%, #fff8ed); }
@media (max-width: 800px) { .ab-summary { grid-template-columns: minmax(0, 1fr); } }
.ab-sum-figures { display: flex; align-items: baseline; gap: 0.45rem; margin: 0.2rem 0 0.5rem; flex-wrap: wrap; }
.ab-sum-figures strong { font-size: 1.5rem; color: var(--pv-text); }
.ab-sum-figures span { font-size: 0.7rem; color: #4b5563; }
.ab-bar { position: relative; height: 8px; border-radius: 99px; background: #e5e7f2; overflow: visible; }
.ab-bar-lg { height: 12px; }
.ab-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4f46e5, #0ea5e9); max-width: 100%; }
.ab-bar i.ab-warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ab-bar i.ab-over { background: linear-gradient(90deg, #dc2626, #f87171); }
.ab-pace { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #1f2544; border-radius: 2px; }
.ab-pace-note { display: block; margin-top: 0.45rem; font-size: 0.6rem; color: #4b5563; }
.ab-ahead { color: #b45309; font-weight: 700; }
.ab-sum-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; align-content: center; }
.ab-sum-side > div { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: rgba(255, 255, 255, 0.8); border: 1px solid #e3e6f5; }
.ab-sum-side strong { font-size: 0.9rem; color: var(--pv-text); }

.ab-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0.85rem; align-items: start; }
@media (max-width: 960px) { .ab-grid { grid-template-columns: minmax(0, 1fr); } }
.ab-accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
@media (max-width: 640px) { .ab-accounts { grid-template-columns: minmax(0, 1fr); } }
.ab-account { display: flex; flex-direction: column; gap: 0.5rem; }
.ab-account-head { display: flex; align-items: center; gap: 0.55rem; }
.ab-account-head img { width: 30px; height: 30px; border-radius: 8px; }
.ab-account-head > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ab-account-head strong { font-size: 0.78rem; color: var(--pv-text); }
.ab-account-head > div span { font-size: 0.58rem; color: var(--pv-muted); }
.ab-account-name { font-size: 0.66rem; font-weight: 600; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-account-name em { font-style: normal; color: var(--pv-muted); font-weight: 500; }
.ab-account-spend strong { font-size: 1.05rem; color: var(--pv-text); }
.ab-account-spend span { font-size: 0.62rem; color: #4b5563; margin-left: 0.3rem; }
.ab-account-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; }
.ab-note { font-size: 0.62rem; color: #4b5563; margin: 0; line-height: 1.45; }
.ab-note-bad { color: #b91c1c; }
.ab-pill { font-size: 0.56rem; font-weight: 700; border-radius: 99px; padding: 0.12rem 0.5rem; white-space: nowrap; }
.ab-pill-ok { background: #dcfce7; color: #15803d; }
.ab-pill-off { background: #f1f2f6; color: #6b7280; }
.ab-pill-bad { background: #fee2e2; color: #b91c1c; }
.ab-link-btn { background: none; border: none; padding: 0; font: inherit; font-size: 0.64rem; font-weight: 700; color: #b91c1c; cursor: pointer; }
.ab-link-btn:hover { text-decoration: underline; }
.ab-small { padding: 0.25rem 0.6rem !important; font-size: 0.62rem !important; }

.ab-plan { display: flex; flex-direction: column; gap: 0.6rem; }
.ab-plan-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0.6rem; }
.ab-plan input[type=range] { width: 100%; accent-color: var(--pv-indigo); padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.ab-split-labels { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.62rem; color: #4b5563; margin-top: 0.2rem; flex-wrap: wrap; }
.ab-split-labels img { width: 14px; height: 14px; vertical-align: -2px; }
.ab-toggle { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.6rem 0.7rem; border: 1px solid #e3e6f0; border-radius: 12px; background: #fafbff; cursor: pointer; font-size: 0.62rem; color: #4b5563; line-height: 1.45; }
.ab-toggle input[type=checkbox] { margin-top: 0.15rem; width: 16px; height: 16px; accent-color: var(--pv-indigo); flex: none; }
.ab-toggle strong { display: block; font-size: 0.7rem; color: var(--pv-text); }

.ab-paused { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.66rem; }
.ab-paused em { font-style: normal; color: var(--pv-muted); margin-left: 0.3rem; }
.ab-camp-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.ab-camp-head .ab-h2 { margin: 0; }
.ab-table { border: 1px solid #eef0f6; border-radius: 12px; overflow: hidden; }
.ab-tr { display: grid; grid-template-columns: minmax(0, 2fr) 110px 170px 110px 90px; gap: 0.6rem; align-items: center; padding: 0.5rem 0.8rem; border-bottom: 1px solid #f0f1f6; font-size: 0.66rem; color: var(--pv-text); }
.ab-tr:last-child { border-bottom: none; }
.ab-th { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #9aa1b2; background: #fafbfd; }
.ab-camp-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-budget-form { display: flex; gap: 0.3rem; }
.ab-budget-form input { width: 90px; border: 1.5px solid #cfd4e6; border-radius: 8px; padding: 0.25rem 0.4rem; font: inherit; font-size: 0.64rem; }
.ab-budget-form input:focus { outline: none; border-color: var(--pv-indigo); }
.ab-budget-form button { border: 1px solid var(--pv-indigo); background: #fff; color: var(--pv-indigo); border-radius: 8px; padding: 0.2rem 0.5rem; font: inherit; font-size: 0.6rem; font-weight: 700; cursor: pointer; }
@media (max-width: 760px) {
  .ab-th { display: none; }
  .ab-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35rem; }
  .ab-tr > span:nth-child(n+3) { grid-column: 1 / -1; }
}
.ab-choose { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.6rem; }
.ab-choice { display: flex; gap: 0.6rem; align-items: center; padding: 0.6rem 0.75rem; border: 1.5px solid #dfe2ee; border-radius: 12px; cursor: pointer; }
.ab-choice:hover { border-color: #a9b0ee; }
.ab-choice span { display: flex; flex-direction: column; }
.ab-choice strong { font-size: 0.72rem; }
.ab-choice em { font-style: normal; font-size: 0.6rem; color: var(--pv-muted); }
.ab-choice-off { opacity: 0.55; cursor: not-allowed; }
.ab-how ul { margin: 0; padding-left: 1rem; font-size: 0.64rem; color: #4b5563; line-height: 1.6; }

/* Home card: real ad budget */
.ad-budget-card .ab-bar { margin: 0.35rem 0 0.25rem; height: 7px; }
.ad-home-spend { font-size: 0.6rem; color: #4b5563; }

/* Release detail: expired item, reactivate for a new date */
.rd-expired { display: flex; gap: 0.8rem; align-items: flex-start; background: #f8fafc; border: 1px solid #cbd5e1; border-left: 4px solid #64748b; border-radius: 14px; padding: 0.95rem 1.05rem; margin-bottom: 1.1rem; }
.rd-expired-icon { font-size: 1.2rem; }
.rd-expired-body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.rd-expired-body strong { font-size: 0.82rem; color: var(--pv-text); }
.rd-expired-body p { margin: 0; font-size: 0.68rem; color: #4b4f66; line-height: 1.5; }
.rd-expired-form { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }
.rd-expired-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.6rem; font-weight: 700; color: #4b5563; }
.rd-expired-form input[type=date] { border: 1.5px solid #cfd4e6; border-radius: 10px; padding: 0.4rem 0.6rem; font: inherit; font-size: 0.72rem; background: #fff; }
.rd-expired-form input[type=date]:focus { outline: none; border-color: var(--pv-indigo); }
.rd-expired-note { font-size: 0.6rem; color: #6b7280; }

/* ==========================================================================
   Onboarding: Business profile + Choose plan
   ========================================================================== */
.ob-page { min-height: 100vh; background: radial-gradient(900px 380px at 50% -120px, #e9ecff, transparent 70%), #f6f7fb; color: #0f172a; }
.ob-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid #e7e9f2; }
.ob-header-inner { max-width: 1200px; margin: 0 auto; padding: 0.8rem 1.5rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.ob-brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: #0f172a; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 800; font-size: 1.08rem; }
.ob-brand img { width: 30px; height: 30px; border-radius: 8px; }
.ob-stepper { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.35rem; }
.ob-stepper li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; font-weight: 600; color: #94a3b8; white-space: nowrap; }
.ob-stepper li:not(:last-child)::after { content: ""; width: 36px; height: 2px; border-radius: 2px; background: #e2e5ef; margin: 0 0.35rem; }
.ob-stepper li.done:not(:last-child)::after { background: #a5b4fc; }
.ob-step-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 800; border: 2px solid #dfe3ee; background: #fff; color: #94a3b8; }
.ob-stepper li.done { color: #475569; }
.ob-stepper li.done .ob-step-dot { background: #eef0ff; border-color: #c7d2fe; color: #4f46e5; }
.ob-stepper li.active { color: #0f172a; }
.ob-stepper li.active .ob-step-dot { background: linear-gradient(135deg, #4f46e5, #2563eb); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35); }
.ob-account { justify-self: end; display: flex; align-items: center; gap: 0.9rem; min-width: 0; font-size: 0.84rem; }
.ob-account-email { color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ob-account a { color: #4f46e5; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ob-account a:hover { text-decoration: underline; }
.ob-progress { height: 3px; background: transparent; }
.ob-progress i { display: block; height: 100%; background: linear-gradient(90deg, #4f46e5, #0ea5e9); border-radius: 0 3px 3px 0; }
@media (max-width: 860px) {
  .ob-header-inner { grid-template-columns: auto 1fr; padding: 0.7rem 1rem; }
  .ob-stepper { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .ob-stepper li:not(.active) .ob-step-label { display: none; }
  .ob-stepper li:not(:last-child)::after { width: 22px; }
  .ob-account-email { display: none; }
}

.ob-body { max-width: 1200px; margin: 0 auto; padding: 2.2rem 1.5rem 3.5rem; }
@media (max-width: 600px) { .ob-body { padding: 1.4rem 1rem 2.5rem; } }
.ob-intro { max-width: 720px; margin-bottom: 1.6rem; }
.ob-intro-center { margin-left: auto; margin-right: auto; text-align: center; }
.ob-eyebrow { display: inline-block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #4f46e5; margin-bottom: 0.5rem; }
.ob-intro h1 { margin: 0 0 0.5rem; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: clamp(1.6rem, 3.2vw, 2.15rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.ob-intro p { margin: 0; color: #475569; font-size: 1rem; line-height: 1.6; }
.ob-alert { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 1rem; margin-bottom: 1.2rem; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 0.9rem; }

.ob-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.6rem; align-items: start; }
@media (max-width: 980px) { .ob-layout { grid-template-columns: minmax(0, 1fr); } .ob-aside { order: 2; } }
.ob-form { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.ob-card { background: #fff; border: 1px solid #e5e8f1; border-radius: 18px; padding: 1.5rem 1.6rem 1.6rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04); }
@media (max-width: 600px) { .ob-card { padding: 1.15rem 1rem 1.2rem; border-radius: 16px; } }
.ob-card-head { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 1.25rem; }
.ob-card-num { flex: none; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; color: #4f46e5; background: #eef0ff; }
.ob-card-head h2 { margin: 0.1rem 0 0.2rem; font-size: 1.1rem; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ob-card-head p { margin: 0; color: #64748b; font-size: 0.9rem; line-height: 1.5; }
.ob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.2rem; }
@media (max-width: 640px) { .ob-grid { grid-template-columns: minmax(0, 1fr); } }
.ob-span-2 { grid-column: 1 / -1; }
.ob-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.ob-field[hidden] { display: none; }
.ob-field label, .ob-label { font-size: 0.88rem; font-weight: 700; color: #1e293b; }
.ob-req { color: #dc2626; }
.ob-opt { font-size: 0.72rem; font-weight: 600; color: #64748b; background: #f1f3f8; border-radius: 99px; padding: 0.1rem 0.5rem; letter-spacing: 0.01em; }
.ob-field input:not([type=file]), .ob-field select, .ob-field textarea {
  width: 100%; min-height: 48px; border: 1.5px solid #cdd3e1; border-radius: 12px; padding: 0.7rem 0.9rem; font: inherit; font-size: 0.97rem; color: #0f172a;
  background: #fff; transition: border-color 0.12s, box-shadow 0.12s;
}
.ob-field select { appearance: none; padding-right: 2.4rem; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 18px; }
.ob-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.ob-field input::placeholder, .ob-field textarea::placeholder { color: #9aa3b5; }
.ob-field input:hover, .ob-field select:hover, .ob-field textarea:hover { border-color: #a5b0cf; }
.ob-field input:focus, .ob-field select:focus, .ob-field textarea:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15); }
.ob-invalid input:not([type=file]), .ob-invalid select, .ob-invalid textarea, .ob-invalid .ob-drop { border-color: #ef4444; background-color: #fffafa; }
.ob-hint { font-size: 0.8rem; color: #64748b; line-height: 1.45; }
.ob-error { font-size: 0.82rem; font-weight: 600; color: #dc2626; }
.ob-field-foot { display: flex; justify-content: space-between; gap: 0.8rem; }
.ob-count { font-size: 0.78rem; color: #94a3b8; white-space: nowrap; font-variant-numeric: tabular-nums; }

.ob-drop { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 132px; padding: 1rem; border: 1.5px dashed #b9c2da; border-radius: 14px; background: #fafbff; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.ob-drop:hover { border-color: #4f46e5; background: #f5f6ff; }
.ob-drop:focus-within { border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15); }
.ob-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ob-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; pointer-events: none; }
.ob-drop-empty[hidden], .ob-drop-preview[hidden], .ob-drop-thumbs[hidden] { display: none; }
.ob-drop-empty svg { width: 30px; height: 30px; fill: none; stroke: #4f46e5; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.3rem; }
.ob-drop-empty strong { font-size: 0.92rem; color: #1e293b; }
.ob-drop-empty span { font-size: 0.78rem; color: #64748b; }
.ob-drop-preview { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; }
.ob-drop-preview img { max-width: 160px; max-height: 76px; object-fit: contain; }
.ob-drop-preview span, .ob-drop-thumbs span { font-size: 0.78rem; color: #475569; text-align: center; overflow-wrap: anywhere; }
.ob-drop-thumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; pointer-events: none; }
.ob-drop-thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; }
.ob-drop-thumbs span { flex-basis: 100%; }

.ob-password { position: relative; }
.ob-password input { padding-right: 4.5rem !important; }
.ob-show { position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%); border: 0; background: #f1f3f8; color: #334155; font: inherit; font-size: 0.78rem; font-weight: 700; border-radius: 8px; padding: 0.35rem 0.65rem; cursor: pointer; }
.ob-show:hover { background: #e7eaf3; }
.ob-strength { height: 5px; border-radius: 99px; background: #eef0f5; overflow: hidden; }
.ob-strength i { display: block; height: 100%; width: 0; transition: width 0.2s, background 0.2s; }

.ob-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.4rem 0.2rem 0; }
.ob-actions-note { margin: 0; font-size: 0.84rem; color: #64748b; }
.ob-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 52px; padding: 0.8rem 1.7rem; border: 0; border-radius: 12px; font: inherit; font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #4f46e5, #2563eb); box-shadow: 0 10px 24px rgba(79, 70, 229, 0.28); transition: transform 0.12s, box-shadow 0.12s; text-decoration: none; }
.ob-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(79, 70, 229, 0.34); color: #fff; }
.ob-primary:disabled { opacity: 0.7; cursor: progress; transform: none; }
.ob-primary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .ob-actions { flex-direction: column-reverse; align-items: stretch; } .ob-primary { width: 100%; } .ob-actions-note { text-align: center; } }

.ob-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 980px) { .ob-aside { position: static; } }
.ob-aside-card { background: #fff; border: 1px solid #e5e8f1; border-radius: 18px; padding: 1.25rem 1.3rem; }
.ob-aside-soft { background: linear-gradient(145deg, #f3f4ff, #eef7ff); border-color: #dde3fb; }
.ob-aside-card h3 { margin: 0 0 0.9rem; font-size: 0.98rem; font-weight: 700; }
.ob-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.ob-next li { display: flex; gap: 0.7rem; }
.ob-next li > span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; color: #4f46e5; border: 2px solid #c7d2fe; }
.ob-next strong { display: block; font-size: 0.9rem; color: #0f172a; }
.ob-next em { display: block; font-style: normal; font-size: 0.82rem; color: #64748b; line-height: 1.45; }
.ob-uses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ob-uses li { display: flex; gap: 0.55rem; font-size: 0.87rem; color: #334155; }
.ob-uses li::before { content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 0.66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.1rem; }
.ob-aside-help { margin: 0.9rem 0 0; font-size: 0.84rem; color: #64748b; }
.ob-aside-help a { color: #4f46e5; font-weight: 700; }

.ob-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1.2rem; padding: 1.4rem max(1.5rem, calc((100% - 1200px) / 2 + 1.5rem)) 1.8rem; background: #f6f7fb; font-size: 0.82rem; color: #64748b; border-top: 1px solid #e7e9f2; }
.ob-footer-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.ob-footer a { color: #475569; text-decoration: none; }
.ob-footer a:hover { color: #4f46e5; }

/* Choose plan (pricing) */
.ps-trust { list-style: none; margin: 0 auto 2rem; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.ps-trust li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; font-weight: 600; color: #334155; }
.ps-trust svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #e0e7ff; fill: none; stroke: #4f46e5; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ps-grid { display: grid; gap: 1.1rem; align-items: stretch; }
.ps-grid-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.ps-grid-2 { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
.ps-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ps-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .ps-grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .ps-grid-2, .ps-grid-4 { grid-template-columns: minmax(0, 1fr); } }
.ps-card { position: relative; display: flex; flex-direction: column; gap: 1rem; background: #fff; border: 1px solid #e3e6f0; border-radius: 20px; padding: 1.6rem 1.4rem 1.5rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.05); transition: transform 0.15s, box-shadow 0.15s; }
.ps-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.09); }
.ps-recommended { border: 2px solid #4f46e5; box-shadow: 0 18px 44px rgba(79, 70, 229, 0.18); background: linear-gradient(180deg, #f7f7ff, #fff 38%); }
.ps-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #4f46e5, #2563eb); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 99px; white-space: nowrap; box-shadow: 0 6px 14px rgba(79, 70, 229, 0.3); }
.ps-card h2 { margin: 0; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.ps-tagline { margin: 0.25rem 0 0; font-size: 0.87rem; color: #64748b; line-height: 1.45; min-height: 2.9em; }
.ps-features { padding-top: 0.9rem !important; border-top: 1px solid #eef0f6; }
.ps-price { display: flex; flex-direction: column; gap: 0.1rem; padding-bottom: 0.2rem; }
.ps-price strong { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; line-height: 1.1; }
.ps-price span { font-size: 0.8rem; color: #64748b; }
.ps-cta { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; border: 1.5px solid #c7cdf5; background: #fff; color: #3730a3; font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.ps-cta:hover { background: #eef0ff; border-color: #4f46e5; }
.ps-cta-primary { border: 0; color: #fff; background: linear-gradient(135deg, #4f46e5, #2563eb); box-shadow: 0 10px 22px rgba(79, 70, 229, 0.3); }
.ps-cta-primary:hover { background: linear-gradient(135deg, #4338ca, #1d4ed8); color: #fff; }
.ps-cta:disabled { opacity: 0.65; cursor: progress; }
.ps-summary { margin: 0; padding-top: 0.9rem; border-top: 1px solid #eef0f6; font-size: 0.86rem; color: #334155; line-height: 1.5; }
.ps-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ps-features li { display: flex; gap: 0.55rem; font-size: 0.88rem; color: #1e293b; line-height: 1.4; }
.ps-features li::before { content: "✓"; flex: none; width: 18px; height: 18px; margin-top: 0.05rem; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 0.66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ps-note { max-width: 760px; margin: 1.3rem auto 0; text-align: center; font-size: 0.82rem; color: #64748b; line-height: 1.55; }

.ps-compare { margin-top: 3rem; }
.ps-compare h2, .ps-faq h2 { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 1.45rem; font-weight: 800; text-align: center; margin: 0 0 1.2rem; color: #0f172a; }
.ps-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e3e6f0; border-radius: 18px; box-shadow: 0 8px 26px rgba(15, 23, 42, 0.05); }
.ps-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9rem; }
.ps-table th, .ps-table td { padding: 0.8rem 1rem; border-bottom: 1px solid #f0f2f7; text-align: center; vertical-align: middle; }
.ps-table tbody tr:last-child th, .ps-table tbody tr:last-child td { border-bottom: 1px solid #e8ebf3; }
.ps-table tbody:last-child tr:last-child th, .ps-table tbody:last-child tr:last-child td { border-bottom: 0; }
.ps-table th[scope=row] { text-align: left; font-weight: 600; color: #334155; }
.ps-table thead th { position: sticky; top: 0; background: #fff; padding-top: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid #e3e6f0; }
.ps-table thead th strong { display: block; font-size: 1rem; color: #0f172a; }
.ps-table thead th span { display: block; font-size: 0.8rem; font-weight: 500; color: #64748b; margin-top: 0.15rem; }
.ps-table td { color: #1e293b; font-weight: 600; }
.ps-group th { text-align: left !important; background: #f8f9fc; font-size: 0.74rem; font-weight: 800 !important; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b !important; padding: 0.6rem 1rem !important; }
.ps-col-rec { background: #f7f7ff; }
.ps-yes { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; background: #dcfce7; color: #15803d; font-size: 0.75rem; font-weight: 800; }
.ps-no { color: #cbd2de; font-weight: 700; }

.ps-faq { margin-top: 3rem; }
.ps-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; max-width: 1000px; margin: 0 auto; }
@media (max-width: 760px) { .ps-faq-grid { grid-template-columns: minmax(0, 1fr); } }
.ps-faq details { background: #fff; border: 1px solid #e3e6f0; border-radius: 14px; padding: 0.95rem 1.1rem; }
.ps-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 0.8rem; font-weight: 700; font-size: 0.93rem; color: #0f172a; }
.ps-faq summary::-webkit-details-marker { display: none; }
.ps-faq summary::after { content: "+"; color: #4f46e5; font-weight: 800; font-size: 1.1rem; line-height: 1; }
.ps-faq details[open] summary::after { content: "–"; }
.ps-faq details p { margin: 0.6rem 0 0; font-size: 0.88rem; color: #475569; line-height: 1.6; }
.ps-faq a { color: #4f46e5; font-weight: 700; }

/* Get started: rich hero with the form beside the headline */
.gs-hero { position: relative; overflow: hidden; padding: 2.6rem 0 3rem; color: #e2e8f0;
  background:
    radial-gradient(700px 380px at 8% -10%, rgba(99, 102, 241, 0.45), transparent 65%),
    radial-gradient(640px 420px at 100% 10%, rgba(14, 165, 233, 0.30), transparent 65%),
    radial-gradient(520px 320px at 40% 110%, rgba(168, 85, 247, 0.25), transparent 70%),
    linear-gradient(160deg, #0b1030 0%, #151a45 55%, #1b2266 100%); }
.gs-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 85%); }
.gs-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-rows: auto 1fr; grid-template-areas: "intro form" "details form"; gap: 1.6rem 3rem; align-items: start; }
.gs-intro { grid-area: intro; }
.gs-details { grid-area: details; }
.gs-form-col { grid-area: form; }
@media (max-width: 980px) {
  .gs-hero { padding: 1.8rem 0 2.2rem; }
  .gs-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "details"; gap: 1.4rem; }
}
.gs-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: #c7d2fe; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 99px; padding: 0.35rem 0.85rem; }
.gs-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2); }
.gs-hero h1 { margin: 0.9rem 0 0.8rem; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: -0.025em; color: #fff; }
.gs-hl { background: linear-gradient(90deg, #a5b4fc, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gs-lead { margin: 0; font-size: 1.04rem; line-height: 1.65; color: #cbd5e1; max-width: 600px; }
.gs-trust { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; }
.gs-trust li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: #e2e8f0; }
.gs-trust li::before { content: "✓"; width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(52, 211, 153, 0.18); color: #6ee7b7; font-size: 0.7rem; font-weight: 800; }

.gs-included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 560px) { .gs-included { grid-template-columns: minmax(0, 1fr); } }
.gs-inc { display: flex; gap: 0.75rem; padding: 0.95rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.11); backdrop-filter: blur(6px); }
.gs-inc-icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(99, 102, 241, 0.55), rgba(14, 165, 233, 0.45)); }
.gs-inc-icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gs-inc strong { display: block; font-size: 0.92rem; color: #fff; margin-bottom: 0.15rem; }
.gs-inc span { display: block; font-size: 0.82rem; color: #b6c2d9; line-height: 1.45; }
.gs-channels { display: flex !important; gap: 0.35rem; margin-top: 0.35rem; flex-wrap: wrap; }
.gs-channels img { width: 24px; height: 24px; padding: 3px; border-radius: 7px; background: #fff; }

.gs-steps { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; counter-reset: none; }
@media (max-width: 560px) { .gs-steps { grid-template-columns: minmax(0, 1fr); } }
.gs-steps li { display: flex; gap: 0.6rem; align-items: center; padding: 0.7rem 0.8rem; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, 0.18); }
.gs-steps li > span { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #3730a3; font-weight: 800; font-size: 0.82rem; }
.gs-steps strong { display: block; font-size: 0.86rem; color: #fff; }
.gs-steps em { display: block; font-style: normal; font-size: 0.76rem; color: #a9b6cf; }

.gs-form-card { box-shadow: 0 30px 70px rgba(2, 6, 23, 0.45); border: 1px solid rgba(255, 255, 255, 0.6); color: #0f172a; padding: 1.5rem 1.6rem; }
.gs-form-card .lp-form { gap: 0.8rem; }
.gs-form-card .lp-form-head p { margin-bottom: 0.9rem; }

.gs-self { padding: 2.2rem 0 2.6rem; background: #f6f7fb; }
.gs-self-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap; background: #fff; border: 1px solid #e3e6f0; border-radius: 20px; padding: 1.4rem 1.6rem; }
.gs-self h2 { margin: 0 0 0.3rem; font-size: 1.25rem; color: #0f172a; }
.gs-self p { margin: 0; color: #475569; }
.gs-self-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.gs-self-btn { width: auto; padding: 0.8rem 1.5rem; text-decoration: none; }
.gs-self-btn:hover { color: #fff; }
.ob-field select:invalid { color: #9aa3b5; }
.ob-field select option { color: #0f172a; }

/* Business profile: compact, one-screen layout */
.ob-span-all { grid-column: 1 / -1; }
.ob-compact { padding-top: 1.5rem; padding-bottom: 2rem; }
.ob-compact .ob-intro { margin-bottom: 1.1rem; }
.ob-compact .ob-intro h1 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-bottom: 0.3rem; }
.ob-compact .ob-intro p { font-size: 0.95rem; }
.ob-compact .ob-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 1.3rem; }
@media (max-width: 980px) { .ob-compact .ob-layout { grid-template-columns: minmax(0, 1fr); } }
.ob-compact .ob-card { padding: 1.35rem 1.5rem 1.2rem; }
.ob-compact .ob-grid { gap: 0.9rem 1rem; }
.ob-compact .ob-field { gap: 0.3rem; }
.ob-compact .ob-field input:not([type=file]), .ob-compact .ob-field select { min-height: 44px; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.ob-compact .ob-field textarea { min-height: 64px; }
.ob-compact .ob-aside-card { padding: 1.1rem 1.15rem; }

.ob-extras { margin-top: 1rem; border: 1px solid #e5e8f1; border-radius: 14px; background: #fafbfe; }
.ob-extras summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.95rem; }
.ob-extras summary::-webkit-details-marker { display: none; }
.ob-extras summary:hover .ob-extras-plus { background: #e0e7ff; }
.ob-extras-plus { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #eef0ff; color: #4f46e5; font-weight: 800; font-size: 1rem; transition: transform 0.15s, background 0.12s; }
.ob-extras[open] .ob-extras-plus { transform: rotate(45deg); }
.ob-extras-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; }
.ob-extras-text strong { font-size: 0.9rem; color: #1e293b; }
.ob-extras-text em { font-style: normal; font-size: 0.8rem; color: #64748b; }
.ob-extras-body { padding: 0.2rem 0.95rem 1rem; }
.ob-drop-sm { min-height: 64px; padding: 0.6rem 0.8rem; justify-content: flex-start; background: #fff; }
.ob-drop-sm .ob-drop-empty { flex-direction: row; gap: 0.55rem; text-align: left; }
.ob-drop-sm .ob-drop-empty svg { width: 22px; height: 22px; margin: 0; flex: none; }
.ob-drop-sm .ob-drop-empty > span { font-size: 0.82rem; color: #64748b; }
.ob-drop-sm .ob-drop-empty strong { font-size: 0.86rem; color: #1e293b; }
.ob-drop-sm .ob-drop-preview { flex-direction: row; }
.ob-drop-sm .ob-drop-preview img { max-width: 90px; max-height: 40px; }
.ob-drop-sm .ob-drop-thumbs img { width: 38px; height: 38px; }

.ob-card .ob-actions { margin-top: 1.1rem; padding: 1rem 0 0; border-top: 1px solid #eef0f6; }
@media (max-width: 600px) {
  .ob-compact { padding-top: 1rem; }
  .ob-compact .ob-intro p { font-size: 0.88rem; }
  .ob-compact .ob-field-foot .ob-hint, .ob-compact #countryHint { display: none; }
  .ob-compact .ob-card { padding: 1rem 0.95rem; }
}

/* Home: content plan waiting for approval */
.plan-approval-alert { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding: 0.7rem 0.8rem 0.7rem 0.9rem; border-radius: 14px;
  background: linear-gradient(90deg, #fff7ed, #fffbeb); border: 1px solid #fcd34d; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12); }
.plan-approval-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; font-weight: 900; font-size: 0.9rem; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }
.plan-approval-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.plan-approval-text strong { font-size: 0.74rem; color: #7c2d12; }
.plan-approval-text span { font-size: 0.64rem; color: #9a3412; line-height: 1.45; }
.plan-approval-btn { flex: none; display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 10px; font-size: 0.68rem; font-weight: 800; color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #ea580c, #d97706); box-shadow: 0 6px 14px rgba(234, 88, 12, 0.28); }
.plan-approval-btn:hover { color: #fff; filter: brightness(1.06); }
@media (max-width: 640px) {
  .plan-approval-alert { flex-wrap: wrap; }
  .plan-approval-text { flex-basis: calc(100% - 45px); }
  .plan-approval-btn { width: 100%; justify-content: center; }
}

/* Robot box: action state — amber "!" drawn exactly over the image's green tick. */
.autopilot-hero-alert-icon { position: absolute; left: 75.7%; top: 17.1%; width: 4.8%; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #fbbf24, #f59e0b 55%, #ea580c);
  color: #fff; font-weight: 900; font-size: min(1.05rem, 2.2cqw); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35); pointer-events: none;
  animation: hero-alert-pulse 2.2s ease-in-out infinite; }
@keyframes hero-alert-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(251, 191, 36, 0.12); } }
@media (prefers-reduced-motion: reduce) { .autopilot-hero-alert-icon { animation: none; } }
.autopilot-hero-badge.is-action { pointer-events: auto; text-decoration: none; }
.autopilot-hero-badge.is-action strong { color: #fde68a; }
.autopilot-hero-badge.is-action span { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.autopilot-hero-badge.is-action::before { content: ""; position: absolute; left: -26%; top: -22%; right: -22%; bottom: -26%; }

/* Upcoming Marketing: nothing scheduled yet */
.upcoming-empty { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border-radius: 14px; border: 1.5px dashed #c7cdf5; background: linear-gradient(135deg, #f5f6ff, #f0f7ff); }
.upcoming-empty-icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: #e0e7ff; }
.upcoming-empty-icon svg { width: 20px; height: 20px; fill: none; stroke: #4f46e5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.upcoming-empty > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.upcoming-empty strong { font-size: 0.78rem; color: var(--pv-text); }
.upcoming-empty > div span { font-size: 0.68rem; color: #475569; }
.upcoming-empty-link { flex: none; font-size: 0.68rem; font-weight: 800; color: #4f46e5; text-decoration: none; white-space: nowrap; }
.upcoming-empty-link:hover { text-decoration: underline; }
@media (max-width: 640px) { .upcoming-empty { flex-wrap: wrap; } .upcoming-empty-link { flex-basis: 100%; padding-left: calc(38px + 0.8rem); } }

/* Popup */
.plan-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.plan-modal[hidden] { display: none; }
.plan-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); }
.plan-modal-card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 20px; padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.35); text-align: left; animation: plan-modal-in 0.2s ease-out; }
@keyframes plan-modal-in { from { transform: translateY(10px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.plan-modal-close { position: absolute; top: 0.7rem; right: 0.8rem; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f3f8; color: #475569; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.plan-modal-close:hover { background: #e5e8f0; }
.plan-modal-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f59e0b, #ea580c); box-shadow: 0 10px 22px rgba(234, 88, 12, 0.3); }
.plan-modal-icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-modal-card h2 { margin: 0.9rem 0 0.4rem; font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.plan-modal-card > p { margin: 0 0 0.8rem; font-size: 0.86rem; color: #475569; line-height: 1.55; }
.plan-modal-points { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.plan-modal-points li { display: flex; gap: 0.5rem; font-size: 0.85rem; color: #1e293b; }
.plan-modal-points li::before { content: "✓"; flex: none; width: 18px; height: 18px; margin-top: 0.05rem; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 0.66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.plan-modal-card > p.plan-modal-deadline { padding: 0.6rem 0.75rem; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 0.8rem; }
.plan-modal-actions { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.plan-modal-primary { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; font-weight: 800; font-size: 0.92rem; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #4f46e5, #2563eb); box-shadow: 0 10px 22px rgba(79, 70, 229, 0.3); }
.plan-modal-primary:hover { color: #fff; filter: brightness(1.06); }
.plan-modal-later { min-height: 46px; padding: 0 1.2rem; border-radius: 12px; border: 1.5px solid #d6dbe8; background: #fff; color: #334155; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.plan-modal-later:hover { background: #f8fafc; }
body.plan-modal-open { overflow: hidden; }
.plan-modal-primary:focus, .plan-modal-later:focus, .plan-modal-close:focus { outline: 3px solid rgba(99, 102, 241, 0.35); outline-offset: 2px; }

/* Expired / cancelled posts: grey, not failure-red. */
.cal-item.status-muted, .cal-item-badge.status-muted, .content-card .cc-status.status-muted { background: #f1f3f8; color: #64748b; }

/* Top bar: "What's this page?" */
.page-help { position: relative; display: inline-block; margin-top: 0.15rem; }
.page-help summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.6rem; font-weight: 700; color: #4f46e5; }
.page-help summary::-webkit-details-marker { display: none; }
.page-help summary span { width: 15px; height: 15px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef0ff; font-size: 0.56rem; font-weight: 800; }
.page-help-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(340px, 80vw); padding: 0.75rem 0.85rem; border-radius: 12px; background: #fff; border: 1px solid #e3e6f0; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14); }
.page-help-pop strong { display: block; font-size: 0.72rem; color: var(--pv-text); margin-bottom: 0.2rem; }
.page-help-pop p { margin: 0; font-size: 0.66rem; line-height: 1.5; color: #475569; white-space: normal; }

/* ==========================================================================
   What we create for you (content types) + the page for one type
   ========================================================================== */
.wc-page { display: flex; flex-direction: column; gap: 0.9rem; }
.wc-back { display: inline-block; margin-bottom: 0.7rem; font-size: 0.72rem; font-weight: 700; color: #4f46e5; text-decoration: none; }
.wc-back:hover { text-decoration: underline; }
.wc-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.15rem; border-radius: 18px; border: 1px solid #dfe3fb; background: linear-gradient(135deg, #f4f2ff, #eef6ff 60%, #fff8ed); }
.wc-intro h1 { margin: 0 0 0.3rem; font-size: 1.15rem; color: var(--pv-text); }
.wc-intro p { margin: 0; max-width: 720px; font-size: 0.72rem; line-height: 1.55; color: #475569; }
.wc-intro-link { font-size: 0.7rem; font-weight: 800; color: #4f46e5; text-decoration: none; white-space: nowrap; }
.wc-intro-link:hover { text-decoration: underline; }

.wc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 900px) { .wc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .wc-steps { grid-template-columns: minmax(0, 1fr); } }
.wc-steps li { display: flex; gap: 0.55rem; align-items: center; padding: 0.6rem 0.7rem; border-radius: 12px; background: #fff; border: 1px solid #eceef6; }
.wc-steps li.wc-step-you { border-color: #fcd34d; background: #fffbeb; }
.wc-step-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #4f46e5, #0ea5e9); }
.wc-step-you .wc-step-num { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.wc-steps strong { display: block; font-size: 0.7rem; color: var(--pv-text); }
.wc-steps em { display: block; font-style: normal; font-size: 0.6rem; color: #64748b; }

.wc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
@media (max-width: 1000px) { .wc-grid { grid-template-columns: minmax(0, 1fr); } }
.wc-card { display: flex; flex-direction: column; gap: 0.65rem; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid var(--pv-border); }
.wc-card-head { display: flex; align-items: flex-start; gap: 0.65rem; }
.wc-card-head > div { flex: 1; min-width: 0; }
.wc-card-head h2 { margin: 0; font-size: 0.9rem; color: var(--pv-text); }
.wc-card-head p { margin: 0.1rem 0 0; font-size: 0.66rem; color: #64748b; }
.wc-card-icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; background: #eef0ff; }
.wc-card-icon-lg { width: 54px; height: 54px; font-size: 1.5rem; border-radius: 14px; }
.wc-count { flex: none; font-size: 0.6rem; font-weight: 800; color: #4338ca; background: #eef0ff; border-radius: 99px; padding: 0.2rem 0.55rem; white-space: nowrap; }
.wc-benefit { margin: 0; font-size: 0.68rem; line-height: 1.55; color: #334155; }
.wc-benefit strong { color: var(--pv-text); }
.wc-channels { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; font-size: 0.6rem; color: #64748b; }
.wc-channel { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem 0.15rem 0.2rem; border-radius: 99px; background: #f6f7fb; border: 1px solid #eceef6; color: #334155; font-weight: 600; }
.wc-channel img { width: 16px; height: 16px; }
.wc-month { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
@media (max-width: 480px) { .wc-month { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wc-month > div, .wc-results > div { display: flex; flex-direction: column; gap: 0.05rem; padding: 0.5rem 0.6rem; border-radius: 10px; background: #f8f9fc; }
.wc-month strong, .wc-results strong { font-size: 0.95rem; color: var(--pv-text); }
.wc-month span, .wc-results span { font-size: 0.56rem; color: #64748b; font-weight: 600; }
.wc-month .wc-you { background: #fffbeb; }
.wc-month .wc-you strong { color: #b45309; }
.wc-next { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.64rem; color: #475569; }
.wc-next-label { flex: none; font-size: 0.54rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; }
.wc-next-text em { font-style: normal; color: #4f46e5; font-weight: 600; }
.wc-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: auto; }
.wc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem 0.8rem; border-radius: 10px; border: 1.5px solid #c7cdf5; background: #fff; color: #3730a3; font-size: 0.64rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.wc-btn:hover { background: #eef0ff; color: #3730a3; }
.wc-btn-primary { border: 0; color: #fff; background: linear-gradient(135deg, #ea580c, #d97706); }
.wc-btn-primary:hover { color: #fff; background: linear-gradient(135deg, #c2410c, #b45309); }
.wc-btn-ghost { visibility: hidden; }
.wc-ad { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.85rem 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--pv-border); }
.wc-ad > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 0.1rem; }
.wc-ad strong { font-size: 0.76rem; color: var(--pv-text); }
.wc-ad > div span { font-size: 0.64rem; color: #475569; }

.wc-hero { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1px solid #dfe3fb; background: linear-gradient(135deg, #f4f2ff, #eef6ff 60%, #fff8ed); }
.wc-hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.wc-hero h1 { margin: 0; font-size: 1.2rem; color: var(--pv-text); }
.wc-hero-what { margin: 0; font-size: 0.74rem; color: #475569; }
.wc-hero-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.2rem; }
.wc-section-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.3rem; }
.wc-section-head h2 { margin: 0; font-size: 0.86rem; color: var(--pv-text); }
.wc-section-sub { font-size: 0.62rem; color: #64748b; }
.wc-posts { display: flex; flex-direction: column; gap: 0.45rem; }
.wc-post { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 76px; gap: 0.7rem; align-items: center; padding: 0.6rem 0.8rem; border-radius: 12px; background: #fff; border: 1px solid #eceef6; }
.wc-post-you { border-color: #fcd34d; background: #fffdf5; }
@media (max-width: 640px) { .wc-post { grid-template-columns: 42px minmax(0, 1fr); } .wc-post > .mm-status, .wc-post > .wc-btn { grid-column: 2; justify-self: start; } }
.wc-post-date { display: flex; flex-direction: column; align-items: center; padding: 0.25rem 0; border-radius: 10px; background: #f3f4fa; }
.wc-post-date strong { font-size: 0.86rem; line-height: 1.1; color: var(--pv-text); }
.wc-post-date span { font-size: 0.52rem; font-weight: 800; text-transform: uppercase; color: #64748b; }
.wc-post-main { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.wc-post-main strong { font-size: 0.74rem; color: var(--pv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-post-next { font-size: 0.62rem; color: #475569; }
.wc-post-channels { display: flex; gap: 0.25rem; margin-top: 0.1rem; }
.wc-post-channels img { width: 15px; height: 15px; }
.wc-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 640px) { .wc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wc-results > div { background: #fff; border: 1px solid #eceef6; padding: 0.7rem 0.8rem; }
.wc-note { margin: 0; font-size: 0.62rem; color: #64748b; }
.wc-earlier summary { cursor: pointer; font-size: 0.72rem; font-weight: 700; color: #4f46e5; margin-bottom: 0.5rem; }

/* Home: plan tiles link to "What we create for you" */
a.plan-tile { text-decoration: none; color: inherit; }
a.plan-tile:hover { border-color: #c7cdf5; }

/* Home: upgrade box names the real next plan */
.pro-gains { list-style: none; margin: 0.3rem 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.pro-gains li { display: flex; gap: 0.35rem; font-size: 0.62rem; color: #475569; line-height: 1.4; }

/* Item page: what happens next */
.rd-next { margin: 0.6rem 0 0; padding: 0.55rem 0.75rem; border-radius: 10px; background: #f5f6ff; border: 1px solid #e0e4fb; font-size: 0.7rem; color: #334155; }
.rd-next strong { color: var(--pv-text); }

/* Approvals: preview of each post */
.ap-thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 1px solid #e3e6f0; }
.ap-what { display: block; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #b45309; }
.ap-text { display: block; font-size: 0.64rem; color: #475569; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 560px; }
.ap-kind { font-size: 0.56rem; font-weight: 700; color: #64748b; background: #f1f3f8; border-radius: 99px; padding: 0.05rem 0.4rem; margin-left: 0.3rem; }

/* Page help: tour link */
.page-help-tour { display: inline-block; margin-top: 0.45rem; font-size: 0.64rem; font-weight: 800; color: #4f46e5; text-decoration: none; }
.page-help-tour:hover { text-decoration: underline; }

/* First-time tour */
.tour { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tour[hidden] { display: none; }
.tour-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(3px); }
.tour-card { position: relative; width: min(480px, 100%); background: #fff; border-radius: 22px; padding: 1.8rem 1.7rem 1.3rem; box-shadow: 0 30px 80px rgba(2, 6, 23, 0.35); animation: plan-modal-in 0.2s ease-out; }
.tour-slide { display: none; min-height: 200px; }
.tour-slide.is-active { display: block; }
.tour-icon { display: inline-flex; width: 52px; height: 52px; border-radius: 16px; align-items: center; justify-content: center; font-size: 1.6rem; background: linear-gradient(135deg, #eef0ff, #e0f2fe); }
.tour-slide h2 { margin: 0.9rem 0 0.45rem; font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.tour-slide p { margin: 0 0 0.7rem; font-size: 0.9rem; line-height: 1.6; color: #475569; }
.tour-slide strong { color: #1e293b; }
.tour-link { font-size: 0.86rem; font-weight: 800; color: #4f46e5; text-decoration: none; }
.tour-link:hover { text-decoration: underline; }
.tour-foot { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; }
.tour-dots { flex: 1; display: flex; gap: 0.35rem; }
.tour-dots i { width: 8px; height: 8px; border-radius: 99px; background: #dfe3ee; transition: width 0.15s, background 0.15s; }
.tour-dots i.is-active { width: 22px; background: #4f46e5; }
.tour-foot .plan-modal-primary { flex: none; min-width: 120px; border: 0; cursor: pointer; font: inherit; font-weight: 800; }

/* ==========================================================================
   Info icon beside a title (replaces text help links)
   ========================================================================== */
.box-title { display: inline-flex; align-items: center; gap: 0.35rem; }
.subtext-row { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.subtext-row .subtext { min-width: 0; }
.info-tip { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.info-tip summary { list-style: none; cursor: pointer; display: inline-flex; }
.info-tip summary::-webkit-details-marker { display: none; }
.info-tip summary span { width: 15px; height: 15px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: italic 800 0.56rem/1 Georgia, serif; color: #6366f1; background: #eef0ff; border: 1px solid #dfe2fb; transition: background 0.12s; }
.info-tip summary:hover span, .info-tip[open] summary span { background: #6366f1; color: #fff; }
.info-tip-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: -8px; width: min(300px, 78vw); padding: 0.65rem 0.8rem; border-radius: 12px;
  background: #0f172a; color: #e2e8f0; font-size: 0.64rem; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; white-space: normal;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.25); }
.info-tip-pop strong { display: block; color: #fff; font-size: 0.7rem; margin-bottom: 0.15rem; }
.info-tip-pop .page-help-tour { color: #a5b4fc; display: block; margin-top: 0.4rem; }
.page-help { margin-top: 0; }

/* ==========================================================================
   Process tracker: the post journey as one connected track
   ========================================================================== */
.pf { position: relative; padding: 0.9rem 0.8rem 0.8rem; border-radius: 16px; background: #fff; border: 1px solid var(--pv-border); overflow-x: auto; }
.pf-caption { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; margin: 0 0 0.6rem 0.2rem; }
.pf-track { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); min-width: 660px; }
.pf-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; padding: 0 0.25rem; }
/* The connecting line and arrow to the next step. */
.pf-step:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: calc(50% + 24px); right: calc(-50% + 24px); height: 2px; background: #dfe3ee; }
.pf-step:not(:last-child)::before { content: ""; position: absolute; top: 15px; right: calc(-50% + 20px); width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #cdd3e1; z-index: 1; }
.pf-node { position: relative; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f1f3f8; border: 2px solid #dfe3ee; z-index: 2; }
.pf-node svg { width: 18px; height: 18px; fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-step strong { font-size: 0.66rem; color: #475569; margin-top: 0.25rem; }
.pf-step > span { font-size: 0.56rem; color: #94a3b8; line-height: 1.35; max-width: 110px; }
.pf-you .pf-node { border-style: dashed; border-color: #fcd34d; background: #fffbeb; }
.pf-you .pf-node svg { stroke: #d97706; }
.pf-you strong { color: #b45309; }
/* Neutral (the journey itself): every step in brand colour. */
.pf-neutral .pf-node { background: #eef0ff; border-color: #c7d2fe; }
.pf-neutral .pf-node svg { stroke: #4f46e5; }
.pf-neutral.pf-you .pf-node { background: #fffbeb; border-color: #fcd34d; }
.pf-neutral.pf-you .pf-node svg { stroke: #d97706; }
.pf-neutral:not(:last-child)::after { background: linear-gradient(90deg, #c7d2fe, #a5b4fc); }
.pf-neutral:not(:last-child)::before { border-left-color: #818cf8; }
/* One post: done / current / to do. */
.pf-done .pf-node { background: #22c55e; border-color: #22c55e; }
.pf-done .pf-node svg { stroke: #fff; stroke-width: 3; }
.pf-done:not(:last-child)::after { background: #86efac; }
.pf-done:not(:last-child)::before { border-left-color: #4ade80; }
.pf-done strong { color: #15803d; }
.pf-current .pf-node { background: linear-gradient(135deg, #4f46e5, #0ea5e9); border-color: transparent; box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.15); animation: pf-pulse 2.2s ease-in-out infinite; }
.pf-current .pf-node svg { stroke: #fff; }
.pf-current strong { color: #312e81; }
.pf-current.pf-you .pf-node { background: linear-gradient(135deg, #f59e0b, #ea580c); box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.2); }
.pf-current.pf-you strong { color: #b45309; }
.pf-here { font-style: normal; font-size: 0.56rem; font-weight: 800; color: #fff; background: #4f46e5; border-radius: 99px; padding: 0.1rem 0.45rem; margin-top: 0.15rem; }
.pf-current.pf-you .pf-here { background: #ea580c; }
.pf-todo { opacity: 0.75; }
.pf-paused .pf-current .pf-node, .pf-expired .pf-current .pf-node { background: #94a3b8; animation: none; box-shadow: none; }
.pf-paused .pf-here, .pf-expired .pf-here { background: #64748b; }
@keyframes pf-pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.15); } 50% { box-shadow: 0 0 0 9px rgba(79, 70, 229, 0.06); } }
@media (prefers-reduced-motion: reduce) { .pf-current .pf-node { animation: none; } }
/* Counts on a set of posts. */
.pf-count { position: absolute; top: -7px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 800; color: #475569; background: #fff; border: 1.5px solid #dfe3ee; }
.pf-has .pf-count { color: #fff; background: #4f46e5; border-color: #4f46e5; }
.pf-has.pf-you .pf-count { background: #ea580c; border-color: #ea580c; }

/* ==========================================================================
   Home: tiles open the list behind the number
   ========================================================================== */
button.summary-tile { font: inherit; text-align: left; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
button.summary-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); }
button.summary-tile:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

dialog.drill { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 1.2rem 1.3rem; border: 0; border-radius: 20px; box-shadow: 0 30px 80px rgba(2, 6, 23, 0.35); color: #0f172a; }
dialog.drill::backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); }
dialog.drill[open] { display: flex; flex-direction: column; gap: 0.7rem; animation: plan-modal-in 0.18s ease-out; }
.drill-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.drill-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.drill-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f3f8; font-size: 1.2rem; line-height: 1; cursor: pointer; color: #475569; }
.drill-sub { margin: -0.3rem 0 0; font-size: 0.74rem; color: #64748b; }
.drill-empty { margin: 0; padding: 1rem; border-radius: 12px; background: #f8f9fc; font-size: 0.78rem; color: #475569; text-align: center; }
.drill-foot { display: flex; justify-content: flex-end; }
.drill-foot a { font-size: 0.76rem; font-weight: 800; color: #4f46e5; text-decoration: none; }
.drill .pf { padding: 0.7rem 0.6rem; }
.drill-rows { display: flex; flex-direction: column; gap: 0.4rem; overflow-y: auto; }
.drill-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 0.7rem; align-items: center; padding: 0.55rem 0.7rem; border-radius: 12px; border: 1px solid #eceef6; background: #fff; text-decoration: none; color: inherit; }
.drill-row:hover { border-color: #c7cdf5; background: #fafbff; }
.drill-row.is-you { border-color: #fcd34d; background: #fffdf5; }
.drill-date { display: flex; flex-direction: column; align-items: center; padding: 0.2rem 0; border-radius: 10px; background: #f3f4fa; }
.drill-date strong { font-size: 0.86rem; line-height: 1.1; }
.drill-date span { font-size: 0.52rem; font-weight: 800; text-transform: uppercase; color: #64748b; }
.drill-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.drill-main > strong { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drill-main > span:not(.mini-journey) { font-size: 0.66rem; color: #64748b; }
.drill-meta { display: flex; align-items: center; gap: 0.3rem; font-size: 0.66rem; color: #64748b; }
.drill-meta img { width: 14px; height: 14px; }
.drill-results { display: flex; flex-direction: column; align-items: flex-end; }
.drill-results strong { font-size: 0.86rem; }
.drill-results span { font-size: 0.56rem; color: #64748b; }
@media (max-width: 560px) { .drill-row { grid-template-columns: 40px minmax(0, 1fr); } .drill-row > .mm-status, .drill-row > .drill-results { grid-column: 2; justify-self: start; } }
.mini-journey { display: inline-flex; gap: 3px; margin-top: 0.15rem; }
.mini-journey i { width: 14px; height: 4px; border-radius: 99px; background: #e5e8f0; }
.mini-journey i.done { background: #22c55e; }
.mini-journey i.now { background: #4f46e5; width: 20px; }
.mini-journey.is-stopped i.now { background: #94a3b8; }

/* ==========================================================================
   One post: summary card, tracker, your turn
   ========================================================================== */
.pd-hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.1rem; padding: 1rem; margin-bottom: 0.85rem; border-radius: 18px; background: #fff; border: 1px solid var(--pv-border); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04); }
@media (max-width: 760px) { .pd-hero { grid-template-columns: minmax(0, 1fr); } }
.pd-preview { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #eef0ff, #e0f2fe); display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .pd-preview { aspect-ratio: 16 / 9; } }
.pd-preview img { width: 100%; height: 100%; object-fit: cover; }
.pd-preview-empty { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1rem; text-align: center; }
.pd-preview-empty > span { font-size: 2.2rem; }
.pd-preview-empty em { font-style: normal; font-size: 0.62rem; color: #64748b; line-height: 1.45; }
.pd-info { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.pd-kicker { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.64rem; font-weight: 700; color: #64748b; }
.pd-info h1 { margin: 0; font-size: 1.2rem; line-height: 1.25; color: var(--pv-text); }
.pd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 560px) { .pd-facts { grid-template-columns: minmax(0, 1fr); } }
.pd-facts > div { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: #f8f9fc; min-width: 0; }
.pd-facts > div > span { font-size: 0.54rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; }
.pd-facts strong { font-size: 0.72rem; color: var(--pv-text); }
.pd-channels { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pd-channels > span { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.66rem; }
.pd-channels img { width: 15px; height: 15px; }
.pd-why { margin: 0; padding: 0.6rem 0.75rem; border-radius: 12px; background: linear-gradient(135deg, #f4f2ff, #eef6ff); font-size: 0.7rem; line-height: 1.5; color: #334155; }
.pd-why strong { color: #312e81; }
.pd-hero + .pf { margin-bottom: 0.85rem; }
.pd-action { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 0.75rem 0.9rem; border-radius: 14px; background: linear-gradient(90deg, #fff7ed, #fffbeb); border: 1px solid #fcd34d; }
.pd-action-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; font-weight: 900; }
.pd-action > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.pd-action strong { font-size: 0.76rem; color: #7c2d12; }
.pd-action > div span { font-size: 0.66rem; color: #9a3412; }
.pd-action-btn { padding: 0.5rem 1rem; border-radius: 10px; font-size: 0.68rem; font-weight: 800; color: #fff; text-decoration: none; background: linear-gradient(135deg, #ea580c, #d97706); }
.pd-action-btn:hover { color: #fff; }
#decision { scroll-margin-top: 90px; }
.pd-history { margin-top: 1.2rem; }
.pd-history summary { cursor: pointer; font-size: 0.72rem; font-weight: 700; color: #4f46e5; margin-bottom: 0.5rem; }

/* ==========================================================================
   My Marketing: month summary + board
   ========================================================================== */
.mb-page { display: flex; flex-direction: column; gap: 0.9rem; }
.mb-summary { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; padding: 1rem 1.2rem; border-radius: 18px; border: 1px solid #dfe3fb; background: linear-gradient(135deg, #f4f2ff, #eef6ff 60%, #fff8ed); }
.mb-ring { --pct: 0; flex: none; width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(#22c55e calc(var(--pct) * 1%), #e5e8f0 0); }
.mb-ring strong { font-size: 1.15rem; line-height: 1; color: var(--pv-text); }
.mb-ring small { font-size: 0.7rem; color: #64748b; }
.mb-ring span { font-size: 0.54rem; color: #64748b; font-weight: 700; margin-top: 0.15rem; }
.mb-summary-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 0.3rem; }
.mb-month { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #6366f1; }
.mb-summary h1 { margin: 0; font-size: 1.1rem; color: var(--pv-text); }
.mb-kpis { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mb-kpis span { font-size: 0.64rem; color: #475569; background: rgba(255, 255, 255, 0.85); border: 1px solid #e3e6f5; border-radius: 99px; padding: 0.2rem 0.6rem; }
.mb-kpis strong { color: var(--pv-text); }
.mb-kpis .mb-kpi-you { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.mb-cta { flex: none; padding: 0.6rem 1.1rem; border-radius: 12px; font-size: 0.72rem; font-weight: 800; color: #fff; text-decoration: none; background: linear-gradient(135deg, #ea580c, #d97706); box-shadow: 0 8px 18px rgba(234, 88, 12, 0.25); }
.mb-cta:hover { color: #fff; }
.mb-cta-soft { background: #fff; color: #4f46e5; border: 1.5px solid #c7cdf5; box-shadow: none; }
.mb-cta-soft:hover { color: #4f46e5; background: #eef0ff; }
.mb-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.2rem; }
.mb-section-head h2 { margin: 0; font-size: 0.9rem; color: var(--pv-text); }
.mb-link { font-size: 0.68rem; font-weight: 800; color: #4f46e5; text-decoration: none; }
.mb-board { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 0.6rem; overflow-x: auto; padding-bottom: 0.3rem; }
.mb-col { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.65rem; border-radius: 14px; background: #f5f6fa; border-top: 3px solid #cbd5e1; min-height: 160px; }
.mb-col-making { border-top-color: #6366f1; }
.mb-col-you { border-top-color: #f59e0b; background: #fffbf0; }
.mb-col-scheduled { border-top-color: #0ea5e9; }
.mb-col-done { border-top-color: #22c55e; }
.mb-col header { display: flex; align-items: center; justify-content: space-between; }
.mb-col header strong { font-size: 0.72rem; color: var(--pv-text); }
.mb-col-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 800; background: #fff; color: #475569; border: 1px solid #e3e6f0; }
.mb-col-you .mb-col-count { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.mb-col-hint { margin: -0.3rem 0 0.1rem; font-size: 0.56rem; color: #94a3b8; }
.mb-col-empty { padding: 0.8rem 0.4rem; border-radius: 10px; border: 1.5px dashed #dde1ea; text-align: center; font-size: 0.6rem; color: #94a3b8; }
.mb-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.6rem 0.65rem; border-radius: 11px; background: #fff; border: 1px solid #e6e9f2; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: transform 0.12s, box-shadow 0.12s; }
.mb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08); color: inherit; }
.mb-card-top { display: flex; justify-content: space-between; gap: 0.3rem; font-size: 0.56rem; color: #64748b; font-weight: 700; }
.mb-card strong { font-size: 0.7rem; line-height: 1.3; color: var(--pv-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.mb-card-channels { display: flex; gap: 0.2rem; }
.mb-card-channels img { width: 14px; height: 14px; }
.mb-card-result { font-size: 0.56rem; font-weight: 700; color: #15803d; }
.mb-card-you { font-size: 0.54rem; font-weight: 800; color: #b45309; }
.mb-stopped summary { cursor: pointer; font-size: 0.7rem; font-weight: 700; color: #64748b; margin-bottom: 0.5rem; }
.mb-types { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--pv-border); background: #fff; }
.mb-type { display: grid; grid-template-columns: 36px minmax(140px, 1.2fr) minmax(80px, 1fr) auto minmax(0, 0.9fr) 14px; gap: 0.75rem; align-items: center; padding: 0.65rem 0.85rem; border-bottom: 1px solid #f0f1f6; text-decoration: none; color: inherit; }
.mb-type:last-child { border-bottom: 0; }
.mb-type:hover { background: #fafbff; color: inherit; }
@media (max-width: 760px) { .mb-type { grid-template-columns: 32px minmax(0, 1fr) auto; } .mb-type-bar, .mb-type-you, .mb-type-go { display: none; } }
.mb-type-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #eef0ff; font-size: 1rem; }
.mb-type-name { display: flex; flex-direction: column; min-width: 0; }
.mb-type-name strong { font-size: 0.74rem; color: var(--pv-text); }
.mb-type-name span { font-size: 0.6rem; color: #64748b; }
.mb-type-bar { height: 8px; border-radius: 99px; background: #eceef5; overflow: hidden; }
.mb-type-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #22c55e, #16a34a); }
.mb-type-num { font-size: 0.66rem; color: #64748b; white-space: nowrap; }
.mb-type-num strong { font-size: 0.8rem; color: var(--pv-text); }
.mb-type-you { font-size: 0.62rem; font-weight: 800; color: #b45309; }
.mb-type-go { font-size: 1.1rem; color: #94a3b8; }

/* What we create: one segmented bar per type */
.wc-progress { display: flex; flex-direction: column; gap: 0.35rem; }
.wc-progress-head { font-size: 0.64rem; color: #64748b; }
.wc-progress-head strong { font-size: 0.78rem; color: var(--pv-text); }
.wc-bar { display: flex; height: 10px; border-radius: 99px; background: #eceef5; overflow: hidden; }
.wc-bar i { display: block; height: 100%; }
.seg-done { background: #22c55e; }
.seg-you { background: #f59e0b; }
.seg-making { background: #6366f1; }
.seg-todo { background: #dfe3ee; }
.wc-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; font-size: 0.6rem; color: #64748b; }
.wc-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.wc-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.wc-legend .is-you { color: #b45309; font-weight: 700; }

/* Approvals: approve a batch, week headers, ask for changes inline */
.ap-bulk { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.9rem; padding: 0.75rem 0.9rem; border-radius: 14px; background: linear-gradient(90deg, #ecfdf5, #f0fdf4); border: 1px solid #bbf7d0; }
.ap-bulk > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.ap-bulk strong { font-size: 0.76rem; color: #14532d; }
.ap-bulk span { font-size: 0.64rem; color: #166534; }
.ap-bulk-btn { border: 0; border-radius: 10px; padding: 0.55rem 1.1rem; font: inherit; font-size: 0.72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #16a34a, #15803d); cursor: pointer; }
.ap-week { margin: 0.6rem 0 0.1rem; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.ap-ask { position: relative; }
.ap-ask summary { list-style: none; cursor: pointer; }
.ap-ask summary::-webkit-details-marker { display: none; }
.ap-ask-pop { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: min(320px, 80vw); display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem; border-radius: 12px; background: #fff; border: 1px solid #e3e6f0; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14); }
.ap-ask-pop label { font-size: 0.66rem; font-weight: 700; color: #1e293b; }
.ap-ask-pop textarea { width: 100%; border: 1.5px solid #cdd3e1; border-radius: 10px; padding: 0.5rem 0.6rem; font: inherit; font-size: 0.7rem; resize: vertical; }
.ap-ask-pop textarea:focus { outline: none; border-color: #4f46e5; }
.ap-ask-send { align-self: flex-end; border: 0; border-radius: 9px; padding: 0.4rem 0.8rem; font: inherit; font-size: 0.66rem; font-weight: 800; color: #fff; background: #4f46e5; cursor: pointer; }

/* Home: channel icons in the "Your marketing so far" title line */
.summary-channels { justify-content: flex-end; gap: 0.3rem; flex-wrap: nowrap; }
.summary-channels .gp-channel { width: 24px; height: 24px; box-shadow: 0 1px 3px rgba(60, 72, 140, 0.12); }
.summary-channels .gp-channel img { width: 13px; height: 13px; }
.summary-channels .gp-channel-state { width: 9px; height: 9px; right: -2px; bottom: -2px; border-width: 1px; }
.summary-channels .gp-channel-state svg { width: 6px; height: 6px; }
@media (max-width: 560px) { .summary-head { flex-wrap: wrap; } .summary-channels { justify-content: flex-start; } }

/* Sidebar: the business box under the logo */
.sb-business { position: relative; margin: 0.2rem 0.9rem 0.7rem; }
.sb-business summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.55rem; border-radius: 12px; background: #f6f7fb; border: 1px solid #e8eaf2; }
.sb-business summary::-webkit-details-marker { display: none; }
.sb-business summary:hover, .sb-business[open] summary { border-color: #c7cdf5; background: #f1f2ff; }
.sb-business-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-business-text strong { font-size: 0.68rem; color: var(--pv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-business-text span { font-size: 0.56rem; color: #64748b; }
.sb-business-chevron { flex: none; width: 14px; height: 14px; fill: none; stroke: #94a3b8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.sb-business[open] .sb-business-chevron { transform: rotate(180deg); }
.sb-business-dot { position: absolute; top: 6px; left: 34px; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; border: 2px solid #fff; }
.sb-business-menu { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 4px); display: flex; flex-direction: column; padding: 0.35rem; border-radius: 12px; background: #fff; border: 1px solid #e3e6f0; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14); }
.sb-business-menu a { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.55rem; border-radius: 9px; font-size: 0.66rem; font-weight: 600; color: #1e293b; text-decoration: none; }
.sb-business-menu a:hover { background: #f1f2ff; color: #3730a3; }
.sb-business-menu svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #6366f1; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-business-menu em { margin-left: auto; font-style: normal; font-size: 0.56rem; color: #64748b; }
.sb-business-badge { margin-left: auto; font-size: 0.52rem; font-weight: 800; color: #b45309; background: #fef3c7; border-radius: 99px; padding: 0.1rem 0.4rem; }

/* Change a post's brief (planned post page, and while its words are being written) */
.pb-card { margin-top: 0.9rem; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid var(--pv-border); }
.pb-card-head h2 { margin: 0 0 0.7rem; font-size: 0.86rem; color: var(--pv-text); }
details.pb-card { padding: 0.8rem 1rem; }
details.pb-card > summary { cursor: pointer; font-weight: 700; }
details.pb-card[open] > summary { margin-bottom: 0.7rem; }
.pb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.9rem; }
@media (max-width: 640px) { .pb-grid { grid-template-columns: minmax(0, 1fr); } }
.pb-wide { grid-column: 1 / -1; }
.pb-field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; }
.pb-field > span { font-size: 0.64rem; font-weight: 700; color: #1e293b; }
.pb-field em { font-style: normal; font-weight: 600; font-size: 0.56rem; color: #94a3b8; margin-left: 0.3rem; }
.pb-field input, .pb-field select { width: 100%; min-height: 40px; border: 1.5px solid #cdd3e1; border-radius: 10px; padding: 0.45rem 0.7rem; font: inherit; font-size: 0.74rem; color: #0f172a; background: #fff; }
.pb-field input:focus, .pb-field select:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14); }
.pb-actions { display: flex; justify-content: flex-end; margin-top: 0.8rem; }
.pb-save { border: 0; border-radius: 10px; padding: 0.55rem 1.1rem; font: inherit; font-size: 0.72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #4f46e5, #2563eb); cursor: pointer; }
.pb-save:hover { filter: brightness(1.06); }

.summary-channels .gp-channel + .gp-channel { margin-left: 8px; }

/* ==========================================================================
   My Marketing Plan (content plan page)
   ========================================================================== */
.mp-page { display: flex; flex-direction: column; gap: 0.9rem; }
.mp-head h1 { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--pv-text); }
.mp-head p { margin: 0.15rem 0 0; font-size: 0.74rem; color: #64748b; }
.mp-card { padding: 1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid var(--pv-border); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03); min-width: 0; }
.mp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.75rem; }
.mp-card-head h2 { margin: 0; font-size: 0.86rem; font-weight: 800; color: var(--pv-text); display: inline-flex; align-items: center; gap: 0.4rem; }
.mp-card-ico { font-size: 0.95rem; }
.mp-ico-target { color: #e11d48; }
.mp-link { font-size: 0.66rem; font-weight: 800; color: #4f46e5; text-decoration: none; white-space: nowrap; }
.mp-link:hover { text-decoration: underline; }
.mp-muted { font-size: 0.64rem; color: #64748b; }
.mp-edit { font-size: 0.64rem; font-weight: 700; color: #334155; text-decoration: none; border: 1px solid #e3e6f0; border-radius: 8px; padding: 0.2rem 0.55rem; }
.mp-edit:hover { border-color: #c7cdf5; color: #4f46e5; }
.mp-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.9rem; border-radius: 10px; border: 1.5px solid #c7cdf5; background: #fff; color: #3730a3; font-size: 0.68rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.mp-btn:hover { background: #eef0ff; color: #3730a3; }
.mp-btn-primary { border: 0; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); box-shadow: 0 8px 18px rgba(79, 70, 229, 0.25); }
.mp-btn-primary:hover { color: #fff; filter: brightness(1.06); }

/* Plan banner */
.mp-plan { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1px solid #dfe3fb;
  background: linear-gradient(120deg, #f5f0ff, #eef2ff 45%, #f3f0ff); }
@media (max-width: 1100px) { .mp-plan { grid-template-columns: minmax(0, 1fr); } }
.mp-plan-main { display: flex; gap: 0.9rem; align-items: flex-start; }
.mp-plan-icon { flex: none; width: 54px; height: 54px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 10px 22px rgba(109, 40, 217, 0.3); }
.mp-plan-icon svg { width: 28px; height: 28px; fill: #fff; }
.mp-plan-name { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mp-plan-name strong { font-size: 1.05rem; color: var(--pv-text); }
.mp-pill { font-size: 0.58rem; font-weight: 800; border-radius: 99px; padding: 0.12rem 0.55rem; }
.mp-pill-ok { background: #dcfce7; color: #15803d; }
.mp-pill-warn { background: #fef3c7; color: #b45309; }
.mp-plan-desc { display: block; font-size: 0.7rem; color: #475569; margin-top: 0.1rem; }
.mp-plan-price { margin: 0.35rem 0 0.25rem; }
.mp-plan-price strong { font-size: 1.5rem; font-weight: 800; color: var(--pv-text); }
.mp-plan-price span { font-size: 0.72rem; color: #64748b; margin-left: 0.2rem; }
.mp-plan-foot { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; font-size: 0.64rem; color: #64748b; }
.mp-plan-highlights { list-style: none; margin: 0; padding: 0 1rem; display: flex; flex-direction: column; gap: 0.45rem; border-left: 1px solid #dfe3fb; border-right: 1px solid #dfe3fb; }
@media (max-width: 1100px) { .mp-plan-highlights { border: 0; padding: 0; } }
.mp-plan-highlights li { display: flex; gap: 0.45rem; font-size: 0.7rem; color: #334155; }
.mp-plan-highlights li span { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #ede9fe; color: #6d28d9; font-size: 0.62rem; font-weight: 800; }
.mp-upgrade { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.mp-upgrade-gem { font-size: 2rem; }
.mp-upgrade > div { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 0.1rem; }
.mp-upgrade > div > span { font-size: 0.64rem; color: #64748b; }
.mp-upgrade strong { font-size: 0.86rem; color: var(--pv-text); }
.mp-upgrade em { font-style: normal; font-size: 0.64rem; color: #475569; }

/* Three cards */
.mp-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
@media (max-width: 1100px) { .mp-row3 { grid-template-columns: minmax(0, 1fr); } }
.mp-goal { margin: 0 0 0.6rem; font-size: 0.95rem; font-weight: 800; line-height: 1.35; color: #1e1b4b; }
.mp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mp-checks li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; color: #334155; }
.mp-checks li > span { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #22c55e; color: #fff; font-size: 0.6rem; font-weight: 900; }
.mp-checks em { margin-left: auto; font-style: normal; font-size: 0.62rem; color: #94a3b8; font-weight: 700; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.mp-chips span { font-size: 0.6rem; font-weight: 700; color: #4338ca; background: #eef0ff; border-radius: 99px; padding: 0.15rem 0.55rem; }
.mp-included { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.mp-included li { display: flex; gap: 0.6rem; align-items: center; }
.mp-inc-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; background: #f3f4fa; }
.mp-included strong { display: block; font-size: 0.72rem; color: var(--pv-text); }
.mp-included span { display: block; font-size: 0.62rem; color: #64748b; }
.mp-progress { display: flex; align-items: center; gap: 1rem; }
.mp-ring { width: 108px; height: 108px; }
.mp-ring strong { font-size: 1.3rem; }
.mp-progress-list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.mp-progress-list li { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.7rem; color: #334155; }
.mp-progress-list strong { color: var(--pv-text); white-space: nowrap; }

/* This month, week by week */
.mp-row2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.85rem; }
@media (max-width: 1100px) { .mp-row2 { grid-template-columns: minmax(0, 1fr); } }
.mp-weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; position: relative; }
.mp-week { display: flex; flex-direction: column; gap: 0.45rem; position: relative; }
.mp-week-head { display: flex; align-items: center; gap: 0.5rem; }
.mp-week-head strong { display: block; font-size: 0.72rem; color: var(--pv-text); }
.mp-week-head span:not(.mp-week-dot) { display: block; font-size: 0.6rem; color: #64748b; }
.mp-week-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; background: #fff; border: 2px solid #dfe3ee; color: #94a3b8; }
.mp-week-done .mp-week-dot { background: #22c55e; border-color: #22c55e; color: #fff; }
.mp-week-now .mp-week-dot { background: linear-gradient(135deg, #4f46e5, #0ea5e9); border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15); }
.mp-week:not(:last-child) .mp-week-head::after { content: ""; flex: 1; height: 2px; background: #e5e8f0; margin-left: 0.2rem; }
.mp-week-done .mp-week-head::after { background: #86efac !important; }
.mp-week-empty { padding: 0.9rem 0.5rem; border-radius: 12px; border: 1.5px dashed #dde1ea; text-align: center; font-size: 0.62rem; color: #94a3b8; }
.mp-post { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.6rem 0.65rem; border-radius: 12px; background: #fff; border: 1px solid #e6e9f2; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: transform 0.12s, box-shadow 0.12s; }
.mp-post:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08); color: inherit; }
.mp-post-top { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.mp-post strong { font-size: 0.7rem; line-height: 1.3; color: var(--pv-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-post-date { font-size: 0.58rem; color: #64748b; }
.mp-week-more { font-size: 0.62rem; font-weight: 800; color: #4f46e5; text-decoration: none; }
.mp-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 0.7rem; }
.mp-results > div { display: flex; flex-direction: column; padding: 0.55rem 0.6rem; border-radius: 12px; background: #f8f9fc; }
.mp-results strong { font-size: 1.05rem; color: var(--pv-text); }
.mp-results span { font-size: 0.56rem; color: #64748b; font-weight: 600; }
.mp-expect { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem; border-radius: 12px; background: linear-gradient(135deg, #f5f3ff, #eef6ff); }
.mp-expect-art { flex: none; display: flex; align-items: flex-end; gap: 4px; height: 52px; }
.mp-expect-art i { width: 10px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #818cf8, #4f46e5); }
.mp-expect-art i:nth-child(1) { height: 30%; } .mp-expect-art i:nth-child(2) { height: 50%; } .mp-expect-art i:nth-child(3) { height: 72%; } .mp-expect-art i:nth-child(4) { height: 100%; }
.mp-expect ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.mp-expect li { display: flex; gap: 0.4rem; font-size: 0.68rem; color: #334155; }
.mp-expect li span { color: #16a34a; font-weight: 900; }
.mp-note { margin: 0.55rem 0 0; font-size: 0.6rem; color: #94a3b8; }

/* Grow further */
.mp-grow { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0.6rem; }
.mp-grow-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem; border-radius: 14px; border: 1px solid #eceef6; }
.mp-grow-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-grow-item strong { font-size: 0.72rem; color: var(--pv-text); }
.mp-grow-item span:not(.mp-grow-ico) { font-size: 0.6rem; color: #64748b; line-height: 1.4; }
.mp-grow-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.mp-g-violet { background: #ede9fe; } .mp-g-green { background: #dcfce7; } .mp-g-blue { background: #dbeafe; } .mp-g-amber { background: #fef3c7; }

/* Folded sections */
.mp-more { border-radius: 16px; background: #fff; border: 1px solid var(--pv-border); padding: 0.8rem 1rem; }
.mp-more > summary { cursor: pointer; font-size: 0.76rem; font-weight: 800; color: #4f46e5; }
.mp-more[open] > summary { margin-bottom: 0.8rem; }
.mp-more .cp-plan { margin: 0; border: 0; padding: 0; box-shadow: none; }

/* ---- Content Plan (plan strip, content types, month list) + My Marketing (KPIs, activity, performance) ---- */
.mp-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.mp-head small { display: block; margin-top: 0.15rem; font-size: 0.66rem; color: #94a3b8; }
.mp-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.cp2-plan { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.1rem; border-radius: 16px; background: linear-gradient(135deg, #f5f3ff, #eef2ff); border: 1px solid #ddd6fe; }
.cp2-plan .mp-plan-icon { width: 44px; height: 44px; border-radius: 12px; }
.cp2-plan .mp-plan-icon svg { width: 22px; height: 22px; }
.cp2-plan-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.35rem 1.1rem; flex-wrap: wrap; }
.cp2-plan-text .mp-plan-price { margin: 0; }
.cp2-plan-text .mp-plan-price strong { font-size: 1.05rem; }
.cp2-plan-sum { font-size: 0.7rem; color: #475569; }

.cp2-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.6rem; }
.cp2-type { position: relative; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem 0.8rem; border-radius: 14px; border: 1.5px solid var(--pv-border); background: #fff; }
.cp2-type strong { font-size: 0.76rem; color: var(--pv-text); }
.cp2-type-ico { font-size: 1.2rem; }
.cp2-type-desc { font-size: 0.62rem; color: #64748b; line-height: 1.35; flex: 1; }
.cp2-type-count { font-size: 0.62rem; font-weight: 800; color: #4f46e5; margin-top: 0.2rem; }
.cp2-type.is-on { border-color: #a5b4fc; background: linear-gradient(180deg, #fff, #f5f7ff); }
.cp2-type.is-off { background: #fafafa; }
.cp2-type.is-off .cp2-type-count { color: #94a3b8; }
.cp2-type.is-locked { background: #f8fafc; border-style: dashed; }
.cp2-type.is-locked > :not(.cp2-upgrade) { opacity: 0.45; filter: grayscale(1); }
.cp2-type.is-locked .cp2-type-count { color: #64748b; }
.cp2-upgrade { font-size: 0.62rem; font-weight: 800; color: #7c3aed; text-decoration: none; }
.cp2-upgrade:hover { text-decoration: underline; }
.cp2-toggle-form { margin: 0.25rem 0 0; }
.cp2-switch { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; border: 0; background: none; cursor: pointer; font-size: 0.64rem; font-weight: 800; color: #64748b; }
.cp2-switch i { position: relative; width: 32px; height: 18px; border-radius: 99px; background: #cbd5e1; transition: background 0.15s; }
.cp2-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: left 0.15s; }
.cp2-switch.on { color: #4f46e5; }
.cp2-switch.on i { background: #6366f1; }
.cp2-switch.on i::after { left: 16px; }

.cp2-list-head { flex-wrap: wrap; }
.cp2-list-head .cp-months { margin: 0; }
.cp2-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; border-bottom: 1px solid var(--pv-border); margin-bottom: 0.4rem; }
.cp2-tabs button { border: 0; background: none; padding: 0.45rem 0.7rem; font-size: 0.68rem; font-weight: 700; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.cp2-tabs button.active { color: #4f46e5; border-bottom-color: #6366f1; }
.cp2-rows, .mk-rows { display: flex; flex-direction: column; }
.cp2-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 100px 110px 64px; align-items: center; gap: 0.75rem; padding: 0.6rem 0.2rem; border-bottom: 1px solid #f1f2f6; }
.cp2-row:last-child, .mk-row:last-child { border-bottom: 0; }
.cp2-row[hidden], .mk-rows[hidden] { display: none; }
.cp2-row-ico { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; background: #eef0ff; }
.cp2-ico-poster { background: #fce7f3; } .cp2-ico-reel { background: #fee2e2; } .cp2-ico-video { background: #fef3c7; }
.cp2-ico-contentpost { background: #e0f2fe; } .cp2-ico-leadgen { background: #dcfce7; }
.cp2-row-main, .mk-row-main { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cp2-row-main strong, .mk-row-main strong { font-size: 0.74rem; color: var(--pv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp2-row-main span, .mk-row-main span { font-size: 0.64rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp2-row-date { font-size: 0.68rem; font-weight: 700; color: #334155; display: flex; flex-direction: column; }
.cp2-row-date small { font-weight: 500; color: #94a3b8; }
.cp2-row .mm-status, .mk-row .mm-status { justify-self: start; }
.cp2-row .mp-btn, .mk-row .mp-btn { padding: 0.35rem 0.7rem; }

.mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.mk-kpi { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--pv-border); text-decoration: none; color: inherit; }
.mk-kpi > div { display: flex; flex-direction: column; min-width: 0; }
.mk-kpi span:first-child { font-size: 0.66rem; font-weight: 700; color: #64748b; }
.mk-kpi strong { font-size: 1.45rem; font-weight: 800; color: var(--pv-text); line-height: 1.2; }
.mk-kpi small { font-size: 0.6rem; color: #94a3b8; }
.mk-kpi-alert { border-color: #fcd34d; background: #fffbeb; }
.mk-kpi-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: inline-flex !important; align-items: center; justify-content: center; font-size: 1rem !important; }
.mk-ico-violet { background: #ede9fe; color: #6d28d9 !important; } .mk-ico-green { background: #dcfce7; color: #15803d !important; }
.mk-ico-amber { background: #fef3c7; color: #b45309 !important; } .mk-ico-blue { background: #e0f2fe; color: #0369a1 !important; }
.mk-change { font-size: 0.62rem; font-weight: 800; color: #94a3b8; }
.mk-change.up { color: #16a34a; } .mk-change.down { color: #dc2626; }
.mk-change small { font-weight: 500; color: #94a3b8; }

.mk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0.9rem; align-items: start; }
.mk-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 62px 70px 50px 64px; align-items: center; gap: 0.7rem; padding: 0.6rem 0.2rem; border-bottom: 1px solid #f1f2f6; }
.mk-row-main img { width: 13px; height: 13px; vertical-align: -2px; margin-left: 3px; }
.mk-stat { display: flex; flex-direction: column; font-size: 0.56rem; color: #94a3b8; text-align: right; }
.mk-stat strong { font-size: 0.74rem; color: var(--pv-text); }
.mk-upcoming ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mk-upcoming a { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem; border-radius: 10px; text-decoration: none; color: inherit; }
.mk-upcoming a:hover { background: #f5f7ff; }
.mk-up-date { flex: none; width: 40px; text-align: center; font-size: 0.95rem; font-weight: 800; color: #4f46e5; background: #eef0ff; border-radius: 9px; padding: 0.2rem 0; display: flex; flex-direction: column; line-height: 1.1; }
.mk-up-date small { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; }
.mk-up-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-up-main strong { font-size: 0.7rem; color: var(--pv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-up-main small { font-size: 0.6rem; color: #64748b; }
.mk-sub { font-size: 0.66rem; font-weight: 600; color: #94a3b8; }
.mk-perf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 0.8rem; }
.mk-perf-num { display: flex; flex-direction: column; padding: 0.6rem 0.8rem; border-radius: 12px; background: #f8fafc; }
.mk-perf-num > span:first-child { font-size: 0.64rem; font-weight: 700; color: #64748b; }
.mk-perf-num strong { font-size: 1.25rem; font-weight: 800; color: var(--pv-text); }
.mk-chart svg { width: 100%; height: 170px; display: block; overflow: visible; }
.mk-grid-line { stroke: #eef0f5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mk-line-reach, .mk-line-eng { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mk-line-reach { stroke: #6366f1; } .mk-line-eng { stroke: #10b981; }
.mk-legend { display: flex; gap: 1rem; font-size: 0.64rem; font-weight: 700; color: #475569; margin-bottom: 0.3rem; }
.mk-legend span::before { content: ""; display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; }
.mk-legend em { margin-left: auto; font-weight: 500; font-style: normal; color: #94a3b8; }
.mk-l-reach::before { background: #6366f1; } .mk-l-eng::before { background: #10b981; }
.mk-axis { display: flex; justify-content: space-between; font-size: 0.58rem; color: #94a3b8; margin-top: 0.3rem; }

@media (max-width: 1100px) {
    .mk-grid { grid-template-columns: 1fr; }
    .mk-kpis, .mk-perf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .cp2-plan { flex-wrap: wrap; }
    .cp2-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp2-row { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 0.3rem; }
    .cp2-row .cp2-row-date { grid-column: 2; flex-direction: row; gap: 0.3rem; }
    .cp2-row .mm-status { grid-column: 3; grid-row: 1; }
    .cp2-row .mp-btn { grid-column: 3; grid-row: 2; }
    .mk-row { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 0.3rem; }
    .mk-row .mm-status { grid-column: 3; grid-row: 1; }
    .mk-row .mk-stat { grid-row: 2; text-align: left; flex-direction: row; gap: 0.25rem; align-items: baseline; }
    .mk-row .mk-stat-reach { grid-column: 2; }
    .mk-row .mk-stat-more { display: none; }
    .mk-row .mp-btn { grid-column: 3; grid-row: 2; }
    .cp2-row-ico { width: 36px; height: 36px; }
}

/* ---- Channels: linked-elsewhere / notes, Meta actions, page picker, WhatsApp by number ---- */
.settings-channel-alert { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; padding: 0.7rem 0.9rem; border-radius: 12px; font-size: 0.74rem; margin-bottom: 0.75rem; }
.settings-channel-alert.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.settings-channel-alert.note { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.settings-channel-alert .settings-connect-btn { flex: none; }
.settings-meta-subname small { display: block; font-size: 0.62rem; font-weight: 600; color: #64748b; }
.settings-meta-hint { margin: 0.6rem 0 0; padding: 0.55rem 0.7rem; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 0.66rem; line-height: 1.45; }
.settings-meta-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.settings-meta-actions form { margin: 0; }
.cm-page-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid var(--pv-border); border-radius: 10px; }
.cm-page-row > span { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cm-page-row.taken { background: #f8fafc; }
.cm-page-row.taken strong { color: #94a3b8; }
.cm-page-row small { font-size: 0.66rem; color: #b45309; }
.cm-wa-form { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.9rem; max-width: 380px; }
.cm-wa-form label { font-size: 0.74rem; font-weight: 700; }
.cm-wa-form small { font-size: 0.64rem; color: #64748b; }
.cm-wa-form .btn { align-self: flex-start; margin-top: 0.3rem; }

/* Settings → Password: forgot / set a password */
.settings-password-hint { margin: 0.9rem 0 0; font-size: 0.72rem; color: #64748b; }
.settings-password-hint a { color: #4f46e5; font-weight: 700; }

/* Posts: what it says (its opening line) and the expiry warning */
.pd-headline { margin: 0.2rem 0 0.4rem; font-size: 0.8rem; font-style: italic; color: #475569; }
.pd-expiry { margin: 0 0 0.75rem; padding: 0.6rem 0.85rem; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 0.76rem; font-weight: 700; }
.ap-expiry { display: block; margin-top: 0.25rem; font-size: 0.68rem; font-weight: 700; color: #b45309; }
.mk-row-main .mk-row-headline { font-size: 0.64rem; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* My Marketing: the numbers open their list; expired posts can be brought back or posted now */
a.mk-kpi { transition: border-color 0.15s, box-shadow 0.15s; }
a.mk-kpi:hover { border-color: #a5b4fc; box-shadow: 0 6px 18px rgba(79, 70, 229, 0.1); }
.rd-expired-now { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; font-size: 0.72rem; color: #475569; }
.rs-self-post { margin-top: 0.75rem; }
.rs-self-post > summary { cursor: pointer; font-size: 0.76rem; font-weight: 800; color: #4f46e5; margin-bottom: 0.6rem; }

/* Business details: filled-in suggestions and the fill-in buttons */
.kb-suggested { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.45rem; border-radius: 99px; background: #fef3c7; color: #b45309; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.02em; vertical-align: middle; }
.kb-suggest-banner { margin: 0.75rem 0; padding: 0.7rem 0.9rem; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; font-size: 0.74rem; line-height: 1.5; }
.kb-autofill { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.75rem 0 0.25rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: #f5f7ff; border: 1px dashed #c7d2fe; }
.kb-autofill form { display: flex; gap: 0.4rem; align-items: center; margin: 0; }
.kb-autofill-site input { min-width: 220px; padding: 0.45rem 0.7rem; border: 1px solid var(--pv-border); border-radius: 10px; font-size: 0.72rem; }
.kb-autofill > span { font-size: 0.64rem; color: #64748b; flex-basis: 100%; }

/* Post text: "Write it for me" */
.rs-write-for-me { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 0.8rem; padding: 0.8rem 1rem; border-radius: 12px; background: linear-gradient(135deg, #f5f3ff, #eef2ff); border: 1px solid #ddd6fe; }
.rs-write-for-me > div { display: flex; flex-direction: column; gap: 0.15rem; }
.rs-write-for-me strong { font-size: 0.8rem; color: #3730a3; }
.rs-write-for-me span { font-size: 0.68rem; color: #475569; }
.rs-draft-note { font-size: 0.74rem; }

/* Sign-up: bring your existing marketing, and the "Where you are today" card */
.bm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.bm-card { display: flex; flex-direction: column; gap: 0.55rem; }
.bm-card h2 { margin: 0; font-size: 1rem; }
.bm-card p { margin: 0; font-size: 0.82rem; color: #475569; }
.bm-icons { display: flex; gap: 0.4rem; font-size: 1.6rem; }
.bm-icons img { width: 30px; height: 30px; }
.bm-btn { align-self: flex-start; }
.bm-hint { font-size: 0.72rem; color: #94a3b8; }
.bm-connected { color: #15803d !important; font-weight: 700; }
.bm-site { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bm-site input { flex: 1; min-width: 200px; padding: 0.6rem 0.8rem; border: 1px solid #dfe3ee; border-radius: 10px; font-size: 0.86rem; }
.bm-ok { margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: 0.84rem; }
.bm-filled { margin-top: 1rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; font-size: 0.82rem; }
.bm-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.bm-skip { color: #64748b; font-weight: 600; text-decoration: none; }
.em-card { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid #ddd6fe; box-shadow: 0 6px 20px rgba(79, 70, 229, 0.06); }
.em-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.em-head strong { font-size: 0.95rem; }
.em-head span { font-size: 0.72rem; color: #94a3b8; }
.em-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.6rem; margin: 0.8rem 0; }
.em-stats > div { padding: 0.6rem 0.7rem; border-radius: 12px; background: #f5f7ff; display: flex; flex-direction: column; }
.em-stats b { font-size: 1.2rem; color: #312e81; }
.em-stats span { font-size: 0.68rem; color: #64748b; }
.em-line { margin: 0.3rem 0 0; font-size: 0.8rem; color: #334155; }
.em-tags { color: #4f46e5; }
.em-foot { margin: 0.7rem 0 0; font-size: 0.74rem; color: #64748b; font-style: italic; }
@media (max-width: 720px) { .bm-grid { grid-template-columns: 1fr; } }
.ob-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.6rem 1.2rem; border-radius: 12px; border: 1.5px solid #c7d2fe; background: #fff; color: #3730a3; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.ob-secondary:hover { background: #eef2ff; }

/* "Set up payment" pending item — the plan-approval alert, in blue. */
.payment-setup-alert { background: linear-gradient(90deg, #eef2ff, #f5f3ff); border-color: #c7d2fe; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.12); }
.payment-setup-alert .plan-approval-icon { background: #e0e7ff; box-shadow: none; }
.payment-setup-alert .plan-approval-text strong { color: #312e81; }
.payment-setup-alert .plan-approval-text span { color: #3730a3; }
.payment-setup-alert .plan-approval-btn { background: linear-gradient(135deg, #4f46e5, #6366f1); box-shadow: 0 6px 14px rgba(79, 70, 229, 0.28); border: none; cursor: pointer; }
.phi-meta { display: block; font-size: 0.72rem; color: #6b7280; margin-top: 0.15rem; }
.phi-meta a { color: #4f46e5; }

/* Switch business (logins that belong to more than one) */
.sb-switch { margin-top: 0.15rem; }
.sb-switch summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.55rem; border-radius: 9px; font-size: 0.66rem; font-weight: 600; color: #1e293b; cursor: pointer; list-style: none; }
.sb-switch summary::-webkit-details-marker { display: none; }
.sb-switch summary:hover { background: #f1f2ff; color: #3730a3; }
.sb-switch summary svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #6366f1; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-switch form { margin: 0; }
.sb-switch button { display: block; width: 100%; text-align: left; padding: 0.42rem 0.55rem 0.42rem 2rem; border: 0; background: none; border-radius: 9px; font: inherit; font-size: 0.64rem; font-weight: 600; color: #334155; cursor: pointer; }
.sb-switch button:hover { background: #f1f2ff; color: #3730a3; }

/* Post detail: edit button, posting mode and the Scheduled step's date edit */
.pd-edit-btn, .pf-edit { font: inherit; font-size: 0.68rem; font-weight: 800; color: var(--pv-indigo); background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 99px; padding: 0.15rem 0.6rem; cursor: pointer; }
.pd-edit-btn { margin-left: auto; }
.pd-edit-btn:hover, .pf-edit:hover { background: #e0e7ff; }
.pf-edit { margin-top: 0.2rem; padding: 0.05rem 0.5rem; font-size: 0.6rem; }
.pd-mode { display: flex; flex-direction: column; gap: 0.2rem; }
.pd-mode-form { margin: 0; }
.pd-mode-btn { font: inherit; font-size: 0.68rem; font-weight: 700; color: var(--pv-indigo); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; text-align: left; }
.pd-mode-note { font-style: normal; font-size: 0.68rem; color: #64748b; }
.pb-card-title { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; }
[hidden] { display: none !important; }

/* ---- Signed-in pages: same size and framing as the home page ----
   The page is laid out at 1536px wide and scaled to the window (see the script in _Layout); when the
   window is wider than the page it stands as a framed card on a soft backdrop. */
body:has(.dashboard-hero) {
  background:
    radial-gradient(1000px 640px at 0% 0%, rgba(120, 140, 255, .20), transparent 62%),
    radial-gradient(900px 640px at 100% 100%, rgba(167, 139, 250, .20), transparent 62%),
    radial-gradient(800px 560px at 100% 0%, rgba(96, 165, 250, .16), transparent 62%),
    radial-gradient(800px 560px at 0% 100%, rgba(52, 211, 153, .10), transparent 62%),
    linear-gradient(180deg, #eef1fd, #e8edfb);
  background-attachment: fixed;
}
.dashboard-hero { max-width: 1536px; margin: 0 auto; transition: box-shadow .2s; }
.dashboard-hero .app-shell.full-bleed { min-height: calc(100vh / var(--z, 1)); }
.dashboard-hero.is-framed { box-shadow: 0 0 0 1px rgba(110, 120, 200, .16), 0 28px 80px rgba(50, 60, 150, .20); }
@media (max-width: 1180px) {
  body:has(.dashboard-hero) { background: var(--pv-bg); }
  .dashboard-hero.is-framed { box-shadow: none; }
}


/* ---- A page shown inside another (the Team and Ad Budget tabs in Settings): content only, no menu or title bar ---- */
.settings-embed { display: block; width: 100%; min-height: 320px; border: 0; background: transparent; opacity: 0; transition: opacity .15s; }
.settings-embed.is-ready { opacity: 1; }
body.embedded { background: transparent !important; }
body.embedded .app-sidebar, body.embedded .sidebar-backdrop, body.embedded .app-topbar,
body.embedded .impersonation-banner, body.embedded .site-footer { display: none !important; }
body.embedded .dashboard-hero { zoom: 1 !important; max-width: none; margin: 0; box-shadow: none; }
body.embedded .dashboard-hero .app-shell.full-bleed { min-height: 0; }
body.embedded .app-main { padding: 0; }

/* ---- Left menu: the same size on the home page and every inner page ----
   The pages are zoomed to fit the window so the menu is counter-zoomed to one shared
   scale (--sz, set in the layout) and sized in the home page's own pixels. */
.app-sidebar, .hn-side { zoom: calc(var(--sz, 1) / var(--z, 1)); }
.app-sidebar { width: 272px; }
.app-sidebar .sb-business { zoom: 1.15; }
.app-sidebar .sidebar-header { padding: 22px 29px 0; }
.app-sidebar .sidebar-logo-img { height: 42px; margin-left: -6px; }
.app-sidebar .sidebar-tagline { font-size: 13px; line-height: 1.25; white-space: nowrap; margin: 10px 0 14px; }
.app-sidebar .sidebar-sticky { padding: 14px 12px 24px; }
.sidebar-nav { gap: 3px; }
.sidebar-nav .snav-item a { gap: 20px; height: 40px; padding: 0 12px 0 18px; border-radius: 12px; font-size: 13.9px; }
.sidebar-nav .snav-item svg { width: 24px; height: 24px; }
.snav-badge { min-width: 22px; height: 22px; font-size: 12px; }
@media (max-width: 900px) { .app-sidebar, .hn-side { zoom: 1; } .app-sidebar .sb-business { zoom: 1; } }

/* ---- Signed-in pages: zoom is applied from the first paint (the scale is set in the layout's head), and the text is
   four points larger than the base. ---- */
html:has(.dashboard-hero) { font-size: 20px; }
.dashboard-hero { zoom: var(--z, 1); }

/* ---- Left menu: tighter at the top ---- */
.app-sidebar .sidebar-header { padding-top: 12px; }
.app-sidebar .sidebar-tagline { margin-bottom: 8px; }
.app-sidebar .sb-business { margin: 0 12px 2px; }
.app-sidebar .sidebar-sticky { padding-top: 4px; }

/* ---- Title row: the same sizes and content as the home page's (greeting, help, bell, name box) ----
   Sized in the home page's pixels and scaled by --k so it matches at any window width. */
@media (min-width: 561px) {
  .app-topbar { --k: calc(var(--sz, 1) / var(--z, 1)); align-items: center; padding-top: calc(6px * var(--k)); margin-bottom: calc(10px * var(--k)); }
  .app-topbar h2 { font-size: calc(21.4px * var(--k)); line-height: calc(30px * var(--k)); font-weight: 800; letter-spacing: -0.01em; color: #0f1535; margin: 0; }
  .app-topbar .subtext { font-size: calc(13.4px * var(--k)); line-height: 1.35; color: #6b7190; margin-top: calc(2px * var(--k)); }
  .topbar-actions { gap: calc(22px * var(--k)); flex-wrap: nowrap; }
  .icon-btn { width: calc(38px * var(--k)); height: calc(38px * var(--k)); border: 0; border-radius: 50%; box-shadow: 0 2px 8px rgba(60, 70, 150, .12); color: #1f1d4f; }
  .icon-btn svg { width: calc(20px * var(--k)); height: calc(20px * var(--k)); }
  .icon-btn .bell-dot { top: calc(5px * var(--k)); right: calc(6px * var(--k)); width: calc(9px * var(--k)); height: calc(9px * var(--k)); border: calc(2px * var(--k)) solid #fff; box-sizing: content-box; }
  .user-chip { gap: calc(10px * var(--k)); padding: 0; }
  .user-chip:hover { background: none; }
  .user-chip .avatar { width: calc(42px * var(--k)); height: calc(42px * var(--k)); font-size: calc(17px * var(--k)); font-weight: 700; background: linear-gradient(135deg, #7c3aed, #c04fd0); }
  .user-chip .who { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
  .user-chip .who strong { font-size: calc(15px * var(--k)); font-weight: 500; color: #0f1535; }
  .user-chip .who span { font-size: calc(13px * var(--k)); color: #6b7190; }
  .user-chip .who-chevron { width: calc(18px * var(--k)); height: calc(18px * var(--k)); margin-left: calc(6px * var(--k)); }
}

/* ---- Left menu foot: the status, help and Contact Support block, pinned to the bottom of the column ---- */
@media (min-width: 881px) {
  .app-sidebar { position: sticky; top: 0; align-self: flex-start; height: calc(100vh / var(--sz, 1)); overflow-y: auto; }
  .app-sidebar .sidebar-sticky { position: static; flex: 1 1 auto; }
}
.sbf { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding: 16px 4px 0; }
.sbf-live { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #d3f0e1; border-radius: 12px; background: #f0fbf5; }
.sbf-dot { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
.sbf-live div { display: flex; flex-direction: column; gap: 1px; }
.sbf-live b { font-size: 10.5px; line-height: 1.25; font-weight: 700; color: #14532d; }
.sbf-live span:not(.sbf-dot) { font-size: 9px; line-height: 1.3; color: #4b7a5f; }
.sbf-help { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f3f4fd; }
.sbf-help-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: #e2e6fc; font-size: 17px; }
.sbf-help div { display: flex; flex-direction: column; }
.sbf-help b { font-size: 11.5px; font-weight: 700; color: #0f1535; }
.sbf-help span:not(.sbf-help-ico) { font-size: 10px; color: #6b7190; }
.sbf .sbf-btn { display: flex; align-items: center; justify-content: center; height: 40px; border: 1.5px solid #c9c4fb; border-radius: 10px; background: #fff; color: #3a2fc9; font-size: 11.5px; font-weight: 600; text-decoration: none; }
.sbf .sbf-btn:hover { background: #f7f6ff; }

/* ---- My Marketing: the four numbers sit with the activity list; the buttons head the right-hand column ---- */
.mk-main, .mk-side { display: grid; gap: 0.9rem; min-width: 0; align-content: start; }
.mk-actions { display: grid; gap: 0.5rem; padding: 0.8rem; }
.mk-actions .mp-btn { display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; }

/* ---- My Marketing: lighter, calmer numbers; clickable rows; the ads (PPC) card and rows ---- */
.mk-kpi { position: relative; overflow: hidden; align-items: center; padding: 0.7rem 0.9rem; border-color: transparent; }
.mk-kpi::after { content: ""; position: absolute; right: -22px; bottom: -30px; width: 96px; height: 96px; border-radius: 50%; opacity: 0.55; pointer-events: none; }
.mk-kpi:nth-child(1) { background: linear-gradient(135deg, #faf8ff, #f1ecff); } .mk-kpi:nth-child(1)::after { background: radial-gradient(circle, #e2d9ff, transparent 70%); }
.mk-kpi:nth-child(2) { background: linear-gradient(135deg, #f6fdf8, #e9f9ee); } .mk-kpi:nth-child(2)::after { background: radial-gradient(circle, #cdf0d8, transparent 70%); }
.mk-kpi:nth-child(3) { background: linear-gradient(135deg, #fffdf6, #fff6df); } .mk-kpi:nth-child(3)::after { background: radial-gradient(circle, #fbe6ac, transparent 70%); }
.mk-kpi:nth-child(4) { background: linear-gradient(135deg, #f6fbff, #e8f4fd); } .mk-kpi:nth-child(4)::after { background: radial-gradient(circle, #cfe8fa, transparent 70%); }
.mk-kpi.mk-kpi-alert { border-color: #fcd34d; }
.mk-kpi > div { position: relative; z-index: 1; }
.mk-kpi small, .mk-kpi .mk-change { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-kpi strong { font-size: 1.25rem; }
.mk-row { text-decoration: none; color: inherit; grid-template-columns: 40px minmax(0, 1fr) auto 62px 70px 50px 16px; border-radius: 10px; padding-left: 0.4rem; padding-right: 0.4rem; }
.mk-row:hover { background: #f5f7ff; }
.mk-go { color: #a5b4fc; font-size: 1.3rem; line-height: 1; }
.mk-row:hover .mk-go { color: #6366f1; }
.cp2-ico-ad { background: #ede9fe; }
.mk-row-ad { grid-template-columns: 40px minmax(0, 1fr) auto 150px 16px; }
.mk-stat-ad { min-width: 0; }
.mk-ads { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem; text-decoration: none; color: inherit; background: linear-gradient(135deg, #fff, #f6f3ff); }
.mk-ads:hover { border-color: #c7cbf5; }
.mk-ads-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: #ede9fe; font-size: 1rem; }
.mk-ads-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.mk-ads-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.mk-ads-top b { font-size: 0.72rem; color: var(--pv-text); }
.mk-ads-top em { font-style: normal; font-size: 0.72rem; font-weight: 800; color: var(--pv-text); }
.mk-ads-top small, .mk-ads-main > small { font-size: 0.6rem; font-weight: 500; color: #94a3b8; }
.mk-ads-bar { height: 6px; border-radius: 99px; background: #e8e4fb; overflow: hidden; }
.mk-ads-bar i { display: block; height: 100%; border-radius: 99px; background: #6366f1; }
.mk-tabs { flex-wrap: nowrap; overflow-x: auto; }
.mk-tabs button { white-space: nowrap; }

/* ---- My Marketing: the four numbers. Icon at the left, the count with its title beside it, the note across the full width below ---- */
.mk-tabs { overflow-y: hidden; }
.mk-kpi { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "ico num" "ico title" "note note"; column-gap: 0.65rem; row-gap: 0; align-items: center; padding: 0.7rem 0.9rem 0.6rem; }
.mk-kpi > .mk-kpi-ico { grid-area: ico; align-self: center; }
.mk-kpi > strong { grid-area: num; font-size: 1.4rem; line-height: 1.1; }
.mk-kpi > .mk-kpi-title { grid-area: title; font-size: 0.7rem; font-weight: 700; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-kpi > .mk-kpi-note { grid-area: note; margin-top: 0.45rem; font-size: 0.64rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.mk-kpi .mk-kpi-note .mk-change { font-size: 0.64rem; }
.mk-kpi .mk-kpi-note .mk-change small { color: #64748b; }
.mk-ads-panel { padding-top: 0.2rem; }
.mk-ads-frame { min-height: 420px; }

/* ---- Plan & Usage: plan details popup, and the plan chosen when cancelling ---- */
.pu-detail-link { border: 0; background: none; padding: 0; margin-left: 0.5rem; font-size: 0.68rem; font-weight: 700; color: #4f46e5; cursor: pointer; text-decoration: underline; }
.pu-up-card .pu-detail-link { display: inline-block; margin: 0 0 0.6rem; }
.pu-dialog { border: 0; border-radius: 18px; padding: 1.4rem 1.5rem; width: min(480px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3); }
.pu-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.pu-dialog h3 { margin: 0 0 0.2rem; font-size: 1.05rem; color: var(--pv-text); }
.pu-dialog-sub { margin: 0 0 0.6rem; font-size: 0.74rem; color: #64748b; }
.pu-dialog-close { position: absolute; top: 0.6rem; right: 0.7rem; }
.pu-dialog-close button { border: 0; background: none; font-size: 1rem; color: #94a3b8; cursor: pointer; }
.pu-dialog .pu-up-btn { width: 100%; margin-top: 0.9rem; }
.pu-cancel-form { display: grid; gap: 0.5rem; }
.pu-cancel-label { font-size: 0.7rem; font-weight: 700; color: #475569; }
.pu-cancel-opt { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.5rem 0.6rem; border: 1px solid var(--pv-border); border-radius: 10px; cursor: pointer; }
.pu-cancel-opt:has(input:checked) { border-color: #6366f1; background: #f5f7ff; }
.pu-cancel-opt span { display: flex; flex-direction: column; font-size: 0.74rem; }
.pu-cancel-opt em { font-style: normal; color: #64748b; font-size: 0.68rem; }
.pu-cancel-opt small { color: #94a3b8; font-size: 0.62rem; }
.pu-dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.6rem; }
.pu-dialog-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.pu-dialog .pu-cancel-form { max-height: 60vh; overflow-y: auto; }

/* ---- My Marketing rows on phones: title and details stay readable (this comes after the desktop row rules so it wins) ---- */
@media (max-width: 900px) {
    .mk-row, .mk-row-ad { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 0.25rem; column-gap: 0.6rem; }
    .mk-row > :first-child { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
    .mk-row .mk-row-main { grid-column: 2; grid-row: 1; }
    .mk-row .mk-row-main strong, .mk-row .mk-row-main span { white-space: normal; }
    .mk-row .mk-go { grid-column: 3; grid-row: 1; align-self: center; }
    .mk-row .mm-status { grid-column: 2; grid-row: 2; justify-self: start; }
    .mk-row .mk-stat { grid-column: 3; grid-row: 2; flex-direction: row; gap: 0.25rem; align-items: baseline; text-align: right; }
    .mk-row .mk-stat-more { display: none; }
}


/* ============================================================
   Settings: rich tabs
   ============================================================ */
.settings-tabs { display: flex; flex-wrap: nowrap; gap: 0.6rem; border: 0; overflow-x: auto; padding: 0.15rem 0.1rem 0.5rem; scrollbar-width: thin; }
.settings-tabs .nav-item { flex: 0 0 auto; }
.settings-tabs .stab { position: relative; display: flex; align-items: center; gap: 0.65rem; text-align: left; border: 1px solid var(--pv-border); border-radius: 14px; background: #fff; padding: 0.6rem 0.95rem 0.6rem 0.65rem; color: var(--pv-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
.settings-tabs .stab:hover { border-color: var(--c); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); transform: translateY(-1px); color: var(--pv-text); }
.settings-tabs .stab.active { border-color: var(--c); background: linear-gradient(135deg, var(--s), #fff 70%); box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 22%, transparent); color: var(--pv-text); }
.settings-tabs .stab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--c); transform: scaleX(0); transition: transform .2s; }
.settings-tabs .stab.active::after { transform: scaleX(1); }
.stab-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--s); color: var(--c); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.stab-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stab.active .stab-ico { background: var(--c); color: #fff; }
.stab-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.stab-text strong { font-size: 0.8rem; font-weight: 800; }
.stab-text small { font-size: 0.62rem; color: var(--pv-muted); font-weight: 500; }
.settings-tabs .settings-tab-badge { position: absolute; top: -7px; right: 8px; margin: 0; }
@media (max-width: 700px) {
  .settings-tabs { gap: 0.45rem; }
  .settings-tabs .stab { padding: 0.5rem 0.7rem 0.5rem 0.5rem; }
  .stab-text small { display: none; }
  .stab-ico { width: 32px; height: 32px; }
}

/* ============================================================
   Account menu: the person's own part opens their profile
   ============================================================ */
a.account-menu-profile { text-decoration: none; color: inherit; position: relative; border-radius: 10px; transition: background .12s; }
a.account-menu-profile:hover { background: #f3f4ff; }
.account-menu-go { margin-left: auto; align-self: center; font-size: 0.6rem; font-weight: 800; color: var(--pv-indigo); white-space: nowrap; }

/* ============================================================
   Profile
   ============================================================ */
.pf { max-width: 1000px; margin: 0 auto; padding: 0.4rem 0 2rem; }
.pf-hero { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; margin-bottom: 1rem; border-radius: 18px; background: linear-gradient(120deg, #eef0ff, #f5f3ff 60%, #fdf2f8); border: 1px solid #e4e6fb; }
.pf-avatar { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font: 800 1.5rem var(--font-heading); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35); }
.pf-hero h1 { margin: 0; font-family: var(--font-heading); font-size: 1.25rem; }
.pf-hero p { margin: 0.15rem 0 0; font-size: 0.74rem; color: var(--pv-muted); }
.pf-role { background: #fff; border: 1px solid #dcdffb; color: var(--pv-indigo); font-weight: 800; border-radius: 99px; padding: 0.05rem 0.5rem; font-size: 0.64rem; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.pf-card { background: #fff; border: 1px solid var(--pv-border); border-radius: 18px; padding: 1.1rem 1.2rem; }
.pf-card.pf-wide { grid-column: 1 / -1; }
.pf-card header { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.9rem; }
.pf-card header h2 { margin: 0; font-family: var(--font-heading); font-size: 0.95rem; }
.pf-card header p { margin: 0.1rem 0 0; font-size: 0.68rem; color: var(--pv-muted); }
.pf-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.pf-card form { display: grid; gap: 0.35rem; }
.pf-card label { font-size: 0.68rem; font-weight: 700; color: #64748b; margin-top: 0.3rem; }
.pf-card label small { font-weight: 500; color: #94a3b8; }
.pf-card input[type=text], .pf-card input[type=password] { font: inherit; font-size: 0.8rem; padding: 0.6rem 0.75rem; border: 1px solid var(--pv-border); border-radius: 10px; width: 100%; box-sizing: border-box; }
.pf-card input:focus { outline: 2px solid rgba(79, 70, 229, 0.25); border-color: var(--pv-indigo); }
.pf-card input:disabled { background: #f8fafc; color: #94a3b8; }
.pf-card .pv-btn { justify-self: start; margin-top: 0.6rem; }
.pf-note { font-size: 0.7rem; color: var(--pv-muted); margin: 0.7rem 0 0; }
.pf-table { overflow-x: auto; }
@media (max-width: 800px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-hero { padding: 0.9rem; }
  .pf-table table, .pf-table tbody, .pf-table tr, .pf-table td { display: block; width: 100%; }
  .pf-table thead { display: none; }
  .pf-table tr { border-top: 1px solid var(--pv-border); padding: 0.5rem 0; }
  .pf-table td { border: 0; padding: 0.15rem 0; display: flex; justify-content: space-between; gap: 0.6rem; }
  .pf-table td::before { content: attr(data-label); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; }
}

/* ============================================================
   Team
   ============================================================ */
.tm { max-width: 1100px; margin: 0 auto; padding: 0.3rem 0 2rem; }
.tm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tm-head h1 { margin: 0; font-family: var(--font-heading); font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; }
.tm-head p { margin: 0.25rem 0 0; font-size: 0.72rem; color: var(--pv-muted); max-width: 640px; }
.tm-count { background: #eef0ff; color: var(--pv-indigo); border-radius: 99px; font-size: 0.7rem; padding: 0.1rem 0.55rem; font-weight: 800; }
.tm-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.6rem; margin-bottom: 1.1rem; }
.tm-role { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem 0.8rem; border-radius: 14px; background: var(--s); border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); }
.tm-role .ico, .tm-opt .ico { width: 34px; height: 34px; flex: none; border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
.tm-role strong { display: block; font-size: 0.78rem; color: var(--c); }
.tm-role small { font-size: 0.64rem; color: #475569; line-height: 1.35; display: block; }
.tm-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.8rem; }
.tm-card { background: #fff; border: 1px solid var(--pv-border); border-top: 4px solid var(--c); border-radius: 16px; padding: 0.9rem; display: grid; gap: 0.7rem; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); }
.tm-card.locked { opacity: 0.8; border-top-color: #cbd5e1; }
.tm-card .who { display: flex; gap: 0.7rem; align-items: center; }
.tm-card .av { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--s); color: var(--c); font: 800 1.05rem var(--font-heading); display: inline-flex; align-items: center; justify-content: center; }
.tm-card .txt { flex: 1; min-width: 0; display: grid; }
.tm-card .txt strong { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-card .txt small { font-size: 0.66rem; color: var(--pv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-card .you { font-style: normal; font-size: 0.56rem; font-weight: 800; background: #fef3c7; color: #b45309; border-radius: 99px; padding: 0.05rem 0.4rem; margin-left: 0.4rem; text-transform: uppercase; }
.tm-card .rolechip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.64rem; font-weight: 800; background: var(--s); color: var(--c); border-radius: 99px; padding: 0.2rem 0.6rem; white-space: nowrap; }
.tm-card .warn { margin: 0; font-size: 0.66rem; color: #b45309; font-weight: 700; }
.tm-card .acts { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem; border-top: 1px dashed var(--pv-border); padding-top: 0.7rem; }
.tm-card .acts form { margin: 0; }
.tm-card .rolepick label { display: grid; gap: 0.2rem; font-size: 0.58rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.tm-card .rolepick select { font: inherit; font-size: 0.74rem; font-weight: 700; padding: 0.4rem 1.6rem 0.4rem 0.6rem; border: 1px solid var(--pv-border); border-radius: 9px; background: #fff; color: var(--pv-text); text-transform: none; letter-spacing: 0; }
.tm-remove { border: 1px solid #fecaca; background: #fff5f5; color: #dc2626; font: inherit; font-size: 0.68rem; font-weight: 700; border-radius: 9px; padding: 0.42rem 0.8rem; cursor: pointer; }
.tm-remove:hover { background: #fee2e2; }
.tm-modal { border: 0; border-radius: 20px; padding: 0; width: min(520px, 94vw); box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35); }
.tm-modal::backdrop { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); }
.tm-modal header { display: flex; align-items: center; padding: 1.1rem 1.3rem 0; }
.tm-modal header h3 { margin: 0; flex: 1; font-family: var(--font-heading); font-size: 1.05rem; }
.tm-modal .x { border: 0; background: #f1f5f9; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; color: #64748b; }
.tm-modal form { display: grid; gap: 0.7rem; padding: 1rem 1.3rem 1.3rem; }
.tm-modal label { display: grid; gap: 0.25rem; font-size: 0.68rem; font-weight: 700; color: #64748b; }
.tm-modal label small { font-weight: 500; color: #94a3b8; }
.tm-modal input[type=email], .tm-modal input[type=text] { font: inherit; font-size: 0.8rem; padding: 0.6rem 0.75rem; border: 1px solid var(--pv-border); border-radius: 10px; }
.tm-pick { border: 0; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.tm-pick legend { font-size: 0.68rem; font-weight: 700; color: #64748b; margin-bottom: 0.25rem; padding: 0; }
.tm-opt { display: flex !important; flex-direction: row; align-items: center; gap: 0.7rem !important; padding: 0.6rem 0.7rem; border: 1px solid var(--pv-border); border-radius: 13px; cursor: pointer; color: var(--pv-text) !important; }
.tm-opt:has(input:checked) { border-color: var(--c); background: var(--s); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 18%, transparent); }
.tm-opt input { flex: none; accent-color: var(--c); }
.tm-opt .txt { display: grid; }
.tm-opt .txt strong { font-size: 0.78rem; color: var(--c); }
.tm-opt .txt small { font-size: 0.64rem; color: #475569; font-weight: 500; }
.tm-modal .pv-btn { justify-self: start; }
.tm-fine { margin: 0; font-size: 0.64rem; color: #94a3b8; }
@media (max-width: 560px) { .tm-people { grid-template-columns: 1fr; } .tm-head .pv-btn { width: 100%; } }

/* Approvals lives in the business box now */
.sb-business-menu a.active { background: #eef0ff; color: var(--pv-indigo); font-weight: 800; }
.sb-business summary .snav-badge { margin-left: 0.15rem; flex: none; }

/* ============================================================
   Calendar: a smaller, richer wall calendar, with layers
   ============================================================ */
.calx { max-width: 1120px; background: radial-gradient(circle at 12% 0%, #f3f0ff 0, transparent 38%), radial-gradient(circle at 100% 30%, #eaf6ff 0, transparent 34%); border-radius: 22px; padding: 0.6rem 0.6rem 1.2rem; }
.calx-header { padding: 0.7rem 1rem; margin-bottom: 0.6rem; border-radius: 16px; position: relative; overflow: hidden; }
.calx-header::after { content: ""; position: absolute; right: -30px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%); pointer-events: none; }
.calx-title h3 { font-size: 1.05rem; }
.calx-title-icon { width: 38px; height: 38px; }
.calx-layers { display: inline-flex; gap: 0.25rem; padding: 0.22rem; background: #fff; border: 1px solid #dfe2ef; border-radius: 13px; margin-bottom: 0.7rem; box-shadow: 0 2px 8px rgba(30, 33, 48, 0.05); }
.calx-layer { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.85rem; border-radius: 10px; font-size: 0.68rem; font-weight: 800; color: #64748b; text-decoration: none; }
.calx-layer:hover { color: var(--pv-indigo); background: #f5f6ff; }
.calx-layer.on { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); }
.calx-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.55rem; margin-bottom: 0.7rem; }
.calx-stat { padding: 0.5rem 0.8rem; border-radius: 12px; }
.calx-stat strong { font-size: 1.05rem; }
.calx-stat.teal::before { background: #0d9488; }
.calx-stat.red::before { background: #dc2626; }
.calx-body { grid-template-columns: minmax(0, 1fr) 250px; gap: 0.8rem; }
/* The month sits in a framed "page": heavier borders, a binding strip along the top. */
.calx-frame { position: relative; padding-top: 14px; border-radius: 20px; background: linear-gradient(180deg, #4f46e5 0, #6d28d9 14px, #fff 14px); border: 2px solid #c7ccf0; box-shadow: 0 12px 28px rgba(79, 70, 229, 0.12); overflow: hidden; }
.calx-frame::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 8px; background: radial-gradient(circle at 10px 4px, #fff 0 3px, transparent 3.5px) 0 0 / 28px 8px repeat-x; opacity: 0.85; }
.calx-grid { border: 0; border-radius: 0; box-shadow: none; gap: 1px; background: #d9dcf0; }
.calx-dow { padding: 0.4rem 0.3rem; background: linear-gradient(180deg, #f1f2ff, #e8eaff); border-bottom: 2px solid #c7ccf0; }
.calx-cell { min-height: 82px; padding: 0.3rem 0.35rem 0.4rem; }
.calx-cell.today { box-shadow: inset 0 0 0 2px var(--pv-indigo); background: linear-gradient(160deg, #f1efff, #fff); }
.calx-date { width: 22px; height: 22px; font-size: 0.6rem; }
.calx-count { font-size: 0.52rem; font-weight: 800; background: #eef0ff; color: #4f46e5; border-radius: 99px; padding: 0.02rem 0.38rem; }
.calx-event { font-size: 0.54rem; padding: 0.14rem 0.35rem; border-radius: 6px; }
.calx-event.sales-followup, .calx-swatch.sales-followup, .calx-agenda-status.sales-followup { background: #ccfbf1; color: #0f766e; border-color: #14b8a6; }
.calx-event.sales-task, .calx-swatch.sales-task, .calx-agenda-status.sales-task { background: #fef9c3; color: #854d0e; border-color: #eab308; }
.calx-event.sales-overdue, .calx-swatch.sales-overdue, .calx-agenda-status.sales-overdue { background: #fee2e2; color: #b91c1c; border-color: #ef4444; }
.calx-agenda { padding: 0.75rem; border-radius: 16px; border: 2px solid #e1e4f5; background: linear-gradient(180deg, #fff, #fafbff); }
.calx-agenda h4 { display: flex; align-items: center; gap: 0.4rem; }
.calx-agenda-date.sales { background: #ccfbf1; color: #0f766e; }
.calx-agenda-list li { border-left: 4px solid #c7ccf0; }
.calx-agenda-list li.sales { border-left-color: #14b8a6; }
@media (max-width: 1180px) { .calx-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .calx { padding: 0.3rem 0.2rem 1rem; } .calx-cell { min-height: 56px; } .calx-layers { display: flex; width: 100%; } .calx-layer { flex: 1; justify-content: center; padding: 0.42rem 0.4rem; } }


/* ============================================================
   To-do: summary, quick add, grouped list
   ============================================================ */
.td { max-width: 920px; margin: 0 auto; padding: 0.3rem 0 2rem; display: grid; gap: 0.9rem; }
.td svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.td-summary { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 0.7rem; align-items: stretch; }
.td-ring { position: relative; width: 92px; display: grid; place-items: center; background: #fff; border: 1px solid var(--pv-border); border-radius: 18px; padding: 0.5rem; }
.td-ring svg { width: 70px; height: 70px; transform: rotate(-90deg); grid-area: 1 / 1; }
.td-ring circle { fill: none; stroke-width: 7; }
.td-ring .bg { stroke: #eef0f7; }
.td-ring .fg { stroke: #16a34a; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.td-ring b { grid-area: 1 / 1; font: 800 0.95rem var(--font-heading); color: var(--pv-text); }
.td-ring small { position: absolute; bottom: 5px; font-size: 0.52rem; color: var(--pv-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.td-tile { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; padding: 0.7rem 0.9rem 0.7rem 3.4rem; border-radius: 18px; background: #fff; border: 1px solid var(--pv-border); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; overflow: hidden; }
a.td-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1); }
.td-tile .ico { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.td-tile strong { font: 800 1.45rem/1 var(--font-heading); color: var(--pv-text); }
.td-tile small { font-size: 0.64rem; font-weight: 700; color: var(--pv-muted); }
.td-tile.red .ico { background: #fee2e2; color: #dc2626; } .td-tile.red { background: linear-gradient(135deg, #fff, #fff5f5); }
.td-tile.amber .ico { background: #fef3c7; color: #d97706; } .td-tile.amber { background: linear-gradient(135deg, #fff, #fffbeb); }
.td-tile.blue .ico { background: #dbeafe; color: #2563eb; } .td-tile.blue { background: linear-gradient(135deg, #fff, #f3f8ff); }
.td-tile.green .ico { background: #dcfce7; color: #16a34a; } .td-tile.green { background: linear-gradient(135deg, #fff, #f2fcf5); }

.td-add { background: #fff; border: 1px solid var(--pv-border); border-radius: 18px; padding: 0.55rem; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); display: grid; gap: 0.5rem; }
.td-add:focus-within { border-color: #a5b4fc; box-shadow: 0 6px 22px rgba(99, 102, 241, 0.16); }
.td-add-top { display: flex; align-items: center; gap: 0.6rem; }
.td-add-top .plus { width: 34px; height: 34px; border-radius: 50%; background: #eef0ff; color: var(--pv-indigo); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: none; }
.td-add-top input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 0.95rem; font-weight: 600; background: transparent; padding: 0.35rem 0; }
.td-go { width: 38px; height: 38px; border-radius: 12px; border: 0; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; box-shadow: 0 6px 14px rgba(99, 102, 241, 0.35); flex: none; }
.td-add-opts { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; padding: 0 0.2rem 0.2rem 2.5rem; }
.td-chips { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.td-chip { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--pv-border); background: #f8fafc; color: #475569; font: inherit; font-size: 0.68rem; font-weight: 700; border-radius: 99px; padding: 0.32rem 0.7rem; cursor: pointer; }
.td-chip:hover, .td-chip.on { border-color: var(--pv-indigo); background: #eef0ff; color: var(--pv-indigo); }
.td-when { font: inherit; font-size: 0.68rem; border: 1px solid var(--pv-border); background: #fff; border-radius: 99px; padding: 0.28rem 0.6rem; color: #475569; }
.td-flags { display: inline-flex; gap: 0.2rem; background: #f1f5f9; border-radius: 99px; padding: 0.15rem; }
.td-flag { position: relative; width: 30px; height: 28px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; cursor: pointer; font-size: 0.95rem; }
.td-flag input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.td-flag.low:has(input:checked) { background: #fff; color: #64748b; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15); }
.td-flag.normal:has(input:checked) { background: #fff; color: #2563eb; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15); }
.td-flag.high:has(input:checked) { background: #fff; color: #dc2626; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15); }
.td-pick { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--pv-border); background: #fff; border-radius: 99px; padding: 0.18rem 0.3rem 0.18rem 0.6rem; color: #64748b; font-size: 0.9rem; }
.td-pick select { border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.68rem; font-weight: 700; color: #475569; max-width: 130px; cursor: pointer; }

.td-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.td-filters { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.td-filters button { border: 1px solid var(--pv-border); background: #fff; color: #475569; font: inherit; font-size: 0.7rem; font-weight: 700; border-radius: 99px; padding: 0.38rem 0.8rem; cursor: pointer; }
.td-filters button b { margin-left: 0.25rem; color: #94a3b8; }
.td-filters button:hover { border-color: var(--pv-indigo); }
.td-filters button.on { background: #1e1b4b; border-color: #1e1b4b; color: #fff; }
.td-filters button.on b { color: #c7d2fe; }
.td-mine { margin: 0; }
.td-switch { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 700; color: #475569; cursor: pointer; }
.td-switch input { position: absolute; opacity: 0; }
.td-switch .track { width: 34px; height: 20px; border-radius: 99px; background: #cbd5e1; position: relative; transition: background .15s; }
.td-switch .track i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform .15s; }
.td-switch input:checked + .track { background: var(--pv-indigo); }
.td-switch input:checked + .track i { transform: translateX(14px); }

.td-sec { background: #fff; border: 1px solid var(--pv-border); border-radius: 18px; overflow: hidden; border-left: 5px solid var(--a, #94a3b8); }
.td-sec[hidden] { display: none; }
.td-sec.red { --a: #ef4444; --b: #fee2e2; --t: #dc2626; } .td-sec.amber { --a: #f59e0b; --b: #fef3c7; --t: #d97706; }
.td-sec.blue { --a: #3b82f6; --b: #dbeafe; --t: #2563eb; } .td-sec.slate { --a: #94a3b8; --b: #f1f5f9; --t: #64748b; } .td-sec.green { --a: #22c55e; --b: #dcfce7; --t: #16a34a; }
.td-sec summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; }
.td-sec summary::-webkit-details-marker { display: none; }
.td-sec summary .ico { width: 30px; height: 30px; border-radius: 10px; background: var(--b); color: var(--t); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.td-sec summary b { font: 800 0.86rem var(--font-heading); color: var(--pv-text); }
.td-sec summary .n { background: var(--b); color: var(--t); font-size: 0.68rem; font-weight: 800; border-radius: 99px; padding: 0.05rem 0.55rem; }
.td-sec summary .chev { margin-left: auto; color: #94a3b8; transition: transform .15s; font-size: 1rem; }
.td-sec[open] summary .chev { transform: rotate(180deg); }
.td-list { list-style: none; margin: 0; padding: 0 0.5rem 0.5rem; display: grid; gap: 0.15rem; }
.td-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.5rem; border-radius: 12px; position: relative; transition: background .12s; }
.td-row:hover { background: #f8f9ff; }
.td-row + .td-row::before { content: ""; position: absolute; left: 2.7rem; right: 0.5rem; top: -0.08rem; border-top: 1px solid #f0f1f7; }
.td-row form { margin: 0; display: flex; }
.td-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; color: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: 0.8rem; transition: all .12s; flex: none; text-decoration: none; }
.td-check:hover { border-color: #22c55e; background: #dcfce7; color: #22c55e; }
.td-check.on { background: #22c55e; border-color: #22c55e; color: #fff; }
.td-check.follow { border-color: #99f6e4; background: #f0fdfa; color: #0d9488; }
.td-check.follow:hover { background: #ccfbf1; border-color: #14b8a6; }
.td-row.pri-high .td-check:not(.follow):not(.on) { border-color: #f87171; }
.td-row.pri-low .td-check:not(.follow):not(.on) { border-color: #e2e8f0; }
.td-main { flex: 1; min-width: 0; display: grid; gap: 0.25rem; }
.td-main b { font-size: 0.84rem; font-weight: 700; color: var(--pv-text); overflow-wrap: anywhere; }
.td-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.64rem; color: var(--pv-muted); }
.td-due { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 700; border-radius: 99px; padding: 0.1rem 0.5rem; background: #f1f5f9; color: #64748b; }
.td-due.late { background: #fee2e2; color: #dc2626; } .td-due.today { background: #fef3c7; color: #b45309; } .td-due.soon { background: #dbeafe; color: #1d4ed8; } .td-due.later { background: #f1f5f9; color: #475569; }
.td-tag { background: #ccfbf1; color: #0f766e; font-weight: 800; border-radius: 99px; padding: 0.1rem 0.5rem; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.03em; }
.td-lead { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; color: #475569; font-weight: 700; background: #f8fafc; border: 1px solid #e8ecf3; border-radius: 99px; padding: 0.05rem 0.5rem 0.05rem 0.1rem; }
.td-lead i { width: 18px; height: 18px; border-radius: 50%; background: #e0e7ff; color: #4338ca; font-style: normal; font-size: 0.55rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.td-lead:hover { border-color: var(--pv-indigo); color: var(--pv-indigo); }
.td-pri { display: inline-flex; font-size: 0.8rem; } .td-pri.high { color: #dc2626; } .td-pri.low { color: #94a3b8; }
.td-av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #818cf8, #6366f1); color: #fff; font-size: 0.62rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.td-x { border: 0; background: transparent; color: #cbd5e1; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; }
.td-row:hover .td-x, .td-x:focus { opacity: 1; }
.td-x:hover { background: #fee2e2; color: #dc2626; }
.td-row.done .td-main b { text-decoration: line-through; color: #94a3b8; font-weight: 600; }
.td-empty { display: grid; justify-items: center; gap: 0.35rem; text-align: center; padding: 2.2rem 1rem; background: #fff; border: 1px dashed #c7d2fe; border-radius: 20px; }
.td-empty svg { width: 110px; height: 110px; stroke-width: 0; }
.td-empty .a { fill: #eef2ff; } .td-empty .b { fill: #c7d2fe; } .td-empty .tick { fill: none; stroke: #4f46e5; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; } .td-empty .spark { fill: none; stroke: #a5b4fc; stroke-width: 4; stroke-linecap: round; }
.td-empty strong { font: 800 1rem var(--font-heading); } .td-empty span { font-size: 0.74rem; color: var(--pv-muted); max-width: 360px; }
@media (max-width: 760px) {
  .td-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-ring { grid-column: 1 / -1; width: auto; grid-template-columns: auto; padding: 0.6rem; }
  .td-add-opts { padding-left: 0.2rem; }
  .td-x { opacity: 1; }
}


/* Lead form picker (campaign and post pages) */
.lf-pick { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; background: #f5f3ff; border: 1px solid #ddd6fe; color: #6d28d9; border-radius: 99px; padding: 0.15rem 0.3rem 0.15rem 0.65rem; font-size: 0.66rem; font-weight: 800; text-decoration: none; }
.lf-pick svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lf-pick select { border: 0; outline: 0; background: #fff; border-radius: 99px; font: inherit; font-size: 0.66rem; font-weight: 700; color: #4c1d95; padding: 0.3rem 0.5rem; max-width: 170px; cursor: pointer; }
.lf-pick.lf-none { padding: 0.35rem 0.8rem; }
.lf-pick.lf-none:hover { background: #ede9fe; }


/* Calendar: month title, navigation and tabs sit in the calendar's own bar */
.calx-header { display: none; }
.calx-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0.7rem; background: linear-gradient(180deg, #fff, #f6f7ff); border-bottom: 2px solid #c7ccf0; }
.calx-bar h3 { margin: 0; font-family: var(--font-heading); font-size: 1.02rem; font-weight: 800; color: #312e81; margin-right: 0.2rem; }
.calx-bar .calx-nav { gap: 0.25rem; }
.calx-bar .calx-nav-arrow { width: 28px; height: 28px; background: #eef0ff; color: #4f46e5; border-radius: 9px; }
.calx-bar .calx-nav-arrow:hover { background: #e0e4ff; color: #3730a3; }
.calx-bar .calx-today { background: #eef0ff; color: #4f46e5; padding: 0.3rem 0.7rem; font-size: 0.66rem; box-shadow: none; }
.calx-bar .calx-today.active { box-shadow: 0 0 0 2px #a5b4fc; }
.calx-bar .calx-layers { margin: 0 0 0 auto; padding: 0.15rem; border-radius: 11px; box-shadow: none; background: #eef0ff; border-color: #dfe2ef; }
.calx-bar .calx-layer { padding: 0.3rem 0.7rem; }
.calx-sched { margin-left: auto; font-size: 0.6rem; font-weight: 800; color: #4f46e5; background: #eef0ff; border-radius: 99px; padding: 0.15rem 0.55rem; text-decoration: none; }
.calx-sched:hover { background: #e0e4ff; }
.calx-who { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.56rem; font-weight: 700; color: #475569; margin-top: 0.15rem; }
.calx-who i { font-style: normal; width: 15px; height: 15px; border-radius: 50%; background: #6366f1; color: #fff; display: grid; place-items: center; font-size: 0.5rem; font-weight: 800; }
.calx-who.none { color: #94a3b8; }
.calx-who.none i { background: #cbd5e1; }
@media (max-width: 520px) { .calx-bar .calx-layers { margin-left: 0; width: 100%; } }


/* Calendar: add on a day */
.calx-cell-top { position: relative; }
.calx-addday { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 0; background: #eef0ff; color: #4f46e5; font-size: 0.8rem; line-height: 1; font-weight: 800; cursor: pointer; opacity: 0; transition: opacity 0.12s; padding: 0; }
.calx-cell:hover .calx-addday, .calx-addday:focus-visible { opacity: 1; }
.calx-addday:hover { background: #4f46e5; color: #fff; }
@media (hover: none) { .calx-addday { opacity: 0.55; } }
.cal-kinds { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cal-kinds label { display: block; }
.cal-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.cal-kinds span, .cal-kind-link { display: inline-block; padding: 0.45rem 0.8rem; border-radius: 99px; border: 1px solid #dfe2ef; background: #fff; font-size: 0.72rem; font-weight: 800; color: #475569; cursor: pointer; text-decoration: none; }
.cal-kinds input:checked + span { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-color: transparent; }
.cal-kind-link:hover { background: #f5f6ff; color: #4f46e5; }
.cal-add select, .cal-add input[type=time] { font: inherit; font-size: 0.74rem; padding: 0.55rem 0.7rem; border: 1px solid var(--crm-line); border-radius: 10px; background: #fff; }
.cal-add label[hidden] { display: none; }
.calx-problem { margin: 0 0 0.5rem; padding: 0.5rem 0.8rem; border-radius: 10px; background: #fee2e2; color: #b91c1c; font-size: 0.7rem; font-weight: 700; }

.calx-layer.locked { opacity: 0.6; }


/* ==========================================================================
   Growth
   ========================================================================== */
.gw { max-width: 1180px; margin: 0 auto; padding: 0.4rem 0 2rem; display: grid; gap: 0.8rem; }
.gw-note { padding: 0.55rem 0.9rem; border-radius: 12px; font-size: 0.74rem; font-weight: 700; }
.gw-note.ok { background: #ecfdf5; color: #047857; } .gw-note.bad { background: #fef2f2; color: #b91c1c; }
.gw-card { background: #fff; border: 1px solid #e3e6f3; border-radius: 18px; padding: 0.95rem 1.05rem; box-shadow: 0 4px 16px rgba(30, 33, 48, 0.05); }
.gw-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.gw-card-head h3, .gw-know-head h3 { margin: 0; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800; display: flex; align-items: center; gap: 0.35rem; flex: 1; }
.gw-count { font-size: 0.66rem; font-weight: 800; color: #4f46e5; background: #eef0ff; border-radius: 99px; padding: 0.15rem 0.6rem; }
.gw-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.62rem; font-weight: 800; padding: 0.15rem 0.55rem; border-radius: 99px; background: #f1f3fb; color: #475569; white-space: nowrap; }
.gw-chip.good { background: #dcfce7; color: #15803d; } .gw-chip.bad { background: #fee2e2; color: #b91c1c; }
.gw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; font: inherit; font-size: 0.68rem; font-weight: 800; padding: 0.45rem 0.8rem; border-radius: 10px; border: 1px solid #dfe2ef; background: #fff; color: #334155; cursor: pointer; text-decoration: none; line-height: 1; }
.gw-btn:hover { background: #f5f6ff; color: #4f46e5; }
.gw-btn.primary { background: #4f46e5; border-color: #4f46e5; color: #fff; } .gw-btn.primary:hover { background: #4338ca; color: #fff; }
.gw-btn.icon { padding: 0.45rem 0.55rem; } .gw-btn.off { opacity: 0.55; cursor: default; }

.gw-hero { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; background: linear-gradient(135deg, #fff, #f7f7ff); border: 1px solid #dfe2f5; border-radius: 22px; padding: 1.1rem 1.3rem; box-shadow: 0 10px 28px rgba(79, 70, 229, 0.08); }
.gw-ring { position: relative; width: 130px; height: 130px; flex: none; }
.gw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gw-ring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.gw-ring .bg { stroke: #e8eaf6; } .gw-ring .fg { stroke: var(--c); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); }
.gw-ring.good { --c: #16a34a; } .gw-ring.mid { --c: #f59e0b; } .gw-ring.low { --c: #ef4444; }
.gw-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gw-ring strong { font-family: var(--font-heading); font-size: 2.2rem; line-height: 1; color: #1e2130; } .gw-ring small { font-size: 0.6rem; color: #64748b; font-weight: 700; }
.gw-hero-top { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.gw-hero-top h2 { margin: 0; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.gw-when { font-size: 0.64rem; color: #64748b; font-weight: 700; margin-right: auto; }
.gw-delta { font-size: 0.7rem; font-weight: 800; padding: 0.1rem 0.5rem; border-radius: 99px; } .gw-delta.up { background: #dcfce7; color: #15803d; } .gw-delta.down { background: #fee2e2; color: #b91c1c; }
.gw-pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.55rem; }
.gw-pillar { background: #fff; border: 1px solid #e6e8f5; border-radius: 14px; padding: 0.55rem 0.65rem; display: grid; gap: 0.3rem; }
.gw-pillar-top { display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; } .gw-pillar-top b { flex: 1; font-weight: 800; } .gw-pillar-top em { font-style: normal; font-weight: 800; font-size: 0.8rem; } .gw-pillar-top small { font-size: 0.55rem; color: #94a3b8; }
.gw-pillar > small { font-size: 0.56rem; color: #64748b; font-weight: 600; line-height: 1.25; }
.gw-bar { height: 7px; border-radius: 99px; background: #eceef8; overflow: hidden; } .gw-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c, #6366f1); }
.gw-bar.big { height: 10px; }
.gw-pillar.good { --c: #16a34a; } .gw-pillar.mid { --c: #f59e0b; } .gw-pillar.low { --c: #ef4444; }
.gw-who .gw-bar i { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.gw-trend { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 0.6rem; } .gw-trend i { flex: 1; max-width: 22px; background: linear-gradient(180deg, #818cf8, #c7d2fe); border-radius: 4px 4px 0 0; }

.gw-know-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.gw-know-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.gw-in { display: flex; align-items: center; gap: 0.5rem; background: #f6f7fd; border: 1px solid #e3e6f3; border-radius: 12px; padding: 0 0.7rem; min-height: 40px; font-size: 0.74rem; }
.gw-in.wide { grid-column: 1 / -1; } .gw-in input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 0.74rem; padding: 0.55rem 0; outline: 0; min-width: 0; }
.gw-in:focus-within { border-color: #818cf8; background: #fff; }
.gw-know-actions { display: flex; gap: 0.5rem; margin-top: 0.7rem; justify-content: flex-end; }
.gw-lockrow { color: #92400e; background: #fffbeb; border-color: #fde68a; text-decoration: none; font-weight: 700; }
.gw-lockrow.big { display: block; margin-top: 0.5rem; padding: 0.55rem 0.8rem; border: 1px dashed #fcd34d; border-radius: 12px; font-size: 0.7rem; }

.gw-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.gw-main, .gw-side { display: grid; gap: 0.8rem; min-width: 0; }
.gw-act { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center; padding: 0.7rem 0.75rem; border-radius: 14px; border: 1px solid #e6e8f5; border-left: 5px solid #cbd5e1; margin-bottom: 0.5rem; background: #fcfcff; }
.gw-act.impact3 { border-left-color: #ef4444; } .gw-act.impact2 { border-left-color: #f59e0b; } .gw-act.impact1 { border-left-color: #94a3b8; }
.gw-act.doing { background: #f5f7ff; }
.gw-act-ico { width: 38px; height: 38px; border-radius: 12px; background: #eef0ff; display: grid; place-items: center; font-size: 1.1rem; }
.gw-act-body { display: grid; gap: 0.15rem; min-width: 0; } .gw-act-body strong { font-size: 0.8rem; } .gw-act-body small { font-size: 0.64rem; color: #64748b; font-weight: 600; }
.gw-act-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.2rem; }
.gw-impact, .gw-dots { font-size: 0.55rem; letter-spacing: 1px; color: #f59e0b; } .gw-impact i, .gw-dots i { font-style: normal; color: #dfe2ef; }
.gw-act-btns { display: flex; gap: 0.3rem; align-items: center; } .gw-act-btns form { margin: 0; }
.gw-allgood { padding: 1rem; text-align: center; font-size: 0.8rem; font-weight: 700; color: #15803d; background: #f0fdf4; border-radius: 12px; }
.gw-done { display: flex; gap: 0.6rem; align-items: center; padding: 0.4rem 0; border-top: 1px solid #f0f1f8; } .gw-done:first-of-type { border-top: 0; }
.gw-done > span { width: 22px; height: 22px; border-radius: 50%; background: #dcfce7; color: #15803d; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; flex: none; }
.gw-done strong { font-size: 0.74rem; display: block; } .gw-done small { font-size: 0.6rem; color: #64748b; }
.gw-who-block { display: grid; gap: 0.35rem; padding: 0.6rem 0; border-top: 1px solid #f0f1f8; } .gw-who-block:first-of-type { border-top: 0; padding-top: 0; }
.gw-who-block b { font-size: 0.74rem; } .gw-who-block small { font-size: 0.64rem; color: #64748b; font-weight: 600; }
.gw-wait { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 10px; text-decoration: none; font-size: 0.72rem; font-weight: 700; color: #334155; background: #f6f7fd; }
.gw-wait span { min-width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-weight: 800; font-size: 0.7rem; padding: 0 0.3rem; }
.gw-wait.bad span { background: #fee2e2; color: #b91c1c; } .gw-wait.good span { background: #dcfce7; color: #15803d; }
.gw-target { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; padding: 0.6rem 0; border-top: 1px solid #f0f1f8; } .gw-target:first-of-type { border-top: 0; }
.gw-target.using { background: #f5fff8; margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 10px; }
.gw-target-body { display: grid; gap: 0.15rem; min-width: 0; } .gw-target-body strong { font-size: 0.78rem; } .gw-target-body small { font-size: 0.62rem; color: #64748b; font-weight: 600; }
.gw-empty { text-align: center; padding: 2rem 1rem; display: grid; gap: 0.5rem; justify-items: center; } .gw-empty-ico { font-size: 2.4rem; }

/* Home card */
.gw-home { display: flex; align-items: center; gap: 1rem; background: linear-gradient(120deg, #eef2ff, #f5f3ff); border: 1px solid #d9dcf8; border-radius: 18px; padding: 0.8rem 1.1rem; margin: 0.8rem 0; text-decoration: none; color: #1e2130; }
.gw-home.invite:hover { background: linear-gradient(120deg, #e4e9ff, #ede9fe); }
.gw-home-ico { font-size: 1.8rem; }
.gw-home.invite div { flex: 1; display: grid; gap: 0.1rem; } .gw-home.invite strong { font-size: 0.86rem; } .gw-home.invite small { font-size: 0.68rem; color: #64748b; font-weight: 600; }
.gw-home em { font-style: normal; font-weight: 800; font-size: 0.72rem; color: #4f46e5; white-space: nowrap; }
.gw-home-score { display: flex; align-items: baseline; gap: 0.15rem; padding: 0.5rem 0.9rem; border-radius: 14px; background: #fff; border: 2px solid var(--c); text-decoration: none; color: #1e2130; }
.gw-home-score.good { --c: #16a34a; } .gw-home-score.mid { --c: #f59e0b; } .gw-home-score.low { --c: #ef4444; }
.gw-home-score strong { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1; } .gw-home-score small { font-size: 0.6rem; color: #64748b; font-weight: 700; }
.gw-home-score i { font-style: normal; font-size: 0.62rem; font-weight: 800; margin-left: 0.25rem; } .gw-home-score i.up { color: #15803d; } .gw-home-score i.down { color: #b91c1c; }
.gw-home-next { flex: 1; display: grid; gap: 0.1rem; min-width: 0; } .gw-home-next small { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; font-weight: 800; }
.gw-home-next a, .gw-home-next strong { color: #1e2130; text-decoration: none; font-size: 0.84rem; } .gw-home-next a:hover strong { color: #4f46e5; }
.gw-home-all { font-weight: 800; font-size: 0.72rem; color: #4f46e5; text-decoration: none; white-space: nowrap; }

@media (max-width: 1000px) { .gw-cols { grid-template-columns: minmax(0, 1fr); } .gw-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .gw-hero { grid-template-columns: 1fr; justify-items: center; padding: 1rem; } .gw-hero-body { width: 100%; }
  .gw-know-grid { grid-template-columns: 1fr; }
  .gw-act { grid-template-columns: auto 1fr; } .gw-act-btns { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
  .gw-home { flex-wrap: wrap; }
}

.gw-basis { margin: -0.3rem 0 0.7rem; font-size: 0.66rem; color: #64748b; font-weight: 600; }
.gw-basis strong { color: #475569; }
.gw-mail { margin-left: 0.4rem; } .gw-mail button { border: 0; background: #eef0ff; color: #4f46e5; font: inherit; font-size: 0.62rem; font-weight: 800; border-radius: 99px; padding: 0.15rem 0.6rem; cursor: pointer; }
.gw-chip.owner-caxo { background: #ede9fe; color: #6d28d9; text-decoration: none; }


/* Results in plain words (AI) */
.rx { margin: 0.7rem 0; padding: 0.75rem 0.9rem; border-radius: 14px; background: linear-gradient(135deg, #f5f3ff, #eef2ff); border: 1px solid #ddd6fe; display: grid; gap: 0.45rem; }
.rx-head { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8rem; color: #312e81; } .rx-ico { font-size: 1rem; }
.rx-points { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; font-size: 0.72rem; color: #334155; font-weight: 600; }
.rx-next { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; font-size: 0.68rem; } .rx-next b { color: #6d28d9; font-weight: 800; }
.rx-next span { background: #fff; border: 1px solid #ddd6fe; border-radius: 99px; padding: 0.2rem 0.65rem; font-weight: 700; color: #4c1d95; }
.rx-foot { font-size: 0.58rem; color: #94a3b8; font-weight: 600; }


/* Style notes, "remember this", refresh upcoming posts */
.sn-card { margin: 0.9rem 0; padding: 0.9rem 1rem; border: 1px solid #e3e6f3; border-radius: 14px; background: #fcfcff; display: grid; gap: 0.5rem; }
.sn-card h3 { margin: 0; font-size: 0.95rem; font-weight: 800; display: flex; align-items: center; gap: 0.35rem; }
.sn-empty { margin: 0; font-size: 0.72rem; color: #64748b; }
.sn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.sn-list li { display: flex; align-items: center; gap: 0.5rem; background: #f1f3fb; border-radius: 10px; padding: 0.4rem 0.7rem; font-size: 0.76rem; font-weight: 600; }
.sn-list li span { flex: 1; } .sn-list li form { margin: 0; }
.sn-list li button { border: 0; background: transparent; color: #94a3b8; cursor: pointer; font-size: 0.8rem; } .sn-list li button:hover { color: #dc2626; }
.sn-add { display: flex; gap: 0.5rem; margin: 0; } .sn-add input { flex: 1; font: inherit; font-size: 0.78rem; padding: 0.5rem 0.7rem; border: 1px solid #dfe2ef; border-radius: 10px; }
.ap-remember { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 700; color: #475569; }
.cp-refresh { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid #e3e6f3; border-radius: 14px; background: #fcfcff; }
.cp-refresh > div { flex: 1; min-width: 220px; display: grid; gap: 0.1rem; } .cp-refresh strong { font-size: 0.8rem; } .cp-refresh small { font-size: 0.68rem; color: #64748b; font-weight: 600; }
.cp-refresh-ico { font-size: 1.2rem; }
.cp-refresh.due { background: #fffbeb; border-color: #fcd34d; }

.pf-postnow { margin: 0.35rem 0 0; }
.pf-postnow-btn { border: 0; border-radius: 99px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; font: inherit; font-size: 0.68rem; font-weight: 800; padding: 0.4rem 0.9rem; cursor: pointer; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); }
.pf-postnow-btn:hover { filter: brightness(1.08); } .pf-postnow-btn:disabled { opacity: 0.7; cursor: wait; }

/* Regular price shown struck out beside the discounted price actually charged */
.price-was { color: var(--pv-muted, #6b7280); font-weight: 400; font-size: 0.9em; margin-right: 0.35rem; text-decoration: line-through; }
.pkgsel-plan-price .price-was { font-size: 1.05rem; display: inline-block; }

/* Connect Meta Suite confirmation page: clear Back / Continue buttons */
.meta-connect-tip { background: #fff7e6; border: 1px solid #f5d28a; color: #6b4a00; border-radius: 10px; padding: 0.75rem 0.9rem; margin: 0.9rem 0 1.1rem; font-size: 0.9rem; line-height: 1.45; }
.meta-connect-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.meta-connect-back, .meta-connect-next { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.3rem; border-radius: 10px; font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s; }
.meta-connect-back { background: #fff; color: var(--pv-indigo-dark); border: 1.5px solid #c7c9f5; }
.meta-connect-back:hover { background: #eef0ff; color: var(--pv-indigo-dark); }
.meta-connect-next { background: linear-gradient(135deg, var(--pv-indigo), var(--pv-purple)); color: #fff; border: none; box-shadow: 0 2px 8px rgba(79,70,229,.3); }
.meta-connect-next:hover { box-shadow: 0 4px 14px rgba(79,70,229,.4); color: #fff; }