/* Features page (uses tokens from theme.css) */

/* ---------- Hero ---------- */
.banner-section {
  background: linear-gradient(180deg, var(--tint) 0%, var(--paper) 100%) !important;
  padding: 132px 0 104px !important;
  border-bottom: 0;
}
.banner-section::before, .banner-section::after { display: none !important; }
.banner-container { max-width: var(--container) !important; grid-template-columns: .9fr 1.2fr !important; gap: 56px !important; padding: 0 32px; padding-top: 0 !important; }
.banner-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px !important; border: 0 !important; border-radius: 99px;
  background: var(--green-xl) !important; color: var(--green-d) !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0 !important; margin-bottom: 20px !important;
}
.banner-badge .material-symbols-outlined { font-size: 18px; }
.banner-subtitle { font-size: 19px !important; line-height: 1.55 !important; color: var(--body) !important; max-width: 540px; }
.banner-trust, .banner-trust .trust-item { color: var(--muted) !important; font-size: 14px !important; }
.banner-visual { justify-content: flex-end; }
@media (max-width: 991px) {
  .banner-section { padding: 108px 0 64px !important; }
  .banner-container { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; padding: 0 16px; }
  .banner-visual { justify-content: center; }
}

/* ---------- Page frame ---------- */
.gbfx-main { max-width: none; padding: 0; margin: 0; }
.gbfx { padding: 0; margin: 0; max-width: none; }
.gbfx-intro { padding: 104px 0 56px; }
.gbfx-intro .fade-up { margin: 0; max-width: 760px; }
.gbfx-intro .fade-up > div:first-child, .gbfx-intro .fade-up > div:first-child.inline-flex {
  background: var(--green-xl) !important; border: 0 !important; color: var(--green-d) !important;
  font-size: 12.5px !important; font-weight: 700 !important; padding: 3px 12px !important;
}
.gbfx-intro h2 { margin: 16px 0 0 !important; }
.gbfx-intro h2 span { color: inherit !important; font-weight: inherit !important; }

/* ---------- Sticky chapter nav ---------- */
.gbfx-navbar { position: sticky; top: 76px; z-index: 40; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.gbfx-navbar .gb-container { padding-top: 10px; padding-bottom: 10px; }
.gbfx-navbar .ch-nav { position: static; margin: 0; display: block; pointer-events: auto; }
.gbfx-navbar .ch-nav-inner { display: flex; gap: 6px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; overflow-x: auto; justify-content: flex-start; }
.ch-link { padding: 8px 18px; border-radius: 99px; font-size: 14.5px; font-weight: 600; color: var(--body); }
.ch-link:hover { background: var(--green-xl); color: var(--green-d); }
.ch-link.is-active { background: var(--ink); color: #fff; }

/* ---------- Chapters ---------- */
.gbfx-ch { padding: 104px 0; }
.gbfx-ch--tint { background: var(--tint); }
.gbfx-ch--paper { background: var(--paper); }
.gbfx-ch .ch-head {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 48px; align-items: end;
  margin: 0 0 56px; scroll-margin-top: 150px;
}
.ch-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ch-num { font-size: 14px !important; font-weight: 700 !important; color: var(--green-d) !important; -webkit-text-stroke: 0 !important; letter-spacing: .04em !important; line-height: 1 !important; font-variant-numeric: tabular-nums; }
.ch-label { font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--green-d) !important; margin: 0 !important; }
.gbfx-ch .ch-title { margin: 0 !important; font-size: 32px !important; line-height: 1.15 !important; color: var(--ink) !important; }
.gbfx-ch .ch-title span { color: inherit !important; font-weight: inherit !important; }
.gbfx-ch .ch-sub { margin: 0; font-size: 17px; line-height: 1.55; color: var(--body); align-self: end; }
@media (max-width: 991px) {
  .gbfx-ch .ch-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 36px; }
}
@media (max-width: 767px) {
  .gbfx-ch { padding: 64px 0; }
  .gbfx-intro { padding: 64px 0 36px; }
  .gbfx-ch .ch-title { font-size: 24px !important; }
}


