/* Payco Tool page. Colors, fonts and the demo come from style.css. */
.tool-page [hidden]{display:none!important}
.tool-header{display:flex;align-items:center;justify-content:space-between;gap:24px}
.tool-nav{display:flex;gap:28px;font-size:15px;font-weight:500;color:var(--fg-2)}
.tool-nav a:hover,.tool-text-link:hover{color:var(--violet-hi)}
.tool-hero{padding:64px 0 72px;border-bottom:1px solid var(--line)}
.tool-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.tool-hero h1{font-size:clamp(2.1rem,3.7vw,3.4rem);margin-bottom:22px}
.tool-lede{font-size:1.15rem;color:var(--fg-2);max-width:560px;line-height:1.6}
.tool-actions{display:flex;align-items:center;gap:26px;margin:28px 0 16px;flex-wrap:wrap}
.tool-caption{font-size:14px;color:var(--fg-3);line-height:1.6}
.tool-text-link{font-size:16px;font-weight:600;display:inline-block;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}

/* how it works: four rows, title on the left and what happens on the right */
.how{margin-top:30px;border-top:1px solid var(--line-2)}
.how-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;padding:26px 0;border-bottom:1px solid var(--line)}
.how-row h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(1.25rem,2.3vw,1.8rem);line-height:1.08}
.how-row p{color:var(--fg-2);font-size:1.05rem}
.needs{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px}
.needs b{display:block;font-size:1.1rem;margin-bottom:6px}
.needs p{color:var(--fg-2)}

/* plans: the price on the left, the three plans as ruled lines on the right */
.tool-buy-section{border-top:1px solid var(--line)}
.tool-buy{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.product-price{font:800 clamp(2.4rem,4.6vw,3.8rem)/1 var(--font-display);text-transform:uppercase;margin:20px 0 8px}
.tool-requirements{font-size:14px;color:var(--fg-3);margin-bottom:10px;white-space:pre-line}
.purchase-status{font-size:14px;color:var(--violet-hi);line-height:1.6;margin:6px 0 10px;min-height:20px}
.plan-rows{margin:0;border-top:1px solid var(--line-2)}
.plan-rows div{display:grid;grid-template-columns:150px 1fr;gap:4px 24px;padding:22px 0;border-bottom:1px solid var(--line)}
.plan-rows dt{grid-row:span 2;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.25rem}
.plan-rows dd{margin:0;font-weight:600}
.plan-rows dd+dd{font-weight:400;color:var(--fg-2)}
.btn:disabled{cursor:not-allowed;opacity:.5}
#comprar,#como-funciona,#preguntas{scroll-margin-top:100px}

.tool-faq-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:70px}
.tool-faq-layout .tool-text-link{margin-top:24px;color:var(--violet-hi)}
.tool-faq details{border-bottom:1px solid var(--line-2);padding:20px 0}
.tool-faq details:first-child{border-top:1px solid var(--line-2)}
.tool-faq summary{font-weight:600;font-size:1.1rem;cursor:pointer;list-style:none;padding-right:32px;position:relative;color:var(--fg)}
.tool-faq summary:after{content:'+';position:absolute;right:0;top:-4px;color:var(--violet-hi);font-size:26px;font-weight:400;line-height:1}
.tool-faq details[open] summary:after{content:'−'}
.tool-faq summary::-webkit-details-marker{display:none}
.tool-faq p{font-size:1rem;line-height:1.6;color:var(--fg-2);margin-top:12px}
.tool-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:14px;color:var(--fg-2)}
.tool-footer a:hover{color:var(--fg)}
.success-shell{max-width:680px;margin:80px auto;padding:0}
.success-icon{font-size:45px;color:var(--violet-hi);margin-bottom:20px}
.success-shell h1{font-size:40px;margin-bottom:20px}
.success-shell .btn{margin-top:18px}
.success-shell .tool-text-link{margin-top:24px}
.order-reference{font-size:13px;overflow-wrap:anywhere;color:var(--fg-3);margin-top:24px}
@media(max-width:950px){.tool-hero-grid{grid-template-columns:1fr;gap:40px}.tool-nav{display:none}.tool-faq-layout{gap:35px}.tool-buy{grid-template-columns:1fr;gap:36px}}
@media(max-width:700px){.tool-hero{padding:40px 0 52px}.tool-hero h1{font-size:2.1rem}.how-row{grid-template-columns:1fr;gap:8px;padding:22px 0}.needs{grid-template-columns:1fr;gap:22px;margin-top:40px}.plan-rows div{grid-template-columns:1fr}.plan-rows dt{grid-row:auto;margin-bottom:4px}.tool-faq-layout{grid-template-columns:1fr;gap:28px}.tool-header{gap:10px}.tool-header .brand-tag{display:none}.tool-header .brand-word{font-size:15px}.tool-header .brand img{width:34px;height:34px}.tool-header .btn{padding:9px 12px;font-size:13px}.tool-header .header-actions{gap:8px}.tool-header .brand{gap:8px}.tool-footer{flex-wrap:wrap}.success-shell{margin:40px 0}.tool-lede{font-size:1.05rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}