/* WA.Expert v2 content bridge.
   Legacy content styles (forked from style.css, minus nav, footer, FAQ and buttons)
   with legacy tokens remapped to the v2 palette. Load BEFORE v2.css. */
:root{
  --green-900:#0d2621;--green-800:#0a5c4f;--green-700:#0d7a5e;--green-600:#25d366;--green-500:#2fc46a;
  --green-400:#53d48a;--green-300:#7ddfa8;--green-200:#bfe9d3;--green-100:#e2f5ea;--green-50:#f0f8f4;
  --white:#ffffff;--cream:#f5f8f6;
  --gray-50:#f2f6f4;--gray-100:#e6eeea;--gray-200:#dce6e2;--gray-300:#c9d7d2;--gray-400:#8fa39c;
  --gray-500:#5f736d;--gray-600:#3d5650;--gray-700:#24403a;--gray-800:#17302b;--gray-900:#0d2621;
  --whatsapp:#25d366;--whatsapp-dark:#0a5c4f;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Geist Mono',ui-monospace,monospace;
  --section-padding:84px 0;--container-max:1160px;--container-pad:0 28px;
  --shadow-sm:0 1px 2px rgba(13,38,33,.06),0 2px 8px rgba(13,38,33,.05);
  --shadow-md:0 8px 28px rgba(13,38,33,.09);--shadow-lg:0 22px 56px rgba(13,38,33,.13);
  --shadow-green:0 8px 28px rgba(37,211,102,.22);
  --ease:cubic-bezier(.4,0,.2,1);--duration:.25s;--transition:all .25s cubic-bezier(.4,0,.2,1);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;--radius-full:999px;
}
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
html {scroll-behavior: smooth; -webkit-font-smoothing: antialiased;}
body {font-family: var(--font-body);
  background: var(--white);
  color: var(--gray-700);
  line-height: 1.6;
  overflow-x: hidden;}
