/*
 * LINKFLOW Compact Premium trial — 23 October 2026
 * Customer-facing layout density only. Owner/Admin is unaffected.
 * Reversible: remove this stylesheet link from index.html.
 * All underlying pages, forms, data, charts and existing business imagery remain intact.
 */

/* Compact OVERVIEW: one useful header instead of two tall stacked panels. */
body.lf-customer-shell #page-overview .lf-finance-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(158px, 212px);
  align-items: center;
  gap: 12px 26px;
  min-height: 0;
  margin: 0 0 15px;
  padding: 19px clamp(20px, 2.5vw, 30px);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(31, 177, 206, .17), transparent 53%),
    linear-gradient(115deg, #0b3654, #112b49 78%, #132941);
  border: 1px solid rgba(84, 190, 224, .51);
  border-left: 4px solid #43cde6;
  border-radius: 17px;
  box-shadow: 0 11px 30px rgba(0, 11, 30, .21), inset 0 1px rgba(203, 246, 255, .07);
}
body.lf-customer-shell #page-overview .lf-finance-hero > div:first-child {
  min-width: 0;
}
body.lf-customer-shell #page-overview .lf-finance-hero .eyebrow {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: .13em;
}
body.lf-customer-shell #page-overview .lf-finance-hero h1 {
  font-size: clamp(28px, 2.6vw, 39px);
  line-height: 1.08;
  letter-spacing: -.035em;
  margin: 0 0 6px;
}
body.lf-customer-shell #page-overview .lf-finance-hero p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.45;
  color: #d0e6f2;
  margin: 0;
}
body.lf-customer-shell #page-overview .lf-finance-source {
  margin-top: 9px;
  font-size: 11px;
  line-height: 1.4;
  color: #9eddeb;
  max-width: 70ch;
  overflow-wrap: anywhere;
}
/* Financial year lives in the header rather than in its own full-width card. */
body.lf-customer-shell #page-overview .lf-finance-period-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  align-self: center;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
  background: rgba(4, 26, 43, .54);
  border: 1px solid rgba(107, 194, 226, .37);
  border-radius: 12px;
  min-width: 0;
  max-width: 100%;
  box-shadow: inset 0 1px rgba(217, 243, 255, .05);
}
body.lf-customer-shell #page-overview .lf-finance-period-bar[hidden] {
  display: none !important;
}
body.lf-customer-shell #page-overview .lf-finance-period-bar label {
  margin: 0;
  color: #bfe4f1;
  font-size: 11px;
  letter-spacing: .03em;
}
body.lf-customer-shell #page-overview .lf-finance-period-bar select {
  min-height: 39px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  font-weight: 700;
  background: #0e334e;
  border: 1px solid rgba(106, 181, 216, .53);
}
body.lf-customer-shell #page-overview .lf-finance-period-note {
  width: auto;
  font-size: 10px;
  line-height: 1.35;
  color: #90bfd1;
}
body.lf-customer-shell #page-overview .lf-finance-hero-mark {
  display: none;
}
body.lf-customer-shell #page-overview .lf-finance-kpis {
  gap: 12px;
  margin-bottom: 14px;
}
body.lf-customer-shell #page-overview .lf-finance-kpi {
  padding: 17px 17px 15px;
}
body.lf-customer-shell #page-overview .lf-finance-kpi strong {
  font-size: clamp(20px, 2.15vw, 30px);
  margin: 8px 0;
}
body.lf-customer-shell #page-overview .lf-finance-layout {
  gap: 14px;
}
body.lf-customer-shell #page-overview .lf-finance-panel {
  padding: 18px;
}
body.lf-customer-shell #page-overview .lf-finance-panel-heading {
  margin-bottom: 13px;
}

