:root{
  /* identidade pulso: papel, tinta, sinal (tomate) e musgo */
  --paper:#F3EFE7; --paper2:#E9E3D7; --ink:#17150F; --soft:#5E594F; --line:#D6CEBF;
  --accent:#E4442A; --ok:#2E5B3E;
}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* topo */
.top{border-bottom:1px solid var(--line)}
.nav{display:flex;justify-content:space-between;align-items:center;height:60px}
.brand{text-decoration:none;display:flex;align-items:center;gap:10px}
.brand span{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;font-size:26px;letter-spacing:-.03em;line-height:1}
.mark{width:34px;height:34px;background:var(--ink);border-radius:9px}
.mark path{fill:none;stroke:var(--paper);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.mark circle{fill:var(--accent)}
.brand:hover .mark circle{animation:beat .9s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.35)}}
.mark circle{transform-origin:54px 36px}

/* linha de pulso: elemento-assinatura */
.pulse-line{display:block;width:100%;height:46px;margin-top:30px}
.pulse-line path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.8s .3s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.pulse-line path{animation:none;stroke-dashoffset:0}}
.nav nav a{margin-left:20px;text-decoration:none;color:var(--soft);font-size:15px}
.nav nav a:hover{color:var(--ink)}

/* abertura */
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:72px 20px 64px}
.kicker{font-size:13px;color:var(--soft);margin-bottom:18px}
.intro h1{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(34px,4.6vw,52px);line-height:1.08;letter-spacing:-.02em}
.intro h1 em{font-style:italic;color:var(--accent)}
.intro p{color:var(--soft);margin-top:20px;max-width:30em}
.intro .note{margin-top:28px;font-size:14px;color:var(--soft);border-left:2px solid var(--accent);padding-left:12px}

/* demo de loja */
.demo{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 0 var(--line),0 18px 40px -24px rgba(40,30,10,.35);overflow:hidden}
.demo .bar{display:flex;gap:6px;align-items:center;padding:10px 12px;border-bottom:1px solid #eee;background:#FAFAF8}
.demo .bar b{width:9px;height:9px;border-radius:50%;background:#ddd}
.demo .bar span{margin-left:10px;font-size:12px;color:#999}
.demo .body{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:20px}
.prod{background:linear-gradient(160deg,#E9DFCF,#D8C7AA);border-radius:6px;aspect-ratio:3/4;position:relative}
.prod::after{content:"";position:absolute;inset:28% 22%;border-radius:4px;background:#C9B18A}
.demo h4{font-size:16px;font-weight:600}
.demo .price{font-size:20px;font-weight:600;margin:4px 0 12px}
.qty{display:flex;align-items:center;gap:10px}
.qty .box{display:flex;border:1px solid #ccc;border-radius:6px;overflow:hidden}
.qty .box span{padding:6px 12px;font-size:15px}
.qty .box span+span{border-left:1px solid #ccc}
.qty button{background:var(--ink);color:#fff;border:0;border-radius:6px;padding:8px 14px;font:inherit;font-size:14px}
.rule{margin-top:12px;font-size:13px;background:#FFF4EF;border:1px solid #F3C9BC;color:#8A2E18;border-radius:6px;padding:8px 10px}
.rule strong{font-weight:600}
.caption{font-size:12px;color:var(--soft);padding:0 20px 16px}

/* apps */
.section{padding:56px 20px;border-top:1px solid var(--line)}
.section .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-bottom:22px}
.section h2{font-family:"Fraunces",Georgia,serif;font-weight:600;font-style:italic;font-size:34px;letter-spacing:-.02em;position:relative;padding-bottom:10px}
.section h2::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:12px;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 12'%3E%3Cpath d='M0 7h26l4-6 6 10 4-7 3 3h29' fill='none' stroke='%23E4442A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.section .sub{color:var(--soft)}
.list{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:44px 1.1fr 2fr 120px;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.row .n{color:var(--soft);font-size:14px}
.row h3{font-size:18px;font-weight:600}
.row p{color:var(--soft);font-size:15px}
.row .st{font-size:13px;text-align:right}
.st.dev{color:var(--accent)}
.st.next{color:var(--soft)}
.st.dev::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px;animation:beat .9s ease-in-out infinite}

/* como funciona */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.how div{border-top:2px solid var(--ink);padding-top:14px}
.how b{display:block;margin-bottom:6px}
.how p{color:var(--soft);font-size:15px}

.foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:1px solid var(--line);padding:24px 20px 40px;color:var(--soft);font-size:14px}

/* páginas de texto */
.doc{max-width:720px;padding:56px 20px 80px}
.doc h1{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:clamp(30px,4.5vw,42px);letter-spacing:-.02em;margin-bottom:6px}
.doc h2{font-size:18px;font-weight:600;margin:30px 0 6px}
.doc p,.doc li{color:var(--soft)}
.doc ul{padding-left:20px}
.doc a{color:var(--accent)}

@media (max-width:820px){
  .intro{grid-template-columns:1fr;gap:36px;padding-top:48px}
  .row{grid-template-columns:32px 1fr;gap:4px 12px}
  .row p{grid-column:2}
  .row .st{grid-column:2;text-align:left}
  .how{grid-template-columns:1fr}
}
@media (max-width:420px){.demo .body{grid-template-columns:90px 1fr}}