/*
  ONLEADIA — Design system editorial para saúde e WhatsApp.
  Referências: Refero "Chat for impact" (Turn.io), e nuances de comunicação humana.
  Obra original ONleadIA, sem copiar marca, imagens ou componentes de Turn.io.
  Responsividade: 320px a 1920px. Sistema de espaços em passos de 4/8px.
*/
:root {
  --forest:#0a3922;
  --forest-2:#103f2a;
  --deep-violet:#460095;
  --mint:#d2f2e3;
  --mint-soft:#e4f7ee;
  --lavender:#eee2ff;
  --lilac:#fdf0ff;
  --sky:#ccf0f8;
  --peach:#ffede8;
  --cream:#faf7e8;
  --coral:#ff643b;
  --white:#fff;
  --ink:#163527;
  --muted:#52675b;
  --stroke:#e4e9e2;
  --radius:24px;
  --radius-sm:16px;
  --radius-pill:40px;
  --max:1240px;
  --font:'DM Sans',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:92px}
body {margin:0;color:var(--ink);background:var(--white);font-family:var(--font);font-feature-settings:'ss03';font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open {overflow:hidden}
img,svg {display:block;max-width:100%}
img {height:auto}
a {color:inherit;text-decoration:none}
button {font-family:inherit}
button,summary,a { -webkit-tap-highlight-color:transparent }
:focus-visible {outline:3px solid #ec8f4b;outline-offset:4px}
::selection {background:#c7eedb;color:#0a3922}
.wrap {width:100%;max-width:var(--max);padding-inline:28px;margin-inline:auto}
section {padding-block:112px;position:relative;isolation:isolate}
h1,h2,h3,p {margin:0}
h1,h2,h3 {font-weight:700;line-height:1.06;letter-spacing:-.028em;text-wrap:balance}
h2 {font-size:clamp(38px,4.35vw,66px);max-width:940px}
h3 {font-size:clamp(23px,2.1vw,29px);line-height:1.17;letter-spacing:-.019em}
p {text-wrap:pretty}
.lead {font-size:clamp(17px,1.55vw,19px);line-height:1.55;color:var(--muted);max-width:660px}
.center {text-align:center}
.center h2,.center .lead {margin-inline:auto}
.center h2 {margin-top:18px}
.center .lead {margin-top:23px}
.hl {color:var(--deep-violet)}
.eyebrow {display:inline-flex;align-items:center;gap:10px;color:var(--forest);font-size:13px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;background:var(--mint-soft);padding:10px 18px;border-radius:100px;width:fit-content}
.eyebrow .dot {background:#1dbf73;border-radius:50%;width:8px;height:8px;flex:none}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:56px;padding:15px 28px;background:transparent;border:1px solid transparent;border-radius:var(--radius-pill);font-family:var(--font);font-weight:700;font-size:15px;line-height:1.2;white-space:nowrap;cursor:pointer;transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:hover {transform:translateY(-2px)}
.btn svg {width:20px;height:20px;flex:none}
.btn-p {color:#1d261e;background:var(--coral);border-color:var(--coral)}
.btn-p:hover {background:#ff8868;border-color:#ff8868}
.btn-g {color:var(--ink);border-color:currentColor;background:transparent}
.btn-g:hover {background:rgba(0,0,0,.04)}
.skip-link {position:absolute;top:-100px;left:16px;background:#fff;color:#000;z-index:500;padding:12px 16px;border-radius:10px}
.skip-link:focus {top:8px}

/* Brand and persistent navigation */
.site-header {position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);border-bottom:1px solid #eff1ed;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav {min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.logo {display:inline-flex;align-items:center;gap:9px;font-size:26px;line-height:1;font-weight:800;letter-spacing:-.065em;white-space:nowrap;color:var(--forest)}
.logo svg {width:35px;height:35px;overflow:visible}
.logo svg path {fill:var(--forest)}
.logo svg polyline {stroke:var(--mint)}
.logo .logo-on,.logo .logo-ia {color:#9B7BFF}
.logo .logo-lead {color:var(--ink)}
.brand-name {text-transform:none;white-space:nowrap}
.nav-links {display:flex;align-items:center;gap:clamp(15px,2vw,31px);margin-left:auto}
.nav-links a {font-size:13px;font-weight:700;color:#344d3e;position:relative;white-space:nowrap}
.nav-links a::after {content:"";position:absolute;height:2px;background:var(--forest);width:0;bottom:-8px;left:0;transition:width .2s}
.nav-links a:hover::after {width:100%}
.nav .btn {min-height:45px;padding:12px 22px;font-size:13px}
.nav-toggle {display:none;width:42px;height:42px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid #d5dfd6;border-radius:14px;background:#fff;color:var(--forest);cursor:pointer;flex:none}
.nav-toggle span {height:2px;background:currentColor;width:18px;border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:first-child {transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {opacity:0}
.nav-toggle[aria-expanded="true"] span:last-child {transform:translateY(-7px) rotate(-45deg)}

/* Hero — large typographic stage and two original visual media types */
.hero {background:var(--forest);color:var(--white);padding-block:88px 122px;overflow:hidden}
.hero::before {content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.055),transparent 36%);pointer-events:none}
.hero-grid {display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;column-gap:clamp(28px,3.2vw,62px);position:relative;z-index:1}
.hero-copy {min-width:0}
.hero .eyebrow {color:#c4eddb;background:rgba(210,242,227,.1);border:1px solid rgba(210,242,227,.18)}
.hero .eyebrow .dot {background:#c6f0dd}
.hero h1 {font-size:clamp(47px,5.5vw,79px);line-height:1.01;letter-spacing:-.034em;max-width:720px;margin-top:26px;margin-bottom:27px;font-weight:700}
.hero .hl {color:#acebc8}
.hero .lead {font-size:clamp(17px,1.55vw,19px);max-width:560px;color:#e0eae4;line-height:1.62}
.cta-row {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero .btn-g {border:1px solid rgba(255,255,255,.65);color:white}
.hero .btn-g:hover {background:rgba(255,255,255,.11)}
.trust {display:flex;align-items:center;column-gap:20px;row-gap:10px;flex-wrap:wrap;margin-top:30px;color:#c3dacb;font-size:12px;line-height:1.35}
.trust span {display:inline-flex;align-items:center;gap:7px;max-width:100%}
.trust svg {width:15px;height:15px;flex:none;color:#b7eecf}
.hero-stage {position:relative;width:100%;min-height:640px;display:block}
.hero-photo {position:absolute;right:0;top:0;width:86%;height:94%;margin:0;border-radius:32px;overflow:hidden;background:#bfd3c4}
.hero-photo img {width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.shape {position:absolute;z-index:-1;pointer-events:none}
.shape-mint {right:-14px;top:-14px;border:1px solid rgba(211,255,227,.5);border-radius:40px;width:88%;height:96%}
.shape-lilac {left:-12px;bottom:40px;background:#bfb5ed;width:116px;height:116px;border-radius:50%}
.phone.chat-demo {position:absolute;left:0;bottom:0;z-index:3;width:min(348px,75%);max-width:none;margin:0;padding:18px;background:#fff;color:#1a3526;border:1px solid #e8ebe8;border-radius:25px;box-shadow:0 10px 38px rgba(4,36,22,.09)}
.ph-top {display:flex;align-items:center;gap:10px;padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid #ebf0eb}
.av {width:40px;height:40px;background:var(--forest);color:white;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;flex:none}
.ph-top b {font-size:13px;line-height:1.25;display:block;white-space:normal}
.ph-top small {font-size:11px;color:#248756;display:block;margin-top:2px;font-weight:700}
.msgs {display:flex;flex-direction:column;gap:7px;min-height:0}
.m {max-width:92%;width:fit-content;font-size:11.8px;line-height:1.4;padding:9px 11px;border-radius:14px;animation:rise .55s both;overflow-wrap:anywhere}
.m.in {align-self:flex-start;background:#edf0ed;border-bottom-left-radius:4px;color:#294433}
.m.out {align-self:flex-end;background:#dcf6e7;border-bottom-right-radius:4px;color:#1d4b32}
.m.sys {align-self:center;max-width:100%;font-size:10.7px;background:#f4f0ff;color:#573486;border:1px solid #e9dcff;text-align:center;font-weight:700;border-radius:99px}
.m .t {font-size:10px;opacity:.55;margin-top:3px;display:block;text-align:right}
.m:nth-child(1){animation-delay:.12s}.m:nth-child(2){animation-delay:.26s}.m:nth-child(3){animation-delay:.4s}.m:nth-child(4){animation-delay:.54s}.m:nth-child(5){animation-delay:.68s}.m:nth-child(6){animation-delay:.82s}
@keyframes rise {from{transform:translateY(10px);opacity:.1}to{transform:translateY(0);opacity:1}}

/* Problem / empathy */
.problem-section {background:var(--lavender)}
.problem-intro {display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(30px,5.5vw,90px)}
.problem-heading h2 {font-size:clamp(42px,4.65vw,67px);margin-top:23px;max-width:710px}
.problem-heading .lead {margin-top:23px}
.problem-heading .hl {color:var(--deep-violet)}
.problem-media {height:386px;border-radius:28px;overflow:hidden;margin:0;background:#b3c7b7}
.problem-media img {width:100%;height:100%;object-fit:cover;object-position:center 52%}
.grid3 {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}
.card {background:var(--white);border:0;border-radius:var(--radius);padding:30px;min-width:0;position:relative}
.card h3 {margin-top:19px;margin-bottom:11px}
.card p {font-size:15.5px;line-height:1.65;color:#475b4f}
.problem-cards {margin-top:28px}
.problem-cards .card {padding:34px;min-height:280px}
.problem-cards .card:nth-child(1) {background:var(--peach)}
.problem-cards .card:nth-child(2) {background:var(--mint)}
.problem-cards .card:nth-child(3) {background:var(--sky)}
.ic {width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:#e6f0e9;color:var(--forest);flex:none}
.ic svg {width:24px;height:24px}
.ic.r {color:var(--forest);background:rgba(255,255,255,.72)}

/* Feature-story cards / unique illustrated module */
.features-section {background:white}
.features-section .center {max-width:1040px}
.features-section .center .lead {max-width:750px}
.feat {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:52px}
.feat .card {display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:275px;padding:37px 38px;overflow:hidden}
.feat .card .ic {background:rgba(255,255,255,.72);color:var(--forest);width:54px;height:54px;border-radius:16px}
.feat .card > div:not(.ic) {position:relative;z-index:1}
.feat .card h3 {font-size:clamp(24px,2.2vw,31px);margin:21px 0 11px;max-width:410px}
.feat .card p {max-width:445px;font-size:16px;color:#465b4e}
.feature-card--1 {background:var(--mint)}
.feature-card--2 {background:var(--lavender)}
.feature-card--3 {background:var(--peach)}
.feature-card--4 {background:var(--sky)}
.feature-card--5 {background:var(--cream)}
.feature-card--6 {background:var(--mint-soft)}
.feat .feature-card--2,.feat .feature-card--5 {min-height:345px}
.calendar-art {align-self:flex-end;width:178px;height:118px;background:#fff;border-radius:16px;margin-top:16px;padding:17px 20px}
.calendar-art__top {height:13px;border-radius:3px;background:linear-gradient(90deg,#d6e6dd 0 56%,#f5ebfb 56%);margin-bottom:15px}
.calendar-art__dots {display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.calendar-art__dots i {width:14px;height:10px;border-radius:4px;background:#e5eee8}
.calendar-art__dots i:nth-child(5),.calendar-art__dots i:nth-child(9) {background:#c5ead6}
.calendar-art__dots i:nth-child(7) {background:#ffad99}
.crm-art {align-self:flex-end;background:#fff;border-radius:16px;width:210px;padding:15px 18px;margin-top:16px}
.crm-art__top {display:flex;gap:5px;margin-bottom:11px}
.crm-art__top i {width:7px;height:7px;border-radius:50%;background:#e4d8f4}
.crm-art__top i:nth-child(2) {background:#f0c6bd}
.crm-art__top i:nth-child(3) {background:#a7d8be}
.crm-art__rows {display:grid;gap:7px}
.crm-art__rows span {height:10px;border-radius:5px;background:#e2ece5;width:100%}
.crm-art__rows span:nth-child(2){width:73%;background:#e9e0f2}
.crm-art__rows span:nth-child(3){width:88%}
.feat .feature-card--6 {grid-column:1/-1;display:grid;grid-template-columns:54px minmax(0,1fr) minmax(250px,.94fr);align-items:center;column-gap:28px;min-height:320px;padding:28px 28px 28px 40px}
.feat .feature-card--6 h3 {margin-top:0;max-width:400px}
.feat .feature-card--6 p {max-width:455px}
.feature-team-photo {width:100%;height:280px;border-radius:18px;overflow:hidden;margin:0;background:#bccbb9}
.feature-team-photo img {width:100%;height:100%;object-fit:cover;object-position:center 45%}
.chips {display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.chip {padding:10px 16px;border:1px solid #dbeae1;background:#f4f9f5;color:#345140;border-radius:100px;font-size:12.5px;font-weight:700}

/* Audience — one distinctive plum band from the style reference */
.audience-section {background:var(--deep-violet);color:white;overflow:hidden}
.audience-section::before {content:"";position:absolute;width:570px;height:570px;border-radius:50%;border:1px solid rgba(255,255,255,.12);right:-260px;top:-270px;pointer-events:none}
.aud .eyebrow {background:rgba(255,255,255,.14);color:#f1e6ff}
.aud .eyebrow .dot {background:#d3d9ff}
.aud h2 {max-width:980px}
.aud .hl {color:#d2f2e3}
.grid2 {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:52px}
.aud .card {min-height:278px;padding:38px}
.aud .card:nth-child(1) {background:var(--mint)}
.aud .card:nth-child(2) {background:var(--lavender)}
.aud .card:nth-child(3) {background:var(--peach)}
.aud .card:nth-child(4) {background:var(--cream)}
.aud .tag {font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--deep-violet);font-weight:800}
.aud .card h3 {font-size:clamp(24px,2.1vw,30px);line-height:1.17;margin-top:14px;color:var(--forest)}
.aud ul {display:flex;flex-direction:column;gap:9px;padding:0;margin:19px 0 0;list-style:none}
.aud li {display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;color:#31503e}
.aud li::before {content:"✓";flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--forest);font-weight:800;font-size:13px;margin-top:1px}

/* Comparison */
.comparison-section {background:#fff}
.comparison-section .center h2 {max-width:1000px}
.cmp {margin-top:50px;border:1px solid #d9e9df;border-radius:26px;overflow:hidden}
.cmp-row {display:grid;grid-template-columns:1.24fr .93fr .93fr;align-items:stretch;border-top:1px solid #e0eee4}
.cmp-row:first-child {border-top:0;background:var(--forest);color:white}
.cmp-row>div {padding:21px 28px;font-size:15.5px;line-height:1.45;display:flex;flex-direction:column;justify-content:center;min-width:0}
.cmp-row:first-child>div {font-size:15px;font-weight:800;color:white}
.cmp-row:not(:first-child)>div:first-child {font-weight:700;color:var(--forest)}
.cmp-row:not(:first-child)>div:nth-child(2) {color:#6b746d;background:#fff}
.cmp-row:not(:first-child)>div:nth-child(3) {background:var(--mint-soft);color:var(--forest);font-weight:800}
.cmp-row:first-child>div:nth-child(3) {background:#175338}
.cmp-row:first-child>div:nth-child(2) {background:#12482f}

/* Steps */
.steps-section {background:var(--mint)}
.steps-section h2 {max-width:980px}
.steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:52px;counter-reset:steps}
.step {background:white;border-radius:24px;padding:38px;min-height:270px;counter-increment:steps}
.step::before {content:counter(steps,decimal-leading-zero);font-size:60px;line-height:.95;font-weight:700;letter-spacing:-.05em;color:#90cfac;display:block}
.step h3 {margin-top:28px;margin-bottom:13px}
.step p {color:#4c6154;font-size:15.5px;line-height:1.65}

/* Trust and safety */
.safety-section {background:var(--forest);color:white}
.safe-grid {display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(34px,5vw,94px)}
.safety-section .eyebrow {color:#c7ead8;background:#1b5439}
.safety-section .eyebrow .dot {background:#c3efdb}
.safety-section h2 {margin-top:22px;font-size:clamp(43px,4.3vw,64px);max-width:560px}
.safety-section .hl {color:#b3eacb}
.safety-section .lead {margin-top:23px;color:#d5e7dc}
.safe-list {display:flex;flex-direction:column;gap:14px}
.safe-item {display:flex;align-items:flex-start;gap:18px;background:#fff;border-radius:20px;padding:26px;color:var(--forest)}
.safe-item .ic {width:46px;height:46px;flex:none;background:var(--mint);border-radius:13px}
.safe-item b {display:block;margin-bottom:8px;font-size:18px;line-height:1.2;letter-spacing:-.02em}
.safe-item span {display:block;font-size:14.5px;line-height:1.62;color:#4d6455}

/* Plans */
.plans-section {background:var(--peach)}
.plans-section h2 {max-width:950px}
.plan-box {background:var(--deep-violet);color:white;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);align-items:center;gap:42px;margin-top:48px;padding:56px;border-radius:30px}
.plan-box h3 {font-size:clamp(29px,3vw,42px);line-height:1.12;max-width:630px}
.plan-box p {color:#e6daf3;font-size:16px;margin-top:16px}
.plan-feats {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:25px}
.plan-feats span {display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:#f7eefc;line-height:1.4}
.plan-feats span::before {content:"✓";color:#d2f2e3;font-weight:800;flex:none}
.plan-cta {display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:center}
.plan-cta .btn {white-space:normal}
.plan-cta small {font-size:12.5px;color:#eee5f6}

/* FAQ */
.faq-section {background:#fff}
.faq-section h2 {max-width:850px}
.faq {width:100%;max-width:900px;margin:52px auto 0;display:flex;flex-direction:column;gap:0}
.faq details {padding:5px 0;border-bottom:1px solid #d9e7dd}
.faq details:first-child {border-top:1px solid #d9e7dd}
.faq summary {display:flex;justify-content:space-between;align-items:center;gap:15px;cursor:pointer;font-weight:700;font-size:clamp(17px,1.5vw,20px);padding:22px 10px 22px 0;list-style:none;color:var(--forest);line-height:1.4}
.faq summary::-webkit-details-marker {display:none}
.faq summary::after {content:"+";flex:none;width:31px;height:31px;line-height:29px;text-align:center;background:var(--mint-soft);border-radius:50%;font-size:23px;font-weight:500;transition:transform .2s}
.faq details[open] summary::after {transform:rotate(45deg)}
.faq details p {color:var(--muted);max-width:790px;padding:0 38px 22px 0;font-size:16px;line-height:1.62}

/* Last CTA */
.final-section {background:var(--forest);color:white;text-align:center;overflow:hidden;padding-block:110px 122px}
.final-section::before,.final-section::after {content:"";position:absolute;z-index:-1;border:1px solid rgba(228,255,237,.16);width:610px;height:610px;border-radius:50%;pointer-events:none}
.final-section::before {left:-360px;bottom:-440px}
.final-section::after {right:-400px;top:-440px}
.final-section .eyebrow {background:#1a5037;color:#d4f4e4}
.final-section h2 {margin:25px auto 0;max-width:1010px;font-size:clamp(41px,5.4vw,79px);line-height:1.04}
.final-section .hl {color:#c5efda}
.final-section .lead {margin:22px auto 32px!important;max-width:690px;color:#dbe8e0}

/* Footer */
footer {background:var(--lavender);color:#536155;border-top:0;padding-block:43px;font-size:13px}
.foot {display:flex;gap:24px;align-items:center;justify-content:space-between}
.foot .logo {font-size:22px!important}
.foot-links {display:flex;gap:24px;flex-wrap:wrap}
.foot-links a {text-decoration:underline;text-underline-offset:4px}
.foot-links a:hover {color:var(--deep-violet)}

/* The platform's WhatsApp floating quick-action retains its original provider-green identity */
.wa-float {position:fixed;right:22px;bottom:22px;z-index:120;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;border:3px solid white;box-shadow:0 5px 20px rgba(0,0,0,.12);transition:transform .2s}
.wa-float:hover {transform:scale(1.07)}
.wa-float svg {height:31px;width:31px}

/* Large tablet & compact desktop */
@media (max-width:1120px) {
  .nav-links {gap:15px}
  .nav-links a {font-size:12px}
  .hero-grid {gap:26px;grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
  .hero h1 {font-size:clamp(46px,5.25vw,63px)}
  .hero-stage {min-height:580px}
  .phone.chat-demo {width:min(310px,77%);padding:13px}
  .m {font-size:10.9px;padding:8px 9px}
  .problem-media {height:340px}
}
@media (max-width:920px) {
  section {padding-block:82px}
  .nav {min-height:76px}
  .nav-links {position:absolute;left:0;right:0;top:100%;background:#fff;padding:18px 28px 24px;display:none;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--stroke);box-shadow:0 20px 30px rgba(0,0,0,.08);max-height:calc(100vh - 76px);overflow:auto}
  .nav-links.is-open {display:flex}
  .nav-links a {padding:13px 0;font-size:16px}
  .nav-toggle {display:flex;order:3}
  .nav .logo {order:1}
  .nav .btn {order:2;margin-left:auto}
  .nav-links {order:4}
  .hero {padding-block:70px 82px}
  .hero-grid {grid-template-columns:1fr;gap:54px}
  .hero-copy {max-width:780px}
  .hero h1 {font-size:clamp(49px,8vw,79px);max-width:730px}
  .hero-stage {min-height:620px;max-width:690px;margin-inline:auto;width:100%}
  .hero-photo {width:86%;height:94%}
  .phone.chat-demo {width:min(350px,65%);padding:18px}
  .m {font-size:11.8px;padding:9px 11px}
  .problem-intro {grid-template-columns:1fr;gap:32px}
  .problem-heading {max-width:830px}
  .problem-media {height:360px}
  .grid3,.steps {grid-template-columns:1fr}
  .problem-cards .card {min-height:auto}
  .grid3 {gap:14px}
  .feat {gap:15px}
  .feat .card {padding:28px;min-height:295px}
  .feat .feature-card--6 {grid-template-columns:54px minmax(0,1fr);gap:14px 20px}
  .feat .feature-card--6 .feature-team-photo {grid-column:1/-1;height:270px}
  .safe-grid {grid-template-columns:1fr;gap:35px}
  .safety-section h2 {max-width:780px}
  .plan-box {padding:42px;gap:25px}
}
@media (max-width:640px) {
  html {scroll-padding-top:76px}
  body {font-size:15px}
  .wrap {padding-inline:18px}
  section {padding-block:71px}
  h2 {font-size:clamp(37px,9vw,52px)}
  .center h2 {margin-top:18px}
  .center .lead {margin-top:18px}
  .eyebrow {font-size:10.5px;padding:9px 12px;letter-spacing:.06em}
  .btn {min-height:55px;white-space:normal;text-align:center;width:auto;padding:15px 24px}
  .nav {min-height:69px;gap:9px}
  .nav-links {max-height:calc(100vh - 69px)}
  .logo {font-size:21px;gap:6px}
  .logo svg {width:29px;height:29px}
  .nav .btn {padding:10px 13px;min-height:39px;font-size:11px}
  .nav-toggle {width:39px;height:39px}
  .hero {padding-block:58px 73px}
  .hero-grid {gap:40px}
  .hero h1 {font-size:clamp(42px,10.5vw,60px);margin-top:22px;margin-bottom:22px;line-height:1.04}
  .hero .lead {font-size:16px;line-height:1.58}
  .cta-row {margin-top:27px;flex-direction:column;align-items:stretch;gap:10px}
  .cta-row .btn {width:100%}
  .trust {gap:10px 14px;margin-top:24px;font-size:11.5px}
  .hero-stage {min-height:0;display:flex;flex-direction:column;align-items:center;width:100%;gap:0}
  .hero-photo {position:relative;width:100%;height:325px;right:auto;top:auto;border-radius:23px}
  .hero-photo img {object-position:61% 39%}
  .phone.chat-demo {position:relative;left:auto;bottom:auto;max-width:346px;width:94%;margin:-72px auto 0;padding:15px;border-radius:19px}
  .m {font-size:11.3px;padding:8px 10px}
  .shape {display:none}
  .problem-heading h2 {font-size:clamp(39px,9vw,54px)}
  .problem-heading .lead {margin-top:19px}
  .problem-intro {gap:26px}
  .problem-media {height:255px;border-radius:22px}
  .grid3 {margin-top:18px;gap:12px}
  .problem-cards .card {padding:26px;min-height:auto}
  .card h3 {font-size:23px;margin-top:15px}
  .card p {font-size:14.5px}
  .feat,.grid2 {grid-template-columns:1fr;gap:14px;margin-top:33px}
  .feat .card {min-height:auto;padding:27px}
  .feat .card h3 {font-size:25px}
  .feat .card p {font-size:15px}
  .feat .feature-card--2,.feat .feature-card--5 {min-height:auto}
  .feat .feature-card--6 {grid-column:auto;grid-template-columns:1fr;min-height:0;padding:26px}
  .feat .feature-card--6 h3 {margin-top:0}
  .feat .feature-card--6 .feature-team-photo {grid-column:auto;width:100%;height:245px}
  .feat .feature-card--6 .ic {margin-bottom:0}
  .crm-art,.calendar-art {margin-top:19px}
  .chip {font-size:11.5px;padding:8px 12px}
  .aud .card {padding:28px;min-height:auto}
  .aud .card h3 {font-size:25px}
  .aud li {font-size:14px}
  .comparison-section .center h2 {font-size:clamp(36px,8.5vw,49px)}
  .cmp {margin-top:34px;border-radius:20px}
  .cmp-row:first-child {display:none}
  .cmp-row {grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .cmp-row>div {padding:17px 15px;font-size:13.1px;line-height:1.45}
  .cmp-row>div:first-child {grid-column:1/-1;background:#f7faf8;font-size:14.2px;font-weight:800;padding-block:12px}
  .cmp-row>div:nth-child(2)::before {content:"Só atendimento humano";font-size:10px;color:#7c867c;font-weight:700;line-height:1.2;display:block;margin-bottom:9px}
  .cmp-row>div:nth-child(3)::before {content:"Com a ONleadIA";font-size:10px;color:#40694d;font-weight:700;line-height:1.2;display:block;margin-bottom:9px}
  .steps {grid-template-columns:1fr;gap:14px;margin-top:33px}
  .step {padding:29px;min-height:auto}
  .step::before {font-size:50px}
  .step h3 {margin-top:18px}
  .safe-grid {gap:30px}
  .safety-section h2 {font-size:clamp(39px,9vw,53px)}
  .safe-item {padding:20px;gap:13px}
  .safe-item b {font-size:16px}
  .safe-item span {font-size:13.7px}
  .plan-box {grid-template-columns:1fr;gap:26px;padding:31px 25px;margin-top:31px;border-radius:23px}
  .plan-box h3 {font-size:30px}
  .plan-feats {grid-template-columns:1fr 1fr;gap:10px}
  .plan-feats span {font-size:12px}
  .plan-cta .btn {width:100%}
  .faq {margin-top:31px}
  .faq summary {font-size:16px;padding-block:17px}
  .faq details p {font-size:14.5px;padding-right:6px}
  .final-section {padding-block:79px 90px}
  .final-section h2 {font-size:clamp(40px,10vw,57px)}
  .final-section .lead {font-size:16px}
  .final-section .btn {width:100%;max-width:390px}
  .foot {align-items:center;text-align:center;flex-direction:column;gap:16px}
  .foot-links {justify-content:center;gap:16px}
  .wa-float {right:14px;bottom:14px;width:53px;height:53px}
  .wa-float svg {width:29px;height:29px}
}
@media (max-width:360px) {
  .wrap {padding-inline:14px}
  .logo {font-size:19px}
  .logo svg {width:27px}
  .nav .btn {font-size:10px;padding:9px 10px}
  .hero h1 {font-size:40px}
  .trust span {width:100%}
  .plan-feats {grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ========================================================
   ONLEADIA / MOTION EDITION 2
   Reference lock: Turn.io forest + coral, WhatsApp human media.
   All motion is optional for reduced-motion preferences.
   ======================================================== */
:root {
  --ease-brand:cubic-bezier(.22,1,.36,1);
  --ease-snap:cubic-bezier(.2,0,.2,1);
  --motion-quick:160ms;
  --motion-page:580ms;
}
html {scrollbar-color:#a6cdb6 #eef6f0}
::-webkit-scrollbar {width:11px;height:10px}
::-webkit-scrollbar-track {background:#eef6f0}
::-webkit-scrollbar-thumb {background:#a6cdb6;border:3px solid #eef6f0;border-radius:20px}
::-webkit-scrollbar-thumb:hover {background:#498969}

/* Reading progress stays behind the active navigation. */
.reading-progress {position:absolute;bottom:-2px;left:0;width:100%;height:3px;overflow:hidden;pointer-events:none}
.reading-progress span {display:block;height:100%;width:100%;background:var(--coral);transform-origin:left center;transform:scaleX(var(--page-progress,0));will-change:transform}

/* Genuine WhatsApp-shape glyph, separate from ONleadIA branding. */
.wa-brand {display:block;flex:none;object-fit:contain;aspect-ratio:448 / 512;max-width:none;height:25px;width:auto}
.wa-brand--cta {height:25px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.05))}
.wa-float {background:white;border:2px solid #dcf0e4;box-shadow:0 8px 25px rgba(0,39,24,.17);transition:transform var(--motion-quick) var(--ease-brand),box-shadow var(--motion-quick) var(--ease-brand)}
.wa-float:hover {transform:translateY(-4px) scale(1.045);box-shadow:0 12px 29px rgba(0,39,24,.2)}
.wa-float .wa-brand--floating {height:36px;width:auto}
.btn .wa-brand {width:22px;height:25px}
.btn-p {transition:transform var(--motion-quick) var(--ease-brand),background-color var(--motion-quick) ease,border-color var(--motion-quick) ease,box-shadow var(--motion-quick) ease}
.btn-p:hover {box-shadow:0 10px 23px rgba(255,100,59,.14)}
.btn-p:active {transform:translateY(0) scale(.985)}

/* A short, purposeful running benefit strip provides continuity between hero and problem. */
.benefit-band {background:var(--mint-soft);color:var(--forest);border-bottom:1px solid #c7e4d3;overflow:hidden;isolation:isolate}
.benefit-band__viewport {display:block;overflow:hidden;padding:21px 0}
.benefit-band__track {display:flex;width:max-content;transform:translate3d(0,0,0);animation:benefit-marquee 37s linear infinite;will-change:transform}
.benefit-band__segment {display:flex;gap:42px;align-items:center;white-space:nowrap;flex:none;padding-left:42px}
.benefit-band__segment span {font-size:clamp(13px,1.2vw,16px);letter-spacing:.045em;text-transform:uppercase;font-weight:700;display:inline-flex;align-items:center;gap:42px}
.benefit-band__segment span::before {content:"";width:7px;height:7px;background:var(--coral);border-radius:50%;flex:none}
.benefit-band:hover .benefit-band__track {animation-play-state:paused}
@keyframes benefit-marquee {to{transform:translate3d(-50%,0,0)}}

/* Hero responds to movement through its viewport. */
.hero-photo img {transform:translate3d(0,calc(var(--photo-scroll-y,0px)),0) scale(1.07);transform-origin:center center;will-change:transform}
.phone.chat-demo {transform:translate3d(0,var(--phone-scroll-y,0px),0);will-change:transform}
.hero .btn-g:hover {transform:translateY(-3px)}
.problem-media {position:relative}
.problem-media img {transition:transform 850ms var(--ease-brand)}
.problem-media:hover img {transform:scale(1.045)}
.feature-team-photo img {transition:transform 850ms var(--ease-brand)}
.feature-team-photo:hover img {transform:scale(1.05)}

/* A restrained entrance sequence: no JS means all content remains visible. */
.motion-ready .reveal {opacity:0;transform:translate3d(0,35px,0);transition:opacity var(--motion-page) var(--ease-brand),transform var(--motion-page) var(--ease-brand);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.is-visible {opacity:1;transform:translate3d(0,0,0)}
.motion-ready .hero-stage.is-visible {transition-delay:140ms}
.motion-ready .hero-copy.is-visible h1 {animation:hero-title-entry 720ms var(--ease-brand) both}
.motion-ready .hero-copy.is-visible .lead {animation:hero-title-entry 720ms 90ms var(--ease-brand) both}
.motion-ready .hero-copy.is-visible .cta-row {animation:hero-title-entry 720ms 150ms var(--ease-brand) both}
@keyframes hero-title-entry {from{transform:translate3d(0,15px,0);opacity:.45}to{transform:translate3d(0,0,0);opacity:1}}

/* Empty icon boxes have been removed instead of replaced with new random icons. */
.problem-cards .card {transition:transform 260ms var(--ease-brand),box-shadow 260ms ease;overflow:hidden}
.problem-cards .card h3 {margin-top:0}
.problem-cards .card p {margin-top:11px}
.problem-cards .card:hover {transform:translateY(-5px);box-shadow:0 10px 25px rgba(10,57,34,.05)}
.problem-cards .card::after {content:"";position:absolute;left:34px;bottom:0;width:56px;height:3px;background:var(--forest);opacity:.45;transition:width 300ms var(--ease-brand)}
.problem-cards .card:hover::after {width:calc(100% - 68px)}
.safe-item {display:block}
.safe-item b {margin-bottom:6px}
.safe-item span {display:block}
.safe-item {transition:transform 240ms var(--ease-brand),background-color 200ms ease}
.safe-item:hover {transform:translateX(5px);background:#f4fbf7}

/* Horizontal storytelling gallery: deliberate navigation, native swipe and keyboard. */
.feature-carousel-shell {margin-top:54px;min-width:0}
.feature-carousel-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.carousel-microcopy {font-size:14px;font-weight:700;color:#3b644b;letter-spacing:.02em}
.feature-controls {display:flex;align-items:center;gap:10px;flex:none}
.feature-count {font-size:13px;min-width:76px;font-weight:700;color:var(--forest);font-variant-numeric:tabular-nums}
.feature-arrow {display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid #a8d4bb;border-radius:50%;background:#fff;color:var(--forest);font:700 23px/1 var(--font);cursor:pointer;transition:background-color var(--motion-quick) ease,color var(--motion-quick) ease,transform var(--motion-quick) var(--ease-brand)}
.feature-arrow:hover:not(:disabled) {background:var(--forest);color:#fff;transform:translateY(-2px)}
.feature-arrow:disabled {opacity:.35;cursor:not-allowed}
.feature-arrow:active:not(:disabled) {transform:scale(.95)}
.feat.feature-track {display:flex;gap:20px;margin-top:0;width:100%;padding:2px 1px 14px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;scroll-padding-inline:1px;overscroll-behavior-inline:contain;scrollbar-width:none;touch-action:pan-x pan-y}
.feat.feature-track::-webkit-scrollbar {display:none}
.feature-track:focus-visible {outline:2px solid var(--forest);outline-offset:4px}
.feat.feature-track.is-dragging {cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.feat.feature-track .card {flex:0 0 calc((100% - 20px) / 2.16);min-width:0;min-height:390px;max-width:none;scroll-snap-align:start;scroll-snap-stop:normal;padding:38px 38px 34px;display:flex;flex-direction:column;align-items:stretch;gap:0;transition:transform 260ms var(--ease-brand),box-shadow 260ms ease}
.feat.feature-track .card:hover {transform:translateY(-4px);box-shadow:0 12px 25px rgba(16,57,33,.06)}
.feat.feature-track .card > div:not(.calendar-art):not(.crm-art) {min-height:0}
.feat.feature-track .card h3 {margin:0 0 15px;font-size:clamp(24px,2vw,29px);max-width:490px}
.feat.feature-track .card p {font-size:15.5px;line-height:1.58;max-width:500px}
.feat.feature-track .feature-card--2,.feat.feature-track .feature-card--5 {min-height:390px}
.feat.feature-track .calendar-art,.feat.feature-track .crm-art {margin-top:auto;position:relative;top:16px;box-shadow:0 6px 12px rgba(25,43,33,.04)}
.feat.feature-track .feature-card--6 {grid-column:auto;display:flex;grid-template-columns:none;gap:0;min-height:390px;padding:32px}
.feat.feature-track .feature-card--6 h3 {margin-top:0}
.feat.feature-track .feature-card--6 .feature-team-photo {margin-top:auto;max-width:100%;height:170px;width:100%;grid-column:auto}
.feat.feature-track .feature-card--6 .feature-team-photo img {object-position:center 39%}
.feat.feature-track .feature-card--6 > div {width:100%}
.feature-progress {height:4px;background:#e0f1e7;overflow:hidden;border-radius:20px;margin-top:12px}
.feature-progress__fill {display:block;width:100%;height:100%;background:var(--forest);transform:scaleX(var(--slider-progress,0));transform-origin:left center;transition:transform 120ms linear;border-radius:20px}

/* Subtle state transitions on informational cards and FAQ. */
.aud .card {transition:transform 260ms var(--ease-brand)}
.aud .card:hover {transform:translateY(-5px)}
.steps .step {transition:transform 260ms var(--ease-brand),box-shadow 260ms ease}
.steps .step.is-current {box-shadow:inset 0 -4px 0 var(--forest)}
.steps .step:hover {transform:translateY(-4px)}
.faq details p {animation:answer-in 200ms ease-out both}
@keyframes answer-in {from{opacity:.2;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
.faq summary::after {transition:transform 220ms var(--ease-brand),background-color 220ms ease}
.faq summary:hover::after {background:#c3eacf}

/* Smaller devices get one complete slide and a small visible next-slide cue. */
@media (max-width:1060px) {
 .feat.feature-track .card {flex-basis:calc((100% - 18px) / 1.55)}
 .feat.feature-track .feature-card--6 {padding:30px}
}
@media (max-width:640px) {
 .feature-carousel-shell {margin-top:32px}
 .feature-carousel-head {margin-bottom:13px}
 .carousel-microcopy {font-size:12px;max-width:145px;line-height:1.35}
 .feature-controls {gap:7px}
 .feature-count {font-size:11px;min-width:54px}
 .feature-arrow {width:38px;height:38px;font-size:20px}
 .feat.feature-track {gap:12px;padding-bottom:9px}
 .feat.feature-track .card {flex-basis:calc(100% - 30px);min-height:365px;padding:28px 25px}
 .feat.feature-track .feature-card--2,.feat.feature-track .feature-card--5 {min-height:365px}
 .feat.feature-track .card h3 {font-size:24px}
 .feat.feature-track .card p {font-size:14.8px}
 .feat.feature-track .feature-card--6 {padding:25px}
 .feat.feature-track .feature-card--6 .feature-team-photo {height:154px}
 .feature-progress {margin-top:5px}
 .hero-photo img,.phone.chat-demo {will-change:auto}
 .benefit-band__viewport {padding-block:16px}
 .benefit-band__segment {gap:22px;padding-left:22px}
 .benefit-band__segment span {gap:22px;font-size:12px}
 .wa-float .wa-brand--floating {height:33px}
}
@media (max-width:360px) {
 .feat.feature-track .card {flex-basis:calc(100% - 19px);padding:24px 22px}
 .carousel-microcopy {max-width:115px;font-size:11px}
 .feature-controls {gap:5px}
 .feature-count {min-width:50px}
 .feature-arrow {width:34px;height:34px;font-size:18px}
}
@media (prefers-reduced-motion:reduce) {
 .benefit-band__track {animation:none!important;transform:none!important}
 .motion-ready .reveal,.motion-ready .reveal.is-visible {opacity:1!important;transform:none!important;transition:none!important}
 .motion-ready .hero-copy.is-visible h1,.motion-ready .hero-copy.is-visible .lead,.motion-ready .hero-copy.is-visible .cta-row {animation:none!important}
 .hero-photo img,.phone.chat-demo {transform:none!important}
 .feat.feature-track {scroll-behavior:auto!important}
 .faq details p {animation:none!important}
 .feature-progress__fill {transition:none!important}
}
/* Purpose-built interface examples, not arbitrary icons or claimed product screenshots. */
.feature-demo {margin-top:auto;position:relative;flex:none}
.mini-conversation {display:flex;flex-direction:column;gap:6px;align-items:flex-start;width:min(100%,330px);padding-top:22px}
.mini-conversation__incoming,.mini-conversation__outgoing {padding:10px 14px;border-radius:13px;font-size:13px;line-height:1.3;font-weight:500;max-width:90%}
.mini-conversation__incoming {background:white;border-bottom-left-radius:4px;color:var(--forest)}
.mini-conversation__outgoing {align-self:flex-end;background:#b0eacb;border-bottom-right-radius:4px;color:#0b4027}
.mini-conversation__time {font-size:10px;align-self:flex-end;color:#57816b}
.mini-confirmation {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;border-radius:15px;background:rgba(255,255,255,.88);max-width:360px}
.mini-confirmation > div {display:flex;flex-direction:column;gap:4px}
.mini-caption {font-size:9px;letter-spacing:.09em;font-weight:700;color:#517963}
.mini-confirmation b {font-size:16px;line-height:1.15;font-weight:700}
.mini-status {padding:7px 10px;border-radius:40px;font-size:10px;white-space:nowrap;background:#d7f5e5;color:#115a32;font-weight:800}
.mini-followup {padding:19px 18px;background:#fff;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:390px}
.mini-followup > span {font-size:11px;font-weight:800;color:#2d5d45;max-width:110px;line-height:1.25}
.mini-followup__line {display:flex;align-items:center;justify-content:space-between;width:68px;position:relative;flex:none}
.mini-followup__line::before {content:"";height:3px;width:100%;position:absolute;left:0;top:50%;transform:translateY(-50%);background:#a9d7c0}
.mini-followup__line i {position:relative;z-index:1;width:10px;height:10px;border-radius:50%;background:#338e5e;box-shadow:0 0 0 3px #e5f6ed}
.mini-followup__line i:nth-child(2) {background:#76c69b}
.mini-followup__line i:nth-child(3) {background:var(--coral)}
.motion-ready .feature-card.is-active .feature-demo {animation:demo-arrive 480ms var(--ease-brand) both}
@keyframes demo-arrive {from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:640px) {
 .mini-conversation {padding-top:20px}
 .mini-conversation__incoming,.mini-conversation__outgoing {font-size:11.5px;padding:9px 11px}
 .mini-confirmation {padding:12px 10px;gap:6px}
 .mini-confirmation b {font-size:14px}
 .mini-caption {font-size:8px}
 .mini-status {font-size:9px;padding:6px 7px}
 .mini-followup {padding:15px 12px;gap:7px}
 .mini-followup > span {font-size:10px;max-width:90px}
 .mini-followup__line {width:49px}
}
@media (prefers-reduced-motion:reduce) {.motion-ready .feature-card.is-active .feature-demo {animation:none!important}}