/* Shared compact page headers for customer Money, Results, Connected accounts,
   Things to do, Help and other internal pages — never for Owner/Admin. */
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity) > .page-title {
  display: flex;
  align-items: center;
  gap: 12px 22px;
  margin: 0 0 15px;
  padding: 20px clamp(19px, 2.3vw, 28px);
  border: 1px solid rgba(77, 168, 205, .47);
  border-left: 4px solid #36c7e3;
  border-radius: 17px;
  background:
    radial-gradient(ellipse at 95% 0%, rgba(37, 146, 192, .14), transparent 54%),
    linear-gradient(120deg, rgba(12, 54, 81, .96), rgba(14, 37, 63, .96));
  box-shadow: 0 10px 26px rgba(1, 11, 29, .20), inset 0 1px rgba(210, 247, 255, .07);
}
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity) > .page-title > div:first-child {
  min-width: 0;
}
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity) > .page-title .eyebrow {
  margin: 0 0 6px;
  font-size: 10px;
}
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity) > .page-title h1 {
  font-size: clamp(25px, 2.7vw, 38px);
  line-height: 1.16;
  letter-spacing: -.03em;
  margin: 0;
}
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity) > .page-title p:not(.eyebrow) {
  font-size: 13px;
  line-height: 1.5;
  margin: 7px 0 0;
  max-width: 78ch;
}
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity) > .page-title .hero-actions {
  margin-top: 0;
  align-items: center;
}
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity) > .page-title .health-badge,
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity) > .page-title .demo-pill {
  flex-shrink: 0;
}

/* Customer Jobs, Clients, Messages, Invoices, Settings share a separate
   workspace header. Compact it but preserve the Dashboard centred-logo hero. */
body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden {
  padding: 18px clamp(17px, 2.2vw, 25px);
  margin: 0 0 11px;
  border-radius: 17px;
}
body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden .lf-home-heading {
  min-height: 0;
  margin: 0;
  gap: 8px;
  align-items: center;
}
body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden .lf-home-heading h2 {
  font-size: clamp(25px, 2.55vw, 36px);
  margin: 2px 0 5px;
  line-height: 1.16;
}
body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden .lf-home-heading p {
  margin: 0;
  line-height: 1.45;
  font-size: 13px;
}
body.lf-customer-shell #workspace-content.lf-cockpit-mode #lf-cockpit-section-heading:not([hidden]) {
  margin: 9px 0 13px;
  padding: 11px 15px;
  min-height: 0;
  gap: 13px;
  border: 1px solid rgba(69, 145, 180, .32);
  background: rgba(7, 32, 51, .84);
}
body.lf-customer-shell #workspace-content.lf-cockpit-mode #lf-cockpit-section-heading h2 {
  font-size: clamp(18px, 1.5vw, 23px);
  margin: 0;
  line-height: 1.3;
}

/* Keep a full-size dashboard logo and its custom background when Home is open. */
body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) .lf-home-heading:has(#lf-home-business-logo:not([hidden])) {
  min-height: 195px;
}

/* Mobile: header contents stack naturally, controls stay accessible. */
@media (max-width: 820px) {
  body.lf-customer-shell #page-overview .lf-finance-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 17px 19px;
    gap: 12px;
  }
  body.lf-customer-shell #page-overview .lf-finance-period-bar {
    max-width: 240px;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity) > .page-title {
    flex-wrap: wrap;
    padding: 17px 18px;
    gap: 10px;
  }
  body.lf-customer-shell #page-overview .lf-finance-kpi {
    padding: 14px;
  }
}
@media (max-width: 480px) {
  body.lf-customer-shell #page-overview .lf-finance-hero h1 {
    font-size: 29px;
  }
  body.lf-customer-shell #page-overview .lf-finance-period-bar {
    max-width: none;
  }
  body.lf-customer-shell #page-overview .lf-finance-kpi strong {
    font-size: 19px;
  }
  body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity) > .page-title h1 {
    font-size: 27px;
  }
  body.lf-customer-shell #workspace-content.lf-cockpit-mode #lf-cockpit-section-heading:not([hidden]) {
    flex-wrap: wrap;
  }
}



/* Approved compact horizontal header — consistent customer-page chrome.
   Recreates the accepted narrow OVERVIEW bar with zero blank hero space.
   Header styling only: no changes to any cards, charts, forms or navigation. */