img {max-width: 100%; display: block;}
a {text-decoration: none; color: inherit;}
ul {list-style: none;}
.display-xl {font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--green-900);}
.display-lg {font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--green-900);}
.display-md {font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--green-900);}
.heading-lg {font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--green-900);}
.heading-md {font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--green-900);}
.body-lg {font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--gray-600);}
.body-md {font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray-500);}
.label {font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-600);}
.container {max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--container-pad);}
.hero-padding {padding: 40px 0px;}
.section {padding: var(--section-padding);}
.section-sm {padding: 60px 0;}
.section-lg {padding: 140px 0;}
.grid-2 {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;}
.grid-3 {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
.grid-4 {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
.flex {display: flex;}
.flex-center {display: flex; align-items: center; justify-content: center;}
.flex-between {display: flex; align-items: center; justify-content: space-between;}
.gap-8 {gap: 8px;}
.gap-16 {gap: 16px;}
.gap-24 {gap: 24px;}
.gap-32 {gap: 32px;}
.gap-48 {gap: 48px;}
.text-center {text-align: center;}
.badge {display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;}
.badge-green {background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-100);}
.badge-white {background: white;
  color: var(--green-700);
  border: 1px solid rgba(255,255,255,0.3);}
.tag {display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;}
.tag-green {background: var(--green-100); color: var(--green-700);}
.tag-gray {background: var(--gray-100); color: var(--gray-500);}
.card {background: white;
  border: 1px solid rgba(10,36,20,0.07);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all var(--duration) var(--ease);}
.card:hover {border-color: var(--green-200, #a8e6c4);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);}
.card-featured {background: var(--green-900);
  color: white;
  border-color: var(--green-800);}
.card-icon {width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
  background: var(--green-50);}
.card-featured .card-icon {background: rgba(255,255,255,0.1);}
.stat-number {font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  color: var(--green-700);
  line-height: 1;}
.stat-label {font-size: 14px;
  color: var(--gray-400);
  font-weight: 500;
  margin-top: 6px;}
.section-header {margin-bottom: 64px;}
.section-header.center {text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 64px;}
.section-eyebrow {display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;}
.section-eyebrow.center {justify-content: center;}
.eyebrow-line {width: 24px;
  height: 2px;
  background: var(--green-500);
  border-radius: 2px;}
.hero-bg {position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;}
.hero-pattern {position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.07;}
.hero-pattern-1 {background: var(--green-500);
  top: -200px;
  right: -100px;}
.hero-pattern-2 {background: var(--green-300);
  bottom: -200px;
  left: -100px;}
.divider {width: 100%;
  height: 1px;
  background: rgba(10,36,20,0.07);}
.wa-mockup {background: #e5ddd5;
  border-radius: var(--radius-lg);
  padding: 20px;
  font-size: 14px;
  max-width: 320px;}
.wa-msg {max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 8px;
  line-height: 1.5;
  position: relative;}
.wa-msg-in {background: white;
  border-radius: 0 12px 12px 12px;
  margin-right: auto;}
.wa-msg-out {background: #d9fdd3;
  border-radius: 12px 0 12px 12px;
  margin-left: auto;}
.wa-msg-time {font-size: 11px;
  color: #667781;
  text-align: right;
  margin-top: 3px;}
.testimonial {background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid rgba(10,36,20,0.06);}
.testimonial-quote {font-size: 18px;
  font-style: italic;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 24px;}
.testimonial-author {display: flex;
  align-items: center;
  gap: 12px;}
.testimonial-avatar {width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;}
.testimonial-name {font-weight: 600;
  color: var(--green-900);
  font-size: 15px;}
.testimonial-role {font-size: 13px;
  color: var(--gray-400);}
.pricing-card {background: white;
  border: 1.5px solid rgba(10,36,20,0.08);
  border-radius: var(--radius-xl);
  padding: 40px;
  position: relative;
  transition: all var(--duration) var(--ease);}
.pricing-card:hover {box-shadow: var(--shadow-lg);
  transform: translateY(-4px);}
.pricing-card.featured {background: var(--green-900);
  border-color: var(--green-700);
  color: white;}
.pricing-card .popular-badge {position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green-500);
  color: white;
  padding: 5px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;}
.pricing-price {font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  color: var(--green-700);
  line-height: 1;}
.pricing-card.featured .pricing-price {color: white;}
.pricing-period {font-size: 14px;
  color: var(--gray-400);
  font-weight: 500;}
.pricing-card.featured .pricing-period {color: rgba(255,255,255,0.6);}
.pricing-feature {display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--gray-600);
  border-bottom: 1px solid rgba(10,36,20,0.05);}
.pricing-card.featured .pricing-feature {color: rgba(255,255,255,0.8);
  border-bottom-color: rgba(255,255,255,0.08);}
.pricing-check {color: var(--green-500);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;}
.pricing-card.featured .pricing-check {color: var(--green-300);}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,165,92,0.3); }
  50%       { box-shadow: 0 0 0 12px rgba(34,165,92,0); }
}
.animate-fade-up {animation: fadeUp 0.7s var(--ease) forwards;}
.animate-delay-1 {animation-delay: 0.1s; opacity: 0;}
.animate-delay-2 {animation-delay: 0.2s; opacity: 0;}
.animate-delay-3 {animation-delay: 0.3s; opacity: 0;}
.animate-delay-4 {animation-delay: 0.4s; opacity: 0;}
.animate-delay-5 {animation-delay: 0.5s; opacity: 0;}
.reveal {opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);}
.reveal.visible {opacity: 1;
  transform: translateY(0);}
