/* Wispcut's inner pages (Pricing, Help, Privacy, Terms): the home page's look, lifted from its inline styles. The home page keeps its own. */
@font-face{font-family:Bricolage;src:url(/assets/fonts/bricolage-grotesque.woff) format("woff");font-weight:200 800;font-display:swap}
@font-face{font-family:Jakarta;src:url(/assets/fonts/plus-jakarta-sans.woff) format("woff");font-weight:200 800;font-display:swap}
@font-face{font-family:Borel;src:url(/assets/fonts/borel.woff) format("woff");font-display:swap}

*{box-sizing:border-box}
body{margin:0;padding:0;background:#FFF6E5;color:#1E1A17;font-family:Jakarta;overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px;position:relative}
nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
nav .links{display:flex;gap:28px;font:700 15px Jakarta;align-items:center}
nav .links a{color:inherit;text-decoration:none}
/* The wordmark as a mask, so one file draws it in any color (currentColor). */
.wordmark{display:inline-block;width:116px;height:34px;background:currentColor;-webkit-mask:url(/assets/img/wordmark.svg) no-repeat center/contain;mask:url(/assets/img/wordmark.svg) no-repeat center/contain;flex:none}
.foot .wordmark{width:96px;height:28px}
.btn{display:inline-block;padding:15px 28px;border-radius:999px;font:800 16px Jakarta;text-decoration:none;position:relative;white-space:nowrap}
.btn.sm{padding:10px 20px;font-size:14px}
h1{font:800 84px/0.98 Bricolage;letter-spacing:-.025em;margin:0}
h2{font:800 44px/1.05 Bricolage;letter-spacing:-.02em;margin:0 0 14px}
h3{font:800 24px/1.15 Bricolage;margin:0 0 8px}
p{font:500 18px/1.5 Jakarta;margin:0}
.hand{font-family:Borel;font-weight:400}
a{color:#E4452B}
a:focus-visible,.btn:focus-visible,nav .links a:focus-visible{outline:3px solid #E6E24B;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:12px;z-index:50;padding:12px 18px;border-radius:999px;background:#1E1A17;color:#FFF6E5;font:700 15px Jakarta;text-decoration:none}
.skip:focus{left:16px}

section{padding:90px 0;position:relative;overflow:hidden}
.hero{padding:0 0 90px}
.hero .intro{padding-top:50px;max-width:760px;position:relative}
.hero .intro p{font-size:21px;margin:26px 0 0;max-width:600px}
.grain:before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22300%22%20height%3D%22300%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.55%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22300%22%20height%3D%22300%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E");opacity:.28;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.grain>*{position:relative;z-index:1}
/* The scalloped edge under a colored band; --c is the band's color. */
.scallop{height:26px;background:radial-gradient(circle at 50% 0,var(--c) 0 24px,transparent 25px) 0 0/52px 26px}
.stk{display:inline-block;padding:9px 20px;border-radius:999px;font:26px/1 Borel;padding-top:14px;transform:rotate(-4deg);box-shadow:0 10px 24px -14px rgba(0,0,0,.35)}
.rel{position:relative;display:inline-block;z-index:0}
.card{border-radius:28px;padding:30px;position:relative}
.paper{background:#fff;box-shadow:0 24px 50px -30px rgba(60,20,10,.4)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* Reading pages (Privacy, Terms, Help): one strong text column. */
.prose{max-width:760px}
.prose h2{font-size:34px;margin:56px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;margin:30px 0 6px}
.prose p,.prose li{font:500 18px/1.55 Jakarta;margin:0 0 16px}
.prose ul{padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:8px}
.prose .lead{font-size:21px;color:#6b645e}
.dated{font:700 14px Jakarta;color:#8a827b;margin-top:18px}
/* A question and its answer on Help. */
.qa{margin:0 0 26px}
.qa h3{margin-bottom:6px}
/* The page's own contents list, as colored sticker pills. */
.jump{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.jump a{display:inline-block;padding:9px 18px;border-radius:999px;font:700 14px Jakarta;text-decoration:none;background:#fff;color:#1E1A17;box-shadow:0 10px 24px -16px rgba(60,20,10,.5)}

/* Pricing cards. */
.plan{padding:34px 30px 30px}
.plan .for{font:700 15px/1.35 Jakarta;margin:6px 0 0;opacity:.78}
.plan .price{font:800 56px/1 Bricolage;letter-spacing:-.03em;margin:18px 0 4px}
.plan .per{font:700 15px Jakarta;color:#6b645e;margin-bottom:22px}
.plan ul{list-style:none;padding:0;margin:0 0 26px}
.plan li{font:500 16px/1.45 Jakarta;padding:7px 0 7px 30px;position:relative}
.plan li:before{content:"";position:absolute;left:0;top:11px;width:18px;height:18px;border-radius:50%;background:var(--tick,#5E7A3C)}
.plan li:after{content:"";position:absolute;left:5px;top:15px;width:8px;height:4px;border-left:2.5px solid #FFF6E5;border-bottom:2.5px solid #FFF6E5;transform:rotate(-45deg)}

/* The "in one breath" lists on Pricing: a bold label, then the answer. */
.pick{list-style:none;padding:0;margin:14px 0 0}
.pick li{font:500 17px/1.45 Jakarta;padding:9px 0;border-top:0}
.pick li+li{margin-top:2px}
.pick b{display:block;font:800 13px/1.2 Jakarta;letter-spacing:.06em;text-transform:uppercase;color:#E4452B;margin-bottom:3px}

.foot{padding:70px 0 44px;display:flex;justify-content:space-between;align-items:flex-end}
.footlinks{display:flex;gap:24px;font:700 14px Jakarta;flex-wrap:wrap}
.footlinks a{color:#8a827b;text-decoration:none}
.footlinks a:hover{color:#E4452B}

@media(max-width:900px){
.wrap{padding:0 22px}
nav .links a:not(.btn){display:none}
h1{font-size:54px} h2{font-size:36px} h3{font-size:22px} section{padding:64px 0}
.hero{padding-bottom:70px}
.hero .intro{padding-top:20px}
.hero .intro p{font-size:19px}
.prose h2{font-size:28px}
.grid2,.grid3{grid-template-columns:1fr}
.stk{font-size:22px;padding:8px 16px;padding-top:12px}
.foot{flex-direction:column;align-items:flex-start;gap:24px}
.deco{display:none}
}
@media(max-width:560px){
h1{font-size:44px} h2{font-size:32px}
.plan .price{font-size:46px}
}