body.lf-customer-shell {
  --lf-header-fill: linear-gradient(110deg, #0d3554 0%, #0f3455 58%, #11506a 100%);
  --lf-header-border: rgba(57, 169, 209, .60);
  --lf-header-shadow: 0 8px 23px rgba(0, 9, 25, .20), inset 0 1px rgba(190, 242, 255, .08);
}
body.lf-customer-shell #page-overview .lf-finance-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(155px, 195px) minmax(172px, 210px);
  grid-template-areas: "title period save";
  align-items: center;
  justify-content: stretch;
  gap: 0 18px;
  box-sizing: border-box;
  min-height: 0 !important;
  height: auto !important;
  padding: 15px clamp(18px, 2.15vw, 26px) !important;
  margin: 0 0 14px !important;
  border: 1px solid var(--lf-header-border);
  border-radius: 19px;
  background: var(--lf-header-fill);
  box-shadow: var(--lf-header-shadow);
}
body.lf-customer-shell #page-overview .lf-finance-hero::before {
  opacity: .26;
}
body.lf-customer-shell #page-overview .lf-finance-hero > .lf-finance-title-group {
  grid-area: title;
  min-width: 0;
}
body.lf-customer-shell #page-overview .lf-finance-hero .eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  letter-spacing: .13em;
  color: #72def1;
}
body.lf-customer-shell #page-overview .lf-finance-hero h1 {
  margin: 0 0 4px;
  font-size: clamp(28px, 2.6vw, 39px);
  line-height: 1.09;
}
body.lf-customer-shell #page-overview .lf-finance-hero .lf-finance-subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #d0e9f4;
}
body.lf-customer-shell #page-overview .lf-finance-period-bar {
  grid-area: period;
  align-self: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.lf-customer-shell #page-overview .lf-finance-period-bar[hidden] {
  display: none !important;
}
body.lf-customer-shell #page-overview .lf-finance-period-bar label {
  margin: 0;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #9cd7e9;
}
body.lf-customer-shell #page-overview .lf-finance-period-bar select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 650;
  border-radius: 9px;
  color: #eefaff;
  border: 1px solid rgba(76, 166, 200, .72);
  background-color: #0a334f;
}
body.lf-customer-shell #page-overview .lf-finance-period-note {
  display: none;
}
body.lf-customer-shell #page-overview .lf-finance-save-state {
  grid-area: save;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  align-self: stretch;
  padding: 0 0 0 17px;
  border-left: 1px solid rgba(128, 211, 233, .27);
}
body.lf-customer-shell #page-overview .lf-finance-save-check {
  display: none;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  color: #062c40;
  background: #6adee8;
}
body.lf-customer-shell #page-overview .lf-finance-save-state.is-saved .lf-finance-save-check {
  display: inline-flex;
}
body.lf-customer-shell #page-overview .lf-finance-source {
  min-width: 0;
  margin: 0;
  max-width: none;
  font-size: 11px;
  line-height: 1.5;
  color: #baddec;
  overflow-wrap: anywhere;
}
body.lf-customer-shell #page-overview .lf-finance-hero-mark {
  display: none !important;
}

/* Apply the same compact header visual system to each customer route with a
   traditional page heading, without modifying page-specific action controls. */
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity):not(#page-builder) > .page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 22px;
  flex-wrap: wrap;
  box-sizing: border-box;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 14px !important;
  padding: 15px clamp(18px, 2.15vw, 26px) !important;
  border: 1px solid var(--lf-header-border);
  border-radius: 19px;
  background: var(--lf-header-fill);
  box-shadow: var(--lf-header-shadow);
}
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity):not(#page-builder) > .page-title > div:first-child {
  flex: 1 1 320px;
  min-width: 0;
}
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity):not(#page-builder) > .page-title .eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  letter-spacing: .12em;
  color: #72def1;
}
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity):not(#page-builder) > .page-title h1 {
  margin: 0;
  font-size: clamp(27px, 2.5vw, 37px);
  line-height: 1.1;
}
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity):not(#page-builder) > .page-title p:not(.eyebrow) {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.4;
  max-width: 70ch;
}
body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity):not(#page-builder) > .page-title > :not(:first-child) {
  flex-shrink: 0;
}

/* Workspace sub-pages (Jobs, Clients, Messages, Invoices, Settings) use
   the same compact navy horizontal treatment; Dashboard Home logo is exempt. */
