/* Custom Pastiva marketing theme. Loaded only by landing.ejs. */
:root {
    --chocolate:#362719;
    --caramel:#c68a48;
    --cream:#fbf5ea;
    --ink:#362719;
    --muted:#6d6257;
    --line:#e8dfd3;
    --surface:#fffdf9;
    --radius:18px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:90px
}
body {
    margin:0;
    font-family:Inter,system-ui,sans-serif;
    background:var(--surface);
    color:var(--ink);
    line-height:1.65
}
a {
    color:inherit
}
img {
    display:block;
    max-width:100%;
    height:auto
}
button,input {
    font:inherit
}
button,a {
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {
    outline:3px solid #a25c1e;
    outline-offset:5px
}
h1,h2,h3,p,figure {
    margin:0
}
h1,h2,h3 {
    line-height:1.15;
    letter-spacing:-.045em
}
h1 {
    font-size:clamp(2.6rem,4.2vw,4.3rem);
    font-weight:650
}
h2 {
    font-size:clamp(2rem,3.3vw,3.25rem);
    font-weight:600
}
h3 {
    font-size:1.15rem;
    letter-spacing:-.025em
}
em {
    font-style:normal;
    color:#95602d
}
p+p {
    margin-top:16px
}
.container {
    width:min(1240px,calc(100% - 80px));
    margin-inline:auto
}
.section {
    padding:100px 0
}
section[id] {
    scroll-margin-top:20px
}
.eyebrow {
    font-size:.69rem;
    font-weight:700;
    letter-spacing:.15em;
    margin-bottom:23px;
    display:flex;
    align-items:center;
    gap:10px
}
.small {
    font-size:.78rem
}
.muted {
    color:var(--muted)
}
.status-dot {
    display:inline-block;
    width:7px;
    height:7px;
    background:#a76b31;
    border-radius:50%;
    flex-shrink:0
}
.site-header {
    position:sticky;
    top:0;
    z-index:10;
    border-bottom:1px solid var(--line);
    background:rgba(255,253,249,.97)
}
.navigation {
    height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-size:1.8rem;
    letter-spacing:-.065em;
    font-weight:650;
    line-height:1
}
.brand small {
    display:block;
    font-size:.58rem;
    letter-spacing:.08em;
    font-weight:500;
    margin-top:6px
}
.nav-links {
    display:flex;
    gap:34px;
    font-size:.81rem
}
.nav-links a {
    text-decoration:none
}
.nav-links a:hover,.text-link:hover {
    color:#965b25
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-height:50px;
    padding:14px 23px;
    background:var(--chocolate);
    color:#fffaf3;
    text-decoration:none;
    border:1px solid var(--chocolate);
    border-radius:9px;
    font-size:.83rem;
    line-height:1.4;
    font-weight:600;
    cursor:pointer;
    transition:transform .18s,background .18s;
    text-align:center
}
.button:hover {
    background:#55402b;
    transform:translateY(-2px)
}
.button-small {
    min-height:42px;
    padding:10px 20px
}
.button-outline {
    background:transparent;
    color:var(--chocolate);
    border-color:#cbbdac
}
.button-outline:hover {
    background:var(--cream)
}
.button-caramel {
    background:#edbe84;
    color:var(--chocolate);
    border-color:#edbe84
}
.button-caramel:hover {
    background:#f7d1a4
}
.hero {
    background:radial-gradient(ellipse at 85% 35%,#eed9ba66,transparent 50%),var(--cream);
    padding:82px 0 0
}
.hero-grid {
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:52px;
    align-items:center
}
.hero-copy .lead {
    font-size:.98rem;
    max-width:530px;
    color:var(--muted);
    margin:25px 0
}
.actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px;
    margin:28px 0 18px
}
.text-link {
    font-size:.82rem;
    text-underline-offset:5px;
    font-weight:600
}
.product-shot {
    border:1px solid #d6caba;
    border-radius:var(--radius);
    background:white;
    overflow:hidden;
    box-shadow:0 24px 55px -25px #36271940
}
.hero-shot {
    transform:rotate(-1deg)
}
.shot-heading {
    padding:17px 20px;
    display:flex;
    align-items:center;
    gap:9px;
    font-size:.6rem;
    letter-spacing:.09em;
    font-weight:700;
    background:#fffdf9;
    border-bottom:1px solid var(--line)
}
.shot-label {
    margin-left:auto;
    font-weight:400;
    letter-spacing:0;
    font-size:.65rem;
    color:var(--muted)
}
.product-shot img {
    width:100%
}
.product-shot figcaption {
    padding:12px 18px;
    color:var(--muted);
    font-size:.65rem;
    background:var(--surface)
}
.benefit-strip {
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid #dfd1be;
    padding:23px 0;
    margin-top:65px;
    font-size:.73rem;
    color:#69543e
}
.benefit-strip i {
    margin-right:10px
}
.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center
}
.section-lead {
    font-size:1.08rem;
    line-height:1.7;
    color:#66584a;
    margin-top:22px
}
.problem p.section-lead {
    margin-top:0
}
.problem p:not(.eyebrow) {
    color:var(--muted)
}
.solution {
    background:#f3ede3
}
.solution .section-lead {
    margin-top:16px
}
.workflow {
    display:grid;
    grid-template-columns:1fr 40px 1fr 40px 1fr;
    gap:25px;
    margin-top:48px;
    align-items:start
}
.workflow div>span {
    font-size:.64rem;
    letter-spacing:.1em;
    color:#7e5b34;
    font-weight:700
}
.workflow h3 {
    margin:17px 0 13px
}
.workflow p,.feature-card p,.steps p {
    font-size:.87rem;
    color:var(--muted)
}
.flow-arrow {
    color:#a57a4b;
    padding-top:38px;
    font-size:1.5rem
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:42px
}
.section-heading>p {
    max-width:310px;
    font-size:.92rem;
    color:var(--muted)
}
.features-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.feature-card {
    padding:32px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff
}
.feature-icon {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:1px solid #eadbc8;
    background:var(--cream);
    border-radius:12px;
    color:#8c5928;
    margin-bottom:24px
}
.feature-card h3 {
    margin-bottom:13px
}
.production {
    background:var(--chocolate);
    color:var(--cream)
}
.production .eyebrow {
    color:#e6b67f
}
.production em {
    color:#e6b67f
}
.production p:not(.eyebrow) {
    color:#d8cbbd
}
.production .split {
    gap:75px
}
.production .section-lead {
    margin:24px 0 16px
}
.example {
    border:1px solid #80654c;
    background:#443220;
    padding:35px;
    border-radius:var(--radius)
}
.example h3 {
    font-size:1.7rem
}
.example dl {
    margin:20px 0
}
.example dl>div {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:14px 0;
    border-bottom:1px solid #6b523c
}
.example dd {
    margin:0
}
.example .example-total {
    font-size:1.35rem;
    font-weight:600;
    color:#f3c997;
    border:0;
    padding-top:24px
}
.manifesto-shot {
    max-width:960px;
    margin:55px auto 0;
    color:var(--ink)
}
.production .product-shot figcaption {
    color:var(--muted)
}
.steps {
    list-style:none;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:45px;
    margin:45px 0 0
}
.steps li {
    border-top:1px solid #ccb89d;
    padding-top:22px
}
.steps span {
    font-size:.85rem;
    color:#936332
}
.steps h3 {
    margin:20px 0 15px;
    max-width:300px
}
.pricing {
    background:var(--cream)
}
.pricing-grid {
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:24px;
    align-items:stretch
}
.pricing-grid>div:first-child {
    padding-right:20px
}
.pricing .muted {
    font-size:.8rem;
    margin-top:20px
}
.price-card {
    border:1px solid #d5c6b2;
    padding:32px 26px;
    border-radius:var(--radius);
    background:var(--surface);
    display:flex;
    flex-direction:column;
    justify-content:end;
    position:relative
}
.price-card.featured {
    border:2px solid #9d6c38
}
.price {
    font-size:2.8rem;
    letter-spacing:-.06em;
    font-weight:600;
    margin:22px 0 14px;
    line-height:1.1
}
.price span {
    font-size:.8rem;
    font-weight:400;
    letter-spacing:0;
    margin-left:7px;
    color:var(--muted)
}
.price-card>p:not(.price) {
    font-size:.8rem;
    color:var(--muted)
}
.price-card .button {
    margin-top:28px
}
.plan-label {
    position:absolute;
    top:-12px;
    left:22px;
    background:#95602d;
    color:white;
    border-radius:5px;
    padding:3px 10px;
    font-size:.6rem;
    letter-spacing:.09em
}
.faq .split {
    align-items:start
}
.faq h2 {
    margin-bottom:20px
}
.faq details {
    border-bottom:1px solid var(--line);
    padding:20px 0
}
.faq details:first-child {
    padding-top:0
}
.faq summary {
    font-weight:600;
    font-size:.92rem;
    cursor:pointer;
    padding:6px 0;
    min-height:38px
}
.faq details p {
    font-size:.87rem;
    color:var(--muted);
    padding:15px 0 5px
}
.login-section {
    background:#f3ede3
}
.login-section h2 {
    margin-bottom:22px
}
.login-card {
    background:white;
    padding:35px;
    border-radius:var(--radius);
    border:1px solid var(--line);
    max-width:480px;
    width:100%;
    justify-self:end
}
.login-card h3 {
    margin-bottom:22px
}
.login-card label {
    display:block;
    font-size:.8rem;
    font-weight:600;
    margin:14px 0 6px
}
.login-card input:not([type=radio]) {
    width:100%;
    padding:12px 14px;
    min-height:48px;
    border:1px solid #bbafa1;
    border-radius:7px;
    background:#fff;
    font-size:1rem;
    color:var(--ink)
}
.login-card .button {
    width:100%;
    margin-top:18px
}
.login-card .small {
    margin-top:15px
}
.separator {
    text-align:center;
    margin-top:16px;
    font-size:.75rem;
    color:var(--muted)
}
#login-error {
    display:none;
    background:#fff0ed;
    color:#9c251a;
    border:1px solid #e6b4ab;
    padding:12px;
    border-radius:6px;
    font-size:.8rem
}
#login-error.show {
    display:block
}
#lojas-picker {
    display:none
}
#lojas-list label {
    padding:10px;
    border:1px solid var(--line);
    border-radius:7px
}
.final-cta {
    text-align:center;
    background:var(--chocolate);
    color:var(--cream)
}
.final-cta .eyebrow {
    justify-content:center;
    color:#e6b67f
}
.final-cta h2 {
    margin-bottom:32px
}
.site-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding-block:38px
}
.site-footer>p {
    font-size:.75rem;
    max-width:250px;
    color:var(--muted)
}
.site-footer>div>a {
    font-size:.75rem;
    text-underline-offset:4px
}
.skip-link {
    position:fixed;
    top:8px;
    left:8px;
    background:var(--chocolate);
    color:white;
    padding:12px;
    z-index:30;
    transform:translateY(-150%)
}
.skip-link:focus {
    transform:translateY(0)
}
@media(min-width:1450px) {
    .hero-grid {
        gap:60px
    }
    .hero-shot {
        width:650px;
        max-width:calc(100% + 30px)
    }
}
@media(max-width:1000px) {
    .container {
        width:calc(100% - 48px)
    }
    .hero-grid {
        gap:30px;
        grid-template-columns:1fr 1fr
    }
    .hero-shot {
        transform:none
    }
    .shot-label {
        display:none
    }
    .split {
        gap:40px
    }
    .pricing-grid {
        grid-template-columns:1fr 1fr
    }
    .pricing-grid>div:first-child {
        grid-column:1/-1;
        max-width:600px;
        padding:0 0 20px
    }
    .section {
        padding:75px 0
    }
    .features-grid {
        gap:12px
    }
    .feature-card {
        padding:24px
    }
    .workflow {
        gap:14px;
        grid-template-columns:1fr 20px 1fr 20px 1fr
    }
}
@media(max-width:760px) {
    .container {
        width:calc(100% - 40px)
    }
    .navigation {
        height:74px
    }
    .nav-links {
        gap:16px;
        font-size:.72rem
    }
    .nav-links a:nth-child(2) {
        display:none
    }
    .hero {
        padding-top:50px
    }
    .hero-grid,.split {
        grid-template-columns:1fr
    }
    .hero-grid {
        gap:35px
    }
    .hero h1 {
        max-width:590px
    }
    .hero-copy .lead {
        max-width:none
    }
    .hero-shot {
        max-width:620px
    }
    .benefit-strip {
        flex-wrap:wrap;
        justify-content:start;
        gap:15px 24px;
        margin-top:36px;
        font-size:.65rem
    }
    .section {
        padding:60px 0
    }
    .features-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .section-heading {
        display:block
    }
    .section-heading>p {
        max-width:none;
        margin-top:22px
    }
    .workflow {
        grid-template-columns:1fr;
        gap:26px
    }
    .workflow>div {
        padding-left:20px;
        border-left:2px solid #cba676
    }
    .flow-arrow {
        display:none
    }
    .steps {
        grid-template-columns:1fr;
        gap:28px
    }
    .steps h3 {
        max-width:none
    }
    .split,.production .split {
        gap:30px
    }
    .manifesto-shot {
        margin-top:35px
    }
    .login-card {
        max-width:none
    }
    .site-footer {
        flex-wrap:wrap
    }
    .site-footer>p {
        max-width:220px
    }
    .faq .split {
        gap:35px
    }
}
@media(max-width:440px) {
    .navigation {
        gap:15px
    }
    .brand {
        font-size:1.55rem
    }
    .brand img {
        width:34px
    }
    .nav-links {
        display:none
    }
    .features-grid,.pricing-grid {
        grid-template-columns:1fr
    }
    .pricing-grid>div:first-child {
        grid-column:auto
    }
    .hero h1 {
        font-size:2.5rem
    }
    .actions .button {
        width:100%;
        padding-inline:14px
    }
    .actions {
        gap:20px
    }
    .feature-card {
        padding:26px
    }
    .shot-heading {
        padding:12px;
        font-size:.55rem
    }
    .product-shot figcaption {
        font-size:.6rem
    }
    .example,.login-card {
        padding:26px
    }
    .site-footer>p {
        max-width:none
    }
    .benefit-strip {
        display:grid;
        gap:12px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*::before,*::after {
        transition:none!important
    }
    .button:hover {
        transform:none
    }
}