@media (max-width: 1024px) {
  .grid-4 {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 768px) {
  :root {--section-padding: 64px 0;
    --container-pad: 0 20px;}
  .grid-2, .grid-3, .grid-4 {grid-template-columns: 1fr;}
  .section-header {margin-bottom: 40px;}
}
.text-green {color: var(--green-600);}
.text-muted {color: var(--gray-400);}
.text-white {color: white;}
.bg-cream {background: var(--cream);}
.bg-green-dark {background: var(--green-900);}
.bg-green-50 {background: var(--green-50);}
.rounded-full {border-radius: 100px;}
.mt-8 {margin-top: 8px;}
.mt-16 {margin-top: 16px;}
.mt-24 {margin-top: 24px;}
.mt-32 {margin-top: 32px;}
.mt-48 {margin-top: 48px;}
.mb-8 {margin-bottom: 8px;}
.mb-16 {margin-bottom: 16px;}
.mb-24 {margin-bottom: 24px;}
.mb-32 {margin-bottom: 32px;}
.mb-48 {margin-bottom: 48px;}
.w-full {width: 100%;}
.relative {position: relative;}
.overflow-hidden {overflow: hidden;}
.centered {text-align: center;}
.italic {font-style: italic;}
.container-sm {max-width: 680px; margin: 0 auto; padding: 0 24px;}
.delay-1.sr-hidden {transition-delay: 0.1s;}
.delay-2.sr-hidden {transition-delay: 0.2s;}
.delay-3.sr-hidden {transition-delay: 0.3s;}
.scroll-reveal {opacity: 1; transform: none;}
.scroll-reveal.sr-hidden {opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease;}
.scroll-reveal.sr-visible {opacity: 1; transform: none;}
@keyframes fadein { from { opacity:0; } to { opacity:1; } }
@keyframes fadeup { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.animate-fadein {opacity: 1;}
.animate-fadeup {opacity: 1; transform: none;}
.hero-grid {display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.hero-label {display:inline-flex; align-items:center; gap:8px; background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--radius-full); padding:6px 14px; font-size:0.8rem; font-weight:600; color:var(--green-700); margin-bottom:20px;}
.hero-actions {display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}
.hero-stats {display:flex; gap:28px; flex-wrap:wrap; margin-top:40px; padding-top:32px; border-top:1px solid var(--gray-100);}
.hero-stat-value {font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--green-800); line-height:1;}
.hero-stat-label {font-size:0.75rem; color:var(--gray-500); margin-top:4px;}
.hero-visual {position:relative;}
.hero-visual-main {background:white; border:1px solid var(--gray-100); border-radius:var(--radius-xl); padding:28px; box-shadow:var(--shadow-xl);}
.float-badge {position:absolute; background:white; border:1px solid var(--gray-100); border-radius:var(--radius-lg); padding:10px 14px; box-shadow:var(--shadow-md); font-size:0.78rem; font-weight:600; white-space:nowrap; z-index:10;}
.float-badge-1 {top:-16px; right:-16px;}
.float-badge-2 {bottom:-16px; left:-16px;}
@media(max-width:900px) {
  .hero-grid {grid-template-columns:1fr; gap:40px;}
}
.pain-section {background:var(--green-900); padding:80px 0;}
.pain-section .body-lg, .pain-section p {color: rgba(255,255,255,0.75) !important;}
.pain-section h2, .pain-section h3 {color: white !important;}
.pain-section .label {color: rgba(255,255,255,0.55) !important;}
.pain-intro {text-align:center; margin-bottom:56px;}
.pain-card {background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-xl); padding:28px; transition:var(--transition);}
.pain-card:hover {background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.15); transform:translateY(-4px);}
.pain-icon {font-size:1.8rem; margin-bottom:14px;}
.pain-solved {display:inline-flex; align-items:center; gap:6px; margin-top:16px; padding:4px 12px; background:rgba(37,211,102,0.15); border:1px solid rgba(37,211,102,0.25); border-radius:var(--radius-full); font-size:0.72rem; font-weight:600; color:#25D366;}
.feature-row {display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.feature-row.reverse {direction:rtl;}
.feature-row.reverse > * {direction:ltr;}
.feature-tag {display:inline-flex; align-items:center; background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--radius-full); padding:5px 14px; font-size:0.78rem; font-weight:700; color:var(--green-700); margin-bottom:16px; letter-spacing:0.03em; text-transform:uppercase;}
.feature-visual-dashboard {background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--radius-xl); padding:28px; box-shadow:var(--shadow-md);}
@media(max-width:900px) {
  .feature-row, .feature-row.reverse {grid-template-columns:1fr; direction:ltr; gap:32px;}
}
.step {display:flex; align-items:flex-start; gap:14px; padding:12px 16px; background:var(--gray-50); border-radius:var(--radius-md);}
.step-num {width:26px; height:26px; background:var(--green-800); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; flex-shrink:0; margin-top:1px;}
.bot-flow {display:flex; flex-direction:column; gap:8px;}
.bot-node {display:flex; align-items:center; gap:10px; background:white; border:1px solid var(--gray-100); border-radius:var(--radius-md); padding:12px 14px; font-size:0.82rem; color:var(--gray-700);}
.bot-node-icon {font-size:1.1rem; flex-shrink:0;}
.bot-arrow {text-align:center; color:var(--green-400); font-size:1.1rem; line-height:1;}
.stat-band {background:var(--green-900); padding:48px 0;}
.stat-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.stat-item {text-align:center;}
.stat-number {font-family:var(--font-display); font-size:2.8rem; font-weight:700; color:white; line-height:1;}
.stat-label {font-size:0.8rem; color:rgba(255,255,255,0.75); margin-top:8px;}
@media(max-width:768px) {
  .stat-grid {grid-template-columns:repeat(2,1fr);}
}
.industry-grid {display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.industry-card {background:white; border:1px solid var(--gray-100); border-radius:var(--radius-lg); padding:20px 16px; text-align:center; transition:var(--transition); text-decoration:none; color:inherit; display:block;}
.industry-card:hover {border-color:var(--green-300); box-shadow:var(--shadow-md); transform:translateY(-4px);}
.industry-card-icon {font-size:2rem; margin-bottom:10px;}
.industry-card-name {font-size:0.82rem; font-weight:700; color:var(--gray-800); margin-bottom:4px;}
.industry-card-link {font-size:0.72rem; color:var(--green-600); font-weight:600;}
@media(max-width:900px) {
  .industry-grid {grid-template-columns:repeat(3,1fr);}
}
@media(max-width:480px) {
  .industry-grid {grid-template-columns:repeat(2,1fr);}
}
.testi-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi-card {background:white; border:1px solid var(--gray-100); border-radius:var(--radius-xl); padding:32px; transition:var(--transition);}
.testi-card:hover {box-shadow:var(--shadow-lg); transform:translateY(-4px);}
.testi-metric {display:flex; gap:16px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--gray-100);}
.testi-metric-item {flex:1;}
.testi-metric-val {font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--green-800); line-height:1;}
.testi-metric-label {font-size:0.7rem; color:var(--gray-500); margin-top:2px;}
.testi-quote {font-size:1.3rem; color:var(--green-300); margin-bottom:8px;}
.testi-text {font-size:0.88rem; color:var(--gray-600); line-height:1.7; font-style:italic; margin-bottom:20px;}
@media(max-width:900px) {
  .testi-grid {grid-template-columns:1fr;}
}
.marquee-item {display:flex; align-items:center; gap:8px; padding:10px 20px; background:white; border:1px solid var(--gray-100); border-radius:var(--radius-full); font-size:0.85rem; font-weight:600; color:var(--gray-700); white-space:nowrap;}
.chat-list {display:flex; flex-direction:column; gap:4px;}
.chat-item {display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--radius-md); cursor:pointer; transition:background 0.15s;}
.chat-item:hover, .chat-item.active {background:var(--green-50);}
.chat-avatar {width:38px; height:38px; border-radius:50%; background:var(--green-200); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; color:var(--green-800); flex-shrink:0;}
.chat-name {font-size:0.85rem; font-weight:600; color:var(--gray-800);}
.chat-preview {font-size:0.75rem; color:var(--gray-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px;}
.chat-badge {background:var(--green-600); color:white; border-radius:var(--radius-full); font-size:0.65rem; font-weight:700; padding:2px 7px; margin-left:auto; flex-shrink:0;}
.dashboard-row {display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px;}
.dash-card {background:white; border:1px solid var(--gray-100); border-radius:var(--radius-md); padding:16px;}
.dash-card-num {font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--green-800);}
.dash-card-label {font-size:0.7rem; color:var(--gray-500); margin-top:2px;}
.cta-band {background:linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 100%); padding:80px 0; text-align:center;}
.cta-band .body-lg, .cta-band p {color: rgba(255,255,255,0.82) !important;}
.cta-band .label {color: rgba(255,255,255,0.6) !important;}
.cta-band h2 {color: white !important;}
.body-sm {font-size:0.82rem; color:var(--gray-500); line-height:1.6;}
.compare-wrap {overflow-x:auto;}
.compare-table {width:100%; border-collapse:collapse;}
.compare-table th {padding:14px 20px; font-size:0.78rem; font-weight:700; text-align:center; background:var(--gray-50); border-bottom:2px solid var(--gray-100);}
.compare-table td {padding:14px 20px; font-size:0.85rem; text-align:center; border-bottom:1px solid var(--gray-50);}
.compare-table tr:hover td {background:var(--gray-50);}
.wa-col {background:var(--green-50) !important;}
.wa-col-header {background:var(--green-800) !important; color:white !important; border-radius:var(--radius-md) var(--radius-md) 0 0;}
.check {color:var(--green-600); font-weight:700; font-size:1rem;}
.cross {color:var(--gray-300); font-size:1rem;}
.partial {color:var(--gray-500); font-size:0.78rem;}
.pricing-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.pricing-features {display:flex; flex-direction:column; gap:8px; margin:20px 0; flex:1;}
.pricing-feature-check {display:flex; align-items:flex-start; gap:8px; font-size:0.82rem; color:var(--gray-600); line-height:1.5;}
.addon-card {background:white; border:1px solid var(--gray-100); border-radius:var(--radius-lg); padding:24px; transition:var(--transition);}
.addon-card:hover {border-color:var(--green-200); box-shadow:var(--shadow-md);}
.badge-dark {display:inline-block; padding:3px 10px; background:var(--green-800); color:white; border-radius:var(--radius-full); font-size:0.7rem; font-weight:700;}
.template-charges {display:flex; flex-direction:column; gap:0; border:1px solid var(--gray-100); border-radius:var(--radius-lg); overflow:hidden;}
.template-charge-row {display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--gray-50);}
.template-charge-row:last-child {border-bottom:none;}
.template-type {font-size:0.85rem; font-weight:600; color:var(--gray-700);}
.template-price {font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--green-800);}
@media(max-width:900px) {
  .pricing-grid {grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px) {
  .pricing-grid {grid-template-columns:1fr;}
}
.reseller-hero {background:linear-gradient(135deg, var(--green-900), var(--green-700)); padding:120px 0 80px;}
.tier-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.tier-card {background:white; border:1px solid var(--gray-100); border-radius:var(--radius-lg); padding:24px; text-align:center; transition:var(--transition);}
.tier-card:hover {border-color:var(--green-300); box-shadow:var(--shadow-md);}
.tier-discount {font-family:var(--font-display); font-size:2.2rem; font-weight:700; color:var(--green-700);}
.calc-row {display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--gray-100); font-size:0.9rem;}
.income-calc {background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--radius-lg); padding:28px;}
@media(max-width:768px) {
  .tier-grid {grid-template-columns:repeat(2,1fr);}
}
.contact-grid {display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.contact-method {display:flex; align-items:flex-start; gap:16px; padding:20px; background:var(--gray-50); border-radius:var(--radius-lg); margin-bottom:16px; transition:var(--transition);}
.contact-method:hover {background:var(--green-50);}
.contact-method-icon {font-size:1.6rem; flex-shrink:0;}
.form-group {display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.form-label {font-size:0.82rem; font-weight:600; color:var(--gray-700);}
.form-input {padding:10px 14px; border:1px solid var(--gray-200); border-radius:var(--radius-md); font-size:0.9rem; font-family:var(--font-body); color:var(--gray-800); background:white; transition:border 0.2s; outline:none;}
.form-input:focus {border-color:var(--green-400); box-shadow:0 0 0 3px rgba(37,160,44,0.1);}
@media(max-width:768px) {
  .contact-grid {grid-template-columns:1fr;}
}
.industry-hero {padding:120px 0 72px; background:var(--cream);}
.industry-hero-inner {display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.industry-stat {text-align:center;}
.industry-stat-num {font-family:var(--font-display); font-size:2.2rem; font-weight:700; color:var(--green-800); line-height:1;}
.industry-stat-label {font-size:0.75rem; color:var(--gray-500); margin-top:4px;}
.use-case-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.use-case-card {background:white; border:1px solid var(--gray-100); border-radius:var(--radius-lg); padding:24px; transition:var(--transition);}
.use-case-card:hover {border-color:var(--green-200); box-shadow:var(--shadow-md); transform:translateY(-3px);}
@media(max-width:900px) {
  .industry-hero-inner {grid-template-columns:1fr;}
  .use-case-grid {grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px) {
  .use-case-grid {grid-template-columns:1fr;}
}
.case-grid {display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.case-card {background:white; border:1px solid var(--gray-100); border-radius:var(--radius-xl); overflow:hidden; transition:var(--transition);}
.case-card:hover {border-color:var(--green-200); box-shadow:var(--shadow-lg); transform:translateY(-4px);}
.case-card-header {background:var(--green-50); border-bottom:1px solid var(--green-100); padding:28px 32px;}
.case-card-body {padding:32px;}
.case-metric-row {display:flex; gap:16px; flex-wrap:wrap; margin:20px 0;}
.case-metric {background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--radius-md); padding:14px 18px; flex:1; min-width:100px;}
.case-metric-val {font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--green-800); line-height:1;}
.case-metric-label {font-size:0.72rem; color:var(--gray-500); margin-top:4px;}
.case-tag {display:inline-flex; align-items:center; gap:6px; padding:4px 12px; background:white; border:1px solid var(--gray-200); border-radius:var(--radius-full); font-size:0.75rem; font-weight:600; color:var(--gray-600); margin-bottom:8px;}
@media(max-width:768px) {
  .case-grid {grid-template-columns:1fr;}
}
.int-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.int-card {background:white; border:1px solid var(--gray-100); border-radius:var(--radius-lg); padding:24px 16px; text-align:center; transition:var(--transition);}
.int-card:hover {border-color:var(--green-300); box-shadow:var(--shadow-md); transform:translateY(-3px);}
.int-card-icon {font-size:2.2rem; margin-bottom:10px;}
.int-card-name {font-weight:700; font-size:0.9rem; color:var(--gray-800); margin-bottom:4px;}
.int-card-desc {font-size:0.75rem; color:var(--gray-500); line-height:1.5;}
.int-card-badge {display:inline-block; margin-top:8px; padding:2px 8px; background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--radius-full); font-size:0.7rem; font-weight:600; color:var(--green-700);}
.int-category-title {font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--green-900); margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--green-100); display:flex; align-items:center; gap:10px;}
.int-section {margin-bottom:56px;}
@media(max-width:900px) {
  .int-grid {grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px) {
  .int-grid {grid-template-columns:1fr;}
}
.team-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.team-card {background:white; border:1px solid var(--gray-100); border-radius:var(--radius-xl); padding:28px; text-align:center; transition:var(--transition);}
.team-card:hover {box-shadow:var(--shadow-lg); transform:translateY(-4px);}
.team-avatar {width:72px; height:72px; border-radius:50%; background:var(--green-100); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--green-800); margin:0 auto 16px;}
@media(max-width:900px) {
  .team-grid {grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px) {
  .team-grid {grid-template-columns:1fr;}
}
.timeline {display:flex; flex-direction:column; gap:0; position:relative;}
.timeline::before {content:""; position:absolute; left:15px; top:0; bottom:0; width:2px; background:var(--green-100);}
.timeline-item {display:flex; gap:24px; padding:0 0 32px 0; position:relative;}
.timeline-dot {width:32px; height:32px; border-radius:50%; background:var(--green-800); display:flex; align-items:center; justify-content:center; color:white; font-size:0.7rem; font-weight:700; flex-shrink:0; z-index:1;}
.guide-layout {display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start;}
.guide-toc {position:sticky; top:90px; background:white; border:1px solid var(--gray-100); border-radius:var(--radius-lg); padding:24px;}
.guide-toc a {display:block; font-size:0.82rem; color:var(--gray-600); padding:6px 0; border-bottom:1px solid var(--gray-50); transition:color 0.2s;}
.guide-toc a:hover {color:var(--green-700);}
.guide-content h2 {font-family:var(--font-display); font-size:1.6rem; font-weight:600; color:var(--green-900); margin:40px 0 16px;}
.guide-box {background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--radius-lg); padding:24px; margin:24px 0;}
.guide-content p {margin-bottom:16px; line-height:1.8; color:var(--gray-600);}
@media(max-width:900px) {
  .guide-layout {grid-template-columns:1fr;}
  .guide-toc {position:static;}
}
.legal-content {max-width:800px; margin:0 auto; padding:60px 24px;}
.legal-content h2 {font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--green-900); margin:36px 0 12px;}
.legal-content p, .legal-content li {font-size:0.9rem; color:var(--gray-600); line-height:1.8; margin-bottom:12px;}
.legal-content ul {padding-left:20px; list-style:disc;}
.error-page {min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--cream); padding:40px 24px;}
.error-code {font-family:var(--font-display); font-size:8rem; font-weight:700; color:var(--green-100); line-height:1; margin-bottom:-20px;}
.reseller-hero .display-xl, .reseller-hero .display-lg, .reseller-hero h1, .reseller-hero h2 {color: white !important;}
.reseller-hero .body-lg, .reseller-hero p {color: rgba(255,255,255,0.82) !important;}
.reseller-hero .label {color: rgba(255,255,255,0.6) !important;}
.industry-hero .body-lg {color: var(--gray-600);}
[style*="background:var(--green-900)"] .body-lg, [style*="background:var(--green-800)"] .body-lg, [style*="background:linear-gradient"] .body-lg {color: rgba(255,255,255,0.82) !important;}
[style*="background:var(--green-900)"] p, [style*="background:var(--green-800)"] p {color: rgba(255,255,255,0.75) !important;}
[style*="color:var(--green-200)"] {color: rgba(255,255,255,0.8) !important;}
[style*="color:var(--green-300)"] {color: rgba(255,255,255,0.65) !important;}
[style*="display:grid"] {gap:16px !important;}
}