body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden {
  box-sizing: border-box;
  min-height: 0 !important;
  height: auto !important;
  padding: 15px clamp(18px, 2.15vw, 26px) !important;
  margin: 0 0 12px !important;
  border: 1px solid var(--lf-header-border);
  border-radius: 19px;
  background: var(--lf-header-fill) !important;
  box-shadow: var(--lf-header-shadow);
}
body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden .lf-home-heading {
  align-items: center;
  min-height: 0 !important;
  margin: 0;
}
body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden .lf-home-heading h2 {
  font-size: clamp(27px, 2.5vw, 37px);
  line-height: 1.1;
  margin: 0 0 5px;
}
body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden .lf-home-heading p:not(.eyebrow) {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
body.lf-customer-shell #workspace-content.lf-cockpit-mode #lf-cockpit-section-heading:not([hidden]) {
  margin: 8px 0 12px;
  padding: 10px 16px;
  border-color: rgba(76, 166, 200, .52);
  border-radius: 12px;
  background: linear-gradient(110deg, #0b324d, #102d49);
}

/* Ensure header controls remain usable and status text readable on tablets. */
@media (max-width: 1040px) {
  body.lf-customer-shell #page-overview .lf-finance-hero {
    grid-template-columns: minmax(0, 1fr) minmax(145px, 175px);
    grid-template-areas: "title period" "save save";
    gap: 8px 16px;
  }
  body.lf-customer-shell #page-overview .lf-finance-save-state {
    padding: 8px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(128, 211, 233, .22);
  }
}
@media (max-width: 640px) {
  body.lf-customer-shell #page-overview .lf-finance-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "period" "save";
    gap: 11px;
    padding: 14px 16px !important;
  }
  body.lf-customer-shell #page-overview .lf-finance-period-bar {
    max-width: 240px;
    width: 100%;
  }
  body.lf-customer-shell #page-overview .lf-finance-hero h1 {
    font-size: 30px;
  }
  body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity):not(#page-builder) > .page-title {
    padding: 14px 16px !important;
  }
  body.lf-customer-shell .page.active:not(#page-home):not(#page-owner-activity):not(#page-builder) > .page-title h1 {
    font-size: 28px;
  }
  body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden {
    padding: 14px 16px !important;
  }
}



/* LINKFLOW branded titles — approved white, blue, cyan from Connected accounts.
   Customer page-title typography only: no changes to header dimensions,
   account names, financial tiles, buttons, graphs, page data, or Owner/Admin. */