/* ===== Generated: map off-palette Tailwind colours to site tokens (features page) ===== */
.gbfx .bg-amber-100 { background-color: var(--amber-xl) !important }
.gbfx .bg-amber-300 { background-color: #e0b15a !important }
.gbfx .bg-amber-50\/50 { background-color: var(--amber-xl) !important }
.gbfx .bg-amber-50\/60 { background-color: var(--amber-xl) !important }
.gbfx .bg-blue-100 { background-color: var(--green-xl) !important }
.gbfx .bg-cyan-100 { background-color: var(--green-xl) !important }
.gbfx .bg-cyan-400 { background-color: var(--green) !important }
.gbfx .bg-cyan-400\/10 { background-color: var(--green-xl) !important }
.gbfx .bg-cyan-50 { background-color: var(--green-xl) !important }
.gbfx .bg-orange-100 { background-color: var(--amber-xl) !important }
.gbfx .bg-red-300 { background-color: var(--rule) !important }
.gbfx .bg-red-600 { background-color: #9aa89f !important }
.gbfx .bg-rose-100 { background-color: #eef1ed !important }
.gbfx .bg-rose-500 { background-color: #9aa89f !important }
.gbfx .bg-sky-100 { background-color: var(--green-xl) !important }
.gbfx .bg-sky-50 { background-color: var(--green-xl) !important }
.gbfx .bg-sky-500 { background-color: var(--green) !important }
.gbfx .bg-sky-600 { background-color: var(--green) !important }
.gbfx .bg-slate-100 { background-color: var(--tint) !important }
.gbfx .bg-slate-200 { background-color: var(--rule) !important }
.gbfx .bg-slate-300 { background-color: var(--rule) !important }
.gbfx .bg-slate-50 { background-color: var(--tint) !important }
.gbfx .bg-slate-50\/50 { background-color: var(--tint) !important }
.gbfx .bg-slate-50\/60 { background-color: var(--tint) !important }
.gbfx .bg-slate-50\/70 { background-color: var(--tint) !important }
.gbfx .bg-slate-900 { background-color: var(--ink) !important }
.gbfx .bg-violet-100 { background-color: var(--green-xl) !important }
.gbfx .bg-violet-200 { background-color: var(--green-xl) !important }
.gbfx .bg-violet-400 { background-color: var(--green) !important }
.gbfx .bg-violet-400\/10 { background-color: var(--green-xl) !important }
.gbfx .bg-violet-50 { background-color: var(--green-xl) !important }
.gbfx .bg-violet-50\/40 { background-color: var(--green-xl) !important }
.gbfx .bg-violet-50\/60 { background-color: var(--green-xl) !important }
.gbfx .bg-violet-500 { background-color: var(--green) !important }
.gbfx .bg-violet-500\/15 { background-color: var(--green-xl) !important }
.gbfx .bg-violet-500\/20 { background-color: var(--green-xl) !important }
.gbfx .bg-violet-600 { background-color: var(--green) !important }
.gbfx .bg-violet-600\/25 { background-color: var(--green-xl) !important }
.gbfx .border-amber-100 { border-color: var(--amber-xl) !important }
.gbfx .border-amber-300 { border-color: var(--amber-xl) !important }
.gbfx .border-cyan-100 { border-color: var(--rule) !important }
.gbfx .border-cyan-200 { border-color: var(--rule) !important }
.gbfx .border-cyan-300 { border-color: var(--green) !important }
.gbfx .border-sky-100 { border-color: var(--rule) !important }
.gbfx .border-sky-300 { border-color: var(--green) !important }
.gbfx .border-slate-100 { border-color: var(--rule) !important }
.gbfx .border-slate-200 { border-color: var(--rule) !important }
.gbfx .border-slate-800 { border-color: var(--ink) !important }
.gbfx .border-violet-100 { border-color: var(--rule) !important }
.gbfx .border-violet-200 { border-color: var(--rule) !important }
.gbfx .border-violet-300 { border-color: var(--green) !important }
.gbfx .border-violet-400\/30 { border-color: var(--green) !important }
.gbfx .decoration-red-500 { text-decoration-color: var(--muted) !important }
.gbfx .from-violet-200 { --tw-gradient-from: var(--green-xl) !important }
.gbfx .from-violet-50 { --tw-gradient-from: var(--green-xl) !important }
.gbfx .from-violet-500 { --tw-gradient-from: var(--green) !important }
.gbfx .group:hover .group-hover\:bg-cyan-100 { background-color: var(--green-xl) !important }
.gbfx .group:hover .group-hover\:bg-cyan-50\/30 { background-color: var(--green-xl) !important }
.gbfx .group:hover .group-hover\:bg-violet-50\/30 { background-color: var(--green-xl) !important }
.gbfx .group:hover .group-hover\:border-cyan-200 { border-color: var(--rule) !important }
.gbfx .group:hover .group-hover\:border-cyan-300 { border-color: var(--green) !important }
.gbfx .group:hover .group-hover\:border-violet-200 { border-color: var(--rule) !important }
.gbfx .group:hover .group-hover\:border-violet-300 { border-color: var(--green) !important }
.gbfx .group:hover .group-hover\:text-cyan-700 { color: var(--green-d) !important }
.gbfx .group:hover .group-hover\:text-violet-700 { color: var(--green-d) !important }
.gbfx .hover\:border-cyan-300:hover { border-color: var(--green) !important }
.gbfx .hover\:shadow-cyan-500\/10:hover { --tw-shadow-color: rgba(19,38,27,.08) !important }
.gbfx .hover\:shadow-cyan-500\/5:hover { --tw-shadow-color: rgba(19,38,27,.08) !important }
.gbfx .hover\:shadow-violet-500\/10:hover { --tw-shadow-color: rgba(19,38,27,.08) !important }
.gbfx .hover\:shadow-violet-500\/20:hover { --tw-shadow-color: rgba(19,38,27,.08) !important }
.gbfx .hover\:shadow-violet-500\/5:hover { --tw-shadow-color: rgba(19,38,27,.08) !important }
.gbfx .shadow-amber-500\/10 { --tw-shadow-color: rgba(19,38,27,.08) !important }
.gbfx .shadow-cyan-500\/10 { --tw-shadow-color: rgba(19,38,27,.08) !important }
.gbfx .shadow-violet-500\/10 { --tw-shadow-color: rgba(19,38,27,.08) !important }
.gbfx .text-amber-500 { color: var(--amber) !important }
.gbfx .text-amber-600 { color: var(--amber) !important }
.gbfx .text-blue-700 { color: var(--green-d) !important }
.gbfx .text-cyan-600 { color: var(--green-d) !important }
.gbfx .text-cyan-700 { color: var(--green-d) !important }
.gbfx .text-orange-600 { color: var(--amber) !important }
.gbfx .text-orange-700 { color: var(--amber) !important }
.gbfx .text-rose-500 { color: var(--muted) !important }
.gbfx .text-rose-700 { color: var(--muted) !important }
.gbfx .text-sky-600 { color: var(--green-d) !important }
.gbfx .text-sky-700 { color: var(--green-d) !important }
.gbfx .text-slate-300 { color: var(--muted) !important }
.gbfx .text-slate-400 { color: var(--muted) !important }
.gbfx .text-slate-500 { color: var(--muted) !important }
.gbfx .text-slate-600 { color: var(--body) !important }
.gbfx .text-slate-700 { color: var(--body) !important }
.gbfx .text-slate-800 { color: var(--ink) !important }
.gbfx .text-slate-900 { color: var(--ink) !important }
.gbfx .text-violet-200 { color: var(--green) !important }
.gbfx .text-violet-300 { color: var(--green) !important }
.gbfx .text-violet-500 { color: var(--green-d) !important }
.gbfx .text-violet-600 { color: var(--green-d) !important }
.gbfx .text-violet-700 { color: var(--green-d) !important }
.gbfx .to-amber-400 { --tw-gradient-to: var(--amber-xl) !important }
.gbfx .to-cyan-400 { --tw-gradient-to: var(--green) !important }
.gbfx .to-cyan-50\/50 { --tw-gradient-to: var(--green-xl) !important }
.gbfx .to-purple-600 { --tw-gradient-to: var(--green) !important }
.gbfx .via-cyan-200 { --tw-gradient-via: var(--green-xl) !important }
.gbfx .via-cyan-400 { --tw-gradient-via: var(--green) !important }
.gbfx .via-cyan-50\/40 { --tw-gradient-via: var(--green-xl) !important }
.gbfx .via-cyan-50\/60 { --tw-gradient-via: var(--green-xl) !important }

/* small utility text sizes -> 12.5px minimum */
.gbfx .text-xs, .gbfx .text-\[9px\], .gbfx .text-\[10px\], .gbfx .text-\[11px\], .gbfx .text-\[12px\] { font-size: 12.5px !important; line-height: 1.4 !important; }
/* arbitrary brand greens -> tokens */
.gbfx .border-\[\#4caf50\] { border-color: var(--rule) !important; }
.gbfx .rounded-3xl { border-radius: 20px !important; }
.gbfx .bg-\[\#4caf50\] { background-color: var(--green) !important; }
.gbfx [class*="shadow-lg"], .gbfx [class*="shadow-md"], .gbfx [class*="shadow-xl"] { box-shadow: none !important; }


/* ===== Chapter styling (cards, lists, tags) ===== */
/* decorative glows and blobs */
.gbfx .blur-3xl, .gbfx .absolute.inset-0[class*="bg-gradient"], .gbfx .hidden.sm\:block.mt-6.relative.h-2 { display: none !important; }
.gbfx .absolute[class*="bg-gradient-to-bl"], .gbfx .absolute[class*="bg-gradient-to-tl"] { display: none !important; }
.gbfx .text-violet-200, .gbfx .text-violet-300 { color: rgba(255, 255, 255, .92) !important; }

/* Coming Soon tags */
.gbfx .gb-soon { background: var(--amber-xl) !important; color: var(--amber) !important; border-color: transparent !important; }
.gbfx .gb-soon .material-symbols-rounded { color: var(--amber); }

/* big chapter cards: white, 1px rule, no shadow */
.gbfx .bg-white.rounded-3xl { box-shadow: none !important; border: 1px solid var(--rule) !important; background: var(--paper) !important; }
.gbfx .bg-white.rounded-3xl:hover { box-shadow: none !important; }
.gbfx .fade-up { opacity: 1 !important; transform: none !important; }

/* icon tiles */
.gbfx .w-12.h-12.rounded-2xl, .gbfx .w-14.h-14.rounded-2xl {
  width: 44px !important; height: 44px !important; border-radius: 12px !important; border: 0 !important;
  background: var(--green-xl) !important; color: var(--green-d) !important; box-shadow: none !important;
}
.gbfx .w-10.h-10.rounded-xl { background: var(--green-xl) !important; color: var(--green-d) !important; }
.gbfx .w-12.h-12.bg-slate-900, .gbfx .w-12.h-12.rounded-2xl.bg-slate-900 { background: var(--green) !important; color: #fff !important; }

/* benefit lists as ruled rows */
.gbfx ul.list-none > li.rounded-2xl {
  border: 0 !important; border-top: 1px solid var(--rule) !important; border-radius: 0 !important; background: none !important; padding: 18px 0 !important;
}
.gbfx ul.list-none > li.rounded-2xl:last-child { border-bottom: 1px solid var(--rule) !important; }

/* ---------- 01 Platform: bento grid ---------- */
@media (min-width: 1024px) {
  [data-ch="platform"] .grid.lg\:grid-cols-3 { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto auto; }
  [data-ch="platform"] .grid.lg\:grid-cols-3 > .fade-up:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
  [data-ch="platform"] .grid.lg\:grid-cols-3 > .fade-up:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  [data-ch="platform"] .grid.lg\:grid-cols-3 > .fade-up:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
  [data-ch="platform"] .grid.lg\:grid-cols-3 > .fade-up:nth-child(4) { grid-area: 2 / 2 / 3 / 4; }
  [data-ch="platform"] .grid.lg\:grid-cols-3 > .fade-up:nth-child(5) { grid-area: 3 / 1 / 4 / 4; }
}
/* stats row at the bottom of Accounting & GL */
[data-ch="platform"] .grid > .fade-up:nth-child(1) > .relative { display: flex; flex-direction: column; }
[data-ch="platform"] .grid > .fade-up:nth-child(1) .grid { margin-top: auto !important; border-top: 1px solid var(--rule); padding-top: 20px; gap: 0 !important; }
[data-ch="platform"] .grid > .fade-up:nth-child(1) .grid > div {
  background: none !important; border: 0 !important; border-left: 1px solid var(--rule) !important; border-radius: 0 !important; padding: 4px 16px !important;
}
[data-ch="platform"] .grid > .fade-up:nth-child(1) .grid > div:first-child { border-left: 0 !important; padding-left: 0 !important; }
/* Unified Operations strip */
[data-ch="platform"] .grid > .fade-up:nth-child(5) .grid { gap: 0 !important; }
[data-ch="platform"] .grid > .fade-up:nth-child(5) .grid > div {
  background: none !important; border: 0 !important; border-left: 1px solid var(--rule) !important; border-radius: 0 !important; padding: 8px 24px !important;
}
[data-ch="platform"] .grid > .fade-up:nth-child(5) .grid > div:first-child { border-left: 0 !important; padding-left: 0 !important; }
[data-ch="platform"] .grid > .fade-up:nth-child(5) .opacity-60 { opacity: 1; filter: none; }
@media (max-width: 767px) {
  [data-ch="platform"] .grid > .fade-up:nth-child(5) .grid > div { border-left: 0 !important; border-top: 1px solid var(--rule) !important; padding: 16px 0 !important; }
  [data-ch="platform"] .grid > .fade-up:nth-child(5) .grid > div:first-child { border-top: 0 !important; }
}

/* ===== Chapters 05-08 ===== */
/* ---------- 05 Close: one bordered strip of 4 steps ---------- */
body .cl-strip { border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--paper); overflow: hidden; }
body .cl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 32px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
body .cl-head__text { display: flex; align-items: center; gap: 16px; }
body .cl-head h3 { font-size: 22px; margin: 0 0 4px; color: var(--ink); }
body .cl-head p { margin: 0; font-size: 15px; color: var(--muted); }
body .cl-bar { height: 4px; background: var(--rule); }
body .cl-bar .close-fill { display: block; height: 100%; width: 75%; background: var(--green); transform: none; }
body .cl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body .cl-step { padding: 32px 28px; border-left: 1px solid var(--rule); text-align: left; }
body .cl-step:first-child { border-left: 0; }
body .cl-circle { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--green); color: var(--green-d); background: var(--paper); margin-bottom: 16px; }
body .cl-step.is-done .cl-circle { background: var(--green); color: #fff; }
body .cl-circle .material-symbols-rounded { font-size: 24px; }
body .cl-label { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--green-d); margin-bottom: 4px; }
body .cl-step h3 { font-size: 19px; margin: 0 0 6px; color: var(--ink); }
body .cl-step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); }
@media (max-width: 991px) {
body .cl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .cl-step:nth-child(3) { border-left: 0; }
body .cl-step:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 575px) {
body .cl-steps { grid-template-columns: 1fr; }
body .cl-step { border-left: 0; border-top: 1px solid var(--rule); padding: 24px 20px; }
body .cl-step:first-child { border-top: 0; }
body .cl-head { padding: 20px; }
}
/* ---------- 06 Automate: light product panel ---------- */
body [data-ch="automate"] .bg-slate-900.rounded-3xl,
body [data-ch="automate"] #gbAgentic { background: var(--paper) !important; border: 1px solid var(--rule) !important; color: var(--body); }
body [data-ch="automate"] .text-white { color: var(--ink) !important; }
body [data-ch="automate"] .bg-violet-600 { background: var(--green) !important; color: #fff !important; }
body [data-ch="automate"] .rounded-3xl .border-slate-800 { border-color: var(--rule) !important; }
body #gbAgentic .ag-step { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; }
body #gbAgentic .ag-step.is-active { background: var(--green-xl); border-color: var(--green); }
body #gbAgentic .ag-num { background: var(--green-xl); color: var(--green-d); border-radius: 50%; }
body #gbAgentic .ag-step.is-active .ag-num { background: var(--green); color: #fff; }
body #gbAgentic .ag-title { color: var(--ink); font-size: 15.5px; }
body #gbAgentic .ag-text { color: var(--body); font-size: 13.5px; }
body #gbAgentic .ag-progress { background: var(--green); height: 3px; }
body #gbAgentic .ag-screen { border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--paper); box-shadow: 0 30px 60px -40px rgba(19, 38, 27, .45); }
/* ---------- 07 Tools ---------- */
body .tl-card { border-radius: var(--radius-card); border-color: var(--rule); }
body .tl-card:hover { box-shadow: none; border-color: var(--rule); }
body .tl-icon,
body .tl-icon.sky,
body .tl-icon.violet,
body .tl-icon.amber { background: var(--green-xl); color: var(--green-d); border: 0; }
body .tl-tag { background: var(--green-xl); border: 0; color: var(--green-d); font-size: 12.5px; }
body .tl-item { background: var(--tint); border-color: var(--rule); border-radius: 14px; }
body .tl-item:hover,
body .tl-item.is-active { border-color: var(--green); box-shadow: none; }
body .tl-item.is-active { background: var(--paper); }
body .tl-item-h { color: var(--ink); }
body .tl-item p { font-size: 14px; color: var(--body); }
body .tl-item p b { color: var(--ink); }
body .tl-progress { background: var(--green); }
body .tl-demo,
body .tl-pdf,
body .tl-csv,
body .tl-sheet,
body .tl-note-doc { border-color: var(--rule); box-shadow: 0 30px 60px -40px rgba(19, 38, 27, .45); }
body .tl-demo-toggle { background: var(--green-xl); border-color: var(--rule); }
body .tl-demo-biz,
body .tl-demo-toggle,
body .tl-steps li,
body .tl-sheet-bar,
body .tl-sheet-foot { background: var(--tint); border-color: var(--rule); }
body .tl-demo-card.live .material-symbols-rounded { color: var(--green-d); }
body .tl-flow { background: var(--tint); }
body .tl-arrow .material-symbols-rounded { background: var(--ink); color: var(--green); box-shadow: 0 0 0 5px var(--tint); }
body .tl-steps li > span { background: var(--green); }
body .tl-note { color: var(--amber); background: var(--amber-xl); border-color: transparent; font-size: 12.5px; }
body .tl-pdf-top,
body .tl-csv-top,
body .tl-menu,
body .tl-csv table,
body .tl-csv-foot,
body .tl-grid,
body .tl-sheet-bar b,
body .tl-sheet-bar em,
body .tl-sheet-foot,
body .tl-fx { font-size: 12.5px; }
body .tl-pdf-top em,
body .tl-csv-top em { font-size: 12.5px; }
body .tl-pdf-top .material-symbols-rounded { color: var(--muted); }
body .tl-csv-top .material-symbols-rounded { color: var(--green-d); }
body .tl-grid > span.h { font-size: 12.5px; color: var(--muted); }
body .tl-grid > span.sel { background: var(--green-xl); }
body .tl-demo-card em,
body .tl-demo-biz em,
body .tl-demo-toggle em { font-size: 12.5px; color: var(--muted); }
body .tl-note-body li { color: var(--body); }
body .tl-note-body li .material-symbols-rounded { color: var(--rule); }
body .tl-note-body li.done { color: var(--muted); }
/* ---------- 08 Compare: one bordered table ---------- */
body .cmp { border-radius: var(--radius-card); border: 1px solid var(--rule); background: var(--paper); padding: 0; box-shadow: none; overflow: hidden; }
body .cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
body .cmp-row + .cmp-row { margin-top: 0; }
body .cmp-arrow,
body .cmp-arrow-spacer { display: none; }
body .cmp-head { padding: 0; background: var(--tint); border-bottom: 1px solid var(--rule); }
body .cmp-col-title { padding: 18px 24px; font-size: 16px; }
body .cmp-col-title + .cmp-col-title { border-left: 1px solid var(--rule); }
body .cmp-dot { width: 10px; height: 10px; }
body .cmp-cell { border-radius: 0; padding: 18px 24px; gap: 14px; }
body .cmp-old { background: none; border: 0; border-top: 1px solid var(--rule); }
body .cmp-new { background: none; border: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
body .cmp-head + .cmp-row .cmp-old,
body .cmp-head + .cmp-row .cmp-new { border-top: 0; }
body .cmp-old .cmp-name { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; }
body .cmp-new .cmp-name { color: var(--ink); font-weight: 600; font-size: 15px; }
body .cmp-new .material-symbols-rounded { color: var(--green) !important; }
body .cmp-old .material-symbols-rounded { color: var(--muted) !important; }
body .cmp-tag { font-size: 12.5px; letter-spacing: .04em; }
body .cmp-tag-old { background: #eef1ed; color: var(--muted); }
body .cmp-tag-new { background: var(--green-xl); color: var(--green-d); }
body .cmp-health { margin-top: 0 !important; padding: 20px 24px; gap: 0 !important; border-top: 1px solid var(--rule); background: var(--tint); }
body .cmp-health > div { padding-right: 24px; }
body .cmp-health > div + div { padding-right: 0; padding-left: 24px; border-left: 1px solid var(--rule); }
body .cmp-health .text-slate-400,
body .cmp-health .text-slate-400 span { font-size: 12.5px !important; letter-spacing: .04em; }
body .cmp-health .progress-fill.bg-red-600 { background: #d99a2b !important; }
body .cmp-health > div:first-child .flex span:last-child { color: var(--amber); }
body .cmp-health > div:last-child .flex span:last-child { color: var(--green-d); }
body .cmp-health .progress-fill[class*="from-"] { background: var(--green) !important; background-image: none !important; }
@media (max-width: 767px) {
body .cmp-row { grid-template-columns: 1fr; }
body .cmp-new { border-left: 0; }
body .cmp-health > div + div { border-left: 0; padding-left: 0; margin-top: 16px; }
body .cmp-health > div { padding-right: 0; }
}

body [data-ch="automate"] .text-violet-200, body [data-ch="automate"] .text-violet-300 { color: var(--green-d) !important; }
body [data-ch="automate"] .border-violet-400\/30 { border-color: var(--rule) !important; }
body [data-ch="report"] .bg-violet-600 { background: var(--green-d) !important; }
body .tl-fx, body .tl-fx em { font-family: inherit; }
body .tl-csv { max-width: 100%; overflow-x: auto; }
body .tl-csv table { min-width: 0; }
/* Report chapter: Business Reports / Close Reports boxes (Bootstrap's .p-5 forces 48px; left padding set to 20px) */
body .gbfx .gb-rcard { padding-left: 20px !important; }
/* Reporting & Analytics banner (Live P&L): 60% of the original 128px height */
body .gbfx .gb-plbar { height: 77px; }
body .gbfx .gb-plbar > .bottom-4 { bottom: 10px; }