:root {
  color-scheme: light;
  --ink: #05070a;
  --muted: #647184;
  --line: #d7e1eb;
  --paper: #ffffff;
  --soft: #f4f9fd;
  --soft-2: #e9f5ff;
  --accent: #008ed6;
  --accent-dark: #005f9c;
  --accent-light: #38bdf8;
  --black: #050505;
  --shadow: 0 18px 50px rgba(0, 83, 139, 0.14);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.home-page #tools,
.home-page .featured-section {
  display: none;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(215, 225, 235, 0.9);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  object-fit: cover;
}

.tool-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  font-weight: 800;
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  color: #202938;
  font-size: 0.95rem;
}

.nav-links a:hover,
.site-footer a:hover,
.site-footer button:hover {
  color: var(--accent-dark);
}

.nav-auth-button {
  min-height: 2.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(0, 142, 214, 0.38);
  border-radius: var(--radius);
  color: var(--accent-dark);
  background: var(--soft-2);
  cursor: pointer;
  font-weight: 800;
}

.nav-search-icon {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-color: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #263244;
  background: var(--paper);
  cursor: pointer;
}

.nav-search-icon:hover {
  border-color: rgba(0, 142, 214, 0.38);
  color: var(--accent-dark);
  background: var(--soft-2);
}

.whatsapp-chat {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #25d366;
  box-shadow: 0 12px 30px rgba(12, 83, 42, 0.28);
}

.whatsapp-chat:hover,
.whatsapp-chat:focus-visible {
  background: #128c4a;
  transform: translateY(-2px);
}

.whatsapp-chat svg {
  width: 2rem;
  height: 2rem;
  stroke-width: 1.8;
}

.menu-button {
  display: none;
}

.icon-button,
.text-button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.section,
.section-band {
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 4rem);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(21rem, 0.96fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: calc(100vh - 4.4rem);
  background:
    radial-gradient(circle at 78% 14%, rgba(0, 142, 214, 0.18), transparent 34%),
    linear-gradient(115deg, rgba(0, 142, 214, 0.13), rgba(255, 255, 255, 0.94) 46%, rgba(5, 5, 5, 0.05)),
    var(--soft);
}

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 12ch;
  margin-bottom: 1.1rem;
  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: 0.94;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0.75rem;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 0.45rem;
  font-size: 1rem;
}

.hero-text {
  max-width: 43rem;
  color: #3f4b5b;
  font-size: clamp(1.04rem, 2vw, 1.25rem);
}

.hero-actions,
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.hero-actions {
  margin: 1.7rem 0 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.72rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 800;
}

.button.primary {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 10px 24px rgba(0, 142, 214, 0.28);
}

.button.primary:hover {
  background: var(--accent-dark);
}

.button.secondary {
  color: var(--ink);
  border-color: #111827;
  background: var(--paper);
}

.stats span {
  padding-right: 1.1rem;
  color: var(--muted);
  border-right: 1px solid var(--line);
}

.stats span:last-child {
  border-right: 0;
}

.stats strong {
  display: block;
  color: var(--ink);
  font-size: 1.25rem;
}

.hero-visual {
  overflow: hidden;
  border: 1px solid rgba(0, 95, 156, 0.18);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.visual-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--black), #07365b 54%, var(--accent));
}

.visual-brand img {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

.visual-brand strong,
.visual-brand small {
  display: block;
}

.visual-brand small {
  color: rgba(255, 255, 255, 0.78);
}

.visual-toolbar {
  display: flex;
  gap: 0.45rem;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
  background: #f8fbff;
}

.visual-toolbar span {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--black);
}

.visual-toolbar span:nth-child(2) {
  background: var(--accent-dark);
}

.visual-toolbar span:nth-child(3) {
  background: var(--accent);
}

.visual-search {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin: 1.1rem;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--soft);
}

.visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  padding: 0 1.1rem 1.1rem;
}

.visual-grid article,
.tool-card,
.featured-card,
.market-list article,
.stack-list article,
.blog-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.visual-grid article {
  display: grid;
  gap: 0.55rem;
  min-height: 9rem;
  padding: 1rem;
}

.home-products {
  background: var(--paper);
}

.home-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.home-product-card {
  display: grid;
  gap: 1rem;
  min-height: 20rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.home-product-card h3 {
  font-size: 1.45rem;
  line-height: 1.15;
}

.home-product-card p {
  color: var(--muted);
}

.home-product-card .button,
.home-product-card .text-button {
  align-self: end;
  justify-self: start;
  margin-top: auto;
}

.featured-product {
  color: #fff;
  background: linear-gradient(135deg, var(--black), #07365b 58%, var(--accent));
}

.featured-product p,
.featured-product .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.featured-product .button.secondary {
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
  background: transparent;
}

.product-number {
  color: var(--accent);
  font-size: 2rem;
  font-weight: 900;
}

.featured-product .product-number {
  color: var(--accent-light);
}

.partnership-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  background: var(--soft);
}

.partnership-copy p {
  color: var(--muted);
}

.partnership-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.partnership-options article {
  display: grid;
  gap: 0.45rem;
  min-height: 9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.partnership-options span {
  color: var(--muted);
}

.page-hero {
  min-height: 28rem;
  display: grid;
  align-content: center;
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 142, 214, 0.2), transparent 34%),
    linear-gradient(135deg, #ffffff, #f3f9ff 52%, #e9f5ff);
}

.page-hero h1 {
  max-width: 14ch;
}

.simple-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.simple-page-grid > * {
  display: grid;
  gap: 0.55rem;
  min-height: 10rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.simple-page-grid > a {
  align-content: center;
  color: var(--accent-dark);
  font-weight: 900;
}

.simple-page-grid p {
  color: var(--muted);
}

.search-page-section {
  display: grid;
  gap: 1rem;
}

.global-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
}

.global-search-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.global-result-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 13rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.global-result-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 83, 139, 0.12);
}

.global-result-card p {
  color: var(--muted);
}

.social-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  background:
    radial-gradient(circle at 78% 18%, rgba(0, 142, 214, 0.2), transparent 34%),
    linear-gradient(135deg, #ffffff, #f3f9ff 52%, #e9f5ff);
}

.social-hero h1 {
  max-width: 13ch;
}

.social-hero-visual {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  padding: 1.4rem;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--black), #07365b 58%, var(--accent));
  box-shadow: var(--shadow);
  text-align: center;
}

.social-hero-visual img {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

.social-hero-visual strong {
  font-size: 1.4rem;
}

.social-hero-visual span {
  color: rgba(255, 255, 255, 0.78);
}

.social-channels-section {
  background: var(--soft);
}

.social-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.social-video-card {
  display: grid;
  gap: 1rem;
  min-height: 27rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.social-video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 83, 139, 0.12);
}

.social-video-card p {
  color: var(--muted);
}

.social-video-card .button {
  align-self: end;
  margin-top: auto;
}

.social-video-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 13rem;
  overflow: hidden;
  border-radius: var(--radius);
  color: #fff;
  background: #101316;
}

.social-video-frame small {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  background: rgba(5, 5, 5, 0.7);
  font-weight: 800;
}

.social-platform-mark {
  position: absolute;
  left: 0.9rem;
  top: 0.75rem;
  font-size: 1.8rem;
  font-weight: 900;
}