body.lf-customer-shell {
  --lf-title-white: #f7fcff;
  --lf-title-blue: #168ff4;
  --lf-title-cyan: #22d7d5;
}
body.lf-customer-shell .page.active:not(#page-owner-activity) > .page-title h1,
body.lf-customer-shell #page-overview .lf-finance-hero h1,
body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden #lf-home-title,
body.lf-customer-shell #workspace-content #lf-cockpit-section-heading h2 {
  color: var(--lf-title-white);
  text-shadow: none;
}
body.lf-customer-shell .page.active:not(#page-owner-activity) > .page-title h1 > span,
body.lf-customer-shell #page-overview .lf-finance-hero h1 > span,
body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden #lf-home-title > .lf-title-accent,
body.lf-customer-shell #workspace-content #lf-cockpit-section-heading h2 > .lf-title-accent {
  background: linear-gradient(90deg, var(--lf-title-blue) 0%, var(--lf-title-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Dynamic, single-piece headings (including gated plans and Messages) use
   the same white-to-brand-blue finish without rewriting application text. */
body.lf-customer-shell .page.active:not(#page-owner-activity) > .page-title h1:not(:has(span)),
body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden #lf-home-title:not(:has(span)),
body.lf-customer-shell #workspace-content #lf-cockpit-section-heading h2:not(:has(span)) {
  display: inline-block;
  max-width: 100%;
  background: linear-gradient(90deg, var(--lf-title-white) 0%, var(--lf-title-white) 40%, var(--lf-title-blue) 70%, var(--lf-title-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Respect Windows high-contrast mode: never render transparent titles there. */
@media (forced-colors: active) {
  body.lf-customer-shell .page.active:not(#page-owner-activity) > .page-title h1,
  body.lf-customer-shell .page.active:not(#page-owner-activity) > .page-title h1 > span,
  body.lf-customer-shell #page-overview .lf-finance-hero h1,
  body.lf-customer-shell #page-overview .lf-finance-hero h1 > span,
  body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden #lf-home-title,
  body.lf-customer-shell #page-workspace #lf-customer-home.lf-cockpit-home-hidden #lf-home-title > span,
  body.lf-customer-shell #workspace-content #lf-cockpit-section-heading h2,
  body.lf-customer-shell #workspace-content #lf-cockpit-section-heading h2 > span {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    text-shadow: none;
  }
}



/* Dashboard header: same horizontal white/blue LINKFLOW title and right-aligned logo.
   Scope strictly to the customer's Dashboard Home; leave subpage headings,
   custom customer photo, business data and lower dashboard panels untouched. */
body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) .lf-home-heading {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 15px !important;
  padding: 15px clamp(18px, 2.15vw, 26px);
  gap: 15px;
  border: 1px solid var(--lf-header-border, rgba(57, 169, 209, .60));
  border-radius: 19px;
  background: var(--lf-header-fill, linear-gradient(110deg, #0d3554, #11506a));
  box-shadow: var(--lf-header-shadow, 0 8px 23px rgba(0, 9, 25, .20));
}
body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) .lf-home-heading > div {
  display: flex !important;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}
body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) .lf-home-heading .eyebrow {
  display: block;
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  color: #72def1;
}
body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) #lf-home-title {
  margin: 0 0 5px;
  font-size: clamp(27px, 2.5vw, 37px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--lf-title-white, #f7fcff);
  text-shadow: none;
  overflow-wrap: anywhere;
}
body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) #lf-home-title .lf-title-accent {
  background: linear-gradient(90deg, var(--lf-title-blue, #168ff4), var(--lf-title-cyan, #22d7d5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) #lf-home-subtitle {
  margin: 0;
  max-width: 55ch;
  font-size: 13px;
  line-height: 1.4;
  color: #c8e5f2;
}
body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) #lf-home-business-logo:not([hidden]) {
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(83px, 10vw, 125px) !important;
  height: 91px !important;
  max-width: 28% !important;
  margin-left: auto;
  align-self: center !important;
  object-fit: contain;
  object-position: center right !important;
}
/* Mobile: same left-title/right-logo hierarchy, no oversized hero area. */
@media (max-width: 650px) {
  body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) .lf-home-heading {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 15px;
  }
  body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) #lf-home-title {
    font-size: clamp(22px, 6vw, 28px);
  }
  body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) #lf-home-subtitle {
    font-size: 12px;
  }
  body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) #lf-home-business-logo:not([hidden]) {
    width: 80px !important;
    height: 70px !important;
    max-width: 28% !important;
  }
}
@media (forced-colors: active) {
  body.lf-customer-shell #page-workspace #lf-customer-home:not(.lf-cockpit-home-hidden) #lf-home-title .lf-title-accent {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}



/* Consistent title case: uppercase only primary customer page headings.
   Keep secondary copy, form labels and body text in sentence case. Owner/Admin,
   onboarding, public pages and the saved business name are not altered. */
body.lf-customer-shell #page-workspace #lf-customer-home .lf-home-heading #lf-home-title,
body.lf-customer-shell #workspace-content #lf-cockpit-section-heading h2,
body.lf-customer-shell #page-overview .lf-finance-hero h1,
body.lf-customer-shell .page.active:not(#page-owner-activity):not(#page-builder):not(#page-home) > .page-title h1 {
  text-transform: uppercase;
}




/* Separate operational invoice & quote follow-ups at the bottom of the
   single BUSINESS OVERVIEW page. Kept collapsed when there's no activity.
   Does not alter ledger statistics or their charts. */
body.lf-customer-shell #page-overview .lf-finance-workflow-section {
  margin:16px 0 20px;
}
body.lf-customer-shell #page-overview .lf-money-pipeline-details {
  padding:16px 20px;
  border:1px solid rgba(73,140,172,.45);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(9,38,59,.94),rgba(7,28,47,.95));
}
body.lf-customer-shell #page-overview .lf-money-pipeline-details > summary {
  cursor:pointer;
  font-weight:750;
  color:#ebfaff;
  line-height:1.45;
}
body.lf-customer-shell #page-overview .lf-money-pipeline-details > summary:focus-visible {
  outline:2px solid #67daf0;
  outline-offset:4px;
}
body.lf-customer-shell #page-overview #lf-money-pipeline-summary {
  display:inline;
  color:#9bc6d6;
  font-weight:400;
  font-size:12px;
}
body.lf-customer-shell #page-overview .lf-money-pipeline-details > p {
  margin:13px 0;
  color:#bad6e4;
  font-size:13px;
  line-height:1.5;
}
body.lf-customer-shell #page-overview .lf-money-pipeline-details .money-pipeline {
  margin:14px 0;
}
body.lf-customer-shell #page-overview .lf-money-pipeline-details .section-head {
  margin:18px 0 11px;
}
body.lf-customer-shell #page-overview .lf-money-pipeline-details .section-head h3 {
  color:#f2fbff;
  font-size:17px;
  margin:0;
}