@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Zilla+Slab:wght@400;500;600;700&display=swap');
:root{--mud:#F0EADF;--mud-deep:#E6DCC4;--charcoal2:#262019;--rust2:#A6502E;--gold4:#C9962E;--cream4:#FAF5E9;--muted13:#7E7466}*{box-sizing:border-box}body{margin:0;background:var(--mud);color:var(--charcoal2);font:17px/1.65 Nunito,Arial,sans-serif;background-image:radial-gradient(ellipse at 20% 30%,#b89a6420,transparent 40%),radial-gradient(ellipse at 80% 70%,#9b582213,transparent 33%)}h1,h2,h3,.brand{font-family:'Zilla Slab',Georgia,serif;line-height:1.08}h1{font-size:clamp(46px,7vw,90px);font-weight:500;letter-spacing:-2px}h2{font-size:clamp(34px,4vw,55px);font-weight:500}h3{font-size:28px}a{color:inherit;text-underline-offset:5px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button,.button{display:inline-block;background:var(--charcoal2);color:var(--mud);padding:13px 24px;border:1px solid var(--charcoal2);border-radius:0;cursor:pointer;text-decoration:none;font-weight:800}button:hover,.button:hover{filter:brightness(1.2)}.secondary{background:var(--rust2);border-color:var(--rust2);color:var(--cream4)}.outline{color:var(--rust2);border-color:var(--rust2);background:transparent}:focus-visible{outline:2px solid var(--gold4);outline-offset:4px}header{position:sticky;top:0;z-index:20;background:var(--mud);border-bottom:1px solid;padding:17px 5%;display:flex;align-items:center;gap:30px}.brand{font-size:29px;text-decoration:none;margin-right:auto}.brand span{border:3px solid;padding:0 6px;margin-right:10px}nav{display:flex;gap:25px;align-items:center}nav a{text-decoration:none;font-size:14px;font-weight:800}.cart-count{background:var(--rust2);color:var(--cream4);padding:2px 6px}.wrap{max-width:1200px;margin:auto;padding:70px 30px}.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:12px;font-weight:800}.hero{min-height:790px;display:grid;place-items:center;text-align:center;background:linear-gradient(#f0eadf11,#f0eadf44),url('assets/hero-mudcloth.svg') center/cover;border-bottom:12px double}.hero-inner{max-width:800px;padding:65px 30px;background:#f0eadff2;position:relative}.hero h1{font-size:clamp(65px,8.5vw,116px);margin:23px 0}.hero p{max-width:480px;margin:25px auto 35px}.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.woven{border-block:9px double;border-image:repeating-linear-gradient(90deg,#262019 0 6px,transparent 6px 12px) 9}.steps{display:flex;justify-content:space-between;gap:50px;margin:65px 0}.step{flex:1}.totem{font-size:65px;display:block;animation:draw 1.2s ease both}.step h3{font:800 14px Nunito;letter-spacing:4px}.shields{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}.shield{text-align:center;transform:rotate(-2deg)}.shield:nth-child(even){transform:rotate(3deg)}.shield img{width:100%}.shield p{font-size:13px}.quote{text-align:center;padding:75px 12%;border:1px solid;position:relative;background:var(--mud-deep)}.quote:after{content:'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||';position:absolute;bottom:-25px;left:0;right:0;letter-spacing:7px;overflow:hidden;height:25px;animation:sway 3s ease-in-out infinite alternate}.quote blockquote{font:40px/1.25 'Zilla Slab';margin:0 0 25px}.yarn{display:flex;align-items:center;justify-content:center;gap:35px;padding:80px 20px;font:32px 'Zilla Slab';text-decoration:none}.yarn b{font-size:110px;line-height:1;color:var(--rust2);animation:thread 5s ease-in-out infinite}.newsletter{background:var(--charcoal2);color:var(--mud);text-align:center;padding:55px 25px}.newsletter button{background:var(--mud);color:var(--charcoal2)}form{display:grid;gap:15px}label{display:grid;gap:6px;font-size:14px;font-weight:800}input,textarea,select{width:100%;padding:12px;background:var(--cream4);border:1px solid;color:var(--charcoal2)}textarea{min-height:140px}.newsletter form{max-width:550px;margin:auto;grid-template-columns:1fr auto}.panel,.card{border:1px solid;padding:30px;position:relative;background:var(--cream4)}.panel:before,.card:before{content:'╳';position:absolute;right:12px;top:5px;font-size:27px;transition:transform .3s}.card:hover{transform:translateY(-5px)}.card:hover:before{transform:rotate(20deg)}.boards{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin:45px 0}.board{background:var(--mud-deep);border:1px solid;box-shadow:4px 6px 0 #26201920}.board>button{width:100%;padding:25px 15px;background:transparent;color:var(--charcoal2);border:0}.board .totem{font-size:90px}.board h2{font-size:32px}.board-details{padding:22px;border-top:1px solid}.badge{display:block;background:var(--charcoal2);color:var(--mud);font-size:10px;letter-spacing:2px;padding:8px}.price{font:52px 'Zilla Slab'}.promo{padding:20px;background:var(--rust2);color:var(--cream4);text-align:center;font-weight:800}.trust{display:flex;justify-content:space-around;gap:20px;padding:30px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:750px}th,td{padding:17px;border:1px solid;text-align:left}td:nth-child(4),th:nth-child(4){background:var(--charcoal2);color:var(--mud)}.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:65px 0}.feature:nth-child(even) img{order:2}.feature img{width:100%;border:1px solid}.icons,.related{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.portal{max-width:760px;margin:40px auto;padding:35px;border:14px double;background:var(--cream4);border-radius:180px 180px 0 0}.lintel{text-align:center;padding:40px 20px;border-bottom:10px double}.gallery img{width:100%;cursor:zoom-in}.thumbs{display:flex;gap:10px}.thumbs button{padding:0;background:transparent;width:33.3%}.portal section{padding:30px 0;border-bottom:1px solid}.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.specs div{padding:10px 0;border-bottom:1px solid #26201930}.specs dt{font-size:12px;font-weight:800}.specs dd{margin:0}.bar{display:grid;grid-template-columns:40px 1fr 45px;gap:10px;align-items:center}.bar progress{width:100%;accent-color:var(--charcoal2)}.review{padding:20px 0;border-bottom:1px solid #26201940}.threshold{background:var(--mud-deep);padding:25px!important}.delivery{color:#78530f;font-weight:800}.small{font-size:13px}.demo{background:var(--mud-deep);padding:15px;text-align:center;font-size:14px}.checkout{max-width:620px;margin:auto;padding:60px 30px}.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:40px}details{border-bottom:1px solid;padding:20px;background:var(--cream4)}summary{cursor:pointer;font-family:'Zilla Slab';font-size:23px}footer{padding:60px 5% 140px;border-top:10px double;background:var(--mud-deep)}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:40px}.footer-grid a{display:block}.confidential{border-top:1px solid;padding-top:25px;font-size:14px;margin-top:35px}.cookie{position:fixed;bottom:15px;left:3%;right:3%;z-index:30;padding:20px;background:var(--cream4);border:1px solid;box-shadow:0 4px 30px #26201930;display:flex;align-items:center;gap:15px}.cookie p{margin:0;margin-right:auto;font-size:14px}dialog{max-width:900px;width:90%;background:var(--mud);border:1px solid;padding:25px}dialog img{width:100%}dialog::backdrop{background:#262019bb}.status{font-weight:800}.legal{max-width:850px}.legal h1{font-size:60px}.skip{position:absolute;top:-100px}.skip:focus{top:0;z-index:100}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes sway{to{transform:skewX(5deg)}}@keyframes draw{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes thread{50%{transform:translateX(10px) rotate(7deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:800px){header{gap:12px;flex-wrap:wrap}nav{gap:15px;flex-wrap:wrap}.brand{font-size:25px}nav .button{padding:8px}.hero{min-height:680px}.boards,.shields{grid-template-columns:repeat(2,1fr)}.steps{flex-direction:column;gap:20px}.feature,.two-col{grid-template-columns:1fr}.feature:nth-child(even) img{order:0}.footer-grid{grid-template-columns:1fr}.portal{padding:20px;border-width:8px}.related{grid-template-columns:1fr}.cookie{flex-wrap:wrap}.trust{flex-wrap:wrap}.yarn{font-size:24px}.quote blockquote{font-size:30px}}[hidden]{display:none!important}.board-details:not([hidden]){animation:draw .3s ease both}

/* Refined studio visual system */
:root{--mud:#f8f7f3;--mud-deep:#eeeae1;--charcoal2:#203b34;--rust2:#b96142;--gold4:#c2a66c;--cream4:#fffefa;--muted13:#747e76}body{background:#f8f7f3;color:var(--charcoal2);font-size:16px}h1,h2,h3{letter-spacing:-.045em}h2{font-size:clamp(32px,4vw,52px)}p{color:#64716a}.small{line-height:1.7}header{background:#f8f7f3ed;backdrop-filter:blur(18px);border-bottom:1px solid #203b3412;padding:19px 5%;gap:24px}.brand{font-size:29px;letter-spacing:-1px}.brand span{display:inline-grid;place-items:center;background:#203b34;color:#f5f0df;border:0;border-radius:11px;width:35px;height:37px;font-size:24px}.button,button{border-radius:8px;font-size:14px;font-weight:700;padding:14px 23px;box-shadow:0 4px 8px #203b3408;transition:transform .2s,box-shadow .2s,background .2s}.button:hover,button:hover{transform:translateY(-2px);filter:none;box-shadow:0 7px 18px #203b341a}.secondary{background:transparent;color:#203b34;border-color:#203b3428}.cart-count{border-radius:20px;font-size:11px}nav a{font-size:13px}nav{gap:28px}.eyebrow{letter-spacing:2.2px;font-size:10px;color:#7c866d}.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1fr 1.15fr;gap:36px;min-height:730px;padding:80px max(5%,calc((100vw - 1320px)/2));text-align:left;background:radial-gradient(ellipse at 80% 25%,#e3e7d9 0,transparent 50%),#f8f7f3;border-bottom:1px solid #203b3412}.hero-inner{max-width:none;background:none;padding:30px 0}.hero h1{font-size:clamp(54px,5.7vw,85px);letter-spacing:-.065em;line-height:1.05;margin:25px 0}.hero h1 em{font-weight:400;color:#b96142}.hero p{margin:26px 0;max-width:430px;line-height:1.8}.hero .actions{justify-content:flex-start}.hero .small{font-size:11px;color:#7b8277}.hero-glow{position:absolute;width:500px;height:500px;border:1px solid #b7c2a933;border-radius:50%;right:-190px;top:30px;z-index:-1}.hero-glow:before{content:'';position:absolute;inset:40px;border:1px solid #b7c2a933;border-radius:50%}.workspace-preview{position:relative;align-self:center;background:#fffefa;border:1px solid #203b3418;border-radius:15px;box-shadow:0 35px 70px -30px #203b3455,0 8px 24px #203b3408;transform:perspective(1600px) rotateY(-5deg) rotateZ(1deg);font:12px/1.5 Nunito,Arial,sans-serif;text-align:left}.preview-top{display:flex;align-items:center;gap:12px;padding:19px;border-bottom:1px solid #203b3410}.preview-logo{font-size:22px;color:#b96142}.preview-label{font-size:8px;letter-spacing:1.2px;color:#8a9388}.preview-top>.preview-label{margin-left:auto}.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e8e9dd;font-size:10px;font-weight:bold}.terracotta{background:#f4dfd1;color:#ad6144}.preview-body{display:grid;grid-template-columns:125px 1fr;min-height:350px}.preview-nav{background:#f4f5ee;border-radius:0 0 0 15px;padding:23px 13px;display:flex;flex-direction:column;gap:19px;font-size:10px;color:#859084}.preview-nav b{background:#e4e9de;border-radius:5px;color:#324b3c;padding:9px;margin:-5px}.preview-section{font-size:7px;letter-spacing:1.5px}.preview-note{margin-top:auto;padding-top:50px;font-family:Georgia;font-style:italic;font-size:12px;color:#8b9586}.preview-content{padding:26px 20px}.preview-heading{display:flex;align-items:center;justify-content:space-between}.preview-heading .eyebrow{font-size:6px}.preview-heading h2{font-size:23px;margin:8px 0 22px}.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:21px}.preview-metrics>div{border:1px solid #203b3410;border-radius:7px;padding:12px 9px}.preview-metrics span{display:block;font-size:8px;color:#849083}.preview-metrics strong{font-size:22px;font-weight:600;display:block;margin-top:7px}.preview-metrics small{display:block;font-size:7px;color:#8b967d;font-weight:400}.preview-project{position:relative;padding:13px;border:1px solid #203b3410;border-radius:8px;display:grid;grid-template-columns:80px 1fr;gap:14px}.project-art{background:#d7dfcc;color:#3d563d;border-radius:5px;padding:5px 9px;font:italic 60px/1 Georgia;display:block}.project-art>span{display:block;font:5px/1.5 Arial;letter-spacing:1px;margin-top:7px}.preview-project h3{font-size:18px;margin:7px 0}.preview-project p{font-size:8px;margin:5px 0 14px}.progress-track{height:4px;background:#e9ecdf;border-radius:6px;margin-bottom:8px}.progress-track span{display:block;width:75%;height:100%;background:#8a9a75}.status-pill{position:absolute;right:10px;top:10px;font-size:7px;background:#f4e8d3;color:#98703b;padding:4px 7px;border-radius:10px}.preview-file{display:flex;gap:10px;align-items:center;margin-top:17px;font-size:9px}.preview-file>span:first-child{font-size:25px;color:#bc8867}.preview-file small{display:block;font-size:7px;color:#8e978e}.file-tag{margin-left:auto;border:1px solid #203b3415;border-radius:4px;padding:3px 5px;font-size:7px}.floating-note{position:absolute;bottom:-22px;right:20px;display:flex;gap:13px;align-items:center;background:white;padding:14px 20px;border:1px solid #203b3410;border-radius:10px;box-shadow:0 12px 30px #203b3412}.floating-note>span{background:#e8efdf;border-radius:50%;padding:5px 10px;color:#6e8758}.floating-note small{display:block;color:#929b8b;font-size:9px;margin-top:4px}.wrap{padding:85px 30px}.steps{gap:20px;margin:40px 0 10px}.step{border:1px solid #203b3412;background:#fffefa;padding:30px;border-radius:12px}.step .totem{font-size:42px;color:#b96142}.step h3{letter-spacing:2px;font-size:11px}.step p{font-size:14px}.woven{border:0;border-top:1px solid #203b3414}.shield{background:#eeeee5;border-radius:90px 90px 12px 12px;padding:22px 16px;transform:none!important}.shield img{height:120px;object-fit:contain}.shield h3{font-size:22px}.shield p{font-size:11px}.quote{background:#e8eddf;border:0;border-radius:18px;padding:65px 8%}.quote:after{display:none}.quote blockquote{font-size:clamp(28px,4vw,47px);letter-spacing:-1px}.quote>span{font-size:9px;letter-spacing:3px;color:#7b8972}.yarn{font-size:28px}.yarn b{font-size:75px}.newsletter{background:#203b34;background-image:radial-gradient(ellipse at top left,#59745c77,transparent 60%);padding:65px 25px}.newsletter h2{color:#f4f1e6}.newsletter p{color:#bdc8b9}.newsletter input{background:#ffffff0c;color:#fff;border-color:#ffffff30}.newsletter input::placeholder{color:#c4cbbb}.newsletter form{gap:10px}.newsletter button{background:#e6c99b}.panel,.card,.board{border:1px solid #203b3418;border-radius:12px;box-shadow:0 6px 20px #203b3405}.panel:before,.card:before{display:none}.board{background:#fffefa;overflow:hidden}.board .totem{font-size:60px;color:#b96142}.board:hover{box-shadow:0 15px 35px #203b3412}.badge{background:#dce6d0;color:#425d37;letter-spacing:1px}.board-details{border-color:#203b3414}.promo{background:#e9dfcc;color:#6b5939;border-radius:8px;font-size:13px}.trust{font-size:12px;color:#7b8877}th,td{border-color:#203b3414;font-size:13px}th{background:#eeeee5}.portal{border:1px solid #203b3422;border-radius:22px;padding:38px;box-shadow:0 20px 60px #203b3408}.lintel{border-bottom:1px solid #203b3418}.portal section{border-color:#203b3418}.threshold{border-radius:12px}.feature img{border:1px solid #203b3415;border-radius:12px}.checkout{background:white;border:1px solid #203b3414;border-radius:16px;box-shadow:0 15px 45px #203b3407;margin:45px auto}.demo{background:#e8eddf;color:#53654b;font-size:12px}input,select,textarea{border:1px solid #203b3425;border-radius:7px;background:#fffefa}input:focus,textarea:focus{outline:2px solid #83977355;border-color:#839773}details{border-color:#203b3418}footer{background:#edece4;border-top:1px solid #203b3412;padding-top:70px}footer h3{font-size:24px}footer a{color:#68756a;text-decoration:none;font-size:13px;margin-bottom:8px}.confidential{border-color:#203b3418}.cookie{border-color:#203b3420;border-radius:12px;box-shadow:0 8px 40px #203b3418;padding:16px 22px}.cookie p{font-size:12px}.cookie button{font-size:12px;padding:9px 16px}
@media(min-width:1400px){.hero{gap:60px}.workspace-preview{min-width:570px}}
@media(max-width:1050px){.hero{grid-template-columns:1fr;padding:55px 6% 80px;gap:25px}.hero-inner{text-align:center;max-width:650px;margin:auto}.hero h1{font-size:76px}.hero p{margin:25px auto}.hero .actions{justify-content:center}.workspace-preview{width:min(650px,100%);margin:auto;transform:none}.hero{min-height:0}}
@media(max-width:600px){header{padding:15px 5%}nav{gap:14px;width:100%;justify-content:space-between}nav a{font-size:11px}nav .button{padding:8px 10px}.hero h1{font-size:54px}.hero p{font-size:14px}.hero .actions .button{padding:12px 15px;font-size:12px}.preview-body{grid-template-columns:82px 1fr;min-height:290px}.preview-nav{padding:18px 8px;font-size:8px;gap:15px}.preview-content{padding:18px 11px}.preview-heading h2{font-size:19px}.preview-heading .eyebrow{font-size:5px}.preview-top{padding:13px;font-size:10px;gap:7px}.preview-top>.preview-label{font-size:6px}.preview-project{grid-template-columns:55px 1fr;padding:9px;gap:8px}.project-art{font-size:44px}.status-pill{position:static;grid-column:2;justify-self:start}.preview-metrics strong{font-size:17px}.preview-metrics>div{padding:8px 5px}.preview-metrics span{font-size:6px}.preview-project h3{font-size:16px}.preview-note{font-size:10px}.floating-note{right:10px;padding:10px 13px}.wrap{padding:55px 23px}.shields{gap:12px}.shield{padding:18px 10px}.shield img{height:90px}.shield h3{font-size:20px}.checkout{margin:25px 15px;padding:30px 22px}.icons{grid-template-columns:1fr}.specs{grid-template-columns:1fr}.cookie{left:12px;right:12px;bottom:12px}.boards{gap:12px}.board h2{font-size:26px}.board .price{font-size:42px}}