.youtube-card .social-video-frame { background: #cc2027; }
.instagram-card .social-video-frame { background: linear-gradient(135deg, #833ab4, #e1306c, #fcb045); }
.linkedin-card .social-video-frame { background: #0a66c2; }
.facebook-card .social-video-frame { background: #1877f2; }
.wikipedia-card .social-video-frame { background: #202124; }
.whatsapp-community-card .social-video-frame { background: #25d366; }

.knowledge-symbol {
  font-family: Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.suggestion-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  background: var(--paper);
}

.suggestion-copy p {
  color: var(--muted);
}

.suggestion-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.suggestion-points span {
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(0, 142, 214, 0.25);
  border-radius: var(--radius);
  color: var(--accent-dark);
  background: var(--soft-2);
  font-size: 0.88rem;
  font-weight: 800;
}

.suggestion-form {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.suggestion-form label {
  display: grid;
  gap: 0.45rem;
  color: #263244;
  font-weight: 800;
}

.suggestion-form label small {
  color: var(--muted);
}

.suggestion-form input,
.suggestion-form select,
.suggestion-form textarea {
  width: 100%;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
}

.suggestion-form textarea {
  resize: vertical;
}

#suggestionMessage {
  min-height: 1.2rem;
  color: var(--accent-dark);
  font-weight: 800;
}

.lead-capture-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1.2fr);
  gap: 2rem;
  margin-bottom: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--black), #07365b 58%, var(--accent));
}

.lead-capture-copy p { color: rgba(255, 255, 255, 0.78); }
.lead-capture-copy .eyebrow { color: var(--accent-light); }
.lead-benefits { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lead-benefits span { padding: 0.4rem 0.6rem; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); font-size: .85rem; font-weight: 800; }
.lead-capture-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; padding: 1rem; border-radius: var(--radius); color: var(--ink); background: #fff; }
.lead-capture-form label { display: grid; gap: .4rem; font-weight: 800; }
.lead-capture-form label small { color: var(--muted); }
.lead-capture-form input, .lead-capture-form select { min-height: 2.8rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.lead-requirement, .lead-consent, .lead-capture-form .button, #leadCaptureMessage { grid-column: 1 / -1; }
.lead-consent { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 500 !important; }
.lead-consent input { min-height: auto; }
#leadCaptureMessage { min-height: 1.2rem; color: var(--accent-dark); font-weight: 800; }

.crm-body { background: #f3f6f9; }
.crm-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--line); background: #fff; }
.crm-header-actions { display: flex; gap: .65rem; }
.crm-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: calc(100vh - 4.5rem); }
.crm-sidebar { position: sticky; top: 4.5rem; height: calc(100vh - 4.5rem); padding: 1.2rem; color: #fff; background: #101316; }
.crm-sidebar nav { display: grid; gap: .35rem; margin-top: 1rem; }
.crm-sidebar a { padding: .65rem; border-radius: var(--radius); color: #cbd5e1; }
.crm-sidebar a:hover, .crm-sidebar a.active { color: #fff; background: #005f9c; }
.crm-content { display: grid; gap: 1rem; min-width: 0; padding: 1.25rem; overflow: hidden; }
.crm-page-heading, .crm-panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.crm-page-heading h1 { max-width: none; font-size: 2.3rem; }
.crm-page-heading > span { color: var(--muted); font-size: .85rem; }
.crm-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; min-width: 0; }
.crm-kpi-grid article { display: grid; gap: .45rem; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.crm-kpi-grid span { color: var(--muted); }
.crm-kpi-grid strong { font-size: 1.8rem; }
.crm-panel { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.crm-panel h2 { font-size: 1.5rem; }
.crm-filters { display: flex; gap: .6rem; }
.crm-filters input, .crm-filters select, .crm-table-wrap select { min-height: 2.4rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.crm-pipeline { display: grid; grid-template-columns: repeat(8, minmax(6.5rem, 1fr)); gap: .5rem; overflow-x: auto; margin: 1rem 0; }
.crm-pipeline div { display: grid; gap: .25rem; padding: .7rem; border-left: 3px solid var(--accent); background: var(--soft); }
.crm-pipeline span { color: var(--muted); font-size: .78rem; }
.crm-table-wrap { min-width: 0; overflow-x: auto; }
.crm-table-wrap table { width: 100%; border-collapse: collapse; }
.crm-table-wrap th, .crm-table-wrap td { padding: .75rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.crm-table-wrap th { color: var(--muted); font-size: .78rem; text-transform: uppercase; }
.crm-table-wrap td small { display: block; color: var(--muted); }
.crm-table-wrap tbody tr { cursor: pointer; }
.crm-table-wrap tbody tr:hover { background: var(--soft); }
.crm-empty { color: var(--muted); text-align: center; }
.customer-profile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.customer-profile > div { display: grid; gap: .25rem; padding: .75rem; background: var(--soft); }
.customer-profile span { color: var(--muted); font-size: .82rem; }
.profile-notes { grid-column: 1 / -1; }
.profile-notes textarea { min-height: 6rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); }
.crm-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.crm-module-grid:nth-of-type(2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm-module-list, .automation-grid { display: grid; gap: .5rem; }
.crm-module-list span, .automation-grid span { display: flex; justify-content: space-between; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.automation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.automation-grid b { color: #128c4a; }

.automation-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr); gap: 3rem; align-items: center; background: radial-gradient(circle at 78% 18%, rgba(0,142,214,.2), transparent 34%), linear-gradient(135deg,#fff,#f3f9ff 52%,#e9f5ff); }
.automation-hero h1 { max-width: 12ch; }
.automation-flow-preview { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .65rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.automation-flow-preview > div { display: grid; gap: .35rem; min-height: 9rem; padding: .8rem; border-radius: var(--radius); color: #fff; background: linear-gradient(135deg,var(--black),#07365b 58%,var(--accent)); }
.automation-flow-preview span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: var(--accent-dark); background: #fff; font-weight: 900; }
.automation-flow-preview small { color: rgba(255,255,255,.75); }
.automation-category-tabs { display: flex; gap: .55rem; overflow-x: auto; margin-bottom: 1rem; }
.automation-category-tabs button { flex: 0 0 auto; min-height: 2.4rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); color: #263244; background: #fff; cursor: pointer; font-weight: 800; }
.automation-category-tabs button.active { border-color: rgba(0,142,214,.38); color: var(--accent-dark); background: var(--soft-2); }
.automation-list-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1rem 0; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.automation-list-heading h3 { margin-top: .2rem; font-size: 1.5rem; }
.automation-list-heading > strong { color: var(--accent-dark); white-space: nowrap; }
.filters .chip-list { max-height: 24rem; padding-right: .35rem; overflow-y: auto; scrollbar-width: thin; }
.subscription-section { background: var(--soft); }
.billing-switch { display: flex; width: fit-content; margin: 0 auto 1.25rem; padding: .25rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.billing-switch button { padding: .65rem .9rem; border: 0; border-radius: calc(var(--radius) - 2px); color: var(--muted); background: transparent; cursor: pointer; font-weight: 800; }
.billing-switch button.active { color: #fff; background: var(--accent-dark); }
.billing-switch small { display: block; font-size: .68rem; }
.subscription-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.subscription-card { display: grid; align-content: start; gap: .85rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.subscription-card.featured { border: 2px solid var(--accent); box-shadow: 0 12px 28px rgba(0,95,156,.12); }
.subscription-card h3 { font-size: 1.45rem; }
.plan-label { width: fit-content; padding: .3rem .5rem; border-radius: var(--radius); color: var(--accent-dark); background: var(--soft-2); font-size: .75rem; font-weight: 900; }
.plan-price { display: flex; align-items: baseline; gap: .35rem; }
.plan-price strong { color: #142236; font-size: 2rem; }
.plan-price span, .subscription-card > p { color: var(--muted); }
.subscription-card ul { display: grid; gap: .55rem; margin: 0 0 .5rem; padding-left: 1.2rem; color: #263244; }
.subscription-card .button { margin-top: auto; }
.free-tool-attraction { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.free-tool-attraction > strong { display: block; margin-bottom: .7rem; }
.free-tool-attraction > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.free-tool-attraction a { padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--accent-dark); background: var(--soft-2); font-size: .82rem; font-weight: 800; text-decoration: none; }
.subscription-dialog { width: min(34rem,calc(100% - 2rem)); padding: 0; border: 0; border-radius: var(--radius); }
.subscription-dialog::backdrop { background: rgba(15,28,44,.66); }
.subscription-checkout-card { display: grid; gap: .9rem; padding: 1.25rem; }
.subscription-checkout-card label { display: grid; gap: .4rem; color: #263244; font-weight: 800; }
.subscription-checkout-card input { min-height: 2.8rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); }
.checkout-summary { display: grid; grid-template-columns: 1fr auto; gap: .55rem 1rem; padding: .85rem; border-radius: var(--radius); background: var(--soft); }
.checkout-summary span { color: var(--muted); }
.payment-security-note, .checkout-status { color: var(--muted); font-size: .82rem; }
.checkout-status:not(:empty) { padding: .75rem; border-radius: var(--radius); color: var(--accent-dark); background: var(--soft-2); }
.complete-tools-list-section { background: #fff; }
.complete-tools-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.complete-tools-list section { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.complete-tools-list h3 { display: flex; justify-content: space-between; gap: .75rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
.complete-tools-list h3 span { color: var(--accent-dark); font-size: .8rem; }
.complete-tools-list ol { display: grid; gap: .4rem; margin: .75rem 0 0; padding-left: 1.5rem; color: #263244; font-size: .86rem; }
@media (max-width: 900px) { .complete-tools-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .complete-tools-list { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .subscription-grid { grid-template-columns: 1fr; } }
.dashboard-header-actions { display: flex; align-items: center; gap: .75rem; }
.trial-status { padding: .45rem .6rem; border-radius: var(--radius); color: var(--accent-dark); background: var(--soft-2); font-size: .8rem; font-weight: 800; }
.product-dashboard-shell { display: grid; grid-template-columns: 15rem minmax(0,1fr); min-height: calc(100vh - 5rem); background: #f5f8fb; }
.product-sidebar { position: sticky; top: 0; display: grid; align-content: start; gap: 1rem; height: calc(100vh - 5rem); padding: 1.2rem; border-right: 1px solid var(--line); background: #fff; }
.product-sidebar nav { display: grid; gap: .25rem; }
.product-sidebar nav a { padding: .65rem .7rem; border-radius: var(--radius); color: #263244; font-weight: 700; text-decoration: none; }
.product-sidebar nav a:hover, .product-sidebar nav a.active { color: var(--accent-dark); background: var(--soft-2); }
.product-dashboard-content { min-width: 0; padding: 1.5rem; }
.dashboard-view { margin-bottom: 1.5rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.dashboard-title { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.dashboard-title h1 { margin: .2rem 0 .45rem; font-size: 2rem; }
.dashboard-title p { color: var(--muted); }
.dashboard-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; margin-top: 1.2rem; }
.dashboard-kpis article { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.dashboard-kpis span, .dashboard-kpis small { color: var(--muted); }
.dashboard-kpis strong { color: #142236; font-size: 1.55rem; }
.dashboard-panels, .account-grid, .access-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 1rem; }
.dashboard-panels article, .account-grid article, .access-grid article { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.quick-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.quick-action-grid a { padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--accent-dark); background: #fff; font-weight: 800; text-decoration: none; }
.usage-bar { height: .65rem; margin: 1rem 0 .6rem; overflow: hidden; border-radius: var(--radius); background: #dce7ef; }.usage-bar span { display: block; width: 4%; height: 100%; background: var(--accent); }
.account-grid article { display: grid; gap: .75rem; }.account-grid label { display: grid; gap: .35rem; font-weight: 800; }.account-grid input { min-height: 2.7rem; padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.account-status-row { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.platform-status-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .65rem; }.platform-status-grid article { display: flex; align-items: center; gap: .55rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); }.platform-status-grid article div { display: grid; margin-right: auto; }.platform-status-grid small { color: var(--muted); }.platform-status-grid a { color: var(--accent-dark); font-size: .8rem; font-weight: 800; }.platform-dot { width: .65rem; height: .65rem; border-radius: 50%; background: #a7b5c2; }
.crm-mini-pipeline { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: .5rem; margin: 1rem 0; }.crm-mini-pipeline article { display: grid; gap: .45rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }.crm-mini-pipeline span { color: var(--muted); font-size: .76rem; }.crm-mini-pipeline strong { font-size: 1.35rem; }
.analytics-bars { display: grid; gap: .75rem; margin-top: 1rem; }.analytics-bars div { display: grid; grid-template-columns: 10rem 1fr 6rem; gap: .75rem; align-items: center; }.analytics-bars b { height: .65rem; border-radius: var(--radius); background: linear-gradient(90deg,var(--accent) var(--value),#dce7ef var(--value)); }
.prd-plan-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .75rem; }.prd-plan-card { display: grid; align-content: start; gap: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }.prd-plan-card.featured { border: 2px solid var(--accent); background: var(--soft-2); }.prd-plan-card > span { color: var(--accent-dark); font-size: .72rem; font-weight: 900; }.prd-plan-card p strong { font-size: 1.55rem; }.prd-plan-card ul { display: grid; gap: .4rem; min-height: 9rem; padding-left: 1.15rem; font-size: .82rem; }
.payment-flow { display: flex; align-items: center; gap: .55rem; overflow-x: auto; margin: 1rem 0; }.payment-flow span { min-width: max-content; padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); font-weight: 800; }
.client-order-table { margin-top: 1rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.client-order-table table { width: 100%; border-collapse: collapse; background: #fff; }
.client-order-table th,.client-order-table td { padding: .75rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; font-size: .86rem; }
.client-order-table th { background: var(--soft); color: var(--muted); font-size: .75rem; text-transform: uppercase; }
.client-order-table tbody tr:last-child td { border-bottom: 0; }
.order-status { display: inline-block; padding: .28rem .5rem; border-radius: 4px; font-weight: 800; }.order-status.success { color: #146c43; background: #e8f7ef; }.order-status.failed { color: #a32929; background: #fff0f0; }
.table-action { border: 0; padding: .25rem; background: transparent; color: var(--primary); font: inherit; font-weight: 800; cursor: pointer; }.table-action:hover { text-decoration: underline; }
.empty-orders { margin: 1rem 0 0; padding: 1rem; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); background: var(--soft); }
.plan-access-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--soft-2); }.plan-access-banner p:last-child { color: var(--muted); }
.member-auth-card { width: 100%; }
.member-dialog { width: min(29rem,calc(100vw - 1rem)); height: min(32rem,calc(100dvh - 1rem)); max-height: calc(100dvh - 1rem); }
.member-dialog .member-auth-card,
.member-dialog .member-panel { height: 100%; min-height: 0; }
.member-dialog .member-panel { grid-template-columns: 1fr; }
.member-dialog .member-brand-block { display: none; }
.member-dialog .member-form-block { min-height: 0; height: 100%; overflow-y: auto; align-content: start; padding: 1.35rem; }
.auth-mode-switch { display: grid; grid-template-columns: repeat(2,1fr); gap: .3rem; padding: .25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.auth-mode-switch button { min-height: 2.5rem; border: 0; border-radius: calc(var(--radius) - 2px); color: var(--muted); background: transparent; cursor: pointer; font-weight: 800; }
.auth-mode-switch button.active { color: #fff; background: var(--accent-dark); }
#memberLookupStep, #memberDetailsStep, .member-otp-step { display: grid; gap: .85rem; }
.member-otp-step[hidden], #memberLookupStep[hidden], #memberDetailsStep[hidden] { display: none; }
.otp-resend-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--muted); font-size: .85rem; }
.otp-resend-row button:disabled { cursor: not-allowed; opacity: .45; }
.demo-otp-note { padding: .55rem; border-radius: var(--radius); color: var(--accent-dark); background: var(--soft-2); text-align: center; }
.session-notice { display: grid; gap: .25rem; margin-top: 1rem; padding: .75rem; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius); }
.session-notice span { font-size: .82rem; opacity: .86; }
@media(max-width:1100px){.prd-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.platform-status-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.crm-mini-pipeline{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){.product-dashboard-shell{grid-template-columns:1fr}.product-sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}.product-sidebar nav{display:flex;overflow-x:auto}.product-sidebar nav a{flex:0 0 auto}.dashboard-kpis,.dashboard-panels,.account-grid,.access-grid,.prd-plan-grid{grid-template-columns:1fr}.platform-status-grid{grid-template-columns:1fr}.analytics-bars div{grid-template-columns:1fr}.crm-mini-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-title{display:grid}}
@media(max-width:700px){.member-dialog{width:calc(100vw - 1rem);height:min(32rem,calc(100dvh - 1rem));max-height:calc(100dvh - 1rem)}.member-dialog .member-form-block{height:100%;padding:1rem}}

/* Keep interactions stable: no lifting, sliding, or animated scrolling. */
html { scroll-behavior: auto; }
.whatsapp-chat:hover,
.whatsapp-chat:focus-visible,
.global-result-card:hover,
.social-video-card:hover,
.pricing-card:hover,
.tool-card:hover,
.featured-card:hover,
.blog-grid article:hover,
.post-card:hover,
.testimonial-card:hover,
.video-testimonial-card:hover,
.success-story-card:hover,
.automation-tool-card:hover,
.automation-tool-card:focus-visible { transform: none; }
.hero-dropdown-menu { transform: none; transition: opacity .18s ease, visibility .18s; }
.hero-dropdown:hover .hero-dropdown-menu,
.hero-dropdown:focus-within .hero-dropdown-menu { transform: none; }
.nav-hover-menu { transform: translateX(-50%); transition: opacity .18s ease, visibility .18s; }
.nav-hover-item:hover .nav-hover-menu,
.nav-hover-item:focus-within .nav-hover-menu { transform: translateX(-50%); }
.sac-gpt-page { overflow: hidden; background: #f4f7fa; }
.sac-gpt-shell { display: grid; grid-template-columns: 15rem minmax(0,1fr); height: calc(100vh - 5rem); }
.sac-gpt-sidebar { display: grid; align-content: start; gap: 1.5rem; padding: 1rem; border-right: 1px solid var(--line); background: #fff; }
.sac-gpt-sidebar > .button { width: 100%; }
.sac-chat-history { display: grid; gap: .35rem; margin-top: .7rem; }
.sac-chat-history button { padding: .65rem; overflow: hidden; border: 0; border-radius: var(--radius); color: #263244; background: transparent; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.sac-chat-history button:hover { background: var(--soft-2); }
.sac-gpt-sidebar-footer { display: grid; gap: .45rem; margin-top: auto; }
.sac-gpt-sidebar-footer a { color: var(--accent-dark); font-size: .85rem; font-weight: 800; text-decoration: none; }
.sac-gpt-workspace { display: grid; grid-template-rows: auto minmax(0,1fr) auto auto auto; width: min(62rem,100%); min-height: 0; margin: 0 auto; padding: 1rem 1.5rem .75rem; }
.sac-gpt-heading { display: flex; align-items: center; gap: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.sac-gpt-heading h1 { font-size: 1.55rem; }.sac-gpt-heading p:last-child { color: var(--muted); font-size: .88rem; }
.sac-gpt-mark { width: 3rem; height: 3rem; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: #fff; }.sac-gpt-mark img { width: 100%; height: 100%; object-fit: cover; }
.sac-gpt-status { margin-left: auto; padding: .4rem .55rem; border-radius: var(--radius); color: var(--accent-dark); background: var(--soft-2); font-size: .72rem; font-weight: 900; }
.sac-chat { display: grid; align-content: start; gap: .85rem; min-height: 0; padding: 1rem 0; overflow-y: auto; }
.sac-message { display: flex; gap: .7rem; max-width: 82%; }.sac-message > span { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--accent-dark); font-size: .7rem; font-weight: 900; }.sac-message > div { padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.sac-message.user { flex-direction: row-reverse; justify-self: end; }.sac-message.user > span { background: #263244; }.sac-message.user > div { background: var(--soft-2); }
.sac-prompt-suggestions { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .65rem; }.sac-prompt-suggestions button { flex: 0 0 auto; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: var(--radius); color: #263244; background: #fff; cursor: pointer; font-size: .8rem; font-weight: 700; }
.sac-gpt-composer { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: end; gap: .55rem; padding: .6rem; border: 1px solid #aebdca; border-radius: var(--radius); background: #fff; box-shadow: 0 8px 24px rgba(20,34,54,.08); }.sac-gpt-composer textarea { max-height: 8.75rem; padding: .55rem 0; border: 0; outline: 0; resize: none; font: inherit; }.sac-gpt-composer input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }.sac-file-button,.sac-send-button { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.25rem; }.sac-file-button { color: var(--accent-dark); background: var(--soft-2); }.sac-send-button { color: #fff; background: var(--accent-dark); }.sac-gpt-composer small { grid-column: 2; color: var(--muted); }
.sac-gpt-disclaimer { padding-top: .45rem; color: var(--muted); font-size: .72rem; text-align: center; }
.sac-gpt-page .whatsapp-chat { bottom: 5.75rem; }
@media(max-width:800px){.sac-gpt-page{overflow:auto}.sac-gpt-shell{grid-template-columns:1fr;height:calc(100vh - 4.5rem)}.sac-gpt-sidebar{display:none}.sac-gpt-workspace{padding:.75rem}.sac-gpt-heading p:last-child,.sac-gpt-status{display:none}.sac-message{max-width:94%}}
.owner-dashboard-page { background: #f4f7fa; }
.owner-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); background: #fff; }
.owner-header > div { display: flex; align-items: center; gap: .65rem; }.owner-private-label { padding: .45rem .55rem; border-radius: var(--radius); color: #8a1c1c; background: #fff0f0; font-size: .78rem; font-weight: 900; }
.owner-shell { display: grid; grid-template-columns: 15rem minmax(0,1fr); min-height: calc(100vh - 5rem); }.owner-sidebar { position: sticky; top: 0; display: grid; align-content: start; gap: 1rem; height: calc(100vh - 5rem); padding: 1rem; border-right: 1px solid var(--line); background: #fff; }.owner-sidebar nav { display: grid; gap: .25rem; }.owner-sidebar nav a { padding: .65rem; border-radius: var(--radius); color: #263244; font-weight: 800; text-decoration: none; }.owner-sidebar nav a:hover { background: var(--soft-2); }.owner-content { min-width: 0; padding: 1.25rem; }.owner-section { margin-bottom: 1rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.owner-table-wrap { overflow-x: auto; }.owner-table-wrap table { width: 100%; border-collapse: collapse; }.owner-table-wrap th,.owner-table-wrap td { padding: .7rem; border-bottom: 1px solid var(--line); text-align: left; }.owner-table-wrap th { color: var(--muted); font-size: .78rem; }.owner-plan-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .65rem; }.owner-plan-summary article { display: grid; gap: .35rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }.owner-plan-summary strong { font-size: 1.5rem; }.owner-empty-state { padding: 1rem; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); background: var(--soft); }
.owner-login-dialog { width: min(26rem,calc(100vw - 1rem)); padding: 0; border: 0; border-radius: var(--radius); }.owner-login-dialog::backdrop { background: rgba(16,19,22,.68); }.owner-login-card { display: grid; gap: .85rem; padding: 1.25rem; }.owner-login-card img { width: 4.5rem; height: 4.5rem; border-radius: 50%; }.owner-login-card label { display: grid; gap: .35rem; font-weight: 800; }.owner-login-card input { min-height: 2.7rem; padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius); }.owner-login-card > a { color: var(--accent-dark); text-align: center; }
@media(max-width:800px){.owner-shell{grid-template-columns:1fr}.owner-sidebar{position:static;height:auto}.owner-sidebar nav{display:flex;overflow-x:auto}.owner-sidebar nav a{flex:0 0 auto}.owner-plan-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.partner-dashboard-page .partner-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.partner-dashboard-page .partner-card-grid article { display: grid; gap: .55rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.partner-dashboard-page .partner-card-grid span { color: var(--accent-dark); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.partner-dashboard-page .partner-card-grid h3 { margin: 0; }
.partner-dashboard-page .partner-card-grid p { color: var(--muted); }
.partner-dashboard-page .partner-card-grid a { color: var(--accent-dark); font-weight: 900; text-decoration: none; }
.partner-type-list { display: grid; gap: .65rem; }
.partner-type-list label { display: flex; align-items: center; gap: .55rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-weight: 800; }
.admin-dashboard-page .owner-private-label { color: #17406f; background: #eaf5ff; }
@media(max-width:900px){.partner-dashboard-page .partner-card-grid{grid-template-columns:1fr}}
.hero-dropdown { position: relative; display: inline-block; }
.hero-dropdown > .button { display: inline-flex; align-items: center; gap: .45rem; }
.hero-dropdown > .button span { font-size: 1.1rem; line-height: 1; }
.hero-dropdown-menu { position: absolute; z-index: 20; top: calc(100% + .45rem); left: 0; display: grid; width: max-content; min-width: 15rem; max-width: min(22rem,calc(100vw - 2rem)); max-height: 20rem; padding: .4rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 14px 35px rgba(20,34,54,.18); opacity: 0; visibility: hidden; transform: translateY(-.35rem); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.hero-dropdown:hover .hero-dropdown-menu, .hero-dropdown:focus-within .hero-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hero-dropdown-menu a { padding: .65rem .75rem; border-radius: calc(var(--radius) - 2px); color: #263244; font-size: .88rem; font-weight: 800; text-decoration: none; }
.hero-dropdown-menu a:hover, .hero-dropdown-menu a:focus-visible { color: var(--accent-dark); background: var(--soft-2); outline: none; }
.nav-hover-item { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-hover-trigger { display: inline-flex !important; align-items: center; gap: .25rem; }
.nav-chevron { font-size: .85rem; line-height: 1; }
.nav-hover-menu { position: absolute; z-index: 100; top: calc(100% - .15rem); left: 50%; display: grid; width: max-content; min-width: 12.5rem; max-width: 20rem; padding: .4rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 14px 35px rgba(20,34,54,.18); opacity: 0; visibility: hidden; transform: translate(-50%,-.35rem); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.nav-hover-item:hover .nav-hover-menu, .nav-hover-item:focus-within .nav-hover-menu { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.nav-hover-menu a { padding: .65rem .75rem !important; border-radius: calc(var(--radius) - 2px); color: #263244 !important; font-size: .84rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.nav-hover-menu a:hover, .nav-hover-menu a:focus-visible { color: var(--accent-dark) !important; background: var(--soft-2); outline: none; }
@media (max-width: 900px) {
  .nav-hover-item { display: block; width: 100%; }
  .nav-chevron, .nav-hover-menu { display: none; }
}
.automation-tool-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.automation-tool-card { display: grid; gap: .85rem; min-height: 24rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.automation-tool-card:hover, .automation-tool-card:focus-visible { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,95,156,.12); transform: translateY(-2px); outline: none; }
.automation-tool-card h3 { font-size: 1.25rem; }
.automation-tool-card .tool-open-button { margin-top: auto; }
.workflow-builder-section { background: var(--soft); }
.workflow-builder-section.workflow-builder-active .workflow-builder { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0,142,214,.12), 0 12px 30px rgba(0,95,156,.12); }
.workflow-builder { display: grid; gap: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.workflow-builder label { display: grid; gap: .45rem; color: #263244; font-weight: 800; }
.workflow-builder label small { color: var(--muted); }
.workflow-builder input, .workflow-builder select, .workflow-builder textarea { width: 100%; min-height: 2.8rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.workflow-builder textarea { resize: vertical; }
.workflow-step-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.workflow-output { min-height: 7rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); color: #263244; background: var(--soft-2); white-space: pre-wrap; font-weight: 800; }
.social-automation-section { background: #f8fbff; }
.social-process-flow { display: grid; grid-template-columns: repeat(9, auto); gap: .55rem; align-items: center; margin-bottom: 1rem; overflow-x: auto; }
.social-process-flow > div { display: grid; gap: .25rem; min-width: 9rem; min-height: 7rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.social-process-flow > div span, .builder-block-heading > span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: #fff; background: var(--accent); font-weight: 900; }
.social-process-flow small, .builder-block-heading small { color: var(--muted); }
.social-automation-builder { display: grid; gap: 1rem; }
.automation-builder-block { display: grid; gap: .85rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.builder-block-heading { display: flex; align-items: center; gap: .7rem; }
.builder-block-heading strong, .builder-block-heading small { display: block; }
.platform-checkbox-grid, .automation-toggle-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .65rem; }
.platform-checkbox-grid label, .automation-toggle-grid label { display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); font-weight: 800; }
.automation-toggle-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.social-content-fields { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: .75rem; }
.social-content-fields label { display: grid; gap: .4rem; color: #263244; font-weight: 800; }
.social-content-fields input, .social-content-fields select { min-height: 2.8rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.generated-social-content { min-height: 12rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); color: #263244; background: var(--soft-2); white-space: pre-wrap; }
.content-calendar-panel { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.content-calendar-list { display: grid; gap: .65rem; }
.content-calendar-list article { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 1rem; align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.content-calendar-list article div { display: grid; gap: .2rem; }
.content-calendar-list article span { color: var(--muted); font-size: .85rem; }
.calendar-actions { display: flex !important; align-items: center; gap: .55rem; }
.instagram-publisher-section { background: #fff; }
.platform-publish-selector { display: grid; grid-template-columns: auto repeat(2,minmax(0,1fr)); gap: .75rem; align-items: end; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.platform-publish-selector label { display: grid; gap: .4rem; color: #263244; font-weight: 800; }
.platform-publish-selector select { min-height: 2.8rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.selected-platform { display: flex; align-items: center; gap: .65rem; min-height: 2.8rem; padding-right: .5rem; }
.selected-platform small, .selected-platform strong { display: block; }
.selected-platform small { color: var(--muted); font-size: .75rem; }
.platform-logo { display: grid; place-items: center; width: 3rem; height: 3rem; flex: 0 0 auto; border-radius: var(--radius); color: #fff; background: linear-gradient(135deg,#833ab4,#e1306c,#fcb045); font-size: 1rem; font-weight: 900; }
.platform-logo img { width: 1.55rem; height: 1.55rem; object-fit: contain; filter: brightness(0) invert(1); }
.platform-logo[data-platform="Facebook"] { background: #1877f2; }
.platform-logo[data-platform="WhatsApp Business"] { border-radius: 50%; background: #25d366; }
.platform-logo[data-platform="LinkedIn"] { background: #0a66c2; text-transform: lowercase; }
.platform-logo[data-platform="YouTube"] { width: 3.35rem; border-radius: .7rem; background: #ff0000; }
.platform-automation-plan { display: grid; gap: .7rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid rgba(0,142,214,.25); border-radius: var(--radius); background: var(--soft-2); }
.platform-automation-plan > strong { color: var(--accent-dark); }
.platform-automation-plan > div { display: flex; align-items: center; gap: .55rem; overflow-x: auto; }
.platform-automation-plan span { display: flex; align-items: center; gap: .45rem; min-width: 10rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-size: .85rem; font-weight: 800; }
.platform-automation-plan span b { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--accent); }
.platform-automation-plan i { color: var(--accent-dark); font-style: normal; font-weight: 900; }
.instagram-connect-bar { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.instagram-account-status { display: flex; align-items: center; gap: .75rem; min-width: 0; margin-right: auto; }
.instagram-account-status strong, .instagram-account-status small { display: block; }
.instagram-account-status small { color: var(--muted); }
.instagram-publisher { display: grid; grid-template-columns: minmax(18rem,.8fr) minmax(22rem,1.2fr); gap: 1rem; margin-top: 1rem; }
.instagram-media-panel, .instagram-content-panel { display: grid; align-content: start; gap: .85rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.instagram-media-panel > input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.instagram-upload-zone { display: grid; place-items: center; min-height: 13rem; padding: 1rem; border: 1px dashed rgba(0,95,156,.42); border-radius: var(--radius); background: #fff; cursor: pointer; text-align: center; }
.instagram-upload-zone strong { color: var(--accent-dark); }
.instagram-upload-zone small { color: var(--muted); }
#instagramPreview { width: 100%; aspect-ratio: 1; border-radius: var(--radius); object-fit: cover; background: #fff; }
.instagram-content-panel label { display: grid; gap: .4rem; color: #263244; font-weight: 800; }
.instagram-content-panel label small { color: var(--muted); }
.instagram-content-panel input, .instagram-content-panel select, .instagram-content-panel textarea { width: 100%; min-height: 2.8rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.instagram-content-panel textarea { resize: vertical; }
.instagram-field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.instagram-connect-dialog { width: min(36rem,calc(100vw - 2rem)); padding: 0; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.instagram-connect-dialog::backdrop { background: rgba(16,19,22,.52); }
.instagram-connect-card { display: grid; gap: 1rem; padding: 1.2rem; background: var(--soft); }
.instagram-connect-card label { display: grid; gap: .4rem; font-weight: 800; }
.instagram-connect-card label small { color: var(--muted); }
.instagram-connect-card input { min-height: 2.8rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.instagram-security-note, .instagram-permission-list { display: grid; gap: .5rem; padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.instagram-security-note p { margin-bottom: 0; color: var(--muted); }
.instagram-permission-list span { padding-left: 1rem; color: #3f4b5b; }
.instagram-permission-list span::before { content: "✓"; margin-left: -1rem; margin-right: .4rem; color: #128c4a; font-weight: 900; }

.visual-grid small,
.tool-card p,
.featured-card p,
.market-list span,
.section-heading p,
.newsletter p,
.site-footer p {
  color: var(--muted);
}

.section-heading {
  max-width: 48rem;
  margin-bottom: 1.6rem;
}

.section-heading.compact {
  margin-bottom: 1rem;
}

.section-heading.compact h2 {
  font-size: 1.8rem;
}

.pricing-first {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.pricing-card {
  display: grid;
  gap: 0.7rem;
  min-height: 11rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  text-align: left;
}

.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 83, 139, 0.12);
}

.pricing-card.active {
  border-color: rgba(0, 142, 214, 0.38);
  background:
    linear-gradient(135deg, rgba(0, 142, 214, 0.1), rgba(255, 255, 255, 0.86)),
    var(--soft-2);
}

.pricing-card strong {
  font-size: 1.35rem;
}

.pricing-card small {
  color: var(--muted);
}

.pricing-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  font-weight: 900;
}

.text-tools-panel {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(0, 142, 214, 0.18);
  border-radius: var(--radius);
  background: var(--soft);
}

.text-tool-tabs {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.text-tool-tabs button {
  flex: 0 0 auto;
  min-height: 2.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #263244;
  background: var(--paper);
  cursor: pointer;
  font-weight: 800;
}

.text-tool-tabs button.active {
  border-color: rgba(0, 142, 214, 0.38);
  color: var(--accent-dark);
  background: var(--soft-2);
}

.text-tool-workspace {
  display: grid;
  gap: 0.85rem;
}

.text-tool-workspace label {
  display: grid;
  gap: 0.5rem;
  color: #263244;
  font-weight: 800;
}

.text-tool-workspace textarea {
  width: 100%;
  min-height: 12rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}

.text-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.text-tool-output {
  min-height: 8rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: #263244;
  white-space: pre-wrap;
}

.document-tools-panel {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(0, 142, 214, 0.18);
  border-radius: var(--radius);
  background: #f8fbff;
}

.document-tool-tabs {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.document-tool-tabs button {
  flex: 0 0 auto;
  min-height: 2.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #263244;
  background: var(--paper);
  cursor: pointer;
  font-weight: 800;
}

.document-tool-tabs button.active {
  border-color: rgba(0, 142, 214, 0.38);
  color: var(--accent-dark);
  background: var(--soft-2);
}

.document-tool-workspace {
  display: grid;
  gap: 0.85rem;
}

.document-upload-zone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 9rem;
  padding: 1rem;
  border: 1px dashed rgba(0, 95, 156, 0.42);
  border-radius: var(--radius);
  background: var(--paper);
}

.document-upload-zone p {
  margin-bottom: 0;
  color: var(--muted);
}

.document-upload-zone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.document-upload-icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  font-size: 0.78rem;
  font-weight: 900;
}

.document-option {
  display: grid;
  gap: 0.45rem;
  color: #263244;
  font-weight: 800;
}

.document-option small {
  color: var(--muted);
}

.document-option input {
  min-height: 2.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.selected-files,
.document-tool-output {
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--muted);
  white-space: pre-wrap;
}

.document-tool-output {
  min-height: 7rem;
  color: #263244;
}

.calculator-tools-panel {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(0, 142, 214, 0.18);
  border-radius: var(--radius);
  background: var(--soft);
}

.calculator-tool-tabs {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.calculator-tool-tabs button {
  flex: 0 0 auto;
  min-height: 2.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #263244;
  background: var(--paper);
  cursor: pointer;
  font-weight: 800;
}

.calculator-tool-tabs button.active {
  border-color: rgba(0, 142, 214, 0.38);
  color: var(--accent-dark);
  background: var(--soft-2);
}

.calculator-workspace {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.calculator-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.calculator-header strong,
.calculator-header p {
  display: block;
  margin-bottom: 0;
}

.calculator-header p {
  color: var(--muted);
}

.calculator-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.calculator-fields label {
  display: grid;
  gap: 0.45rem;
  color: #263244;
  font-weight: 800;
}

.calculator-fields input {
  min-height: 2.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.calculator-output {
  min-height: 7rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #263244;
  background: var(--soft-2);
  white-space: pre-wrap;
  font-weight: 800;
}

.calculator-note {
  color: var(--muted);
}

.finance-suite-panel {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(0, 142, 214, 0.18);
  border-radius: var(--radius);
  background: #f8fbff;
}

.finance-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.finance-category-grid article {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.finance-category-grid h3 {
  color: var(--accent-dark);
  font-size: 1.15rem;
}

.finance-tool-list {
  display: grid;
  gap: 0.5rem;
}

.finance-tool-list span {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  color: #3f4b5b;
  font-size: 0.9rem;
}

.finance-tool-list span:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.directory-shell {
  display: grid;
  grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.filters {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: 1.4rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.78rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.tool-search-control {
  display: grid;
  gap: 0.55rem;
}

.tool-search-control .button {
  width: 100%;
}

.search-box input,
.newsletter input,
.submit-card input,
.submit-card select,
.submit-card textarea {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip,
.segmented button {
  min-height: 2.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: #263244;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
}

.chip {
  padding: 0.45rem 0.65rem;
}

.chip.active,
.segmented button.active {
  border-color: rgba(0, 142, 214, 0.38);
  color: var(--accent-dark);
  background: var(--soft-2);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.result-bar span {
  font-weight: 800;
}

.text-button {
  color: var(--accent-dark);
  font-weight: 800;
}

.tool-grid,
.featured-grid,
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.tool-card,
.featured-card {
  display: grid;
  gap: 0.8rem;
  min-height: 22rem;
  padding: 1rem;
}

.tool-how-to {
  padding: 0.75rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--soft);
}

.tool-about > strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--accent-dark);
  font-size: 0.82rem;
}

.tool-about p {
  margin-bottom: 0;
}

.tool-how-to strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--accent-dark);
  font-size: 0.82rem;
}

.tool-how-to p {
  margin-bottom: 0;
  color: #4b5665;
  font-size: 0.88rem;
  line-height: 1.45;
}

.tool-card:hover,
.featured-card:hover,
.blog-grid article:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 83, 139, 0.12);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius);
  background: #edf7ff;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: auto;
}

.card-tags span {
  padding: 0.25rem 0.45rem;
  border-radius: var(--radius);
  color: var(--accent-dark);
  background: var(--soft-2);
  font-size: 0.78rem;
  font-weight: 800;
}

.tool-open-button {
  width: 100%;
  min-height: 2.45rem;
  margin-top: 0.25rem;
  border: 1px solid rgba(0, 142, 214, 0.38);
  border-radius: var(--radius);
  color: var(--accent-dark);
  background: var(--soft-2);
  cursor: pointer;
  font-weight: 900;
}

.tool-open-button:hover {
  color: #fff;
  background: var(--accent);
}

.tool-launch-dialog {
  width: min(42rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.tool-launch-dialog::backdrop {
  background: rgba(16, 19, 22, 0.52);
}

.tool-launch-card {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  background: var(--soft);
}

.tool-launch-card > p {
  color: var(--muted);
}

.tool-launch-card label {
  display: grid;
  gap: 0.45rem;
  color: #263244;
  font-weight: 800;
}

.tool-launch-card label small {
  color: var(--muted);
}

.tool-launch-card textarea,
.tool-launch-card input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.tool-launch-card textarea {
  resize: vertical;
}

.tool-launch-output {
  min-height: 6rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #263244;
  background: var(--paper);
  white-space: pre-wrap;
}

.featured-section {
  background: var(--soft);
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.market-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.market-list article,
.stack-list article,
.blog-grid article {
  padding: 1rem;
}

.market-list strong,
.market-list span,
.stack-list span,
.stack-list strong {
  display: block;
}

.multi-column {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  background: #f8fbff;
}

.stack-list {
  display: grid;
  gap: 0.75rem;
}

.stack-list span,
.blog-grid span {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
}

.blog-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  gap: 1.5rem;
  align-items: start;
}

.blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-grid article {
  min-height: 11rem;
}

.blog-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  background:
    radial-gradient(circle at 80% 20%, rgba(0, 142, 214, 0.2), transparent 34%),
    linear-gradient(135deg, #f7fbff, #ffffff 48%, #edf7ff);
}

.blog-hero h1 {
  max-width: 13ch;
}

.blog-hero-card {
  display: grid;
  gap: 0.8rem;
  padding: 1.2rem;
  border: 1px solid rgba(0, 95, 156, 0.18);
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--black), #07365b 58%, var(--accent));
  box-shadow: var(--shadow);
}

.blog-hero-card img {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

.blog-hero-card strong {
  font-size: 1.35rem;
}

.blog-hero-card span {
  color: rgba(255, 255, 255, 0.78);
}

.blog-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

.blog-main {
  display: grid;
  gap: 1rem;
}

.blog-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1rem;
  align-items: end;
}

.blog-search {
  margin-bottom: 0.4rem;
}

.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
  gap: 1.2rem;
  align-items: stretch;
  padding: 1.2rem;
  border: 1px solid rgba(0, 95, 156, 0.18);
  border-radius: var(--radius);
  background: var(--soft);
}

.featured-post h2 {
  max-width: 14ch;
}

.post-metrics {
  display: grid;
  gap: 0.75rem;
}

.post-metrics span {
  display: grid;
  align-content: center;
  min-height: 4.2rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--muted);
}

.post-metrics strong {
  color: var(--ink);
  font-size: 1.15rem;
}

.category-strip,
.topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.category-strip {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.category-strip button,
.topic-list a {
  min-height: 2.3rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: #263244;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 800;
}

.category-strip button.active,
.topic-list a:hover {
  border-color: rgba(0, 142, 214, 0.38);
  color: var(--accent-dark);
  background: var(--soft-2);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.post-card,
.blog-sidebar-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.post-card {
  display: grid;
  gap: 0.85rem;
  min-height: 16rem;
  padding: 1rem;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 83, 139, 0.12);
}

.post-card h3 {
  font-size: 1.3rem;
  line-height: 1.15;
}

.post-card p {
  color: var(--muted);
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  color: var(--muted);
  font-weight: 800;
}

.post-card-footer a {
  color: var(--accent-dark);
}

.blog-sidebar {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: 1rem;
}

.blog-sidebar-card {
  padding: 1rem;
}

.blog-sidebar-card h2 {
  font-size: 1.65rem;
}

.dark-card {
  color: #fff;
  background: var(--black);
}

.dark-card p,
.dark-card .eyebrow {
  color: rgba(255, 255, 255, 0.76);
}

.dark-card .button.secondary {
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
  background: transparent;
}

.review-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  background:
    radial-gradient(circle at 78% 18%, rgba(0, 142, 214, 0.2), transparent 34%),
    linear-gradient(135deg, #ffffff, #f3f9ff 52%, #e9f5ff);
}

.review-hero h1 {
  max-width: 11ch;
}

.google-card {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.4rem;
  border: 1px solid rgba(0, 95, 156, 0.18);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: center;
}

.google-card img {
  width: 7rem;
  height: 7rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  object-fit: cover;
}

.google-card strong {
  font-size: 1.35rem;
}

.google-card span,
.google-card small {
  color: var(--muted);
}

.google-logo {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: #fff;
  background: conic-gradient(#4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
  font-weight: 900;
}

.google-logo span {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  color: #202124;
  background: #fff;
}

.stars {
  color: #fbbc05;
  font-size: 1.6rem;
  letter-spacing: 0;
}

.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

.step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.step-list article,
.review-note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.step-list article {
  display: grid;
  gap: 0.65rem;
  padding: 1rem;
}

.step-list span {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-weight: 900;
}

.step-list p,
.review-note p {
  color: var(--muted);
}

.review-note {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--soft);
}

.review-note h2 {
  font-size: 1.75rem;
}

.review-note code {
  display: block;
  overflow-wrap: anywhere;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--accent-dark);
  background: var(--paper);
  font-size: 0.9rem;
}

.testimonials-section {
  background: var(--soft);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.testimonial-card {
  display: grid;
  gap: 0.85rem;
  min-height: 17rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 83, 139, 0.12);
}

.featured-testimonial {
  border-color: rgba(0, 142, 214, 0.38);
  color: #fff;
  background: linear-gradient(135deg, var(--black), #07365b 58%, var(--accent));
}

.featured-testimonial p,
.featured-testimonial .testimonial-top span {
  color: rgba(255, 255, 255, 0.78);
}

.testimonial-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.testimonial-top strong,
.testimonial-top span {
  display: block;
}

.testimonial-top span {
  color: var(--muted);
  font-size: 0.9rem;
}

.avatar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  font-weight: 900;
}

.featured-testimonial .avatar {
  color: var(--accent-dark);
  background: #fff;
}

.testimonial-card p {
  color: var(--muted);
}

.video-testimonials-section {
  background: #fff;
}

.video-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.video-testimonial-card {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.video-testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 83, 139, 0.12);
}

.video-testimonial-card p {
  color: var(--muted);
}

.video-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 12rem;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(5, 5, 5, 0.72), rgba(0, 95, 156, 0.42)),
    radial-gradient(circle at 24% 20%, rgba(56, 189, 248, 0.85), transparent 28%),
    #08111c;
}

.video-frame::before {
  content: "SAC";
  position: absolute;
  left: 1rem;
  top: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  font-size: 2rem;
  font-weight: 900;
}

.video-frame span {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  padding: 0.22rem 0.45rem;
  border-radius: var(--radius);
  color: #fff;
  background: rgba(5, 5, 5, 0.72);
  font-size: 0.82rem;
  font-weight: 900;
}

.play-button {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 0;
  border-radius: 50%;
  color: var(--accent-dark);
  background: #fff;
  box-shadow: 0 18px 35px rgba(5, 5, 5, 0.2);
  cursor: pointer;
}

.play-button svg {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 0.2rem;
  fill: currentColor;
}

.featured-video {
  color: #fff;
  background: linear-gradient(135deg, var(--black), #07365b 58%, var(--accent));
}

.featured-video p,
.featured-video .testimonial-top span {
  color: rgba(255, 255, 255, 0.78);
}

.featured-video .avatar {
  color: var(--accent-dark);
  background: #fff;
}

.success-stories-section {
  background: var(--soft);
}

.success-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.success-story-card {
  display: grid;
  gap: 0.85rem;
  min-height: 19rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(0, 142, 214, 0.06), rgba(255, 255, 255, 0) 42%),
    var(--paper);
}

.success-story-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 83, 139, 0.12);
}

.success-story-card h3 {
  font-size: 1.35rem;
  line-height: 1.15;
}

.success-story-card p {
  color: var(--muted);
}

.story-featured {
  border-color: rgba(0, 142, 214, 0.38);
  color: #fff;
  background: linear-gradient(135deg, var(--black), #07365b 58%, var(--accent));
}

.story-featured p,
.story-featured .story-result span {
  color: rgba(255, 255, 255, 0.78);
}

.story-label {
  width: fit-content;
  padding: 0.32rem 0.55rem;
  border-radius: var(--radius);
  color: var(--accent-dark);
  background: var(--soft-2);
  font-size: 0.78rem;
  font-weight: 900;
}

.story-featured .story-label {
  color: var(--accent-dark);
  background: #fff;
}

.story-result {
  display: grid;
  gap: 0.1rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.story-featured .story-result {
  border-top-color: rgba(255, 255, 255, 0.25);
}

.story-result strong {
  color: var(--accent-dark);
  font-size: 2rem;
  line-height: 1;
}

.story-featured .story-result strong {
  color: #fff;
}

.story-result span {
  color: var(--muted);
  font-weight: 800;
}

.newsletter,
.submit-card,
.member-card {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.newsletter label,
.submit-card label,
.member-card label {
  display: grid;
  gap: 0.45rem;
  color: #263244;
  font-weight: 800;
}

.newsletter input,
.submit-card input,
.submit-card select,
.submit-card textarea,
.member-card input {
  min-height: 2.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.member-card label small {
  color: var(--muted);
  font-weight: 700;
}

.submit-card textarea {
  resize: vertical;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem clamp(1rem, 4vw, 4rem);
  border-top: 1px solid var(--line);
  background: var(--black);
  color: #f7fafc;
}

.site-footer p {
  margin-bottom: 0;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.2rem;
  justify-content: flex-end;
}

.site-footer a,
.site-footer button {
  border: 0;
  background: transparent;
  color: #d7dee7;
  cursor: pointer;
}

.vision-footer {
  display: grid;
  grid-template-columns: minmax(18rem, 1.5fr) repeat(3, minmax(9rem, 0.7fr));
  gap: 2rem;
  align-items: start;
  padding-top: 3rem;
}

.footer-vision {
  max-width: 34rem;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}

.footer-brand img {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

.footer-brand strong,
.footer-brand small {
  display: block;
}

.footer-brand small,
.footer-vision p,
.footer-bottom {
  color: #aeb9c8;
}

.footer-vision-label {
  margin-bottom: 0.35rem;
  color: var(--accent-light) !important;
  font-weight: 900;
  text-transform: uppercase;
}

.footer-column {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.footer-column > strong {
  margin-bottom: 0.35rem;
  color: #fff;
}

.footer-column a,
.footer-column button {
  width: fit-content;
  padding: 0;
  text-align: left;
}

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.9rem;
}

.submit-dialog,
.member-dialog {
  width: min(38rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.member-dialog {
  width: min(52rem, calc(100vw - 2rem));
}

.submit-dialog::backdrop,
.member-dialog::backdrop {
  background: rgba(16, 19, 22, 0.52);
}

.member-card {
  padding: 0;
  overflow: hidden;
}

.member-panel {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(18rem, 1.1fr);
}

.member-brand-block,
.member-form-block {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
}

.member-brand-block {
  align-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--black), #07365b 58%, var(--accent));
}

.member-brand-block img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

.member-brand-block p,
.member-brand-block .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.member-form-block {
  background: var(--soft);
}

.dialog-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.dialog-header h2 {
  font-size: 2rem;
}

#newsletterMessage,
#submitMessage,
#blogNewsletterMessage,
#memberMessage {
  min-height: 1.2rem;
  color: var(--accent-dark);
  font-weight: 800;
}

@media (max-width: 980px) {
  .nav-links {
    display: none;
  }

  .menu-button {
    display: inline-grid;
  }

  .hero,
  .blog-hero,
  .review-hero,
  .social-hero,
  .suggestion-section,
  .lead-capture-section,
  .blog-page-layout,
  .review-layout,
  .blog-toolbar,
  .featured-post,
  .partnership-section,
  .directory-shell,
  .split-section,
  .multi-column,
  .blog-newsletter {
    grid-template-columns: 1fr;
  }

  .member-panel {
    grid-template-columns: 1fr;
  }

  .crm-shell { grid-template-columns: 1fr; }
  .crm-sidebar { position: static; height: auto; }
  .crm-sidebar nav { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: auto; }
  .crm-kpi-grid, .crm-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-hero { grid-template-columns: 1fr; }
  .instagram-publisher { grid-template-columns: 1fr; }
  .automation-tool-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .platform-checkbox-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .automation-toggle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

  .hero {
    min-height: auto;
  }

  h1 {
    max-width: 11ch;
  }

  .blog-sidebar {
    position: static;
  }

  .filters {
    position: static;
  }

  .tool-grid,
  .featured-grid,
  .home-product-grid,
  .simple-page-grid,
  .global-search-results,
  .social-video-grid,
  .blog-grid,
  .post-grid,
  .pricing-first,
  .step-list,
  .testimonial-grid,
  .video-testimonial-grid,
  .success-story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calculator-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .site-header,
  .site-footer {
    align-items: flex-start;
  }

  .site-footer {
    flex-direction: column;
  }

  .vision-footer {
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    justify-content: flex-start;
  }

  .footer-bottom {
    grid-column: auto;
    flex-direction: column;
  }

  .hero-actions,
  .button {
    width: 100%;
  }

  .stats {
    align-items: stretch;
  }

  .stats span {
    flex: 1 1 8rem;
    border-right: 0;
  }

  .visual-grid,
  .tool-grid,
  .featured-grid,
  .home-product-grid,
  .simple-page-grid,
  .global-search-results,
  .social-video-grid,
  .market-list,
  .partnership-options,
  .blog-grid,
  .post-grid,
  .pricing-first,
  .step-list,
  .testimonial-grid,
  .video-testimonial-grid,
  .success-story-grid {
    grid-template-columns: 1fr;
  }

  .result-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .whatsapp-chat {
    right: 0.9rem;
    bottom: 0.9rem;
    width: 3.25rem;
    height: 3.25rem;
  }

  .global-search-form {
    grid-template-columns: 1fr;
  }

  .lead-capture-form, .crm-kpi-grid, .crm-module-grid, .crm-module-grid:nth-of-type(2), .customer-profile { grid-template-columns: 1fr; }
  .crm-header, .crm-page-heading, .crm-panel-heading { align-items: stretch; flex-direction: column; }
  .crm-header-actions, .crm-filters { flex-direction: column; }
  .crm-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-tool-grid, .workflow-step-grid { grid-template-columns: 1fr; }
  .automation-flow-preview { grid-template-columns: 1fr; }
  .automation-flow-preview > b { text-align: center; transform: rotate(90deg); }
  .platform-checkbox-grid, .automation-toggle-grid, .social-content-fields { grid-template-columns: 1fr; }
  .content-calendar-list article { grid-template-columns: 1fr; }
  .instagram-connect-bar { align-items: stretch; flex-direction: column; }
  .instagram-field-row { grid-template-columns: 1fr; }
  .platform-publish-selector { grid-template-columns: 1fr; }

  .calculator-fields {
    grid-template-columns: 1fr;
  }

  .finance-category-grid {
    grid-template-columns: 1fr;
  }

  .document-upload-zone {
    grid-template-columns: 1fr;
  }

  .document-upload-zone .button {
    width: 100%;
  }
}