.g-2 {display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.g-3 {display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.g-2-wide {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.g-4 {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:768px) {
  .g-2, .g-3, .g-4, .g-2-wide {grid-template-columns:1fr 1fr;gap:16px;}
}
@media(max-width:480px) {
  .g-2, .g-3, .g-4, .g-2-wide {grid-template-columns:1fr;gap:14px;}
}
@media(max-width:480px) {
  .g-2, .g-3, .g-2-wide {gap:14px;}
}
@media(max-width:768px) {
  [style*="grid-template-columns"] {grid-template-columns:1fr !important;}
  .related-grid, .guide-layout, .use-case-grid, .criteria-grid, .two-col, .int-hero-inner {grid-template-columns:1fr !important;}
}
:root {--green-200: #a8edca;}
[class*="-hero"] a {position: relative;
  z-index: 10;
  pointer-events: all !important;}
@media(max-width:768px) {
  .related-grid {grid-template-columns:1fr !important;}
  .guide-layout {grid-template-columns:1fr !important; gap:24px !important;}
  .use-case-grid {grid-template-columns:1fr !important;}
  .criteria-grid {grid-template-columns:1fr !important;}
  .two-col {grid-template-columns:1fr !important; gap:24px !important;}
  .int-hero-inner {grid-template-columns:1fr !important; gap:32px !important;}
  .int-stat-grid {grid-template-columns:1fr 1fr !important;}
}/* v2 aliases for legacy markup */
body{background:var(--paper,#f5f8f6)}
h1 em,h2 em,h3 em,.italic{font-style:normal;color:var(--green-800)}
.btn-whatsapp{background:#25d366;color:#06301f;border:1px solid #25d366}
.btn-whatsapp:hover{background:#1fbf5b}
/* Mobile: wide tables scroll inside themselves instead of being cut off */
@media(max-width:760px){
  body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  pre{max-width:100%;overflow-x:auto}
  p,li,code,a,strong,span,h2,h3,h4,.msg-text,.tmpl-body-text,.step-body{overflow-wrap:anywhere}
  td,th,td *,th *{overflow-wrap:normal}
  body .btn{white-space:normal;text-align:center}
  .msg-item>*,[class*="-grid"]>*,[class*="layout"]>*,.two-col>*{min-width:0}
}
/* Legacy outline buttons on dark sections set white text inline; keep them transparent */
body .btn-secondary[style*="color:white"],body .btn-secondary[style*="color: white"],body .btn-secondary[style*="color:#fff"],body .btn-ghost[style*="color:white"],body .btn-ghost[style*="color:#fff"]{background:transparent}
body .btn-secondary[style*="color:white"]:hover,body .btn-secondary[style*="color:#fff"]:hover{background:rgba(255,255,255,.08)}
@media(max-width:760px){
  body [style*="font-family:var(--font-mono)"]{max-width:100%;overflow-x:auto}
  body .msg-item{flex-wrap:wrap}
  body .msg-item .msg-label{min-width:0;flex-basis:100%;padding-right:64px}
  body .msg-item .msg-text{padding-right:0;min-width:0}
}